Web標準技術でiOS、Android両対応アプリを開発

Bringing More People To Apps
Web標準技術で
iOS、Android両対応アプリを開発
〜Monacaのモバイルアプリスピード開発事例より〜
アシアル株式会社
塚田亮一

アシアル株式会社
会社概要
• 創業：2002年
• 資本金：1000万円
• 事業所：東京（本社）、サンフランシスコ
• 従業員数：約40名（8国籍）
事業内容
• 開発プラットフォーム事業：開発ツール、UIフレームワーク
• 開発支援事業：アプリ開発、サーバーサイド（PHP）開発
• 教育事業：トレーニング、執筆

HTML5モバイルアプリ開発基
盤
Monaca
HTML5、JavaScript
でアプリ開発
セットアップ不要の
クラウド開発環境
UIフレームワーク
Onsen UI搭載
安心の日本語サポート

日本で最も普及している
モバイルアプリ開発環境の一つ
15万人

企業戦略のコア
デジタルトランスフォーメーション
顧客接点
の変革
製品
の変革
ワークスタイル
の変革
ITの力で変革をもたらす

アプリビジネスから
DX推進のためのアプリへ
DXを推進する
モバイルアプリ
アプリビジネス

アプリ開発に取り組む上での
課題
モバイルエンジニアの不足
iOS/Androidでことなる開発言語
UI/UXへの高い要求
開発・メンテナンスの速度
既存の開発パートナーとのミスマッチ

DX推進型のアプリ開発
プロジェクトへの要求
 iOS、Android、（Windows）対応必須
 市場変化に対応するスピーディーな開発
 既存システムと既存データの連携
 ビジネスラインや顧客からの要求の理解
アプリ開発専業企業とのミスマッチ

アプリ開発
内製化
新しい
開発パートナー
の開拓

新しい開発手法

HTML5を活用した
Cross-Platform開発

HTML5はモバイル開発No.1
出典: Developer Economics 2014 Q3
構築技術のなかで圧倒的に
高いマインドシェアを獲得

Cordovaとは
ネイティブコード
HTML
コンテンツ
アプリ本体はHTML5で実装
ネイティブアプリ形式で配布
ハードウェア機能を利用可能
Pluginでネイティブ機能を拡張

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

でもこんなこと言ってる人
いましたね、、、
『HTML5に賭けたの
は失敗』
2012年にHTML5から
ネイティブ化へ

HTML5ハイブリッドアプリ
が当時抱えていた課題
1. アプリに機能制限がでてしま
うのではないか？
2. アプリのパフォーマンスが低
いのではないか？

PluginでネイティブAPI利用
Cordova公式
サイトで探す
自作する

端末の大幅な進化
初代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の登場

HTML５ハイブリッドアプリ向け
UIフレームワークの登場

Onsen UI
• OSに応じてUIを切り替え＋
CSSで簡単カスタマイズ
• ハイパフォーマンスなUIを実現
• JSフレームワークに非依存
• Apache License
▷ http://ja.onsen.io/

完全なクロスプラットフォーム
を実現
• Web技術でiOSとAndroidのUIを同時に開発
• ページ遷移アニメーションやエフェクトもOS毎に最適化

豊富なUIコンポーネント
を利用可能
• 各コンポーネントはタグで指定するだけで利用可能
• デザインのカスタマイズはCSSで

事例：ジャパンネット銀行
残高確認アプリ
• iOS、Androidをワンソースで開発
• Onsen UIでネイティブと遜色ないUIを実現

他の銀行アプリと何が違うのか？

機能は残高確認のみ！

事例：テレビ朝日
みんながカメラマン
• 映像投稿サービス
• Webサイトのみで展開していたがアプリ要望対応後
投稿数が増加
• 局レポーターも利用

事例：プロルート丸光
• 老舗企業の営業部門主導のアプリ開発
「海外のお客様に売れ筋情報を伝えたい」
• ビジネスチャットアプリを独自開発

事例：プロルート丸光
• プロジェクト概要
• 体制：営業企画1名、開発者1名
• 期間：構想からリリースまで５ヶ月
• ポイント
• プロトタイプ開発から現場を巻き込む
• リリース後の利用が活発
• 効果
• 顧客とのやりとりが格段に向上
• アプリ経由の売上が開始3ヶ月で数千万円
• シャドーIT問題も解決

事例：タニタヘルスプラネット
• 体組成計連携の健康管理アプリを2ヶ月で開発
• Bluetoothを使って専用の体組成計からデータを自動
で受け取ることが可能

ワークスタイル変革事例

事例：長野銀行
NaganoBank Total Assist Book
• システム検討から導入までわずか10ヶ月
• 当初はiPadだが、将来を見据えた戦略
印刷機能は別アプリ化することでメンテコスト削減

事例：NPOフュージョン長池
• 3人の専属職員で152の公園管理業務
• メンテナンス状況の把握が課題

事例：NPOフュージョン長池
• 造園職人向けに業務報告アプリを開発
• 地元のフリーランスエンジニアとの共同プ
ロジェクト
• 1年間かけて紙の報告書を全廃

その他スピード開発事例

事例：ニジボックス
レシポ！
• エンジニア1名実高数2週間程度でアプリを完成
• Monacaデバッガーを使ったユーザーテストでUI改善

HTML5モバイルアプリ開発
活用ポイント
 iOS、Android同時開発
 既存のシステム資産の活用
 既存の開発チームでのアプリ開発
 UIフレームワークや開発支援ツールを有
効活用
アプリ内製化に有効な開発手法

アプリ開発のご相談も
受付中

まずは体験してみましょう！

11月14日
秋葉原UDXに集結

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

Web標準技術で iOS、Android両対応アプリを開発

More Related Content

What's hot

Viewers also liked

Similar to Web標準技術で iOS、Android両対応アプリを開発

More from アシアル株式会社