実践! クロスプラットフォーム モバイルアプリ開発 アシアル株式会社 生形可奈奈 子 1
事前準備 1. Visual Studio Community 2013 または Professional 以上のエディションのインストール 2. Android スマートフォンへの任意の QR コードリーダーアプリのインストール 3. アプリ素材のダウンロード http://bit.ly/1v3n97e 2
アプリ開発ワークショップ 1. ハイブリッドアプリの概要を知ろう 2. 開発環境をセットアップしよう 3. おみくじアプリを作ろう 4. 実機でデバッグしてみよう 5. バイブレーション機能を追加しよう 6. アプリをインストールしてみよう (Android) 3
ハイブリッドアプリの概要 4
モバイル OS シェア 5
モバイルアプリ開発に関する課題 複数 OS 対応 需要の増 大 それぞれの OS に合わせてアプリを開発しなければならない Ø 開発環境 言語はそれぞれ異異なる Ø ソースコードを別々に管理理 Ø 開発コストとエンジニアの確保に課題 6
HTML5 という選択肢 7
ハイブリッドアプリの登場 2 つのアプリの特徴をいいとこどりしたアプリ Web アプリ ( クロスプラットフォーム性 ) ネイティブアプリ ( デバイスの機能を使える ) 8
従来の開発 手法とハイブリッドアプリの 比較 ハイブリッドアプリは マルチ OS 対応でありながらネイティブアプリと同等の機能を持ちます 特徴 性能 ネイティブ アプリ Web アプリ ハイブリッド アプリ クロスプラットフォーム対応 端末へのインストール マーケットでの配布 オフラインでの利利 用 端末固有の機能の利利 用 アプリ実 行行速度度 9
ハイブリッドアプリの仕組み ハイブリッドアプリは Cordova(PhoneGap) というライブラリを利利 用して開発します Cordova は HTML で作成されたコードをネイティブコードでパッケージングします HTML コンテンツ (WebView) ネイティブコード 10
ネイティブ機能呼び出しの仕組み カメラなどの端末固有の機能を呼び出す場合 開発者は JavaScript で命令令を記述します すると Cordova がネイティブコードによって対応する機能を実 行行します HTML CSS JavaScript ネイティブコード カメラ GPS 連絡帳 11
Monaca の紹介 12
Monaca とは https://ja.monaca.io/ クラウドベースのハイブリッドアプリ開発環境 ios, Android, Windows 8, Chrome Apps 対応 日本語サポート ドキュメント Windowsマシンでも開発 OK 無料料 ~ 13
Monaca によるアプリ開発 ブラウザだけで開発 ~テスト ~アプリの 生成までのすべての 工程を 行行うことができます 1 ブラウザで開発 2 実機で動作確認 3 ブラウザでビルド 14
Monaca for Visual Studio Visual Studio の拡張機能です Visual Studio 上で Monaca が持つ機能 ( 実機でのデバッグや Android/ ios アプリのビルドなど ) を利利 用することができます 15
開発環境のセットアップ 16
Monaca のアカウント登録 ブラウザで Monaca の Web サイトを開き サインアップ をクリックして下さい http://ja.monaca.io/ 17
アカウント情報 入 力力 メール受信可能なアドレスとパスワードを登録して下さい 18
アカウント仮登録完了了 ダッシュボードという画 面に遷移します 先程のメールアドレスに確認のメールが届きます 19
アカウントの本登録 確認メールに記載された URL にアクセスし 必要事項を 入 力力することで登録完了了です 20
Monaca for Visual Studio( 拡張機能 ) のインストール 1. Visual Studio を起動し メニューから ツール 拡張機能と更更新プログラム を選択します 2. ダイアログが表 示されたら 左のペインから オンライン を選択します 3. 右上にある検索索ボックスに Monaca と 入 力力します 4. Monaca for Visual Studio を選択し ダウンロード ボタンをクリックします 5. ライセンスに同意し インストール ボタンをクリックすることで 拡張機能がインストールされます 21
拡張機能のインストールを完了了する 1. インストールが完了了したら 下側に表 示される 今すぐ再起動 をクリックし Visual Studio を再起動してください 2. 起動後 メニューに MONACA が追加されていたら Monaca for Visual Studio のインストールは成功です 3. ログイン を選択して 先ほど作成した Monaca のアカウントでログインして下さい 22
Monaca デバッガーのインストール Google Play( または App Store) で monaca で検索索し スマートフォンにインストールして下さい アイコンはこちらです 23
サンプルアプリの作成 24
おみくじアプリを作成する 大吉 中吉 凶 などの結果をランダムに表 示する おみくじアプリの作成を通じて アプリの開発 方法を学びます 25
新しいプロジェクトを作成する 1. ファイル 新規作成 プロジェクト を選択します 2. 左ペインで Monaca Multi- Device Hybrid App を選択します 3. プロジェクトの種類として Create Monaca Project を選択します 4. 名前に おみくじ と 入 力力して OK を押してください 26
テンプレートを選択する 1. Monaca プロジェクトの作成 ダイアログが開いたら テンプレートを 最 小限のプロジェクト に変更更します 2. プロジェクト名に おみくじ と 入 力力します 3. 作成 ボタンをクリックします 27
画像をプロジェクトに追加する 1. ソリューションエクスプローラーで www フォルダを右クリック 追加 新しいフォルダー を選択します 2. 新しいフォルダー名に images と 入 力力します 3. 事前準備でダウンロードした zip ファイル内の画像ファイルを全選択し images フォルダにドラッグ & ドロップします 28
HTML と CSS を追加する 1. 画像ファイルの追加と同様に style.css を css フォルダにドラッグ & ドロップします 上書き確認のダイアログが表 示されますので はい をクリックします 2. index.html は 一度度テキストエディタで開き 内容をコピーして Visual Studio にペーストします 既存の内容は削除し すべて上書きしてしまって構いません 29
プレビューを確認する メニュー MONACA プレビュー を選択すると プレビューペインが表 示されます プレビューを使うと プロジェクトの内容を簡易易的に表 示することができます おみくじアプリが正常に動作することを確認してみましょう 30
実機でデバッグしてみよう 31
Monaca デバッガーの起動 アプリを起動し Monaca のアカウントでログインして下さい おみくじ プロジェクトをタップすると 実機でのシミュレートが開始されます 32
Monaca デバッガーのメニュー スクリーンショットを撮る プロジェクト 一覧に戻る チャットを開く 更更新 ソースコードの表 示 アプリログの 確認 33
バイブレーション機能を追加しよう 34
Cordova プラグインの有効化 1. メニューの MONACA Configuration Cordova プラグインの管理理... を選択します 2. Cordova プラグインの管理理 画 面が開いたら リストの下の 方にある Vibration の有効ボタンをクリックします 35
バイブレーション API の呼び出し index.html 内の omikuji 関数の 一番下に 赤字のコードを追加しましょう function omikuji() { 省略 // 0.5 秒間バイブレーションを振動させる navigator.notification.vibrate(500); } 36
スマートフォンで確認する Monaca デバッガーで 結果が表 示されたときに端末が振動することを確認をしてみましょう 37
アプリをインストールしてみよう 38
アイコンを設定する 1. メニューの MONACA Configuration Android アプリ設定 を選択します 2. アイコン の アップロード... ボタンをクリックし icon.png を選択します 3. 最後に 一番下にある 保存する ボタンをクリックします 39
Android アプリをビルドする 1. メニューの ビルド おみくじのビルド を選択します 2. プラットフォームは Android を選択します 3. デバッグビルド を選択し 次へ をクリックします 40
スマートフォンにインストールする 1. ビルド成功画 面の QR コードを 任意の QR コードリーダーアプリで読み取って下さい 2. apk ファイルのダウンロードが 行行われますので ダウンロードしたファイルをタップしてインストールを開始して下さい 41
スマートフォンで確認する インストール済のアプリ 一覧の中に新しくアイコンが追加されていることを確認しましょう 42
https://ja.monaca.io/ 43