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.
簡単モバイルアプリ開発
クラウドベース開発環境Monacaを使う
手仕事工房
岡崎博樹
おかざきひろき
● 手仕事工房
● www.teshigoto.net
● twitter: @hiro_okaz
● facebook: hiro.okaz
モバイルアプリ
Webアプリ ネイティブアプリ
開発
HTML5, JavaScript, CSS
テキストエディタ, Webブラウザ
Java, Objective-C
専用SDK
実行 Webブラウザ Android OS, iOS
機能
...
Android, iOSAndroid, iOS Android, iOSAndroid, iOS
アプリパッケージアプリパッケージ
ハイブリッドアプリ
サーバサーバ
WebWebブラウザブラウザ
WebView/UIWebViewWebVie...
ハイブリッドアプリの事例
● クックパッド
● 名刺管理:Eight
● facebook
– 現在はネイティブ
– Web版も提供
PhoneGap
● Nitobi社 ⇒ Adobe社 ⇒ Apache へ寄贈
● Apache Cordova プロジェクト
● PhoneGap : Adobe's distribution
● Monaca : PhoneGapベースの...
● 加速度センサー
● カメラ
● 音声、画像、動画アプリ連携
● コンパス
● ネットワーク接続タイプ
● 連絡先DBアクセス
● デバイスイベント
● ファイルシステム
● 位置情報 (HTML5)
● Web Strage (HTML5)...
PhoneGap による開発
Diagram - PhoneGap Overview by Adobe / Yohei Shimomae is licensed
under a Creative Commons Attribution-NonC...
Monaca
● ハイブリッド向け開発プラットフォーム
– アシアル社製
● PhoneGap+独自フレームワーク+独自IDE
– フレームワーク部分はOSS https://github.com/monaca/
– ビルド部分も独自?
● W...
Monaca による開発
Monacaプラットフォーム
Monacaデバッガー
ネイティブアプリパッケージ
Monaca で作ったアプリ
● 名刺管理:Eight
● テレ朝動画アプリ(公式)
● 星をみるひと
● 美瑛の丘をめぐる旅
● 金澤の坂道
● http://monaca.mobi/examples
Monaca バックエンド
● ユーザ認証
● DB管理
– コレクション(NoSQL)
– クライテリア(MonaQL)
● メーラー
JavaScript API
ユーザ認証
DBアクセス
BaaS
● Backend as a Service
● mobile target
IaaSIaaS
Amazon EC2/S3Amazon EC2/S3
PaaSPaaS
Google App EngineGoogle App Engin...
Monaca@edu
● 東京工科大学メディア学部上林研究室
– サービス工学、ネットワーク生態学
● メディア専門演習スマートサービスデザイン
– 7/10インチタブレット
– 3年生、約30名
– 全15回30コマ
まとめ
● Monacaは使いやすい
– とりあえずJavaScriptだけで作れる
– デバッグ環境
– ビルドも簡単
● 適材適所
– 業務系に向いているかも
● PCとモバイルのUIは本質的に異なる
ありがとうございました
Upcoming SlideShare
Loading in …5
×

簡単モバイルアプリ開発 クラウドベース開発環境Monacaを使う

4,063 views

Published on

スクエアfreeセミナーでお話させていただいたときに使った資料です。
http://www.opensquare.co.jp/seminar/free-seminar-33.php

Published in: Technology
  • Be the first to comment

簡単モバイルアプリ開発 クラウドベース開発環境Monacaを使う

  1. 1. 簡単モバイルアプリ開発 クラウドベース開発環境Monacaを使う 手仕事工房 岡崎博樹
  2. 2. おかざきひろき ● 手仕事工房 ● www.teshigoto.net ● twitter: @hiro_okaz ● facebook: hiro.okaz
  3. 3. モバイルアプリ Webアプリ ネイティブアプリ 開発 HTML5, JavaScript, CSS テキストエディタ, Webブラウザ Java, Objective-C 専用SDK 実行 Webブラウザ Android OS, iOS 機能 Canvas, WebStorage, IndexedDB, Geolocation, etc モバイル端末のハードウェアリソース リリース URL告知 マーケットプレースでパッケージ配布 保守 常に最新 ユーザ次第
  4. 4. Android, iOSAndroid, iOS Android, iOSAndroid, iOS アプリパッケージアプリパッケージ ハイブリッドアプリ サーバサーバ WebWebブラウザブラウザ WebView/UIWebViewWebView/UIWebView クラスクラス HTML5HTML5 JavaScriptJavaScript CSSCSS HTML5HTML5 JavaScriptJavaScript CSSCSS Android, iOSAndroid, iOS アプリパッケージアプリパッケージ Webアプリ ハイブリッドアプリ ネイティブアプリ
  5. 5. ハイブリッドアプリの事例 ● クックパッド ● 名刺管理:Eight ● facebook – 現在はネイティブ – Web版も提供
  6. 6. PhoneGap ● Nitobi社 ⇒ Adobe社 ⇒ Apache へ寄贈 ● Apache Cordova プロジェクト ● PhoneGap : Adobe's distribution ● Monaca : PhoneGapベースのIDE
  7. 7. ● 加速度センサー ● カメラ ● 音声、画像、動画アプリ連携 ● コンパス ● ネットワーク接続タイプ ● 連絡先DBアクセス ● デバイスイベント ● ファイルシステム ● 位置情報 (HTML5) ● Web Strage (HTML5) ● etc PhoneGap の機能
  8. 8. PhoneGap による開発 Diagram - PhoneGap Overview by Adobe / Yohei Shimomae is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported License. ● PhoneGap Build を使わない場合、Android/iOS 開発環境に PhoneGap を組み込む必要あり。
  9. 9. Monaca ● ハイブリッド向け開発プラットフォーム – アシアル社製 ● PhoneGap+独自フレームワーク+独自IDE – フレームワーク部分はOSS https://github.com/monaca/ – ビルド部分も独自? ● Webブラウザと実機だけでOK – クラウド環境でデバッグ – 外部 JavaScript ライブラリ
  10. 10. Monaca による開発 Monacaプラットフォーム Monacaデバッガー ネイティブアプリパッケージ
  11. 11. Monaca で作ったアプリ ● 名刺管理:Eight ● テレ朝動画アプリ(公式) ● 星をみるひと ● 美瑛の丘をめぐる旅 ● 金澤の坂道 ● http://monaca.mobi/examples
  12. 12. Monaca バックエンド ● ユーザ認証 ● DB管理 – コレクション(NoSQL) – クライテリア(MonaQL) ● メーラー JavaScript API ユーザ認証 DBアクセス
  13. 13. BaaS ● Backend as a Service ● mobile target IaaSIaaS Amazon EC2/S3Amazon EC2/S3 PaaSPaaS Google App EngineGoogle App Engine SaaSSaaS SalesforceSalesforce BaaSBaaS Parse, Kinvey, etcParse, Kinvey, etc
  14. 14. Monaca@edu ● 東京工科大学メディア学部上林研究室 – サービス工学、ネットワーク生態学 ● メディア専門演習スマートサービスデザイン – 7/10インチタブレット – 3年生、約30名 – 全15回30コマ
  15. 15. まとめ ● Monacaは使いやすい – とりあえずJavaScriptだけで作れる – デバッグ環境 – ビルドも簡単 ● 適材適所 – 業務系に向いているかも ● PCとモバイルのUIは本質的に異なる
  16. 16. ありがとうございました

×