2008年7月14日

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' %>