Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
2014.12.02
第2回Apache Cordova勉強会@IIJ
株式会社スタジオ・アルカナ 吉田 紳一郎
〜新しい着回しと出会おう〜
を支える技術
-Cordova編-
わたしどこのどなた?
株式会社スタジオ・アルカナ
普段はエンジニア/マネージャ業務やってます
吉田 紳一郎
プログラミング、システム設計、インフラ構築、
プロジェクトマネージャ、雑用など、
デザイン以外は基本的になんでもやります。
どんな会社?
株式会社スタジオ・アルカナ
17名程度のWeb制作会社
デザイン/システム/インフラ
ワンストップで対応しています
今年で10期目を迎えますが
ソリューション事業から
自社サービス事業へと
転換しようとしています
(ついでにサービ...
https://svgn.biz/
http://repre.me/
本題
というサービスの開発事例を紹介します
Apache Cordova を利用して開発した
『XZ』ってなあに?
(サービスについて)
どうやって進めたの?
(プロジェクトについて)
1
2
3 どんな技術を使ってるの?
(Cordovaについて)
『XZ』ってなあに?
(サービスについて)
どうやって進めたの?
(プロジェクトについて)
1
2
3 どんな技術を使ってるの?
(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』ってなあに?
(サービスについて)
どうやって進めたの?
(プロジェクトについて)
1
2
3 どんな技術を使ってるの?
(Cordovaについて)
『XZ』ってなあに?
(サービスについて)
どうやって進めたの?
(プロジェクトについて)
1
2
3 どんな技術を使ってるの?
(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を採用?(1)
サービスとして必要なものは「アプリ」の開発
当初はネイティブ(Objective-C/Java)を想定していた
アプリ開発に加えてWeb版の開発も予定していた
サービス要件
iOS & Web版の開発:〜9月
...
なぜCordovaを採用?(2)
ハイブリッドなのでiOS/Androidを並行で開発できる
Web版を開発する際に再利用できる
Cordova開発にしたらどうなる?
iOS & Android版の開発:〜9月
Web版の開発:〜10月
スケジ...
なぜCordovaを採用?(3)
メンバーが普段Web系の開発をメインにしている
エンジニアやデザイナーのWeb系スキルを生かせる
開発メンバーのスキルセットとの一致
ネイティブ開発に比べ、学習コストを抑えつつ、
かつ、スピーディにアプリ開発が...
Cordovaのデメリット
広告系のモジュール等はCordova対応していないので
自分でプラグインを開発する手間がかかる
サードパーティ製のSDKを組み込みにくい
レンダリングする際のチューニングに工数がかかる
※シンプルなUIを設計すること...
『XZ』ってなあに?
(サービスについて)
どうやって進めたの?
(プロジェクトについて)
1
2
3 どんな技術を使ってるの?
(Cordovaについて)
『XZ』ってなあに?
(サービスについて)
どうやって進めたの?
(プロジェクトについて)
1
2
3 どんな技術を使ってるの?
(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………
1
2
3
例えば、
1000個のリストを
ng-repeat で描画すると
重い…
巨大なリストのスクロール1
そんなときは
collection-repeat
を使って回避できます。
(Ionicのディレクティブ)
巨大なリストのスクロール1
collection-repeat
1 巨大なリストのスクロール
デザイン凝った画面のスクロール2
デザイン凝った画面のスクロール
ブラウザのスクロールではなく、独自にスクロールの
機構を持っている。
Ionic Framework のスクロール
積極的に GPU が利用されるように、 translate3d の
CSS が適用された領域を位...
デザイン凝った画面のスクロール
Ionic で overflow-scroll=true という指定をすると
通常のブラウザのスクロールに切り替わる
ブラウザのスクロールにする
場合によっては、通常のスクロールの方がサクサク動く
2
画面の表示...
Android…3
Android の標準 WebView はレンダリング性能が悪い
Android の標準 WebView
Android…3
iOS の Safari に比べて動作の重さが顕著
とにかく、マジでひどい。
Crosswalk は Intel が推進しているプロジェクト
Android!3
Chromium ベースの WebView エンジンが使える
Cordova のアプリにブラウザのレンダリングエンジンを
まるごと入れちゃう感じ
Chrome ...
比較してみましょう
Android!3
標準WebView
サンプル動画(↑クリックでリンク開く)
https://repre.me/f966944c-d849-030a-a1d6-09a17ff546f3
サンプル動画(↑クリックでリンク開く...
Android 4.0 以降で良ければ、絶対に採用すべき
Android!3
PC と繋いで Chrome の Web インスペクタも使えます
https://crosswalk-project.org/
ブラウザのレンダリングエンジン一式を同...
まとめ
・Web系のスキルセットを生かしてアプリ開発に参入が
できるのは、かなりメリットを感じる
まとめ
・Android も Crosswalk などが登場してきたので、
動作が重いといった問題点は解消されつつある
・iOS と Android を同...
使ってるプラグイン
(参考程度に)
使用プラグイン紹介(1)
com.danielcwilson.plugins.googleanalytics
・Google Analytics
com.phonegap.plugins.PushPlugin
・Push通知
com.plugi...
使用プラグイン紹介(2)
org.apache.cordova.camera
・カメラ
org.apache.cordova.device
・デバイス情報の取得
org.apache.cordova.inappbrowser
・アプリ内ブラウザ...
最近のホットな話題
TechCrunch Tokyo 2014
スタートアップバトルに登壇
113社の応募の中から事前審査を
勝ち抜いた12社のうちの1つ
Google+ との公式コラボ
ご清聴ありがとうございました!
~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-
~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-
~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-
~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-
~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-
~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-
Upcoming SlideShare
Loading in …5
×

~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-

6,230 views

Published on

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

Published in: Technology

~新しい着回しと出会おう~ 『XZ(クローゼット)』 を支える技術 -Cordova編-

  1. 1. 2014.12.02 第2回Apache Cordova勉強会@IIJ 株式会社スタジオ・アルカナ 吉田 紳一郎 〜新しい着回しと出会おう〜 を支える技術 -Cordova編-
  2. 2. わたしどこのどなた? 株式会社スタジオ・アルカナ 普段はエンジニア/マネージャ業務やってます 吉田 紳一郎 プログラミング、システム設計、インフラ構築、 プロジェクトマネージャ、雑用など、 デザイン以外は基本的になんでもやります。
  3. 3. どんな会社? 株式会社スタジオ・アルカナ 17名程度のWeb制作会社 デザイン/システム/インフラ ワンストップで対応しています 今年で10期目を迎えますが ソリューション事業から 自社サービス事業へと 転換しようとしています (ついでにサービス2つ紹介しちゃう)
  4. 4. https://svgn.biz/
  5. 5. http://repre.me/
  6. 6. 本題
  7. 7. というサービスの開発事例を紹介します Apache Cordova を利用して開発した
  8. 8. 『XZ』ってなあに? (サービスについて) どうやって進めたの? (プロジェクトについて) 1 2 3 どんな技術を使ってるの? (Cordovaについて)
  9. 9. 『XZ』ってなあに? (サービスについて) どうやって進めたの? (プロジェクトについて) 1 2 3 どんな技術を使ってるの? (Cordovaについて)
  10. 10. Type ファッションコミュニティサービス Owner STANDING OVATION Launch 2014. 9. 8
  11. 11. どんな企業?
  12. 12. ビジョン 「テクノロジーで、新しい感性を。」 ファッションの新たな体験を想像し、 オシャレを楽しむすべての人を応援する。 ファッション体験を、従来の商品主体から ユーザー主体にシフトする STANDING OVATION http://s-ovation.jp/
  13. 13. 経営チーム 代表取締役 CEO 荻田芳宏 ◆博報堂(1999〜2006) プロモーション企画やイベントプロデュースを経て、タレントやモデル、 アーティスト、音楽のキャスティングを担当。 ◆フューチャースコープ取締役COO(2007〜2013) 「魔法のiらんど」役員陣とネットベンチャー立ち上げに参画。モバイルコンテンツ のプロデューサー、ブランド戦略部長を経てグループ最年少で取締役COO就任。 スマホアプリ事業(累計200万DL)やソーシャルゲーム事業等を立ち上げ、 120名・月商数億円規模に育て上げる。 取締役 CTO 井上大輔 ◆メディアシークなどでエンジニアとしてキャリアを積み、起業。 ◆スターダストコミュニケーションズ 代表取締役社長CEO(2006〜2013) 女性向けネットフリマという新しいカテゴリー・ジャンルを切り拓き、 『ショッピーズ』を100万人女性ユーザー(月商数億)の国内最大級 ネットフリマサービスに育て上げる。
  14. 14. どんなサービス?
  15. 15. http://xz-closet.jp/
  16. 16. http://xz-closet.jp/
  17. 17. http://xz-closet.jp/
  18. 18. http://xz-closet.jp/
  19. 19. http://xz-closet.jp/
  20. 20. 課題解決 「XZ」は、世界初の着回し解決コミュニティ 手持ちのアイテムの意外な・新しい着回し発見から 着回しバリエーションが増えて、普遍的な悩みを解決する http://xz-closet.jp/
  21. 21. アプリのサンプル動画(↑クリックでリンク開く) https://repre.me/e99df68f-a0f6-a556-b75a-07e4ee13a9f6 みてみましょう
  22. 22. 『XZ』ってなあに? (サービスについて) どうやって進めたの? (プロジェクトについて) 1 2 3 どんな技術を使ってるの? (Cordovaについて)
  23. 23. 『XZ』ってなあに? (サービスについて) どうやって進めたの? (プロジェクトについて) 1 2 3 どんな技術を使ってるの? (Cordovaについて)
  24. 24. 今回お話しするスコープ インフラ構築 アプリ開発(iOS/Android) サーバサイドAPI開発 テスト Web版開発 要件定義 機能設計 画面構成設計 デザインカンプ 外部設計が完了した 後の工程のお話です
  25. 25. 開発チーム体制 CTO PM SE PG SE PG HTML HTML CEO Test Test STANDING OVATION スタジオ・アルカナ 技術サポート
  26. 26. 開発スケジュール 7月 8月 9月 ★開発着手 ★α公開 ★一般公開(iOS) ★一般公開(Android) Web版公開 ★ HTML API設計 アプリ設計 アプリ実装 インフラ構築 ★β公開 アプリ実装 API実装 Web版実装 API実装 アプリ実装 API実装
  27. 27. 7月 8月 9月 インフラ構築タスク 生々しいWBS見せちゃう HTML実装タスク アプリ開発タスク サーバサイド開発タスク テスト関連タスク 1人 2人 2人 2人 2人
  28. 28. なぜCordovaを採用?(1) サービスとして必要なものは「アプリ」の開発 当初はネイティブ(Objective-C/Java)を想定していた アプリ開発に加えてWeb版の開発も予定していた サービス要件 iOS & Web版の開発:〜9月 Android版の開発:〜11月 スケジュールの目標 スケジュール 最優先!
  29. 29. なぜCordovaを採用?(2) ハイブリッドなのでiOS/Androidを並行で開発できる Web版を開発する際に再利用できる Cordova開発にしたらどうなる? iOS & Android版の開発:〜9月 Web版の開発:〜10月 スケジュールの見込み スケジュール 短縮できる!
  30. 30. なぜCordovaを採用?(3) メンバーが普段Web系の開発をメインにしている エンジニアやデザイナーのWeb系スキルを生かせる 開発メンバーのスキルセットとの一致 ネイティブ開発に比べ、学習コストを抑えつつ、 かつ、スピーディにアプリ開発ができそう ローカルのWebブラウザで開発ができるので、 環境構築やビルド作業があまり手間取らない
  31. 31. Cordovaのデメリット 広告系のモジュール等はCordova対応していないので 自分でプラグインを開発する手間がかかる サードパーティ製のSDKを組み込みにくい レンダリングする際のチューニングに工数がかかる ※シンプルなUIを設計することで回避はできる アニメーションや演出がリッチだと動作が重くなりがち アシアルの久保田さんの本とか だいぶ参考になります
  32. 32. 『XZ』ってなあに? (サービスについて) どうやって進めたの? (プロジェクトについて) 1 2 3 どんな技術を使ってるの? (Cordovaについて)
  33. 33. 『XZ』ってなあに? (サービスについて) どうやって進めたの? (プロジェクトについて) 1 2 3 どんな技術を使ってるの? (Cordovaについて)
  34. 34. を支える技術
  35. 35. インフラ バックエンド(サーバーサイドAPI) フロントエンド(アプリ開発)
  36. 36. Amazon EC2Amazon Route 53 Elastic Load Balancing Amazon S3 AWS OpsWorks Chef Amazon SNS (Push通知) AWS cloud インフラ バックエンド(サーバーサイドAPI) フロントエンド(アプリ開発)
  37. 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. 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. 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. 40. を支える技術 -Cordova編-
  41. 41. HTML, CSS, JavaScriptでアプリ開発ができるプラットフォーム iOS, Android, WindowsPhone, Windows, Mac OS X など様々 『XZ』では iOS, Android の2つをターゲットにしています
  42. 42. HTML5ベースのモバイルアプリケーション開発フレームワーク HTML, CSS, JavaScriptでもネイティブのようなサクサク感 AngularJSの利用が前提となっているフレームワーク ボタンなどフロントエンド様々なUIパーツが用意されている gulp.js
  43. 43. ほかにもいろいろあります http://ionicframework.com/docs/components/ http://ionicframework.com/docs/api/
  44. 44. 『XZ』では、Ionic Framework の UI をベースにして HTMLのCSS設計を行い、デザインを適用しています。 &
  45. 45. アプリっぽく魅せる
  46. 46. ログイン画面のアニメーション 実際のアプリだと背景が動いている 背景のアニメーションはCSSで実現 サンプル動画(↑クリックでリンク開く) https://repre.me/7a5d1d3d-a145-1f06-68ce-07d5a1a7d23c
  47. 47. Cordovaが重いとき…
  48. 48. Cordovaが重いとき… Cordovaで開発すると動作が重い場合がでてくる。 例えば… 巨大なリストのスクロール… デザイン凝った画面のスクロール…… そして、Android……… 1 2 3
  49. 49. 例えば、 1000個のリストを ng-repeat で描画すると 重い… 巨大なリストのスクロール1
  50. 50. そんなときは collection-repeat を使って回避できます。 (Ionicのディレクティブ) 巨大なリストのスクロール1
  51. 51. collection-repeat 1 巨大なリストのスクロール
  52. 52. デザイン凝った画面のスクロール2
  53. 53. デザイン凝った画面のスクロール ブラウザのスクロールではなく、独自にスクロールの 機構を持っている。 Ionic Framework のスクロール 積極的に GPU が利用されるように、 translate3d の CSS が適用された領域を位置調整してスクロールする。 DOM 構造が複雑だと、GPU 処理が逆効果になる場合も。 2
  54. 54. デザイン凝った画面のスクロール Ionic で overflow-scroll=true という指定をすると 通常のブラウザのスクロールに切り替わる ブラウザのスクロールにする 場合によっては、通常のスクロールの方がサクサク動く 2 画面の表示領域から見えなくなった要素はDOMから消す
  55. 55. Android…3
  56. 56. Android の標準 WebView はレンダリング性能が悪い Android の標準 WebView Android…3 iOS の Safari に比べて動作の重さが顕著 とにかく、マジでひどい。
  57. 57. Crosswalk は Intel が推進しているプロジェクト Android!3 Chromium ベースの WebView エンジンが使える Cordova のアプリにブラウザのレンダリングエンジンを まるごと入れちゃう感じ Chrome と同じくらい快適にサクサク動く 動作条件は Android 4.0以降
  58. 58. 比較してみましょう Android!3 標準WebView サンプル動画(↑クリックでリンク開く) https://repre.me/f966944c-d849-030a-a1d6-09a17ff546f3 サンプル動画(↑クリックでリンク開く) https://repre.me/ba8e08bd-2881-243a-7d2f-09b2eedbf060
  59. 59. Android 4.0 以降で良ければ、絶対に採用すべき Android!3 PC と繋いで Chrome の Web インスペクタも使えます https://crosswalk-project.org/ ブラウザのレンダリングエンジン一式を同梱するので アプリのサイズが20MBくらい増えますがキニシナイ。
  60. 60. まとめ
  61. 61. ・Web系のスキルセットを生かしてアプリ開発に参入が できるのは、かなりメリットを感じる まとめ ・Android も Crosswalk などが登場してきたので、 動作が重いといった問題点は解消されつつある ・iOS と Android を同時に開発できるのはステキ ・動作がカクカクする時のチューニングは結構大変かも ・サードパーティ製のSDK導入はわりと手間がかかる
  62. 62. 使ってるプラグイン (参考程度に)
  63. 63. 使用プラグイン紹介(1) 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はデフォルト対応していないので独自実装
  64. 64. 使用プラグイン紹介(2) org.apache.cordova.camera ・カメラ org.apache.cordova.device ・デバイス情報の取得 org.apache.cordova.inappbrowser ・アプリ内ブラウザ org.apache.cordova.statusbar ・ステータスバー
  65. 65. 最近のホットな話題
  66. 66. TechCrunch Tokyo 2014 スタートアップバトルに登壇 113社の応募の中から事前審査を 勝ち抜いた12社のうちの1つ
  67. 67. Google+ との公式コラボ
  68. 68. ご清聴ありがとうございました!

×