uzullaがブログ

uzullaがブログです。

Kodingをつかって手軽にPerl入学式 #6をやってみる

perl

Perl入学式という、プログラミング初心者モダンなPerlを勉強するイベントが大阪や東京などで開催されています。

Perl入学式
http://perl-entrance.org/


とても良いイベントだとおもいます。ただ、やはり環境設定という部分が結構面倒であり、初心者の方には多少敷居が高い所もあるかもしれません。

先日から触っているKodingというウェブでの開発サービスがPerl入学式にもつかえないかなと思って試してみました。実際に良い感じで使う事ができました。

それについて以下に手順を記載します、主催のpapix君への私信でもありますｗ

Kodingに登録する

「Webアプリエンジニア養成読本」とKodingでPHPを勉強する
http://uzulla.hateblo.jp/entry/2014/03/08/155443

こちらのエントリを参考に、ユーザー登録までを行ってみて下さい。
他にも色々な情報を記載していますので、「とりあえず自分のサイトを見てみる」くらいまでは是非見てみて下さい。

早速、サーバーにPerlをいれる

Kodingのサーバーには最初からPerlがはいっていますが、是非plenvで新しいPerlをいれましょう。

上部の緑の「[>_]」こんな感じのアイコンをクリックして、シェルをひらきます。以下のような画面になると思います。
f:id:uzulla:20140308151602p:plain


画面の最後の行が

ユーザーID@vm-0:~$

といった表示になっていたら、シェルはコマンドの入力を待っている状態です。
（「ユーザーID@vm-0:~$ 」のようになっていなければ、処理中かもしれません、しばらく待ちましょう）


次に、下記のコマンドを順番に入力し、改行をおして実行してください。
（先頭の$は無視して入力してください、この＄は「ユーザーID@vm-0:~$ 」の事を省略して表しています）
（各行の最後で改行を押して下さい）
（パソコンの日本語入力はオフにしてください）


「plenv install 〜」の所はものすごい勢いで文字がながれますが、正常なのでじっと待って下さい。なにか致命的なことがあったとしても、所詮あなたのパソコンではなく、ブラウザの中、Kodingの中です。特に不安にならないでOKです。（全部すててやり直す事も簡単にできます）

それぞれのコマンドは「ユーザーID@vm-0:~$ 」のような表示がでて止まるまでは待ってから次のコマンドを入力します。

$ curl -L http://is.gd/plenvsetup | sh
$ source ~/.bash_profile 
$ plenv install 5.18.1
$ plenv global 5.18.1
$ plenv install-cpanm

*1


完了したら、以下のように実行して確認しましょう。

$ perl -v

以下のように表示されると思います。

This is perl 5, version 18, subversion 1 (v5.18.1) built for x86_64-linux
（省略）

これがでればPerlのインストールは完了です、簡単ですね！

Mojoliciousをいれる

Mojolicious（以後Mojo）はPerlの今風のフレームワークです、ウェブ開発を効率的におこなうための土台になるプログラムです。
Perl入学式の第6回ではこちらが利用されていたので、今回はこちらをいれてみます。

https://github.com/perl-entrance-org/workshop-2013-06/blob/master/slide.md

こちらを参考にしていきます、まずはMojoのインストールですね、以下のコマンドを実行してください。しばらく時間がかかります。

$ cpanm Mojolicious

Mojoのインストールがおわったら、ひな形の作成です。
今回はホームディレクトリに移動し（cd ~）、
mojoという適当なディレクトリを作成（mkdir mojo）して中にはいり（cd mojo）、
その中でhelloというmojoのアプリを生成(mojo generate〜)しました。

$ cd ~
$ mkdir mojo
$ cd mojo
$ mojo generate lite_app hello

早速作成したディレクトリに移動（cd ~/mojo）して、起動（morbo ./hello）してみましょう。

$ cd ~/mojo
$ morbo ./hello

上を実行すると、画面に

[Sun Mar  9 16:46:48 2014] [info] Listening at "http://*:3000".
Server available at http://127.0.0.1:3000.

このような出力がされればhelloが起動しています。

では、起動したプログラムをブラウザでひらいてみましょう。
あたらしくブラウザのウインドウをひらいて（前のウインドウをそのままにして）、URLを入力します。
Kodingでは、「ユーザー名.kd.io」というドメインがわりふられますので、たとえばあなたのユーザー名がuzullaなら、

http://uzulla.kd.io:3000/

としてひらいてみましょう。

最初茶色い以下のような画面がでます。英語で書いてありますが、このサイトにアクセスするかの確認などが書いてあります。Kodingでは無料プランはこのような画面が初回と一時間に一度でます。
f:id:uzulla:20140308151414p:plain


また、超時間放置した後だとサーバー（VM）が終了して、ひらけなくなります。リロードして画面にしたがったり、シェルをひらいて「cd ~/mojo」と「morbo ./hello」の部分を再度実行してたちあげなおしましょう。

では、画面内の
「Click to continue http://？？？？.kd.io:3000/」
のリンクをクリックしてすすめましょう。

Welcome to the Mojolicious real-time web framework!

と表示されれば成功です！helloプログラムが正常に動作して、ブラウザに表示しています。

helloを終了し「ユーザーID@vm-0:~$ 」に戻すには、シェルをひらいて、Ctrl+C（CtrlとCを同時に押し）しましょう。

コードを見て、修正してみる。

では、helloを課題にそって修正してみましょう。

Kodingの上部に表示されている赤い四角をクリックして、エディタを開きます。
左側のファイル一覧に「mojo」、という先ほど作成したディレクトリが表示されているとおもいます。

（多少ファイル名はちがいますが、このような画面）
f:id:uzulla:20140308151456p:plain

「mojo」をダブルクリックしてひらいてみましょう。
中に先ほど作成したひな形の「hello」というファイルがあるとおもいます、これがhelloプログラムです。
これを再度ダブルクリックすると、エディタで開く事が出来て、編集ができます。

あとは元の
https://github.com/perl-entrance-org/workshop-2013-06/blob/master/slide.md
こちらをみて、学習をすすめてみましょう。


とはいえ、今回はてっとりばやくすすめるので、上記URLで解説されているものの完成系である
https://raw.github.com/perl-entrance-org/workshop-2013-06/master/BBS
こちらのコードを全部コピペして上書きします。
（最初にかいてあるものを全部消して、上のURLの内容をペーストで入力します）


書き換えた後、保存はCommand+S（WindowsはCtrl+S）、または右上の「三」のような記号をクリックして、Saveを選択します。

保存できたようなら、helloを起動したままで（終了したら、再度起動させてください）

http://ユーザー名.kd.io:3000/

を再度ひらいてみましょう（またはリロードしましょう）

先ほどと様子がかわって、課題の掲示板プログラムがうごいているとおもいます！
なにか入力欄に入力して、投稿してみましょう。
f:id:uzulla:20140310023534p:plain

どうです？うごきましたか？

とまあこんな風に

Kodingをつかえば、ブラウザ一つあればパソコンの設定やソフトのインストール、サーバー業者等との契約不要でMojoliciousなどのPerlのWAFをつかったプログラムを学習する事ができます。

実に便利ですね！

注意点など

このKodingは、無料プランではウェブサービス公開には使えません。１時間で自動的にサーバーが終了してしまいますし、都度茶色い画面がでてしまいます。

ただ、学習においてはそれは大した問題にはならないでしょう。課金すれば終了しなくなったり、最初アクセス時の茶色の画面を出さない事も可能です。

また、これはれっきとしたLinuxサーバーであり、サーバー、エディタ、sshクライアントなど、本物の道具と交換すれば、シェルなどの操作はKoding以外のサーバー（VPSや専用サーバーなど）とほぼ同様です。
Kodingはそういったツール・ソフトウェアをブラウザでつかいやすく提供しているだけです。


他、Kodingのいくつかの情報（制限や、全部やり直す方法）は以下のエントリにも記述してあります。
こちらはPerlでなく、主にPHPをベースにした説明ですが、大体本件と同様です。是非参考にしてみてください。

「Webアプリエンジニア養成読本」とKodingでPHPを勉強する
http://uzulla.hateblo.jp/entry/2014/03/08/155443

Koding.comでPerlとPHP学習環境構築
http://uzulla.hateblo.jp/entry/2014/03/08/050621

最後に、やっぱりしなければいけない宣伝

もうすぐ私が一部担当した書籍が出ます（耳タコですね、すいません）
Perlの話はほとんどないのですが、別のプログラミング言語であるRubyとPHPについて主に記述されています。

Webアプリエンジニア養成読本[しくみ、開発、環境構築・運用…全体像を最新知識で最初から! ] (Software Design plus)

Webアプリエンジニア養成読本[しくみ、開発、環境構築・運用…全体像を最新知識で最初から! ] (Software Design plus)

Amazon

発売を記念して、池袋のジュンク堂書店にてイベントを行います。

http://www.junkudo.co.jp/mj/store/event_detail.php?fair_id=4314
「『Webアプリエンジニア養成読本』(技術評論社)刊行記念
Webアプリエンジニアが出来るまで」
ジュンク堂書店 池袋本店
開催日時：2014年03月20日（木）19:30 ～

まだ空きはあるらしく、もっと宣伝しろや！というプレッシャーを感じております。
私はともかく、日本のPerl界で有名なPerlハッカー「ゆーすけべー」のトークでもありますし、もっと人来ても良いのでは？と思っております。


「電話予約というハードルがたかすぎるのでは？」という話もありますが、電話予約した知り合いいわく

（上記URLの電話番号に電話を掛ける）
ジュンク堂の店員さん「もしもし」
友人「イベントの参加申し込みなんですけど」
店員さん「日時とイベント名はなんですか」
友人「3/20のなんかウェブのやつです」
店員さん「ちょっと待って下さい」
（ちょっと待つ）
店員さん「Webアプリエンジニアが出来るまでですか？」
友人「そうですそうです」
店員さん「ではお名前と電話番号を〜」以下略

このようになっているらしいので、お気軽にどうでしょうか。

では。

*1:「curl -L http://is.gd/perl_entrance_setup | sh」で上記を一回で済ますこともできますが、シェルの練習もかねて、バラバラのバージョンを記載したままにします