超簡単！スマホのアプリを自作しよう。「App InventorでTwitterアプリを作る」
久々にアンドロイドのアプリを作ってみました。
今回は超簡単編ですので、是非チャレンジしてみてください。
使うツールはブラウザだけです。
Google ChromeでGmailにログインが出来ている状態からスタートです。
元々、Googleがサービスしていた「App Inventor」ですが、現在はMIT(Massachusetts Institute of Technology)マサチューセッツ工科大学のサーバに移っています。
一部の機能が見直されて「MIT App Inventor2 Beta」となっています。
MIT App Inventor
上記にアクセスして「Creat!」ボタンをApp Inventorを立ち上げます。
App Inventorは「Designer」という部品を配置する画面と、「Blocks」という処理ブロックを設定する画面から出来ています。実にシンプルで小学生でも使える内容になっています。
今回は、カメラで写真を撮影して日時を付けてTwitterに投稿するアプリを作ってみたいと思います。
まずは「Designer」画面で左端の「Palette」から「User Interface」を選択、「Label」をドラックして中央のスマホ画面上にドロップします。
各部品は画面の右端「Properties」の項目を設定できます。
例えば「Label」の「Text」に文字を入れるとラベルの内容が変更されると思います。
同じ要領で「Botton」を２つドロップします。
「Palette」を「Media」に切り替えて「Camera」を追加、「Sensors」の「Clock」と「Social」の「Twitter」を追加します。「Camera」と「Clock」「Twitter」は機能部品なので画面の下に配置されます。
Twitterアプリを作る場合は「Twitter」の「Properties」にある「ConsumerKey」と「ConsumerSecret」が必要になります。これはTwitterアプリの製造者番号のようなので、アプリ単位にTwitterに申請をするともらえます。
番号を取得するためにはTwitterアカウントを持っていてログイン出来ていることが前提条件になります。またアプリ製作者はモバイル登録されていることが条件になっています。携帯電話の番号を事前に登録しておきます。
アプリ登録は下記リンクの「Create New App」からできます。
必要事項を入力して登録が完了すれば「Keys and Access Tokens」から「Consumer Key (API Key)」「Consumer Secret (API Secret)」がすぐにもらえます。
Application Management
ではApp Inventorの画面を「Blocks」に切り替えてプログラム処理を設定します。
まずは左端の「Blocks」から「Built-in」の「Variables」をクリックします。
色々と出てきますが一番上の「initialize global[] to」を選択してドラッグして「Viewer」の上で適当にドロップします。この命令用のブロックは画面上に自由に配置できます。
「Blocks」から「Built-in」の「Logic」から「false」を選んで「initialize global[ ] to」の後ろに接続します。
処理ブロックによって繋げられるブロックに制限もありますが、操作の要領はこんな感じです。
このブロックの意味はグローバル変数を用意してイニシャライズします。
「initialize global[ ] to」の[ ]の中に「F1」という変数を宣言しました。
この「F1」はTwitterアプリとして利用アカウントから「Authorize」認証されているのかを判断するのに使っています。その他のブロックは画像を参考に設定してください。
処理の流れとしてはこんな感じです。
１．グローバル変数「F1」をfalseでイニシャライズする。
２．アプリの起動イベント「Initialize」でTwitterのAuthorizeをコールします。
３．「IsAuthorize」でAuthorizeが完了していれば「F1」にtrueをセットします。
４．「Tweets」のボタンをクリックした時に「F1」がtrueなら「TakePicture」でカメラをコールします。
５．「AfterPicture」でカメラ撮影の終了を感知して「TweetWithImage」でツイートします。
６．「Quit」のボタンでアプリを終了します。
全ての設定が終わって左下の「Show Warnings」が０，０ならＯＫです。
画面上の「Build」メニューからコンパイルしてアプリを作成します。
「App(provide QR code for apk)」を選択するとコンパイルが実行され終了するとＱＲバーコードが表示されます。バーコードをスマホで読むとアプリのダウンロードが始まります。
ダウンロード終了後、インストールを実行するとアプリを利用できます。
初めてアプリを利用する場合はTwitterアカウントの認証「Authorize」が表示されます。
コードを入力して認証してください。
「Tweets」のボタンをクリックしてカメラ撮影を保存終了すると自動でツイートされます。
あまり意味のないアプリですが、ワンタッチでカメラ撮影と日時付きで自動ツイートするので、使いようによっては作業画像などの記録を残すのに便利かもしれません。
本当はタイマーで自動撮影して投稿させたかったのですが、App Inventorでは直接カメラ制御が出来ないので不可能なようです。愛犬用の監視カメラを作りたったのですがねー・・・
下記に完成したアプリを置いておきます。
連携するカメラアプリによってはうまく写真を取り込めない場合もあるようです。
Auto_cam_twitter.apk
App Inventorの部品にはカメラ機能や音楽・ビデオプレイヤー、音声認識や音声合成、ＧＰＳや加速センサー、バーコードスキャナーやデータベース、Bluetooth通信やレゴ「マインドストーム」との連携等々、面白そうなコンポーネントが揃っています。機能的には限定される場合がありますが、アイデアしだいでは実用的なアプリも作れるかと思います。
もちろん製作したアプリはマーケットで販売したり、課金したりも可能です。
ヒットすれば億万長者も夢ではありません。
是非チャレンジしてみてください。
是非チャレンジしてみてください。
同じ系統で、パソコンやスマホで動作するＷＥＢゲームを作るツールもあります。
使い方はよく似ていて、こちらもよく出来ています。
初心者も簡単！ゲーム作家への道、ブロック型プログラム・ツール「Scratch」
http://ttripper.blogspot.jp/2015/12/scratch.html
【参考サイト】
App Inventorでアプリ開発はどこまでできるのか - IT
http://www.atmarkit.co.jp/fsmart/index/appinventor.html
プログラマでない人のためのAndroidアプリ作成入門
http://libro.tuyano.com/index2?id=315001
App Inventor2の始め方 - MIT App Inventor2 攻略WIKI
http://appinventor2.wiki.fc2.com/
e>
