ラベル Javascript の投稿を表示しています。 すべての投稿を表示
ラベル Javascript の投稿を表示しています。 すべての投稿を表示

2020年7月27日月曜日

今さらJSONをJavaScriptで検索?なんて言わないで

【要旨】植物に関する自由形式記述からJSONファイルをJAVAを用いて自動生成しました。その結果のJSONの検索プログラムを、今回はJavaSriptで書きます。初心者の方にとって、ご参考になる点があれば幸いです。

JSONを扱うならJavaScriptを使うのが普通?
 これまで、日本語の係り受け解析(MeCabとCaboChaによる)を使ってJSONを自動生成するプログラムをJAVAで作りました。その流れで、結果のJSONを検索するプログラムもJAVAで書いてきました。そこでは、ラムダ式とストリームが有効に働きました。

 しかし、JSONは元々JavaScriptと相性が良く、特にwebアプリにする際はJavaScriptの方が何かと便利かも知れない。そこで、今さら、という思いもあるのですが、いくつかの形態の検索をJavaScriptで作成してみました。具体的な方法はいくつかあるのですが、今回はjQueryを利用します。結論としては、JAVAの場合とほぼ同様の書き方でできました。

 JAVAで実施した場合の記事は以下にあります:
(対象としたJSONファイルの説明はこの記事の後半にあります。)

JavaScriptによる検索(上記JAVAの場合の3例に対応)
 以下にソースコードを示します。JAVAの場合と同様に、.filter、.map、.reduce、.forEachなどを使っています。従来型の書き方と比較すると、このような検索をするのに、明示的なforループが全然出てきません。(テキストで綺麗に表示する方法が分からないので、画像にしてあります。)出力は、上記のJAVAの場合とほぼ同じ(形式が若干異なるが)になりましたので、省略します。

↑葉が"倒披針"で、花が"白"または"紫"の植物
↑掲載されている植物の果実の種類(type)を重複なく列挙する
↑植物の種類(区分)毎に、それに属する植物の葉の特徴を纏める

 こんな感じでJSONを検索できるので、フォームやボタンをつけて、ユーザフレンドリーな検索画面は作れそうですね。

2019年10月25日金曜日

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