こんにちは、てぃすです。
本日はインターネット上に公開されているWebサイト・Webサービスをアプリ化するまでの手順をご紹介します。
Google ChromeやSafariなどのブラウザで表示される情報を、そのまま表示するアプリケーションを作成する、といったイメージです。
基本的な流れは
- アプリのビルド
- 簡単な動作確認
- ストアへ公開
今回はAndroidアプリをご紹介しますが、iOSアプリについても基本的な流れは同様です。
※iOSは年間登録費が結構えげつない(11,800円)為、今回は見送りました。
monaca(モナカ)へ会員登録
monacaとは？
monacaとはネット上でHTMLやCSS、javascriptを使ってモバイルアプリを開発することのできるサービスです。
それぞれのアプリケーション開発において必要となる固有の開発言語を学習したり、開発環境を用意することなく、手軽にモバイルアプリを作成することができるというのは大変魅力的ですね。
今回はこのmonacaを使って、既にWeb上に公開しているサイトをモバイルアプリとしてリリース可能な状態にしていきます。
monacaへの会員登録
まずはmonacaへサクッと会員登録
サイトに移動したら『無料プランで始める』をクリック
ログイン画面に移動しますので、メールアドレスとパスワードを入力し、登録ボタンをクリック
すると入力したアドレスにメールアドレス確認メールが届きますので、メールに記載されたURLにリンク。
するとちょっと待たされた後、プラットフォーム画面に遷移します。
プロジェクト作成
そしたらまずは左上の『新規プロジェクトの作成』をクリックし、早速アプリケーションを作成していきましょう。
ここで言うプロジェクトはアプリケーションと同単位であると認識いただいて構いません。
2017年6月現在、プロジェクト作成画面はこんな感じです。
上段から『No Framework』を選択し、下段の『最小限のテンプレート』の『作成』をクリック。
作成するプロジェクトの名称を入力しましょう。説明は不要であれば入力しなくてもOKです。
ダッシュボードに戻ると作成したプロジェクトが表示されますので、対象プロジェクトの開きます。
開発作業
プロジェクトを開くとindex.htmlというファイルが開かれている状態となりますので、下記の通り修正しましょう。
bodyタグ内のテキストを削除し、scriptタグの中身に下記の内容を追記します。
function onDeviceReady() {
var ref = window.open('https://hideword.com/', '_blank', 'location=no,presentationstyle=fullscreen,toolbar=no');
}
var event = typeof cordova === 'undefined' ? 'DOMContentLoaded' : 'deviceready';
document.addEventListener(event, onDeviceReady, false);
ここでは読み込み時にアプリ内でWebブラウザを読み込むように設定しています。
『https://hideword.com/』の部分にご自身のアプリ化したいWebサイトを入力してください。
ちなみにhttps://hideword.com/は当ブログ管理人の運営する学習支援アプリです。興味のある方はぜひ利用してみてください。
あとは左側のツリーからcss/style.cssを開いて、簡単にレイアウトを調整する記述を追加します。
実際のソースは以下の通り
html,body{
width:100%;
height:100%;
padding:0;
margin:0;
}
iframe{
width:100%;
height:100%;
padding:0;
margin:0;
border:0;
}
実際に行う開発作業はこれだけです！楽ちんですね。
アプリ設定
これまでの手順を保存したら、上部メニューより設定を選択し、Androidアプリ設定をクリックしてください。
アプリのビルドにおいて必要な設定を入力していきます。
アプリケーション情報
その下の項目は基本的にデフォルトでOKです。
アイコン
アイコンを用意してアップロードしましょう。
基本的には1つ用意して一括でアップロードすれば問題ありません。
その他の設定項目
あとは基本的にデフォルトのままで問題ありません。
設定したい項目があればいじる感じで。
アプリのビルド
開発したアプリをスマートフォンやタブレットで使うためにはビルドをする必要があります。
ここで作成されるapkファイルがアプリの本体となります。
上部メニューからビルド⇒Androidアプリのビルドを選択してください。
ビルド画面に行くと、デバッグ向けビルドとリリース向けビルドがありますが、今回は最初からリリース向けビルドを行います。
リリース向けビルドを選択すると、『キーストアが設定されていません』とエラーが出ておりビルドができません。
このキーストアとはアプリの作成者であることを証明する判子のようなものと考えていただければOKです。
このキーストアがないと製品版としてリリースすることができませんので、設定します。『キーストアとエイリアスを管理する』をクリックしましょう。
まずはキーストアを作成する必要がありますので、『クリアして新規作成』をクリックしましょう。
エイリアス：アプリに関連する分かりやすい名称を入力しましょう。
エイリアスのパスワード：なりすましされないよう、忘れにくい・予測されないパスワードを入力しましょう。
KeyStoreのパスワードを入力してください：こちらも忘れにくい・予測されないパスワードを入力しましょう。
これでリリース向けビルドに向けた設定が完了です。再度ビルド画面に行きましょう。
エイリアスが作成されたことでリリースビルドが可能となりました。
早速ビルドを開始するボタンをクリックしましょう。
開始後、数秒するとビルドが完了します。
完了画面において『ローカルPCにダウンロード』をクリックし、ビルドされたファイルをダウンロードしましょう。
アプリの動作確認
実際のAndroid端末、あるいはエミュレータを使用してアプリの動作確認を行いましょう。
自分はAndroid Studioのエミュレータを使用して動きやレイアウトの崩れがないことを確認しました。
Android Studioのエミュレータのインストール、使い方については以下の記事を参考にしてみてください。
https://tisnote.com/android-studio-app-test/
問題がなければいよいよAndroidアプリとして公開していきます。
Google Play デベロッパーへ登録
Androidアプリを公開するためにGoogle Play デベロッパーに登録します。
登録料は25ドルで、追加料金・年間料金などはありません。各種クレジットカードで支払い可能です。
アプリ公開設定
ログインが完了したら、コンソールからアプリの作成を進めていきます。
デフォルト言語についてはグローバル展開を狙っている等でなければ日本語で問題ありません。
タイトルはわかりやすくアプリのタイトルを入力します。
あとは各種設定を進めていくのですが、詳細はアプリの種類や方針によって異なってきますので省略します。
設定で不備がある場合、右上に『公開できない理由』と表示が出ます。ここをクリックすると入力の不備が表示されますので、
そちらに従って、不足項目の設定を行ってください。
コンソール左メニューのチェックマークがすべて緑色になったら公開できる状態になります。
あとは製品版として、monacaでビルドしたapkファイルをアップロードしましょう。
設定が完了すると、２～３時間後実際にアプリがストアに公開されます。
-
-
フリーランスエンジニアとして働くことの実情
こんにちは、フリーランスエンジニアのてぃすです。 最近は本業が忙しくブログの更新が滞っておりました。更新を楽しみにしてくださった方々、申し訳ありませんでした。 今後もエンジニアにとって有益な情報を提供 ...
続きを見る
