● 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の教本 第2版、(株)インプレス、2019年3月21日