Bringing More People To Apps
Monaca事例例から学ぶ
HTML5モバイルアプリ開発の
活⽤用ポイント
アシアル株式会社
塚⽥田亮亮⼀一
Bringing More People To Apps
アシアル株式会社
会社概要
•  創業:2002年年
•  資本⾦金金:1000万円
•  事業所:東京(本社)、サンフランシスコ
•  従業員数:約35名(8国籍)
事業内容
•  開発プラットフォーム事業:開発ツール、UIフレームワーク
•  開発⽀支援事業:アプリ開発、サーバーサイド(PHP)開発
•  教育事業:トレーニング、執筆
Bringing More People To Apps
HTML5モバイルアプリ開発基盤
Monaca
HTML5、JavaScript
でアプリ開発
セットアップ不不要の
クラウド開発環境
UIフレームワーク
Onsen UI搭載
安⼼心の⽇日本語サポート
⽇日本で最も普及している
Cross-Platform開発環境の⼀一つ
15万⼈人
Bringing More People To Apps
HTML5はモバイル開発No.1
出典: Developer Economics 2014 Q3
構築技術のなかで圧倒的に
⾼高いマインドシェアを獲得
Bringing More People To Apps
アプリビジネスから
ビジネスのためのアプリへ
企業向け
モバイルアプリ
消費者向け
モバイルアプリ
Bringing More People To Apps
ビジネスのためのアプリ開発
を推進する上での課題
u アプリエンジニアが圧倒的に不不⾜足
u アプリ⾃自体が直接収益をあげない
u iOS/Android両対応必須
u LOBからの要求に基づく開発
エンジニア
確保
開発効率率率
開発スピード
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
Bringing More People To Apps
さ
Cordovaがデファクト的存在
Bringing More People To Apps
Cordovaのメリット
ネイティブコード
HTML
コンテンツ
アプリ本体はHTML5で実装
ネイティブアプリ形式で配布
ハードウェア機能を利利⽤用可能
Pluginでネイティブ機能を拡張
Bringing More People To Apps
でもこんなこと⾔言ってる⼈人
いましたね、、、
『HTML5に賭けたの
は失敗』
2012年年にHTML5から
ネイティブ化へ
Bringing More People To Apps
HTML5ハイブリッドアプリ
が当時抱えていた課題
1.  アプリに機能制限がでてしま
うのではないか?
2.  アプリのパフォーマンスが低
いのではないか?
Bringing More People To Apps
PluginでネイティブAPI利利⽤用
Cordova公式
サイトで探す
⾃自作する
Bringing More People To Apps
事例例:タニタヘルスプラネット
•  体組成計連携の健康管理理アプリを2ヶ⽉月で開発
•  Bluetoothを使って専⽤用の体組成計からデータを⾃自動
で受け取ることが可能
Bringing More People To Apps
端末の⼤大幅な進化
初代Xperia Xperia  Z  5
発売⽇日:  2010年年4⽉月
Android 1.6  (後に2.1)
1GHz シングルコアCPU
384MBメモリー
ベンチマークスコア:  3361
発売⽇日:  2015年年10⽉月
Android 5.2
2GHz クワッド(8)コアCPU
3GBメモリー
ベンチマークスコア:  52084
5年年間で20倍もの
スピードアップ
WebviewのChronium化
Crosswalkの登場
Bringing More People To Apps
HTML5ハイブリッドアプリ向け
UIフレームワークの登場
Onsen UI
•  Custom Elementsで簡単設計
•  OSに応じてUIを切切り替え+
CSSで簡単カスタマイズ
•  マテリアルデザインにも対応
▷  http://ja.onsen.io/
Bringing More People To Apps
事例例:ジャパンネット銀⾏行行
残⾼高確認アプリ
•  Onsen UIでネイティブと遜⾊色ないUIを実現
•  アセット暗号化プラグインでソースコードを隠蔽
Bringing More People To Apps
Cordovaが向いている例例
u Webサービス・既存システムのアプリ化
u オフライン対応、端末機能追加
u Webシステムとの開発リソース共通化
u LOBからの要求によるアプリ開発
u 変更更・改修が予想される
u ビジネスの変化合わせた開発
u アプリのテンプレート化
Webサービス・既存システムの
アプリ化事例例
Bringing More People To Apps
事例例:ニジボックス
レシポ!
•  エンジニア1名実⾼高数2週間程度度でアプリを完成
•  Monacaデバッガーを使ったユーザーテストでUI改善
Bringing More People To Apps
事例例:⻑⾧長野銀⾏行行
NaganoBank Total Assist Book
•  システム検討から導⼊入までわずか10ヶ⽉月
•  当初はiPadだが、将来を⾒見見据えた戦略略
印刷機能は別アプリ化することでメンテコスト削減
LOBからの要求による
アプリ開発事例例
Bringing More People To Apps
事例例:NPOフュージョン⻑⾧長池
152カ所の公園管理理作業の
⾒見見える化・効率率率化・情報共有化を実現
Bringing More People To Apps
事例例:プロルート丸光
•  ⽼老老舗企業の営業部⾨門主導のアプリ開発
•  mBaaSを活⽤用したビジネスチャットアプリ
•  構想から5ヶ⽉月でサービスイン
アプリのテンプレート化事例例
Bringing More People To Apps
事例例:プロトコーポレーション様
MOTOR GATE
MOTOR GATE
CMS
Bringing More People To Apps
HTML5モバイルアプリ開発
活⽤用ポイント
u iOS、Android同時開発
u 既存のシステム資産の活⽤用
u 既存の開発チームでのアプリ開発
u UIフレームワークや開発⽀支援ツールを有
効活⽤用
ビジネスの変化に合わせた
スピード感あるアプリ開発を実現
Bringing More People To Apps
•  ハンズオン形式のMonaca講座
•  参加費:3,240円〜~
•  書籍をプレゼント
•  次回7⽉月14⽇日開催
Bringing More People To Apps
アプリ開発は
Monaca開発パートナーに
ご相談ください
Bringing More People To Apps
ご清聴ありがとうございました

Monacaソリューションセミナー20160621

  • 1.
    Bringing More PeopleTo Apps Monaca事例例から学ぶ HTML5モバイルアプリ開発の 活⽤用ポイント アシアル株式会社 塚⽥田亮亮⼀一
  • 2.
    Bringing More PeopleTo Apps アシアル株式会社 会社概要 •  創業:2002年年 •  資本⾦金金:1000万円 •  事業所:東京(本社)、サンフランシスコ •  従業員数:約35名(8国籍) 事業内容 •  開発プラットフォーム事業:開発ツール、UIフレームワーク •  開発⽀支援事業:アプリ開発、サーバーサイド(PHP)開発 •  教育事業:トレーニング、執筆
  • 3.
    Bringing More PeopleTo Apps HTML5モバイルアプリ開発基盤 Monaca HTML5、JavaScript でアプリ開発 セットアップ不不要の クラウド開発環境 UIフレームワーク Onsen UI搭載 安⼼心の⽇日本語サポート
  • 4.
  • 5.
    Bringing More PeopleTo Apps HTML5はモバイル開発No.1 出典: Developer Economics 2014 Q3 構築技術のなかで圧倒的に ⾼高いマインドシェアを獲得
  • 6.
    Bringing More PeopleTo Apps アプリビジネスから ビジネスのためのアプリへ 企業向け モバイルアプリ 消費者向け モバイルアプリ
  • 7.
    Bringing More PeopleTo Apps ビジネスのためのアプリ開発 を推進する上での課題 u アプリエンジニアが圧倒的に不不⾜足 u アプリ⾃自体が直接収益をあげない u iOS/Android両対応必須 u LOBからの要求に基づく開発 エンジニア 確保 開発効率率率 開発スピード
  • 8.
    Bringing More PeopleTo 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
  • 9.
    Bringing More PeopleTo Apps さ Cordovaがデファクト的存在
  • 10.
    Bringing More PeopleTo Apps Cordovaのメリット ネイティブコード HTML コンテンツ アプリ本体はHTML5で実装 ネイティブアプリ形式で配布 ハードウェア機能を利利⽤用可能 Pluginでネイティブ機能を拡張
  • 11.
    Bringing More PeopleTo Apps でもこんなこと⾔言ってる⼈人 いましたね、、、 『HTML5に賭けたの は失敗』 2012年年にHTML5から ネイティブ化へ
  • 12.
    Bringing More PeopleTo Apps HTML5ハイブリッドアプリ が当時抱えていた課題 1.  アプリに機能制限がでてしま うのではないか? 2.  アプリのパフォーマンスが低 いのではないか?
  • 13.
    Bringing More PeopleTo Apps PluginでネイティブAPI利利⽤用 Cordova公式 サイトで探す ⾃自作する
  • 14.
    Bringing More PeopleTo Apps 事例例:タニタヘルスプラネット •  体組成計連携の健康管理理アプリを2ヶ⽉月で開発 •  Bluetoothを使って専⽤用の体組成計からデータを⾃自動 で受け取ることが可能
  • 15.
    Bringing More PeopleTo Apps 端末の⼤大幅な進化 初代Xperia Xperia  Z  5 発売⽇日:  2010年年4⽉月 Android 1.6  (後に2.1) 1GHz シングルコアCPU 384MBメモリー ベンチマークスコア:  3361 発売⽇日:  2015年年10⽉月 Android 5.2 2GHz クワッド(8)コアCPU 3GBメモリー ベンチマークスコア:  52084 5年年間で20倍もの スピードアップ WebviewのChronium化 Crosswalkの登場
  • 16.
    Bringing More PeopleTo Apps HTML5ハイブリッドアプリ向け UIフレームワークの登場
  • 17.
    Onsen UI •  CustomElementsで簡単設計 •  OSに応じてUIを切切り替え+ CSSで簡単カスタマイズ •  マテリアルデザインにも対応 ▷  http://ja.onsen.io/
  • 18.
    Bringing More PeopleTo Apps 事例例:ジャパンネット銀⾏行行 残⾼高確認アプリ •  Onsen UIでネイティブと遜⾊色ないUIを実現 •  アセット暗号化プラグインでソースコードを隠蔽
  • 19.
    Bringing More PeopleTo Apps Cordovaが向いている例例 u Webサービス・既存システムのアプリ化 u オフライン対応、端末機能追加 u Webシステムとの開発リソース共通化 u LOBからの要求によるアプリ開発 u 変更更・改修が予想される u ビジネスの変化合わせた開発 u アプリのテンプレート化
  • 20.
  • 21.
    Bringing More PeopleTo Apps 事例例:ニジボックス レシポ! •  エンジニア1名実⾼高数2週間程度度でアプリを完成 •  Monacaデバッガーを使ったユーザーテストでUI改善
  • 22.
    Bringing More PeopleTo Apps 事例例:⻑⾧長野銀⾏行行 NaganoBank Total Assist Book •  システム検討から導⼊入までわずか10ヶ⽉月 •  当初はiPadだが、将来を⾒見見据えた戦略略 印刷機能は別アプリ化することでメンテコスト削減
  • 23.
  • 24.
    Bringing More PeopleTo Apps 事例例:NPOフュージョン⻑⾧長池 152カ所の公園管理理作業の ⾒見見える化・効率率率化・情報共有化を実現
  • 25.
    Bringing More PeopleTo Apps 事例例:プロルート丸光 •  ⽼老老舗企業の営業部⾨門主導のアプリ開発 •  mBaaSを活⽤用したビジネスチャットアプリ •  構想から5ヶ⽉月でサービスイン
  • 26.
  • 27.
    Bringing More PeopleTo Apps 事例例:プロトコーポレーション様 MOTOR GATE MOTOR GATE CMS
  • 28.
    Bringing More PeopleTo Apps HTML5モバイルアプリ開発 活⽤用ポイント u iOS、Android同時開発 u 既存のシステム資産の活⽤用 u 既存の開発チームでのアプリ開発 u UIフレームワークや開発⽀支援ツールを有 効活⽤用 ビジネスの変化に合わせた スピード感あるアプリ開発を実現
  • 29.
    Bringing More PeopleTo Apps •  ハンズオン形式のMonaca講座 •  参加費:3,240円〜~ •  書籍をプレゼント •  次回7⽉月14⽇日開催
  • 30.
    Bringing More PeopleTo Apps アプリ開発は Monaca開発パートナーに ご相談ください
  • 31.
    Bringing More PeopleTo Apps ご清聴ありがとうございました