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

Contenu connexe

Similaire à LL祭り2013資料

早稲田大学授業 - モバイルプログラミング
早稲田大学授業 - モバイルプログラミング早稲田大学授業 - モバイルプログラミング
早稲田大学授業 - モバイルプログラミングIppei Arita
 
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1daisuke shimizu
 
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきことメンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきことMitsuru Ogawa
 
Rubyで操るAWS 第67回Ruby関西 勉強会
Rubyで操るAWS 第67回Ruby関西 勉強会Rubyで操るAWS 第67回Ruby関西 勉強会
Rubyで操るAWS 第67回Ruby関西 勉強会Takuro Sasaki
 
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう Shuhei Iitsuka
 
業務系WebアプリケーションがStrutsから旅立つ日
業務系WebアプリケーションがStrutsから旅立つ日業務系WebアプリケーションがStrutsから旅立つ日
業務系WebアプリケーションがStrutsから旅立つ日Mitsuru Ogawa
 
SPIGAN理論と実装について at 論文LT会 in LPIXEL
SPIGAN理論と実装について at 論文LT会 in LPIXELSPIGAN理論と実装について at 論文LT会 in LPIXEL
SPIGAN理論と実装について at 論文LT会 in LPIXELWEBFARMER. ltd.
 
SeleniumConf16 UK参加報告
SeleniumConf16 UK参加報告SeleniumConf16 UK参加報告
SeleniumConf16 UK参加報告Osamu Shimoda
 
ROS JAPAN Users Group Meetup 03
ROS JAPAN Users Group Meetup 03ROS JAPAN Users Group Meetup 03
ROS JAPAN Users Group Meetup 03Daiki Maekawa
 
マイクロソフトの提供するMA6向けAPIのご紹介
マイクロソフトの提供するMA6向けAPIのご紹介マイクロソフトの提供するMA6向けAPIのご紹介
マイクロソフトの提供するMA6向けAPIのご紹介Sunao Tomita
 
SappoRo.R #3 LT: Shiny by RStudio
SappoRo.R #3 LT: Shiny by RStudioSappoRo.R #3 LT: Shiny by RStudio
SappoRo.R #3 LT: Shiny by RStudioMizumoto Atsushi
 
Spath for enterprise
Spath for enterpriseSpath for enterprise
Spath for enterpriseKoichiro Sumi
 
SeleniumConf Chicago 参加報告
SeleniumConf Chicago 参加報告SeleniumConf Chicago 参加報告
SeleniumConf Chicago 参加報告aha_oretama
 
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #SeleniumjpSeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #SeleniumjpYahoo!デベロッパーネットワーク
 
RxSwiftとMVVMパターンと仲良くなる次のステップ
RxSwiftとMVVMパターンと仲良くなる次のステップRxSwiftとMVVMパターンと仲良くなる次のステップ
RxSwiftとMVVMパターンと仲良くなる次のステップFumiya Sakai
 
Site Reliability Engineering (SRE)を可能にするOpenPIEのご紹介
Site Reliability Engineering (SRE)を可能にするOpenPIEのご紹介Site Reliability Engineering (SRE)を可能にするOpenPIEのご紹介
Site Reliability Engineering (SRE)を可能にするOpenPIEのご紹介OSSラボ株式会社
 
Device Farm を使ったスマホアプリの自動テスト
Device Farm を使ったスマホアプリの自動テストDevice Farm を使ったスマホアプリの自動テスト
Device Farm を使ったスマホアプリの自動テスト健一 辰濱
 

Similaire à LL祭り2013資料 (20)

早稲田大学授業 - モバイルプログラミング
早稲田大学授業 - モバイルプログラミング早稲田大学授業 - モバイルプログラミング
早稲田大学授業 - モバイルプログラミング
 
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
 
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきことメンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
 
Kddi mugen lab
Kddi mugen labKddi mugen lab
Kddi mugen lab
 
Rubyで操るAWS 第67回Ruby関西 勉強会
Rubyで操るAWS 第67回Ruby関西 勉強会Rubyで操るAWS 第67回Ruby関西 勉強会
Rubyで操るAWS 第67回Ruby関西 勉強会
 
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
 
業務系WebアプリケーションがStrutsから旅立つ日
業務系WebアプリケーションがStrutsから旅立つ日業務系WebアプリケーションがStrutsから旅立つ日
業務系WebアプリケーションがStrutsから旅立つ日
 
SPIGAN理論と実装について at 論文LT会 in LPIXEL
SPIGAN理論と実装について at 論文LT会 in LPIXELSPIGAN理論と実装について at 論文LT会 in LPIXEL
SPIGAN理論と実装について at 論文LT会 in LPIXEL
 
SeleniumConf16 UK参加報告
SeleniumConf16 UK参加報告SeleniumConf16 UK参加報告
SeleniumConf16 UK参加報告
 
ROS JAPAN Users Group Meetup 03
ROS JAPAN Users Group Meetup 03ROS JAPAN Users Group Meetup 03
ROS JAPAN Users Group Meetup 03
 
マイクロソフトの提供するMA6向けAPIのご紹介
マイクロソフトの提供するMA6向けAPIのご紹介マイクロソフトの提供するMA6向けAPIのご紹介
マイクロソフトの提供するMA6向けAPIのご紹介
 
DevLove Kansai AWS
DevLove Kansai AWSDevLove Kansai AWS
DevLove Kansai AWS
 
SappoRo.R #3 LT: Shiny by RStudio
SappoRo.R #3 LT: Shiny by RStudioSappoRo.R #3 LT: Shiny by RStudio
SappoRo.R #3 LT: Shiny by RStudio
 
Spath for enterprise
Spath for enterpriseSpath for enterprise
Spath for enterprise
 
概説 Data API v3
概説 Data API v3概説 Data API v3
概説 Data API v3
 
SeleniumConf Chicago 参加報告
SeleniumConf Chicago 参加報告SeleniumConf Chicago 参加報告
SeleniumConf Chicago 参加報告
 
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #SeleniumjpSeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
SeleniumE2Eテストフレームワークを使用したテスト自動化事例 #Seleniumjp
 
RxSwiftとMVVMパターンと仲良くなる次のステップ
RxSwiftとMVVMパターンと仲良くなる次のステップRxSwiftとMVVMパターンと仲良くなる次のステップ
RxSwiftとMVVMパターンと仲良くなる次のステップ
 
Site Reliability Engineering (SRE)を可能にするOpenPIEのご紹介
Site Reliability Engineering (SRE)を可能にするOpenPIEのご紹介Site Reliability Engineering (SRE)を可能にするOpenPIEのご紹介
Site Reliability Engineering (SRE)を可能にするOpenPIEのご紹介
 
Device Farm を使ったスマホアプリの自動テスト
Device Farm を使ったスマホアプリの自動テストDevice Farm を使ったスマホアプリの自動テスト
Device Farm を使ったスマホアプリの自動テスト
 

Dernier

LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルCRI Japan, Inc.
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイスCRI Japan, Inc.
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NTT DATA Technology & Innovation
 
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)Hiroshi Tomioka
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 

Dernier (7)

LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
 
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 

LL祭り2013資料