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時間後実際にアプリがストアに公開されます。

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

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

続きを見る

よく読まれている記事

エンジニア独立

2019/4/20

【時給2000円以上】経験者が語る派遣エンジニアの魅力

どうも、フリーランスエンジニアのてぃすです。 巷で語られているITエンジニアの働き方といえば、正社員 or フリーランス、というのが主流として語られています。 しかしITエンジニアにとって美味しい働き方がもう1つ存在しています。 それが今回紹介する派遣エンジニアです。 ぼくもフリーランスエンジニアとして独立する前の準備期間に派遣エンジニアを活用しました。 今日はその派遣エンジニアという働き方の魅力と活用方法について紹介していきます。 派遣エンジニアとは 今回紹介する派遣エンジニアという働き方を一言で表すと ...

続きを読む

エンジニア独立

2019/4/25

【正社員並みの保証】安心フリーランスエージェント・Midworksを徹底分析

こんにちは、フリーエンジニアのてぃすです。 今やフリーランスエンジニアという働き方もだいぶカジュアルになってきています。僕自身 文系大学卒 大したキャリアもコネもない という一般的には心もとない状態から独立しましたが、正社員時代と比べて収入も5倍ほどになり、リモート中心で非常にストレスのない毎日を過ごせています。 先日エンジニアの集まりに参加して、そこにもフリーランスエンジニアが何人かいたのですが、その人たちの多くからMidworksというエージェントを使っているという話を聞きました。 気になって調べてみ ...

続きを読む

エンジニア独立

2019/4/15

仕事を選べるITエンジニアになるための面談テクニック

どうも、フリーランスエンジニアのてぃすです。 ITエンジニアとして働いていく上で、大部分の人が経験する面談。 その後の数ヶ月、正社員や長期プロジェクトであれば数年の待遇を左右する超重要イベントなのですが、多くのエンジニアがこの重要性に気づいていません。 とりあえずこれまでの経歴を箇条書きして どこかで調べてきたような自己PRを適当に書いて 面談で書いてあることをそのまま口にする といった投げやりな面談を続けていては、売り手市場ということもあり仕事に困る可能性は低いですが、待遇の良い仕事を気づかないうちに逃 ...

続きを読む

エンジニア独立

2019/4/15

フリーランスエンジニアの適正価格をぶっちゃけてみる

どうも、フリーランスエンジニアのてぃすです。 先日以下のツイートをしました。 実務経験2年以上のエンジニアが都内でフリーランスをやる場合、週5で月60万未満の案件は切り捨ててOKです。正社員的に考えると高めに見えますが、業務委託としてやるには60万円しか出さない案件は最底辺であると考えましょう — てぃす@フリーランスエンジニア (@tis_engineer) March 29, 2019 すると結構な反響があったので、今日はこのツイートで語っているフリーランスをやる場合の単価の基準について、 ...

続きを読む

エンジニア独立

2019/4/15

【2019年版】現役フリーランスエンジニアがオススメするフリーランスエージェント4選

どうも、フリーランスエンジニアのてぃすです。 僕は正社員時代の月収は20万円を切るくらいだったのですが、独立したことで同じ労働時間で月100万円をキープできるようになりました。 現在はちょっと働く時間を減らして週3リモートで月70万円で働いていますが、このくらいのバランスもストレスが少なく、快適な日々を過ごすことができています。 そんな感じで独立から1年以上が経過し、わかったことがあります。 ITエンジニアは今の相場から考えれば、フリーランスになった方が圧倒的に得だなということです。 もちろん正社員ディス ...

続きを読む

-プログラミング
-

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