今回のエンジニアブログを担当する村田です。
2013年に有名となったガジェットの1つに「Raspberry Pi」(ラズベリーパイ)があります。
今回は、Raspberry Piを使った「Coder for Raspberry Pi」について紹介します。
Raspberry Piとは？
Raspberry Piは、ARMプロセッサを搭載したシングルボードの小型コンピューターです。
見た目はちっちゃいですが、なかなかパワフルです。
Wordpressが動作するサーバーを構築することも可能です。
Coder for Raspberry Piとは？
Coder for Raspberry Piは、Google Creative Labsの新しいプロジェクトで、
Raspberry Pi上に簡単にウェブサーバー＋ウェブベース開発環境を作っちゃおう！というツールです。
子供たちに「ウェブ開発の基礎」を教えることを目的にしています。
Coder for Raspberry Piに触れてみましょう。
環境概要
今回は次の構成でCoder for Raspberry Piに触れてみます。
必要な機材
- Raspberry Pi Model B
※ Model Aというのもあるので注意 - 4GB以上のSDカード
- USBケーブル(A〜micro-B)
※ Android端末を充電できるものがあればそれで大丈夫です
もし、Raspberry Piと直接無線LANで繋ぎたい場合は、専用のWiFiモジュールを購入すれば可能です。
Coder for Raspberry Piのセットアップ
次の手順はMacでの手順となります。
- Coder for Raspberry PiのサイトからCoder for Raspberry Pi の Image をダウンロードします。
- ダウンロードしたものを解凍し、インストーラーを起動します。
- 起動後の画面です。「START」をクリックします。
- この状態でSDカードを挿入します。「NEXT」をクリックします。
- SDカードを認識するとこの画面になります。「INSTALL」をクリックしてインストールが終わるのを待ちます。
- 成功するとこの画面が表示されます「OK」をクリックしてインストーラーを終了します。
Coder for Raspberry Piへの接続
Coder for Raspberry PiがサポートするのはChromeのみです。
Chromeが無い場合は、事前にインストールしておきます。
- SDカードをRaspberry Piに差し込み、ネットワークに接続した状態で電源を入れます。
- Chromeを起動し、「CODER.LOCAL」にアクセスします。
SSLエラーの画面が表示されますが、「このまま続行」をクリックします。
- この画面が表示されれば成功です。
初回アクセス時にはパスワードの設定が求められます。パスワードを設定し、ログインしましょう。
- 初回アクセス時は画面の説明が表示されます。
左の吹き出しから順に説明すると
・「＋」ボタンをクリックすると、新しいアプリを作成します。
・「＋」ボタン以外は初めから用意されている3つのアプリです。
・右上の歯車をクリックすると、Coderの設定変更が可能です。
「Got It」をクリックします。
最後に初めから用意されている3つのサンプルアプリを簡単に説明します
Hello Coder
「Hello Coder」というテキストを表示するアプリです。
Eyeball
カーソルのある方を常に眼球が見ている。というアプリです。
Space Rocks!!
飛んでくる岩を撃って破壊するシューティングゲーム
操作方法
- Spaceキー：弾の発射
- ↑キー：自キャラの前進
- ←キー：自キャラの左回転
- →キー：自キャラの右回転
どのアプリにも画面右上に「」というラベルがあります。
これをクリックするとアプリのHTML,CSS,JavaScriptコードを見ることができます。
コードは編集することも可能で、編集した内容を保存すると即アプリに反映されます。
画面右上の「CODER」ラベルをクリックするとTOP画面に戻ります。
以上が、サンプルアプリの説明になります。
「Coder for Raspberry Pi」を使うことで、非常に簡単にウェブサーバーと
HTML, CSS, JavaScriptに触れることができる開発環境が手に入ります。
シューティングゲームといった少し凝ったサンプルもあり
“「ウェブ開発の基礎」を教える”には良い教材だと思いました。
「Raspberry Pi」も楽しいガジェットですので機会があれば別の内容を記載したいと思います。