Another example using JSON Decoding Extension

This article shows an example of using the JSON Decoding Extension I developed. Below are descriptions of this extension:


First of all, I would like to thank many people for their interest in this extension. In fact, these two articles have been accessed more than 1,500 times in total, but sometimes there are inquiries that they can't use it well. So here's another example that's simple but practical. It is a display of the weather forecast using OpenWeather ([1][2]). Here, the weather forecast of Sapporo City in Japan, up to five days in advance every three hours is displayed. An example of a JSON text as output from OpenWeather is shown in FIg.1. Some parts are folded in the figure, but if all are expanded, there are 1,341 lines.

In this JSON text, all the tag values shown in red frame are taken out and displayed on the smartphone as shown in FIg.2. In other words, the city name, date and time, temperature, and weather are displayed. In order to use OpenWeather in an application, it is necessary to obtain an API Key.

Here are the points of using the extension (FoYoJSON) to decode this JSON text. For example, to get the city name "Sapporo-shi", treat it like Fig.3. In addition, to retrieve all the weather forecast every three hours in order of time, write as Fig.4.

The complete source code (blocks) of this application is shown in Fig.5.

If you take a little more time, you can create a more practical application as shown in Fig. 6, where there are four cities registered and can be switched with the button.


[1] to get OpenWeaterMap API guide:
[2] to get City ID:


Using MIT's Personal Image Classifier with App Inventor

The app shown below automatically saves photos so beautiful that you can see the top of the mountain. For image recognition, I use the recently announced MIT's Personal Image Classifier [1]. This app incorporates a trained model of some mountain image, but of course, it is easy to replace it with your favorite mountain image.

The weather in the mountains changes in a short time. Here, we have created an app that automatically stores only the photos where the summit is clearly visible. As an example, it recognizes the situation of Mt. Rishiri in northern Hokkaido of Japan in real-time and saves good photos.

First, we'll classify the photos of this mountain into four categories, as shown in Fig1, depending on how they look. For this purpose, we quote images of a live camera [2] installed at the foot of the mountain. Get the image at the appropriate intervals and prepare it with a label, as shown in Fig.2. For each label, it is good to have more than 10 images. Enter them into MIT's Personal Image Classifier via your PC's web browser.

When the image is ready, perform training as shown in Fig.3. Training takes place on the Neural Network. Adjust the network structure and some hyperparameter values ​​accordingly. At the scale of this example, training usually ends in tens of seconds. Download the trained model to your PC and use it in the App Inventor program as shown below.

The extension (personalimageclassifier.aix) for using the downloaded model in App Inventor can be obtained from Reference [1]. The usage is very simple as shown in Fig.4. First, set the downloaded model to the Classifier properties, and then give the image you want to recognize to the block for classifying. As a result of recognition, the degree to which the image should be classified into each label is shown. That is, you get a list of label/confidence pairs. The image is classified into the label with the highest confidence value.

Before using this app, it is better to check the weather forecast for this mountain. If the weather is too bad, you can't expect a good picture. Press the button shown in Fig.5 to automatically display mountain weather up to 6 hours in advance. The weather forecast requires parsing a JSON file from OpenWeatherMap[3]. So I'm using my own Json Decoding Extension (FoYoJSON.aix)[4]. Fig.6 provides an overview of it. In order to use OpenWeatherMap, you need to get your own API key.

An example of running the app is shown in Fig.7. In this case, it was recognized as "Cloudy but looks good" because there are many clouds but the mountainside looks good. Such a case is normal and it is rare to see it well to the top.

If you are lucky, you will encounter a scene where you can see the summit as shown in Fig.8. The recognition result is "Clear enough to see the summit". In that case, this image is automatically sent to the registered mail ID. If you organize the emails you receive later, you can save only good photos.

Taifun's extension [5] shown in Fig. 9 is used to automatically send e-mails without human intervention. (However, since this extension is paid, the application source code I publish does not include automatic email transmission.) In addition, another Taifun's extensions ([6] [7]) are also used.

please note:
(1) To get and display the weather forecast, you need your own API Key for OpenWeatherMap.
(2) To automatically send recognized images by e-mail, purchase Taifun's Mail Extension.
(3) However, buttons "get Image", "prepare", and "recognize" that serve basic functions can be used unconditionally.
(4) If Error_908 is displayed when running this app, please allow access to External_Storage in your Android settings. Please allow it again (twice) if necessary.


[1] MIT's Personal Image Classifier
[2] Live camera at Rishiri Town Hall (in Japanese)
[3] OpenWeatherMap
[4] JSON Decoding Extension by FoYo
[5] Taifun's mail extension (paid)
[6] Taifun's image extension
[7] Taifun's file extension


利尻山の画像認識をTeachable Machine2とApp Inventorで行う

 前回の記事では、MIT App InventorからGoogleのTeachable Machine2を使って画像認識する例を書きました。今回、それを少し進めたアプリを作成しました。

 北海道の北部にある利尻山(島全体が利尻山になっている)の状況をリアルタイムに認識するスマホアプリを作成しました。まずは、どんなものかをご紹介します。色々な造り方はあるでしょうが、ここでは、App InventorとTeachable Machine2を使って、如何に簡単に、美しい(?)AIアプリを作るかに主眼があります。何かのご参考になれば幸いです。

 このアプリは、参考資料[1]に示した利尻町役場のライブカメラの画像を適宜引用して、その画像を学習させています。その学習はTeachable Machine2で行います。その学習済みモデルを使って、以下のアプリ(App Inventorによる)は動きます。




 学習には、Fig.4に示す4つのカテゴリを設けました。それぞれに十数枚の画像を集めて学習させました。なかでも、"Clear enough to se the top"(よく晴れていて山頂までみえる)場面になかなか出会うことができず、予想外に作業時間がかかってしまいました。


[1] ライブカメラが掲載されている利尻町役場のホームページ


MIT App InventorとGoogle Teachable Machine2を連携させる

【要旨】GoogleのAI環境Teachable Machine2を使うと、自分用に、音/画像/ポーズの学習と認識を非常に簡単に行えますが、それだけでは、初心者レベルでに留まってしまいます。一歩進めて、自分の作りたいアプリにこれを組み入れることができれば、世界はグンと広げられます。その糸口となる試みを、MIT AppInventorとの連携という形で行いました。

 先の記事に書きましたように、Teachable Machine2によれば、PCやスマホのブラウザを使って容易に自分用に(ここが重要!)、音/画像/ポーズの学習と認識を行うことができます。子供にも大人にも、素晴らしいとAI環境と言えます。

 しかしながら、自分が解きたい問題、作成したいアプリにその機能を取り込めなければ、それ以上の発展がありません。私の場合、スマホのアプリをMIT App Inventorを使って作るのですが、ここに、このTeachable Machine2を組み込めないかと思い、情報を探しましたが見当たりません。それならば、と自分で以下のようにやってみました。


  • 富士山(富士吉田)
  • 利尻岳(沓形)
  • 昼間の富士山(須走)
  • 夕暮れの富士山(須走)

学習済みモデルをMIT App Inventorから使う準備
 スマホ用のApp InventorにあるWebViewerというブロックは、実は強力なJavaScriptエンジンなのです。上記の学習済みモデルは、JavaScriptの環境があればどこでも動くTensorflow.jsで作られています。そのため、Googleのサーバにおいた学習済みモデルは、App Inventor側で実行できます。


MIT App Inventorから学習済みモデルを動かして認識結果を得る
App Inventorから学習済みモデルを動かして認識を実行させます。図3(a)は、ライブカメラから取得した画像を、上で述べたローカルWebサーバに配置しています。図3(b)は、ローカルサーバで認識をさせ、その結果をApp Inventor側で取得しています。ここで、WebViewerのWebViewStringが受け渡しの役を担っています。



【参考情報】MIT App Inventorのフォーラム
以下でも、App InventorとTeachable Machine2に関するディスカッションがあります。私も、ひと言述べています。
Artificial Intelligence with App Inventor



 先日(2019年11月初旬)に発表されたGoogleのTeachable Machine 2.0 [1]はちょっと衝撃的でした。バージョン1.0は2017年に発表されていたのですが、今回のバージョン2.0は著しく進歩しています。”Teachable Machine 2.0 makes AI easier for everyone”のキャッチフレーズの通りだと感じます。

 このTeachable Machineの特徴は、ブラウザのもとで動くTensorflow.jsを使っており、学習も認識もローカルマシンできてしまうことです。学習は今のところPCでしかできないようですが、学習済みのモデルは、スマホへ組み込めるので、スマホでリアルタイムに、音/画像/ポーズの識別ができてしまいます!ここで特筆すべきは、コーディング不要であり、例えば以下のようなスマホ用の音識別器は、全体で15分くらいでできてしまうことです!





[1] Teachable Machine 2.0 makes AI easier for everyone


Enjoy live cameras from around the world on your smartphone

Revision: Added a function to automatically acquire images periodically (see Fig. 4).

Many live cameras are installed in cities, mountains, rivers, etc. around the world. They are useful for knowing the current situation in a nostalgic place or where an acquaintance lives. Of course, you can simply enjoy the beautiful scenery. It takes a little time to find a suitable one among those live cameras. There are not so many live cameras that are of interest to each person, at most about ten. If that's the case, don't you think it's convenient to register them in advance on your smartphone so that you can see them right away! At that time, it would be nice to be able to display the previous camera image together with the current camera image. It's often useful to know that something has changed in a few hours.

First, find out several suitable live cameras. They can be video images or still images. Also, the update interval varies from several minutes to one hour. Here, select still images with an update interval of several minutes. MIT App Inventor is very suitable for the smartphone app to be created this time.

Prepare a text file with the location name and image URL as input data. From such a text file, create a simple database with TinyDB, and through that, let the Web component get images. The acquired image is displayed with the Image component together with the current time. The saved previous image is also displayed at the same time. In addition, we added a function to automatically delete images that were not saved so as not to occupy a large amount of storage.

This is a simple app, but you can use it to see the image of the desired live camera as soon as you think of it. You can save your favorite images by pressing the button. It's also a good idea to email screenshots of current and past images to someone else.

Fig.1 shows the case where Mt. Fuji (FujiYoshida) is selected from 10 registered live cameras ([1]-[10]). It is interesting to compare this morning's image with yesterday's image.

Another examples are shown in Fig.2. Images from two live cameras (Liverpool Airport and Liverpool Waterfront) installed in Liverpool. Time is shown in Japan time. It ’s also fun to compare day and night images.

Some live cameras have a telephoto function and a variable direction shooting function. These features are switched automatically and cannot be controlled by the user, but if you are lucky you can get even better images. For example, Fig. 3 shows Mt. Fuji taken with the telephoto function and the night view of Sapporo taken from different directions.

Now we have added a function to periodically acquire images from the current Live camera. As shown in Fig.4, you can specify the shooting interval and press the button to automatically update the screen. And automatic shooting stops by Long-Click on the button.

please note
If Error_908 is displayed when running this app, please allow access to External_Storage in your Android settings. Please allow it again (twice) if necessary.

(The live camera URL is not shown below because direct links to some live cameras are not allowed.)
[1] Neuburg an der Donau
[2] Mt. Fuji Subashiri
[3] Sapporo Oh-dori park
[4] Liverpool AirPort
[5] Tokyo Haneda AirPort
[6] Kushiro Japan
[7] London Big Ben
[8] Mt. Fuji Fujiyoshida
[9] Liverpool Waterfront
[10] Chikuma river Naganuma





  1. 神奈川県内の河川では、あるコード体系でライブカメラ画像にファイル名が付与されているので、プログラムでは、コードから画像ファイル名を復元できた。しかし、他の都道府県や地域の河川はそれぞれが異なる命名規則を持つ。
  2. 神奈川県の場合、標準的に3枚の画像(河川写真2枚と水位グラフ)を表示できたが、他県では、それらが揃っているとは限らないうえ、別のタイプの画像もある。
  3. プログラムの造りに少し不満があった。すなわち、複数の画像読み込み要求に応じて、それぞれに個別の受信イベント処理ブロックを作っていた。
  1. 元の長いファイル名(URL)をそのまま使い、TinyDBを使って(tag, value)の形式で情報を保持する。すなわち、tagを河川名(観測地点名)とし、valueは画像URLを要素とするリストとした。そして、tagのリストをListpickerに設定した。
  2. これにより、画像の枚数は河川あたり1枚〜3枚まで可変でも不都合がない。
  3. 複数の画像読み込み要求(Web.get)に対する、画像受信イベントを、ひとつのGeneric Blockで処理するように変更した。拡張性と柔軟性を向上させるため。これに関して、前回との比較を図1に示した。


 海外の河川にも、ライブカメラはあります。かなり昔行ったことのあるドナウ川(Neuburg an der Donau)にしてみました。画像取得までに若干時間がかかりますが、少し遅れたリアルタイム画像(毎分更新される)を表示できます。でも、こうして海外河川も入れてしまうと、防災よりも観光となってしまいそうですが、ご容赦下さい。







  • スマホ用に設計されていないので、文字などが小さすぎる。
  • 多数の河川が掲載されているので、関心のある河川へ行くまでに数ステップかかる。
  • 各自に関心がある河川は、自宅や親戚の家の近くなど、数個程度と思われるが、それを登録して使えない。(Webページのブックマークはできるが...)
  • 水位グラフを見るには、河川カメラとは別系統なので、さらに数ステップかかる。
そこで、スマホ用に、自分用にカスタマイズして使い易くするアプリを作成することにしました。結論から言いますと、MIT App Inventorを使って、図2のようなアプリを作成しました。ここでは河川観測点を6ヶ所登録してあります。図2左側図は、[河川名-観測点-リアルタイムカメラ画像情報-水位グラフ情報] がリストになっていて、どれかをクリックすると、直ちに右側へ切り替わり、その河川の写真と水位グラフがセットで表示されます。また、上部の河川名をクリックすると、再度左側へ戻り、別の河川を選択できます。




 このスマホアプリは、画像のURLから画像を表示しているだけなのですが、最も使いやすいユーザーインタフェースにするにはどうするかを考えました。水位情報をデータベース(TinyDB, TinyWebDB, SQLiteなど)にすることなども考えましたが、結局、自分の関心のある数個の河川情報をテキストファイルにして、その内容をListPickerで選択するこの方式に落ち着きました。

 このようなある程度実用的と思われるスマホアプリを、短時間で作成できるMIT App Inventorの有用性を改めて感じる次第です。最後に、登録してある他の河川の状況も示して、この記事を終わります。


日本に強く関係する MIT App Inventorの出来事

 MIT App Inventorの登録ユーザ数が最近1,000万人に達した、とのニュース[1]がありました。もちろん、日本のユーザも多いのですが、あまり目立ちません。そんな中で、日本に関係するビックな出来事が2つあります。

 最初は、現在日本人でただ一人、"MIT Master Trainer in Educational Mobile Computing"の資格を有する石原正雄氏の国内での活動が、MIT App Inventorのオフィシャルブログ[2]で紹介されたことです。"App Inventor finally came to Tokyo!! First App Inventor workshop for educators in Tokyo, by Masao Ishihara"というタイトルです。石原氏が、日本において、App Inventorを使って、Computational Thinkingを指導する人のためのWorkshopを開催していること等が紹介されています。特に日本人の教育関係者にとってインパクトのある、朗報だと思います。

 2番目は、App Inventorの日本語化に関するものです。MITサーバでは、英語の他にスペイン語、ドイツ語など15ヶ国の言語のバージョンが使えますが、日本語はありません。高校生や大学生であれば、英語版でも特に支障はないと思いますが、小学生や中学生にとっては、やはり日本語版が必要のようです。それがあれば、日本でも子供の間で、もっとMIT App Inventorが使われるようになるでしょう。
 そんななかで、米国在住の16才の高校生である宮島健さん(Michael Ken Miyajima)らが日本語化プロジェクト[3]を立ち上げていて、すでに日本語版を独自サーバで公開していることがわかりました。Google アカウントがあれば、直ぐに誰でもそれを使えます。初心者向けのチュートリアルもあり、例題の作成手順は丁寧な日本語で解説されています。なかには、少し高度なアプリも扱っています。例えばそのうちの、「日本の郵便番号の検索アプリ」は、データベースSQLiteやzip圧縮ソフトの利用、extensionsの利用、テキスト処理とリスト処理などを含む本格的なものです。

 この日本語化により、欧米諸国のように日本国内でも、低学年の生徒に、App Inventorがさらに普及することが期待されます。低学年を含めた幅広いユーザ層が存在し、様々なアイディアのアプリが開発され、それらに関する情報交換がなされることは、大学等でのApp Inventorの高度な活用にとっても重要であると思います。

[1] MIT App Inventor Reaches 10 Million Users, and Other Milestones
[2] App Inventor finally came to Tokyo!! First App Inventor workshop for educators in Tokyo
[3] MIT App Inventor 2 日本語化プロジェクト

Writing formulas in both AppInventor and JavaScript

Using MIT App Inventor, you can, of course, write mathematical formulas. However, long formulas tend to be complex to represent. In that case, as written in the previous article, you can write a formula in JavaScript and call it from App Inventor. In the following, I will write some mathematical formulas in these two ways and compare them.

As an example, let's create an application in App Inventor to find the distance and azimuth between two points as shown in Fig.1. With Google Maps, isn't it easy? Yes, that's right. But it's fun to create your own program! This execution example shows that the distance from Tokyo Tower to Mt. Fuji is about 98 km and the azimuth is 250 degrees. The azimuth is shown as the displacement when the north is 0 degrees.

There are several known formulas for calculating distance and azimuth. Among these, referring to literature [1], Fig.2 explains practical mathematical formulas when the earth is regarded as a sphere. Let's write this formula in both JavaScript and App Inventor.

The first is the JavaScript function shown in Fig.3. The arguments of JavaScript trigonometric functions (Math.sin, Math.cos, Math.tan, etc.) must be given an angle converted from latitude and longitude to radians. Note that the entire application is created with App Inventor and this JavaScript function is called from App Inventor.

On the other hand, in Fig.4, the above formula was created as a function of App Inventor. Since the angle given to the trigonometric function of App Inventor is degrees, the latitude and longitude values ​​can be entered as they are. At first glance, it looks a little complicated, but the structure of the formula is clear and bugs are less likely to occur. However, longer formulas are cumbersome because the number of block operations increases and the area occupied by the diagram also increases.

Although it is a common-sense conclusion, the above is summarized as follows:
  • Note that the angle given to trigonometric functions is degrees in App Inventor, but radians in JavaScript (and common programming languages).
  • For fairly complex formulas, you can create it as a function in JavaScript and call it from App Inventor.
  • For relatively simple formulas, writing everything in App Inventor will give you a clearer understanding of the formula structure and fewer bugs.
  • It makes sense to try it out instead of imagining it.
I would like to supplement a little. Thanks to the rich functionality of MIT App Inventor Openstreet Map, expansion as shown in Fig. 5 can be done easily. That is, by clicking on the map, you can get the latitude and longitude of that point. In addition, my above calculation results (distance and azimuth) were completely consistent with those calculated by Openstreet Map! In the figure, red and blue markers indicate Tokyo and Sapporo stations, respectively.

[1] Keisan by CASIO (in Japanese)