Bringing More People To Apps
HTML5ハイブリッドアプリ開発
で拓拓くビジネスチャンス
アシアル株式会社
塚⽥田亮亮⼀一
Bringing More People To Apps
アシアル株式会社
会社概要
•  創業:2002年年
•  資本⾦金金:1000万円
•  事業所:東京(本社)、サンフランシスコ
•  従業員数:約35名(8国籍)
事業内容
•  開発プラットフォーム事業:開発ツール、UIフレームワーク
•  開発⽀支援事業:アプリ開発、サーバーサイド(PHP)開発
•  教育事業:トレーニング、執筆
Bringing More People To Apps
増えるアプリ開発需要
不不⾜足するアプリ開発者
More app
demand
Less developer
supply
Multiple screen
sizes
Different
languages
Multiple platforms
Cloud driven
enterprise apps
IoT and
Wearables
Next billion
mobile market
Bringing More People To Apps
アプリビジネスから
ビジネスのためのアプリへ
企業向け
モバイルアプリ
消費者向け
モバイルアプリ
Bringing More People To Apps
事例例:⻑⾧長野銀⾏行行
NaganoBank Total Assist Book
•  システム検討から導⼊入までわずか10ヶ⽉月
•  当初はiPadだが、将来を⾒見見据えた戦略略
印刷機能は別アプリ化することでメンテコスト削減
Bringing More People To Apps
事例例:NPOフュージョン⻑⾧長池
152カ所の公園管理理作業の
⾒見見える化・効率率率化・情報共有化を実現
Bringing More People To Apps
事例例:プロルート丸光
創業明治33年年の⽼老老舗繊維問屋がアプリで
顧客とのコミュニケーション変⾰革に挑戦
Bringing More People To Apps
モバイルファースととは
⾔言うが、、、
u 既存開発委託先にはアプリ開発
経験が乏しい
u 社内にアプリ開発のエンジニア
はいない
u デザイナーもいない
u そもそもMacがない
Bringing More People To Apps
そこでHTML5!!
Bringing More People To Apps
でもこんなこと⾔言ってる⼈人
いましたね、、、
『HTML5に賭けたの
は失敗』
2012年年にHTML5から
ネイティブ化へ
Bringing More People To Apps
もはや過去の話
Bringing More People To Apps
HTML5はモバイル開発No.1
出典: Developer Economics 2014 Q3
構築技術のなかで圧倒的に
⾼高いマインドシェアを獲得
Bringing More People To Apps
HTML5ハイブリッドアプリ
が当時抱えていた課題
1.  アプリに機能制限がでてしま
うのではないか?
2.  アプリのパフォーマンスが低
いのではないか?
Bringing More People To Apps
アプリの機能に制限がでる?
Bringing More People To Apps
Cordovaで解決
ネイティブコード
HTML
コンテンツ
アプリケーション本体は
HTML5技術で実装
ハードウェア機能を利利⽤用可能
ネイティブアプリ形式で配布
Pluginでネイティブ機能を拡張
900以上のプラグインが公開
Bringing More People To Apps
Cordova Plugins
Cordova公式
サイトで探す
⾃自作する
Bringing More People To Apps
さ
Cordovaがデファクト的存在
Bringing More People To Apps
PhoneGap/Cordovaがトップ
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
事例例:タニタヘルスプラネット
•  体組成計連携の健康管理理アプリを2ヶ⽉月で開発
•  Bluetoothを使って専⽤用の体組成計からデータを⾃自動
で受け取ることが可能
Bringing More People To Apps
パフォーマンスが低い?
Bringing More People To Apps
端末の⼤大幅な進化
初代Xperia Xperia  Z4
発売⽇日:  2010年年4⽉月
Android 1.6  (後に2.1)
1GHz シングルコアCPU
384MBメモリー
ベンチマークスコア:  3361
発売⽇日:  2015年年6⽉月
Android 5.0
2GHz オクタ(8)コアCPU
3GBメモリー
ベンチマークスコア:  52084
5年年間で1500%もの
スピードアップ
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
HTML5ハイブリッド開発のための
開発プラットフォーム
⽇日本で最も普及している
Cordova開発環境の⼀一つ
12万⼈人
Bringing More People To Apps
クラウドを活⽤用した
Cordovaアプリ開発環境
バージョン
アップ不不要
セットアップ
不不要
Mac端末
不不要
iOS,Android,
Windows
同時開発
Bringing More People To Apps
選べる4つの開発環境
MonacaクラウドIDE
Monaca for Visual Studio
Monaca Localkit
Monaca CLI
ホビーユースからエンタープライズまで、
幅広い開発者のニーズに対応
充実のテストツール
専⽤用ツールで開発・デバッグの効率率率化を実現
ステップ1:
  ファイルを編集
ステップ2:
  ライブリロードで
  実機上ですぐに動作確認
コンパイル処理理やUSB経由での実機転送などは⼀一切切不不要!
実機は⼿手元にある必要なし!
Bringing More People To Apps
各種ツールとも連携
近⽇日
リリース
⽇日本語サポートがある
Cordovaアプリ開発環境
https://ja.monaca.io/book/support/
Bringing More People To Apps
アプリ開発経験豊富な
Monaca開発パートナー
Bringing More People To Apps
HTML5ハイブリッドアプリ開発
で拓拓くビジネスチャンス
u 事業会社様
モバイルアプリの⾃自社開発や新たなパートナー企業開
拓拓が可能になり、モバイル戦略略推進のボトルネックを
解消できる
u システム開発会社、Web制作会社様
既存のエンジニアチームでモバイルアプリ開発が可能
になり、業務知識識やマーケティングノウハウはアプリ
開発市場での強みとなる
Bringing More People To Apps
ご清聴ありがとうございました

HTML5ハイブリッドアプリ開発 で拓くビジネスチャンス

  • 1.
    Bringing More PeopleTo Apps HTML5ハイブリッドアプリ開発 で拓拓くビジネスチャンス アシアル株式会社 塚⽥田亮亮⼀一
  • 2.
    Bringing More PeopleTo Apps アシアル株式会社 会社概要 •  創業:2002年年 •  資本⾦金金:1000万円 •  事業所:東京(本社)、サンフランシスコ •  従業員数:約35名(8国籍) 事業内容 •  開発プラットフォーム事業:開発ツール、UIフレームワーク •  開発⽀支援事業:アプリ開発、サーバーサイド(PHP)開発 •  教育事業:トレーニング、執筆
  • 3.
    Bringing More PeopleTo Apps 増えるアプリ開発需要 不不⾜足するアプリ開発者 More app demand Less developer supply Multiple screen sizes Different languages Multiple platforms Cloud driven enterprise apps IoT and Wearables Next billion mobile market
  • 4.
    Bringing More PeopleTo Apps アプリビジネスから ビジネスのためのアプリへ 企業向け モバイルアプリ 消費者向け モバイルアプリ
  • 5.
    Bringing More PeopleTo Apps 事例例:⻑⾧長野銀⾏行行 NaganoBank Total Assist Book •  システム検討から導⼊入までわずか10ヶ⽉月 •  当初はiPadだが、将来を⾒見見据えた戦略略 印刷機能は別アプリ化することでメンテコスト削減
  • 6.
    Bringing More PeopleTo Apps 事例例:NPOフュージョン⻑⾧長池 152カ所の公園管理理作業の ⾒見見える化・効率率率化・情報共有化を実現
  • 7.
    Bringing More PeopleTo Apps 事例例:プロルート丸光 創業明治33年年の⽼老老舗繊維問屋がアプリで 顧客とのコミュニケーション変⾰革に挑戦
  • 8.
    Bringing More PeopleTo Apps モバイルファースととは ⾔言うが、、、 u 既存開発委託先にはアプリ開発 経験が乏しい u 社内にアプリ開発のエンジニア はいない u デザイナーもいない u そもそもMacがない
  • 9.
    Bringing More PeopleTo Apps そこでHTML5!!
  • 10.
    Bringing More PeopleTo Apps でもこんなこと⾔言ってる⼈人 いましたね、、、 『HTML5に賭けたの は失敗』 2012年年にHTML5から ネイティブ化へ
  • 11.
    Bringing More PeopleTo Apps もはや過去の話
  • 12.
    Bringing More PeopleTo Apps HTML5はモバイル開発No.1 出典: Developer Economics 2014 Q3 構築技術のなかで圧倒的に ⾼高いマインドシェアを獲得
  • 13.
    Bringing More PeopleTo Apps HTML5ハイブリッドアプリ が当時抱えていた課題 1.  アプリに機能制限がでてしま うのではないか? 2.  アプリのパフォーマンスが低 いのではないか?
  • 14.
    Bringing More PeopleTo Apps アプリの機能に制限がでる?
  • 15.
    Bringing More PeopleTo Apps Cordovaで解決 ネイティブコード HTML コンテンツ アプリケーション本体は HTML5技術で実装 ハードウェア機能を利利⽤用可能 ネイティブアプリ形式で配布 Pluginでネイティブ機能を拡張 900以上のプラグインが公開
  • 16.
    Bringing More PeopleTo Apps Cordova Plugins Cordova公式 サイトで探す ⾃自作する
  • 17.
    Bringing More PeopleTo Apps さ Cordovaがデファクト的存在
  • 18.
    Bringing More PeopleTo Apps PhoneGap/Cordovaがトップ 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
  • 19.
    Bringing More PeopleTo Apps 事例例:タニタヘルスプラネット •  体組成計連携の健康管理理アプリを2ヶ⽉月で開発 •  Bluetoothを使って専⽤用の体組成計からデータを⾃自動 で受け取ることが可能
  • 20.
    Bringing More PeopleTo Apps パフォーマンスが低い?
  • 21.
    Bringing More PeopleTo Apps 端末の⼤大幅な進化 初代Xperia Xperia  Z4 発売⽇日:  2010年年4⽉月 Android 1.6  (後に2.1) 1GHz シングルコアCPU 384MBメモリー ベンチマークスコア:  3361 発売⽇日:  2015年年6⽉月 Android 5.0 2GHz オクタ(8)コアCPU 3GBメモリー ベンチマークスコア:  52084 5年年間で1500%もの スピードアップ WebviewのChronium化 Crosswalkの登場
  • 22.
    Bringing More PeopleTo Apps HTML5ハイブリッドアプリ向け UIフレームワークの登場
  • 23.
    Onsen UI •  CustomElementsで簡単設計 •  OSに応じてUIを切切り替え+ CSSで簡単カスタマイズ •  マテリアルデザインにも対応 ▷  http://ja.onsen.io/
  • 24.
    Bringing More PeopleTo Apps 事例例:ジャパンネット銀⾏行行 残⾼高確認アプリ •  Onsen UIでネイティブと遜⾊色ないUIを実現 •  アセット暗号化プラグインでソースコードを隠蔽
  • 25.
    Bringing More PeopleTo Apps HTML5ハイブリッド開発のための 開発プラットフォーム
  • 26.
  • 27.
    Bringing More PeopleTo Apps クラウドを活⽤用した Cordovaアプリ開発環境 バージョン アップ不不要 セットアップ 不不要 Mac端末 不不要 iOS,Android, Windows 同時開発
  • 28.
    Bringing More PeopleTo Apps 選べる4つの開発環境 MonacaクラウドIDE Monaca for Visual Studio Monaca Localkit Monaca CLI ホビーユースからエンタープライズまで、 幅広い開発者のニーズに対応
  • 29.
  • 30.
    Bringing More PeopleTo Apps 各種ツールとも連携 近⽇日 リリース
  • 31.
  • 32.
    Bringing More PeopleTo Apps アプリ開発経験豊富な Monaca開発パートナー
  • 33.
    Bringing More PeopleTo Apps HTML5ハイブリッドアプリ開発 で拓拓くビジネスチャンス u 事業会社様 モバイルアプリの⾃自社開発や新たなパートナー企業開 拓拓が可能になり、モバイル戦略略推進のボトルネックを 解消できる u システム開発会社、Web制作会社様 既存のエンジニアチームでモバイルアプリ開発が可能 になり、業務知識識やマーケティングノウハウはアプリ 開発市場での強みとなる
  • 34.
    Bringing More PeopleTo Apps ご清聴ありがとうございました