スマホアプリをビジュアルプログラミングで開発できる MIT App Inventor を使い Androidスマホ・iPhone から LINE に通知を送る

はじめに

これまで以下の記事などを書いてきた、スマホアプリをビジュアルプログラミングで開発できる MIT App Inventor。

• ビジュアルプログラミング（MIT App Inventor）で開発した Androidアプリから #toio の制御を行う（BLE用の拡張機能を利用） - Qiita
• ビジュアルプログラミングの MIT App Inventor を用いた音の機械学習を利用する Androidアプリ開発【後編：アプリ実装】 - Qiita

今まで、Androidアプリ開発のみに対応していたのですが、作ったものを iOS・iPadOS上で動かすアプリもリリースされました（Android だと APKファイルを生成することもできるものの、 iOS・iPadOS だとそれに相当することはできなそうですが...）。

It is with great pleasure that the App Inventor team announces that the MIT App Inventor companion app for iOS is now available on the Apple App Store for iPhone, iPad, iPod Touch, and Mac.https://t.co/6OXwYhvcEM pic.twitter.com/5ox3nIuWLt

— MIT App Inventor (@MITAppInventor) March 8, 2021

●‎MIT App Inventor on the App Store
　https://apps.apple.com/us/app/mit-app-inventor/id1422709355

今回作ったものが動作している様子

今回は、MIT App Inventor の HTTPリクエストを使うブロックを試したのですが、それをせっかくなので Androidスマホ上だけでなく iPhone上でも動かしてみます。結果から掲載すると、このようなものができてます。

ビジュアルプログラミングでスマホアプリが作れる MIT App Inventor を使って、スマホから LINE に通知を送るのを試した！（LINE Notify を利用）

アプリは、Androidスマホ・iPhoneのそれぞれで動かして「アプリのボタンを押した時・スマホを振ったとき」のそれぞれの条件で、LINEに通知する形に。 pic.twitter.com/rrRKQlMSwh

— you (@youtoy) March 10, 2021

作ってみる

では、ここから作り方の概要を書いていきます。

LINE Notify の準備

今回、LINE に通知を送る処理を行いますが、それを手軽に行える LINE Notify を用います。
LINE Notify の公式の APIドキュメントは以下がありますが、とりあえず使ってみる場合は、使い方を記載した記事を別途探すほうが簡単かもしれません。この記事では、詳細な部分は省略します。

●LINE Notify API Document
　https://notify-bot.line.me/doc/ja/

利用のための準備を行うと、トークンが発行されますので、そのトークンをメモしておいてください。

画面を作る

LINE Notify の準備ができたところで、App Inventor で画面を作っていきます。
過去の記事では、公式の英語版と日本語化プロジェクトで準備されたものの両方を試していますが、今回は日本語化されたもののほうを使って試していきます。

画面構成の全体は以下のとおりです。

配置したコンポーネントは以下の 4つです。

• ユーザーインターフェース > ボタン
• ユーザーインターフェース > ラベル
• 接続 > Web
• センサー > 加速度センサー

「接続 > Web」の部分が、今回の重要な部分である HTTPリクエストを送る部分です。
なお、ボタンを押したら通知される、という動作のみを試すなら、上記で最低限必要なものは「ボタン・Web」の 2つです。今回、LINE Notify のレスポンスをデバッグ用に表示させるためにラベルを使っています。また、加速度セナーは、端末を振ったら通知されるという動作をさせるために追加しています。

上記のコンポーネントは、コンポーネントの名前や表示するテキストを変えています。デフォルトのままでも動作に支障はないですが、分かりやすくするために適宜変更しておくのをオススメします。

プログラムを作る

ここから、プログラムを作っていきます。作ったもの全体は以下のとおりです。

主な構成要素は 3つです。

ユーザーのアクションに反応させる部分

以下の部分は、ユーザーがボタンを押した時と、ユーザーがスマホを振った時（※ 加速度センサーが関係する処理）に実行する処理を設定したものです。

内容は、LINE Notify に通知をする処理なのですが、ここではそれらの共通部分を関数に切り出して、その関数に通知するテキストを渡すだけの形にしています。

LINE Notify用の処理（関数にしたもの）

上記で設定したユーザーのアクションが行われた時、LINE に通知を送る部分を作ったのが以下です。

まず、LINE Notify のアクセス先URL として https://notify-api.line.me/api/notify を設定しています。

また、その後に LINE Notify に必要な HTTPリクエストのリクエストヘッダと、送信するテキストを設定しています。それぞれ、以下のフォーマットになるように設定しています。

• リクエストヘッダ（※ リストを使って、以下の内容をまとめる）
  • Content-Type 、 application/x-www-form-urlencoded
  • Authorization 、 Bearer 【LINE Notify の設定で発行されたトークン】
• POST するテキストの内容
  • message=【送信するテキスト】

上記のリクエストヘッダの Authorization では、 Bearer の後に半角のスペースを入れて、その後に「LINE Notify の設定で発行されたトークン」を書きます。
送信するテキストは、関数の引数として取得されたものを用います。その際に、 message=という書き方にする必要があるため、テキストの結合を使っています。

このあたりの話は、以前、ビジュアルプログラミングの UIFlow を使って M5Stack社のデバイスから LINE Notify を使った時、似たようなことを試したことがあったため、その時の内容を活用しました。以下の記事に、その内容はまとめています。
　●LINE Notify を利用して UIFlow のプログラムで LINE に通知を送る（日本語テキストも送信） #M5Stack - Qiita
　　https://qiita.com/youtoy/items/76586479c2d4c5893c5b

HTTPリクエストのレスポンスを受け取った後の動作

以下はデバッグ用で、HTTPリクエストに対するレスポンスを表示させるために作ったものです。

単純な内容で、レスポンスとして受け取ったテキストのうち、レスポンスコードをラベルに表示するだけのものです。

以下にあるように、成功すれば 200 が返ってきて表示されるはずです。
　●HTTP レスポンスステータスコード - HTTP | MDN
　　https://developer.mozilla.org/ja/docs/Web/HTTP/Status

動作させた時の様子

記事のはじめのほうの「今回作ったものが動作している様子」の部分で掲載したとおりの動作となりました。

今回、Android のコンパニオンアプリ・iPhone用のコンパニオンアプリの両方で動作させましたが、どちらも問題なく動作しました。1点、「端末が振られた時」という条件をつけた部分で、端末を画面と水平な方向に振って試した時に Android のほうは簡単に反応したのですが、iPhone のほうは反応しない感じでした。動画を見ていただくと分かるのですが、iPhone のほうは端末の画面と垂直な方向にも動きをつけたものもためしました。そのやり方だと、反応しやすかった感じがしました。

終わりに

今回、App Inventor の HTTPリクエストを送る機能を使い、作ったアプリから LINE に通知を送るものを作りました。HTTPリクエストの処理は、今回使った POST だけでなく GET や他のものをつけるようですので、今回使った LINE Notify 以外の API も試せればと思います。

なお他の事例で Googleスプレッドシートと連携させるものを試された記事がありますので、そちらを紹介して終わります。
　【 @fukumura_kaigo さんの記事 】
　●MIT App InventorのWebコンポーネントでSpreadsheetに値を書き込む - Qiita
　　https://qiita.com/fukumura_kaigo/items/8d233dbc56a3defb0c2d