TIS ENGINEER NOTE

ITエンジニアのためのキャリア向上ノウハウブログ

プログラミング

Webサービスをスマホアプリ化するまでの一連の作業を紹介するよ

更新日:

こんにちは、てぃすです。

本日はインターネット上に公開されているWebサイト・Webサービスをアプリ化するまでの手順をご紹介します。

Google ChromeやSafariなどのブラウザで表示される情報を、そのまま表示するアプリケーションを作成する、といったイメージです。

基本的な流れは

  • アプリのビルド
  • 簡単な動作確認
  • ストアへ公開

今回はAndroidアプリをご紹介しますが、iOSアプリについても基本的な流れは同様です。

※iOSは年間登録費が結構えげつない(11,800円)為、今回は見送りました。

monaca(モナカ)へ会員登録

monacaとは?

monacaとはネット上でHTMLやCSS、javascriptを使ってモバイルアプリを開発することのできるサービスです。

それぞれのアプリケーション開発において必要となる固有の開発言語を学習したり、開発環境を用意することなく、手軽にモバイルアプリを作成することができるというのは大変魅力的ですね。

今回はこのmonacaを使って、既にWeb上に公開しているサイトをモバイルアプリとしてリリース可能な状態にしていきます。

monacaへの会員登録

まずはmonacaへサクッと会員登録

https://ja.monaca.io/

サイトに移動したら『無料プランで始める』をクリック

monaca-top

ログイン画面に移動しますので、メールアドレスとパスワードを入力し、登録ボタンをクリック

monaca-regist

すると入力したアドレスにメールアドレス確認メールが届きますので、メールに記載されたURLにリンク。

するとちょっと待たされた後、プラットフォーム画面に遷移します。

プロジェクト作成

そしたらまずは左上の『新規プロジェクトの作成』をクリックし、早速アプリケーションを作成していきましょう。

ここで言うプロジェクトはアプリケーションと同単位であると認識いただいて構いません。

monaca-platform

2017年6月現在、プロジェクト作成画面はこんな感じです。

上段から『No Framework』を選択し、下段の『最小限のテンプレート』の『作成』をクリック。

4

作成するプロジェクトの名称を入力しましょう。説明は不要であれば入力しなくてもOKです。

new-project

ダッシュボードに戻ると作成したプロジェクトが表示されますので、対象プロジェクトの開きます。
dash

 

開発作業

プロジェクトを開くと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/は当ブログ管理人の運営する学習支援アプリです。興味のある方はぜひ利用してみてください。

index

あとは左側のツリーからcss/style.cssを開いて、簡単にレイアウトを調整する記述を追加します。

実際のソースは以下の通り

html,body{
width:100%;
height:100%;
padding:0;
margin:0;
}
iframe{
width:100%;
height:100%;
padding:0;
margin:0;
border:0;
}

 

css

実際に行う開発作業はこれだけです!楽ちんですね。

アプリ設定

これまでの手順を保存したら、上部メニューより設定を選択し、Androidアプリ設定をクリックしてください。

set

アプリのビルドにおいて必要な設定を入力していきます。setting

アプリケーション情報

その下の項目は基本的にデフォルトでOKです。

アイコン

アイコンを用意してアップロードしましょう。

基本的には1つ用意して一括でアップロードすれば問題ありません。

その他の設定項目

あとは基本的にデフォルトのままで問題ありません。

設定したい項目があればいじる感じで。

アプリのビルド

開発したアプリをスマートフォンやタブレットで使うためにはビルドをする必要があります。

ここで作成されるapkファイルがアプリの本体となります。

上部メニューからビルド⇒Androidアプリのビルドを選択してください。

build_menu

ビルド画面に行くと、デバッグ向けビルドとリリース向けビルドがありますが、今回は最初からリリース向けビルドを行います。

リリース向けビルドを選択すると、『キーストアが設定されていません』とエラーが出ておりビルドができません。

このキーストアとはアプリの作成者であることを証明する判子のようなものと考えていただければOKです。

このキーストアがないと製品版としてリリースすることができませんので、設定します。『キーストアとエイリアスを管理する』をクリックしましょう。

release-build

まずはキーストアを作成する必要がありますので、『クリアして新規作成』をクリックしましょう。

key

エイリアス:アプリに関連する分かりやすい名称を入力しましょう。

エイリアスのパスワード:なりすましされないよう、忘れにくい・予測されないパスワードを入力しましょう。

KeyStoreのパスワードを入力してください:こちらも忘れにくい・予測されないパスワードを入力しましょう。

create-key

これでリリース向けビルドに向けた設定が完了です。再度ビルド画面に行きましょう。

create-key-comp

エイリアスが作成されたことでリリースビルドが可能となりました。

早速ビルドを開始するボタンをクリックしましょう。

build

開始後、数秒するとビルドが完了します。

完了画面において『ローカルPCにダウンロード』をクリックし、ビルドされたファイルをダウンロードしましょう。

build-comp

アプリの動作確認

実際のAndroid端末、あるいはエミュレータを使用してアプリの動作確認を行いましょう。

自分はAndroid Studioのエミュレータを使用して動きやレイアウトの崩れがないことを確認しました。

Android Studioのエミュレータのインストール、使い方については以下の記事を参考にしてみてください。

https://tisnote.com/android-studio-app-test/

問題がなければいよいよAndroidアプリとして公開していきます。

Google Play デベロッパーへ登録

Androidアプリを公開するためにGoogle Play デベロッパーに登録します。

Google Play デベロッパー

登録料は25ドルで、追加料金・年間料金などはありません。各種クレジットカードで支払い可能です。

アプリ公開設定

ログインが完了したら、コンソールからアプリの作成を進めていきます。

google

デフォルト言語についてはグローバル展開を狙っている等でなければ日本語で問題ありません。

タイトルはわかりやすくアプリのタイトルを入力します。

jp

あとは各種設定を進めていくのですが、詳細はアプリの種類や方針によって異なってきますので省略します。

設定で不備がある場合、右上に『公開できない理由』と表示が出ます。ここをクリックすると入力の不備が表示されますので、

そちらに従って、不足項目の設定を行ってください。

set-2

コンソール左メニューのチェックマークがすべて緑色になったら公開できる状態になります。

menu

あとは製品版として、monacaでビルドしたapkファイルをアップロードしましょう。

設定が完了すると、2~3時間後実際にアプリがストアに公開されます。

オススメ記事
フリーランスエンジニアとして働くことの実情

こんにちは、フリーランスエンジニアのてぃすです。 最近は本業が忙しくブログの更新が滞っておりました。更新を楽しみにしてくださった方々、申し訳ありませんでした。 今後もエンジニアにとって有益な情報を提供 ...

続きを見る

よく読まれている記事

エンジニア入門

2018/8/17

現役エンジニアからみたProEngineerの『エンジニアカレッジ』について

こんにちは、フリーエンジニアのてぃすです。 最近、 どうすればエンジニアになれるのか エンジニアになるためにどんな勉強をしたの? といった質問を受けることが多くなってきました。 エンジニアは高稼働のブラック職業であるという印象も薄れてきて、効率よく稼げる職業としての側面に気付き始めた方が増えてきたということでしょう。 とはいえ全くの未経験からITエンジニアに転向するというのは独学の場合、不可能ではありませんが、かなり難易度の高い挑戦であると言えます。たとえ独学で成し遂げたとしても、よっぽど運がよくない限り ...

続きを読む

エンジニア独立

2018/1/28

手数料公開のエンジニア案件紹介サービス『Lancers Top』に登録してみた

日本最大のクラウドソーシングサービスであるランサーズを運営するランサーズ株式会社が今年の10月2日より開始したサービスであるLancers Top。 僕自身既に複数の案件紹介サービスに登録しているのですが、このLancers Topでは色々と面白そうな試みをしており、興味が湧いたため、登録して個人面談まで行ってきました。 今回は実際にLancers Topを利用してみての感想や他のフリーランスエージェントと比べたときの特色などについて紹介していこうと思います。 ランサーズとは? ランサーズといえば言わずと ...

続きを読む

エンジニア独立

2018/1/27

エンジニアは報酬・やりがい・成長機会の全てを求めるべき

こんにちは。フリーエンジニアのてぃすです。 僕は働く上で大事な要素となるのは以下の3つであると考えています。 報酬(給与)の額 やりがい 成長機会 で、これは僕のようなエンジニアという職業だと更に重要度が増します。 人手不足・需要拡大の影響もあり、事務や営業などといった非専門的な職業と比べて、選択次第で高収入を目指しやすくなっていますし、キャリア構築の重要性も他の職業よりも高いですからね。 自分の貢献した結果にふさわしい報酬を受け取りたい。 1日8時間、人生の大部分を働くことに費やすことがほとんどのわけで ...

続きを読む

エンジニア入門

2019/4/15

エンジニアは勉強し続けなければいけない職業なのか

こんにちは。フリーランスエンジニアのてぃすです。 最近は就職・転職する際にエンジニアを選択肢に含める人が増えてきています。 しかしエンジニアという職業を候補にあげるにあたって、 エンジニアは働きながら勉強し続けなければいけないのではないか? という疑問もよく見聞きします。 そこで今回はフリーランスエンジニアとして活動している僕の視点からこの疑問についての答えを説明していこうと思います。 結論 先に結論を述べると、 エンジニアは勉強し続けなければいけないのか? という疑問の答えはNOです。 決してエンジニア ...

続きを読む

エンジニア独立

2019/4/15

フリーランスエンジニアになって大変だったこと・苦労したこと

どうも、フリーランスエンジニアのてぃすです。 このブログでは基本的にITエンジニアの独立を勧めることが多いですが、今日はちょっと視点を変えて、フリーランスエンジニアとして活動する上で、苦労することに視点を当ててお話していこうと思います。 世間ではフリーランスをもてはやす声、それに対する反論などが飛び交っていますが、多くの意見が「フリーランス」という一括りにしたもので、実情を捉えていないものがほとんどであると感じています。 この記事では実際に僕がフリーランスエンジニアとして活動してきた中でリアルに体験してき ...

続きを読む

-プログラミング
-

Copyright© TIS ENGINEER NOTE , 2020 All Rights Reserved Powered by AFFINGER5.