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