2019年10月30日水曜日

河川水位情報を使い易くするスマホアプリの作成(1)

 最近の台風や低気圧による河川の氾濫などで被害を受けられた方々にお見舞い申し上げます。今後の水害をできるだけ抑えるために、(これまでほとんど気にとめていなかった)河川水位情報等も活用できるとよい思います。

 神奈川県内にも多数の河川があり、リアルタイム河川カメラ画像や水位グラフなどが提供されています。例えば、主にPC向けに図1のようなWebページがあります。多彩な情報が掲載されていて、有効に活用できそうです。ただ、思いついた時に直ぐにスマホでこれを利用しようとすると、以下に述べるような使いにくい点もあります。


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


 この例の「境川:境川橋付近」の写真は穏やかですが、水位グラフは直近数時間わずかに上昇傾向にあることが分かります。このアプリのソースコード(ブロック)全体は図3のとおりです。かなりコンパクトに作成できていると思います。


 詳しいことはここには書けませんが、ポイントをご参考までに以下に示します。図4(a)は、水位観測点の登録です。図2左図に示した観測点情報をテキストファイルに入れてあり、それを読み込んで、ListPickerの要素にしています。画像やグラフのURLは少し複雑な名称(文字列)ですが、共通部も多いので、このテキストファイルには、各画像に固有のコード情報のみを与えています。


 図4(b)は、ListPickerのリストから、河川観測点を選択した場合に、その写真をgetして表示します。図3では、写真を2枚と水位グラフの合計3枚を表示しますが、以下の図では、簡単のため、最初の1枚の写真だけを表示します。なお、画像のURLには、常に最新の画像が割り当てられるようになっています。


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

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


2019年10月25日金曜日

日本に強く関係する 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
http://appinventor.mit.edu/blogs/evan/2019/10/07/mit-app-inventor-reaches-10-million-users
[2] App Inventor finally came to Tokyo!! First App Inventor workshop for educators in Tokyo
http://appinventor.mit.edu/blogs/karen/2019/10/10/tokyo-workshop
[3] MIT App Inventor 2 日本語化プロジェクト
https://appinventor.tmsoftwareinc.com





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.


References
[1] Keisan by CASIO (in Japanese)

2019年10月20日日曜日

Make MIT APP Inventor more powerful with JavaScript

MIT App Inventor plays a big role in developing smartphone applications. Many general application developments can be performed with App Inventor standard blocks. However, further enhancements may be required to create more sophisticated and complex applications. To respond to this, the following three mechanisms have already been prepared.

First, App Inventor can call external programs (created with Java or App Inventor) by using Activity Starter, which is a standard block. The second is to use the extension function for creating new blocks (Extensions) that can be used in the same way as a standard block. However, in order to do this, some detailed knowledge of Java programming should be required. The third is to create and incorporate a Javascript program. This time I will introduce this method. Perhaps it is easier to use Javascript than to develop Extensions in Java.

The method of using Javascript with App Inventor is introduced in the following references ([1] [2] [3]). Both use the standard block WebViewer. This is because the WebViewer is a Javascript engine. Reference [1] also carefully states that the Javascript program path is different for debugging and development. The execution result of the Javascript program should be obtained by pressing the App Inventor button at an appropriate time. Reference [2] is also easy to understand. The execution completion of the Javascript program is checked by spinning on the App Inventor side. Reference [3], written in Spanish, describes a simple example using the Pythagorean theorem. In this case, because App Inventor automatically receives Javascript execution completion event, this App Inventor program is made very concisely.

I will explain an example using Javascript based on these reference materials. Fig.1 is a simple app that reverses the entered string. The standard block for App Inventor strings does not include the function of string inversion, so it is realized in Javascript.


This mechanism is illustrated in Fig.2.
  • First, create a Javascript file that reverses the string, and then upload it to Asset as Media in the Designer section of App Inventor. In this Javascript, WebViewString is important. 
  • Get the input string that App Inventor gave to WebViewString by getWebViewString () on the 7th line. 
  • Reversing of the character string is executed on the 9th line. The result is set to WebViewString by setWebViewString. In other words, WebViewString is rewritten at this point. 
  • App Inventor can automatically detect the occurrence of this rewrite event by a block named WebViewStringChange, so a new WebViewString value (ie, execution result) can be obtained here.

This Javascript example was quite simple, but Javascript is a very powerful programming language that can be used to build more advanced App Inventor applications.

References
[1] How does the property Webviewer.WebViewString work?
http://puravidaapps.com/snippets.php#2webviewstring
[2] WebView Javascript Processor for App Inventor
https://appinventor.mit.edu/explore/ai2/webview-javascript
[3] Insertar códigos de JavaScript en App inventor. Pitágoras.
http://kio4.com/appinventor/166_javascript_pitagoras.htm

2019年10月17日木曜日

AI with MIT App Inventor(生徒にAIの可能性を探求する機会を)

 これまでも、生徒/学生向けのComputational Thinking教育の一環として、人工知能(AI)を利用した環境は提供されていました。例えば、ML4K (Machine Learning for Kids)やSctatchを利用したものなどです。これらに加えて、最近、MIT App Inventorの本家のWebページに、主に高校生を対象とした「Artificilal Intelligence with App Inventor」というカリキュラムのアナウンスがありました。具体的な教材として、教員用[1]と生徒用[2]のような例が示されています。その一例は下図のようなものです。

http://appinventor.mit.edu/ の情報を元に作成したものです

 MIT App InventorにAI用のExtensionを組み込んでいますので、AI分野でこの10年間ほどで行われた高度な研究成果を活用して、生徒(高校生など)でも、オリジナルのAIアプリケーションを作成できます。これにより、生徒にAIの可能性を探求する新たな機会と、未来の創造者としての力を与えることを目指しているようです。生徒が自分のアイデアを具体化できることに重点をおいたカリキュラムを構成して行こうとしているようです。米国内の「K-12 Computer Science Standards」[3]にも適合させるとしています。

 単に、手順を示してそのとおりに造らせるのではなく、それを観察して問題点や改良案を考えさせることを重視しています。一例ですが、本題(例題)では、認識結果として、"(clock 0.63525)"のように、ヒットした最初の候補しか表示していません。これに対して、例えば、次のような課題を与えています。

  • ベスト(第1候補)だけでなく、第2候補も示しなさい。
  • 確度の数値を取り除き、物の名前だけにして、それを音声で出力しなさい。

これらを通して、「多重のリスト構造とその操作」も自ら調べて発見することになります。

参考資料

[1] INTRODUCTION TO MACHINE LEARNING Image Classification(教員用)
https://drive.google.com/file/d/1RQMs_bF2MBIb5agGYY-no4dpyi5zABr8/view
[2] Image Classification: WhatIsIt(生徒用)
https://drive.google.com/file/d/1YS0w_tDo20afucM33sJ_qb117-E0olNh/view
[3] K-12 Computer Science Standards, Revised 2017
https://www.doe.k12.de.us/cms/lib/DE01922744/Centricity/Domain/176/CSTA%20Computer%20Science%20Standards%20Revised%202017.pdf

2019年10月13日日曜日

台風接近通過をスマホの気圧センサで観測する(その 3)

 昨日の台風19号通過(2019/10/12)による被害を受けられた方にはお見舞い申し上げまます。以下の記事は、台風通過に伴う気圧変動を観測したものであります。

 以下の図は、台風19号の軌跡です。この詳しい図は、北本朝展氏(国立情報学研究所)によるものです。各時点での進路予測計算の痕跡(色々な色の点や円)も表示されています。出典となるURLは図の中に記載してあります。前回の台風15号の場合と同様に、自作のAndroidアプリによって、台風接近通過の24時間に渡り、気圧の変動を観測しました。観測地点は厚木市です。


 今回、この観測地点と台風中心の最短距離は約6km(下図のマップと、カシオの計算サイトで2点間距離を取得)という近さでした。そのため、気圧変動を明確に観測できる機会でもありました。以下が、上図の拡大図です。


 以下に、観測した気圧変動(2019/10/12の02:00から24時間分)を示しました。最接近時には、台風中心気圧960hPaとほぼ同じ気圧まで、急速に降下しました。それだけ台風中心に近かったということだと思います。また、約20時間以上に渡って気圧が降下し続けたことは、台風の勢力(規模)の大きさを反映しているようです。20時間でほぼ50hPaも降下する状況は、ごく希にしか観測されないと思います。


 例えば、日蝕が起こった場合には、子供を含めて多くの人がサングラスや黒色セロファンめがねで空を見上げて観測します。今回の記事はたいして意味は無いかもしれませんが、日蝕観察の場合と同じように、自然界の驚異と不思議を感じられるように思います。
 
 もしも、複数の地点(埼玉、小田原、伊豆など)で同様の観測が行われ、気圧変動情報を交換できれば、台風の速度や勢力などをより具体的に把握できそうです。



2019年10月11日金曜日

MATLABの強化学習Toolboxと自作Javaで簡単なGrid World探索

【要旨】MATLAB(R2019a以降)には、強化学習用のToolboxがある。それを使った簡単なGrid Worldの強化学習例題を試行した。同時に、自作Javaプログラムでも同じ例題を実行して理解を深めた。

 前回の強化学習の記事では、参考文献[1]に従って、行動価値関数を計算するためのQ学習を、Javaプログラムを自作して、3x3の簡単なグリッドに対して行いました。そのプログラムを、もう少し複雑な例題に適用してみたいと思っていました。それに最適な例題が、最近アナウンスされたMATLABのReinforcement Toolboxの解説に載っていました。それをやってみました。

 その例題の概要は図1のとおりです。詳細は、参考文献[2]をご参照下さい。5x5のグリッドワールドで、開始状態から終了状態までの、累積報酬が最大になる経路を学習させるものです。可能行動は、東西南北の4方向。障害物があり、また、special jump(ワープ)が設定されています。どの動きも次の状態で-1の報酬を得ます。罰としてです。例外は2つです。最終状態に達した場合は+10の報酬、また、特定の状態に到達した場合のみ、無条件に特定の状態にワープし報酬+5が動的に得られます。



これをQ学習で解くMATLABプログラムの主要部は図2のとおりです。Reinforcement Toolboxを使っているのが特徴です。詳細は、ここには書けませんが、これはPythonがMATLABになり、KerasがReinforcement Toolboxになったような感じです。


 これを学習(training)させた結果が図3です。結論として、赤丸の軌跡が最適経路であることを学習できました。そして、その経路で得られた累積報酬額は、+11です。これが可能な累積報酬の最大値であることは明らかです。


 今回の記事の本題は、実は、上に示した自作Javaプログラムでこの例題を解くことでした。結論を述べますと、自作プログラムでも同じ結果が得られて、ひと安心というところです。その結果が図4です。図4の右側は、各状態での行動価値関数を示しています。すなわち、赤い矢印は、その状態で、4方向の行動のうち、最大の行動価値(複数個あり得る)があることを示しています。したがって、赤い→をたどると最適経路となります。この学習の行動選択においては、ε-Greedy(単純なランダムではなく)を採用してみました。


 最初に述べたとおり、今回は、自作Javaプログラムの動作を確認するのが主な目的であり、MATLABのReinforcement Toolkitの最も簡単な例題を対象としたに過ぎません。このToolkitは、もっと複雑で規模が大きい問題において、その真価を発揮しそうです。記述の簡便さだけでなく、高性能CPU/GPUや、Hadoopのような分散並列機構もバックで利用できるようになっているようです。

 上記のようなグリッドワールドの問題でも、規模が大きくなると行動状態価値関数(Q値)の計算は次第に困難になることは明らかです。したがって実問題では、「関数近似法」が必要となります。関数近似のひとつとして、deep neural networkを利用するのが深層強化学習(DQN: Deep Q-Network 等)であり、これが現代の主流となっているようです。これについても、調べて書いて行く予定です。

【参考文献】
[1] 大内東、川村秀憲、山本雅人:マルチエージェントシステムの基礎と応用―複雑系工学の計算パラダイム、コロナ社、2002.(特に、3.2 強化学習、pp.70-90)
[2] 以下は、MATLAB(R2019a, R2019b)の強化学習用ツールボックスの説明
・Reinforcement Learning Toolbox
https://jp.mathworks.com/help/reinforcement-learning/index.html?s_tid=CRUX_lftnav
・Train Reinforcement Learning Agent in Basic Grid World
https://jp.mathworks.com/help/reinforcement-learning/ug/train-q-learning-agent-to-solve-basic-grid-world.html
・Create Custom Grid World Environments
https://jp.mathworks.com/help/reinforcement-learning/ug/create-custom-grid-world-environments.html
・Load Predefined Grid World Environments
https://jp.mathworks.com/help/reinforcement-learning/ug/create-custom-grid-world-environments.html


2019年10月8日火曜日

「強化学習」の基礎知識を素早く得るには...

[要旨] 強化学習の基本概念や手法を具体的に(お話としてではなく)学びたいという人は多いと思います。それが、20ページの説明を読めば実現できる!という体験を書きました。

●どのテキストを読めば良いか
 強化学習(Reinforcemnet Learning)をタイトルにしたもの以外に、機械学習関係の書籍の中にも、強化学習が説明されている場合もあります。とりあえず、私のチョイスは以下の3冊です。参考文献[1]は、Suttonによるバイブルとも言われる書籍です。丁寧に書かれていますが、500ページを越える分量にちょっと圧倒されます。これは大相撲で言えば、三役級でしょう。参考文献[2]は、著者の教育研究経験から、「分かりやすさ、易しさ」を重視していますが、後半はかなり高度な内容となっています。少なくとも幕内級〜三役級。

 参考文献[3]、これこそが、今回取り上げた「20ページで具体的に理解できる」書籍なのです。これは、大内東教授(当時北大)らが、2002年に出版したものです。タイトルは、マルチエージェントとなっていますが、第3章第2節「強化学習」20ページ分が素晴らしい。分かりやすく簡潔にして厳密な説明が一貫しており、簡単な例題に対しては自分でプログラムを書いて(書籍には示されていません)確かめることまでできます。これをマスターすれば、少なくとも十両級。


●20頁だけで学ぶ強化学習の基本事項
 この書籍の強化学習で学ぶことは、マルコフ性とマルコフ決定過程、それに基づく状態価値関数とその計算のためのTD(0)学習、行動価値関数とその計算のためのQ学習などです。具体的な数式は図2のとおりですが、ここに出てくる記号、数式で挫折しないように、丁寧かつ一定の厳密さで説明されています。なかなか素晴らしと思います。


 さらに、大規模な問題でQ学習を行う際に問題となる、「知識利用と探索のジレンマ」の説明もあります。Q学習の高速化を図るために、エージェントはランダム方策以外に、グリーディ方策やεグリーディ方策も取れることを、簡単な例で(その長所短所も)説明しています。

●簡単な例題に対してQ学習プログラムを自作する
 基本事項を学んだあとは、簡単な例題で具体的に動作を確認することが重要です。この書籍では、3x3のタイルワールドにおいて、初期状態からゴールまでの最短経路をたどるタスクを取り上げています。図3(a)左側のものですが、ゴール状態に達した時のみ報酬10.0がもらえるようになっています。人間なら、それは最短経路は斜めに進むこと、と直ぐに分かります。この強化学習では、行動価値関数をQ学習で求めることにより、それと同じ結論に達します。図3(a)の右側にその様子を示しました。(右側の図はテキストには載っていません。自作です。)



 次に少しだけ条件を変えてみます。参考文献[1]の例題にあった「ワープ」を取り入れてみます。すなわち、状態1に到達した場合は直ちに(そのステップにおいて)状態4へワープすることにします。それに対するQ学習の結果が、図3(b)右側です。Q(0,NE) = Q(0,E) = 9.0となったこと、また、Q(1,NE) = Q(4, NE) = 10.0となったことから、この場合もQ学習がうまく行ったと言えます。


 図3(a)、図3(b)の右側のような学習結果を得るために、図4のようなJavaプログラムを書きました。50行ほどの短いものです。書籍には、Q学習アルゴリズムはPseudo Codeとして示されていますが、具体的なソースリストは提供されていません。それがまた良いところです。自作することで、強化学習の理解がさらに深まると思いますので。


●今後はどう進めるか
 以上で、小生の強化学習は、幕下から十両まで昇進しました。(ちょっと甘いかも?)その後は、参考文献[2]や[1]がかなり読みやすくなると感じています。また、MATLABやAmazon AWSなどには、強化学習ツール/フレームワークがあり、種々のプロパティを設定するなど、宣言的記述を主とした少ないコーデイングでタスクを実行できる環境を提供しています。今回の基本知識を得た後は、それらも(それほど容易とは思われませんが)活用できるようになるかと思います。

[参考文献]
[1] Richard S. Sutton, Andrew G. Barto : Reinforcement Learning: An Introduction 2nd Edition (Adaptive Computation and Machine Learning series), The MIT Press, 2018.(pdf版は無償公開されているのでびっくりです)
[2] 曽我部東馬:強化学習アルゴリズム入門: 「平均」からはじめる基礎と応用、オーム社、2019.
[3] 大内東、川村秀憲、山本雅人:マルチエージェントシステムの基礎と応用―複雑系工学の計算パラダイム、コロナ社、2002.