uzullaがブログ

uzullaがブログです。

Koding.comでPerlとPHP学習環境構築

Kodingって去年くらい 前にできた、全部ウェブブラウザ上で完結する、ウェブサービス*1開発環境サービスなんですが、
これがPHPPerl初心者に人にもよいかもなあ(条件付きで)という所でちょっと紹介しておきます。
後、玄人の人にむけたポイントも書いておきます。


以下のURLからどうぞ
https://koding.com/R/uzulla

(上のURLはアフィリエイト的になんか双方に追加容量がもらえるらしいので…(せこい)、https://koding.com/アフィリエイト抜きです)

私のプロフィールはこちら
https://koding.com/uzulla

追記:スクショ多めの記事書きました

http://uzulla.hateblo.jp/entry/2014/03/08/155443

特徴

・無料で使い始められるVPSみたいなもの
・完全なUbuntu LinuxVM(root可能*2
・つまり、plenvいれたりphpenvいれたりnginxに差し替え可能
・数ギガのディスクスペース
・いまいちよくわからないけどTwitterみたいなのがある
・まだ試してないけど、同時につかえるコラボ開発環境がある
https://www.youtube.com/watch?v=w6sl_Yt_gNo

といった所だと思います。

初心者にうれしい所

ウェブインターフェースのエディタが提供される

f:id:uzulla:20140308050857p:plain
まあ、ちゃんとしたエディタにはやっぱり負けるんですけど、行番号表示、折りたたみ、正規表現検索とか、置換程度はできて、コードカラーリングやタブ設定*3はできるし、日本語(UTF-8)もきちんと入力できるので、本当の初心者にはとっつきやすいと思います。
(とはいえ、本気のパソコン初心者は英語サイトの時点でむずかしいかとおもいますが…)

ブラウザで使えるシェルが提供される

f:id:uzulla:20140308051059p:plain
sshクライアントのインストールとかよくわかんない…というのは初心者には結構あるので。
ブラウザの癖にvimが動く程度にマトモなシェルで、カラーに対応しているし、レスポンスも悪くない(ネットワーク的な遅延は多少あるが)。
欠点として、日本語入力ができません、惜しい。
まあここで日本語入力するなら前述のエディタか、sshで入ってvimしてください。

フルのLinuxが手に入る

割とこれは別途で嬉しい所じゃないかなとおもいます、
再インストールも簡単なので、壊したい放題です。
(右上の名前のメニューから、Environmentで、VirtualMachineをDelete→Createできる)

上級者にうれしい所

ssh接続もできる、scpもできる

多少設定が必要ですが。
http://learn.koding.com/ssh-into-your-koding-vm/
Composerも楽々ですね。

rootがとれる

普通のVPSと同じ感じです。
apt-getでパッケージいれられますし、野良ビルドし放題です。よくわからんものをためしに動かすのにはよい。
linuxbrewが楽ですね(多少癖ありますけど)

予想以上に速い

ビルドした感じ、タダの癖にそれなりに速い。
これは後述しますが、あまり混まないようにvmを適旨殺しているからだとおもいますが。

で、欠点沢山

英語です!!!!!!!!!!!

初心者の人にはつらい気がする。しかたない、残念です。
ただ、言うほどむずかしい英語は出てこないのでどうにかなるかな。

バグが多い

バグなのか、たんなる遅延なのかわからないですが、うごかないことがある。
今ボクはなぜかフリープランでVMが一個しかつくれないはずなのに、二個できてる、謎だ。
VM再作成時などに変な事になるバッドノウハウ的な操作、次のエントリ(http://uzulla.hateblo.jp/entry/2014/03/08/155443)に追記しました)

ウェブ画面が相当わかりづらい

これは本当にどうかなとおもってて、ホントよくわからない。
綺麗でカッコイイんですけど、まあ説明がたりないので色々試行錯誤が必要です。右クリック出来る所とかもあります。

ウェブ画面が重いときはホント重い(軽いときは軽い)

「なんかここに表示されるはずでは??」という場合は、大体なにかが固まってます。
特に今はキャンペーン中っぽいので重い感じがありますね。

実際落ちてるかどうかは
http://status.koding.com/
こちらで見れる…といいたいんでしょうが、まったくアテにならないw

フリープランは初回と一時間に一回、ブラウザアクセス時に「ホントにアクセスするのか?」的な画面が出る

f:id:uzulla:20140308050831p:plain

これは勉強とか、テストではそこまで問題にならないでしょうが、その画面も英語なので結構面食らう人がいそう。
(英語を読まずに「うごいてない!」となりそう)

ソーシャルネットワーク的なサービスがよくわからない

使わなければよいのではないでしょうか(雑だ
まあなんかよくわからない雑なポストしてると外人がLikeしてくれます。

「だれもフォローしてないと」Public TimeLineしかみれないんですけど、他の人をフォローしたらフォローしてる人だけみれるタイムラインになるっぽいので、まあそうなったらつかえるのかな(まだFollowしてる人がいない)

ちなみに私はこちらです。
https://koding.com/uzulla

サイトを閉じて1時間くらいすると、vmは終了する

つまりフリープランでは「ウェブサービスの公開」はできませんし、ボットは運用できません。
課金すると、vmに「Allways on」というスイッチが設定でき、終了しなくなります。

ただまあ、コーディングの勉強においてはたいして問題にならないでしょう。*4

「で、Perlは、Perlはどうなの!?」

結論からいえば、plenvで好きなバージョンのPerlをいれて、なおかつPlackをうごかす事ができます!!!(ババーン)
f:id:uzulla:20140308050940p:plain

やばい!
というかコレを言いたいだけだこのエントリ!!

こういうウェブ系の開発環境ってちらほらありますけど、cpanmやplackupできちゃうのは多分ココだけでしょう、実にクール。

拙作のPyazo(https://github.com/uzulla/pyazo Dancerベース、Starmanで動作)もちゃんと動く事が確認できております。


ただ、どうもSystem Perl*5はモジュールがおかしいのか、apt-get install cpanminusでいれたcpanmではうまくcpanモジュールがはいりませんでした(私がubuntuをちゃんとわかってない所為だろうか)。

ただ、前述の通りplenvで好きなPerlを入れられますので、自前でPerlいれたほうが良いですね。

curl -L http://is.gd/plenvsetup | sh
source .bash_profile 
plenv install -l
plenv install 5.16.3
plenv global 5.16.3
plenv install-cpanm
perl -v

http://blog.papix.net/entry/2013/06/04/081554
http://yellowstore.blogspot.jp/2013/05/plenvrbenv.html

ちなみに、ウェブ画面のシェルはscreenで接続されており、plackupしたらブラウザをとじてしまえばそのままデーモンが起動し続けますやった!!

「おい、お前PHPerだろ」

勿論PHPerでございますので確認させていただきましたところ、ちゃんとPHP5.4.9がはいっておりました!!(ババーン)

でもまあ、別にうれしくないですよね、5.4とか古いバージョンですよ。さっさとphpenv+php-buildいれればええんやで!!ちゃんとはいったで!!!

f:id:uzulla:20140308050417p:plain

LinuxにphpenvでPHP入れる方法はさんざん既知ですが、一応以下に書いておきます。
(既にrbenvいれていたり、後でrbenvいれる場合には、bash_profileへの記述差し込み順序を気を付けましょう、くわしくは https://github.com/CHH/phpenv を見ましょう)

apt-get install libxml2 re2c autoconf bison libxml2-dev libjpeg62 libjpeg62-dev libreadline6-dev libpng12-0 libpng12-dev libtidy-dev libxslt-dev libltdl-dev libltdl7 libltdl7-dev libmcrypt-dev openssl libcurl4-openssl-dev libpcre3-dev
git clone https://github.com/CHH/phpenv ~/phpenv
bash ~/phpenv/bin/phpenv-install.sh
rm -fR ~/phpenv
echo 'export PATH="$HOME/.phpenv/bin:$PATH"' >> ~/.bash_profile
echo 'eval "$(phpenv init -)"' >> ~/.bash_profile
source ~/.bash_profile
mkdir ~/.phpenv/plugins
git clone https://github.com/CHH/php-build ~/.phpenv/plugins/php-build
phpenv install 5.5.9
phpenv global 5.5.9
php -v
php -r 'echo "Hello php ".PHP_VERSION." !!\n";'


ちなみに、もし最初からはいっている普通にシステムのphpを使う場合には、apt-get install php5-curl〜とか色々つかうモジュールをいれないと機能がたりない感じです。
まあ最低限しかはいってないからしかたないよね。以下のようにして必要なパッケージをさがしてapt-get installしましょう。

$ apt-cache search php5
$ apt-get install php5-curl

まあ面倒なら以下で大体全部はいるんじゃないですかね(雑)

apt-get install php5*

あと、HHVMもはいりました。
f:id:uzulla:20140308050535p:plain


ただ、どちらにしてもApacheに組み込むのは相当しんどいので、nginxなどにさしかえてしまったほうがよいでしょう。

20140310 追記、Apacheで最短手でリバースプロキシいれるのはこちら

案外簡単にできたので。

まずはmod_rewrite and mod_proxy_httpを有効化

$ sudo a2enmod rewrite
$ sudo a2enmod proxy proxy_http
$ sudo /etc/init.d/apache2 restart

シェルでもブラウザエディタでもよいですが、

/Web/.htaccess

を作成して、以下のように内容を作成、8080のポート番号所は、アプリケーションサーバーに応じて適当にかきかえてください

RewriteEngine on
RewriteRule ^(.*)$  http://localhost:8080/$1 [P,QSA]

これでOKです。アプリケーションサーバーをたちあげてためしてください。

例として、PHPのビルトインサーバーをつかう場合。

$ cd Web/
$ php -S 127.0.0.1:8080

もし、元に戻す場合は .htaccessを消すか、全行#でコメントアウトしてください。

もどって、nginxを入れる例

入れる方法の雑な例はこちらです

# kill apache.
sudo /etc/init.d/apache2 stop

# insatall linuxbrew
sudo apt-get install build-essential curl git ruby libbz2-dev libcurl4-openssl-dev libexpat-dev libncurses-dev zlib1g-dev
git clone https://github.com/Homebrew/linuxbrew.git ~/.linuxbrew
echo 'export PATH="$HOME/.linuxbrew/bin:$PATH"' >> ~/.bash_profile
echo 'export LD_LIBRARY_PATH="$HOME/.linuxbrew/lib:$LD_LIBRARY_PATH"' >> ~/.bash_profile
source ~/.bash_profile

# install nginx
brew install nginx 
vi /home/user_name/.linuxbrew/etc/nginx/nginx.conf

sudo su # into root
vi /etc/ld.so.conf # add /home/user_name/.linuxbrew/lib
ldconfig -v # check ld
/home/user_name/.linuxbrew/bin/nginx # start nginx
exit # out root

# install HHVM
echo deb http://dl.hhvm.com/ubuntu raring main | sudo tee /etc/apt/sources.list.d/hhvm.list
sudo apt-get update
sudo apt-get install hhvm
# boot hhvm
cd /path/to/your/doc_root
hhvm --mode server -vServer.Port=8080
# nginx.conf
location ~ \.php$ {
    proxy_pass   http://127.0.0.1:8080;
}

ウェブサイトの公開について

無料の状態では、前述の通り一回画面がでちゃいますが、それ以外はわりと自由みたいです。デフォルトで入っているapacheとか捨て去って、nginxを入れられます。*6

nginxをいれられるということは、まあphp-fpmとかplackをつなぎこめば完璧にソレっぽい感じになりますね!やった!

あと、特にポート制限はして居ないらしく、8080とかでサーバをたてれば外から8080に接続できます。*7

コツや注意点

・ブラウザはChromeとかの最新版
IME(日本語入力)は一回オフにしておく
・なんかおかしかったらリロード
・それでなおらなかったらしばらく待ってリロード
・ログアウト、ログイン
githubで登録するとパスワード設定無しで登録できるが、sudoするのにはパスワード設定が必要
・サイトからログアウトして1時間くらいすると、vmは終了する
ファイルシステムがぶっこわれるようなこともあるw
f:id:uzulla:20140308050510p:plain

どうしてもしなければいけない宣伝

もうすぐ私が一部担当した書籍が出ます(耳タコですね、すいません)

今回のKodingをつかっても良い感じにできる(サンプルプログラムの動作は確認した)。

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

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

が、まだまだ空きがあるらしく、もっと宣伝しろや!というプレッシャーを感じております。
私はともかく「あの、ゆーすけべー大先生」のトークでもありますし、もっと人来ても良いのでは?と思っております。


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

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

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

こちらからは以上です。
なんかスターとかブクマがついたら続編書きます。

*1:ウェブアプリw

*2:パスワード設定しないとsudoできないので注意しましょう

*3:ソフト、ハード、スペ2、4など

*4:ダメだよ!なんかうまくやればブラウザにアクセスしっぱなしと同じ感じになって…みたいなのwww

*5:最初から入っているPerl

*6:というより、Firewallの機能が現在はまだないw

*7:逆に、中から外も制限してないっぽくて、普通にファイルがとってこれる

「Webアプリエンジニア養成読本」とKodingでPHPを勉強する

昨日エントリ( http://uzulla.hateblo.jp/entry/2014/03/08/050621 )を書いたKodingですが、詳しくは昨日のエントリを見ていただくとして、今度発売される「Webアプリエンジニア養成読本」をKodingで勉強するにはどうすればよいか書いてみます。


結果として、Kodingをつかえば、ChromeFirefoxがPCにはいっていれば、PCに何もインストールすることなくブラウザ一つで学習ができました。

このエントリに記載されていること

・Kodingのアカウント取得
・画面の簡単な説明
PHPをちょっと書いてみる方法
・本題「Webアプリエンジニア養成読本」のサンプルコードをKodingで動かす方法
・シェル(Terminal)をちょっとつかってみる方法
・おかしくなったときにどうやったら最初にもどせるか
・簡単なバックアップの方法
・そして本の宣伝
が記載されています。

Koding初心者の方がちょっとKodingつかってみるのにもよいでしょう。

準備

アカウントを取得します

https://koding.com/R/uzulla
からアカウントを取得します。
f:id:uzulla:20140308151226p:plain

Emailと好きなID(URLに使われます)を設定してSignupを押します、GitHubアカウントでも登録が可能です。
すると登録が完了して、以下のような画面になります。
f:id:uzulla:20140308151238p:plain

Emailを認証する

登録したメールアドレスに以下のようなメールがとどきますので、記載されたURLを開きます。
f:id:uzulla:20140308151304p:plain

パスワード(password)、パスワード確認(confirm password)を設定します。

自分の名前も必要ならば設定しましょう。ここの名前は後述のタイムラインに表示されます。
これでKodingをつかう準備ができました。

画面構成、左上のメニュー(タブ)について

f:id:uzulla:20140308151329p:plain
左のフキダシアイコンから、タイムライン、コラボレーション、シェル、エディター、アプリになります。

基本的に、シェルとエディタをつかって開発を行います。

タイムラインはツイッターみたいなものです。Markdown形式で投稿できます。
アプリとコラボは自分も余りよくわかってません

アカウント登録直後は裏側で自分のVM(サーバー)が作成されているので、うまく動かない所もあると思います。3分〜5分ばかりTimelineなどをみてヒマをつぶしましょう。

ちなみに、私のアカウントは
https://koding.com/uzulla
です。
(このエントリのスクショにあるアカウントは、最初からを調べる為にアカウント取り直してやっているので後で消します)

とりあえず自分のサイトを見てみる

赤い四角のエディタのタブを開いて下さい。以下のような画面になります。
(もし、ひらけなければVMがまだできていない可能性があります、もうちょっと待ちましょう)
f:id:uzulla:20140308151356p:plain

左側ペインの上部に小さく「on Username.kd.io」 という表示がありますが、これをクリックするとブラウザでサイトを見る事ができます。

最初は茶色の画面が表示され、英語ですが「本当に表示してよいのか?続けるならクリック」的なことを確認されます。
f:id:uzulla:20140308151414p:plain

これは初回アクセス時、または1時間に一度表示される画面で、Kodingの無料プランの制限です。一度「Click to continue: user_name.kd.io」をクリックすればしばらくみないですみます。
(以後user_nameは自分のIDに置き換えて下さい)

まあ、不便ではありますが、通常の学習だけならここは大した問題にならないと思うので諦めましょう。

さて、Click to continue のURLを押して先にするむと、「Hello World」が表示されたと思います。
f:id:uzulla:20140308151436p:plain
ここまで確認できれば、Kodingのサイトが動いている事が確認出来ました。

中央の「PHP」などはPHPで動作していますのでみてみましょう。

PHPを修正してみる

http://username.kd.io/php.phpを修正してみましょう。
一回エディタにもどり、左側のペインはファイルブラウザになっていますので、Web(ディレクトリ)をダブルクリックしてひらき、その中のphp.phpをダブルクリックしてひらきます。

以下のような編集画面になればOKです。
f:id:uzulla:20140308151456p:plain


最初は凝ったHTMLで書かれていますが、ばっさりと全部消してしまいましょう。メモ帳などのふつうのエディタと同じです、全部選択してBackSpaceや、最後の行からBackspace連打や、まあ方法は問いません。

Kodingのエディタはブラウザの割によくできているので、Cmd+A(WinだとCtrl+A)で全選択したり、Cmd+s(Ctrl+s)で保存出来たりします。

また、軽い構文チェックはリアルタイムで走っているらしく、簡単な文法ミスは、左側に赤バッテンがでてくれます、すごい!
f:id:uzulla:20140308151538p:plain

では、phpinfo()出力に書き換えます

<?php
phpinfo();

このように書き換えて、保存してください。


もしショートカットキーに不慣れでマウスで保存したい場合には、右上の「三」のようなアイコンをクリックすると、メニューが表示されますので保存してください。
(マウスでメニューを操作した時、フォーカスがエディタからはずれるので、一回エディタをクリックしないとバックスペース等をおすとブラウザのバックになってしまいます、注意しましょう)

保存が完了すると、エディタ上のタブのphp.phpファイル名の横にあった白いドットが消えます。

保存前:
f:id:uzulla:20140308151515p:plain
保存後:
f:id:uzulla:20140308151525p:plain

さて、先ほどのHelloworldのページを再度ひらき、リロードします。
表示が変わってphpinfo()出力になると思います。phpinfo()は現在のPHPの設定を確認する定番の画面ですね。
f:id:uzulla:20140308151549p:plain

と、まあこういう感じでファイルを修正することで、phpファイルを修正出来ます。


エディタ左ペインの「Web」のディレクトリがDocumentroot、つまりブラウザでアクセスしたときの「/」になるらしいので、最初において有るファイルを全部けしたりして、あとは好きにファイルを追加していけます。

あなたが初歩の初歩のPHPの勉強をするのであれば、まあここまでで十分かなと思います。

シェルを使う

では、「Webアプリエンジニア養成読本」で必須とさせていただいているシェルをつかってみましょう。

上部の緑の「[>_]」こんな感じのシェルタブをひらきます。以下のような画面になると思います。
f:id:uzulla:20140308151602p:plain

もし、ならずに「まっくろな画面のまま」ならば、時間をちょっとおいてからリロードしてみてください。

以下のように「Open New session」とでている場合にはそれをクリックしてサーバー(VM)を起動してください(Kodingの無料プランでは、1時間放置するとサーバーが終了します)
f:id:uzulla:20140308152426p:plain
これは、ブラウザでアクセスしてひらけない場合も同様です。


では、ためしにphpcliで起動してみましょう

$ php -v

と入力してみてください。以下のような結果になると思います。
f:id:uzulla:20140308151612p:plain

注意点として、シェルは日本語入力(IME)が有効だと入力できません、オフ(半角英数モード)にして入力してください。


さて、上の先頭の「$」は習慣としてシェルであることを表しています。
Kodingだと「user_name@vm-0:~$  」などと「すでに表示されている」とおもいますが、その部分を$として表現して居ます。つまり先頭の$は無視して、「php -v」だけを入力して下さい。


この出力を見るとわかりますが、PHP 5.4.9がはいっていますね。PHPの最新版は5.5なので上げたい気分はありますが、そこは今回省略します。


シェルの操作が終わったら、上部の「Terminal」とある所にカーソルを合わせると現れるバッテンで閉じることができます。
(勿論exitとコマンドでも終了出来ます)

同時にシェルを複数使いたい場合には、「+」を押すともう一枚シェルをひらけます。それら複数起動している場合には、タブ的に切り換える事が可能です。

サンプルアプリを使う事前設定

Kodingは今日現在Ubuntu13.04がデフォルトでインストールされていますが、本のサンプルアプリを使うには、いくつかのプログラムがたりていないので以下のようにして追加します。

sqlite3 CLIと、phpsqliteサポート、phpcurlサポートを入れます。

$ sudo apt-get install sqlite3
$ sudo apt-get install php5-sqlite
$ sudo apt-get install php5-curl

このとき、[sudo] password for user_name:と、貴方のパスワードを聞かれる場合があります。
冒頭でKodingに設定したパスワードを入力してください。(設定していなければ、設定してきてください)

うまくいけば、ズラズラと表示されてパッケージのインストールが完了します。

これで必要なものは追加できました。

サンプルアプリを入れてみる

https://github.com/uzulla/Tinitter
にアップロードされている書籍のサンプルアプリをいれてみましょう。
gitは最初からはいっていますので、以下のコマンドでcloneすることができます。

$ git clone https://github.com/uzulla/Tinitter.git ~/Tinitter

詳細は書籍や https://github.com/uzulla/Tinitter のREADMEを見ていただければとおもいますが、以下のようにして初期設定をします

$ cd ~/Tinitter
$ cp config.php.sample config.php
$ sqlite3 sqlite.db < schema.sqlite3.sql
$ curl -sS https://getcomposer.org/installer | php
$ php composer.phar install

*1

うごくかテストする

早速起動したいところですが、まずはUnitTestをはしらせてみましょう

$ cd ~/Tinitter/test/
$ ../vendor/bin/phpunit

おそらく以下のようにエラーになります。
f:id:uzulla:20140308151648p:plain

これが何のテストをやっているかは本やコードを読んでいただくとして、同一のエラーであれば、PHPのmbstringの設定がされていません。php.iniを修正してmbstring.internal_encodingを変更する必要があります。

$ php --ini

と実行することで、修正すべきphp.iniの場所は確認できます。
/etc/php5/cli/php.iniが目的のファイルですね。


で、さっそくウェブエディタで/etc/php.iniの修正をしたい所ですが、
残念な事に/etc以下のroot権限が必要なファイルはブラウザのエディタでは権限的に修正できません。

sudo vi などで編集もできますが、viは使い方がむずかしいので、今回は以下のコマンドを順に実行していただければ設定ができます。

$ echo '' | sudo tee -a /etc/php5/cli/php.ini
$ echo 'date.timezone = Asia/Tokyo' | sudo tee -a /etc/php5/cli/php.ini
$ echo 'mbstring.internal_encoding = UTF-8' | sudo tee -a /etc/php5/cli/php.ini

(これに失敗した場合、後述のre-initializeをすることで戻す事ができます、また、その場合apt-getなどの手順は最初から行って下さい)

適切に設定が完了した後に、先ほどのテストをもう一度実行すれば、以下のような出力でOKと表示されるはずです。
f:id:uzulla:20140308151748p:plain

起動してみる

では、実際に起動してみましょう

cd ~/Tinitter/htdocs/
$ php -S 0:8080

以下のようになったら、「http://user_name.kd.io:8080/」をブラウザでひらきましょう
どうです?起動出来ましたでしょうか?

投稿もちゃんとうごくかやってみてください。
f:id:uzulla:20140308151828p:plain

サンプルアプリを修正してみる

勿論今回設置したサンプルコードはウェブエディタで修正ができます。
今回はファイルブラウザでは「Tinitter」というディレクトリの中にありますので、Tinitter/templates/frame.twigのbodyタグ直後などに

<h1>Yeah! Happy PHP!!!</h1>

などと追記してみましょう。
f:id:uzulla:20140308151902p:plain

修正したらリロードしてみましょう。変更が反映されていると思います、どうでしょうか?
f:id:uzulla:20140308151920p:plain

あとは同様の調子で修正していけば良いですね!

なんかおかしくなったからやり直したい場合 (20140309追記)

シェル操作を間違えたりしてどうにもおかしくなってしまった、直せなくなってしまった場合でもサーバーの設定やコンテンツを初期化する事ができます。
全部捨てるのであればかまいませんが、必要なファイルについては後述のバックアップをした後にやりましょう。

システムがおかしくなった場合

apt-getで無駄な物をいれて挙動がおかしくなってしまった場合や、/etc以下の設定ファイルをいじって壊してしまった場合など、ホームディレクトリ、つまり「/home/user_name」以外をもどしたい場合は「re-initialize」をします。

エディタなどでみえるホームディレクトリ、つまり/home/user_name以下のファイルは消えない筈ですが、念のためにバックアップすると良いでしょう。


画面右上の自分のIDがかかれた所の、右の下向き矢印をクリックし、Emvironmentをひらきます。
f:id:uzulla:20140308152832p:plain

「virtual machine」項目の「vm-0」(0の所は数字がかわる事があります)を右クリックすると、ポップアップが表示され、「re-initialize VM」というものがありますので、これをクリックするとサーバーのホームディレクトリ以外を初期化する事ができます。
f:id:uzulla:20140308153028p:plain
f:id:uzulla:20140308153034p:plain

押した後、完了まではしばらく時間がかかります。
しばらく待ってから(10分くらい)ブラウザをリロードしてエディタやシェルをひらいてみましょう。完了したら、再度シェルがひらけるようになります。

以下のような表示であれば、処理はまだおわっていません。
f:id:uzulla:20140308154802p:plain
f:id:uzulla:20140308154810p:plain

/home/user_nameを含めて、全部を初期化したい場合

vmを一度削除する事でホームディレクトリを含めて初期化できます。
全部のコンテンツが消えますので、必要であれば後述のバックアップをしてください。


右上の自分のIDがかかれたところの右の下向き矢印をクリックし、Emvironmentをひらきます。
f:id:uzulla:20140308152832p:plain
vmを右クリックして、Deleteを選択します。
f:id:uzulla:20140308154556p:plain
f:id:uzulla:20140308154605p:plain
確認画面がでますので、書いてある指示通りに「vm-0」等と入力してください
f:id:uzulla:20140308154631p:plain
削除できたら、virtual machineの「+」ボタンをおして作成します。
vmをDeleteしたはずなのに、vmが消えなかったら、一度ブラウザをリロードしましょう)
f:id:uzulla:20140308154657p:plain


ちなみに画面上ではすぐに作成完了した雰囲気になりますが、内部では処理が終わっていない事があります。しばらく待ってから(10分くらい)ブラウザをリロードしてエディタやシェルをひらいてみましょう。*2

たとえば以下のような表示であれば再作成はまだおわっていません。
f:id:uzulla:20140308154802p:plain
f:id:uzulla:20140308154810p:plain


ただ、まだ終わっていないように見えても、シェル(Terminal)をひらいて、
f:id:uzulla:20140308154810p:plain
このように再接続しますか?ときかれている所で再接続を試行すると、いきなりつながったりすることがあります。

また、シェル(Terminal)がつながっても、エディタはひらけない事があります*3
一度ログアウトしてブラウザを閉じてログインするとなおる事があります。

それでも直らない場合、エディタの左上のファイルブラウザ上部の「…」あたりを右クリックしてでてくる「unmount」を選択して、一度ログアウトログインするとなおったりします。
(もし以下のような表示でなく、赤い表示のときは、文字をクリックして再試行でなく、バッテンの閉じるボタンを押す)
f:id:uzulla:20140309221731p:plain


このあたり大分バグっぽいですね…(上のバッドノウハウっぽい情報も、いつかは直るか、または別の挙動になりそうです…)

ファイルのバックアップとアップロード

初期化する場合は必要なファイルは保存しておく必要があります。
また、初期化しないにせよ、まめにバックアップは取るべきです。*4

ファイルをまとめてダウンロードする方法として、
f:id:uzulla:20140308153203p:plain
ディレクトリなどを右クリックして、ZIPに圧縮する事が出来ます。
実行すると、
f:id:uzulla:20140308153241p:plain
このようなファイルができますので、これを「Web」のなかにドラッグアンドドロップします。
f:id:uzulla:20140308153710p:plain

Webの中にドラッグアンドドロップしたら、右クリックでURLを調べる事ができます。
f:id:uzulla:20140308153609p:plain
今回のファイル名だと
http://user_name.kd.io/Tinitter.zip
というURLでダウンロードできるようになります。
(どうせなら、ここから右クリックでダウンロードしたいですけど、できないっぽいですね…。)


ダウンロードしたファイルをアップロードするには、ディレクトリを右クリックしてUpload Fileをえらぶと、「Drop files here!」と表示されるので、そこにファイルをエクスプローラーやFinderからドラッグアンドドロップするとアップロードができます*5
f:id:uzulla:20140308154046p:plain
f:id:uzulla:20140308154053p:plain

ZIPファイルであれば、その後右クリックして「Extract」を実行すると解凍する事ができます。
f:id:uzulla:20140308154138p:plain
これでZIPでバックアップしたファイルを戻す事ができますね。

また、説明がややこしいので今回は省略しますが、VMSSHFTPで接続して、ファイルをアップロード、ダウンロードする事も可能です。

まとめ

駆け足でしたが、KodingでPHP Builtin serverにてサンプルアプリを起動する方法を紹介しました。

Kodingは非常に癖があるのですが(リロードすれば直る事が多いですが、バグも多い…)、サーバー、エディタ、SSHクライアント*6がブラウザの中に全部おさまっており、本当にブラウザだけで開発と簡単な公開を行う事ができます。
PHPのコードを書く勉強だけであればまずは事足りるかな思います。

まあこれだけで永遠にやっていけるか、といわれると微妙な所もありますが(課金すればよさそうではありますが)、まずは自分のPCにソフトウェアをインストールできない(怖いとか、よく分からないとか)ような方にもとっかかりができれば良いな〜〜という感じです。

初心者の人にも分かればと比較的細かく本エントリを書きましたが、もしつまづいた所があればコメントをいただければ幸いです。

今回はPHPのところだけを説明しましたが、Rubyの章もおそらく問題無くできるはずです。

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

もうすぐ私が一部担当した書籍が出ます(耳タコですね、すいません)

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

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

まだ空きはあるらしく、もっと宣伝しろや!というプレッシャーを感じております。
私はともかく「あの、ゆーすけべー大先生」のトークでもありますし、もっと人来ても良いのでは?と思っております。

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

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

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

では。

*1:Composer実行時にエラーがでるようであれば、なにかライブラリが足りていない可能性があります

*2:VM再作成はなんだかんだでかなり時間がかかるので(30分はかからないとおもいますが…)

*3:特に現在のvmvm-4などなっているのに、エディタはvm-3などにつなごうとしているっぽい時など

*4:私は早速(?)一回VMファイルシステムが壊れた事があります

*5:ブラウザによっては対応していません、ChromeFirefoxの最新版をつかいましょう

*6:sshというかシェルだけど、「その位置にいる」的な意味で