More Related Content Similar to Web標準技術で iOS、Android両対応アプリを開発 (20) 1. Bringing More People To Apps
Web標準技術で
iOS、Android両対応アプリを開発
〜Monacaのモバイルアプリスピード開発事例より〜
アシアル株式会社
塚田亮一
2. Bringing More People To Apps
アシアル株式会社
会社概要
• 創業：2002年
• 資本金：1000万円
• 事業所：東京（本社）、サンフランシスコ
• 従業員数：約40名（8国籍）
事業内容
• 開発プラットフォーム事業：開発ツール、UIフレームワーク
• 開発支援事業：アプリ開発、サーバーサイド（PHP）開発
• 教育事業：トレーニング、執筆
3. Bringing More People To Apps
HTML5モバイルアプリ開発基
盤
Monaca
HTML5、JavaScript
でアプリ開発
セットアップ不要の
クラウド開発環境
UIフレームワーク
Onsen UI搭載
安心の日本語サポート
7. Bringing More People To Apps
アプリ開発に取り組む上での
課題
モバイルエンジニアの不足
iOS/Androidでことなる開発言語
UI/UXへの高い要求
開発・メンテナンスの速度
既存の開発パートナーとのミスマッチ
8. Bringing More People To Apps
DX推進型のアプリ開発
プロジェクトへの要求
iOS、Android、（Windows）対応必須
市場変化に対応するスピーディーな開発
既存システムと既存データの連携
ビジネスラインや顧客からの要求の理解
アプリ開発専業企業とのミスマッチ
12. Bringing More People To Apps
HTML5はモバイル開発No.1
出典: Developer Economics 2014 Q3
構築技術のなかで圧倒的に
高いマインドシェアを獲得
13. Bringing More People To Apps
Cordovaとは
ネイティブコード
HTML
コンテンツ
アプリ本体はHTML5で実装
ネイティブアプリ形式で配布
ハードウェア機能を利用可能
Pluginでネイティブ機能を拡張
14. Bringing More People To Apps
Cross Platformツールのシェア
61%
35%
31%
18%
15%
13%
12%
9%
4%
3%
0% 10% 20% 30% 40% 50% 60% 70%
PhoneGap/Cordova
Xamarin
Unity
Qt
Adobe Air
Appcelerator
Corona
Marmelade
Codename One
Live Code
Using this tool Prioritize this tool
Vision Mobile Analysis of Cross-Platform Development, July 2015
16. Bringing More People To Apps
HTML5ハイブリッドアプリ
が当時抱えていた課題
1. アプリに機能制限がでてしま
うのではないか？
2. アプリのパフォーマンスが低
いのではないか？
18. Bringing More People To Apps
端末の大幅な進化
初代Xperia Xperia Z 5
発売日: 2010年4月
Android 1.6 (後に2.1)
1GHz シングルコアCPU
384MBメモリー
ベンチマークスコア: 3361
発売日: 2016年6月
Android 6.0
2GHz クワッド(8)コアCPU
3GBメモリー
ベンチマークスコア: 52084
5年間で20倍もの
スピードアップ
WebviewのChronium化
Crosswalkの登場
25. Bringing More People To Apps
事例：ジャパンネット銀行
残高確認アプリ
• iOS、Androidをワンソースで開発
• Onsen UIでネイティブと遜色ないUIを実現
28. Bringing More People To Apps
事例：テレビ朝日
みんながカメラマン
• 映像投稿サービス
• Webサイトのみで展開していたがアプリ要望対応後
投稿数が増加
• 局レポーターも利用
29. Bringing More People To Apps
事例：プロルート丸光
• 老舗企業の営業部門主導のアプリ開発
「海外のお客様に売れ筋情報を伝えたい」
• ビジネスチャットアプリを独自開発
30. Bringing More People To Apps
事例：プロルート丸光
• プロジェクト概要
• 体制：営業企画1名、開発者1名
• 期間：構想からリリースまで５ヶ月
• ポイント
• プロトタイプ開発から現場を巻き込む
• リリース後の利用が活発
• 効果
• 顧客とのやりとりが格段に向上
• アプリ経由の売上が開始3ヶ月で数千万円
• シャドーIT問題も解決
32. Bringing More People To Apps
事例：タニタヘルスプラネット
• 体組成計連携の健康管理アプリを2ヶ月で開発
• Bluetoothを使って専用の体組成計からデータを自動
で受け取ることが可能
34. Bringing More People To Apps
事例：長野銀行
NaganoBank Total Assist Book
• システム検討から導入までわずか10ヶ月
• 当初はiPadだが、将来を見据えた戦略
印刷機能は別アプリ化することでメンテコスト削減
36. Bringing More People To Apps
事例：NPOフュージョン長池
• 造園職人向けに業務報告アプリを開発
• 地元のフリーランスエンジニアとの共同プ
ロジェクト
• 1年間かけて紙の報告書を全廃
38. Bringing More People To Apps
事例：ニジボックス
レシポ！
• エンジニア1名実高数2週間程度でアプリを完成
• Monacaデバッガーを使ったユーザーテストでUI改善
39. Bringing More People To Apps
HTML5モバイルアプリ開発
活用ポイント
iOS、Android同時開発
既存のシステム資産の活用
既存の開発チームでのアプリ開発
UIフレームワークや開発支援ツールを有
効活用
アプリ内製化に有効な開発手法
Editor's Notes 斎藤さんのモード２にあたる？
フジテック様はワークスタイルの変革 フジテック様でもクロスプラットフォームは必須要件でしたね 技術コミュニティの大きさ
Webリソースが使える（便利なOSSも沢山見つかる）
学習コストが低い
iOS/Androidで100%ソースコードの共通化ができる 必要な機能がCordovaプラグインで提供されているかどうかを先に調べておくことは重要
ネイティブに遜色ないUIを作るというのも重要だったが、もう一つ重要なこと
あえて機能を絞る
機能を絞ることで必要な人にとっての高いUX実現 フジテックさまのアプリも
勤怠管理
写真アップロードだけ
とかシンプルなのがつかいやすい
ペーパープロトタイピング
シンプルなUIを実現（高齢者対応）
まずは簡単なものを現場で使わせる
おみくじアプリをお子さんに見せてください。
