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.

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

681 views

Published on

Monacaセミナー資料

Published in: Technology
  • Be the first to comment

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

  1. 1. Bringing More People To Apps Web標準技術で iOS、Android両対応アプリを開発 〜Monacaのモバイルアプリスピード開発事例より〜 アシアル株式会社 塚田亮一
  2. 2. Bringing More People To Apps アシアル株式会社 会社概要 • 創業:2002年 • 資本金:1000万円 • 事業所:東京(本社)、サンフランシスコ • 従業員数:約40名(8国籍) 事業内容 • 開発プラットフォーム事業:開発ツール、UIフレームワーク • 開発支援事業:アプリ開発、サーバーサイド(PHP)開発 • 教育事業:トレーニング、執筆
  3. 3. Bringing More People To Apps HTML5モバイルアプリ開発基 盤 Monaca HTML5、JavaScript でアプリ開発 セットアップ不要の クラウド開発環境 UIフレームワーク Onsen UI搭載 安心の日本語サポート
  4. 4. 日本で最も普及している モバイルアプリ開発環境の一つ 15万人
  5. 5. Bringing More People To Apps 企業戦略のコア デジタルトランスフォーメーション 顧客接点 の変革 製品 の変革 ワークスタイル の変革 ITの力で変革をもたらす
  6. 6. Bringing More People To Apps アプリビジネスから DX推進のためのアプリへ DXを推進する モバイルアプリ アプリビジネス
  7. 7. Bringing More People To Apps アプリ開発に取り組む上での 課題 モバイルエンジニアの不足 iOS/Androidでことなる開発言語 UI/UXへの高い要求 開発・メンテナンスの速度 既存の開発パートナーとのミスマッチ
  8. 8. Bringing More People To Apps DX推進型のアプリ開発 プロジェクトへの要求  iOS、Android、(Windows)対応必須  市場変化に対応するスピーディーな開発  既存システムと既存データの連携  ビジネスラインや顧客からの要求の理解 アプリ開発専業企業とのミスマッチ
  9. 9. Bringing More People To Apps アプリ開発 内製化 新しい 開発パートナー の開拓
  10. 10. Bringing More People To Apps 新しい開発手法
  11. 11. Bringing More People To Apps HTML5を活用した Cross-Platform開発
  12. 12. Bringing More People To Apps HTML5はモバイル開発No.1 出典: Developer Economics 2014 Q3 構築技術のなかで圧倒的に 高いマインドシェアを獲得
  13. 13. Bringing More People To Apps Cordovaとは ネイティブコード HTML コンテンツ アプリ本体はHTML5で実装 ネイティブアプリ形式で配布 ハードウェア機能を利用可能 Pluginでネイティブ機能を拡張
  14. 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
  15. 15. Bringing More People To Apps でもこんなこと言ってる人 いましたね、、、 『HTML5に賭けたの は失敗』 2012年にHTML5から ネイティブ化へ
  16. 16. Bringing More People To Apps HTML5ハイブリッドアプリ が当時抱えていた課題 1. アプリに機能制限がでてしま うのではないか? 2. アプリのパフォーマンスが低 いのではないか?
  17. 17. Bringing More People To Apps PluginでネイティブAPI利用 Cordova公式 サイトで探す 自作する
  18. 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の登場
  19. 19. Bringing More People To Apps HTML5ハイブリッドアプリ向け UIフレームワークの登場
  20. 20. Onsen UI • OSに応じてUIを切り替え+ CSSで簡単カスタマイズ • ハイパフォーマンスなUIを実現 • JSフレームワークに非依存 • Apache License ▷ http://ja.onsen.io/
  21. 21. 完全なクロスプラットフォーム を実現 • Web技術でiOSとAndroidのUIを同時に開発 • ページ遷移アニメーションやエフェクトもOS毎に最適化
  22. 22. 豊富なUIコンポーネント を利用可能 • 各コンポーネントはタグで指定するだけで利用可能 • デザインのカスタマイズはCSSで
  23. 23. Monaca活用事例の紹介
  24. 24. 顧客接点の変革事例
  25. 25. Bringing More People To Apps 事例:ジャパンネット銀行 残高確認アプリ • iOS、Androidをワンソースで開発 • Onsen UIでネイティブと遜色ないUIを実現
  26. 26. Bringing More People To Apps 他の銀行アプリと何が違うのか?
  27. 27. Bringing More People To Apps 機能は残高確認のみ!
  28. 28. Bringing More People To Apps 事例:テレビ朝日 みんながカメラマン • 映像投稿サービス • Webサイトのみで展開していたがアプリ要望対応後 投稿数が増加 • 局レポーターも利用
  29. 29. Bringing More People To Apps 事例:プロルート丸光 • 老舗企業の営業部門主導のアプリ開発 「海外のお客様に売れ筋情報を伝えたい」 • ビジネスチャットアプリを独自開発
  30. 30. Bringing More People To Apps 事例:プロルート丸光 • プロジェクト概要 • 体制:営業企画1名、開発者1名 • 期間:構想からリリースまで5ヶ月 • ポイント • プロトタイプ開発から現場を巻き込む • リリース後の利用が活発 • 効果 • 顧客とのやりとりが格段に向上 • アプリ経由の売上が開始3ヶ月で数千万円 • シャドーIT問題も解決
  31. 31. 製品変革事例
  32. 32. Bringing More People To Apps 事例:タニタヘルスプラネット • 体組成計連携の健康管理アプリを2ヶ月で開発 • Bluetoothを使って専用の体組成計からデータを自動 で受け取ることが可能
  33. 33. ワークスタイル変革事例
  34. 34. Bringing More People To Apps 事例:長野銀行 NaganoBank Total Assist Book • システム検討から導入までわずか10ヶ月 • 当初はiPadだが、将来を見据えた戦略 印刷機能は別アプリ化することでメンテコスト削減
  35. 35. Bringing More People To Apps 事例:NPOフュージョン長池 • 3人の専属職員で152の公園管理業務 • メンテナンス状況の把握が課題
  36. 36. Bringing More People To Apps 事例:NPOフュージョン長池 • 造園職人向けに業務報告アプリを開発 • 地元のフリーランスエンジニアとの共同プ ロジェクト • 1年間かけて紙の報告書を全廃
  37. 37. その他スピード開発事例
  38. 38. Bringing More People To Apps 事例:ニジボックス レシポ! • エンジニア1名実高数2週間程度でアプリを完成 • Monacaデバッガーを使ったユーザーテストでUI改善
  39. 39. Bringing More People To Apps HTML5モバイルアプリ開発 活用ポイント  iOS、Android同時開発  既存のシステム資産の活用  既存の開発チームでのアプリ開発  UIフレームワークや開発支援ツールを有 効活用 アプリ内製化に有効な開発手法
  40. 40. Bringing More People To Apps アプリ開発のご相談も 受付中
  41. 41. Bringing More People To Apps まずは体験してみましょう!
  42. 42. Bringing More People To Apps 11月14日 秋葉原UDXに集結
  43. 43. Bringing More People To Apps ご清聴ありがとうございまし た

×