デブサミ2015「実践！クロスプラットフォームモバイルアプリ開発」

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」→「Conﬁguration」→「Cordova
プラグインの管理理...」を選択します。
2.  「Cordovaプラグインの管理理」画⾯面が開いたら、リストの下
の⽅方にある「Vibration」の有効ボタンをクリックします。

バイブレーションAPIの呼び出し
function omikuji() {
…
省略
…
// 0.5秒間バイブレーションを振動させる
navigator.notification.vibrate(500);
}
index.html内のomikuji関数の⼀一番下に、⾚赤字のコードを追加し
ましょう。

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

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

アイコンを設定する
1.  メニューの「MONACA」→「Conﬁguration」→「Androidア
プリ設定」を選択します。
2.  「アイコン」の「アップロード...」ボタンをクリックし、
「icon.png」を選択します。
3.  最後に、⼀一番下にある「保存する」ボタンをクリックします。

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

スマートフォンにインストールする
1.  ビルド成功画⾯面のQRコードを、任意のQRコードリーダーア
プリで読み取って下さい。
2.  apkファイルのダウンロードが⾏行行われますので、ダウンロー
ドしたファイルをタップしてインストールを開始して下さい。

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

https://ja.monaca.io/

デブサミ2015「実践！クロスプラットフォーム モバイルアプリ開発」

More Related Content

What's hot

Similar to デブサミ2015「実践！クロスプラットフォーム モバイルアプリ開発」

More from アシアル株式会社