Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

アシアル株式会社

April 13, 2018
Tweet

More Decks by アシアル株式会社

Other Decks in Technology

Transcript

  1. Copyright © Asial Corporation. All Rights Reserved. │ 1
    HTML5モバイルアプリ開発講座
    Monaca入門編
    アシアル株式会社

    View full-size slide

  2. Copyright © Asial Corporation. All Rights Reserved. │ 2
    ハイブリッドアプリとは

    View full-size slide

  3. Copyright © Asial Corporation. All Rights Reserved. │ 3
    モバイルアプリ開発に関する課題
    1. 開発工数がかかる
    2. ソースコード管理の複雑化
    3. エンジニアの確保が困難
    ×
    ×
    従来のネイティブアプリ(OS上で直接動作するアプリ)開発では、
    開発言語がOS毎に異なるために以下のような問題を抱えていました。

    View full-size slide

  4. Copyright © Asial Corporation. All Rights Reserved. │ 4
    ハイブリッドアプリの登場
    ハイブリッドアプリはWebの技術を使って開発しますが、生成さ
    れるアプリはネイティブアプリとほぼ同等のものになります。
    ×
    ネイティブアプリ Webアプリ
    ネイティブアプリとWebアプリ、2つのアプリの特徴を兼ね備え
    たアプリを「ハイブリッドアプリ」と呼びます。

    View full-size slide

  5. Copyright © Asial Corporation. All Rights Reserved. │ 5
    従来の開発手法とハイブリッドアプリの比較
    特徴・性能
    ネイティブ
    アプリ
    Webアプリ
    ハイブリッド
    アプリ
    クロスプラットフォーム対応 × ○ ○
    ストアへの公開 ○ × ○
    端末へのインストール ○ △ ○
    オフラインでの利用 ○ △ ○
    端末固有の機能の利用 ○ △ ○
    アプリ実行速度 ○ △ △

    View full-size slide

  6. Copyright © Asial Corporation. All Rights Reserved. │ 6
    ハイブリッドアプリの仕組み
    ハイブリッドアプリ開発には、Apache Cordova (PhoneGap)と
    いうライブラリを利用します。
    OSに依存する処理はCordovaから提供されるため、開発者はOS
    の違いを意識せずにWeb技術だけで開発することができます。
    ネイティブコード
    HTML
    CSS
    JavaScript
    アプリ本体はWeb技術で実装
    WebView(ブラウザ)で表示
    CordovaがOSに合わせたネイ
    ティブコードを提供

    View full-size slide

  7. Copyright © Asial Corporation. All Rights Reserved. │ 7
    Monacaのご紹介

    View full-size slide

  8. Copyright © Asial Corporation. All Rights Reserved. │ 8
    Monacaとは
    • 20万人以上が利用するCordova開発環境
    • iOS、Android、Windows対応
    • 日本語サポート・ドキュメント
    • コアの機能はクラウドサービスとして提供
    • WindowsマシンでもiOSアプリの開発OK

    View full-size slide

  9. Copyright © Asial Corporation. All Rights Reserved. │ 9
    Monacaの仕組み
    IDE デバッガー
    ビルドシステム
    クラウド
    ターゲットOSに
    合わせた環境で
    アプリをビルド
    開発環境として提供
    Monacaでは各ターゲットOSごとのビルドシステムがクラウド上に用
    意されており、リモートでビルドを行うため開発環境を問わずに利用
    することができます。
    ソースコードは
    クラウド上に

    View full-size slide

  10. Copyright © Asial Corporation. All Rights Reserved. │ 10
    Monaca Proプラン以上で利用可能
    選べるIDE
    Monaca CLI
    コマンドライン
    からの実行
    Monaca Cloud IDE
    ブラウザーベースの
    フル機能IDE
    開発スタイルに合わせて様々なIDEを選択することが可能です。
    Monaca Localkit
    既存の開発環境が
    そのまま利用可能

    View full-size slide

  11. Copyright © Asial Corporation. All Rights Reserved. │ 11
    Monacaデバッガーによる実機デバッグ
    ①ファイルを編集 ②実機ですぐに動作確認
    コンパイル処理やUSB経由での実機転送などは不要。デバッグ専用ア
    プリがネットワーク経由で変更箇所を取得するため、リアルタイムに
    動作検証できます。
    推奨環境
    Google Chrome

    View full-size slide

  12. Copyright © Asial Corporation. All Rights Reserved. │ 12
    開発環境のセットアップ

    View full-size slide

  13. Copyright © Asial Corporation. All Rights Reserved. │ 13
    Monacaのアカウント登録
    Chromeブラウザで下記URLを開き、「無料トライアル」ボタンをク
    リックしてアカウント登録を行って下さい。
    https://ja.monaca.io

    View full-size slide

  14. Copyright © Asial Corporation. All Rights Reserved. │ 14
    Monacaのアカウント登録
    • 受信可能なメールアドレスとパスワードを入力してアカウント新規
    作成を行って下さい。

    View full-size slide

  15. Copyright © Asial Corporation. All Rights Reserved. │ 15
    アカウント仮登録完了
    登録したメールアドレスに確認のメールが届きます。メールに
    記載されたURLにアクセスして、無料トライアルを開始して下
    さい。

    View full-size slide

  16. Copyright © Asial Corporation. All Rights Reserved. │ 16
    IDEを起動する
    プロジェクトを選択し、右側に表示される「クラウドIDEで開く」
    ボタンをクリックすると、IDEが起動します。
    IDEを開く

    View full-size slide

  17. Copyright © Asial Corporation. All Rights Reserved. │ 17
    IDEの起動
    IDEの各部の役割は以下の通りです。
    ファイルの管理を
    行います
    ファイルの編集を
    行います
    プレビューを
    表示します
    デバッグ情報を表示します
    ダッシュボードを
    開きます

    View full-size slide

  18. Copyright © Asial Corporation. All Rights Reserved. │ 18
    開発の流れ
    コードエディタ
    で編集し、保存する
    コードエディタで編集したファイルを、プレビューとデバッガー
    で確認しながら開発を進めていきます。
    簡単な確認はプレビューで
    実際の表示確認はデバッガーで

    View full-size slide

  19. Copyright © Asial Corporation. All Rights Reserved. │ 19
    Monacaデバッガーのインストール
    App Store、またはGoogle Playにて「monaca」で検索し、
    スマートフォンにインストールして下さい。
    アイコンはこちらです。

    View full-size slide

  20. Copyright © Asial Corporation. All Rights Reserved. │ 20
    Monacaデバッガーの起動
    • Monacaデバッガーを起動すると、左の
    ログイン画面が表示されます。
    • Monacaに登録したアカウントでログイ
    ンを行ってください。

    View full-size slide

  21. Copyright © Asial Corporation. All Rights Reserved. │ 21
    Monacaデバッガーでアプリを実行する
    • デバッガーを起動すると自動的にクラウドへ接続し、プロジェクトが
    一覧表示されます。
    • プロジェクトをタップするとアプリがシミュレートされます。

    View full-size slide

  22. Copyright © Asial Corporation. All Rights Reserved. │ 22
    「はじめてのMonacaアプリ」を動かしてみる
    • カメラ、コンパス、バイブレーションなどのネイティブ機能を動
    かすことができます。

    View full-size slide

  23. Copyright © Asial Corporation. All Rights Reserved. │ 23
    Monacaデバッガーのメニュー
    更新
    プロジェクト
    一覧に戻る
    スクリーン
    ショットを撮る
    アプリログの
    確認

    View full-size slide

  24. Copyright © Asial Corporation. All Rights Reserved. │ 24
    端末固有の機能(ネイティブ機能)を使う

    View full-size slide

  25. Copyright © Asial Corporation. All Rights Reserved. │ 25
    ネイティブコード
    ネイティブ機能呼び出しの仕組み
    • カメラなどの各機能はネイティブの言語で実装され、プラグイン
    形式で提供されています。利用する際にはアプリのネイティブ層
    に組み込んで利用します。
    • JavaScriptでAPIをコールすることで、プラグインが実行され端末
    固有の機能にアクセスすることができます。
    HTML・CSS・JavaScript
    OS
    必要なプラグインを
    組み込む

    View full-size slide

  26. Copyright © Asial Corporation. All Rights Reserved. │ 26
    Cordovaプラグインの種類
    ◼ 標準プラグイン
    • カメラ等の基本的な機能を提供
    • Monacaデバッガーにあらかじめ組み込まれている
    • 無料プランで利用可能
    ◼ 第三者提供のプラグイン
    • 2,000個以上のプラグイン(https://cordova.apache.org/plugins/)
    • ネイティブ言語を用いた自作プラグインの作成も可能
    • Monaca Proプラン以上で利用可能

    View full-size slide

  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を設定する

    View full-size slide

  28. Copyright © Asial Corporation. All Rights Reserved. │ 28
    Cordova固有のイベント
    • Cordovaには独自のJavaScriptイベントが用意されています。
    • Cordovaプラグインを呼び出すAPIは、端末の機能を呼び出す準備ができた
    ときに発生する「deviceready」イベント以降で実行することができます。
    Cordova固有のイベント
    イベント 発生タイミング
    deviceready Cordovaのライブラリのロードがすべて完了し、端末の機
    能を呼び出す準備ができたとき(アプリ起動後、数百ミリ
    秒経過後に発生)
    pause アプリがバックグラウンドに移行したとき
    resume アプリがフォアグラウンドに復帰したとき
    ※ バックグラウンドでは、JavaScriptのコードは実行されません。

    View full-size slide

  29. Copyright © Asial Corporation. All Rights Reserved. │ 29
    カメラ機能の利用
    • 端末のカメラを起動したり、写真を読み込んだりするには、Cordovaの
    camera APIを利用します。
    navigator.camera.getPicture( 成功時処理, 失敗時処理, オプション );
    カメラAPI
    引数 説明
    成功時処理 カメラによる撮影や写真の読み込みが完了したときに実行す
    る関数を指定
    失敗時処理 カメラの呼び出しに失敗したとき、またはユーザーにより途
    中でキャンセルされたときに実行する関数を指定
    オプション カメラ起動か写真読み込みか、といったAPIの挙動や、写真の
    画質や取得方法などを指定

    View full-size slide

  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(規定値)
    アウトカメラ(背面)を利用

    View full-size slide

  31. Copyright © Asial Corporation. All Rights Reserved. │ 31
    実習

    View full-size slide

  32. Copyright © Asial Corporation. All Rights Reserved. │ 32
    新しいプロジェクトを作成する
    ダッシュボードに戻り、「新しいプロジェクトを作る」ボタンを選択します。

    View full-size slide

  33. Copyright © Asial Corporation. All Rights Reserved. │ 33
    新しいプロジェクトを作成する
    1. テンプレートの種類は「最小限のテンプレート」を選択します
    2. プロジェクト名と説明(任意入力)を設定して作成します
    カメラアプリに
    変更

    View full-size slide

  34. Copyright © Asial Corporation. All Rights Reserved. │ 34
    HTMLの実装
    index.htmlのタグ内に以下のコードを記述します。


    写真を撮る

    View full-size slide

  35. Copyright © Asial Corporation. All Rights Reserved. │ 35
    スクリプトの実装
    index.htmlのタグ内にカメラAPIを実行する処理を記述します。<br/><script><br/>function shoot() {<br/>var option = {<br/>saveToPhotoAlbum: true // 撮影後端末に保存<br/>};<br/>// カメラを起動<br/>navigator.camera.getPicture(onSuccess, onError, option);<br/>// 成功時に呼び出されるコールバック関数<br/>function onSuccess(imageURI){<br/>document.querySelector("#photo").src = imageURI;<br/>}<br/>// 失敗時に呼び出されるコールバック関数<br/>function onError(message){<br/>alert("Error:" + message);<br/>}<br/>}<br/>
    完成したら、Monacaデバッガーで
    実行して写真を撮ってみましょう。
    撮影した写真が端末に保存されてい
    ることを確認してください。

    View full-size slide

  36. Copyright © Asial Corporation. All Rights Reserved. │ 36
    Cordovaプラグインの有効化
    • Monacaデバッガーにはすべての標準Cordovaプラグインがあらかじめ組み
    込まれていますが、ビルドしたアプリには開発者が有効化したCordovaプラ
    グインのみが組み込まれます。
    • プラグインの追加は、メニューバーの「設定」>「Cordovaプラグインの管
    理」から行うことができます。
    今回は「Camera」プラグインを有効化します

    View full-size slide

  37. Copyright © Asial Corporation. All Rights Reserved. │ 37
    Cordovaバージョンと第三者提供プラグイン
    • 「Cordovaプラグインの管理」画面では、Cordovaのバージョンが確認でき
    ます。Proプラン以下では、最新2バージョンのみ利用できます。Business
    プラン以上では、旧バージョンを使い続けることが可能です。
    • 第三者提供プラグインは、[Cordovaプラグインのインポート]ボタンでイ
    ンポートします。プロジェクトのCordovaバージョンに対応していない場合、
    動作しない可能性があります。

    View full-size slide

  38. Copyright © Asial Corporation. All Rights Reserved. │ 38
    アプリのビルド

    View full-size slide

  39. Copyright © Asial Corporation. All Rights Reserved. │ 39
    アプリ設定
    • メニューバー「設定」 >「Android/iOSアプリ設定」画面で、アプリ名や
    パッケージ名、アイコン画像等を設定します。

    View full-size slide

  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プラグインを含むカスタムデバッガーを作成します。

    View full-size slide

  41. Copyright © Asial Corporation. All Rights Reserved. │ 41
    【Android】デバッグビルド(1/2)
    • メニューバーの「ビルド」>「Androidアプリのビルド」を開くと [デバッ
    グビルド] が選択されているので、そのまま [ビルドを開始する] ボタンをク
    リックします。

    View full-size slide

  42. Copyright © Asial Corporation. All Rights Reserved. │ 42
    【Android】デバッグビルド(2/2)
    • ビルドが開始されます。ビルドが完了するまでには数分の時間がかかります。

    View full-size slide

  43. Copyright © Asial Corporation. All Rights Reserved. │ 43
    スマートフォンにインストールする
    • QRコードから直接端末にインストールできます。
    • リリースビルドの場合、ローカルPCにダウンロードしたapkファイル
    (iOSの場合はipaファイル)はそのままストアに公開可能です。

    View full-size slide

  44. Copyright © Asial Corporation. All Rights Reserved. │ 44
    【Android】リリースビルド(1/2)
    • メニューバー「設定」>「Androidキーストア設定」を開き、[クリアして新
    規作成][OK]の順に選択し、任意のエイリアス名、エイリアスパスワード、
    KeyStoreパスワードを入力して下さい。

    View full-size slide

  45. Copyright © Asial Corporation. All Rights Reserved. │ 45
    【Android】リリースビルド(2/2)
    • メニューバーの「ビルド」>「Androidアプリのビルド」 画面で [リリース
    ビルド] を選択し、エイリアスのパスワードを入力してビルドを開始して下
    さい。

    View full-size slide

  46. Copyright © Asial Corporation. All Rights Reserved. │ 46
    【iOS】ビルド設定とリリース向けビルド
    • iOSアプリのビルドには、有償のApple Developer Programへの参加と、証
    明書の発行が必要になります。
    • 以下のドキュメントを参考に作業を行ってして下さい。
    https://docs.monaca.io/ja/monaca_ide/manual/build/ios/

    View full-size slide

  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アプリは配布に関
    して様々な制約があります。

    View full-size slide

  48. Copyright © Asial Corporation. All Rights Reserved. │ 48
    Monaca提供Enterpriseプラグインの紹介

    View full-size slide

  49. Copyright © Asial Corporation. All Rights Reserved. │ 49
    復号化
    ソースコード暗号化プラグイン
    • 通常のハイブリッドアプリの場合、HTMLファイルはコンパイルされない
    ため平文のままアプリ内に保存されます。
    • ソースコード暗号化プラグインによって、端末には暗号化されたHTML
    ファイルが保存され、アプリ実行時にデータを複合化します。複合化
    データは一時的にメモリ上に展開されるだけなので、外部から読み取ら
    れる心配はありません。

    View full-size slide

  50. Copyright © Asial Corporation. All Rights Reserved. │ 50
    セキュアストレージ プラグイン
    • アプリ内に保存されるデータを暗号化するストレージ機能を提供します。
    端末の盗難や紛失などの万が一の際の情報漏洩を未然に防ぎます。
    • セキュアストレージは HTML5標準の localStorage とよく似た仕様と
    なっています。ただし、セキュアストレージはCordovaプラグインとし
    て提供されているため、非同期で実行されます。
    let data = localStorage.getItem('item');
    secureStorage.getItem('item', (result) => {
    let data = result;
    });
    ⚫ LocalStoregeの場合
    ⚫ セキュアストレージの場合

    View full-size slide

  51. Copyright © Asial Corporation. All Rights Reserved. │ 51
    In-App アップデーター プラグイン
    • ストア等から再ダウンロードすることなく、アプリの自動更新を行う機
    能を提供します。アプリの再配布、端末への再インストールを行うこと
    なく、常にユーザーが最新のアプリを利用している状態を保てます。
    プログラム修正
    ビルドした
    アプリをデプロイ アプリ本体の
    ダウンロード
    が必要
    ビルド 配布
    システム
    従来
    プログラム修正
    &アップロード
    配信サーバ
    HTML5部分のみ
    をアプリに配信
    In-App
    アップ
    データー
    サーバーに更新ファイル
    を配置します。

    View full-size slide

  52. Copyright © Asial Corporation. All Rights Reserved. │ 52
    サービス連携

    View full-size slide

  53. Copyright © Asial Corporation. All Rights Reserved. │ 53
    外部サービスとの連携方法
    ◼ Monacaプロダクトパートナー
    https://ja.monaca.io/product-partner/index.html
    • バックエンドサービス、広告、分析、セキュリティ診断、テスト支援
    など、Monacaと連携可能な各種ツールが提供されています。
    ◼ プロダクトパートナーに掲載がないサービスであっても、以下の
    うちいずれかが提供されていればMonacaからの利用が可能です。
    • Cordovaプラグイン
    • クライアントサイド用のJavaScript SDK
    • Web API

    View full-size slide

  54. Copyright © Asial Corporation. All Rights Reserved. │ 54
    参考ドキュメント

    View full-size slide

  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/

    View full-size slide

  56. Copyright © Asial Corporation. All Rights Reserved. │ 56

    View full-size slide