2013年09月24日

RPi - Raspberry Pi と Google Coder で作る Web プログラミング学習環境

Coder は Google がオープンソースとして公開した教育目的の Web サービス、プログラミング実行環境です。
大人が目的も無く遊んで楽しいものかと言えば・・・なんですが、これから Web アプリケーションの基礎を学んでみたい人・手軽に使える学習教材・環境を探している人にはオススメの Raspberry Pi パッケージです。

はじめての Coder


Raspberry Pi 向けイメージ Coder のセットアップ手順


Coder は Raspbian をベースにして、Coder アプリケーションとその関連サービスをセットにした Raspberry Pi 向けディストリビューションです。

Coder のプロジェクト・ホームはこちら。

Coder for Raspberry Pi


ダウンロード・ボタンをクリックして約 1 GB 、現時点でバージョン 0.4 の Coder イメージを入手しましょう。

この中には Mac OS 用インストーラーと Coder を含む OS イメージ( raspi.img )が含まれています。

01 coder image unpacking


僕は Mac OS + 有線 LAN でセットアップ(無線と有線で手順が異なるので注意)。

まず、 SD カードを挿入していない状態で CoderSetup を起動、 START ボタンをクリック( SD カードを挿入している場合には START 前に SD カードを取り外しておくこと)。

02 coder setup - start


次のページで初めて SD カードを挿入、 NEXT ボタンをクリックします。 これで新たに追加したストレージ・デバイスをインストラーが自動検知してくれます。

03 coder setup - insert sd card


無事 SD カードが見つかったら、 INSTALL ボタンをクリックして、

04 coder setup - install coder


後は待つだけ。

06 coder setup - install progress


イメージの書き込みが終わったら SD カードを取り外し Raspberry Pi に挿入・起動しましょう。

Windows ユーザーの場合は SD Formatter (https://www.sdcard.org/downloads/formatter_4/)で SD カードをフォーマット後、Win32 Disk Imager (http://sourceforge.jp/projects/sfnet_win32diskimager/)でイメージを書き込めばOK。

Win32DiskImager


最後に Bonjour Print Services for Windows (http://support.apple.com/kb/DL999?viewlocale=ja_JP)もインストールしておきます。


Raspberry Pi で Coder を使って Web プログラミングを楽しむ


さあ、 Coder が起動しているか ping coder.local で確認してみましょう。

$ ping coder.local
PING coder.local (192.168.1.28) 56(84) bytes of data.
64 bytes from coder.local (192.168.1.28): icmp_req=1 ttl=64 time=1.61 ms
64 bytes from coder.local (192.168.1.28): icmp_req=2 ttl=64 time=1.04 ms
64 bytes from coder.local (192.168.1.28): icmp_req=3 ttl=64 time=0.925 ms
 

応答があればセットアップは完了。

ブラウザで https://coder.local へアクセスしてみましょう。 SSL 証明書の信用に関わる警告が出ますが無視してOK。

05 coder  - access coder web page


まず、パスワード設定ページが現れます。 

07 coder - set password


パスワードを設定・ログインすると現れるのが Coder トップページ。

09 coder - top page


Hello Coder , Eyeball , Space Rocks! の3つのサンプル・アプリケーションが用意されています。

Hello Coder は最も簡単なアプリケーション。 クリックしてみると次のような Hello Coder を表示するシンプルな Web ページが表示されます。

10 coder - application page
 
 
ページ右上にあるのが Code (開発)メニュー。 クリックすると HTML, CSS, Javascript, Node.js の Web アプリケーション構成要素に別れてコードを編集することが出来ます。

11 coder - code page


HTML を編集して Hello Coder を日本語化してみると・・・

12 coder - edit code
 

Web アプリケーションに反映されましたね。

勿論、新しいアプリケーションを作成することも、フォルダごとアップロードすることも可能です。 

13 coder - create new web app


全てのサンプル・アプリケーション、操作イメージはこちらの動画をどうぞ。 


 
何か面白いアプリケーションを紹介できれば良いんですけど、今作りたいものも無いのでこれでおしまい。

まだ、バージョン 0.4 だからか僕の Chrome + Ubuntu ではエディタのカーソル位置がおかしかったり、途中でアプリケーションがクラッシュしたりと不安定なところもありましたが、 Linux の知識・設定作業は全く必要ありませんから、気軽に Web プログラミング技術を学びたい人、環境が欲しい人にはオススメですよ。

サーバー設定を色々いじり倒したいという人は何時もの通り pi ユーザでログインすることも可能。
 
$ ssh pi@coder.local


たった数千円で子供たちに Web 開発について学ぶ環境を用意してあげる事が出来るなんて、素晴らしい時代になりましたね。

それでは、より良い RPi ライフを。

Raspberry Pi Type B 512MB
Raspberry Pi Type B 512MB
posted with amazlet at 13.09.24
RS Components Ltd
売り上げランキング: 233


Posted by netbuffalo at 22:00│Comments(0)TrackBack(0)Raspberry Pi | プログラミング


この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/netbuffalo/4591111

コメントする

名前
URL
 
  絵文字