CodeIQ MAGAZINE

GeekGirls池澤あやか部長とアプリ開発の基本を学ぼう！by MA10＜アプリ導入編＞ #MA10

2014.10.16 Category：勉強会・イベント Tag：Firefox ,HTML5 ,MA ,Monaca ,Mozilla ,Windows ,アプリ

MA10より設立されたGeek Girls部に、池澤あやかさんが部長として就任しました。あやか部長と一緒にアプリ開発の基礎を学んで、最終的にはマネタイズができるようになるまでを目指します。

今回はアプリを作って、さまざまなプラットフォームで公開するアプリ導入編！意外と簡単にできるから、みんなも一緒にアプリを作ろう！ by 馬場美由紀（CodeIQ中の人）

アプリ開発に必要な環境構築から公開手順まで体験！

今回池澤あやかさんには、アプリ開発に必要な環境構築から公開するまでの手順について体験してもらいました。

Visial Studio 2013のインストール
Firefox OSのインストール
Monacaのインストール
雛形アプリを使ってアプリを作ってみよう
　-　物江さん作成アプリ
　-　清水さん作成アプリ
Windowsストアアプリ、Windows Phone 8.1アプリでの公開
Firefox OS端末での公開
Monacaを使って、iPhone、Androidでの公開

講師を務めてくれるのは、日本マイクロソフトエバンジェリストの物江修さん、Mozilla Japanの清水智公さん、アシアル株式会社の田中正裕さんです。

▲左から、アシアル株式会社の田中正裕さん、Mozilla Japanの清水智公さん、日本マイクロソフトエバンジェリストの物江修さん

Visial Studio 2013をインストールしてみよう

まずは環境構築に必要な開発ツールを、インストールするところからスタート！

物江：今日は池澤さんにはVisial Studio 2013を使って、Windowsストアアプリ（Windows 8専用のアプリ）やWindows Phone 8.1アプリを公開してもらうところまで、体験してもらいますね。Visial Studioは使ったことがありますか？

池澤：Windows7は昔ノートに入れてました！今は容量オーバーでMacからは削除していて、自宅に安いWindows機を一台持ってます。

▲日本マイクロソフト株式会社　物江修さん。詳細はプロフィールはこちら

物江：なるほど！では、今持っているノートPCに、Visial Studioをインストールするところからやってみましょう。

Visual Studioは、Windowsでしか動作しませんが、Mac上にWindows環境を作る方法から、Visual Studio 2013をインストールするまでをステップバイステップでまとめたドキュメント「MacへのWindowsおよび開発者ツールのインストール」が公開されています。URLはわかりやすく、bit.ly/vs_macです。

さて、開発環境の構築の仕方は前述のドキュメントに書いてありますが、インストールするWindows 8.1が必要です。

Windows 8.1は有償で販売されているものですが、実は無償で使うことのできる方法がいくつかあります。

＜Windowsを無償で使用する3つの方法＞

1)DreamSpark

もし池澤さんが学生だった場合は、DreamSparkという教育期間向けのプログラムがあるのでこれを利用することができます。ただし、Windowsを入手するためには、学校用のプログラムに参加してもらう必要があるので、先生に参加するようにお願いしましょう。

このプログラムに参加すれば、学校専用のダウンロードサイトが作られ、学校の生徒はそこからWindowsをはじめ、さまざまなマイクロソフト製のソフトウェアをダウンロードして、使用することができます。もしかしたら、既にDreamSparkに参加している場合もありますので、学校に確認してみましょう。

2)BizSpark

二つ目は、スタートアップ向けのプログラムのBizSparkに参加する方法です。設立5年未満もしくは法人化を目指している個人事業主/企業家で、非上場が年間売上1億2千万円未満であれば、このプログラムに参加することができます。

このプログラムでは、マイクロソフト製のさまざまな開発製品を、3年間無償でダウンロードして使用できるだけでなく、さまざまな技術支援やトレーニング、ビジネス支援も行われます。

3)Windows 8.1 Enterprise 90日評価版

残念ながら学生でも、スタートアップ企業でもない場合は、Windows 8.1 Enterprise 90日評価版を使用します。

期間制限はあるとはいえ、Windows 8.1のフル機能を使用することができます。期間も約3カ月あるので、試しに使ってみるにはちょうどよいでしょう。

今回はこの場でインストールする必要があるので、Windows 8.1 Enterprise 90日評価版を使用します。

Windows 8.1のインストールイメージをダウンロードしたら、前述の「MacへのWindowsおよび開発者ツールのインストール」の内容に従いインストールを行っていけば、支障なくインストールは完了します。

Visual Studio 2013は、無償版のVisual Studio Express 2013 for Windowsを使用します。

Windows 8.1のダウンロードからVisual Studio Express 2013 for Windowsのインストール完了までは意外と早くて、1時間かからないくらいで完了します。

Firefox OSをインストールしてみよう

続いては、Firefox OSのインストールを清水さんから。

▲Mozilla Japanの清水智公さん。詳細はプロフィールはこちら

清水：Firefox OSは、mozillaのこのページからダウンロードできます。

清水：まずは、このAuroraスタートページを開いてください。

▲Firefox OSスタートページ

清水：右上のメニューバーから、開発ツールをクリックし、WebIDEを選択してください。

▲WebIDE：Firefox 組み込みの開発環境

清水：次に、右上のメニューバーから、Install Simulatorを選んでください。

▲Install Simulatorを選択

清水：今回は、Firefox OS 2.0 Simulator（stable）を選びます。

▲Firefox OS 2.0 Simulator（stable）を選択

池澤：バージョンがいろいろあるんですね。

清水：6週間に1回更新されているんですが、2.0が現在の主流になっています。P2Pでの会話設定も可能なので、ハングアウトもできますよ。

Monacaをダウンロードしてみよう

田中：Monacaは、スマートフォンアプリを作ることに特化した開発ツールです。

▲アシアル株式会社代表取締役社長　田中正裕さん。詳細はプロフィールはこちら

Monacaを使うことのメリットは、環境構築をサーバ上に作ってくれるので、ローカルを汚さないこと。Web上で操作できるので簡単だし、iPhoneのデベロッパー登録をしなくても動かすことができます。

モバイルアプリ開発プラットフォーム「Monaca」

池澤：それって、とても便利ですね！

田中：まずはMonacaの推奨ブラウザ、Chromeでサイトにアクセスしてください。ID・パスワードを入力すればアカウント登録完了です。作りたいアプリの種類が出てきますので、好きなものを選べます。ゲームもありますよ。準備はこれで終わり！

池澤：5分もかかってないですね(笑)。

雛形を使ってアプリを作ってみよう

今回池澤さんに各プラットフォームでのアプリ開発を体験してもらうために、物江さんと清水さんがサンプリアプリを用意してきてくれました。

物江：私は今回2つの雛形アプリを作ってきました。

Windowsストアアプリは、通常、Visual Studio 2013に既定で用意されている「プロジェクトテンプレート」と呼ばれるアプリの雛形使用して開発を行います。ただこれら既定のプロジェクトテンプレートは、開発の自由度が高いため、逆にどのようなアプリを作るかといった点ではあまり具体的でありません。Windowsストアアプリの開発に精通していないと、それなりの開発工数がかかる傾向があります。

そこで、日本マイクロソフトの私が所属していチームでは、開発工数を減らす目的で用途を絞った、オリジナルのプロジェクトテンプレートを用意しています。

これらテンプレートは「Windows 8アプリ開発体験テンプレート」のページからダウンロードすることができます。

今回はこの中からRSS Readerテンプレートとクイズアプリ用テンプレートの使い方を紹介しましょう。

まず、それぞれのテンプレート用ファイルをダウンロードします。exe形式ですが、自己解凍式のファイルですので、怖がらずにダブルクリックして実行し、zipファイルを取り出してください。

このzipファイルは解凍せずにそのままドキュメントフォルダー下の以下のフォルダにコピーします。

ドキュメント\Visual Studio 2012\Templates\ProjectTemplates\JavaScript

これでダウンロードしたテンプレートが使用できるようになりました。

Visual Studio 2013のメニュー [ファイル] – [新規作成] – [プロジェクト] を選択し、[新しいプロジェクト] ダイアログボックスを表示させたら、ダイアログボックス右の開発言語ツリーで「JavaScript」を選択してください。同ダイアログボックス中央のプロジェクトテンプレートのリストに RSSリーダー(RSS_Reader)、3択クイズ (3ChooseQuizApp2)のテンプレートが表示されているはずです。

RSSリーダーテンプレートを使って、「CodeIQ MAGAZINE」のWindowsストアアプリを作ってみましょう。

[新しいプロジェクト] ダイアログボックスで、プロジェクトテンプレートの一覧から RSS_Reader を選択して、[OK] ボタンをクリックします。

これでVisual Studio 2013のIDEにRSSリーダーアプリ用のプロジェクトがロードされました。

画面右にある [プロジェクトエクスプローラー] でjsフォルダ内のファイルdata.jsをダブルクリックして開きます。

data.jsのソースの以下の部分の「//各 RSS の情報」とコメントのある箇所を、

CodeIQ MAGAZINEのRSSのURLを用いて以下のように書き換えます。

 sourceInfo: [{
            url: "https://codeiq.jp/magazine/feed/",
            group: {
                key: "codeiq",
                category: "news",
                title: "CodeIQ MAGAZINE"
            }
        },

次に、既定では2つのRSSを読み込むようになっているのを、CodeIQ MAGAZINEのRSSのみをロードするように、45行目、46行目の以下のコードを

以下のように書き換えます。

以上の設定で、CodeIQ MAGAZINEがRSSで配信している記事だけを、読み込めるようになりました。

キーボードの [F5] キーを押下するか、Visual Studio 2013 のメニュー [デバッグ] - [デバッグ開始] をクリックしてアプリを実行してみましょう。

アプリのリストビューに記事の一覧が表示されます。

画像をクリックすると、記事の内容も表示されます。

共有チャームを使用して、Facebookへの投稿やメールへのコピーなどの共有作業が簡単に行えます。

その他、検索や画面の解像度に合わせたレイアウト設定、オフライン時の処理など、Windows ストアアプリに必要な基本的な機能は自動的に実装されます。なので、開発者はCSSを使用してアプリの外観を整形するだけで、アプリを完成させることができます。

3択クイズアプリのプロジェクトも同様に、プロジェクトのjsフォルダ下のdata.jsを開き、以下のように記述してあるJSONの内容を編集することにより、問題の内容や問題の数を簡単に変更することができます。

「Windows 8アプリ開発体験テンプレート」で提供しているプロジェクトテンプレート内には必ずカスタマイズを行うための手順を示した Readme.txtを含んでいるので、こちらの内容を参考に作業を行ってください。

なお、RSSリーダーテンプレートについては、私のブログに詳しい解説があるのでこれも参考にしてください。

Windowsストアアプリ、Windows Phone 8.1アプリでの公開

Vsual Studio 2013は今年の4 月に行われたUpdate 2(現在は Update 3) によって、WindowsストアアプリとWindows Phone 8.1用のアプリを同時に開発できる Windowsユニバーサルアプリという仕組みが搭載されました。

この仕組みを利用するには、いちからWindowsストアアプリとしてアプリを作成する必要はありません。既にWebブラウザ上で動作しているアプリの移植などにも使用できます。

それでは実際に、Webブラウザ上で動作しているゲームを移植してみましょう。このゲームはHTML5のゲームエンジンであるenchant.jsを使用して、作成したものです。

このゲームの移植先となるアプリのプロジェクトを作成しましょう。

Visual Studio 2013 のメニュー[ファイル] - [新規作成] - [プロジェクト] を選択し、[新しいプロジェクト] ダイアログボックスを表示します。

同ダイアログボックスの左部分の開発言語のツリーを [JavaScript] - [ストアアプリ] - [ユニバーサルアプリ] と展開し、ダイアログボックス中央のテンプレートの一覧から [空のアプリケーション (ユニバーサルアプリ)] を選択し [OK] ボタンをクリックします。

生成されるソリューションは Windows 8.1用とWindows Phone 8.1用、そしてこの2つのプロジェクトから使用される共有プロジェクト (「プロジェクト名.shared」)の3つのプロジェクトを含んでいます。

例えば、作成するアプリの画面構成や画面の遷移が、PC/タブレット・スマートフォンで共通であり、表示内容の大きさだけが異なる場合は、共有プロジェクトにHTMLとJavaScriptファイルを配置します。Windows 8.1 用とWindows Phone 8.1用のプロジェクトには、それぞれの画面サイズに合わせて、異なるCSSファイルを配置しておけば、それぞれ差分を開発することで、PC/タブレットとスマートフォン用のアプリを同時に開発することができます。

ちなみにこれから移植するゲームは、CSSに画面の大きさに合わせて表示のサイズを変更するレスポンシブな機能を入れてあるためCSSを別ける必要もありません。

では実際に移植してみましょう。

Windowsエクスプローラーで、ゲームのソースファイルのあるフォルダを開きます。

次に、一番最初に読み込まれるファイル (この場合は default.html) 以外を選択して、Visual Studio の [ソリューションエクスプローラー] 内の共有プロジェクトのプロジェクト名の上にドラッグ＆ドロップします。

「このフォルダには、フォルダ'js' が既に含まれています」とメッセージが出ますが、すべて [はい] ボタンをクリックします。[プロジェクトエクスプローラー] の共有プロジェクトにドラッグ & ドロップされたすべてのフォルダとファイルがコピーされます。

最後にWindows 8.1用とWindows Phone 8.1用プロジェクトに含まれている、それぞれのdefault.htmlのheadタグとbodyタグの内容に、ソリューションエクスプローラにコピーしなかった、もともとのゲームの一番最初に読み込まれるファイル (この場合はdefault.html)のheadタグとbodyタグの内容を追加します。

以上、で移植は完了です。キーボードの[F5]キーを押下してプロジェクトをデバッグ実行してみましょう。既定ではWindowsストアアプリのプロジェクトが実行されます。

Windows Phone 8.1のプロジェクトをデバッグ実行させるには、 [プロジェクトエクスプローラー]内で、Windows Phone 8.1 用のプロジェクト名の上で右クリックし、表示されたコンテキストメニューより [スタートアッププロジェクトに設定] を選択します。

すると、ツールバー上のデバッグ実行開始ボタンで、Windows Phone シミュレーターが指定できるようになるので、任意のものを選んで実行します。

なお、Windows Phone 8.1のシミュレータはHyper-Vの機能を使用するため、Windows Homeエディションでは動作しませんので、注意が必要です。その場合もし、アンロックしたWindows Phone 8.1の実機があれば、そちらに転送して実行してみることができます。

以上で、Webブラウザ上で動作しているアプリのWindowsストアアプリとWindows Phone 8.1アプリへの移植は完了です。

Webブラウザ上できちんと動作しているものであれば、移植はとても簡単です。

Firefox OS端末でアプリを公開してみよう

清水：私が用意してきた雛形アプリは、以下の2種類です。

光センサーでテルミンを鳴らすアプリ「tel.min」→雛形をダウンロード
メモアプリ「sample-memo-app」→雛形をダウンロード

清水：光センサーで音を出すアプリは、輝度値を使って画面の明るさを変えることもできるし、音階を変えることもできます。

いらない機能ははずしたり、文章代えたりすると、別のアプリにできますよ。彼氏とのデート記録アプリを作った人もいました(笑)。

池澤：ここは保存するためには何を使っているんですか？

清水：データの保存には、ライブラリを使っていますが、内部的にはindex.dbを使っています。ローカルにデータを保存できて、しかも読み込みも簡単。あとこのライブラリは、とても便利なんですよ。HTML5にいくつかあるデータの保存方法に優先順位をつけて、どれを使うかを選べるんです。

データは保存したいデータに名前を付けて、localforage.setItemという関数を呼ぶと保存されます。3つパラメータがあって、1つ目が名前、2つ目がデータ、3つ目が保存が完了したときに実行してほしい関数です。データを読むのはlocalforage.getItemでできますよ。

池澤：写真アプリはcanvasを使ってます？

清水：写真の撮り方がちょっと特殊なんです。直接カメラを操作して写真を撮るのではなくて、カメラアプリを起動して、それに写真を撮ってもらいます。プログラムでは、撮った写真を処理をしてるんです。具体的にcanvasに一回写真を書き出して、表示した上で、改めて画像データとして保存しています。こんな感じで、他のアプリにお仕事をお願いする機能がFirefox OSにはあるんです。

池澤：どんな実装をしているんですか？

清水：MozActivityというオブジェクトを作ることで、他のアプリの機能を呼び出せます。オブジェクトを作る際に、利用したい機能の名前と、欲しいデータの種類を指定することで、どんなアプリにどんな仕事をさせたいのかを、大まかに指定できます。

例えば写真をTwitterに貼るときに、写真を撮るのか、ギャラリーにあるものを使うのかは、その時々によって違いますよね？そういう感じで、具体的に仕事をさせるアプリはユーザーに選んでもらおう、という考えなので、大まかにしか指定できないようになっています。

池澤：なるほど！理解できました。

清水：では、これをFirefox OSのシミュレータに登録しましょう。雛形アプリのアプリマニフェスト、manifest.appというファイルを編集して、アプリのバージョンと名前を書き換えましょう。このファイルはインストールしたときに表示するアイコンや、アプリの名前なんかが書かれているものです。今回、一番大事なのはローンチパス。これ書かないと、起動するときに、どのHTMLファイルを開いていいのか分からなくなっちゃいます。

清水：次に、実際にアプリを読み込んでみましょうか。まず、上記の「雛形をダウンロード」からzipファイルをダウンロードし、zipを展開します。次に、WebIDEの「Open App」からGalleryをクリックします。

Galleryから「music」を選びます。

「Open Packaged App」を選んで、ファイルをアップロードします。

「manifest.webapp」があるフォルダを開きます。

「Firefox OS 2.0」が選ばれていることを確認してください。▶︎を押すとコードランタイムでアプリが動き、テルミンが鳴ります。

清水：スタイルエディタでマージンなどの値も調整できます。ちなみに池澤さんは普段何のエディタを使ってます？

池澤：Sublime Textです。

清水：11月からFireFoxのエディタが選べる機能がリリースするので、好きなエディタで書くことができますよ。

池澤：それはうれしい！それにしても簡単ですね。

Monacaを使って、iPhone、Androidで公開してみよう

田中：Monacaデバッガーを起動させて、iPhone、Android用のアプリを作ってみましょう。

Monacaにログインすると、下記のようなダッシュボードが表示されます。ここでは、アプリ一覧が並んでいます。早速「プロジェクトの作成」から、アプリを作ってみましょう。

テンプレート（アプリのひな形）の一覧が表示されるので、2段目にある「ブロック崩し」を選択してください。

あとはお好きな名前を入力したら、作成は完了です。

これでアプリはクラウド上に作られました。それでは、今作成したプロジェクトの右にある「開く」をクリックして、Web IDEを開いてみてください。

Monacaデバッガーをインストールしよう

Monaca IDEが開くと、いわゆるDreamweaverやEclipseのような画面になります。

Monacaの最大の特徴は、「Monacaデバッガー」というアプリを端末上にインストールするだけで、簡単にアプリを動かしてみることができる点です。IDE初回起動時に手順が表示されますので、その内容に従い、App StoreかGoogle Playストアから[Monacaデバッガーをダウンロード]してください。

早速、デバッガーにログインして、今作成したプロジェクトを実行してみましょう。

池澤：動きました！

アプリに修正を加えてみよう

実はMonacaデバッガーは、Web IDEを変更するたびに、ただちにその内容が反映されます。試しに、IDEから、jsディレクトリにあるmain.jsに手を加えてみましょう。

具体的には、45行目辺りにあるblockMapという部分にブロックの並び順が定義されていますので、ここを変更してみます。

var blockMap = [
     [null,      null,       null,       null,       null,       'blue',     null,       null,       null,       null],
     [null,      null,       null,       null,       'red',      'red',      'blue',     null,       null,       null],
     [null,      null,       null,       'red',      'red',      null,       null,       'blue',     null,       null],
     [null,      null,       'red',      'red',       null,       null,       null,       'silver',   'silver',   null],    
     [null,      null,       'red',      'red',       null,       null,       null,       'silver',   'silver',   null],    
     ['red',     'blue',     'red',      'blue',      'red',      'blue',     'red',      'blue'  ,   'red'   ,   'blue' , 'red'],    
     ['red',     'blue',     'red',      'blue',      'red',      'blue',     'red',      'blue'  ,   'red'   ,   'blue' , 'red'],    
     ['red',     'blue',     'red',      'blue',      'red',      'blue',     'red',      'blue'  ,   'red'   ,   'blue' , 'red'],    
     ['red',     'blue',     'red',      'blue',      'red',      'blue',     'red',      'blue'  ,   'red'   ,   'blue' , 'red'],    
     ['red',     'blue',     'red',      'blue',      'red',      'blue',     'red',      'blue'  ,   'red'   ,   'blue' , 'red'],    
     ['red',     'blue',     'red',      'blue',      'red',      'blue',     'red',      'blue'  ,   'red'   ,   'blue' , 'red'],    
     ['red',     'blue',     'red',      'blue',      'red',      'blue',     'red',      'blue'  ,   'red'   ,   'blue' , 'red'],    
     ['red',     'blue',     'red',      'blue',      'red',      'blue',     'red',      'blue'  ,   'red'   ,   'blue' , 'red'],    
     ['red',     'blue',     'red',      'blue',      'red',      'blue',     'red',      'blue'  ,   'red'   ,   'blue' , 'red'],    
     ['red',     'blue',     'red',      'blue',      'red',      'blue',     'red',      'blue'  ,   'red'   ,   'blue' , 'red'],    
     ['red',     'blue',     'red',      'blue',      'red',      'blue',     'red',      'blue'  ,   'red'   ,   'blue' , 'red'],    
     ['red',     'blue',     'red',      'blue',      'red',      'blue',     'red',      'blue'  ,   'red'   ,   'blue' , 'red'],    
     ['red',     'blue',     'red',      'blue',      'red',      'blue',     'red',      'blue'  ,   'red'   ,   'blue' , 'red'],    
     ['red',     'blue',     'red',      'blue',      'red',      'blue',     'red',      'blue'  ,   'red'   ,   'blue' , 'red'],    
     ['red',     'blue',     'red',      'blue',      'red',      'blue',     'red',      'blue'  ,   'red'   ,   'blue' , 'red'],    
     ['red',     'blue',     'red',      'blue',      'red',      'blue',     'red',      'blue'  ,   'red'   ,   'blue' , 'red'],    
     ['red',     'blue',     'red',      'blue',      'red',      'blue',     'red',      'blue'  ,   'red'   ,   'blue' , 'red'],    
     ['red',     'blue',     'red',      'blue',      'red',      'blue',     'red',      'blue'  ,   'red'   ,   'blue' , 'red'],    
     [null,      null,       'red',      'red',       null,       null,       null,       'silver',   'silver',   null],    
     [null,      null,       'red',      'red',       null,       null,       null,       'silver',   'silver',   null],    
     [null,      null,       'red',      'red',       null,       null,       null,       'silver',   'silver',   null],    
     [null,      null,       null,       null,       'silver',   'silver',   'silver',   null,       null,       null],
     [null,      null,       null,       null,       null,       'silver',   null,       null,       null,       null]
        ];

田中：変更を保存したらデバッガーに反映されました！これをライブリロードというのですが、このようにしてサクサクと開発を進めていくことができます。