2014.12.02 第2回Apache Cordova勉強会@IIJ の発表資料です。

1. 2014.12.02
第2回Apache Cordova勉強会@IIJ
株式会社スタジオ・アルカナ 吉田 紳一郎
〜新しい着回しと出会おう〜
を支える技術
－Cordova編－

2. わたしどこのどなた？
株式会社スタジオ・アルカナ
普段はエンジニア／マネージャ業務やってます
吉田 紳一郎
プログラミング、システム設計、インフラ構築、
プロジェクトマネージャ、雑用など、
デザイン以外は基本的になんでもやります。

3. どんな会社？
株式会社スタジオ・アルカナ
17名程度のWeb制作会社
デザイン／システム／インフラ
ワンストップで対応しています
今年で10期目を迎えますが
ソリューション事業から
自社サービス事業へと
転換しようとしています
（ついでにサービス2つ紹介しちゃう）

4. https://svgn.biz/

5. http://repre.me/

6. 本題

7. というサービスの開発事例を紹介します
Apache Cordova を利用して開発した

8. 『XZ』ってなあに？
（サービスについて）
どうやって進めたの？
（プロジェクトについて）
１
２
３ どんな技術を使ってるの？
（Cordovaについて）

9. 『XZ』ってなあに？
（サービスについて）
どうやって進めたの？
（プロジェクトについて）
１
２
３ どんな技術を使ってるの？
（Cordovaについて）

10. Type ファッションコミュニティサービス
Owner STANDING OVATION
Launch 2014. 9. 8

11. どんな企業？

12. ビジョン
「テクノロジーで、新しい感性を。」
ファッションの新たな体験を想像し、
オシャレを楽しむすべての人を応援する。
ファッション体験を、従来の商品主体から
ユーザー主体にシフトする
STANDING OVATION
http://s-ovation.jp/

13. 経営チーム
代表取締役 CEO 荻田芳宏
◆博報堂（1999〜2006）
プロモーション企画やイベントプロデュースを経て、タレントやモデル、
アーティスト、音楽のキャスティングを担当。
◆フューチャースコープ取締役COO（2007〜2013）
「魔法のiらんど」役員陣とネットベンチャー立ち上げに参画。モバイルコンテンツ
のプロデューサー、ブランド戦略部長を経てグループ最年少で取締役COO就任。
スマホアプリ事業（累計200万DL）やソーシャルゲーム事業等を立ち上げ、
120名・月商数億円規模に育て上げる。
取締役 CTO 井上大輔
◆メディアシークなどでエンジニアとしてキャリアを積み、起業。
◆スターダストコミュニケーションズ 代表取締役社長CEO（2006〜2013）
女性向けネットフリマという新しいカテゴリー・ジャンルを切り拓き、
『ショッピーズ』を100万人女性ユーザー（月商数億）の国内最大級
ネットフリマサービスに育て上げる。

14. どんなサービス？

15. http://xz-closet.jp/

16. http://xz-closet.jp/

17. http://xz-closet.jp/

18. http://xz-closet.jp/

19. http://xz-closet.jp/

20. 課題解決
「XZ」は、世界初の着回し解決コミュニティ
手持ちのアイテムの意外な・新しい着回し発見から
着回しバリエーションが増えて、普遍的な悩みを解決する
http://xz-closet.jp/

21. アプリのサンプル動画（↑クリックでリンク開く）
https://repre.me/e99df68f-a0f6-a556-b75a-07e4ee13a9f6
みてみましょう

22. 『XZ』ってなあに？
（サービスについて）
どうやって進めたの？
（プロジェクトについて）
１
２
３ どんな技術を使ってるの？
（Cordovaについて）

23. 『XZ』ってなあに？
（サービスについて）
どうやって進めたの？
（プロジェクトについて）
１
２
３ どんな技術を使ってるの？
（Cordovaについて）

24. 今回お話しするスコープ
インフラ構築
アプリ開発（iOS/Android）
サーバサイドAPI開発
テスト
Web版開発
要件定義
機能設計
画面構成設計
デザインカンプ
外部設計が完了した
後の工程のお話です

25. 開発チーム体制
CTO
PM
SE
PG
SE
PG HTML
HTML
CEO
Test
Test
STANDING OVATION
スタジオ・アルカナ
技術サポート

26. 開発スケジュール
7月 8月 9月
★開発着手 ★α公開
★一般公開(iOS)
★一般公開(Android)
Web版公開 ★
HTML
API設計
アプリ設計
アプリ実装
インフラ構築
★β公開
アプリ実装
API実装
Web版実装
API実装
アプリ実装
API実装

27. 7月 8月 9月
インフラ構築タスク
生々しいWBS見せちゃう
HTML実装タスク
アプリ開発タスク
サーバサイド開発タスク
テスト関連タスク
1人
2人
2人
2人
2人

28. なぜCordovaを採用？（１）
サービスとして必要なものは「アプリ」の開発
当初はネイティブ(Objective-C/Java)を想定していた
アプリ開発に加えてWeb版の開発も予定していた
サービス要件
iOS ＆ Web版の開発：〜9月
Android版の開発：〜11月
スケジュールの目標
スケジュール
最優先！

29. なぜCordovaを採用？（２）
ハイブリッドなのでiOS/Androidを並行で開発できる
Web版を開発する際に再利用できる
Cordova開発にしたらどうなる？
iOS ＆ Android版の開発：〜9月
Web版の開発：〜10月
スケジュールの見込み
スケジュール
短縮できる！

30. なぜCordovaを採用？（３）
メンバーが普段Web系の開発をメインにしている
エンジニアやデザイナーのWeb系スキルを生かせる
開発メンバーのスキルセットとの一致
ネイティブ開発に比べ、学習コストを抑えつつ、
かつ、スピーディにアプリ開発ができそう
ローカルのWebブラウザで開発ができるので、
環境構築やビルド作業があまり手間取らない

31. Cordovaのデメリット
広告系のモジュール等はCordova対応していないので
自分でプラグインを開発する手間がかかる
サードパーティ製のSDKを組み込みにくい
レンダリングする際のチューニングに工数がかかる
※シンプルなUIを設計することで回避はできる
アニメーションや演出がリッチだと動作が重くなりがち
アシアルの久保田さんの本とか
だいぶ参考になります

32. 『XZ』ってなあに？
（サービスについて）
どうやって進めたの？
（プロジェクトについて）
１
２
３ どんな技術を使ってるの？
（Cordovaについて）

33. 『XZ』ってなあに？
（サービスについて）
どうやって進めたの？
（プロジェクトについて）
１
２
３ どんな技術を使ってるの？
（Cordovaについて）

34. を支える技術

35. インフラ
バックエンド（サーバーサイドAPI）
フロントエンド（アプリ開発）

36. Amazon EC2Amazon
Route 53
Elastic Load
Balancing
Amazon S3 AWS OpsWorks
Chef
Amazon SNS
（Push通知）
AWS cloud
インフラ
バックエンド（サーバーサイドAPI）
フロントエンド（アプリ開発）

37. Amazon EC2Amazon
Route 53
Elastic Load
Balancing
AWS OpsWorks
Chef
AWS cloud
インフラ
バックエンド（サーバーサイドAPI）
nginx Apache
HTTP Server
PHP
MySQLZend Framework
ngx_small_light
フロントエンド（アプリ開発）
Amazon S3 Amazon SNS
（Push通知）

38. Amazon EC2Amazon
Route 53
Elastic Load
Balancing
AWS OpsWorks
Chef
AWS cloud
インフラ
バックエンド（サーバーサイドAPI）
nginx Apache
HTTP Server
PHP
MySQLZend Framework
ngx_small_light
フロントエンド（アプリ開発）
Apache Cordova Ionic Framework AngularJS Grunt Crosswalk
Amazon S3 Amazon SNS
（Push通知）

39. フロントエンド（アプリ開発）
Apache Cordova Ionic Framework AngularJS Grunt Crosswalk
Amazon EC2Amazon
Route 53
Elastic Load
Balancing
AWS OpsWorksAWS cloud
インフラ
バックエンド（サーバーサイドAPI）
nginx Apache
HTTP Server
PHP
MySQLZend Framework
ngx_small_light
Amazon S3 Amazon SNS
（Push通知）
ここもうちょっと
掘り下げてみます

40. を支える技術
－Cordova編－

41. HTML, CSS, JavaScriptでアプリ開発ができるプラットフォーム
iOS, Android, WindowsPhone, Windows, Mac OS X など様々
『XZ』では iOS, Android の2つをターゲットにしています

42. HTML5ベースのモバイルアプリケーション開発フレームワーク
HTML, CSS, JavaScriptでもネイティブのようなサクサク感
AngularJSの利用が前提となっているフレームワーク
ボタンなどフロントエンド様々なUIパーツが用意されている
gulp.js

48. ほかにもいろいろあります
http://ionicframework.com/docs/components/
http://ionicframework.com/docs/api/

49. 『XZ』では、Ionic Framework の UI をベースにして
HTMLのCSS設計を行い、デザインを適用しています。
&

50. アプリっぽく魅せる

51. ログイン画面のアニメーション
実際のアプリだと背景が動いている
背景のアニメーションはCSSで実現
サンプル動画（↑クリックでリンク開く）
https://repre.me/7a5d1d3d-a145-1f06-68ce-07d5a1a7d23c

52. Cordovaが重いとき…

53. Cordovaが重いとき…
Cordovaで開発すると動作が重い場合がでてくる。
例えば…
巨大なリストのスクロール…
デザイン凝った画面のスクロール……
そして、Android………
１
２
３

54. 例えば、
1000個のリストを
ng-repeat で描画すると
重い…
巨大なリストのスクロール１

55. そんなときは
collection-repeat
を使って回避できます。
（Ionicのディレクティブ）
巨大なリストのスクロール１

56. collection-repeat
１ 巨大なリストのスクロール

57. デザイン凝った画面のスクロール２

58. デザイン凝った画面のスクロール
ブラウザのスクロールではなく、独自にスクロールの
機構を持っている。
Ionic Framework のスクロール
積極的に GPU が利用されるように、 translate3d の
CSS が適用された領域を位置調整してスクロールする。
DOM 構造が複雑だと、GPU 処理が逆効果になる場合も。
２

59. デザイン凝った画面のスクロール
Ionic で overflow-scroll=true という指定をすると
通常のブラウザのスクロールに切り替わる
ブラウザのスクロールにする
場合によっては、通常のスクロールの方がサクサク動く
２
画面の表示領域から見えなくなった要素はDOMから消す

60. Android…３

61. Android の標準 WebView はレンダリング性能が悪い
Android の標準 WebView
Android…３
iOS の Safari に比べて動作の重さが顕著
とにかく、マジでひどい。

62. Crosswalk は Intel が推進しているプロジェクト
Android！３
Chromium ベースの WebView エンジンが使える
Cordova のアプリにブラウザのレンダリングエンジンを
まるごと入れちゃう感じ
Chrome と同じくらい快適にサクサク動く
動作条件は Android 4.0以降

63. 比較してみましょう
Android！３
標準WebView
サンプル動画（↑クリックでリンク開く）
https://repre.me/f966944c-d849-030a-a1d6-09a17ff546f3
サンプル動画（↑クリックでリンク開く）
https://repre.me/ba8e08bd-2881-243a-7d2f-09b2eedbf060

64. Android 4.0 以降で良ければ、絶対に採用すべき
Android！３
PC と繋いで Chrome の Web インスペクタも使えます
https://crosswalk-project.org/
ブラウザのレンダリングエンジン一式を同梱するので
アプリのサイズが20MBくらい増えますがキニシナイ。

65. まとめ

66. ・Web系のスキルセットを生かしてアプリ開発に参入が
できるのは、かなりメリットを感じる
まとめ
・Android も Crosswalk などが登場してきたので、
動作が重いといった問題点は解消されつつある
・iOS と Android を同時に開発できるのはステキ
・動作がカクカクする時のチューニングは結構大変かも
・サードパーティ製のSDK導入はわりと手間がかかる

67. 使ってるプラグイン
（参考程度に）

68. 使用プラグイン紹介（１）
com.danielcwilson.plugins.googleanalytics
・Google Analytics
com.phonegap.plugins.PushPlugin
・Push通知
com.plugin.datepicker
・日付入力UI
nl.x-services.plugins.launchmyapp
・カスタムURIスキーマ
nl.x-services.plugins.socialsharing
・ソーシャルシェア（Twitter, Facebook, LINE, Instagram）
※LINEとInstagramはデフォルト対応していないので独自実装

69. 使用プラグイン紹介（２）
org.apache.cordova.camera
・カメラ
org.apache.cordova.device
・デバイス情報の取得
org.apache.cordova.inappbrowser
・アプリ内ブラウザ
org.apache.cordova.statusbar
・ステータスバー

70. 最近のホットな話題

71. TechCrunch Tokyo 2014
スタートアップバトルに登壇
113社の応募の中から事前審査を
勝ち抜いた12社のうちの1つ

73. Google+ との公式コラボ

74. ご清聴ありがとうございました！