Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mithril

1,974 views

Published on

Mithrilとは

Published in: Technology
  • Be the first to comment

Mithril

  1. 1. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. meetup app tokyo@1 Web MVC+SPAフレームワーク Mithril 2016/06/24 GDI 渋川よしき
  2. 2. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. お前だれよ?  前職 ⁃ 自動車会社の社内SE  現職 ⁃ 社内ゲームエンジン用のフレームワーク (クライアント用もサーバ用も)作ったり、 開発支援ツール作ったりいわゆる社内SE ⁃ 最近はQt(C++)を毎日書いてます 渋川 よしき  プログラミング  C++とかPythonとかGolangとかJavaScriptとか  本  つまみぐい勉強法、アート・オブ・コミュニティ(翻訳)、 Mobageを支える技術、オブジェクト指向JavaScript(翻訳)、 ポモドーロ・テクニック入門(翻訳)、etc
  3. 3. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 昨年出しました!  JavaScriptの、最速クライアント用MVCフレームワークの本です! ⁃ 速いのが好きな人や、変化が多いブラウザ周辺技術に疲れた人に オススメ ⁃ 古くなってません!  電子書籍のみです  表紙は黒ムツの仲間 ⁃ 南オセアニアの深海魚 ⁃ 最大75cm ⁃ 確認された最高齢は 100歳を超えるとか
  4. 4. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. かんたん/Easy/Simpleについて
  5. 5. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. かんたん/Easy/Simpleについて  かんたん/Easy/Simpleといった言葉がよく使われる  ソフトウェアのライブラリ・フレームワーク・言語は特定の問題の解決 をしやすくするために作られる →対象を限定すればどのソフトウェアも「かんたん」で説明できる →つまり何も説明していないのと同じ  例えば ⁃ Qt/Xamarin • 1度GUI作成を学べば、同じ知識で他のOSのアプリも「かんたんに」作れる ⁃ Angular • 束縛が強いため、レールに乗って「かんたんに」MVCアプリが作れる ⁃ Electron • ブラウザの知識があれば「かんたんに」デスクトップアプリが作れる ⁃ C++ • ゼロオーバーヘッドでC言語よりも遅くないコードが「かんたんに」作れる
  6. 6. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. かんたん/Easy/Simpleについて  かんたん/Easy/Simpleといった言葉がよく使われる  ソフトウェアのライブラリ・フレームワーク・言語は特定の問題の解決 をしやすくするために作られる →対象を限定すればどのソフトウェアも「かんたん」で説明できる →つまり何も説明していないのと同じ  例えば ⁃ Qt/Xamarin • 1度GUI作成を学べば、同じ知識で他のOSのアプリも「かんたんに」作れる ⁃ Angular • 束縛が強いため、レールに乗って「かんたんに」MVCアプリが作れる ⁃ Electron • ブラウザの知識があれば「かんたんに」デスクトップアプリが作れる ⁃ C++ • ゼロオーバーヘッドでC言語よりも遅くないコードが「かんたんに」作れる かんたん/Easy/Simpleは今日のNGワード
  7. 7. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. Mithrilとは
  8. 8. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. Mithrilとは  ドキュメントの日本語翻訳あります!  http://mithril-ja.js.org
  9. 9. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. Mithrilの守備範囲 V-DOM Router (SPA) Component XHR サーバへの通信コード含めて Mithrilで完結 ビジュアル層は好きなCSS フレームワーク等が利用可能 (ただしPolymerはChrome限定) その他、既存のUIライブラリも 使える(jQuery UI系など)
  10. 10. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. Mithrilのコア  機能が絞りこまれたアトミックなWebのMVC+SPAフレームワーク ⁃ 他のライブラリに依存せずにアプリが作れる • サーバ通信、非同期処理(promise)、モデル作成、SPAサポート(ラウター) 仮想DOM、コンポーネント ⁃ gzipされた状態で7.8KBほどの大きさ • リファレンスに乗っている関数は16個ほど • そのうちよく使うのは半分ぐらい? • 本を書き始めてから1年以上、バグ修正等で更新は頻繁にあるが、 ほとんどAPIに変更がない  内部では仮想DOMという仕組みを使っていて比較的高速 ⁃ 詳細は「最速MVCフレームワークMithril.jsの速度の秘密」(Qiita) ⁃ 速度チューニングも可能だが、そこまで頑張る必要性が低い
  11. 11. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
  12. 12. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. Mithrilアプリケーションの構造 実際に作ったアプリケーションを参考に紹介します。
  13. 13. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
  14. 14. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.  戦魂 –SENTAMA- 戦国時代がモチーフの戦略シミュレーションRPG 開発の目線での紹介はこちら (http://www.slideshare.net/dena_study/unityrpg)にまとまって います
  15. 15. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 戦魂チーム向けの運用改善  マスターデータ運用は、昨年のFINAL FANTASY Record Keeperのマ スターデータ運用改善で発表したのと同じ仕組みは導入済みだった  スプレッドシートでは表現が難しく入力⇔確認に手間がかかるデータが 2つほどあったのでElectronを使って入力補助ツールを作成した ⁃ 戦場マップ ⁃ 列伝(キャンペーンモード)のオープニングシーケンス  これらを題材に、Mithrilアプリケーションの構造を紹介します
  16. 16. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. できあがったもの  今までのワークフローに手を入れることはなく入力高速化にフォーカス ⁃ Mithril同様、アトミックな部分に割りきって、費用対効果最大化 ⁃ コピペ・ツールチェーン(後工程のスプレッドシートにコピペで データを移せるように、整形した表を表示) ⁃ 試行錯誤の時間が増えて、よりユーザに楽しんでもらえる演出、 マップづくりに時間が使えるようになった
  17. 17. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. Mithrilアプリケーションの基本設計 (1)  HTMLの一部をMithrilの仮想DOM管理下にする ⁃ m.mount(): 1つのコンポーネントに描画を任せる ⁃ m.route(): 現在のURLに応じてコンポーネントを切り替える  全部を仮想DOMにまかせてしまうのも可だが、ヘッダー、フッターな ど変化しない部分は静的HTMLのままの方が楽  複数パートに分割適用もできる(した) m.route() m.mount() m.mount()
  18. 18. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. できあがった構造 main.js application context.js script/index.j s script/ xxx page.js script/ xxx page.js script/ xxx page.js script/viewm odel.js script/model .jswindow open undo/redo script/ canvasmap.js
  19. 19. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. Mithrilアプリケーションの基本設計(2)  コンポーネント、ビューモデル、モデルでアプリを組み立てる ⁃ コンポーネントはコントローラとビューで構成 • どちらも状態は持たない • コンポーネントは入れ子にできる ⁃ ビューモデルは編集中のデータなど永続化しないデータ持つ ⁃ モデルは永続化するべき大事なデータを持つ • VMとMの機能分けは規約でそうなっているだけでAPI上は1つにまとめるこ とも不可能ではない • それどころか、コントローラ==モデルにすることもAPI上は不可能ではな いが、上記の規約に従う方がよい • クラス継承等でコード的にルール強制されるわけではないので、自分で Mithril Wayに従ってコードを整理しなければいけない点は要注意
  20. 20. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 戦場マップエディタのコンポーネント・ビュー(1)  各ページのトップはコンポーネント  よく使うマップ部分もコンポーネント化した ⁃ <canvas>タグをm()で作り、ビューのconfigから、 requestAnimationFrame()の再帰的呼び出しでcanvas更新 ⁃ 引数でモード切り替え • モードによって要素のフィルタリング・サイズ変更など
  21. 21. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 戦場マップエディタのコンポーネント・ビュー(2)  ビューの一部に、仮想DOM以外のライブラリを併用することが可能 ⁃ 既存のUI部品資産があれば、それを利用できる  表はMITライセンス版のhandsontableを使用 ⁃ ビューのconfigの機能を使って適用 ⁃ 行・列のどちらの方向もExcelっぽく選択でき、コピペでExcelにそ のまま貼れる
  22. 22. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. シングルページアプリケーションのサポート  画面の完全リロードやリセットが起きなくなり、レスポンスがよくなる  Mithrilの場合は、フルリロードの従来型ウェブアプリケーションも、 SPAにする場合も、コードは特に変わらないので対応しない理由はない  URLのスタイルがいくつか選べる  今回はデフォルトのまま利用 スタイル 例 デメリット “search” (デフォルト) http://server/?/path/to/page history.pushStateがないIE8ではリフレッシュ してしまう “hash” http://server/#/path/to/page どのブラウザでもOKだが、名前付きアン カーが使えなくなる “pathname” http://server/path/to/page URLは一番きれいだが、サーバ側の設定が必 要 history.pushStateがないIE8ではリフレッシュ してしまう
  23. 23. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. おまけ: Electron側の描画側ではない方のプロセス  ブラウザ/レンダラプロセス間のインタラクションを疎にしつつ、普通 のデスクトップアプリの使い勝手を再現した ⁃ Electronのブラウザプロセス側のコードはモデルの履歴管理と、 ファイル入出力に特化する。 ⁃ ブラウザがXHRでサーバ通信する代わりに、編集(モデル変更)時に レンダラープロセスがJSONをブラウザプロセスに送る ⁃ ファイル読み込み、アンドゥ・リドゥ実行時にブラウザプロセスか ら、今表示すべきモデルを レンダラープロセスに送り、 Mithrilのモデルをリセット ⁃ 詳しくはQiitaの「Electron+ Mithrilで、ふつうのデスク トップアプリを作る」参照
  24. 24. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. ちなみに  餃子声優 橘田いずみさん(@izugyoza)の餃子本
  25. 25. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
  26. 26. Copyright (C) DeNA Co.,Ltd. All Rights Reserved.
  27. 27. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. Mithrilのアプリの構造と完全に一致
  28. 28. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. 橘田いずみさんの餃子のコア  アトミックな餃子フレームワーク ⁃ 限界まで絞りこまれたシンプルな材料 • 豚肉・青ネギ・生姜のみ • ニンニクもニラも使わず、豚肉を混ぜるときは箸で行う ⁃ 夕食以外も安心して食べられる ⁃ 爪の手入れをしている女性にも優しそう ⁃ これに、各種野菜などをアドオンして餡を仕上げる • 単に混ぜるだけなので、肉餡をたくさん作ってから小分けにして、一度に 数種類の餃子を仕上げることも可能  高いポータビリティ ⁃ 肉餡の状態の状態でも保存ができるし、餃子にしても保存が可能
  29. 29. Copyright (C) DeNA Co.,Ltd. All Rights Reserved. まとめ  MithrilはアトミックなMVC+SPAフレームワーク ⁃ 関数の数が少なく、余計な機能がないため、APIの変更もほぼない ⁃ デスクトップGUI開発者も勉強になりますよ!  CSSフレームワークは自由に切り替えられる ⁃ 僕のお気に入りはMaterial Design Lite (mithril-mdl) ⁃ ShadowDOMが来たらPolymerが・・・  コンポーネントの分割、ビューモデル、モデルの責務分割が勝利の鍵 ⁃ データの流れを整流  既存のUIライブラリと一緒に使ったり、canvas を組み込んだりもできます  Electronと一緒に使うのも簡単 ⁃ 社内ツールを作ってみた  餃子と同じぐらいMithrilもいいよ

×