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/28

収入を上げたいWebエンジニアが学習するべき技術

どうも、フリーランスエンジニアのてぃすです。 エンジニアの収入は技術に比例して上がるわけではない。というのはこのブログでよく言っていることです。 しかし技術と収入の因果関係はもちろん0ではありません。 そこで今回はITエンジニアとして働いていく上で収入アップに繋がる可能性の高い技術をピックアップして紹介していきます。 今やっている仕事で収入に限界を感じている 新しい技術を学びたいけど何を学ぶのが効率がいいのか知りたい というエンジニアは要チェックです。 技術によって収入が上がる要因 まず収入が上がる技術と ...

続きを読む

エンジニア独立

2019/4/15

自分の市場価値を把握しようとしないエンジニアは搾取される

こんにちは。フリーランスエンジニアのてぃすです。 エンジニア需要の高まり、待遇の向上からエンジニア・プログラマを目指す人が急増してきている昨今。 確かにエンジニアという職業はこれから高収入・柔軟な働き方を目指そうとした時に、最も適切な選択肢です。 そんな高収入かつ将来性のある職業であるエンジニアですが、自分のエンジニアとしての市場価値を知っておかないと、本来得られるはずの収入よりも少ない額で働くことになる可能性があります。それでも中小企業のサラリーマンよりは稼げますが。 今回は何故市場価値を把握しようとし ...

続きを読む

エンジニア入門

2018/8/19

本気でRubyを学びたい人のためのエンジニアスクール『ポテパンキャンプ』

こんにちは、フリーエンジニアのてぃすです。 エンジニアといえば今や最も少ない投資で高収入を望め、更には週3勤務やリモートワークなどの柔軟な働き方も目指せる夢のある職業です。 ここ最近は営業職や事務職から、将来性を考えてエンジニアに転身するといういう人もかなり増えてきています。 特にRubyプログラマーは日本における絶大な需要とリモート案件の豊富さから、特に人気のあるポジションとなっています。エンジニアとして働いているが、職場環境に不満を抱いていたり、今扱っている技術が今後通用するか不安に感じ、Ruby・W ...

続きを読む

エンジニア独立

2019/4/28

月80万円も目指せるフロントエンドエンジニアの魅力

どうも、フリーランスエンジニアのてぃすです。 ITエンジニアといえば、JavaやRubyを駆使するサーバーサイドエンジニアの方がイメージとして強いですよね。 ただWeb系で活躍するエンジニアには他にもフロントエンドエンジニアという働き方があります。 今日はこのフロントエンドエンジニアについて、 よくある誤解 どれくらい稼げるのか どうすればなれるのか 将来性 キャリアアップのコツ などの観点からお話していきます。 フロントエンドエンジニアとは フロントエンドエンジニアとは、簡単に言えばユーザーが操作する画 ...

続きを読む

エンジニア独立

2019/5/30

レガシーな技術を扱っていたSES正社員がモダンな技術を扱うフリーエンジニアになるまでにやったこと

こんにちは。フリーエンジニアのてぃすです。 僕は独立する前、SESの正社員として非常に歴史の長いプロジェクトに常駐で参加していました。 Javaを使ったシステムなのですが、他のJavaエンジニアに聞いても「なにそれ」と言われてしまうような非常にマニアックなフレームワークを最新から数年遅れのバージョンで扱っていました。 自動テスト?クラウドサーバー?なにそれ?的な非常にレガシーかつ面白みのない状況に嫌気と不安を感じて独立を志したわけです。 で、この時のような僕と同じような状況で悩んでいる人ってのをエンジニア ...

続きを読む

-プログラミング
-

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