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エンジニアに転向するというのは独学の場合、不可能ではありませんが、かなり難易度の高い挑戦であると言えます。たとえ独学で成し遂げたとしても、よっぽど運がよくない限り ...

続きを読む

エンジニア独立

2019/4/15

ITエンジニアが給与上げるために出来ることは限られている

どうも、フリーランスエンジニアのてぃすです。 今ITエンジニアってかなり稼げる職種として知られてきていますが、中にはその影響を感じられていない人もいるんじゃないかと思います。 ぼくは2年の間に正社員、派遣、フリーランスと渡り歩いて、月収は20万→40万→80万->100万と変動してきました。 その中でITエンジニアとして収入を上げるために出来ることがなんなのかが少しずつ見えてきました。 今回はその経験から感じたITエンジニアが収入を上げるために出来ることについて分析・解説していきます。 会社の中で給 ...

続きを読む

エンジニア入門

2018/1/2

プログラマになるために資格は必要か

ここ最近のエンジニア需要増大に伴って、プログラマやエンジニアになりたいと考え始める人が周りにも増えてきました。 そんな時によく聞かれるのが「プログラマになろうとしたら、資格とか取ったほうがいいの?」という内容。 確かに、真っ黒な画面に向かってカタカタ英語や記号を打ち込んでいるTHE 専門職であるプログラマという職業には、何かしら資格が必要に思えるかもしれません。 今日はそんなプログラマ・エンジニアを目指していて、最初の一歩として資格取得を検討している人に向けてプログラマになるのに資格が必要かという疑問に応 ...

続きを読む

エンジニア入門

2018/8/19

プログラミング初心者にRubyを強くオススメする理由

こんにちは、フリーエンジニアのてぃすです。 プログラミングを始めようと思った時にまず立ちはだかるのが、 どのプログラミング言語を選択するか という問題です。 Googleで『プログラミング おすすめ』や『プログラミング 初心者』などと調べてみても、 オススメプログラミング言語○選といった類の記事やサイトばかりで 結局何を勉強すればいいの? となってしまっていることでしょう。 そこで今回は、現在プログラマーとして働いている私から、これからプログラムを勉強したいという方に向け、国産プログラミング言語であるRu ...

続きを読む

エンジニア入門

2019/4/15

プログラミングスクールって実際のところどうなの?

こんにちは、フリーエンジニアのてぃすです。 プログラミングスクール、今や広告やSNSでも頻繁に目にするこのワード。 初心者がプログラミングを始めるなら通うべき 独学でも十分だから必要ない プログラミングスクールに通ってもプログラマになれない などなど賛否両論飛び交っていますが、今日は現役エンジニアの視点からプログラミングスクールのメリット・デメリット、そしてエンジニアを目指す上での有力な選択肢となるかについてお話していきます。 プログラミングスクールとは何か その名前の通り、プログラミングを学ぶための学校 ...

続きを読む

-プログラミング
-

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