2015年12月27日日曜日

AmazonLinuxにErlang+Elixir+Phoenixをインストールしてみた

仕事で Phoenixという、Elixirというプログラム言語で作られたWebアプリケーションフレームワークの構築検証した時のメモです。
Elixirは、Erlangという早くて 低いレイヤ向けのプログラム言語に、Ruby風の着ぐるみ(と言っていいのかわかりませんが…)を着せて、Rubyができるエンジニアが低い学習コストで高速なアプリを作れるように開発された、今時のプログラム言語です。
とりあえず今回は、サンプル画面が動いた!というレベルです。
ここからデプロイだったりチューニングだったり運用だったりを整えていかないといけないのですが、その辺はまだキャッチアップできていないので、出来次第ブログに書ければと思います。
感想としては、登場人物(プログラム)が多くて、最初はインストールするのがすごくめんどくさく感じます。 brunch.io という html/css のファイル管理ツールもつかっているため、Node.jsとかもインストールしなければいけません。

EPELリポジトリのインストール

後述する inotifywait をインストールするために、EPELリポジトリを追加します。
sudo yum install epel-release

Gitのインストール

node.jsのバージョン管理ツールであるnvmをインストールするために、Gitをインストールします。
sudo yum install git

Erlang被依存パッケージのインストール

sudo yum install ncurses ncurses-devel openssl openssl-devel gcc-c++ unixODBC unixODBC-devel fop java-1.6.0-openjdk-devel

Erlangのインストール

wget http://www.erlang.org/download/otp_src_18.0.tar.gz
tar xvzf otp_src_18.0.tar.gz
cd otp_src_18.0
./configure
以下は出力されても無視します。GUI開発用とのことで、今回は利用しないためです。
*********************************************************************
**********************  APPLICATIONS INFORMATION  *******************
*********************************************************************
wx           : wxWidgets not found, wx will NOT be usable
*********************************************************************
configureできたらmakeしてインストールします。
sudo make
sudo make install
erl
Ctrl+c -> a

Elixirのインストール

cd ~
git clone https://github.com/elixir-lang/elixir.git
cd elixir
make clean test
mv elixir /opt/
sudo ln -s /opt/elixir/bin/elixir /usr/bin/elixir
sudo ln -s /opt/elixir/bin/iex /usr/bin/iex
sudo ln -s /opt/elixir/bin/elixirc /usr/bin/elixirc
sudo ln -s /opt/elixir/bin/mix /usr/bin/mix

mixとHexのインストール

mixはErlangに付属しています。
mix
mix local.hex
mix hex

nvmのインストール

git clone https://github.com/creationix/nvm.git ~/.nvm
source ~/.nvm/nvm.sh
nvm help

npm(Node.js)のインストール

nvm ls-remote
nvm install v5.3.0
node -v

inotifywaitのインストール

sudo yum install --enablerepo=epel inotify-tools

Phoenixのインストール

mix archive.install https://github.com/phoenixframework/phoenix/releases/download/v1.1.0/phoenix_new-1.1.0.ez

Phoenixアプリテンプレートのセットアップ

mix phoenix.new hello_phoenix

brunch.ioのインストール

cd hello_phoenix
npm install brunch

charmのインストール

cd hello_phoenix
npm install charm

Phoenixアプリ起動

cd hello_phoenix
mix phoenix.server

参考にしたサイト

Dockerに頼らずにCentOS7でElixir開発環境を整備した話 - sat0yu's blog http://sat0yu.hatenablog.jp/entry/2015/08/09/193241 いまアツいJavaScript!ゼロから始めるNode.js入門〜5分で環境構築編〜 http://liginc.co.jp/web/programming/node-js/85318 ElixirとPhoenixをインストールするメモ - bokuweb.me http://blog.bokuweb.me/entry/2015/10/03/153300 Phoenix と Elixir をインストールして ブログを作りはじめます http://www.kaeruspoon.net/articles/1131 Brunch - ultra-fast HTML5 build tool http://brunch.io/ Installation · Phoenix http://www.phoenixframework.org/docs/installation Up And Running · Phoenix http://www.phoenixframework.org/docs/up-and-running

2015年12月5日土曜日

プログラミング初心者がGoに入門しようとしてサンプルアプリのテキストwikiを動かすまで

この記事は Go その2 Advent Calendar 2015 の5日目の記事です。


日付変更と共に公開できず、しかも内容も他の方の記事に比べてショボくて申し訳ありませんが、タイトルの通りサンプルとしてWeb上に公開されているテキストwikiが動くまでにやったことの記録です。

動機

同僚のリードプログラマがGo言語を使ってシステムに機能追加を行いました。
私はサーバ構築をサポートしましたが、ミドルウェアやフレームワークなど、まだまだ彼にGo言語プロダクトの責任が偏っています。そしてそもそもGoのソースコードは1ミリもわかりません…。
今後はチームとしてスマートに動けるように、責任を平準化し、ソースコードや開発手法について議論を深めたいので、私もGoを学んでみようと思いました。

成果物

結論としてはたった2ファイル
https://github.com/TearTheSky/golangStudy/blob/master/textwiki/textwiki.go
https://github.com/TearTheSky/dotfiles/blob/master/.vimrc

textwiki.go というgoプログラムができました。
これをWebサーバに持って行って起動し、Webサーバへのアクセスを127.0.0.1:9000に渡すように設定変更してあげればテキストwikiが利用できました。
Webサーバにはnginxを使っています。
ローカルでもできるやろそれ、と言われそう(実際言われました)が、netライブラリあたりが原因なのか、うまく使えなかったので、ローカルで動く版も作りたいと思います…。



やったこと

Goのインストール

最近はMacを使っています。Macの場合はhomebrewですぐにGoをインストールして環境構築を始めることができます。
brew install go で、Go1.4がインストールされ、brew update と brew upgrade を行うと1.5にバージョンアップしました。
安易にbrew upgrade していいのかちょっと怪しいですが、せっかく最新になったので使っていこうと思います。

NeoBundleとカラースキーマとvim-goのインストール

Vim pluginへの入門[NeoBundle.vim] を参考にさせていただいて、NeoBundleをインストールしました。NeoBundleはVimのプラグイン管理を楽にしてくれるプラグインです。
外部からプラグインをダウンロードしてくる方法が分かったので、既存のしょぼい .vimrc に追記して、vim-goをインストールします。
ついでにカラースキーマも変更します。背景色は黒板みたいな深緑がいいんだけど、探したり作るのがめんどくさいので、とりあえずSublimeText使ってるし馴染みのある molokai を入れます。黒板風カラースキーマの作成、あとでやろう。あとで…。


ブラウザ上からHelloWorld!する


AWSnginx+golangが動く環境を作る 」を参考にさせていただいて、Nginxサーバを立てて、そこへのアクセスをGo言語がListenする9000番ポートにパスするようにしました。
そしてHelloWorldを出力するプログラムを起動しておけば、ブラウザ上からサーバへアクセスしたときにHelloWorldが出力されます。

チュートリアルに沿って書く

古すぎて参考にしてはいけないサイトとして有名らしい(知らなかった) golang.jp にある「 Codelab: Webアプリケーションを書いてみよう 」を読みながらソースコードを増やしていきます。
コピペですコピペ。
でも、ただのコピペじゃ動きません。
古すぎるのでライブラリ名が変わったりしていてエラーになります。
エラー名をググりながら修正していきます。
WebGolangで作ろうとハマった」 などは非常に助かりました。ありがとうございました。
それから、/view/用のhtmlテンプレートがないので作ります。/edit/をコピーしてちょっといじればすぐです。

これからやらなきゃいけないこと・やりたいこと

やらなきゃいけないことは無限に湧いて出ると思いますが、とりあえず次のステップに進むために必要そうなことを何個か…



明日は tienlen さんの記事です。パッケージ管理についてということなので、読んで勉強します!




2015年12月1日火曜日

filemeal.com で好き勝手にリストを作ってみた

この記事は、filemeal Advent Calendar 2015 の1日目の記事です。

filemealとは?

フォローしている @ohashimasaki さんが開発したWebサービス「filemeal」を使ってみました。
filemealは「一般の(非Techな)人々はウェブサイトやデータベースを意識していないし、意識しなくて良いようなデータ編集・公開プラットフォームがあるべき」という発想で開発されたようです。
(たしか開発中にそんな感じのことを呟いてたような…)

何ができるの?

まず、今回のブログを書くにあたって私が作ってみたリストがこちらです。
コーヒーの淹れ方について簡単にまとめてみました。
ブログなどに埋め込むこともできるようですので、下に埋め込んでみます。


使ってみてわかったメリットを簡単に紹介すると、
  1. すぐにリストを作って公開できる
  2. それなりにオシャレな見た目のページがすぐに公開できる
  3. 入れ子の作り方さえ覚えれば自分だけのオリジナルWikiが簡単に作れる
  4. Wikipediaのように公共性や中立性のないドキュメントを書いて怒られることがない
  5. 作ったリストをiframeタグで埋め込んだり、プログラムで外部から呼び出したりできる
といった点があります。

使い方

アカウント登録はしていたものの、使い方がイマイチわかっていなかったので、せっかくだしスクリーンショットをとってゆっくり覚えていきたいと思いました。

ということで、以下使い方の簡単な説明になります。

まず、アカウント登録してログインしてみると、下のようなページになります。


これだけじゃなにができるのかよくわかりません…とりあえず自分のアイコンを変更してみます。
アイコンの変更は、右上の「設定」を押すと行えます。


ついでに背景色も変更してみました。落ち着いた色が多くて良いですね。個人的には黒板のような深い緑が欲しいです先生…。でもこの色も好き。


さて、アイコンを変更したら早速リストを作ってみましょう。とりあえず右下の「リストを作成する」をクリックして、名前を入力します。今回はなんとなく「コーヒーの淹れ方」にしました。


するとこんな感じで「コーヒーの淹れ方」ができます。
できたら、それをクリックしてみてください。


クリックするとこんな風に「コーヒーの淹れ方」のページに進むことができます。
ここにはまだなにもありません。
今度は淹れ方の種類を書いてみましょう。
「項目を一括で追加」をクリックします。


するとこんな風にテキストエリアが出てくるので、1項目1行として入力してください。
今回は手元にあったコーヒー辞典を見て、載っている淹れ方を書いてみました。


するとこんな風に一気にリストが出来上がりました。
なんか嬉しいですね。
最近はエスプレッソがかなり幅を利かせているので、一番上に表示させて、ドリップはドリップでまとめたいと思います。
リストの右側の上下の矢印を押すと、リストを上下に動かすことができます。


リストの順番を修正したので、早速公開したいと思います。右上の「共有」をクリックすると、真ん中に共有するための情報が表示されます。
「リンク」と書かれているところにあるURLをブラウザで開くと、専用のWebページが自動で作られていて、そこが表示されます。
「埋め込み」と書かれているところにあるHTMLタグはブログや自分のサイトに埋め込むことができます。
何種類かスタイルを選ぶことができるのもいいですね。


さて、これだけではちょっと物足りないので、さらに情報を付け足していきたいと思います。
エスプレッソをクリックしてエスプレッソのページに飛び、右下に「ページとして開く」があるため、そこをクリックします。
するとリストではなく「エスプレッソ」のためのページを作ることができます。
ただの文字列のリストではなくて、文章や画像や地図などを入れて、しっかりしたWebページを簡単に作ることができます。


ということで、文章と画像を入れ込んでみました。なんかそれらしくなりましたね。画像は、自分が持っている画像をアップロードできるほか、よそのサイトのURLを指定するとそこから引っ張ってくることもできます。ただし、画像には著作権があり、どこの画像も好き勝手に引っ張ってきて良いわけではないので注意が必要です。
今回はWikipediaの画像サイトであるWikimediaの画像をここに表示させることにしました。


著作権やライセンスはWikipedia上でこういうページが表示されるので、そこで確認することができます。


著作者はここで確認できますね。


ということで、作成したエスプレッソのページはこちらです。
エスプレッソマシーンが欲しいので、それも追記してみました。
Wikipediaだと「お前が欲しいだけだろ!却下!」となりますが、これは個人的なデータなので、誰にも怒られません。(著作権やライセンス等で違反していたり、表示停止の申し出がある場合は別ですが…)



そんな感じで、ブログはかけるけどWebサイトは作り方よくわからない、でもブログじゃなくてなんか体系的な情報をまとめたいんだよなー…という方には結構おすすめです。

欲しい機能

今回リストを作っていて、こういう機能があったらいいんじゃないかなぁと思います。
  • タイムラインか最近の更新一覧
  • どんな人がいてどんな情報を書いているのかを見て回れる機能
  • TwitterやFacebookで作ったリストをシェアできるボタン
  • 画像の登録情報を変更なしで更新しようとすると登録情報が空になる→そのままの情報になるようにする
  • 自分のトップページも1枚のリストもしくはページになっているので、記事単位などにする
  • html形式でリストをみたときに、パンくずかもしくは親(一つ上の階層)要素に戻るようなリンクを表示する


さいごに

Twitterのタイムラインを眺めていて、自分の理想を呟くとこから完成するところまでたどり着いた  @ohashimasaki さんをみて、すごいなぁと思ったし、応援したいと思い、この記事を書きました。
みなさんもぜひ一度使ってみてください!