第1回講演会
こんにちは、中田です。ブログ初エントリーです。皆さん、Cutting Board Project第1回講演会(2017/2/22)に参加してくださりありがとうございます。講演会のメインであるワークショップ「たった30分で完成！Monacaで開発するスマホアプリ」で紹介する開発手順をご案内します。
■テザリング
始めにスマホのテザリング設定を有効にし、ノートパソコンをインターネットに接続してください。スマホのキャリアや機種によって用語が若干異なりますが、以下を参考にして設定してください。
android.f-tools.net
■Monacaアカウントの作成
次にMonacaのサイトで開発用アカウントを作成してください（無料）。
ja.monaca.io
MonacaアカウントはGitHubアカウントと連携可能なので、ここではGitHubアカウントを作成・連携する手順を載せておきます。まず、[Sign Up With GitHub]を選びます。
GitHubのユーザー名、e-mail、パスワードを登録します。携帯キャリアのアドレスは迷惑メールフィルターがかかってしまうため、Gmailで登録することをお勧めします。
[Unlimited public repositories for free]を選択します。
e-mailが送信されるのでメールに書かれている確認用URLを開きます。
MonacaのOAuth確認が表示されるので[Authorize application]をクリックします。
■ダッシュボードからプロジェクトを作成
Monaca Cloud IDEはクラウド上に用意されたアプリケーション開発環境で、ブラウザーさえあればセットアップなしでいきなり開発を始めることができます。Monaca Cloud IDEのダッシュボードにログインし、[新規プロジェクトの作成]をクリックします。
プロジェクトのテンプレートとして[Angular 1 OnsenUI] - [Onsen UI V2 Angular 1 Minimum]を選択します。
今回のワークショップではお寿司のアプリを開発しますのでプロジェクト名は「Sushi1」とし、[Make Project]をクリックしてください。
プロジェクトが作成されました。index.htmlの中を見てみるとテンプレートはどうやらHello, World!と表示するアプリになっているようです。まずはこのままアプリをスマホ上のMonaca Debuggerから実行してみましょう。
■Monaca Debuggerのインストール
Monaca Debuggerは開発中のMonacaアプリをスマホ上で実行するためのデバッグ用アプリケーションです。
Androidの方はGoogle Playから、iOSの方はApp Storeから「Monaca Debugger」をインストールしてください。
インストールできたらMonaca Debuggerにログインしてください。
ログインすると、先ほど作成したSushi1がリストに表示されていますので選択します。
先ほどMonaca Cloud IDE上で作成したSushi1プロジェクトがスマホ上で実行されました。
■Sushi1のコードを書き換える
実行結果がHello, World!のままではつまらないので、Sushi1の名にふさわしいアプリケーションとなるようアプリを変えていきましょう。再びMonaca Cloud IDEへ戻ってください。まず、今回のコードではjQueryを使用するので、jQueryをSushi1プロジェクトで利用できるようメニューからjQueryコンポーネントの追加を行ってください。[ファイル] - [JS/CSSコンポーネントの追加と削除...]を選び、
[jQuery (Monaca Version)]を追加、インストールしてください。
次にコードを書き換えましょう。index.htmlを開いてください。開いたらindex.html全体を以下のコードに置き換えてください（コピー＆ペーストしてください）。書き換えたらコードをCtrl+Sまたはメニューから保存してください。
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <script src="lib/angular/angular.min.js"></script> <script src="lib/onsenui/js/onsenui.min.js"></script> <script src="lib/onsenui/js/angular-onsenui.min.js"></script> <script src="components/monaca-jquery/jquery.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> <link rel="stylesheet" href="css/style.css"> <script> var app = angular.module('myApp', ['onsen']); app.controller("SushiController", function($scope) { ons.ready(function() { console.log("Onsen UI is ready!"); $scope.$apply(function(){ $scope.neta = "カンパチ"; }); $scope.search = function(){ $scope.failed = false; $scope.searching = true; var appkey = "42cb4d20c273649a3e6f256ab8019db9"; var keyword = $scope.neta + "%20sushi"; var flickr = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=" + appkey + "&text=" + keyword + "&format=json"; $.ajax({ url: flickr, dataType: "jsonp", jsonpCallback: 'jsonFlickrApi', success: function(js){ $scope.$apply(function(){ $scope.photos = js.photos; $scope.failed = false; $scope.searching = false; }); }, error: function(error){ $scope.$apply(function(){ $scope.failed = true; $scope.searching = false; }); } }); } }); }); </script> </head> <body> <ons-page ng-controller="SushiController as sushi"> <ons-toolbar> <div class="center">Sushi1</div> </ons-toolbar> <div class="center" style="margin:10px;"> <p>あなたの好きなお寿司はなんですか？</p> <p> <ons-input ng-model="neta" placeholder="寿司ネタ" modifier="underbar" float> </ons-input> </p> <p> <ons-button modifier="large--cta" ng-click="search()" ng-disabled="neta.length==0 || searching"> <span ng-if="!searching">検索</span> <ons-icon ng-if="searching" icon='ion-load-d' size="30px" spin></ons-icon> </ons-button> </p> <p> <ons-list-item ng-show="failed"> Flickr APIが反応しません。 </ons-list-item> <ons-list-item ng-show="photos.photo.length==0"> 見つかりません。 </ons-list-item> </p> <ons-list ng-repeat="p in photos.photo"> <ons-list-item ng-click="" tappable> <ons-row> <ons-col> <img width="100%" alt="{{p.title}}" ng-src="https://farm{{p.farm-id}}.staticflickr.com/{{p.server-id}}/{{p.id}}_{{p.secret}}.jpg"> <span class="list__item__title"> {{p.title}} </span> </ons-col> </ons-row> </ons-list> </div> </ons-page> </body> </html>
こちらが書きかえた後のSushi1の実行結果です。
入力された寿司ネタをキーワードに、Flickr Image Search APIを使って画像を取得して表示します。Cordova、Onsen UI、AngularJS、jQueryといったフレームワークを利用することによってこのようなアプリが簡単に開発できるようになっています。何より、ブラウザー上で作ってすぐに動作を確認することができるMonacaの開発環境は本当によくできており、素晴らしいと思います。皆さんもぜひご自分で作りたいものを見つけ、作ってみてください。
