Tutorial

チュートリアル

簡単なアプリケーションを作るチュートリアルです。

最初の一歩 ― ソースファイルの監視とコンパイル

トップページの「VIewllerJSのはじめ方」を実行し、「viewller -a」で開発環境アプリケーションが起動している前提で進めていきます。開発環境のアプリケーションが起動している状態ではコンソールが専有されてしまっているため、新たにコンソールを開きます。新しく開いたコンソールでソースファイルの監視と、コンパイルを行うコマンドを実行します。

$ viewller -bw

PATHを張った「./node_modules/.bin」にviewllerコマンドへのシンボリックリンクがあるので、コマンドの実行はアプリケーションディレクトリ直下で行ってください。このコマンドも開発環境アプリケーション実行と同じくプロンプトに返ってこないので、コンソールが専有されます。アプリケーションの実行とソースファイルの監視で2つのコンソールが専有されてしまっているので、ソースを編集するためにもうひとつコンソールを開いてください。開いたコンソールで、「apps/src」に入ってください。

「apps/src」の中には「frontend」と「backend」というディレクトリがあります。「frontend」にはフロントエンド描画をするためのコード（クラスファイル）を入れます。「backend」には、バックエンドのnode.jsで動作するAPIを構成するコードを入れます。ViewllerJSはアプリケーション起動時にフロントエンドの「applicationMain.coffee」が実行されます。アプリケーションの起点はこのファイルになります。開発版のアプリケーションがポート5001で起動している場合は、

http://[実行しているホストアドレス]:5001

（例：http://localhost:5001）

にアクセスしてみてください。

上のようなバージョン番号の表示が出ると思います（これはアプリケーションディレクトリにある「package.json」の「version」をそのまま表示しています）。

それでは、「apps/src/frontend」にある「applicationMain.coffee」を開いてみます。

#=============================================================================                                                                                                                                                                                                                                                                                               #                                                                                                                                                                                                                                                                                                                                                                            # Application Main                                                                                                                                                                                                                                                                                                                                                        #                                                                                                                                                                                                                                                                                                                                                                            #=============================================================================

class applicationMain extends UIView

  constructor:(param)->super(param)

  didFinishLaunching:->

    bounds = FWApplication.getBounds()

    FWAPICALL

      file: "sampleapi"

      endpoint: "version"

    , (ret) =>

      version = new UITextView(FWRectMake(

))

      version.textAlign = "UITextAlignmentCenter"

      version.backgroundColor = FWColor(0, 127, 255, 1.0)

      version.font.color = FWColor(255, 255, 255, 1.0)

      version.text = "Version: #{ret.version}"

      version.draggable = true

      @addSubview(version)

  didBrowserResize:(bounds)->

    super()

太字になっている部分がアプリケーションとして記述されたコードになります。まずはこれをごっそり消します。

#=============================================================================                                                                                                                                                                                                                                                                                               #                                                                                                                                                                                                                                                                                                                                                                            # Application Main

#                                                                                                                                                                                                                                                                                                                                                                            #=============================================================================

class applicationMain extends UIView

  constructor:(param)->super(param)

  didFinishLaunching:->

  didBrowserResize:(bounds)->

    super()

こうなります。この状態で保存すると「viewller -bw」が別のコンソールで実行中であれば自動的にコンパイルされます。ブラウザをリロードすると画面にはなにも表示されなくなると思います。そこで、コードを消したところへ下記のコードを入れます。

  view = new UIView(FWRectMake(

))

  @addSubview(view)

CoffeeScriptなのでインデントに気を付けてください。保存すると自動的にコンパイルされるので、再びブラウザをリロードしてみてください。ブラウザの左上に四角の枠が出ていれば成功です。

iOSのアプリケーションを作った事がある方であれば、このコードがなにをやっているのかは大体は想像つくのではないかと思います。これがなにをしているのかを説明していきます。

まずは最初のこの部分、

view = new UIView(FWRectMake(

))

CoffeeScriptに慣れていない人には奇妙に見えるかもしれませんが、CoffeeScriptでは、引数や配列要素の列挙にカンマが必要ありません。この場合は、新しく生成するビューのx座標、y座標、width、heightの4つのデータを「FWRectMake()」に渡しています。「FWRectMake()」は、x, y, width, heightを渡すと「UIView」の初期化引数に渡すためのデータを生成して返してくれるグローバルメソッドになっています。ビューの新規作成の時はこうするものだと覚えてください。

「UIView」はビュークラスになります。「◯◯View」という名前のビュークラスは全てこの「UIView」を継承しています。ここでは、UIViewクラスのオブジェクトを新規作成しています。オブジェクトは新規作成出来ましたが、このままでは画面上には出て来ません。そこで「addSubview()」します。

@addSubview(view)

「@」はCoffeeScriptでは「this」になります。ここでは、現在コードを編集している「applicationMain」自身になります。なのでこのコードは、

this.addSubview(view)

と同じ意味になります。意味的には「thisにviewを追加しろ」という事になります。

iOSアプリケーション作成と同じ様に、このフレームワークでは「ビューを生成し、ビューに追加していく事でアプリケーションを作成」していきます。コードのclass宣言の部分を見ると判りますが、この「applicationMain」はUIViewを継承しています（extends UIView）。ですので、「applicationMain」にビューを追加することが出来ます（「addSubview」はUIViewのインスタンスメソッドです）。この「applicationMain」が最下層のビューになります。全てのビューはここを基準に追加されていきます。

「FWRectMake()」で指定するx, y座標は、追加される親ビューの左上座標からの相対座標になります。また、親ビューが移動された場合は、そこに追加されたビューも相対的に移動します（親ビューに追随します）。

Page updated

Google Sites

Report abuse