～新しい着回しと出会おう～『XZ（クローゼット）』を支える技術－Cordova編－

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

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

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

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

https://svgn.biz/

http://repre.me/

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

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

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

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

どんな企業？

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

経営チーム
代表取締役 CEO 荻田芳宏
◆博報堂（1999〜2006）
プロモーション企画やイベントプロデュースを経て、タレントやモデル、
アーティスト、音楽のキャスティングを担当。
◆フューチャースコープ取締役COO（2007〜2013）
...

どんなサービス？

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実...

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

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

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

なぜCordovaを採用？（３）
メンバーが普段Web系の開発をメインにしている
エンジニアやデザイナーのWeb系スキルを生かせる
開発メンバーのスキルセットとの一致
ネイティブ開発に比べ、学習コストを抑えつつ、
かつ、スピーディにアプリ開発が...

Cordovaのデメリット
広告系のモジュール等はCordova対応していないので
自分でプラグインを開発する手間がかかる
サードパーティ製のSDKを組み込みにくい
レンダリングする際のチューニングに工数がかかる
※シンプルなUIを設計すること...

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

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

を支える技術

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

Amazon EC2Amazon
Route 53
Elastic Load
Balancing
Amazon S3 AWS OpsWorks
Chef
Amazon SNS
（Push通知）
AWS cloud
インフラ
バックエンド（サーバ...

Amazon EC2Amazon
Route 53
Elastic Load
Balancing
AWS OpsWorks
Chef
AWS cloud
インフラ
バックエンド（サーバーサイドAPI）
nginx Apache
HTTP Ser...

Amazon EC2Amazon
Route 53
Elastic Load
Balancing
AWS OpsWorks
Chef
AWS cloud
インフラ
バックエンド（サーバーサイドAPI）
nginx Apache
HTTP Ser...

フロントエンド（アプリ開発）
Apache Cordova Ionic Framework AngularJS Grunt Crosswalk
Amazon EC2Amazon
Route 53
Elastic Load
Balancing
A...

を支える技術
－Cordova編－

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

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

ほかにもいろいろあります
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 が適用された領域を位...

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

Android…３

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

Crosswalk は Intel が推進しているプロジェクト
Android！３
Chromium ベースの WebView エンジンが使える
Cordova のアプリにブラウザのレンダリングエンジンを
まるごと入れちゃう感じ
Chrome ...

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

Android 4.0 以降で良ければ、絶対に採用すべき
Android！３
PC と繋いで Chrome の Web インスペクタも使えます
https://crosswalk-project.org/
ブラウザのレンダリングエンジン一式を同...

まとめ

・Web系のスキルセットを生かしてアプリ開発に参入が
できるのは、かなりメリットを感じる
まとめ
・Android も Crosswalk などが登場してきたので、
動作が重いといった問題点は解消されつつある
・iOS と Android を同...

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

使用プラグイン紹介（１）
com.danielcwilson.plugins.googleanalytics
・Google Analytics
com.phonegap.plugins.PushPlugin
・Push通知
com.plugi...

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

最近のホットな話題

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

Google+ との公式コラボ

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

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

CordovaでAngularJSアプリ開発 by アシアル株式会社 12542 views
TechFeedのつくりかた - Angular2/Webpack/I... by Shumpei Shiraishi 40615 views

View on Slideshare

1 of 74 Ad

View on Slideshare

1 of 74 Ad