2019/05/09

C# (10) SBO 既知の留意点

Small Basic Online (SBO)の既知の留意点はオフィシャルブログの記事や GitHub の Issues にまとめられていますが、英語ということと載っていないものもあるので、ここにまとめ直しておきます。2019年5月9日現在の既知の留意点です。番号は GitHub Issues のものです。

  • #12 起動に時間がかかる。
  • #13 発行とインポートがサポートされていない。
  • #14 タートルが Edge ブラウザで表示されない。
  • #57 "#12345678" のような透明な色は無視される。
  • #58 GraphicsWindow.DrawImage() がイメージを表示しない。
  • #69 GraphicsWindow.Title がサポートされていない。
  • #71 サブルーチン名と変数名が同じだと文法エラーとなる。
  • #74 GraphicsWindow.GetPixel() がサポートされていない。
  • #87 Shapes.Rotate() が図形の中心で回転しない。
  • #88 Shapes.Zoom() が図形の中心から拡大・縮小しない。
  • #89 Shapes.Zoom() の倍率を1にするとプログラムが停止する。
  • #92 Shapes.Rotate() の角度を360にするとプログラムが停止する。
  • ファイルの拡張子が .sb ではなく .txt になった。
  • GraphicsWindow.WidthGraphicsWindow.Height がリードオンリー。
  • GraphicsWindow.FontBold の規定値が "False"
  • Program.Directory がサポートされていない。
  • File.GetSettingPath() がサポートされていない。
  • File.GetTemporaryPath() がサポートされていない。
  • 配列を a = "1=One;2=Two;" のような初期化ができない。

ある程度、動くようにはなったものの、まだ正式版とするにはそれなりの修正が必要となりそうです。どの程度動くのかということでは、サンプルとして鯉のぼりのプログラムを修正してみました。SBO 1.0 ではまだ発行ができないので、こちらにソースとその結果のスクリーンショットを公開しました。

関連項目

| | コメント (1)

2019/05/08

C# (9) Blazor とは

前回、Blazor について簡単に触れました。Small Basic Online 自体が Blazor アプリケーションとなっています。今回は私自身もまだよく判っていないところもあるのですが、Blazor とは何かについて簡単にまとめてみたいと思います。

Blazor について調べてみるとまず jsakamoto さんの Slide Share のスライド C#でSingle Page Webアプリが開発できる「Blazor」が見つかりました。jsakamoto さんは Small Basic 1.0 向けの Excel や IE の拡張ライブラリを作られた方です。

一言で言えば Blazor はブラウザ上で動く SPA (Single Page Application) を作るための開発から実行までの環境です。SPA とはその名のとおり一つのページでさまざまな動作が可能なブラウザ上のアプリケーションです。Small Basic Desktop から発行したプログラムは IE(インターネットエクスプローラー)上の Silverlight というプラグインで実行できましたが、Small Basic Online ではエディタからコンパイラ、実行まで全てブラウザ上で行えます。

Blazor 以前の環境の SPA ではブラウザ上で JavaScript(や TypeScript)のプログラムが動いていました。Small Basic Online の初期のバージョンも TypeScript で動く仕組みでした。それが Blazor では C# でプログラムを記述できるようになりました。.NET の代表的な言語です。.NET の言語は Java のように中間言語にコンパイルされ、その中間言語が実行時に解釈されて動きますが、Blazor ではその中間言語をさらに、WebAssembly というブラウザ共通の実行コードで解釈し実行しているようです。

Blazor の表示は HTML と CSS をベースとしており、Small Basic Online ではグラフィックスとして SVG を利用しています。

Blazor は開発途中でしたが、実験段階を終え、公開プレビュー版となりました。間もなく正式版になるところです。

| | コメント (0)

C# (8) Shapes のデバッグ

Small Basic Online v1.0 のソースのどこから手をつけたらいいのか悩んでいたのですが、先日見つけた Shapes の回転と拡大・縮小の不具合の修正案が示されたので、そこに着目していきたいと思います。

今回取り上げる問題点は2つあり、Shapes.Rotate が図形の中心で回転しないという問題Shapes.Zoom が図形の中心で拡大・縮小しないという問題です。それぞれ GitHub の Issue として報告済みです。

Rotate

それに対しての学生の alxnull さんによる修正案がこちらです。まず、対象となっているファイルは Source/SmallBasic.Editor/Libraries/Shapes/BaseShape.cs というファイルです。Source フォルダにはいくつかのプロジェクトがありますが、今回の修正箇所は SmallBasic.Editor というプロジェクトの中で、エディタの一部になります。このエディタの中に Libraries というフォルダがあり、実行時に呼ばれるライブラリの記述があります。Small Basic Online のエディタは Blazor という仕組みを利用しており、図形は SVG として扱われています。

今回の修正案はこの SVG の図形に対して CSS の transform-origin という style で図形の中心を指定する center というキーワードを与えています。この修正で Chrome では問題が解決していることを確認できましたが、Edge では直っていませんでした。いろいろやってみたところでは、Edge 上では SVG の図形に対する CSS がうまく働いていないようです。

CSS を使わずに SVG の記述だけでうまく対応できるよう alxnull さんに働きかけていく予定です。

関連項目

| | コメント (0)

2019/03/01

C# (7) ビルドしてテスト

前回、ローカルフォルダのソースも更新されたので、今回はこれをビルド(コンパイル)し、テストします。

スタートページの「最近」というところにソリューションファイル「SmallBasic.sln」が表示されているので、これをクリックします。

Vs_open_solution

出力にエラーが出ますが、左下に「準備完了」が出るのを待ち、「スタートアップ プロジェクト」の欄に「SmallBasic.Editor」が選ばれた状態で、その右の緑の三角のある「IIS Express」ボタンを押します。

Vs_build

ビルドが完了すると Small Basic Online のエディタがブラウザ上に表示されます。このときの Visual Studio の画面は以下のようになります。

Vs_executing

これでビルドは完了です。ここからは実行環境でのテストになります。テストにも色々な手段がありますが今回は以前あった Issues (問題点)の再現テストを行います。

GitHub の sb/smallbasic-editor に登録した Issues を表示します。今回確認するのはすでにクローズしたものになるので、「Closed」を選んで #44~#47 を順に確認します。

#44 は単純に GraphicsWindow.DrawEllipse() で楕円を描きます。本来輪郭だけが描かれるはずが前回の版では黒く塗りつぶされていました。新しい版で試したところ、直っていませんでした。

Issue_44

この問題は Edge でのみ発生し、他のブラウザでは正常に表示されることが分かりました。原因は Edge が #00000000 を透明と認識しないことにあるようです。

#45 は GraphicsWindow.DrawText ()と Shapes.AddText() で文字の表示位置が違っていたのですが、これは修正されました。

#46, #47 は文字リテラル、変数名、 サブルーチン名、ラベル名に漢字を使うと文法エラーになっていました。これも修正されました。

テストの結果は以上です。過去の問題も記録が残っているので同様にテストすることができます。過去の問題の再現テスト(リグレッションテスト)を新しいリリースの度に行うことは重要です。一度直したところに別の修正を入れて昔の問題がまた発生するようなこともあるからです。

これまでの問題もほぼ修正されてきたので、『小学生からのプログラミング』掲載のプログラムの動作確認を続けていきたいと思います。

(つづく)

| | コメント (1) | トラックバック (0)

2019/02/27

C# (6) リモートリポジトリとの差分をプル

前回に引き続き、今度は Visual Studio を使ってリモートリポジトリの内容をローカルにプルします。これも第3回で簡単に説明しましたが、今回詳しく説明します。

スタートメニューから Visual Studio 2017 を選んで起動します。「表示」メニューから「チーム エクスプローラー」を選びます。

Vs_team_explorer_menu

チーム エクスプローラで第3回に作ったローカルリポジトリ Repos をダブルクリックします。

Vs_local_git_repository

「プロジェクト」の「同期」をクリックします。

Vs_sync

「入力方向のコミット」の「プル」をクリックします。

Vs_pull

「リポジトリはすでに最新の状態です。」と表示されればプルが完了です。

Vs_repo_updated

次回は最新のソースから Small Basic Online をビルドします。

(つづく)

| | コメント (1) | トラックバック (0)

2019/02/26

C# (5) フォークへのマージ

Small Basic Online のリポジトリが更新されました。前回レポートした Issues #44~#47 が修正されたようなので確認したいと思います。

・フォークしたリモートリポジトリへのマージ
・リモートリポジトリからローカルへのプル
・ビルド
・レポートした Issues の動作確認

という手順になりますが、今回はオリジナルのリポジトリ sb/smallbasic-editor からフォークした nonkit/smallbasic-edior へのマージについて、第3回にも簡単に説明しましたが、改めて詳しく説明します。

この手順は私がリモートにもリポジトリ nonkit/smallbasic-editor を作ったので必要になる手順です。直接 sb/smallbasic-editor からローカルレポジトリ経由でプルする場合は、以下の手順を省略できます。

緑の [New pull request] ボタンを押します。

New_pull_request

マージ先に nonkit/smallbasic-editor を指定します。

Comparing_changes

するとマージ元が nonkit/smallbasic-editor だったため、双方が同じブランチになって There isn't anything to compare. (なにも比較するものがありません)と表示されます。そこで compare across forks (フォーク同士の比較)というリンクをクリックします。

Compare_across_forks

再びリポジトリが表示されるので、今度はマージ元に sb/smallbasic-editor を指定します。

Choose_a_head_repository

すると問題がなければ緑の [Create pull request ] ボタンが出現するので、これを押してプルリクエストを作成します。

Create_pull_request

次の画面ではプルリクエストのタイトル、コメントを入力し、必要に応じて右側の欄にも情報を入力します。今回は担当に自分を指定し、分類として作成した sync というラベルを設定しました。入力後 [Create Pull Request] ボタンを押します。

Pull_request_title

これでプルリクエストが作成されたので、[Merge pull request] ボタンを押してリクエストを受け入れます。

Merge_pull_request

さらに [Confirm merge] ボタンを押します。

Confirm_merge

紫の Merged が表示されればマージの終了です。

Merged

(つづく)

| | コメント (0) | トラックバック (0)

2019/02/20

C# (4) ここからどう進めるか

リポジトリの最新版をローカルでビルドできるようになりました。

ここからどう進めていけばいいでしょうか。しばらく Small Basic Online をいろいろと動かしてみるのがいいかもしれません。どの程度動いているのか肌で感じるところから始めるのがいいかもしれません。それで見つかった問題点は Issues に登録していけば貢献になります。

テスト用のプログラムを作ったり、過去の Small Basic Desktop 用のプログラムを動かしてみたり、いろいろやり方はあると思います。そこで、私の場合は日本で出版された Small Basic の市販本を順番に試してみようかと思います。まず、最も最近発売された『カンタン。タノシイ。カッコイイ。小学生からのプログラミング Small Basicで遊ぼう!!』からチャレンジしてみます。

この本は4つのミッションで構成されているのですが、2つのミッションを終えたところで、以下の問題点が見つかり Issues にレポートしました。

・#44 GraphicsWindow.DrawEllipse が黒く塗りつぶされる
・#45 テキストのY座標が上部ではなくベースラインになっている
・#46 漢字などの文字列が文法エラーになる
・#47 漢字などの変数名、サブルーチン名、ラベル名が文法エラーになる

他にもブラウザやOSによって微妙に動きが違ってくるようです。まだ現象がはっきりしていないのでレポートできていないのですが、TextWindow での入力で Enter が効かなくなったり、出力の文字が重なったりするのを見ました。Small Basic Online は macOS でも動きます。まだ試していないですが、Visual Studio も macOS で動かせばビルドもできそうです。スマホでも動くのですが、入力がうまくいかない印象です。

Small Basic Online はブラウザ上で動くので、動作確認範囲も広く、より多くの方の協力が必要だと思いました。

一方でリポジトリのソースを少しずつ眺めるようにし始めたところです。全く知らないものにチャレンジするとき、まず慣れていくことが第一歩になると思います。全体の構成を把握したり、すでに修正された部分の差分を読んでみるのも理解につながっていきます。

それから、この連載の目次を作りましたのでご活用ください。

(つづく)

 

| | コメント (0) | トラックバック (0)

2019/02/18

C# (3) Visual Studio 2017

では実際に Small Basic Online (SBO) の最新版をビルドしてみましょう。

SBO のリポジトリに README.md というドキュメントがあり、ここに簡単な開発手順が記してあります。その一行目は「Open SmallBasic.sln in Visual Studio 2017.」となっています。

これに従い Visual Studio 2017 をまずインストールしましょう。すでにインストール済みの方はここは読み飛ばして構いません。具体的には Visual Studio Community 2017 という無料版をインストールします。以前、英語なのですが TechNet Wiki にインストール手順を公開しました。そちらも参考にしていただくことにして、ここでは簡単に説明します。サイトはこちらが最新です。[Visual Studio のダウンロード] というボタンを押すとメニューが表示されるので、「Community 2017」をクリックします。するとダウンロードが開始されるので、[保存] ボタンを押し、ダウンロード後 [実行] ボタンを押します。後は指示にしたがってインストールしてください。途中インストールするコンポーネットを聞かれるので「.NET desktop development」と「ASP.NET and web development」を選んで [インストール] ボタンを押します。

次に SBO のリモートレポジトリからローカルリポジトリを作ります。「表示」メニューから「チーム エクスプローラー」を選びます。ローカル Git リポジトリと書いてある下にある「複製」メニューを開きます。「複製する Git リポジトリの URL を入力してください」と書いてある入力欄にリモートレポジトリの URL を入力します。この URL は今回は予めフォークした nonkit/smallbasic-editor にある緑の [Clone or download] ボタンを押して表示される 「https://github.com/nonkit/smallbasic-editor.git」を使います。その下の欄には複製先のフォルダ名を指定し、[複製] ボタンを押します。

これでローカルフォルダにリポジトリができるので、フォルダ名をダブルクリックします。するとチーム エクスプローラーの下のほうにソリューションとして「SmallBasic.sln」というファイルが表示されるので、ダブルクリックします。すると9つのプロジェクトがロードされます。

Visual Studio のメニューから「SmallBasic.Editor」を選んで [F5] キーを押します。ここでもし HTTP 500 エラーが発生した場合は、SmallBasic.Editor > bin にある Debug / Release 両方のフォルダを消してからやり直してみてください。

正常に起動すると下図のようにローカルサーバ localhost:56177/ がブラウザで開かれます。

Smallbasiceditor

さて、現在 SBO は日々更新されている状況です。オリジナルのリポジトリでの変更も取り込んでテストしなければなりません。特に自分で登録した issue が修正済みでクローズしている場合は、本当に直ったかどうかテストして確かめましょう。実はまだ直っていない可能性もあります。ちょうど今日5件の修正があったので取り込んでみようと思います。まずリモート同士、sb/smallbasic-editor から nonkit/smallbasic-editor にプルリクエストを作って取り込みます。「synchronize with the original - Feburuary 18, 2019 #2」というプルリクエストを自分で作って自分で承認することで5件の修正をリモートリポジトリに取り込みました。それから、Visual Studio のチーム エクスプローラーで SBO のフォルダをダブルクリックした画面で、プロジェクトの [同期] ボタンを押し、同期の画面で「入力方向のコミット」の下にある「プル」をクリックし、リモートリポジトリの内容をローカルフォルダにプルします。プルというコマンドはリモートリポジトリからローカルリポジトリへのフェッチと、ローカルリポジトリからローカルフォルダへのマージを両方行う機能です。

これで最新の変更が取り込めたので再度ビルドし実行します。今回のビルドで以下の問題が直っているはずなので確かめてみます。

・#33 楕円位置が半径の半分だけ右下にずれる
・#34 Text.GetSubText が指定より短いサブ文字列を返す
・#35 Text.GetSubText の引数によってはプログラムが停止する
・#36 Controls.SetTextBoxText でテキストを設定できない

#33 は直っていました。ただ GraphicsWindow.DrawEllipse を実行するとペンの色で楕円が塗りつぶされてしまうようなので、これは別途レポートします。

#34、#35、#36は直っていました。現時点で公開されているプレビュー版では以上の4件はまだ反映されていません。今後もプレビュー版とリポジトリのソースがずれることは起きると思うのでリポジトリが変更されたら最新版をプルしてローカルでビルドし結果を確認するという作業
繰り返すことになるでしょう。

今回はソースの修正やデバッグは行わず、問題点の発見・レポート・修正の確認にしぼってお伝えしました。Visual Studio はデバッグの機能が便利なので回を改めて触れていきたいと思います。

(つづく)

| | コメント (0) | トラックバック (0)

2019/02/17

C# (2) Small Basic Online の公開

開発に入る前に、新しい Small Basic Online (SBO) の現状についてお知らせしておきます。

元々の Small Basic Desktop (SBD) には発行 (Publish) という機能があり、プログラムを共有することができます。これはインポート (Import) して Small Basic Desktop 上で実行することもできますが、ブラウザ上で実行することもできます。例えば、プログラムID MNV389-5 はソロバンのプログラムですが、Internet Explorer (IE) と Silverlight というプラグインで実行することができます。

ところがこの Silverlight はかつて Chrome や Safari などでもサポートされていたのですが、HTML5 の出現などにより徐々にサポートする環境がなくなり、Edge では最初からサポートされず、IE でも 2021年10月12日までのサポート予定となっています。このためブラウザ上で実行する環境を新たに構築する必要がありました。

そこで昨年 Small Basic ウェブサイトが新しくなったタイミングで SBO が [Start Coding Online] ボタンから呼び出せるようになりました。これは TypeScript をベースとしたシステムで、その後オープンソースソフトウェアとしてソースが公開されることになったのですが、途中で C# をベースとしたシステムに刷新されることになりました。下図が新しく公開された SBO のエディターの画面です。

Superbasicv2

現時点ではプレビュー版として公開されていますが、いずれ現在の [Start Coding Online] のリンク先として正式にリリースされる予定です。

そして今この新しい C# ベースの SBO は公式ブログでもアナウンスされているとおり、以下の2点での協力が求められています。

・バグや問題点のレポート(公開中の GitHub の Issues に登録します)
・現在公開されている SBO 0.91 (TypeScript ベース) との違いのレポート(同上)

今後の開発方針としては、まず SBO 0.91 レベルまで作り上げて SBO 1.0 として公開し、SBD 1.2 レベルに近づけたものを SBO 2.0 として公開する予定です。これまでも予定変更があったので、あくまでも現時点の予定です。

ざっくり、以上のような状況です。ポイントは SBO はオープンソースソフトウェアとして開発されるということです。いずれ SBD のベースにもなっていくようです。したがって、この連載ではオープンソースソフトウェアにどう取り組むかということを、体験しながら伝えていくようにしたいと思います。

この連載の読者としては高校生以上を対象としたいと思います。オープンソースソフトウェアの開発では英語を使うことが多いですし、GitHub のアカウントを作成しないと記事の内容を試せないということもあるのでそうしました。一応の目安としてください。

さて、SBO プロジェクトに興味がある方はまず上記のとおり、プレビュー版を使って問題点をレポートしてみませんか。私は以下の問題点をレポートして全て対応してもらいました。

・#9 楕円のサイズが長方形のサイズの2倍になる
・#10 ソースファイルの©を[Open]で読み込むと©に化ける
・#33 楕円位置が半径の半分だけ右下にずれる
・#34 Text.GetSubText が指定より短いサブ文字列を返す
・#35 Text.GetSubText の引数によってはプログラムが停止する
・#36 Controls.SetTextBoxText でテキストを設定できない

まだ多くの問題点を抱えているような感触です。今は現在の版を作成した オマー・トーフィック (Omar Tawfik) さんがほとんど一人で修正しています。リポジトリの contributors のタブを見るともう一人、学生の alxnull さんの修正も取り入れられています。Issues #10 のコメントによると alxnull さんは Small Basic でプログラミングを覚えた方で、この SBO のプロジェクトにエキサイトしているとのことでした。

私もまずは問題点のレポートで貢献し、いずれコードの修正にも貢献していきたいと思います。

(つづく)

| | コメント (0) | トラックバック (0)

2019/02/15

C# (1) C# について

C# について新たな連載を始めようと思います。新しい Small Basic Online が C# ベースで作られていて、私がこの開発に参加する予定だからです。

今回はまず C# というプログラミング言語について私の知っていることをお伝えします。

インタラクティブに C# を学ぶ教材を Xamarin Workbooks (ザマリン ワークブックス)で簡単に作ることができます。このことについては以前このブログに書きました。

C# の文法は C, Java, JavaScript と似ています。これらの言語をすでに知っている方なら基本的な文法は覚えやすいと思います。

C# は主にマイクロソフトの .NET Framework (ドットネット フレームワーク)上で動作します。これは Java に似たシステムで、コンパイルすると中間言語に翻訳され、それが実行時に解釈されてシステムのライブラリを呼び出します。Small Basic も .NET 上で動作する言語で C# はその兄貴分と言えます。

C# については多くの本が出版されています。私が購入したのはオライリー発行の『プログラミング C# 第5版』です。C# の魅力についてさまざまな実例が示されています。現在はすでに第7版が出ていますのでそちらがオススメです。

インターネット上にはマイクロソフトのドキュメントサイトの「C# のガイド」に開発者向け、ITプロフェッショナル向けなどの情報がまとめられています。

Small Basic Desktop はソースは非公開ながら C# で書かれており、Extension (エクステンション:拡張機能)も C# で書くことが公式ブログなどで紹介されています。英語ですが TechNet Wiki の記事 として Extension の作り方が詳しく載っています。私自身、まだ Extension 作りにチャレンジしていないのですが、その前にこの記事を日本語訳しておきたいと思います。

C# は Windows の開発に広く使われており、さまざまなライブラリが整備されています。Small Basic Online のサーバサイドでは ASP.NET が利用され、エディターは Blazor (ブレイザー)というフレームワークが使われています。

C# の開発環境としては Visual Studio というマイクロソフトの統合開発環境 (IDE: Integrated Development Environment) が適しているでしょう。Visual Studio については次回以降で詳しく説明していきたいと思います。

(つづく)

| | コメント (0) | トラックバック (0)

より以前の記事一覧