HTML5モバイルアプリ開発講座（Monaca入門編）

本資料は、クリエイティブ・コモンズ・ライセンス 表示-改変禁止 （CC BY-ND 4.0）に基づいて公開しております。https://creativecommons.jp/licenses/

営利・非営利を問わず、勉強会やトレーニング等で自由にご活用頂けます。

Transcript

1. Copyright © Asial Corporation. All Rights Reserved. │ 1 HTML5モバイルアプリ開発講座 Monaca入門編 アシアル株式会社
2. Copyright © Asial Corporation. All Rights Reserved. │ 2 ハイブリッドアプリとは
3. Copyright © Asial Corporation. All Rights Reserved. │ 3 モバイルアプリ開発に関する課題 1. 開発工数がかかる 2. ソースコード管理の複雑化 3. エンジニアの確保が困難 × × 従来のネイティブアプリ（OS上で直接動作するアプリ）開発では、 開発言語がOS毎に異なるために以下のような問題を抱えていました。
4. Copyright © Asial Corporation. All Rights Reserved. │ 4 ハイブリッドアプリの登場 ハイブリッドアプリはWebの技術を使って開発しますが、生成さ れるアプリはネイティブアプリとほぼ同等のものになります。 × ネイティブアプリ Webアプリ ネイティブアプリとWebアプリ、２つのアプリの特徴を兼ね備え たアプリを「ハイブリッドアプリ」と呼びます。
5. Copyright © Asial Corporation. All Rights Reserved. │ 5 従来の開発手法とハイブリッドアプリの比較 特徴・性能 ネイティブ アプリ Webアプリ ハイブリッド アプリ クロスプラットフォーム対応 × ◦ ◦ ストアへの公開 ◦ × ◦ 端末へのインストール ◦ △ ◦ オフラインでの利用 ◦ △ ◦ 端末固有の機能の利用 ◦ △ ◦ アプリ実行速度 ◦ △ △
6. Copyright © Asial Corporation. All Rights Reserved. │ 6 ハイブリッドアプリの仕組み ハイブリッドアプリ開発には、Apache Cordova (PhoneGap)と いうライブラリを利用します。 OSに依存する処理はCordovaから提供されるため、開発者はOS の違いを意識せずにWeb技術だけで開発することができます。 ネイティブコード HTML CSS JavaScript アプリ本体はWeb技術で実装 WebView(ブラウザ)で表示 CordovaがOSに合わせたネイ ティブコードを提供
7. Copyright © Asial Corporation. All Rights Reserved. │ 7 Monacaのご紹介
8. Copyright © Asial Corporation. All Rights Reserved. │ 8 Monacaとは • 20万人以上が利用するCordova開発環境 • iOS、Android、Windows対応 • 日本語サポート・ドキュメント • コアの機能はクラウドサービスとして提供 • WindowsマシンでもiOSアプリの開発OK
9. Copyright © Asial Corporation. All Rights Reserved. │ 9 Monacaの仕組み IDE デバッガー ビルドシステム クラウド ターゲットOSに 合わせた環境で アプリをビルド 開発環境として提供 Monacaでは各ターゲットOSごとのビルドシステムがクラウド上に用 意されており、リモートでビルドを行うため開発環境を問わずに利用 することができます。 ソースコードは クラウド上に
10. Copyright © Asial Corporation. All Rights Reserved. │ 10 Monaca Proプラン以上で利用可能 選べるIDE Monaca CLI コマンドライン からの実行 Monaca Cloud IDE ブラウザーベースの フル機能IDE 開発スタイルに合わせて様々なIDEを選択することが可能です。 Monaca Localkit 既存の開発環境が そのまま利用可能
11. Copyright © Asial Corporation. All Rights Reserved. │ 11 Monacaデバッガーによる実機デバッグ ①ファイルを編集 ②実機ですぐに動作確認 コンパイル処理やUSB経由での実機転送などは不要。デバッグ専用ア プリがネットワーク経由で変更箇所を取得するため、リアルタイムに 動作検証できます。 推奨環境 Google Chrome
12. Copyright © Asial Corporation. All Rights Reserved. │ 12 開発環境のセットアップ
13. Copyright © Asial Corporation. All Rights Reserved. │ 13 Monacaのアカウント登録 Chromeブラウザで下記URLを開き、「無料トライアル」ボタンをク リックしてアカウント登録を行って下さい。 https://ja.monaca.io
14. Copyright © Asial Corporation. All Rights Reserved. │ 14 Monacaのアカウント登録 • 受信可能なメールアドレスとパスワードを入力してアカウント新規 作成を行って下さい。
15. Copyright © Asial Corporation. All Rights Reserved. │ 15 アカウント仮登録完了 登録したメールアドレスに確認のメールが届きます。メールに 記載されたURLにアクセスして、無料トライアルを開始して下 さい。
16. Copyright © Asial Corporation. All Rights Reserved. │ 16 IDEを起動する プロジェクトを選択し、右側に表示される「クラウドIDEで開く」 ボタンをクリックすると、IDEが起動します。 IDEを開く
17. Copyright © Asial Corporation. All Rights Reserved. │ 17 IDEの起動 IDEの各部の役割は以下の通りです。 ファイルの管理を 行います ファイルの編集を 行います プレビューを 表示します デバッグ情報を表示します ダッシュボードを 開きます
18. Copyright © Asial Corporation. All Rights Reserved. │ 18 開発の流れ コードエディタ で編集し、保存する コードエディタで編集したファイルを、プレビューとデバッガー で確認しながら開発を進めていきます。 簡単な確認はプレビューで 実際の表示確認はデバッガーで
19. Copyright © Asial Corporation. All Rights Reserved. │ 19 Monacaデバッガーのインストール App Store、またはGoogle Playにて「monaca」で検索し、 スマートフォンにインストールして下さい。 アイコンはこちらです。
20. Copyright © Asial Corporation. All Rights Reserved. │ 20 Monacaデバッガーの起動 • Monacaデバッガーを起動すると、左の ログイン画面が表示されます。 • Monacaに登録したアカウントでログイ ンを行ってください。
21. Copyright © Asial Corporation. All Rights Reserved. │ 21 Monacaデバッガーでアプリを実行する • デバッガーを起動すると自動的にクラウドへ接続し、プロジェクトが 一覧表示されます。 • プロジェクトをタップするとアプリがシミュレートされます。
22. Copyright © Asial Corporation. All Rights Reserved. │ 22 「はじめてのMonacaアプリ」を動かしてみる • カメラ、コンパス、バイブレーションなどのネイティブ機能を動 かすことができます。
23. Copyright © Asial Corporation. All Rights Reserved. │ 23 Monacaデバッガーのメニュー 更新 プロジェクト 一覧に戻る スクリーン ショットを撮る アプリログの 確認
24. Copyright © Asial Corporation. All Rights Reserved. │ 24 端末固有の機能（ネイティブ機能）を使う
25. Copyright © Asial Corporation. All Rights Reserved. │ 25 ネイティブコード ネイティブ機能呼び出しの仕組み • カメラなどの各機能はネイティブの言語で実装され、プラグイン 形式で提供されています。利用する際にはアプリのネイティブ層 に組み込んで利用します。 • JavaScriptでAPIをコールすることで、プラグインが実行され端末 固有の機能にアクセスすることができます。 HTML・CSS・JavaScript OS 必要なプラグインを 組み込む
26. Copyright © Asial Corporation. All Rights Reserved. │ 26 Cordovaプラグインの種類 ◼ 標準プラグイン • カメラ等の基本的な機能を提供 • Monacaデバッガーにあらかじめ組み込まれている • 無料プランで利用可能 ◼ 第三者提供のプラグイン • 2,000個以上のプラグイン（https://cordova.apache.org/plugins/） • ネイティブ言語を用いた自作プラグインの作成も可能 • Monaca Proプラン以上で利用可能
27. Copyright © Asial Corporation. All Rights Reserved. │ 27 標準Cordovaプラグイン一覧 プラグインの種類 概要 Battery バッテリー残量を取得する Camera カメラアプリの起動、またはデバイスに保存された画像の読み込みを行う Capture 音声や動画の録音・録画機能を提供する Console 開発環境にデバッグ情報を出力する Contacts デバイスに保存されている連絡先情報にアクセスする Device デバイスに関する情報（モデル名、OS、UUIDなど）を取得する Device Motion デバイス内蔵の加速度センサーを参照し、デバイスの傾きを検知する Device Orientation デバイス内蔵のコンパスを参照し、デバイスが指し示す方位を取得する Dialogs ネイティブのダイアログを表示する File デバイスのファイルシステムにアクセスする File Transfer ファイルのアップロードとダウンロードを行う Geolocation デバイスの位置情報（緯度、経度）を取得する Globalization 設定されたロケールとタイムゾーンに基づいた日付文字列を取得する InAppBrowser アプリ内でブラウザを開き、Webページを表示する Media オーディオファイルを再生する Network Information ネットワークへの接続状態（WifiやLTEなど）を取得する Splashscreen スプラッシュスクリーンを表示する Vibration デバイスを振動させるバイブレーション機能を実行する StatusBar OSのステータスバーの表示切替やカスタマイズを行う Whitelist アプリからのアクセスを許可するURLを設定する
28. Copyright © Asial Corporation. All Rights Reserved. │ 28 Cordova固有のイベント • Cordovaには独自のJavaScriptイベントが用意されています。 • Cordovaプラグインを呼び出すAPIは、端末の機能を呼び出す準備ができた ときに発生する「deviceready」イベント以降で実行することができます。 Cordova固有のイベント イベント 発生タイミング deviceready Cordovaのライブラリのロードがすべて完了し、端末の機 能を呼び出す準備ができたとき（アプリ起動後、数百ミリ 秒経過後に発生） pause アプリがバックグラウンドに移行したとき resume アプリがフォアグラウンドに復帰したとき ※ バックグラウンドでは、JavaScriptのコードは実行されません。
29. Copyright © Asial Corporation. All Rights Reserved. │ 29 カメラ機能の利用 • 端末のカメラを起動したり、写真を読み込んだりするには、Cordovaの camera APIを利用します。 navigator.camera.getPicture( 成功時処理, 失敗時処理, オプション ); カメラAPI 引数 説明 成功時処理 カメラによる撮影や写真の読み込みが完了したときに実行す る関数を指定 失敗時処理 カメラの呼び出しに失敗したとき、またはユーザーにより途 中でキャンセルされたときに実行する関数を指定 オプション カメラ起動か写真読み込みか、といったAPIの挙動や、写真の 画質や取得方法などを指定
30. Copyright © Asial Corporation. All Rights Reserved. │ 30 カメラAPIのオプション（抜粋） オプション 説明 設定値 sourceType カメラAPIの挙動 ・Camera.PictureType.CAMERA（規定値） カメラを起動 ・Camera.PictureSourceType.SAVEDPHOTOALBUM 端末に保存された写真を読み込む destinationType 画像の取得形式 ・Camera.DestinationType.FILE_URI（規定値） 写真が保存されているパスを取得 ・Camera.DestinationType.DATA_URL base64形式で写真を取得 quality 画質 0～100（規定値：50） ※ iOSの場合、MAX50が推奨 saveToPhotoAlbum 撮影後、端末に画像を 保存するかどうか true false（規定値） cameraDirection 前面／背面のどちらの カメラを利用するか ・Camera.Direction.FRONT インカメラ（前面）を利用 ・Camera.Direction.BACK（規定値） アウトカメラ（背面）を利用
31. Copyright © Asial Corporation. All Rights Reserved. │ 31 実習
32. Copyright © Asial Corporation. All Rights Reserved. │ 32 新しいプロジェクトを作成する ダッシュボードに戻り、「新しいプロジェクトを作る」ボタンを選択します。
33. Copyright © Asial Corporation. All Rights Reserved. │ 33 新しいプロジェクトを作成する 1. テンプレートの種類は「最小限のテンプレート」を選択します 2. プロジェクト名と説明（任意入力）を設定して作成します カメラアプリに 変更
34. Copyright © Asial Corporation. All Rights Reserved. │ 34 HTMLの実装 index.htmlの<body>タグ内に以下のコードを記述します。 <body> <img id="photo" height="400"> <button id="shoot-button" onclick="shoot()">写真を撮る</button> </body>
35. Copyright © Asial Corporation. All Rights Reserved. │ 35 スクリプトの実装 index.htmlの<script>タグ内にカメラAPIを実行する処理を記述します。 <script> function shoot() { var option = { saveToPhotoAlbum: true // 撮影後端末に保存 }; // カメラを起動 navigator.camera.getPicture(onSuccess, onError, option); // 成功時に呼び出されるコールバック関数 function onSuccess(imageURI){ document.querySelector("#photo").src = imageURI; } // 失敗時に呼び出されるコールバック関数 function onError(message){ alert("Error:" + message); } } </script> 完成したら、Monacaデバッガーで 実行して写真を撮ってみましょう。 撮影した写真が端末に保存されてい ることを確認してください。
36. Copyright © Asial Corporation. All Rights Reserved. │ 36 Cordovaプラグインの有効化 • Monacaデバッガーにはすべての標準Cordovaプラグインがあらかじめ組み 込まれていますが、ビルドしたアプリには開発者が有効化したCordovaプラ グインのみが組み込まれます。 • プラグインの追加は、メニューバーの「設定」＞「Cordovaプラグインの管 理」から行うことができます。 今回は「Camera」プラグインを有効化します
37. Copyright © Asial Corporation. All Rights Reserved. │ 37 Cordovaバージョンと第三者提供プラグイン • 「Cordovaプラグインの管理」画面では、Cordovaのバージョンが確認でき ます。Proプラン以下では、最新2バージョンのみ利用できます。Business プラン以上では、旧バージョンを使い続けることが可能です。 • 第三者提供プラグインは、［Cordovaプラグインのインポート］ボタンでイ ンポートします。プロジェクトのCordovaバージョンに対応していない場合、 動作しない可能性があります。
38. Copyright © Asial Corporation. All Rights Reserved. │ 38 アプリのビルド
39. Copyright © Asial Corporation. All Rights Reserved. │ 39 アプリ設定 • メニューバー「設定」 ＞「Android/iOSアプリ設定」画面で、アプリ名や パッケージ名、アイコン画像等を設定します。
40. Copyright © Asial Corporation. All Rights Reserved. │ 40 ビルドの種類 Android版 iOS版 デバッグビル ド 主にテスト用途で利用します。アプリ を社内限定で配布する場合などにも利 用可能です。ダミーの署名をつけてビ ルドします。 テスト用途で開発者向けにアプリを配布 する場合に利用します。Developer証明 書が必要です。 アドホックビ ルド － 特定の端末にアプリを限定配布する場合 に利用します。ディストリビューション 証明書とAdHoc用のProvisioningプロ ファイルが必要です。 In-Houseビ ルド － 組織内にアプリを配布する場合に利用し ます。ディストリビューション証明書と In-Houseビルド用のProvisioningプロ ファイルが必要です。 Monaca Businessプラン以上が必要です。 リリースビル ド Google Playで公開することができま す。自分で作成した署名をつけてビル ドを行います。 App Storeで公開することができます。 ディストリビューション証明書とApp Store用のProvisioningプロファイルが必 要です。 カスタムビル ドデバッガー 第三者提供のCordovaプラグインを含むカスタムデバッガーを作成します。
41. Copyright © Asial Corporation. All Rights Reserved. │ 41 【Android】デバッグビルド（1/2） • メニューバーの「ビルド」＞「Androidアプリのビルド」を開くと [デバッ グビルド] が選択されているので、そのまま [ビルドを開始する] ボタンをク リックします。
42. Copyright © Asial Corporation. All Rights Reserved. │ 42 【Android】デバッグビルド（2/2） • ビルドが開始されます。ビルドが完了するまでには数分の時間がかかります。
43. Copyright © Asial Corporation. All Rights Reserved. │ 43 スマートフォンにインストールする • QRコードから直接端末にインストールできます。 • リリースビルドの場合、ローカルPCにダウンロードしたapkファイル （iOSの場合はipaファイル）はそのままストアに公開可能です。
44. Copyright © Asial Corporation. All Rights Reserved. │ 44 【Android】リリースビルド（1/2） • メニューバー「設定」＞「Androidキーストア設定」を開き、[クリアして新 規作成][OK]の順に選択し、任意のエイリアス名、エイリアスパスワード、 KeyStoreパスワードを入力して下さい。
45. Copyright © Asial Corporation. All Rights Reserved. │ 45 【Android】リリースビルド（2/2） • メニューバーの「ビルド」＞「Androidアプリのビルド」 画面で [リリース ビルド] を選択し、エイリアスのパスワードを入力してビルドを開始して下 さい。
46. Copyright © Asial Corporation. All Rights Reserved. │ 46 【iOS】ビルド設定とリリース向けビルド • iOSアプリのビルドには、有償のApple Developer Programへの参加と、証 明書の発行が必要になります。 • 以下のドキュメントを参考に作業を行ってして下さい。 https://docs.monaca.io/ja/monaca_ide/manual/build/ios/
47. Copyright © Asial Corporation. All Rights Reserved. │ 47 開発したアプリの配布 • App Storeにアプリを登録するためにはMacが必要です。Proプラン以上で は、iOSアプリをMonacaから直接アップロードする機能が利用できます。 • 組織内にiOSアプリを限定配布する場合、Apple Enterprise Programへの 参加が必須となります。 Android版 iOS版 マーケットでの公開方法 Google Playなどの Androidアプリストア App Store マーケットを経由しない 配布（社内限定） ◦ △ （Enterprise Program 参加企業のみ） テストを目的とした限定 配布 ◦ （制限なし） ◦ （100名まで） • Androidアプリは自由に配布することが可能ですが、iOSアプリは配布に関 して様々な制約があります。
48. Copyright © Asial Corporation. All Rights Reserved. │ 48 Monaca提供Enterpriseプラグインの紹介
49. Copyright © Asial Corporation. All Rights Reserved. │ 49 復号化 ソースコード暗号化プラグイン • 通常のハイブリッドアプリの場合、HTMLファイルはコンパイルされない ため平文のままアプリ内に保存されます。 • ソースコード暗号化プラグインによって、端末には暗号化されたHTML ファイルが保存され、アプリ実行時にデータを複合化します。複合化 データは一時的にメモリ上に展開されるだけなので、外部から読み取ら れる心配はありません。
50. Copyright © Asial Corporation. All Rights Reserved. │ 50 セキュアストレージ プラグイン • アプリ内に保存されるデータを暗号化するストレージ機能を提供します。 端末の盗難や紛失などの万が一の際の情報漏洩を未然に防ぎます。 • セキュアストレージは HTML5標準の localStorage とよく似た仕様と なっています。ただし、セキュアストレージはCordovaプラグインとし て提供されているため、非同期で実行されます。 let data = localStorage.getItem('item'); secureStorage.getItem('item', (result) => { let data = result; }); ⚫ LocalStoregeの場合 ⚫ セキュアストレージの場合
51. Copyright © Asial Corporation. All Rights Reserved. │ 51 In-App アップデーター プラグイン • ストア等から再ダウンロードすることなく、アプリの自動更新を行う機 能を提供します。アプリの再配布、端末への再インストールを行うこと なく、常にユーザーが最新のアプリを利用している状態を保てます。 プログラム修正 ビルドした アプリをデプロイ アプリ本体の ダウンロード が必要 ビルド 配布 システム 従来 プログラム修正 ＆アップロード 配信サーバ HTML5部分のみ をアプリに配信 In-App ｱｯﾌﾟ ﾃﾞｰﾀｰ サーバーに更新ファイル を配置します。
52. Copyright © Asial Corporation. All Rights Reserved. │ 52 サービス連携
53. Copyright © Asial Corporation. All Rights Reserved. │ 53 外部サービスとの連携方法 ◼ Monacaプロダクトパートナー https://ja.monaca.io/product-partner/index.html • バックエンドサービス、広告、分析、セキュリティ診断、テスト支援 など、Monacaと連携可能な各種ツールが提供されています。 ◼ プロダクトパートナーに掲載がないサービスであっても、以下の うちいずれかが提供されていればMonacaからの利用が可能です。 • Cordovaプラグイン • クライアントサイド用のJavaScript SDK • Web API
54. Copyright © Asial Corporation. All Rights Reserved. │ 54 参考ドキュメント
55. Copyright © Asial Corporation. All Rights Reserved. │ 55 参考ドキュメント • 標準Cordovaプラグインリファレンス https://docs.monaca.io/ja/reference/cordova_6.5/ • クラウドIDEマニュアル（ビルドやアプリの配布について） https://docs.monaca.io/ja/monaca_ide/manual/ • teratail（質問フォーラム） https://teratail.com/tags/monaca • モナカプレス（サンプルアプリの紹介やリリース情報など） https://press.monaca.io/
56. Copyright © Asial Corporation. All Rights Reserved. │ 56