アニメ開発の途中ですが、Small Basic オンラインが仕上がってきました。そこで、ブラウザ上でプログラミングができる Small Basic オンラインを使ったプログラミングについて書いていこうと思います。最初だけちょっと難しい話をしたいと思います。これは従来の Small Basic ユーザーのために、Small Basic オンラインでどこがどう変わったかという話です。次回以降は純粋に Small Basic オンラインでのプログラミングを楽しんでいこうと思います。
この記事では Small Basic v1.2 を SBD、Small Basic オンライン v1.0 を SBO と表記します。SBO ベースの Small Basic デスクトップ が計画されていますので、将来はそれが SBD と呼ばれるかもしれないのですが、この記事では従来の SBD を表します。
SBO での変更点
■ エディターの変更点
キーワード、リテラル、オブジェクト、変数名などで色を変えて表示していますが、SBD とは違う色になりました。タブは SBD では 2 文字分でしたが 4 文字分になりました。検索だけでなく、SBO では置換ができるようになりました。
メニューの [Save]（保存） / [Open]（開く） で読み書きするファイルの拡張子が .txt になりました。メモ帳などでも編集しやすくなりました。[Save] ではダウンロードフォルダに保存されます。
メニューの [New]（新規）を押すと “This will clear the existing program. Are you sure?” という確認のポップアップが出ます。SBO では一度に編集できるプログラムは１つになりました。ただし、他のタブや他のブラウザで SBO を起動することが可能です。
以下の機能は SBO v1.0 ではまだ実装されていません。ボタンが押せません。
– Publish（発行）
– Inport（インポート）
メニューに [Debug]（デバッグ）ボタンが追加されました。１ステップずつの実行と、変数の内容も確認できるようになりました。
メニューの [Graduate]（昇格する）ボタンの機能は SBO ではなくなりました。
エディター上で右ボタンを押すと表示される Cut（切り取り）、Copy（コピー）、Paste（貼り付け）、Find（検索）、Format Program（プログラムをフォーマットする）のメニューは今のところなくなりました。右ボタンを押すと、ブラウザのメニューが表示されます。
■ 拡張機能が使えない
Kinect for Small Basic や LitDev などの拡張機能が使えません。
■ 変数の初期値
変数の初期値は “” で、SBD では初期化せずに変数を参照するとコンパイルエラーが表示されましたが、SBO ではエラーがでません。
■ 配列の初期化
SBD では Not = “False=True;True=False;” で Not という配列の初期化ができましたが、SBO では単に Not という変数に上記の文字列が入るだけとなりました。
■ 透明色の指定
Small Basic v1.2 では不透明度を表すアルファ値の指定は “#aarrggbb” でしたが、SBO v1.0 では “#rrggbbaa” になりました。
■ 実装されない機能
以下の機能は SBO（オンライン）では実装できません。コードに書くと “The library member ‘ObjXXX.MbrXXX’ cannot be used in the online editor. Please download the desktop editor to use it.” という文法エラーになります。
- File.GetSettingsFilePath を除く全ての File オブジェクトのメンバー
– ImageList.LoadImage()
以下の機能は SBO v1.0 ではまだ実装されていません。コードに書くと “The library member ‘ObjXXX.MbrXXX’ was available in older versions only, and has not been made available to this version yet.” という文法エラーになります。
– 全ての Desktop オブジェクトのメンバー
– 全ての Dictionary オブジェクトのメンバー
– File.GetSettingsFilePath()
– 全ての Flickr オブジェクトのメンバー
– GraphicsWindow.CanResize
– GraphicsWindow.GetPixel()
– GraphicsWindow.Left
– GraphicsWindow.Title
– GraphicsWindow.Top
– Program.ArgumentCount
– Program.Directory
– Program.GetArgument()
– TextWindow.CursorLeft
– TextWindow.CursorTop
– TextWindow.Hide()
– TextWindow.Left
– TextWindow.Pause()
– TextWindow.PauseIfVisible()
– TextWindow.PauseWithoutMessage()
– TextWindow.Show()
– TextWindow.Title
– TextWindow.Top
■ 仕様変更
以下のプロパティは SBO v1.0 ではリードオンリーになりました。値を代入しようとすると文法エラー “Property ‘ObjXXX.PrpXXX’ cannot be assigned to. It is ready only.” になります。
– GraphicsWindow.Width
– GraphicsWindow.Height
プロパティの初期値は異なるものがあります。
GraphicsWindow.FontName で使えるフォントは限定されています。デフォルトのフォントは “Roboto” です。
Program.Pause() というデバッグ用のメソッドが追加されブレークポイントとして使用できます。ちなみメソッドは SBD では操作と呼ばれていました。
■ Shapes のサイズ
Shapes.AddRectangle(100, 100) で正方形を作ると、ペンの太さも含めて 100 x 100 ピクセルの大きさでした。一方、GraphicsWindow.DrawRectangle(10, 10, 100, 100) で作った場合はペンの太さの分だけ大きくなっていました。SBO では後者に統一され ペンの太さが 2 ピクセルだとどちらも 102 x 102 ピクセルの正方形が描かれるようになりました。
■ タートルのデザイン
タートルのデザインが変更になりました。特にサイズが大きくなりました。
■ タートルの軌跡
タートルの軌跡は SBD では Shapes と同じで、後に作られたほうが手前に表示されていましたが、SBO では Shapes よりタートルの軌跡が常に手前に来ます。
新しいプログラミングスタイル
上記変更点を踏まえて、新しい Small Basic のプログラミングについてポイントを説明しようと思います。
■ タイトルは自前で作る
GraphicsWindow.Title も TextWindow.Title も変更できなくなったので、タイトルを表示したいときは Shapes.AddText や TextWindow.WriteLine などを使ってウィンドウ内に表示します。あるいは作らないという選択もありでしょう。
■ ウィンドウサイズに依存しない工夫
ホームページがさまざまな大きさのデバイスにも対応できるようにレスポンシブデザインという考え方があります。SBO も GraphicsWindow.Width や GraphicsWindow.Height が指定できず、ブラウザのウィンドウサイズに影響されることから、レスポンシブデザインの考え方を取り入れるといいでしょう。具体的には GraphicsWindow.Width と GraphicsWindow.Height を監視して、変更されたときに、画面上の配置をやり直すようにします。
まとめ
今回、分かっている範囲で SBO の変更点と、それを踏まえた新しいプログラミングスタイルについて書きましたが、これから SBO 向けにたくさんプログラムを書いていこうと思うので、今回の記事は必要に応じて更新していこうと思います。
関連項目
追加リソース
- Small Basic オンライン (TechNet Wiki)
のんきさんの年月記 