1. 楽々・お手軽！
スマホアプリ開発のススメ！
株式会社ソニックムーブ 青海 航介

2. ところで誰？

3. ってことで自己紹介
• 名前：青海
航介
(せいかい
こうすけ)
• 所属：株式会社ソニックムーブ
• 職種：エンジニア？ディレクター？
• 業務：Herlockってサービスやってます
h,p://www.sonicmoov.com
h,ps://herlock.do

4. 特記事項
うちのネコ可愛い
らびちゃん まぐちゃん

5. ついでに会社の紹介
ソーシャル
ゲーム
受託開発
自社サービス
ソリューション
「世の中にもっと便利で面白いものを創りだす」
事業構成こだわり
目標
etc.
何か面白いネタがあれば是非後ほどお声がけ下さい！

6. 最近のアプリ制作実績
横スクロール型タワーディフェンスゲーム
カジュアルゲーム
2013/12リリース
現在iOSのみ
開発工数平均2人日！
等その他多数。社内案件は弊社開発のHerlockを使ってます。

7. 自社サービス・ソリューション
スマートフォンアプリ開発
スマートフォン用Flash配信動画・インタラクティブ広告配信

8. そろそろ本題

9. ネイティブアプリ開発って
Webアプリの開発よりめんどくさい

10. コンパイル・配布方法・言語・その他
開発規模が大きくなる程顕著

11. Webアプリ開発
コードを書く アップロード ブラウザ確認
開発時
確認時
アップロード 確認
修正作業

12. ネイティブアプリ開発
コードを書く ビルド 端末確認
開発時
確認時（iOS）
端末ID取得 ビルド端末ID登録 アップロード 確認
修正作業
インストール

13. なんか手順増え過ぎ！

14. いえいえ、省けますよそれ？

15. ネイティブアプリ開発
コードを書く ビルド 端末確認
開発時
確認時（iOS）
端末ID取得 ビルド端末ID登録 アップロード 確認
修正作業
インストー
ル

16. 端末IDの取得とDevセンターへの登録編
端末登録作業の省略

17. 端末IDの取得とDevセンターへの登録編
iOS Developer Enterprise Program
年間参加費 ¥24,800
端末登録無しに配布可能
※ただしStoreに出せないので要別途Store用アカウント
※OTA環境が必要等
※その他規約上色々制限はあるので取り扱いに要注意

18. 端末IDの取得とDevセンターへの登録編
開発時にEnterpriseプログラム
端末ID取得 端末ID登録
※はじめに多少準備は必要＆規約に注意

19. さらに本題

20. ビルド編
コンパイルの省略は可能？

21. ビルド編
環境特性
開発者
超えられない壁？

22. ビルド編
ある程度は設計の問題
目的の明確化と可変部分の確保

23. ビルド編
特定機能を外部データに依存させる

24. ビルド編
だけでは・・・

25. ビルド編
コンパイルレスに更新！
JavaScriptエンジンを使うという選択肢
動的実行環境の導入
＝
挙動をJSに依存させて

26. ビルド編
WebViewベースって手も
その前に
（要件次第）

27. ビルド編
設計レベル > 環境レベル > 実用レベル
導入レベルのブレイクダウンが必要

28. ビルド編
例えば既にあるものを利用する
動作環境 開発環境

29. ビルド編
弊社だとゲームが主用途
パフォーマンスが欲しい

30. ビルド編
てことで作りました
「JavaScript」でネィティブアプリの
クロスプラットフォーム開発が出来る環境
JavaScriptを動的に実行
非WebView＋OpenGL

31. ビルド編
コンパイルレスに実装レイヤーの確認が出来る
ブラウザライクな開発環境
＋パフォーマンス

32. 横道に逸れますがHerlockの紹介
h5ps://herlock.do
まだベータだけど、Web上で開発出来る環境を提供中！

33. 横道に逸れますがHerlockの紹介
iOS Android
OpenGL
JavaScriptエンジン JavaScriptエンジン
iOS
API Android
API
OpenGL
JavaObjecEve-­‐C C++
依存Library 依存Library
JavaScriptAPI
JavaScript
builEn Browser
Like
AcEonScript3
Like
(表示周り)
Original
Not
WebView

34. 横道に逸れますがHerlockの紹介
リリース時
デバッグ時 Webサーバーからの動的実行
アプリケーションにパッキング
※Appleの規約上の問題
※読み込みの遅延回避
※更新性と確認容易性
使用想定

35. ビルド編
動的に実行可能な環境を挟むことで
アップロード 確認
修正作業
ビルド アップロード 確認
修正作業
インストール
ブラウザベースの開発に近い感じに
これ系の仕組みはデメリットも当然あるので取捨選択

36. ヒューマンリソース編
HTML/CSS
JavaScript
インフラ
Web
PHP/Ruby/etc.
サーバーサイド
クライアントサイド
Java
Objective-C
ネイティブアプリ
クライアントサイド
共通項

37. そんなに変わらない？

38. リソース確保の難易度が上がった

39. 環境の方を寄せることを考える

40. ヒューマンリソース編
ここでもやっぱりJavaScript？
アプリ周辺はHerlock以外にも色々

41. ヒューマンリソース編
JavaScriptは環境としては整ってきている
• 多人数開発にはAltJS
• サーバーサイドもNodeJSがある
• ライブラリも豊富
• 何より触った事あるひとが多い

42. ヒューマンリソース編
が銀の弾丸では無いので
あとは社内の取り回しに合わせて
リソース問題も
環境の方を寄せることである程度は吸収可能

43. その他
・社内ワークフローの共通項整備
・共通言語・共通認識を作る
新しい技術を既存のものの再利用に使う

44. ソニックムーブのケース（体制）
デザイナー
イラストレータ
ディレクター
エンジニア
アップロード
確認
確認
確認
Webサーバー
アプリサーバー
修正依頼
修正依頼
素材・デザイン
・ゲームは基本Herlockベース
・デバッガーは社内用
・サーバーは普通のWebサーバー
ソース
管理
社内ファイルサーバー
元素材
管理
Web開発に近い環境・全員がモノを見やすい環境を意識
制作依頼
レギュレーション等
仕様
・JavaScriptが共通言語
・アニメーションはFlashが共通技術

45. まとめ
やっぱりうちのネコ可愛い
らびちゃん まぐちゃん

46. まとめ
冗談

47. まとめ
・開発環境は割と考える余地のある領域
・仕組みで解決出来るものは積極的に
・今あるものを上手く活かす方法は重要
工夫の余地は必ずある

48. 「楽するところは楽してより良いものを！」

49. ソニックムーブでは一緒に働ける仲間を募集中です
気になる方がおられたら是非!!
http://www.sonicmoov.com/recruit/

50. h5ps://herlock.do
Herlockも気になった方がおられたら使ってみて下さい