Downloaded 13 times
Uploaded byKentaro Iizuka
Knockout を用いた Firefox OS アプリケーションの開発
関東Firefox OS勉強会 4th 発表スライド JavaScript MVVM フレームワーク Knockout を用いた Firefox OS アプリケーションの開発について話しました。
![[2025 Rakuten Technology Conference] Daybreak for AI Agents](https://cdn.slidesharecdn.com/ss_thumbnails/2025rakutentechnologyconferenceai-251119080407-027fe107-thumbnail.jpg?width=640&height=640&fit=bounds)
Knockout を用いた Firefox OS アプリケーションの開発
- 1. Knockout を用いた Firefox OSアプリケーションの開発 iizukak（いいづかけー） 第4回関東 Firefox OS 勉強会発表資料（2013/10/16）
- 2. 自己紹介 ✤ iizukak（いいづかけー） ✤ ✤ ソフトウェアエンジニア @ 六本木 ✤ ✤ Github,Qiita, Twitter JS をたくさん書くお仕事 プログラミングとボルダリングが好き
- 3. 今日お話しすること ✤ MV* フレームワークあれこれ ✤ Knockout の紹介 ✤ Knockoutを用いた Firefox OS アプリの開発 前半は Firefox OS とあまり関係ないですが、お付き合いください
- 4.
- 5. MV* フレームワークあれこれ ✤ JS のMV* フレームワークとされるライブラリは数多い ✤ そもそも、MV* フレームワークはなぜ必要？
- 6. MV* フレームワークあれこれ ✤ Firefox OSアプリ含め、最近の JS 開発では、モデルの状態を、動 的にビューに反映することは必須 ①アイコンタップ ユーザー ②イベント通知 ③モデルの 状態が変化 JS ④ビューに反映
- 7.
- 8. MV* フレームワークあれこれ ✤ MV* フレームワークの多くが、データバインド機能を提供 ✤ ✤ Knockout: デフォルトである ✤ ✤ Angular : デフォルトである Backbone : Epoxy.js とか使ってやる MV* フレームワークは、データバインド機能を中心に、コードを構 造化する手助けをするライブラリ（※個人的見解です）
- 9. MV* フレームワークあれこれ ✤ デザインパターンの話がないぞ！というお客様へ Backbone Knockout ✤ MVVM :Model-View-ViewModel Angular ✤ MVC : Model-View-Controller MVW : Model-View-Whatever MV* の定義は人や本によってまちまち 各々のフレームワークが提案する使い方に従ってコードを書けば、デ ザパタについてはそんなに悩まなくても良い（※個人的見解です）
- 10.
- 11.
- 12. Knockout の紹介 ✤ 宣言的データバインドの例：名前を表示するアプリ HTML <p>First name:<strong data-bind="text: firstName"></strong></p> <p>Last name: <strong data-bind="text: lastName"></strong></p> JavaScript function AppViewModel() { this.firstName = "山田"; this.lastName = "太郎"; } ko.applyBindings(new AppViewModel()); 出力
- 13. Knockout の紹介 ✤ いじくりたいタグに data-bind属性を記述 HTML strong タグをいじりたい <p>First name: <strong data-bind="text: firstName"></strong></p> <p>Last name: <strong data-bind="text: lastName"></strong></p> JavaScript function AppViewModel() { this.firstName = "山田"; this.lastName = "太郎"; } ko.applyBindings(new AppViewModel()); 出力
- 14. Knockout の紹介 ✤ データバインドの種類を書く HTML テキストを挿入： text <p>Firstname: <strong data-bind="text: firstName"></strong></p> <p>Last name: <strong data-bind="text: lastName"></strong></p> JavaScript function AppViewModel() { this.firstName = "山田"; this.lastName = "太郎"; } ko.applyBindings(new AppViewModel()); 出力
- 15. Knockout の紹介 ✤ 適用したい変数名を適当に決める HTML firstName, lastNameにする <p>First name: <strong data-bind="text: firstName"></strong></p> <p>Last name: <strong data-bind="text: lastName"></strong></p> JavaScript function AppViewModel() { this.firstName = "山田"; this.lastName = "太郎"; } ko.applyBindings(new AppViewModel()); 出力
- 16. Knockout の紹介 ✤ ビューに適用する変数を持つコンストラクタを宣言 HTML <p>First name:<strong data-bind="text: firstName"></strong></p> <p>Last name: <strong data-bind="text: lastName"></strong></p> JavaScript コンストラクタに firstName, lastName 変数を用意 出力 function AppViewModel() { this.firstName = "山田"; this.lastName = "太郎"; } ko.applyBindings(new AppViewModel());
- 17. Knockout の紹介 ✤ ko.applybinding メソッドを呼んだタイミングで有効化 HTML <p>Firstname: <strong data-bind="text: firstName"></strong></p> <p>Last name: <strong data-bind="text: lastName"></strong></p> JavaScript バインドを起動 function AppViewModel() { this.firstName = "山田"; this.lastName = "太郎"; } ko.applyBindings(new AppViewModel()); 出力
- 18. Knockout の紹介 ✤ データバインドは、一般的にこんなかんじで記述 HTML <開始タグ data-bind="データバインドの種類:適用する変数名"></終了タグ> JavaScript function コンストラクタ() { this.適用する変数 = 値; } ko.applyBindings(new コンストラクタ());
- 19. Knockout の紹介 ✤ 宣言的データバインドの良さ ✤ HTML を見ればどこの要素がいじられるのか明瞭 ✤ デザイナーさんと分業しやすい ✤ ✤ 「ここはJS で制御する部分だからいじくらんでおこう…」 data-* 属性は正当な HTML 属性のため、実装した HTML が validな HTML になり、気分がよい
- 20. Knockout の紹介 ✤ 組み込みデータバインドをいくつか紹介 click binding クリックイベントをハンドリング cssbinding CSS を適用 visible binding 表示・非表示切り替え if binding if 文による分岐
- 21. Knockout の紹介 ✤ 動的なビュー操作の実装サポート HTML <p>First name:<strong data-bind="text: firstName"></strong></p> <p>Last name: <strong data-bind="text: lastName"></strong></p> <p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName" /></p> JavaScript function AppViewModel() { this.firstName = ko.observable(); this.lastName = ko.observable(); } 出力
- 22. Knockout の紹介 ✤ ユーザの名前入力に従って、表示内容を変更したい HTML <p>First name:<strong data-bind="text: firstName"></strong></p> <p>Last name: <strong data-bind="text: lastName"></strong></p> <p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName" /></p> JavaScript function AppViewModel() { this.firstName = ko.observable(); this.lastName = ko.observable(); } 出力
- 23. Knockout の紹介 ✤ コンストラクタに、ko.observable という変数を宣言 HTML <p>Firstname: <strong data-bind="text: firstName"></strong></p> <p>Last name: <strong data-bind="text: lastName"></strong></p> <p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName" /></p> JavaScript observable な変数を宣言 function AppViewModel() { this.firstName = ko.observable(); this.lastName = ko.observable(); } 出力
- 24. Knockout の紹介 ✤ ユーザが苗字と名前を入力 HTML <p>First name:<strong data-bind="text: firstName"></strong></p> <p>Last name: <strong data-bind="text: lastName"></strong></p> <p>First name: <input data-bind="value: firstName" /></p> ユーザが値を入力 <p>Last name: <input data-bind="value: lastName" /></p> JavaScript function AppViewModel() { this.firstName = ko.observable(); this.lastName = ko.observable(); } 出力
- 25. Knockout の紹介 ✤ 書き換わったことが JS側に通知され、変数が書き換わる HTML <p>First name: <strong data-bind="text: firstName"></strong></p> <p>Last name: <strong data-bind="text: lastName"></strong></p> <p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input 変数の値が書き換わる data-bind="value: lastName" /></p> JavaScript function AppViewModel() { this.firstName = ko.observable(); this.lastName = ko.observable(); } 出力
- 26. Knockout の紹介 ✤ ビューが動的に書き換わる HTML <p>First name:<strong data-bind="text: firstName"></strong></p> <p>Last name: <strong data-bind="text: lastName"></strong></p> <p>First name: <input data-bind="value: firstName" /></p> ビューを動的に書き換えてくれる <p>Last name: <input data-bind="value: lastName" /></p> JavaScript function AppViewModel() { this.firstName = ko.observable(); this.lastName = ko.observable(); } 出力
- 27. Knockout の紹介 ✤ その他の特徴 ✤ MIT ライセンス ✤ 組み込みバインディングで物足りなくなったら、自作できる ✤ 割と高速(Android 2.x 世代の端末でもそれなりに動く) ✤ テストが書きやすい ✤ Knockout 本体も Jasmine を使ってテストされている
- 28. Knockout の紹介 ✤ お仕事での実例 ✤ iPhone, Android向けネイティブゲームアプリ ✤ UI はほぼ全て WebView で実装 ✤ 規模：HTML 200 画面、JS 数万行 ✤ モデルの変更・ビューの書き換えが非常に多い ✤ Knockout を活用。自作 binding も数十個
- 29. Knockout を用いた Firefox OSアプリの開発
- 30. Firefox OS アプリへの組み込み ✤ 試作アプリ ✤ ✤ OAuth認証 ✤ ✤ 簡易 Twitter クライアント タイムライン表示 Github へのリンク
- 31. Firefox OS アプリへの組み込み ✤ UIは Firefox OS Building Blocks ライブラリ
- 32. Firefox OS アプリへの組み込み ✤ アプリケーションの全体像 FxOSクライアント データバインド ・TL情報 ・ファボ情報 ・タップイベント発火 APIサーバ メソッド呼び出し ViewModel ・TL 取得メソッド ・ツイートメソッド Model API 通信 View UI ロジック VIew の状態を管理 ビジネスロジック Twitter API
- 33. Firefox OS アプリへの組み込み ✤ Knockout使っている場所 ✤ タイムラインをリスト表示するとこ ✤ foreach-binding ✤ ko.observableArray ✤ text-binding ✤ attr-binding
- 34. Firefox OS アプリへの組み込み ✤ 感想 ✤ 非常に素直に導入できた ✤ 「あ、これKnockout を使って簡単に書けるやつだ」が多い ✤ ✤ タイムラインへの新規ツイートの挿入が容易に実装できた MVVM がアプリの要件にマッチ ✤ MVVM はそもそもが GUI アプリ向けのデザインパターン
- 35.
- 36.