Help us understand the problem. What is going on with this article?

とりあえずアプリ作ってみたーい!という方へ♥PhoneGap/CordovaでHTMLを超絶簡単にアプリにする

More than 1 year has passed since last update.

Ateam Hikkoshi Samurai Inc. Advent Calendar 2017 23日目です。
本日はエイチーム引越し侍のフロントエンドグループ唯一の女子(笑)@nezurikaが担当します。
最近突然、乃木坂46にハマりました。推しメンはまだいない。

インスタグラマーに憧れる私は、今年に入ってから社内勉強会用にInstagramの模写のようなものを進めてきました。
まずはHTMLとCSSで見た目を再現してちょっとした動きをつけたり、画像をアップロードしてInstagramのフィルターをCSSで真似してみたり、検索機能をAPI取得して真似してみたり。

でも所詮スマホのブラウザで見るWebサイト…。自分の作ったものをアプリにしてみたい…。

ということで、PhoneGap/Cordovaを使って超絶簡単に自分の作ったWeb用ページをアプリにしてみたのでその方法をまとめたいと思います。

※PhoneGap/Corvovaアプリがリジェクトされるとザワザワしたみたいですが、嘘らしいよとの記事があったのでホッとしながら書いてます。
https://qiita.com/rdlabo/items/deb5fe88b80d2737799f

こんな人におすすめ

  • Javascriptそんなに得意じゃない
  • React…Angular…Vue…こわい…
  • 見た目はつくった!作ったから簡単にアプリに変換させて!
  • よくわかんないけどアプリ作りたい

個人的には、デザイナーさんにおすすめしたい。

もくじ

PhoneGap/Cordovaとは?

HTML・CSS・Javascriptでアプリを簡単に開発できる便利なフレームワークです。
いい感じに説明しようと思ったのですがうまく書けなかったのでCordovaのWikiを引用します。

Apache Cordova(アパッチ・コルドバ)は、オープンソース(Apache 2.0 License)のモバイルアプリケーション開発フレームワーク。
ニトビ・ソフトウエア社によってPhonegap(フォンギャップ)として開発が始められ、その後アドビシステムズがニトビ・ソフトウェア社を買収したことによりPhoneGapはAdobeのプロダクトとなったが、そのソースコードがApache CordovaとしてApacheソフトウェア財団に寄贈され、コミュニティによってメンテナンスされている。

引用: https://ja.wikipedia.org/wiki/Apache_Cordova

です。Adobeのプロダクトなんですねー。デザイナーにとっては親近感のあるAdobe。

それでは早速、環境の準備に入りたいと思います。

PCに開発環境を準備する

公式サイト( https://phonegap.com/ )にフローが載っているので、これにそって進めていきたいと思います。
PC上にPhoneGapの開発環境を準備するには2つ方法があります。

デスクトップアプリをDLする

https://phonegap.com/getstarted/
MacとWin8.1以上の方は上記ページからDLできます。
インストール手順はこのあたりに載っているので参考にしてください。
http://docs.phonegap.com/getting-started/1-install-phonegap/desktop/

npmインストールする

ターミナルなどの黒い画面で、好きなフォルダに移動して

npm install -g phonegap

と打つとインストールされます。超簡単!(Winの方はnode.jsをインストールしておいてください!)

スマホのデバッグ用にアプリをDLする

同じネットワーク環境下だとPCで開発しているものをリアルタイムでスマホで確認することができます。
方法についてはまたのちほど説明します。
各アプリへのリンクはこちら

これで準備はOKです。それでは実際にアプリにしたいものを作っていきたいと思います。

プロジェクトを作成する

デスクトップアプリの場合

デスクトップアプリはとても簡単です!
Macでしか見れていませんが、おそらくWinも同じようなフロー・画面だと思います。

左上の「Create new app project」をクリックで新しいプロジェクトを作成できます。

01.png

そのあとテンプレート選択画面になるので、好きなものを選択します。
「Hello World」がデフォルトなので、大体それにチェックでOKだと思います。

02.png

最後にプロジェクトの情報を指定します。
03.png

プロジェクトを作成したいフォルダのパスを指定、名前を入力して作成は終わりです。

こんなかんじになります!
04.png

簡単!!!!!!

コマンドで作成する場合

プロジェクトを作成したいフォルダで

phonegap create すきな名前

でOKです!びっくりするぐらい簡単!!!!
コマンドでもテンプレート等を指定することができます。
詳細はこちらのページに載っているので参考にしてください。
http://docs.phonegap.com/references/phonegap-cli/create/

また、オプションなどは生成したあとにもconfig.xmlで設定することができます。

HTML/CSS/Javascriptで見た目を作っていく

さて、ようやく環境が整ったのでここから見える部分の制作です。

プロジェクトを作成すると、/www/というフォルダが生成されていると思います。
その中のindex.htmlを編集することで、アプリの見た目部分が変更されます。

CSSやJSもwww配下に置いて、普通にWebサイトを制作するように読み込ませるだけでOKです!

つまり、自分が作ったHTMLファイルがあれば、このwww配下に置くだけでアプリとして見ることができるのです。
簡単!!!!!!!!!!!!

ただ一つここで注意点があります。

最初に生成したHTMLファイルに記述されている

<script type="text/javascript" src="cordova.js"></script>

こちらのjsファイルは消してはだめです。
これを読み込んでおかないと、cordovaの提供している機能を使うことができません。
後ほど紹介しますが、たくさん便利な機能があるので読み込んでおきましょう!

デバッグツールで確認をする

実際どのように表示がされるのかを確認してみましょう。
検証用にIPとポート番号が表示されるので、それを使って動作確認をすることが出来ます。

デスクトップアプリの場合

04.png

この一番下に載っている「http://~」の部分をブラウザのURLに入れる、スマホのアプリで確認する場合は数字の部分を入れればOKです!
IPとポート番号は自分の場合なにが出ているのか確認してから入れてくださいね!

コマンドを利用する場合

phonegap serve

このコマンドを叩くだけでOK!!!相変わらず簡単ですね。
少し待つと

listening on 192.168.10.101:3000

というようにIPとポート番号が表示されます。
スマホのアプリで確認するときですが、同じネットワークで繋げている端末しか見ることができないので注意してくださいね。
アプリを起動して、こんな感じに入力してconnectを押すと画面を確認することができます。

Screenshot_20171223-081901.png

phonegap serveのうしろにオプションをつけることができますが、
autoreload(ファイルを保存したら自動でリロードする)などはデフォルトでtrueなので大体上のコマンドだけで大丈夫です。

オプションはこちらに載ってます。
http://docs.phonegap.com/references/phonegap-cli/serve/

いろんな機能をいれてみる

Cordovaには、アプリによく使われているような機能のプラグインがたくさんあります。
http://ja.docs.phonegap.com/references/plugin-apis/

利用したい場合は、各プラグインのREADMEにも書いてありますが、コマンドを叩いてインストールすることができます。

phonegap plugin add プラグイン名

プラグインについては、npmのサイトで「cordova」と検索するとたくさんでてきます。
https://www.npmjs.com/

cordovaのサイトにもたくさん載ってます。
https://cordova.apache.org/plugins/

ちなみに、インストール済みプラグインはconfig.xmlで確認することができます!

機能を利用してつくった事例

今回わたしの場合は、画像選択のためにカメラアイコンをタップしたらアルバムを起動させたかったので、このような記述を追加しました。
jQuery使っているのは大目にみてください。

$(function(){
  document.addEventListener('deviceready', onDeviceReady, false);
  function onDeviceReady(){
    $(".js-camera").on('click', function(){
      // アルバムから写真選択(getPicture)
      navigator.camera.getPicture(function(imageData){
        // 成功したときの処理
        $("#js-selected-photo").attr('src', 'data:image/png;base64,' + imageData);
      }, function(message){
        // 失敗したときの処理
        alert("だめだったよ");
      }, {
        // オプション
        quality: 50,
        destinationType: Camera.DestinationType.DATA_URL, // canvasに変換するためfileURIじゃなくてbase64の文字列で渡すようにする
        sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM, // アルバムから取得
        correctOrientation: true, // 撮影時と同じ向きに写真を回転
      });
    });
  }
});

アルバムからではなくカメラから取得したい場合はオプションの部分を変更すればOKです。
簡単にカメラ機能がつかえる!!!

このように、スマホの機能を使ったアプリを作りたい場合は、たくさんネット上にあるプラグインを利用して使いたい機能を入れることができます。

アプリをビルドする

Web上で確認してアプリの中身ができたぞーー!となったら、アプリをビルドしてみましょう!
実は、Adobe Creative Cloudのアカウントを持っている方はAdobeのサイトでちょちょっとやるだけで作れます。

https://build.phonegap.com/

こちらのサイトにCreative Cloudのアカウントでログインします。

ちなみに私の画面はこのようになっています。

image.png

塗りつぶしが多くてすみません…。
右上の「new app」をクリックすると、作ったソースをアップロードする画面になります。
githubにソースを上げていればそのリポジトリを直接指定することができます。
githubにあげていない場合は、zipファイルをアップロードすることもできます。

アップロードするとこんな画面になります。

image.png

右下の「Ready to buid」をクリックで各プラットフォーム別にアプリがビルドされます!

わーーーーい簡単!!!!!

ビルドすると、一つ上に載せたQRコードなどがついている画面になります。
このQRからアプリをインストールすることができます。

iOSのビルドについては証明書が必要になるのでこちらの公式ページを参考にしてください。
http://docs.phonegap.com/phonegap-build/signing/ios/
(わたしはAndroidユーザーなので思いっきり無視しました……)

ちなみにアプリのアイコンを変えたい場合はconfig.xmlで指定することができます。
まとめて指定する場合はこんなかんじ

<icon src="画像パス" />

詳細はPhoneGapのサイトへ。
http://docs.phonegap.com/phonegap-build/configuring/icons-and-splash/

これで一通りの流れはおわりです。

さいごに

HTML/CSS/Javascriptで画面を作ることができれば、こんなに簡単にアプリをつくることができます。
実際にスマホに自分の作ったアプリのアイコンがあったり起動させることができるととってもうれしいです。
Webサイトを作っている側からすると、アプリを作るということは本当に敷居が高いイメージしかなかったので、
こんなに簡単に作ることができるということが驚きでした。
公開するとなるとまたここからステップがありますが、内輪用だと簡単にできますね:relaxed:

Ateam Hikkoshi Samurai Inc. Advent Calendar 2017 23日目いかがでしたでしょうか。
明日はエイチーム引越し侍の、娘さんとプリキュアが大好きエンジニア、@kekiさんが 『アドラーの心理学』をエンジニア視点で考えた記事を書いてくれます。気になりますね!
お楽しみに。

追伸

株式会社エイチーム引越し侍では、一緒にサイト改善をしてくれるWebエンジニアを募集しています。エイチームグループのエンジニアとして働きたい!という方は是非、以下のリンクから応募してください。
皆様からのご応募、お待ちしております!!

エイチームグループ採用サイト(Web開発エンジニア職)

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away