2014.12.02 第2回Apache Cordova勉強会@IIJ

株式会社スタジオ・アルカナ 吉田 紳一郎

〜新しい着回しと出会おう〜

を支える技術 －Cordova編－

わたしどこのどなた？

株式会社スタジオ・アルカナ

普段はエンジニア／マネージャ業務やってます

吉田 紳一郎

プログラミング、システム設計、インフラ構築、 プロジェクトマネージャ、雑用など、

デザイン以外は基本的になんでもやります。

どんな会社？

株式会社スタジオ・アルカナ

17名程度のWeb制作会社

デザイン／システム／インフラ ワンストップで対応しています

今年で10期目を迎えますが ソリューション事業から 自社サービス事業へと 転換しようとしています

（ついでにサービス2つ紹介しちゃう）

https://svgn.biz/

http://repre.me/

本題

というサービスの開発事例を紹介します

Apache Cordova を利用して開発した

『XZ』ってなあに？ （サービスについて）

どうやって進めたの？ （プロジェクトについて）

１

２

３ どんな技術を使ってるの？ （Cordovaについて）

『XZ』ってなあに？ （サービスについて）

どうやって進めたの？ （プロジェクトについて）

１

２

３ どんな技術を使ってるの？ （Cordovaについて）

Type ファッションコミュニティサービス

Owner STANDING OVATION

Launch 2014. 9. 8

どんな企業？

ビジョン

「テクノロジーで、新しい感性を。」

ファッションの新たな体験を想像し、

オシャレを楽しむすべての人を応援する。

ファッション体験を、従来の商品主体から

ユーザー主体にシフトする

STANDING OVATION http://s-ovation.jp/

経営チーム 代表取締役 CEO 荻田芳宏

◆博報堂（1999〜2006）

プロモーション企画やイベントプロデュースを経て、タレントやモデル、

アーティスト、音楽のキャスティングを担当。

◆フューチャースコープ取締役COO（2007〜2013）

「魔法のiらんど」役員陣とネットベンチャー立ち上げに参画。モバイルコンテンツ

のプロデューサー、ブランド戦略部長を経てグループ最年少で取締役COO就任。

スマホアプリ事業（累計200万DL）やソーシャルゲーム事業等を立ち上げ、

120名・月商数億円規模に育て上げる。

取締役 CTO 井上大輔

◆メディアシークなどでエンジニアとしてキャリアを積み、起業。

◆スターダストコミュニケーションズ 代表取締役社長CEO（2006〜2013）

女性向けネットフリマという新しいカテゴリー・ジャンルを切り拓き、

『ショッピーズ』を100万人女性ユーザー（月商数億）の国内最大級

ネットフリマサービスに育て上げる。

どんなサービス？

http://xz-closet.jp/

http://xz-closet.jp/

http://xz-closet.jp/

http://xz-closet.jp/

http://xz-closet.jp/

課題解決

「XZ」は、世界初の着回し解決コミュニティ

手持ちのアイテムの意外な・新しい着回し発見から

着回しバリエーションが増えて、普遍的な悩みを解決する

http://xz-closet.jp/

アプリのサンプル動画（↑クリックでリンク開く）

https://repre.me/e99df68f-a0f6-a556-b75a-07e4ee13a9f6

みてみましょう

『XZ』ってなあに？ （サービスについて）

どうやって進めたの？ （プロジェクトについて）

１

２

３ どんな技術を使ってるの？ （Cordovaについて）

『XZ』ってなあに？ （サービスについて）

どうやって進めたの？ （プロジェクトについて）

１

２

３ どんな技術を使ってるの？ （Cordovaについて）

今回お話しするスコープ

インフラ構築

アプリ開発（iOS/Android）

サーバサイドAPI開発

テスト

Web版開発

要件定義

機能設計

画面構成設計

デザインカンプ

外部設計が完了した 後の工程のお話です

開発チーム体制

CTO

PM

SE

PG

SE

PG HTML

HTML

CEO

Test

Test

STANDING OVATION

スタジオ・アルカナ

技術サポート

開発スケジュール

7月 8月 9月

★開発着手 ★α公開 ★一般公開(iOS)

★一般公開(Android)

Web版公開 ★

HTML

API設計

アプリ設計

アプリ実装

インフラ構築

★β公開

アプリ実装

API実装

Web版実装

API実装

アプリ実装

API実装

7月 8月 9月

インフラ構築タスク

生々しいWBS見せちゃう

HTML実装タスク

アプリ開発タスク

サーバサイド開発タスク

テスト関連タスク

1人

2人

2人

2人

2人

なぜCordovaを採用？（１）

サービスとして必要なものは「アプリ」の開発

当初はネイティブ(Objective-C/Java)を想定していた

アプリ開発に加えてWeb版の開発も予定していた

サービス要件

iOS ＆ Web版の開発：〜9月

Android版の開発：〜11月

スケジュールの目標

スケジュール 最優先！

なぜCordovaを採用？（２）

ハイブリッドなのでiOS/Androidを並行で開発できる

Web版を開発する際に再利用できる

Cordova開発にしたらどうなる？

iOS ＆ Android版の開発：〜9月

Web版の開発：〜10月

スケジュールの見込み

スケジュール 短縮できる！

なぜCordovaを採用？（３）

メンバーが普段Web系の開発をメインにしている

エンジニアやデザイナーのWeb系スキルを生かせる

開発メンバーのスキルセットとの一致

ネイティブ開発に比べ、学習コストを抑えつつ、 かつ、スピーディにアプリ開発ができそう

ローカルのWebブラウザで開発ができるので、 環境構築やビルド作業があまり手間取らない

Cordovaのデメリット

広告系のモジュール等はCordova対応していないので 自分でプラグインを開発する手間がかかる

サードパーティ製のSDKを組み込みにくい

レンダリングする際のチューニングに工数がかかる ※シンプルなUIを設計することで回避はできる

アニメーションや演出がリッチだと動作が重くなりがち

アシアルの久保田さんの本とか だいぶ参考になります

『XZ』ってなあに？ （サービスについて）

どうやって進めたの？ （プロジェクトについて）

１

２

３ どんな技術を使ってるの？ （Cordovaについて）

『XZ』ってなあに？ （サービスについて）

どうやって進めたの？ （プロジェクトについて）

１

２

３ どんな技術を使ってるの？ （Cordovaについて）

を支える技術

インフラ

バックエンド（サーバーサイドAPI）

フロントエンド（アプリ開発）

Amazon EC2 Amazon Route 53

Elastic Load Balancing

Amazon S3 AWS OpsWorks Chef

Amazon SNS （Push通知）

AWS cloud

インフラ

バックエンド（サーバーサイドAPI）

フロントエンド（アプリ開発）

Amazon EC2 Amazon Route 53

Elastic Load Balancing

AWS OpsWorks Chef

AWS cloud

インフラ

バックエンド（サーバーサイドAPI）

nginx Apache HTTP Server

PHP MySQL Zend Framework

ngx_small_light

フロントエンド（アプリ開発）

Amazon S3 Amazon SNS （Push通知）

Amazon EC2 Amazon Route 53

Elastic Load Balancing

AWS OpsWorks Chef

AWS cloud

インフラ

バックエンド（サーバーサイドAPI）

nginx Apache HTTP Server

PHP MySQL Zend Framework

ngx_small_light

フロントエンド（アプリ開発）

Apache Cordova Ionic Framework AngularJS Grunt Crosswalk

Amazon S3 Amazon SNS （Push通知）

フロントエンド（アプリ開発）

Apache Cordova Ionic Framework AngularJS Grunt Crosswalk

Amazon EC2 Amazon Route 53

Elastic Load Balancing

AWS OpsWorks AWS cloud

インフラ

バックエンド（サーバーサイドAPI）

nginx Apache HTTP Server

PHP MySQL Zend Framework

ngx_small_light

Amazon S3 Amazon SNS （Push通知）

ここもうちょっと

掘り下げてみます

を支える技術 －Cordova編－

HTML, CSS, JavaScriptでアプリ開発ができるプラットフォーム

iOS, Android, WindowsPhone, Windows, Mac OS X など様々

『XZ』では iOS, Android の2つをターゲットにしています

HTML5ベースのモバイルアプリケーション開発フレームワーク

HTML, CSS, JavaScriptでもネイティブのようなサクサク感

AngularJSの利用が前提となっているフレームワーク

ボタンなどフロントエンド様々なUIパーツが用意されている

gulp.js

ほかにもいろいろあります

http://ionicframework.com/docs/components/

http://ionicframework.com/docs/api/

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

&

アプリっぽく魅せる

ログイン画面のアニメーション

実際のアプリだと背景が動いている

背景のアニメーションはCSSで実現

サンプル動画（↑クリックでリンク開く）

https://repre.me/7a5d1d3d-a145-1f06-68ce-07d5a1a7d23c

Cordovaが重いとき…

Cordovaが重いとき…

Cordovaで開発すると動作が重い場合がでてくる。

例えば…

巨大なリストのスクロール…

デザイン凝った画面のスクロール……

そして、Android………

１

２

３

例えば、

1000個のリストを

ng-repeat で描画すると

重い…

巨大なリストのスクロール １

そんなときは

collection-repeat

を使って回避できます。 （Ionicのディレクティブ）

巨大なリストのスクロール １

collection-repeat

１ 巨大なリストのスクロール

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

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

ブラウザのスクロールではなく、独自にスクロールの 機構を持っている。

Ionic Framework のスクロール

積極的に GPU が利用されるように、 translate3d の CSS が適用された領域を位置調整してスクロールする。

DOM 構造が複雑だと、GPU 処理が逆効果になる場合も。

２

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

Ionic で overflow-scroll=true という指定をすると 通常のブラウザのスクロールに切り替わる

ブラウザのスクロールにする

場合によっては、通常のスクロールの方がサクサク動く

２

画面の表示領域から見えなくなった要素はDOMから消す

Android… ３

Android の標準 WebView はレンダリング性能が悪い

Android の標準 WebView

Android… ３

iOS の Safari に比べて動作の重さが顕著

とにかく、マジでひどい。

Crosswalk は Intel が推進しているプロジェクト

Android！ ３

Chromium ベースの WebView エンジンが使える

Cordova のアプリにブラウザのレンダリングエンジンを まるごと入れちゃう感じ

Chrome と同じくらい快適にサクサク動く

動作条件は Android 4.0以降

比較してみましょう

Android！ ３

標準WebView

サンプル動画（↑クリックでリンク開く）

https://repre.me/f966944c-d849-030a-a1d6-09a17ff546f3

サンプル動画（↑クリックでリンク開く）

https://repre.me/ba8e08bd-2881-243a-7d2f-09b2eedbf060

Android 4.0 以降で良ければ、絶対に採用すべき

Android！ ３

PC と繋いで Chrome の Web インスペクタも使えます

https://crosswalk-project.org/

ブラウザのレンダリングエンジン一式を同梱するので アプリのサイズが20MBくらい増えますがキニシナイ。

まとめ

・Web系のスキルセットを生かしてアプリ開発に参入が できるのは、かなりメリットを感じる

まとめ

・Android も Crosswalk などが登場してきたので、 動作が重いといった問題点は解消されつつある

・iOS と Android を同時に開発できるのはステキ

・動作がカクカクする時のチューニングは結構大変かも

・サードパーティ製のSDK導入はわりと手間がかかる

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

使用プラグイン紹介（１）

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はデフォルト対応していないので独自実装

使用プラグイン紹介（２）

org.apache.cordova.camera

・カメラ

org.apache.cordova.device

・デバイス情報の取得

org.apache.cordova.inappbrowser

・アプリ内ブラウザ

org.apache.cordova.statusbar

・ステータスバー

最近のホットな話題

TechCrunch Tokyo 2014 スタートアップバトルに登壇

113社の応募の中から事前審査を 勝ち抜いた12社のうちの1つ

Google+ との公式コラボ

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