実践！クロスプラットフォーム...

1URL : http://ja.monaca.io/ Copyright © Asial Corporation. All Right Reserved.

実践！クロスプラットフォームモバイルアプリ開発

アシアル株式会社⽣生形　可奈奈⼦子


事前準備

1.  Visual Studio Community 2013またはProfessional以上のエディションのインストール

2.  Androidスマートフォンへの任意のQRコードリーダーアプリのインストール

3.  アプリ素材のダウンロード

http://bit.ly/1v3n97e


アプリ開発ワークショップ

1.  ハイブリッドアプリの概要を知ろう2.  開発環境をセットアップしよう3.  おみくじアプリを作ろう4.  実機でデバッグしてみよう5.  バイブレーション機能を追加しよう6.  アプリをインストールしてみよう（Android）


ハイブリッドアプリの概要


モバイルOSシェア


モバイルアプリ開発に関する課題

それぞれのOSに合わせてアプリを開発しなければならない

Ø  開発環境、⾔言語はそれぞれ異異なるØ  ソースコードを別々に管理理Ø  開発コストとエンジニアの確保に課題

複数OS対応 × 需要の増⼤大


HTML5という選択肢


ハイブリッドアプリの登場

２つのアプリの特徴をいいとこどりしたアプリ・ Webアプリ（クロスプラットフォーム性）・ネイティブアプリ（デバイスの機能を使える）


従来の開発⼿手法とハイブリッドアプリの⽐比較

特徴・性能ネイティブアプリ Webアプリハイブリッドアプリ

クロスプラットフォーム対応 × ○ ○

端末へのインストール ○ × ○

マーケットでの配布 ○ × ○

オフラインでの利利⽤用 ○ × ○

端末固有の機能の利利⽤用 ○ △ ○

アプリ実⾏行行速度度 ○ △ △

ハイブリッドアプリは、マルチOS対応でありながらネイティブアプリと同等の機能を持ちます。


ハイブリッドアプリの仕組み

ハイブリッドアプリは、「Cordova（PhoneGap）」というライブラリを利利⽤用して開発します。 CordovaはHTMLで作成されたコードをネイティブコードでパッケージングします。

ネイティブコード

HTMLコンテンツ（WebView）


ネイティブコード

ネイティブ機能呼び出しの仕組み

カメラなどの端末固有の機能を呼び出す場合、開発者はJavaScriptで命令令を記述します。するとCordovaがネイティブコードによって対応する機能を実⾏行行します。

連絡帳GPSカメラ

HTML・CSS・JavaScript


Monacaの紹介


Monacaとは

•  クラウドベースのハイブリッドアプリ開発環境•  iOS, Android, Windows 8, Chrome Apps対応•  ⽇日本語サポート・ドキュメント•  Windowsマシンでも開発OK•  無料料〜～

https://ja.monaca.io/


Monacaによるアプリ開発

ブラウザだけで開発〜～テスト〜～アプリの⽣生成までのすべての⼯工程を⾏行行うことができます。

①ブラウザで開発 ②実機で動作確認 ③ブラウザでビルド


Monaca for Visual Studio

Visual Studioの拡張機能です。Visual Studio上でMonacaが持つ機能（実機でのデバッグやAndroid/iOSアプリのビルドなど）を利利⽤用することができます。

×


開発環境のセットアップ


Monacaのアカウント登録

ブラウザでMonacaのWebサイトを開き、「サインアップ」をクリックして下さい。

http://ja.monaca.io/


アカウント情報⼊入⼒力力

メール受信可能なアドレスとパスワードを登録して下さい。


アカウント仮登録完了了

ダッシュボードという画⾯面に遷移します。先程のメールアドレスに確認のメールが届きます。


アカウントの本登録

確認メールに記載されたURLにアクセスし、必要事項を⼊入⼒力力することで登録完了了です。


Monaca for Visual Studio（拡張機能）のインストール1.  Visual Studioを起動し、メニューから「ツール」→「拡張機能と更更新プログラム」を選択します。

2.  ダイアログが表⽰示されたら、左のペインから「オンライン」を選択します。

3.  右上にある検索索ボックスに「Monaca」と⼊入⼒力力します。

4.  「Monaca for Visual Studio」を選択し、「ダウンロード」ボタンをクリックします。

5.  ライセンスに同意し、「インストール」ボタンをクリックすることで、拡張機能がインストールされます。


拡張機能のインストールを完了了する

1.  インストールが完了了したら、下側に表⽰示される「今すぐ再起動」をクリックし、Visual Studioを再起動してください。

2.  起動後、メニューに「MONACA」が追加されていたら、Monaca for Visual Studioのインストールは成功です。

3.  「ログイン」を選択して、先ほど作成したMonacaのアカウントでログインして下さい。


Monacaデバッガーのインストール

Google Play（またはApp Store）で、「monaca」で検索索し、スマートフォンにインストールして下さい。

アイコンはこちらです。


サンプルアプリの作成


おみくじアプリを作成する

「⼤大吉」「中吉」「凶」などの結果をランダムに表⽰示する、おみくじアプリの作成を通じて、アプリの開発⽅方法を学びます。


新しいプロジェクトを作成する1.  「ファイル」→「新規作成」→「プロジェクト」を選択します。2.  左ペインで「Monaca」→「Multi-‐‑‒Device Hybrid App」を選択します。3.  プロジェクトの種類として「Create Monaca Project」を選択します。4.  名前に「おみくじ」と⼊入⼒力力して「OK」を押してください。


テンプレートを選択する1.  「Monacaプロジェクトの作成」ダイアログが開いたら、テンプレートを「最⼩小限のプロジェクト」に変更更します。

2.  プロジェクト名に「おみくじ」と⼊入⼒力力します。3.  「作成」ボタンをクリックします。


画像をプロジェクトに追加する

1.  ソリューションエクスプローラーで「www」フォルダを右クリック→「追加」→「新しいフォルダー」を選択します。

2.  新しいフォルダー名に「images」と⼊入⼒力力します。3.  事前準備でダウンロードしたzipファイル内の画像ファイルを全選択し、imagesフォルダにドラッグ＆ドロップします。


HTMLとCSSを追加する

1.  画像ファイルの追加と同様に、style.cssをcssフォルダにドラッグ＆ドロップします。上書き確認のダイアログが表⽰示されますので、「はい」をクリックします。

2.  index.htmlは⼀一度度テキストエディタで開き、内容をコピーしてVisual Studioにペーストします。既存の内容は削除し、すべて上書きしてしまって構いません。


プレビューを確認する

メニュー「MONACA」→「プレビュー」を選択すると、プレビューペインが表⽰示されます。プレビューを使うと、プロジェクトの内容を簡易易的に表⽰示することができます。

おみくじアプリが正常に動作することを確認してみましょう。


実機でデバッグしてみよう


Monacaデバッガーの起動

アプリを起動し、Monacaのアカウントでログインして下さい。「おみくじ」プロジェクトをタップすると、実機でのシミュレートが開始されます。


Monacaデバッガーのメニュー

更更新

プロジェクト⼀一覧に戻る

スクリーンショットを撮る

チャットを開く

ソースコードの表⽰示アプリログの確認


バイブレーション機能を追加しよう


Cordovaプラグインの有効化

1.  メニューの「MONACA」→「Configuration」→「Cordovaプラグインの管理理...」を選択します。

2.  「Cordovaプラグインの管理理」画⾯面が開いたら、リストの下の⽅方にある「Vibration」の有効ボタンをクリックします。


バイブレーションAPIの呼び出し

function omikuji() {…省略…

// 0.5秒間バイブレーションを振動させる navigator.notification.vibrate(500);}

index.html内のomikuji関数の⼀一番下に、⾚赤字のコードを追加しましょう。


スマートフォンで確認する

Monacaデバッガーで、結果が表⽰示されたときに端末が振動することを確認をしてみましょう。


アプリをインストールしてみよう


アイコンを設定する

1.  メニューの「MONACA」→「Configuration」→「Androidアプリ設定」を選択します。

2.  「アイコン」の「アップロード...」ボタンをクリックし、「icon.png」を選択します。

3.  最後に、⼀一番下にある「保存する」ボタンをクリックします。


Androidアプリをビルドする

1.  メニューの「ビルド」→「おみくじのビルド」を選択します。2.  プラットフォームは「Android」を選択します。 3.  「デバッグビルド」を選択し、「次へ」をクリックします。


スマートフォンにインストールする

1.  ビルド成功画⾯面のQRコードを、任意のQRコードリーダーアプリで読み取って下さい。

2.  apkファイルのダウンロードが⾏行行われますので、ダウンロードしたファイルをタップしてインストールを開始して下さい。


スマートフォンで確認する

インストール済のアプリ⼀一覧の中に新しくアイコンが追加されていることを確認しましょう。


https://ja.monaca.io/

実践！クロスプラットフォーム...

Documents