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

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

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

続きを読む

エンジニア独立

2018/1/28

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

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

続きを読む

エンジニア独立

2018/1/27

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

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

続きを読む

エンジニア独立

2019/4/28

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

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

続きを読む

エンジニア入門

2019/4/25

絶対にエンジニアになりたい人にオススメするプログラミングスクール3選

こんにちは、フリーエンジニアのてぃすです。 最近はエンジニアの人手不足による給与向上や、自由度の高い働き方に魅力を感じてエンジニア・プログラマを目指す人が増えてきました。 僕の周囲にもプログラミングを始めたいという人が増えてきて、プログラミングスクールとかたくさんあるけどどれがいいの?という質問を受けることがあります。 せっかくなので実際に現場でWeb開発に携わる立場からプログラミングスクールについて比較しながら調べてみました。 そして実際にエンジニアとして働くために最も充実したサービスを提供しているプロ ...

続きを読む

-プログラミング
-

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