JavaScriptフレームワーク「SproutCore」を触ってみよう
先日待望のiPhone 3Gが発売され、欲しいなぁと思いつつもまだ手に入れていない熊谷です。こんにちは。
ちなみにアップルではこのiPhone 3Gと同時にMobileMeというサービスが始まりました。メールやカレンダー、アドレス帳といったものをiPhone/iPod touchやMac・Windowsで同期するサービスで、有料なものではあるのですがiPhoneユーザにとっては便利なサービスだそうです。iPhoneは手に入れてませんが、このMobileMeのアカウントはあるので早速使ってみました。ブラウザでサイトにアクセスしログインすると、Macで使用しているMail.appといったアプリケーションと同じような画面が表示され同じような操作で使うこと出来ます。デザイン等々さすがアップルという感じです。
で、そのMobileMeではJavaScriptのフレームワーク「SproutCore」というものを利用し一部機能を作っているそうなんですが、どんなものなのか興味がわいてきたので早速触ってみることにしました。
このフレームワークのインストールは簡単で、
$ sudo gem install sproutcore
というようにgemでインストールすることが出来ます。インストールが出来たら早速プロジェクトを作成します。
$ sproutcore example1
これでexample1というプロジェクトが出来ました。
$ cd example1
$ sc-server
このexample1のディレクトリに移動しsc-serverとコマンドを打つと http://localhost:4020/example1 でアクセスすることが出来るようになります。
基本的に「SproutCore」のサイトにあるチュートリアルが良くできているのでその流れ通り触っていくとわかりやすいかもしれません。
では、早速いじってみましょう。作成したプロジェクトのclientsディレクトリの中をいじっていきます。
english.lproj/body.rhtmlがViewに当たるもので、englishということからわかるようにローカライズに対応しているそうです。今回はさわりということでこの辺はenglishで行います。
そんなことで、このbody.rhtmlに例えば、
<%= label_view :paragraph, :tag => 'p', :inner_html => 'hello!!' %>
と記述すると、
というようにhello!!という文字が表示されます。
では次にコントローラを作成してみます。コントローラは、
$ sc-gen controller example1/app
で作成することが出来ます。するとcontrollersディレクトリが生成されているのでその中にあるapp.jsをいじります。app.jsをみると
// ==========================================================================
// Example1.AppController
// ==========================================================================
require('core');
/** @class
(Document Your View Here)
@extends SC.Object
@author AuthorName
@version 0.1
@static
*/
Example1.appController = SC.Object.create(
/** @scope Example1.appController */ {
// TODO: Add your own code here.
}) ;
というようになっているので、 そのTODO部分に以下のコードを追加します。
// TODO: Add your own code here.
message: 'Hello!!',
clickButton: function() {
var currentMessage = this.get('message');
var newMessage = (currentMessage === 'Hello!!') ? 'Good Bye!' : 'Hello!!' ;
this.set('message', newMessage);
}
また、Viewである先ほどのbody.rhtmlに以下のコードを追加します。
<%= label_view :paragraph, :tag => 'p', :bind => { :value => 'Example1.appController.message' } %>
<%= button_view :toggle_button, :title => 'Change Message', :action => 'Example1.appController.clickButton' %>
以上の変更を加えてサーバを再起動しブラウザで表示すると、今度はボタンが表示されそのボタンをクリックするたびにメッセージが切り替わります。
以上、今回はチュートリアルと同じ内容ですがなかなか面白い感じで作成することが出来ます。ドキュメントを読むともっといろいろ触っていきたいと思える内容なので、ちょっと頑張ろうかなと思います。
