Pocket

皆さん、こんにちは!
itouです。

2013年5月31日にオープントーン主催のセミナー
エンタープライズ Webシステム カンファレンス(第14回ITテクニカルセミナー)を開催いたしました。
http://www.opentone.co.jp/news/seminar/130531/index.html

その中の「HTML5で目指せ!低コストで高機能なWEB開発」という講演で
Node.jsをベースにしたWebアプリケーション開発プラットフォームである
「Meteor」についてご紹介させていただきました。

ご来場頂いた方から
「Meteor開発に使えるIDEはないのか?」というご意見を伺いましたので
今回は、JavaScript統合開発環境「Cloud9 IDE」を使って
Meteorの開発環境を構築してみます。

Meteorとは

最初に、Meteorについて簡単にご説明いたします。
Meteorとは、サーバ/クライアントともにJavaScriptで記述できる
Webアプリケーション開発プラットフォームです。

導入の敷居が低いという特徴があり
Unix上で下記のコマンドを打つことで、インストールから実行まで実施できます。

インストール

ターミナル上で,以下のコマンドを実行してください。

$ curl install.meteor.com | sh

Hello World作成

ターミナル上の適当な作業ディレクトリに移動し,以下のコマンドを実行してみてください。

$ meteor create hello

実行

$ cd hello # helloディレクトリに移動
$ meteor

Webブラウザで
http://localhost:3000/
にアクセスすると
「Hello World!」と表示されたかと思います。

詳細は
http://www.opentone.co.jp/news/seminar/130531/index.html
に前述のセミナーにて講演した資料がありますので
ご興味ありましたら、ぜひご覧ください。

Cloud9 IDEとは

Cloud9 IDEとは、サーバサイドJavaScriptのための統合開発環境です。
その名の通り、クラウドなので、ブラウザより使用することができます。
コード補完やバージョン管理ツールの連携等
一般的なIDEに備わっている機能が盛り込まれています。

環境構築

では、Cloud9 IDEでMeteorを動かしてみましょう。

アカウント登録

https://c9.io/

から[Sign up]ボタンを押下し
[SIGN UP FOR FREE]から無料版を登録できます。
(無料版はオープンソースプロジェクトになる等の制約があります)

任意のユーザ名と、受信可能なメールアドレスを入力し
[Create your free account]を押下してください。
(Receive our monthly newsletterは外してもOKです。)

登録したメールアドレスにURLが送信されます。
そちらに遷移するとパスワード入力を求められるので
任意のパスワードを入力します。

これで、ダッシュボード画面が表示されました。

Workspace作成

左上の[CREATE NEW WORKSPACE]→[Create a New Workspace」
を押下してください。

[Name your workspace]に”sample”
[Custom]を選択し[CREATE]を押下します。

Meteorインストール~実行

開いた画面の「START EDITING」を押下すると
開発画面が開き、下部にTerminalが表示されていると思います。
Terminal上に

$ curl http://c9install.meteor.com | sh

と入力するとMeteorのインストールが始まります。

$ meteor create my_cool_app

と入力し、アプリケーションを作成します。

Meteorを実行します。

$ cd my_cool_app
$ meteor

起動したWebアプリケーションは

http://[Workspace名].[ユーザ名].c9.io/

でアクセスできます。

今回のWorkspace名とユーザ名の場合
http://sample.itou.c9.io/
にアクセスし、動作確認を行います。
Hello World!が表示されました。

このように、http://c9install.meteor.com/を使用することで
MeteorのインストールからCloud9の連携まで一連の構築作業を自動化できます。

http://c9install.meteor.com/については

Vianney Lecroart aka acemtp」という有志が作成しているとのことです。

編集してみよう

では、このHello World!を元に編集してみましょう。
Meteorを実行した状態のままで
表示メッセージを「★★★メッセージを変更★★★」に変更します。
「Ctrl+s」でソースを保存して

http://[Workspace名].[ユーザ名].c9.io/

にアクセスします。
再起動の必要はありません。

このように、ショートカットキー等も使えて、一般のIDEの感覚で使用することができます。
また、修正後は再起動せずにリアルタイムで反映されるので、スピーディな開発が可能となります。

最後に

今回、Meteorの開発に使用できる
Cloud9というIDEを紹介させていただきました。

Meteor(JavaScript)の開発環境として、メジャーなIDEであるEclipse等はもちろん使用できますが
ローカルにソースを置いて・・・という話になります。
全てクラウドで簡潔できるMeteor+Cloud9の組み合わせは
より手軽に開発できるというメリットがあります。

また、ここでは詳しくは触れませんが
Cloud9はGitHub、Bitbucketなどのバージョン管理ツールサービスや
HerokuなどのWeb公開クラウドサービスとの連携も可能となっております。

商用利用への壁はあると思いますが
Meteorをより手軽に開発できるという意味で
Cloud9はMeteor開発ツールの一つの選択肢といえるのではないでしょうか。

ぜひ、試していただければと思います。