NS Basic/App Studioについて
2.作られるのは何か?


これを読んでいる人は、全くの初心者よりも、気軽にプログラミングが出来る環境がなくなったなぁ、とボヤいているオッサンが中心であると勝手に仮定しています。
と言う事で、次は、NS Basic/App Studio(以後、NSBAS)が何を作っているのか、を見ていきたいと思います。

何を作っているか、というのは、具体的な生成物の話になります。
Windowsパソコンなら、通常、プログラミングツールから吐き出されるのは、実行形式のファイル、いわゆる「exeファイル」でしょう。
今は亡きPalmであれば、拡張子「.prc」のプログラムファイルとなりますが、そういう具体的な生成物が見えないと、オッサンは不安になって、手を出したがりません。
いや、Webベースのアプリを作るから、何となく、index.htmlを作るんじゃねーの?と予想は出来ますが、具体的に何かは分かりません。

と言う事で、前回作成した「ハロー!」と表示するだけのHello,World!モドキが、どのような形でアップロードされたのかを確認しましょう。
プロジェクト名で作られた「hello」フォルダの下には、こんな構造でファイルやらフォルダが出来ていました。

hello
  +- index.html
  +- messages.js
  +- OfflineApp.manifest
  +- nsb
    +- complexfunction.js
    +- hfunc.js
    +- iscroll.js
    +- nsbmsgbox.css
    +- nsbmsgbox.js
    +- css
       +- style.css
    +- images
       +- background.png
       +- backgroundStripes.png
       +- LauncherIcon57.png
       +- SplashScreen.png

予想通り、index.htmlが存在していますが、その他のファイルは、作成段階では身に覚えのないファイルばかりです。
身に覚えがないけど、何か色々と文字が入っていたプロパティウィンドウを眺めて見ると、それっぽいファイル名をいくつか見つける事が出来ます。

プロパティ

結論から先に行ってしまうと、これらのファイルはまとめてDeploy時に、一緒にサイト上にアップロードされます。
何がどのファイルなのか、よく分からないモノもありますが、アイコンの画像は変更出来そうです。
デフォルトのLauncherIcon57.pngは、こちらです。

ランチャーアイコン
LauncherIcon57.png

また、「スプラッシュスクリーン」(splashscreen)という画像もありますが、これは、こんな画像です。

スプラッシュスクリーン
SplashScreen.png

これは、アプリケーションの起動時に表示されますが、ブラウザベースで起動しても表示されません(現時点でiPod touchでは)
これについては、後述する事にします。

バックグラウンドは背景画像ですね。これもブラウザっぽい発想です。

バックグラウンドストライプ
backgroundStripes.png

他、CSSファイルが幾つかありますが、この辺りがHTML5っぽい感じでしょうか。
ボタンのデザインなども、全てCSSファイル内で定義されていますので、これを書き替える事で、オリジナルのインタフェースも簡単に作れそうです。
これらのファイルは、最初にプロジェクトファイルを保存した時、そのフォルダ内に自動的にコピーされますので、そのフォルダ内のファイルを書き替えても、他のプロジェクトには影響しません。

プログラムの動作として、JavaScriptのJSファイルも幾つかあります。
nsbmsgbox.jsなどは、NSBASのMsgBox関数を実現するためのコードだと思いますが、その他、標準的なBASICコマンドはhfunc.jsに記述されています。
このnsbフォルダが、BASICでいうところのランタイム的役割を果たしていますが、実質、コード類は全部、JavaScriptに変換されているので、単純にライブラリと言った方が良いかもしれません。

さて、特徴的なのは、OfflineApp.manifestといファイル、マニフェストファイルです。
どうも、政治家の皆様の口から吐き出される「マニフェスト」という単語のおかげで、信用できない書類の意味合いをもっていそうですが、こちらは、しっかりとした定義ファイルになります。
では、その中身をのぞいてみましょう。

CACHE MANIFEST

CACHE:
nsb/images/LauncherIcon57.png
nsb/iscroll.js
nsb/nsbmsgbox.css
nsb/nsbmsgbox.js
nsb/complexfunctions.js
nsb/images/backgroundStripes.png
nsb/images/background.png
nsb/images/SplashScreen.png
nsb/hfunc.js
nsb/css/style.css
messages.js

NETWORK:
*
# buildtime: 1322530251.59

項目としてCACHE:とNETWORK:の2つの項目があります。
CACHE:の項目を見ると分かりますが、これはファイルの配置を表しています。
どのファイルをどのフォルダに置くのか、という配置指示のようなもので、CACHE:項目に並べると、それは「ローカルにキャッシュしろよ」という意味を持ちます。
つまり、アプリケーションの初回起動時、ブラウザは、CACHE:項目にあるファイルを自動的にローカル側にダウンロードして、以後、それを使い続けるようになります。
この中に、各種JavaScriptファイルも含まれるため、NSBASで作成したアプリケーションはオフラインでも動作します。
尚、キャッシュの期限はいつまでかと言えば、強制再読込をするか、新しいバージョンがネットワーク上に存在する事が確認できるまで、となります。
つまり、ほとんどの場合、ユーザーは意識することなく、使い続ける事が出来ます。
一方、キャッシュせずに、毎回、ネットワーク上のファイルを参照して欲しい場合は、NETWORK:項目に書きます。
そういうアプリは、実行時にネットワーク環境が必須になりますが、皆で情報を共有するような場合は、有効となるでしょう。

このマニフェストファイルは、manifestプロパティを編集すれば、自動的に作成されます。
NSBASが自動的に添付するファイルは、自動的に記述されますので、その他、自分で用意した画像ファイルやデータ類をここに記述します。
そうする事で、Deploy時にNSBASがファイルを所定の位置にアップロードしてくれます。
ちなみに、自分で用意した画像ファイルなどは、プロジェクトファイル(.nsx)と同じフォルダに置いた方が良さそうです。
独自にフォルダを作ってファイルを入れても、反映されない時がありましたので、単なる予防策ですが、一応、覚えておいても良いかと思います。


スプラッシュスクリーンとアイコンですが、ブラウザベースで実行している分にはあまり関係ありません。
しかし、これをアプリケーションとして登録すると、意味が出てきます。

こちら、拙作『Color/Shape』というゲームの開始画面です。
恥ずかしながら、第1回のNS Basic/App Studioプログラミングコンテストで入賞した単純なゲームです。
http://www.ami3s.net/webapp/c_or_s/、iPhone/iPod touch,iPad, Androidその他、Google Chrome、Safariで動作)

Color or Shape

とりあえず、どんなゲームかの説明は省きますが、iPhoneの場合、これを「ホーム画面に追加」とすると、アプリケーションとして使えるようになります。

ホーム画面に追加

ホーム画面に登録すると、次のアイコンがホーム画面上に表示されるようになります。

アイコン

そして、起動時には、このようなスプラッシュスクリーンが表示されます。

スプラッシュスクリーン

こういう画面は、毎回作っても良いですし、シリーズや自分の定型画面を作っても良いですが、一旦、ホーム画面に置いてしまうと、もはやブラウザベースで動いている感覚はありません。
特に、画面上には、ブラウザにあるようなアドレス表示や各種ツールバーが表示されなくなるため、一般的なアプリと区別するのは難しいでしょう。


と言う事で、NSBASは、実行形式のファイルは吐き出さないけど、ボタン1つで必要なモノは、まとめてアップロードしてくれる、というお話でした。
一般的に「このファイルを解凍して使って下さい」とZIPファイルを受け渡ししていましたが、こちらの場合は、URLを伝えれば事が済みます。
もちろん、対応するブラウザである必要はありますが、StoreやMarketを介さない、いわゆる『野良アプリ』を量産出来る楽しさがあります。


【オマケ】ゲームの遊び方
http://www.ami3s.net/webapp/c_or_s/、iPhone/iPod touch,iPad, Androidその他、Google Chrome、Safariで動作

画面に示された問題に対するターゲットを、すばやく、正確にタッチするゲームです。
ターゲットは「色(COLOR)」と「形(SHAPE)」の属性を持っていますので、TARGETで示された属性を持つ図形を、4つのターゲットの中から正しくタッチして下さい。
例えば、次のような場合、「TARGET」で示されているのは「COLOR」(画面上部中央、赤丸印の中)ですから、この問題の正しいターゲットは「COLOR」(画面左)で示された「青色」になります。
したがって、4つの中から、一番右の青い四角形にタッチするのが正解です。(色が同じなら図形は関係ありません)

ゲーム画像

速ければ速いほど得点が高く、時間切れになるとゲームオーバーです。
この時、画面上部右側の「SHAPE」にある丸い図形は、正しいターゲットではありませんが、間違いではありません。
つまり、右から2番目の緑色の丸い図形をタッチしても間違いにはなりません(図形が同じなら色は関係ありません)
したがって、この問題に対して、正しい青い図形をタッチすれば高得点、出題にある丸い図形をタッチしても一応正解、しかし、その他を選ぶと、即ゲームオーバーです。
優しそうなルールに見えますが、一応正解の図形にタッチした場合、今まで獲得した得点が半分になってしまいます。注意して下さい。

と まぁ、そんな感じですが、NS Basic/Palmでやっていたような事が大抵出来る事と、表示する文字は、styleプロパティに次のようなCSS的書式を与えれば、そのサイズや色 で表示してくれるので、基本的にフォントの大小しかなかったPalmより、多彩な表現が可能な点は扱いやすいです。

font-size:10pt;\ntext-align:center;\ntext-shadow:none;\nfont-weight:bold;\ncolor:#ff6600;\nbackground-color:#333333;

反面、今までのBASICの知識に加えて、JavaScriptのリファレンスや、スタイルシート辞典のようなものを参照しながら書かなきゃならない点は面倒でしょうか。
ただ、どんなツールを選んでも、所詮は土台が違いますから、それも仕方がない事でしょう。


2011.11.30 mizuno-ami.

戻る