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.
JavaScriptエンジンによる
アプリの動的実行環境を作っている話
13年8月26日月曜日
目次
• 自己紹介
• 概要
• なぜ作ったのか
– 課題と方向性
– コンセプト
• メリット/デメリット
• 課題と展開等
2
13年8月26日月曜日
自己紹介
• 名前:青海	
  航介
• 所属:株式会社ソニックムーブ
          -­‐	
  	
  h/p://www.sonicmoov.com
• 職種:フロントエンドエンジニアetc.
• その他:ネコを飼ってます
3
13...
4
概要
13年8月26日月曜日
概要
「JavaScript」でネィティブアプリの
 クロスプラットフォーム開発が出来る環境	
  
何を作っているか
とりあえずのイメージとしてはTitaniumMobile等,既存のもの
+α
13年8月26日月曜日
概要
Webサービス(開発環境) 実行環境
• WebIDE
• アプリの管理
• ビルド
• デバッグ環境
• アプリ実行エンジン
• JavaScriptの実行
• 環境差異の吸収
• 描画等の実動作
現状の提供形態
「Herlock」とい...
概要 実行環境側の仕組み
iOS Android
主言語
・ObjecFve-­‐C
・C++
主言語
・Java
・C++
描画
・OpenGLES2.0
描画
・OpenGLES2.0
JavaScriptエンジン
・JavaScriptC...
概要 実行環境側の仕組み
iOS Android
OpenGL
JavaScript(実行コード)
JavaScriptエンジン(JSC) JavaScriptエンジン(V8)
iOS	
  API Android	
  API
OpenGL
...
概要 実行環境側の仕組み
リリース時
デバッグ時 Webサーバーからの動的実行
アプリケーションにパッキング
※Appleの規約上の問題
※読み込みの遅延回避
※更新性と確認容易性
使用想定
13年8月26日月曜日
デモ
13年8月26日月曜日
11
なぜ作ったのか
13年8月26日月曜日
なぜ作ったのか
アプリ開発の課題
パフォーマンスと開発コスト(※主にブラウザ)
最適化コストが割に合わない/端末個別対応
リソース/ノウハウの流用性
言語差異/Frameworkの作法/細かいノウハウ
環境差異
Android<=>iOS,	
...
なぜ作ったのか
既存の開発環境
iOS
Android
• 言語の学習コストは低い
• 自由度の高さ
• 一通りライブラリがある
• 端末差異
• パフォーマンス
• バグ
• バージョン毎の互換性
• UI周りの完成度が高い
• ガイドライン...
なぜ作ったのか
既存の開発環境	
  -­‐	
  クロスプラットフォーム
WebViewによるハイブリットタイプ(PhoneGap	
  etc)
言語としてのラッパータイプ(Titanium	
  etc)	
  
ローレベルタイプ(Cor...
なぜ作ったのか
クロスプラットフォーム環境で得る事が出来るもの
銀の弾丸はあり得ないが、より自分たちの都合の良い環境
という意味での最適解は、作る事で得られるかも?
「目的」に沿って使えば、そこそこの工数削減と利便性があるが
どうしようもない部...
なぜ作ったのか
プログラムだけではなく総合的に取り回しの良い環境を
Flash/AS3 JavaScript HTML
受託アプリ開発
ソーシャルゲーム開発
自社のケース
コンセプト
13年8月26日月曜日
なぜ作ったのか
「Web開発者が使い易い環境が欲しい」
・Web開発者が使い易い技術を用いたい
・可能な限りiOS/Androidは一緒に開発したい
・パフォーマンスもそれなりにあると良い
・分かり易い概念に基づいたものが良い
・ブラウザみたい...
パフォーマンスと開発コストのバランス
既存の開発リソース/ノウハウの流用
開発ノウハウとコストの集約	
  
なぜ作ったのか
	
  	
  	
  -­‐	
  クロスプラットフォーム実行環境
	
  	
  	
  -­‐	
  JavaS...
なぜ作ったのか
あとはノリ
コンセプト
「Web開発者が使い易い環境を」
13年8月26日月曜日
20
メリット・デメリット
(利用側)
13年8月26日月曜日
解決出来る問題及びメリット
• 言語の統一による言語学習コスト軽減
• ソースコードの共通化による開発コスト削減
• 編集	
  =>	
  確認までのコスト削減
• 既存リソースの流用性向上
• 実装時の描画最適化の手間削減
Webアプリ開発...
解決出来ない問題及びデメリット
• 既存ネイティブ開発のリソースが流用性低下
• 環境としての成熟度が低い
• ハイレベルAPIの少なさ
今後の開発と時間によって改善されるもの
• ブラックボックスの肥大化による問題把握の複雑化
完全には解消出...
デメリットをどう補うか
• 既存ネイティブ開発のリソースが流用性低下
=>モジュール/プラグイン開発への流用
• 環境としての成熟度が低い
=>継続的な改善
• ハイレベルAPIの少なさ
=>UIフレームワーク等の拡充
• ブラックボックスの肥...
今後の展開
現状の不足点を補完
環境としての多様性
周辺サービスの拡充
13年8月26日月曜日
今後の展開
• ローカル開発環境への対応
• 周辺環境の提供
• GUIツールの提供
• UIライブラリの提供
• 対応ライブラリの拡充
• モジュール開発手法の提供
• 共同編集の仕組みを提供
• センサー、カメラ等現状非対応
機能の対応
•...
まとめ
13年8月26日月曜日
まとめ
開発環境は一長一短
27
状況や組織に合わせて都合が良いものを
選ぶのがベター
自分たちで作ってみるのも一つの選択肢
13年8月26日月曜日
最後に
28
まだベータですが、無料なので気が向いたら登録してみてください
http://herlock.do
尚、現状まだクローズドなので
順次ご案内という形になっていますがご了承下さい
13年8月26日月曜日
29
ご清聴ありがとうございました
13年8月26日月曜日
Upcoming SlideShare
Loading in …5
×

LL祭り2013資料

1,564 views

Published on

クロスプアラットフォーム開発環境Herlockに関する内部技術と開発コンセプト

Published in: Technology
  • Be the first to comment

LL祭り2013資料

  1. 1. JavaScriptエンジンによる アプリの動的実行環境を作っている話 13年8月26日月曜日
  2. 2. 目次 • 自己紹介 • 概要 • なぜ作ったのか – 課題と方向性 – コンセプト • メリット/デメリット • 課題と展開等 2 13年8月26日月曜日
  3. 3. 自己紹介 • 名前:青海  航介 • 所属:株式会社ソニックムーブ           -­‐    h/p://www.sonicmoov.com • 職種:フロントエンドエンジニアetc. • その他:ネコを飼ってます 3 13年8月26日月曜日
  4. 4. 4 概要 13年8月26日月曜日
  5. 5. 概要 「JavaScript」でネィティブアプリの  クロスプラットフォーム開発が出来る環境   何を作っているか とりあえずのイメージとしてはTitaniumMobile等,既存のもの +α 13年8月26日月曜日
  6. 6. 概要 Webサービス(開発環境) 実行環境 • WebIDE • アプリの管理 • ビルド • デバッグ環境 • アプリ実行エンジン • JavaScriptの実行 • 環境差異の吸収 • 描画等の実動作 現状の提供形態 「Herlock」というサービス名でクローズドベータ中 h/p://herlock.do 13年8月26日月曜日
  7. 7. 概要 実行環境側の仕組み iOS Android 主言語 ・ObjecFve-­‐C ・C++ 主言語 ・Java ・C++ 描画 ・OpenGLES2.0 描画 ・OpenGLES2.0 JavaScriptエンジン ・JavaScriptCore JavaScriptエンジン ・V8 JavaScriptAPI JavaScript  builFn Browser  Like AcFonScript3  Like (表示周り) Original Not  WebView 13年8月26日月曜日
  8. 8. 概要 実行環境側の仕組み iOS Android OpenGL JavaScript(実行コード) JavaScriptエンジン(JSC) JavaScriptエンジン(V8) iOS  API Android  API OpenGL JavaObjecFve-­‐C C++ 依存Library 依存Library 13年8月26日月曜日
  9. 9. 概要 実行環境側の仕組み リリース時 デバッグ時 Webサーバーからの動的実行 アプリケーションにパッキング ※Appleの規約上の問題 ※読み込みの遅延回避 ※更新性と確認容易性 使用想定 13年8月26日月曜日
  10. 10. デモ 13年8月26日月曜日
  11. 11. 11 なぜ作ったのか 13年8月26日月曜日
  12. 12. なぜ作ったのか アプリ開発の課題 パフォーマンスと開発コスト(※主にブラウザ) 最適化コストが割に合わない/端末個別対応 リソース/ノウハウの流用性 言語差異/Frameworkの作法/細かいノウハウ 環境差異 Android<=>iOS,  Androidの端末間,  ブラウザ間 課題と方向性 13年8月26日月曜日
  13. 13. なぜ作ったのか 既存の開発環境 iOS Android • 言語の学習コストは低い • 自由度の高さ • 一通りライブラリがある • 端末差異 • パフォーマンス • バグ • バージョン毎の互換性 • UI周りの完成度が高い • ガイドライン等が充実 • 端末が少ない • ライブラリも一通り • 言語の学習コストは高め • 自由度の低さ • XCodeが辛い 課題と方向性 13年8月26日月曜日
  14. 14. なぜ作ったのか 既存の開発環境  -­‐  クロスプラットフォーム WebViewによるハイブリットタイプ(PhoneGap  etc) 言語としてのラッパータイプ(Titanium  etc)   ローレベルタイプ(Corona  Unity  etc)    ・パフォーマンスの問題  ・描画の最適化コスト  ・UI周りは書き分けが必要  ・コンパイル  ・ハイレベルな部分の補完  ・特殊な部分が多い  ・  コンパイル  ・Web+αで開発が可能(言語・柔軟性)  ・コードの共通化  ・簡易に書ける  ・ある程度コードの共通化  ・パフォーマンスを出し易い  ・コードの共通化 課題と方向性 13年8月26日月曜日
  15. 15. なぜ作ったのか クロスプラットフォーム環境で得る事が出来るもの 銀の弾丸はあり得ないが、より自分たちの都合の良い環境 という意味での最適解は、作る事で得られるかも? 「目的」に沿って使えば、そこそこの工数削減と利便性があるが どうしようもない部分も確実に存在する 課題と方向性 13年8月26日月曜日
  16. 16. なぜ作ったのか プログラムだけではなく総合的に取り回しの良い環境を Flash/AS3 JavaScript HTML 受託アプリ開発 ソーシャルゲーム開発 自社のケース コンセプト 13年8月26日月曜日
  17. 17. なぜ作ったのか 「Web開発者が使い易い環境が欲しい」 ・Web開発者が使い易い技術を用いたい ・可能な限りiOS/Androidは一緒に開発したい ・パフォーマンスもそれなりにあると良い ・分かり易い概念に基づいたものが良い ・ブラウザみたいな更新の仕組みが良い 取るものと捨てるもののバランスの問題で解決可能? 13年8月26日月曜日
  18. 18. パフォーマンスと開発コストのバランス 既存の開発リソース/ノウハウの流用 開発ノウハウとコストの集約   なぜ作ったのか      -­‐  クロスプラットフォーム実行環境      -­‐  JavaScriptによるAPIの共通化      -­‐  Flash/htmlベースのAPI設計      -­‐  Webライクなワークフロー・実行環境      -­‐  暗黙のOpenGLによるレンダリング      -­‐  WebViewに依存しないJavaScriptの実行 開発コンセプト コンセプト 13年8月26日月曜日
  19. 19. なぜ作ったのか あとはノリ コンセプト 「Web開発者が使い易い環境を」 13年8月26日月曜日
  20. 20. 20 メリット・デメリット (利用側) 13年8月26日月曜日
  21. 21. 解決出来る問題及びメリット • 言語の統一による言語学習コスト軽減 • ソースコードの共通化による開発コスト削減 • 編集  =>  確認までのコスト削減 • 既存リソースの流用性向上 • 実装時の描画最適化の手間削減 Webアプリ開発ライクなワークフローの実現 13年8月26日月曜日
  22. 22. 解決出来ない問題及びデメリット • 既存ネイティブ開発のリソースが流用性低下 • 環境としての成熟度が低い • ハイレベルAPIの少なさ 今後の開発と時間によって改善されるもの • ブラックボックスの肥大化による問題把握の複雑化 完全には解消出来ないもの • 極度のチューニング領域 捨てるもの 13年8月26日月曜日
  23. 23. デメリットをどう補うか • 既存ネイティブ開発のリソースが流用性低下 =>モジュール/プラグイン開発への流用 • 環境としての成熟度が低い =>継続的な改善 • ハイレベルAPIの少なさ =>UIフレームワーク等の拡充 • ブラックボックスの肥大化による問題把握の複雑化 オープンソース化等、極力環境としての透明性を高める等 ※体制的な部分もあるので、時期はまだ未定 13年8月26日月曜日
  24. 24. 今後の展開 現状の不足点を補完 環境としての多様性 周辺サービスの拡充 13年8月26日月曜日
  25. 25. 今後の展開 • ローカル開発環境への対応 • 周辺環境の提供 • GUIツールの提供 • UIライブラリの提供 • 対応ライブラリの拡充 • モジュール開発手法の提供 • 共同編集の仕組みを提供 • センサー、カメラ等現状非対応 機能の対応 • 広告等のモジュール追加 • ソーシャル等外部サービス対応 • SWFの再生に対応 • ベクター描画への対応 • 高速/安定化 開発環境 実行環境 • ドキュメント/サンプル等の拡充 • サポート体制等の強化 その他 13年8月26日月曜日
  26. 26. まとめ 13年8月26日月曜日
  27. 27. まとめ 開発環境は一長一短 27 状況や組織に合わせて都合が良いものを 選ぶのがベター 自分たちで作ってみるのも一つの選択肢 13年8月26日月曜日
  28. 28. 最後に 28 まだベータですが、無料なので気が向いたら登録してみてください http://herlock.do 尚、現状まだクローズドなので 順次ご案内という形になっていますがご了承下さい 13年8月26日月曜日
  29. 29. 29 ご清聴ありがとうございました 13年8月26日月曜日

×