CordovaでAndroidアプリを作成してみる
アーカイブ
2016/01/15
こんにちは！
ipoca開発チームの育です！！
今回我々は、忘年会で”CordovaでAndroidアプリ”を作成しました！
こちらの方を紹介させていただきます。
【契機】
会社の忘年会で何か盛り上がるものがあるかを開発チームの皆さんが議論して、 社内イベント用のアプリを作ろうとのことで今回のアプリを作成しました。
【目的】
なぜCordovaでアプリを作るの？ 私的には下記の目的があります。
普段はネイティブアプリを作成しているから、他の方法でAndroidアプリも作成してみたい
世の中にはJavascriptのライブラリがたくさんあって、その中に面白いものを使ってみたい
最近流行っているMaterial Designを触りたくて、Material Design Liteを使ってHTMLを作ってみたい
【アプリの概要】
抽選ゲーム 忘年会で抽選ゲームを行うため、ゲームと連携する機能が必要になります。 連携する内容は抽選の番号を忘年会の参加者に配分することです。 具体的には、サーバーと通知して、ゲーム用の特定番号を取得して端末に保存する。 また、アプリの画面にも番号を表示する。
社長ページ 特に表現の決めはないですが、とりあえず社長はミッションを語る画面を作成してもいいじゃないかと思いました。 このページでは昔に見たJSのオーペンソースを利用し、面白いシーンを作成してみました。 うちの中本先生も「これはいい！」って言ってくれましたね。
イベントの写真 過去のイベント写真を展示できる画面もあればいいと思いますので、 アプリにもその画面を入れてみました。
【作成過程】
まずは、開発環境を紹介します。
PC：Windows8
IDE：Intel XDK (HTML5 → アプリに変換できるIDEです。)
ライブラリ：bootstrapとJQuery以外、下記の二つも使いました。
material-design-lite：https://github.com/google/material-design-lite
MessageViewJS：https://github.com/webcyou/MessageViewJS
material-design
material-design-liteのサンプルを参照して、図①のように画面を作成しました。
HTMLの構成はこんな感じです。画像については、CSSに画像パスを設定しています。 タブをクリックすると各タブの内容を表示できます。 タブ内容の設定については、各IDの中身に追加すればOKです。 例えば、ミッションタブの内容を設定したい場合には、
<div class=”mdl-layout__tab-panel is-active” id=”mission”>
<!– mission –>
</div>
<!– mission –>の部分に、表示したい内容を追加します。 他のイベント、写真のタブ内容も同じく設定できます。
<body class=”mdl-demo mdl-color–grey-100 mdl-color-text–grey-700 mdl-base”>
<div class=”mdl-layout mdl-js-layout mdl-layout–fixed-header”>
<header class=”mdl-layout__header mdl-layout__header–scroll mdl-color–primary”>
<div class=”ipoca_title”>
<div class=”mdl-layout__header-row”>
<h3 style=”font-weight: bold;”>ipoca</h3>
</div>
</div>
<div class=”mdl-layout__tab-bar mdl-js-ripple-effect mdl-color–primary-dark”>
<a href=”#mission” class=”mdl-layout__tab is-active”>ミッション</a>
<a href=”#event” class=”mdl-layout__tab”>イベント</a>
<a href=”#photo” class=”mdl-layout__tab”>写真</a>
</div>
</header>
<main class=”mdl-layout__content”>
<div class=”mdl-layout__tab-panel is-active” id=”mission”>
<!– mission –>
</div>
<div class=”mdl-layout__tab-panel” id=”event”>
<!– Event –>
</div>
<div class=”mdl-layout__tab-panel” id=”photo”>
<!– Photo –>
</div>
</main>
</div>
</body>
MessageViewJS
今回で使ってみたかったライブラリです。 Githubのデモを参照してください。https://github.com/webcyou/MessageViewJS これを使えば、簡単にアニメ風なシーンを作れます！ 社長ページの部分にはこれでいきましょう！
先ほどのHTMLの中に<!– mission –>の部分に下記のコードを埋め込みました。
<section id=”top” class=”top”>
<div class=”messageView” id=”default”>
<div class=”mv-contents”>
<p class=”mv-name”></p>
<div class=”mv-comment”>
<p class=”val”></p>
<p class=”pointer”></p>
</div>
<p class=”mv-image character”><img src=”” alt=””/></p>
</div>
</div><!– /.messageView –>
</section>
それでmessageViewを作成しましたが、会話内容はまだ未設定です。 会話内容を設定するため、message.jsファイルを作成します。 中身はこんな感じです。
document.addEventListener(“DOMContentLoaded”, function() {
var message = new MessageViewer({
“data”: [{
“side_class”: “right”,
“name”: “イポカ代表”,
“message”:”皆さん、こんばんは。一之瀬です！<br>ここでイポカ社のミッションについて、説明します。”,
“img_url”: “./assets/shachou.png”
},{
“side_class”:”left”,
“name”:”ニアリ”,
“message”:”いいですね。 教えてください。”,
“img_url”: “./assets/nearly.png”
},{
“side_class”: “right”,
“name”: “イポカ代表”,
“message”:”よし、私たちは「店舗でのお買い物に情報革命を起こし人々の笑顔を増やす」というミッションのもと「NEARLY」のサービス開発にいそしんでいます。”,
“img_url”: “./assets/shachou.png”
},{
“side_class”:”left”,
“name”:”ニアリ”,
“message”:”え～～ 僕はその目的で開発されたの？”,
“img_url”: “./assets/nearly.png”
},{
“side_class”: “right”,
“name”: “イポカ代表”,
“message”:”そうです。「NEARLY」で身の回りのリアルなお店で売っている商品やサービスの情報がいつでも、どこでもわかる世界（マーケットプレイス）を創ろうとしています。”,
“img_url”: “./assets/shachou.png”
},{
“side_class”:”left”,
“name”:”ニアリ”,
“message”:”なるほどね。”,
“img_url”: “./assets/nearly.png”
},{
“side_class”: “right”,
“name”: “イポカ代表”,
“message”:”「そんなこと、今まで誰も実現できなかったことだし、無理だろう。」「でも、もしもそんなことが叶ったら、街へ出るのが、買物が、もっと楽しくなるだろうな。」”,
“img_url”: “./assets/shachou.png”
},{
“message”:”そう思ったあなた、それを実現するのは、もしかしたらあなたかもしれません。誰もやってこなかったことにこそ、大きな可能性があると私たちは考えます。”
},{
“message”:”新しい価値を創りだし、世の中に貢献する。そして、その活動を通じてipocaで働く全員が成長し、それぞれがなりたい自分になっていくことを目指したいと思っています。”
},{
“side_class”:”left”,
“name”:”ニアリ”,
“message”:”凄いです。よくわかりました。ご説明ありがとうございます。”,
“img_url”: “./assets/nearly.png”
},{
“side_class”: “right”,
“name”: “イポカ代表”,
“message”:”＾＾長い話してしまいましたね。さあ、忘年会を楽しんでやりましょう！”,
“img_url”: “./assets/shachou.png”
}],
“option”: {
“loop”: true
}
});
}, false);
それでアニメ風なシーンを作成出来ました。 画面にはbootstrapを使いますので、ご注意くださいね。
【イベントの写真＆番号の配分】
具体的なやり方はサーバーと通信して、写真URLや番号を取得して表示することです。 ajaxを使って通信処理を行い、データーを取って、HTMLの内容を作成する形でやりました。
【成果】
二日間で作ったアプリはこんな感じです。
【感想】
初めてCordovaを触ってみました。Javascriptでスマホアプリを作成できて本当に楽しいです。 それに二日間かけて出来上がったアプリで忘年会の雰囲気が盛り上がって、達成感も満載です。 最後に、作成過程に気になることをまとめてみました。 Cordovaでアプリを作成することへの興味がある方にシェアします。
ブラウザのデバイスモードでも実機上のレイアウトが少し違う場合がありますので、 実機で確認した方が良いと思います。
APKのサイズは思ったより大きいです。 ビルドする際にCrosswalk for Androidを選択してAPKを作成しましたが、かなり簡易なアプリなので、 サイズは20MB以上超えてしまいました。 ネットで調べるとCrosswalk for AndroidでAPKを作成するメリットは、 デフォルトAndroid WebViewがサポートしていないHTML5の機能が使えるようになることです。 例えば、WebGL, WebRTC, IndexedDB, Web Sockets, CSS3等。 そのため、サイズが大きくなります。
Android API >=14の端末に対応します。 (Android 4.0以下の端末をテストしていませんので、実行できることを保証できません。)
最後にエンジニアやデザイナーさん、一度弊社に訪れてみてください！
https://www.wantedly.com/companies/ipoca/projects