ハッカソン参加者向け・超特急説明ページ
準備：hifiveの読み込み
以下のようにCSS, JSファイルを読み込んでください。
<script src="//code.htmlhifive.com/ejs-h5mod.js"></script>
<script src="//code.htmlhifive.com/h5.js"></script>
※上記のURLでは、常に最新版のhifiveがホストされます。hifiveがバージョンアップすると、自動的に最新版に置き換えられます。
hifive開発者ツールを使いたい場合
hifive開発者ツールを使う場合は、h5.jsを読み込んだ直後に以下のファイルを読み込んでください。
※hifive開発者ツールを読み込むと、ページロード時に自動的にポップアップウィンドウが開きます。
ポップアップブロックが働いてしまう場合は、一時的にポップアップを許可してください。
Hello World
//コントローラ定義オブジェクト：
// ビュー(DOM)とロジックとのインタラクションを記述。
// 主にイベントハンドラを記述する。
var controller = {
//必須：コントローラのFQCN
__name: 'my.first.app.PageController',
//イベントハンドラ：'(セレクタ) (イベント名)': function(){} の形式で記述。
//指定したセレクタでマッチした要素で指定したイベントが起きたときにハンドラが実行される。
//この例の場合、buttonクラスが指定されている要素でclickイベントが起きるとアラートが表示される。
'.button click': function(context, $el) {
alert('hello, world!');
}
};
//controller()関数で、コントローラ定義オブジェクトを特定のDOM要素に紐づけて動作を開始する
//（DOMの初期化が終わったタイミングで動作を開始するよう、jQueryのreadyのタイミングで呼び出していっる）
$(function(){
h5.core.controller('body', controller);
});
})();
- ポイント
- 全体を即時実行関数で囲みます。（グローバルに変数などを漏らさないようにする一般的な作法）
2. コントローラは、通常のオブジェクトとして定義します。
最低限必要なプロパティは__nameで、ここにはクラス名(FQCN的なもの)を記述します。
ピリオド区切りでパッケージ記述ができます。
JavaやC#などと同様、コントローラ名は先頭を大文字としたパスカルケースで記述することを推奨します。
3. イベントハンドラは、「'(セレクタ) (イベント名)': function(context, $el) { /* コード */ }」という形で、コントローラ定義オブジェクトのプロパティとして記述します。
4. 作成したコントローラ定義オブジェクトを特定のDOM要素に紐づけ動作させる（これを「コントローラ化」と呼んでます）ためには、
h5.core.controller()関数を呼びます。
ontroller()の第1引数はバインド先のDOM要素（セレクタまたは要素）、第2引数はコントローラ定義オブジェクトを指定します。
※controller()を呼ぶと、コントローラ定義オブジェクトがクローンされます。
分担して開発する：hifiveによるコード構造化の基本形
hifiveは、画面をいくつかの領域に（概念上）分割し、その領域ごとにコントローラを記述するようにすることで
コードの分離・構造化や開発の分担を可能にします。
以下に、もっとも基本的なパターンを示します。
1つのスコープに1つのコントローラを書くことを守ることで
コントローラ同士の依存関係を減らす（明確にする）ことができます。
参考：ファイルテンプレート
hifiveでコードを書く際に利用すると便利なファイルテンプレートです。
予めコメントが記述されているので、指定された場所に指定された種類のコードを記述していきます。
使用しなくても動作には影響しませんが、特に理由がなければ使用するとよいでしょう。
（なお、このページのコード例では簡略化のためテンプレートは使用していません。）
部品を記述する(part.js)
画面内の特定の機能を実装する「部品」としてふるまうコントローラを記述します。
var controller = {
__name: 'myapp.PartController',
doSomething: function() {}
};
//expose()関数を使うと、コントローラ定義オブジェクトをグローバルに公開できる。
//パッケージは自動的に認識され、必要な名前空間オブジェクトが自動的に作成される。
//この例の場合、他のファイルからは myapp.PartController（window.myapp.PartControllerと同じ）としてアクセスできるようになる。
h5.core.expose(controller);
})();
必要なものだけを外部に公開する方法
全体を関数スコープでくるむと、その中で記述した変数はほかのファイル（スコープ）からは見えません。
コントローラの場合はh5.core.expose()を使うと公開することができますが、
それ以外の任意の値を公開したい場合は、h5.u.obj.expose()関数を使います。
obj1: object1,
obj2: object2
});
//⇒ path.to.base.obj1 にobject1への参照が代入される。
//myオブジェクト、namespaceオブジェクトは、存在しなければ自動的に作成される。
//すでに存在する場合はそのオブジェクトを利用するので、
//expose()関数はいろいろな場所で何度も呼び出すことができる。
ページ全体の動きを記述する(indexPage.js)
ページ全体の動きを記述します。必要に応じて他の（部品となる）コントローラのメソッドを呼び出したりします。
var indexPageController = {
__name: 'myapp.IndexPageController',
//（先にpart.jsが読み込まれている前提）
//expose()でオブジェクトが公開されているのでmyapp.PartControllerでPartControllerを使うことができる。
//なお、プロパティ名は必ず「Controller」で終わる必要がある。
//また、hifiveでは、アンダースコアで始まるプロパティはプライベートプロパティとみなす。
//（特別な動作をするわけではないが、ルールとして推奨している。
//また、hifive開発者ツールでは_始まりのメソッドをプライベートメソッドとして区別して表示する。）
_partController: myapp.PartController,
'.executeButton click': function() {
this._partController.doSomething();
},
};
h5.core.expose(indexPageController);
})();
この例のようにコントローラのプロパティとして別のコントローラを持たせている場合、
親のコントローラ（indexPageController）を初期化（コントローラ化）する途中で
自動的にその（子どもの）コントローラも初期化されます。
動作開始用ファイル(init.js)
controller()関数を呼んで、ページ全体をつかさどるコントローラを動作させます。
ビューの初期化が完了したタイミングで開始するため、$(function(){});の中でcontroller()関数を呼び出します。
h5.core.controller('body', myapp.IndexPageController);
})();
HTML例
<html>
<head>
<!-- hifive自体の読み込み -->
<link href="//code.htmlhifive.oom/h5.css" rel="stylesheet">
<script src="//code.htmlhifive.com/ejs-h5mod.js"></script>
<script src="//code.htmlhifive.com/h5.js"></script>
<!-- 必要なスクリプトの読み込み（読み込み順に注意） -->
<script src="part.js"></script>
<script src="indexPage.js"></script>
<script src="init.js"></script>
</head>
<body>
</body>
</html>
コントローラの初期化が終わったタイミングで何か処理をする
__ready: function() {
//この関数は、コントローラの初期化が完了し、動作を開始したタイミングで呼ばれる
}
}
__readyプロパティで定義した関数は、controller()を呼び出してコントローラがDOM要素にバインドされ動作を開始した直後に呼ばれます。