ニートが社長になれる情報

ニートが社長になれる情報というタイトルですが、Web制作関連の記事や雑記が主な内容です。

※本ページはアフィリエイトプログラムによる収益を得ています。

超簡単!WEBサイトをAndroidアプリ化!AppsGeyserではなく、MIT App Inventor 2を利用

この度、WEBサイトの「無料ロト予想ソフト」をAndroidアプリ化してみました。


野良アプリではなく、Google Playストアでも公開しています。


Androidアプリ「無料ロト予想ソフト」はこちら


WEBサイトをAndroidアプリ化する方法としては、URLを入力するだけの「AppsGeyser」もあるのですが、「AppsGeyser」は最下部に広告用(?)のスペースができたり、立ち上がりの速度も遅いので、今回、MIT App Inventor 2を利用しました。


App Inventorは、以前、Googleが提供していたAndroidアプリ作成サービスで、現在は、マサチューセッツ工科大学(MIT)が提供しているので、MIT App Inventor 2という名称になっています。


私は、Googleが提供していた頃にApp Inventorを使ってアプリを制作したこともあるので、昔の記憶を呼び戻しながら、アプリの制作を始めました。


まあ、WEBサイトをAndroidアプリ化するだけなら、一瞬でできるのですが、それでは芸がないので、最上部にボタンを4つ配置し、ボタンをタップしたときに各ページに移動するという機能も付けています。


このボタンをタップしたときにWEBページを表示する方法は、説明するとちょっと長くなるので、今回は、アプリを立ち上げたときに、WEBサイトを表示する方法だけを紹介しておきます。


まず、Google Chromeで「ai2.appinventor.mit.edu」に移動し、Googleアカウントでログインします。


インターネットエクスプローラー(IE)では利用できないので、Google Chromeを使うようにしましょう。


一応、Google Chrome 29+、Safari 5+、Firefox 23+で利用できるようですが、Androidアプリを作るので、Google Chromeを使ったほうが無難だと思います。


MIT App Inventor 2にログインするGoogleアカウントは、アプリを公開する予定のアカウントでなくても構いません。


なぜなら、アプリをビルドしたapkファイルは、PCに保存できるからです。


私も、MIT App Inventor 2にログインするアカウントは、android marketアカウントとは別のGoogleアカウントを利用しました。


さて、MIT App Inventor 2にログインしたら、Start new projectから半角英数字でproject nameをつけ、OKボタンをクリックします。


project nameは半角英数字で入力しないと、エラーが出ます。


アプリ内で表示させるアプリ名は後から日本語で入力できます。


project nameを付けて作業を始めると、最初から、Screen1というのが追加されていますので、一番右側に表示されているPropertiesのAppNameにアプリ名(日本語可)を入力し、さらに下の方にあるTitleにもアプリ名(日本語可)を入力します。



また、アプリで表示させるアイコンを自作する場合には、iconのところの、Upload Fileからファイルを選択してください。


私の場合、アイコンは72ピクセル×72ピクセルpng形式で作りました。


そして、一番左側に表示されているPaletteのUser Interfaceから「WebViewer」を選んで、中央のスマホ画面にドラッグ&ドロップします。



すると、「WebViewer」が画面に配置されますので、後はHomeURLにアプリ化したいWEBサイトのURLアドレスを入力するだけです。


ただし、右クリックでペースト機能が使えないので、コピーしたURLアドレスを「Ctrl」+「v」で貼り付けてください。


ペーストですが、「Ctrl」+「p」ではなく、「Ctrl」+「v」なので、注意が必要です。


データの保存は、ProjectsのSave Projectから行えますので、保存してから、デバック作業を始めましょう。


デバッグといっても、アプリを起動したら、WEBサイトを表示するというだけのものなので、確認だけしておけばいいかと思います。


デバッグには、エミュレーターを使う方法と、Android実機を使う方法があり、私はエミュレーターを使った後に、実機でテストしていますが、WEBサイトを表示させるだけのアプリなら、いきなりビルドして、実機で試してみるのもいいかと思います。


Buildには、App(provide QR code for .apk)と、App(save .apk to my computer)があり、ビルドしてスマホでテストする場合には、App(provide QR code for .apk)を選んでください。



Google Playストアで公開する場合には、App(save .apk to my computer)を選んでパソコンに保存しましょう。


Google Playストアでの公開でちょっと躓きましたが、なんとか無事公開できました。