MIT App Inventorさんから「いいね」していただきました

　去る８月１８日のオープンキャンパスで、情報工学科では、授業体験として「Androidアプリ体験講座」を開催しました。約40名の高校生が参加して、たいへん盛況でした。そこでは、米国MIT CSAILで開発されているApp Inventorを使ってのスマホアプリ開発体験でした。

　その講座の模様をツイートしましたところ、本家のMIT App Invenorから「いいね」されました、という通知が届きました。ちょっと嬉しいですね。

　ツイートの中に書かれている参照本文は以下のものです。

http://goo.gl/9gge8f 

Javaの教科書サポートページに当方の解説資料を掲載していただきました

　Javaプログラミングの書籍は多数あるのですが、そのうち下記の書籍は、Java教科書として広く使われています。神奈川工科大学 情報工学科でも採用されています。現在は第３版ですが、第１版（2000年10月発行）、第２版（2007年月発行）なので、約18年間の実績があります。その間、Javaでは幾つかの大きな改訂がありましたが、それに対応して来られました。

　当方では、この第３版で学ぶに当たっての参考資料（pdf版60ページ）を作成していました。それを、著者の立木秀樹先生（京都大学）により、下記の教科書サポートページに掲載（資料ファイルへのリンク設置）していただきました。皆様にもご活用戴ければ嬉しいです。

https://www.i.h.kyoto-u.ac.jp/users/tsuiki/javaEveryone3/index.html
（このwebページの「リンク」をご覧ください。）

Deep Learningで岩田一男先生の英作文とGoogle翻訳を識別

　高校初級〜中級の英作文問題について、Prof. Iwata（故 岩田一男教授）の英作文テキストにある英文例とGoogle翻訳による英訳を比較して、その相違を少し調べました。Prof. Iwataを知っている若い人はあまりいないかも知れませんが、著名な英文学者で、英語教育でも有名でした。先生の以下の著書（40年位前に出版された）にある例題を対象としました。

次の２点を検討します。
（１）Google翻訳（和文→英文）結果の主観評価
（２）人工知能（Deep Learning）によるProf. IwataとGoogleの相違の評価

■岩田一男先生の英作文とGoogle翻訳

岩田先生の本の例題（数百以上の英作文例）から、ランダムに50件を選択。その和文をGoogle翻訳して見ました。驚きました！50件のうちの12件は、Prof. IwataとGoogle翻訳の英文が完全に同じでした！その幾つかを以下に示します。

【Prof. IwataとGoogleの英文が完全一致した例（2018-8-29現在）】
●本当を言うと、私は彼といっしょに行きたくない。
　→ To tell the truth, I do not want to go with him.
●もし私がきみなら、そんなことは言わないのに。
　→ If I were you, I would not say such a thing.
●なお悪いことに、雨が降り出した。
　→ To make matters worse, it began to rain.
● 彼は旅券をホテルの部屋に置き忘れたにちがいない。
　→ He must have left his passport in the hotel room.
（以下、８件は省略）

　異なる英文となった残り38件のGoogle翻訳も全て妥当なものと思われます。少なくとも中学校〜高校レベルの英作文では、Google翻訳性能は驚異的とも言えます。

■AIによって両者の相違を認識できないか？

別記事で述べた、Deep Learning for Kidsでは、画像認識の他にテキスト認識も対象としています。それを使います。両者（Prof. Iwataの英文とGoogle翻訳結果の英文）に少しでも相違があった38件をそれぞれ、Prof. IwataとGoogleというラベルを付けて分類して、学習させます。

和文38件の英訳をそれぞれのラベルに入れる

前回記事（画像認識）の場合と同様に、これをIBM Watsonにかけると数分で学習結果が返ってきました。上に述べた50件とは別に、岩田先生の本から、新たに例題を選択し、その英文とGoogle翻訳英文をテスト（評価）にかけてみました。その一部を以下に示します。

両者の英文対して、何らかの違いをAIは見つけたようです！的中しましたね！

　もう一例あげます。今度は、若干低い確度ではありますが、Google翻訳の結果も、Prof. Iwataのものと判定されました。それだけ、Google翻訳は優れているということになるでしょうか。

 まだまだ学習データの英文の個数は不足だと思います。また、定量的な評価をするには至っていません。しかしながら、何か可能性を秘めているように思われます。

もう一歩進める：MIT App Inventorで人工知能体験

　オープンキャンパスでは、スマホを使ったAI（人工知能）アプリの開発体験をしました。とても好評で良かったのですが、さらにもう一歩進めることを検討してみます。この体験は、スマホで撮影した物の画像をMicrosoftのImage Recognizerに送って、その認識結果を利用するというものでした。この場合、ニューラルネットワークを使った学習（training）そのものには、受講生は全く関わっていません。そこんところに少し入り込みたいです。

　つまり、自分自身のモデルを用意して（分類したい画像などを収集し）、学習させ、その結果のニューラルネットワークを使って、認識テストしたい、ということです。でも、そうなれば少なくとも、いくらのコード（Tensorflowを使う場合は数十行程度、Kerasを使うと十数行程度）は書く必要があります。また、SonyのNeural Network Consoleを使うとコーディングは不要ですが、ニューラルネットワークの構成を理解してそれを（ビジュアルに）与える必要があります。

　そういうことすらせずに、自分のモデルを使ったAI体験ができれば、初心者には非常に良いのではないか。実は、それをやっているプロジェクトが英国にすでにありました。一度ご紹介したことがあますが、以下のサイトです。

Deep Learning for Kids
https://machinelearningforkids.co.uk/#!/about

　タイトルは、for Kidsとあるのですが、大人が（情報工学科の教員でも）やってもたいへん面白く、ちょっとした実用性も感じられます。さっそくやってみましょう。ここでは、AIとして最も基本的な、教師あり学習による画像認識をやります。

■５種類のコインを識別する問題

対象は何でもいいです。各自用意してください。できれば、３種類〜５種類くらいのもので、それぞれ10個以上の個体があるものが望ましいです。私の場合は、かって欧州出張した際に持ち帰った幾つかのコインの識別を行うことにしました。

５種類のコインの識別をやってみよう

　上記に記したURLへ行って（ユーザ登録は必要）、ブラウザだけで以下を行えます。コーディングはありません！

●Step1:５つラベル（コインの名称）を用意し、コイン画像を設定
　コインは５種類あります。それぞれ何枚かのコインがあります。適宜とりだし（表裏や配置角度はランダムで）撮影して、その画像をラベルのフォルダに入れます。ここでは、各ラベルごとに20枚の画像を用意しました。

裏表や向きはランダムに撮影：コイン５種ｘ20枚＝100枚

これらの画像をラベル（コインの種類）毎に分けて与える

●Step２:これを学習（training）させる。ボタンを押すだけ。
　表示されたボタンを押すと、IBM Watsonによる学習が行われます。各種パラメータ（層の構成、学習率、許容誤差、等々）の設定も無しでWatsonにおまかせ。画像の分類場合は、Recognitionサービス、テキストの分類の場合はAssitantサービスなどが働きますが、利用者は特に意識する必要はありません。まもなく（今回の例では約５分後に）学習結果が得られました。無料枠で優先度は低いうえに、数段のコンボリューションを含む多層のニューラルネットで学習させているはずなので、それにしては速いと思います。これで、必要なニューラルネットワークが構成されました。以下のように表示されます。

学習の完了

●Step３:学習（training）とは別に用意したテスト用画像で認識させてみる。
　以下のウインドウにテスト用画像をひとつづつ与えてテストを実行する。各ラベル（コインの種類）ごとに、２枚のテスト用画像を与える。表裏や配置角度はランダムで。

●Step４:テスト用画像に対する認識結果を確認する。
　10枚のテスト画像が、すべて、確度（confidence）90%〜91%で正しく、認識された！これで完了！例えばですが、日本の10円玉と旧マルクの10pfennigは、色やデザインがかなり似ているのですが、難なく識別されました！

■ScratchやMIT App Inventorも登場！

上記のStep1〜Step4だけでも十分ですね。しかし、画像をカメラで撮影して入力しやすくしたり、Watsonによる認識結果を、より分かりやすく表示したり、ほかのアプリと組み合わせするのに、ScratchやMIT App Inventorが連携して動ける仕組みも用意されています。（これについては、別途書く予定です）

ScratchやMIT App Inventorとも連携！

JavaFXでのローカル座標系と表示デバイスのピクセルとの関係

JavaのGUIやグラフィックスは、従来のSwingからJavaFXに変更になったことは（Swingが消滅したわけではありませんが）すでに広く知られていると思います。

JavaFXは、これまでのSwingによるグラフィックスと比べて、とても楽しめるものになっています。描画には、Shapeクラスによるものと、従来のSwingに近いと思われるCanvasクラスによるものがあります。特に、Shapeクラスによるものは、きめ細かなインタラクションが可能であり、使い道がぐんと広がった気がします。また、アニメーションの方法も３種類備わっていて、高度な動きを比較的簡単に指定できます。

本格的にグラフィックスやアニメを専門にやる人は、他の有名な専用ソフトを使うのでしょうが、私のように、そうではないが汎用的なJavaプログラミングのなかに、GUIやグラフィックスも含めたいという人には、JavaFXは重宝しそうです。

Swingと比較して、JavaFXでは、グラフィックスの表示が格段に滑かになっています。恐らく、これは、コンポーネントのローカル座標系と表示デバイスのピクセルとの関係が次の図のようになっていることに起因していると思われます。

上記のテキストでは、「個々のNodeオブジェクトは、double型で表されるローカル座標系をもちます。 … 整数座標が画面の端およびピクセル間の間隙に割り当てられ、ピクセルの中心が隣り合う整数座標値の中点となっています。（図参照）」と説明されています。このような説明は、他の書物にはほとんど書かれいないようですので、理解を新たにできます。

Mobile Apps Lecture in the Campus Visit attracts many high school students

At the campus visit to Kanagawa Institute of Technology (in Japan) that was held this summer (on August 18, 2018), Department of Information and Computer Sciences opened a lecture on application development for smartphones. Approximately 40 high school students participated and experienced application development using MIT App Inventor. Most of them use smartphones, but have little experience in computer programming. For such students as well, it is aimed to have experiences that using App Inventor can develop quite sophisticated applications.  With this as a trigger, we hope that many of them will head to the fields of computer science and computer engineering in the future.

The following three subjects were prepared:

Experience of image recognition by artificial intelligence

Shoot something interesting with a smartphone camera and send the image to Microsoft's Image Recognizer. Normally, in several seconds to several tens of seconds, the result of recognition of the image (what is shown, what kind of situation it is, etc.) is returned as a short English sentence. The student evaluates the recognition result (with max 100 points). Furthermore, comments such as which is good or bad are also given. By pressing a button, they can store and share the screen shot of the screen including the evaluation result into the Dropbox.

Your high school building emerges by scraping the screen

Given the student's high school name (or place name) and press the button, the corresponding building appears on the Google Maps. But as soon it disappears, the screen gets darker (filled with gray). But do not worry, rub your screen with your fingers as if rubbing with a coin. Then the school building will gradually appear again.

Reproduction of actual traveling locus at Suzuka Circuit

Our University Solar Car actually ran the Suzuka Circuit at the race. By using the trajectory data (latitude and longitude taken every 5 seconds) , the running is reproduced. The latitude and longitude are converted to the coordinates of the smartphone screen. Latitude, longitude, elapsed time, current speed (approximate), etc. are displayed every moment. It can be confirmed that it is fast in the straight part and slower near the hairpin. You can also display it faster or slower than the actual time.

On this day, starting from scratch, they first worked on simple exercises. The actual material used is the second one (Your high school building emerges by scraping the screen). However, because they have not enough time, they cannot accomplish this from scratch. So we prepared semi-finished products so that they could complete it by adding some processing (block) to it. Many students completed the targeted application. They are expected to go home with this and review it again. Furthermore, based on that, we hope that they will create a program to solve the problem they found themselves.

In this lecture, we targeted only Android. Many participants brought their own Android, but to the participants who did not, the organizer lent Android terminal. However, nearly one third of the participants have also found that they usually use iPhone. Currently, iOS version of MIT App Inventor is under development. In addition, Thunkable already released cross platform ThunkableX (iOS + Android). In the near future, we intend to prepare lectures for iOS version as well.

夏休みの宿題代行じゃありませんが

　生徒、学生の皆さんにとっては夏休みはまだ大分あります。夏休みの宿題は昔のように出されているのではないでしょうか。「宿題代行サービス」というのも存在するようです。この記事は、そんなことはしませんが、何かヒントになることがあればうれしいです。

　台風の進路軌跡を、自分自身でスマホに描いてみませんか？もちろん、すでに、台風進路図などは公開されていますが、自分で好きな台風アイコンも選んで（作って）進路に沿って実際に動かして見ると、何か新鮮みを感じ取れるのではないでしょうか。やってみなきゃ分からない！（NHK番組 "大科学実験"でもそう言っていた。）

• 気象庁のホームページから、過去の台風の中心位置、中心気圧、最大風速、大きさ等々のデータを得られます。
• そのうちから、超大型のまま御前崎に上陸した台風21号（2017年）を取り上げます。その中心位置と最大風速の変化を図示します。
• 下図からわかるとおり、この台風は発生後まもなく「最大風速は猛烈な」となり、衰えずにそのまま御前崎に（最大風速80m/sで）上陸してしまいました。
• 台風でたいへんな被害を受けた方々にはお見舞いを申し上げます。そのうえで、台風の進路を以下のように眺めているとその軌跡は美しい自然の神秘とさえ思えます。

　さて、このアプリは、Thunkable Classic (for Android) で作成しました。MIT App Inventorでもほとんど同じように作成できるはずです。そのブロック図は、以下のように単純なものです。中央の大き目のブロックでは、台風の位置に独自マーカーを打っています。これを観測時間間隔（３時間とか６時間）ごとに繰り返しています。最後部1/3くらいのブロックは、単に最大風速に応じた独自マーカーを設定するだけです。

　なお、上記の結果図には、台風進路を折れ線でも示していますが、上記プログラムにはそれがありません。独自のマーカー（最大風速により色を変えた）だけを表示しています。進路の折れ線も描くには、以下のブロックを（マーカー描画の次に）追加する必要があります。

■さらに発展形も考えられる

• 今回は簡単にするため、制御ボタンなどを付けませんでした。表示スピードを変化させる、発生からの経過時間や中心気圧も表示する、等々できると思います。
• たくさんの台風を登録して、適宜選択表示するには、ファイルを使ったり、あるいは、クラウドDBと接続するなども十分可能です。Thunkableにはそれらの機能も各種備わっていますので、使いこなすと素晴らしい独自のアプリになるでしょう。

Visualizing Operations on Java Serial/Parallel Streams

Let's examine the operations of streams installed in Java SE8 or later. Again, lambda expression is essential. You can use the CPU performance monitor or peek command to observe the flow of processing (pipeline). However, here we want to observe at a user program level in a more friendly way. There is a good program (StreamTurtle.java) in the examples published at the following URL made by Professors Hideki Tsuiki and Taeko Ariga. 

https://www.i.h.kyoto-u.ac.jp/users/tsuiki/javaEveryone3/download.html

The above program was created with reference to it.

• Line 16: A stream composed of integers 1 to 8 is generated.
• Line 17: Replace each integer of the stream with an object of FPTurtle class which means turtle. Depending on the integer, the (x, y) coordinate and orientation of the turtle are given.
• Line 21: Each turtle m of the stream draws a polygon with a red color. (The draw method draws a dodecagon with the specified color.) Leave it in the stream.
• Line 22: Each turtle m of the stream moves slightly to the right and then draws a polygon in green. Leave it in the stream as it is.
• Line 23: Each turtle m of the stream moves slightly to the right and then draws a polygon with blue color. Leave it in the stream as it is.
• Line 24: This is a stream end operation. After making each turtle of the stream black, advance forward by 100 steps and stop.

The above figure shows the execution status of this program. Compared to the source list, is something wrong? is something strange? In line 21, all 8 turrets should be red and draw a polygon. After that, in line 22 all turtles draw a green polygon this time. It seems to proceed like that. However, actual execution results are not. As you can see from this execution result, the stream of line 17 begins to run when the aggregation of stream of line 24 starts. Continuously, it flows downward like a pipeline.

Now, let's put the following method call in line 20 of the above list.

          .parallel()

The result of the execution is shown in the figure below. This parallel () is for parallel processing of streams. It was quite different from the previous run. It seems that any four turtles are running at the same time. Exactly, the PC used for this execution has 4 cores. It seems that parallel execution has been done accordingly.

Next, let's run it on another PC with 8 cores. The result is shown below. This time, surely, processing by 8 turtles is always carried out.

The execution time (elapsed time) is also shorter according to the number of used cores as follows. However, since the other programs are running on the PC and the usage of the memory varies, the execution time will fluctuate to some extent each time it is executed.

What is Java’s wildcard type (with lower bounded or upper bounded)

Type parameters are used for Java collection classes and so on. Some of them have wild cards. The symbol "?" refers to it. It is explained that it points to "all types", but it is not very clear. In addition, there are upper bound type <? extends type> and lower bound type <? super type> that restrict the range of that type. I do not understand more and more? For example, the API specification of a method called merge in Java 's ConcurrentHashMap class is as follows:

  V merge(K key, V value, BiFunction<? super V, ? super V, ? extends V> remap)

Oh no, it feels like. But first of all, let's examine what these types mean specifically. There was a good commentary on the following URL:

     https://www.thekingsmuseum.info/entry/2016/04/02/155821

     https://www.thekingsmuseum.info/entry/2016/04/19/232836

Based on that, I drew some figures. Will not it be quite clear this way? The first figure is a comparison between the Class type and the Generic type. The latter takes type parameters as arguments. For example, ArrayList <Double> means an ArrayList type with Double type objects as elements. Here, there is something to notice. The Class type on the left has super - sub inheritance relationship, but the right-hand side Generic type does not have it. That is, the inheritance relationship of the type parameter has no relation with Generic type.

Let's take a look at the following figure using a wild card "?" for the type parameter. For example, ArrayList <?> Is the supertype of all ArrayList <E> types.

Next is upper bounded wild card. For example, ArrayList <? extends Number> is a supertype of ArrayList whose type parameter is the Number class or its subclasses. It has no inheritance relation with other ArrayList types.

In addition, there is a lower bunded wild card. For example, ArrayList <? super Number> is a supertype of ArrayList whose type parameter is the Number class or its superclass. It has no inheritance relation with other ArrayList types

We will examine how these wildcards are effectively used in a separate document. Here I showed only the inheritance relationship of types, but with this alone, understanding of one step will advance.