Google+ もご覧ください
ユーザーアイコン

ピックアップ

Coder - Raspberry PiをWebアプリ開発環境に変身!

Coder - Raspberry PiをWebアプリ開発環境に変身!

GoogleからCoderというソフトウェアがリリースされました。Raspberry Pi向けに提供されるOSで、WebブラウザからアクセスするとそのままWebシステムの開発ができてしまうという優れものです。

今回はCoderのセットアップ、使い方について紹介します。

公式サイトの紹介動画

公式サイト
公式サイト

インストール

Mac OS Xを使っている場合、インストールはとても簡単です。まずCoderの公式サイトにいき、Coderをダウンロードします。サイズは約1.1GBで、4GBのSDカード以上が推奨されています。

ダウンロード後、解凍すると分かりますが中身はインストーラーとイメージファイルです。Windowsの場合はこのイメージファイルをSDカードに焼けば良いでしょう。

インストーラー
インストーラー

Mac OS Xの場合はインストーラーを立ち上げて、ウィザードに従ってSDカードを差し込んでSDカードに書き込みます。元々の内容は消去されますのでご注意ください。

書き込み中…数分かかります
書き込み中…数分かかります

起動

インストールが終わったらRaspberry PiにSDカードを差し込み、必要に応じて外部機器やネットワークを接続して起動します。ごくごく普通のRaspberry Piとして起動したらcoder.localにアクセスします。Windowsの場合はcoderになるかと思います。

トップページ

パスワード設定画面
パスワード設定画面

最初にcoderにパスワードを設定します。次のアクセス時からこのパスワードがなければcoderにアクセスできなくなるのでご注意ください。

トップページ。簡易チュートリアル付きです
トップページ。簡易チュートリアル付きです

パスワードの設定が終わるとこのような画面が表示されます。パネルになっている部分一つ一つがWebアプリで、右上がメニューになります。

最初はやはりHello Coder
最初はやはりHello Coder

まずHello Coderを開きました。実行結果が表示されます。次に右上のボックスをクリックします。

編集画面
編集画面

そうすると編集画面に入ります。HTML/CSS/JavaScriptといったフロントエンド周りの編集に加えて、サーバサイドのNodeも編集できるのが特徴的です。

JavaScriptの編集画面
JavaScriptの編集画面

Nodeの編集画面
Nodeの編集画面

それぞれの言語向けにハイライターも備わっており、編集しやすいです。折り畳み機能もありますので、不要な部分は折り畳んでおいて編集しやすくしたり、タグのずれを確認するのに使えるでしょう。

メディアアップロード
メディアアップロード

実行プレビュー
実行プレビュー

アプリケーション設定
アプリケーション設定

さらに画像をアップロードしたり、プレビューを表示する、アプリケーションの設定を編集すると言ったことも可能です。CoderだけでNodeをサーバサイドに、HTML/CSS/JavaScriptをフロントに使った開発が完結してしまいます。

次のページでは他のデモ、実際にアプリを作ってみます。

Coder

記事をリクエストする

関連記事

コメント