Edited at

Androidで動くBASICでHTMLを動的に更新する( BASIC プログラミング )

More than 1 year has passed since last update.

BASIC!は、Androidで動くBASIC インタープリタです。詳しくは以下をどうぞ。どマイナー言語です。

BASIC!は昔ながらのBASICらしいUIであるコンソール/グラフィックの2つのモードとHTMLモードの3つのモードがあります。


1.この記事の内容

この記事はHTMLモードについて記載しています。

HTMLモードは、AndroidのアプリらしいHTMLを利用したUIが作れるモードです。

Androidで動くBASICでHTMLをUIやWEBAPIで利用するの記事ではHTMLモードのまとめを以下のように書いています。


  • BASIC!にはBASICとしては珍しいHTMLモードというモードがある。

  • HTMLモードは、HTML,CSS,javascrptの知識があれば画面UIを簡単に作れる。

  • HTML⇒BASIC!プログラムへのデータ連携ができる。

  • 外部のCSS,javascrptのCDN、ライブラリーを利用できる。

  • メモリーが逼迫している端末だとHTMLモードは課題がある。

  • HTMLモードを使ってWebAPIとの連携ができる。

  • HTMLモードを使わなくてもWebAPIとの連携ができる。

この3番目の「HTML⇒BASIC!プログラムへのデータ連携ができる。」に誤解があったので補足する内容になります。

正しくは、「HTML⇔BASIC!プログラムへのデータ連携ができる。」となります。矢印(⇔)が双方向となっています。

つまりBASIC!プログラムからHTML画面へデータを送り、動的な更新が可能ということになります。


2.実際のテスト例

このテスト例はBASIC!のHTMLモードで表示中のHTML画面のtextareaの内容を動的に更新する内容です。

テスト結果は以下の画像の通り。テストボタンを押すとtextareaの内容が更新されています。

テスト用で作ったBASIC!のプログラムとHTML画面のソースは以下です。

私はHTMLやjavascriptは初心者なので不十分な部分があると思いますがご容赦ください。


3.HTML側にデータ送る方法

javascript擬似プロトコルを利用して既にHTMLモードで表示済のHTML画面に対してDOMで動的な変更を行います。

具体的には以下の通りです。

a.BASIC!側でhtml.load.urlでHTML画面表示

 html.get.datalinkのループでHTML側の応答待ち

b.HTML画面でテストボタンを押す

 Android.datalinkで文字列'//a//'がBASIC!側へ送信

c.BASIC!側でjavascript擬似プロトコルを送る

 Html.Load.Url "javascript:document.getElementById('aaa').value='BASIC!からの送信'"

d.HTML画面のtextareaが更新される

 リロードされずに動的に変更されます。

これ以外にもgetElementById('aaa').srcやinnerHTMLもできる事は確認しています。


4.まとめ

まとめると以下の通りとなります。BASIC!以外のAndroidで動くプログラム言語だと当たり前の事なのかもしれません。


  • BASIC!プログラムからHTML画面へデータを送り、動的な更新が可能

  • javascript擬似プロトコルを使う

BASICを利用される方ならそこそこ便利ではないかと思っています。

多分いないと思いますが…