MIT App InventorとJavaScriptによるAndroidアプリ（続）

　以下の記事に書きましたように、これまでにいくつかのAndroidアプリを、MIT App InventorとJavaScriptとの連携で作ってみました。

● Make MIT APP Inventor more powerful with JavaScript
https://sparse-dense.blogspot.com/2019/10/extending-mit-app-inventor-with.html
● Writing formulas in both AppInventor and JavaScript
https://sparse-dense.blogspot.com/2019/10/writing-formulas-in-both-appinventor.html

　今回の記事も、その続編なのですが、まず、もとになるJavaScriptの初歩の解説書[1]について述べます。この書は、全くの初心者から中級の人までに有用な書籍のひとつだと思います。その特徴は、解説が丁寧であり、「実際に手を動かしてコーディングしながら」学び易いように、例題ファイルの構造をうまく工夫していることです。自分でコーディングしてうまく動かない場合は、模範解答ソースリストと比べて検討することもできます。

　初級向けではありますが、全12章のうち、とくに最後の方の第10章「便利なjQuery」、第11章「Web APIで郵便番号から住所」、第12章「YouTubeの動画ギャラリー」などは、多くのユーザにとって有用と思われます。

　本書の著者は、スマホでの利用は想定されていないのかも知れませんが、例題として載っているJavaScript関係のファイル（.html, .js, .cssを含む）は、ほとんどそのままAndroidスマホでも動かすことができます。その実現法のひとつは、上記で述べたように、MIT App Inventorと連携させることなのです。App Inventorに組み込まれているWebViewerは、強力なJavaScriptエンジンでありますから。具体例を以下の図に示します。最後の第12章の例題「YouTubeの動画ギャラリーを作ろう」を対象としました。

　必要となるApp Inventorのブロックは、上図のとおり極くわずかです。これだけで、「キーワードを与えてボタンを押すと該当するYouTubeビデオが得られる」Androidアプリが作れます。主要な処理は、JavaScript側でやっているので、これは当然ではありますが。下図は、Androidスマホでこのアプリを実行した場合の画面例です。（本書に解説されているように、各自のAPI key for YouTube Data API (V3)が必要です。）

　YouTubeの動画は、もちろん、だれでもWebブラウザから検索できますが、このスマホアプリは、ひと味ちがいます。とても手軽に、思い浮かんだキーワードを元に動画を得てすぐに見ることができます。著者の岩田さん、素敵な例題をありがとうございます。

参考文献
[1]岩田宇史：いちばんやさしいJavaScriptの教本　第２版、（株）インプレス、2019年3月21日

Watson Assistantに関するIBM Webセミナー

【追記】教えて！ラガマルくん IBM Watson版（本記事末尾をご覧下さい）

　今日は、2020-2-21です。新型コロナウィルスの拡散により、イベントや会議などに中止の動きが広まりつつあるようです。いろいろな関係者のおもいや立場もあり、開催か中止かの判断は非常に難しいところだと思います。そんななか、本日、「IBM Webセミナー」というのがあり、参加してみました。事前登録して、自席のPCから聴講でき、質問もできます。

　タイトルは、「Watson Assistant最新アップデート- より高度な会話型AIインタフェースの実現」でした。小生は、以前から、高度な「プログラミング相談」の自動化を漠然と思い浮かべていました。そのきっかけは、２年以上前に、以下のブログ記事に書いたようなことでした。

個人用SiriのようなiPhoneアプリ
https://sparse-dense.blogspot.com/2017/12/iphoneapp-inventor.html
PC:何の日付でしょうか -> 人：（音声で）卒論提出日 -> PC:１月25日です。

（Google Assistantに関する過去記事から再掲）

　この過去記事は、Google Assistantがスマホアプリ開発環境ThunkableXで使えるようになったので、その試行を行ったものです。簡単な例でしたが、何かもっと発展的な利用が可能な気がしています。

　今回のIBMのAssistantは、さらに進化していることがおぼろげながら分かりました。短いWebセミナーですから、詳しいことはその場では分かりませんが、今後調べて活用していくための手掛かりが得られたように思います。私も、その場で簡単な質問（テキストで投入）してみたところ、セミナー内で講師からほぼリアルタイムに回答（全視聴者に向けて）があり、ちょっと嬉しくなりました。

　最後に、本セミナのなかで紹介された「教えて！ラガマルくん IBM Watson版」についてです。これは、本題であるWatson Assistantを用いたgoodなアプリケーションです。ラクビーに関する質問に答えてくれます。また、写真を選ぶと、画像認識により、ラグビーのどんなシーンかの説明文も出ます。他の分野の質問回答システムにも、何かヒントが得られるような気がします。

●教えて！ラガマルくん IBM Watson版
https://www.ibm.com/watson/jp-ja/meets-rugby/
https://ragamarukun.com/

Timer Overhead（in MIT App Inventor）

In general, talking about "timer interrupts" is difficult for laymen. This article, apart from the details, describes the overhead of the timer (to do something at regular intervals) at the user program level.

Suppose the timer shown below adds 1 every second (initial value is 0) and stops at 600 times. The elapsed time should be just 10 minutes. Because the addition and judgment in the loop should take less than 0.1ms. However, it actually took 4 to 5 seconds more than 10 minutes. Normally this may not be a problem, but in some cases a correction is required.

As a result of measuring the overhead for operating the timer once, it was found to be about 7.3 ms as shown in the figure below. This is surprisingly large! Then the actual interval of the timer should be shortened accordingly. That will almost finish in exactly 10 minutes (600 seconds). Such usage would also be useful.

AIに関するサラリーマン川柳

　先日、第33回「サラリーマン川柳」優秀100句が発表された。参考資料[1]にあるとおり、そのうち、AI（人工知能）に関するものが7句ほど含まれていた。その一つが「AIに 営業スマイル 審査され」である。共感できる傑作ではなかろうか。近未来のAI社会を象徴するように感じられた。

　大学でも、「授業評価」は、受講学生100人の表情や仕草をAIが認識した結果で決まるようになるのではないか。それが、「客観的」で「公平」な評価と言われそうで怖い気がする。無下に拒絶することもできないだろう。AIの認識結果の妥当性を人間がさらに検証する必要があるだろう。「その理由を説明できるAI」の研究も進んでいると言う。

そんなおもいで、上図を作ってしまいました。人物イラストには、参考資料[2]のコミPo!を利用しました。

参考資料
[1] 第一生命、第33回サラリーマン川柳
https://event.dai-ichi-life.co.jp/company/senryu/
[2] マンガデザインツール コミPo!（商用に適用可能な製品版）
https://www.comipo.com

Overview of AI application development environment

I would like to present an overview of the environment for developing AI applications. Look at the diagram below that I created. Basically, we can develop apps in traditional programming languages. However, in recent years, a variety of tools, libraries, and frameworks are on top of it and can be developed at a much higher level. Furthermore, AI services on the cloud and APIs that can be called in various languages ​​are available. High-performance hardware is essential for performing AI processing. Deep learning takes a lot of work to prepare the required datasets, but some systems ease it. Don't miss out on the transfer learning for efficient training using already trained models. The need to run AI apps on smartphones is also growing. Block programming environments such as MIT App Inventor support this.

２重螺旋に描いた「行く年来る年」

　明けましておめでとうございます。

■新年にあたって作成したイラスト
　年末に、「行く年来る年」のイラストを何か作りたいと考えました。思い付いたのが、サボテン等に見られる２重螺旋の利用です。さっそくですが、その小作品をご覧下さい。マルチエージェントモデリング用のNetLogo3D[1]を利用して作成しました。下図のとおり、令和元年（2019年）は、螺旋に沿って何処かへ引き込まれ去って行きます。さようなら、その節はお世話になりました。一方、新年令和２年（2020年）は、中央から力強く外へ進出しようとしています。私もこうなりたいものです。

■サボテンの２重螺旋の利用
　ところで、上図では、矢印を示してあるので、時計回りの螺旋（中心へ向かうものと出てくるもの）が確認できます。しかし、よく目を凝らしていると、それらとは別の（反時計回り）螺旋も見えてきませんか？実は、このイラストは、下図に示すサボテンの２重螺旋[2]の上に2019年と2020年を載せたものなのです。実際、左右の図の螺旋構造は同一であり、両者の違いは見せ方にあります。サボテンを上から見た場合に中心から外へ向かう方向で突起を辿ると、時計回りに８本、反時計回りに13本の螺旋が確認できます。８と13は、生物界によく出現するフィボナッチ数列の部分列であることも知られています。これらは、学校の理科に出てきたはずですが、大人になるとほとんど忘れているようです。

l

■２重螺旋をAIで認識
　次に思い付いたことは、AI（人工知能）は、時計回りと反時計回りの螺旋を識別（認識）できるか、ということです。しかし、上図でも矢印がなければ、両方向の螺旋が見えて交錯しそうです。そこで、方向を示す赤い小さな三角形を各要素に付して、「こちらの図では時計回りに見る」「この図では反時計回りに見る」とした多数のスクリーンショットをAIに学習させました。こんな時には、GoogleのTeachable Machine2[3]が最適です。コーディングしなくてもブラウザだけでAI実験できました。必要ならば、コーディングして、自分用にカスタマイズすることも難しくないです。

An example of emphasizing a clockwise spiral

　結論から言いますと、上図に示すとおり、AIにより時計回りと反時計回りの螺旋は、簡単に学習させて認識できることが分かりました。このような、誰でもサーッと使えるAIがさらに発展することを期待したいと思います。WordやExcelを使うのと同じような感覚でAIを利用できる、そんな時代になりつつあるのかも知れない。特に、言語自動翻訳はまさにそうなっており、画像認識等もその段階に入りつつあるのではないかと思います。

■雑感 - AI
　本題から外れるかも知れませんが、最後にひと言。情報工学科の学生であれば、ニューラルネットワーク（誤差逆伝播法や畳み込み等を含む）の基本概念とそのプログラミングはマスターすべきでしょう。その知識が、正しい学習のさせ方と得られた結果の的確な理解に繋がることは明らかです。でも、それよりも先に、上記のTeachable Machineなどを利用してその素晴らしさを実感するのもよいでしょう。本格勉強は、それからでも遅くありません。むしろ、その体験によって勉学意欲が湧くこともあるでしょう。

参考資料
[1] NetLogo, NetLogo3D
https://ccl.northwestern.edu/netlogo/
https://ccl.northwestern.edu/netlogo/docs/3d.html
[2] サボテンに関する記事（情報工学科ブログ、2013年）
http://blog.cs.kanagawa-it.ac.jp/2013/02/netlogod.html
http://blog.cs.kanagawa-it.ac.jp/2013/01/blog-post_14.html
[3] Google Teachable Machine 2
https://teachablemachine.withgoogle.com
https://teachablemachine.withgoogle.com/faq#Saving-&-Exporting

App Inventor version nb181 (December 19th, 2019)

MIT App Inventor is constantly upgrading, including minor improvements and bug fixes. I'd like to talk about two things that I've paid attention to in this release of "nb181". They are improved XML decoding and the addition of pressure sensor component.

XMLDecode Now Handles CDATA Sections
In XML, you may want to use markup symbols in regular strings. For example as in the following figure. However, XMLTextDecode in the XML Web component did not handle the "![CDATA [...]]" sections well. Therefore, these sections had to be removed as follows:

This issue was discussed by the community around 2015. As a countermeasure, Taifun [1] presented the above method. However, this version of App Inventor seems to have solved this problem.

Addition of Barometer
I developed several apps that use the barometric sensor built into the Android Phone and published them at the MIT App Inventor Summit 2014 [2]. At that time, App Inventor could not use the barometric pressure sensor, so I created a small Java program to get the barometric pressure value and called it with ActivityStarter.

An example of an Android application using a barometer [2]

Since then, I have used barometric pressure components [3] installed in AppyBuilder and Taifun's Extension [4]. However, with this version upgrade of App Inventor, you can use barometric pressure sensor as one of the standard sensors without using them. Great!

References

[1] Taifun's post on CDATA
https://groups.google.com/forum/#!topic/mitappinventortest/TZO5InFSIkU
[2] Fujio Yamamoto, “Rapid Prototyping Using App Inventor in Information and Computer Sciences Course”, Proc. of the MIT App Inventor Summit 2014, 3 pages, Cambridge USA, July 2014.
[3] PressureSensor by Hossein's Appy Builder
http://appybuilder.com (AppyBuilder is being integrated with Kodular)
[4] Taifun's Barometer Sensor Extension
https://puravidaapps.com/barometer.php

Finally arrived! Beautiful mountain photos that were automatically recognized!

In the previous article [1], I mentioned the recognition of photos from live cameras that shoot mountains. And I have developed an app that can automatically receive it by e-mail only when a photo with a clear view of the top is obtained. In order to recognize photos, I created a model in which many photos of the mountain were classified into four categories and trained. There, I used MIT's Personal Image Classifier and Google's Teachable Machine2 and incorporated the trained model into the App Inventor app.

However, in general, mountains are often covered with clouds. For example, at Rishiri Mountain in northern Hokkaido, you can see the middle but rarely see the top. So, I checked the weather forecast, and on a sunny day, I ran this app continuously from the early morning and waited for a notification email. During that time, of course, I was doing another job because it is fully automatic notification!

Finally, good luck came. It happened after 12:00 that day. As shown in Figure 1, the mountain photo was judged to be “clear enough to see the summit” and I received an automatic email to inform it. I was very happy. Sure, I got a great photo that looks good up to the top of the mountain.

References
[1] Using MIT's Personal Image Classifier with App Inventor
http://sparse-dense.blogspot.com/2019/12/using-mits-personal-image-classifier.html

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:

https://sparse-dense.blogspot.com/2019/01/a-json-decoding-extension-for-app.html
https://sparse-dense.blogspot.com/2019/01/a-json-decoding-extension-for-app_19.html

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.

Thanks

I found out that this Extension was introduced by CERCA [3]. Thank you for your correct understanding of my design intent and usage.

References

[1] to get OpenWeaterMap API guide:
https://openweathermap.org/guide
[2] to get City ID:
http://bulk.openweathermap.org/sample/city.list.json.gz
[3] CERCA NEL, Estrarre dati da JSON con una comoda estensione di appinventor, novembre 15, 2019
https://osmtreeathlon.blogspot.com/2019/11/estrarre-dati-da-json-con-una-comoda.html

Using MIT's Personal Image Classifier with App Inventor

-> please see the revised version below:

http://sparse-dense.blogspot.com/2020/07/beautiful-mountain-view-comes.html