2020/03/07

C# (12) ソリューションとプロジェクト

今回は .NET の C# や Visual Basic でプログラムを作成するときに出てくるソリューションとプロジェクトについて、実際に Small Basic オンライン (SBO) 1.0 でどうなっているのかを見ながら解説しようと思います。

Visual Studio にソリューション エクスプローラーというウィンドウがあります。これは smallbasic-editor リポジトリのルートにある SmallBasic.sln というファイルの中身を表しています。ソリューションは SBO 1.0 のように、システム全体を表しています。

Vs-solution-explorer-j

ソリューションの中は9つのプロジェクトに分かれています。例えば SmallBasic.Editor というプロジェクトの中をマウス右ボタンの「エクスプローラーでフォルダを開く」メニューで開いてみると、bin\Debug\netstandard2.0 というフォルダに SmallBasic.Editor.dll というダイナミックリンクライブラリ(実行形式のクラス ライブラリ)ができていることがわかります。プロジェクトは通常このように exe や dll などのビルド単位に作られます。

SBO 1.0 の場合、SmallBasic.Analyzers.dll, SmallBasic.Compiler.dll, SmallBasic.Client.dll, SmallBasic.Editor.dll, SmallBasic.Utilities.dll の5つの dll が作られていました。

SBO 1.0 の REAME.md によると、8つのプロジェクトについて説明があります。和訳すると、

  • SmallBasic.Compiler: プログラムを実行するために使われるコンパイラ/エンジン
  • SmallBasic.Utilities: 異なるプロジェクト間で共有されるヘルパーユーティリティ
  • SmallBasic.Analyzers: コードベースの品質管理を助ける C# アナライザー群
  • SmallBasic.Generators: コードベース全体で利用される C# や TypeScript のスニペットを自動生成するスクリプトのコレクション
  • SmallBasic.Client: クライアントの TypeScript, SASS や画像リソースをバンドルしたウェブパックプロジェクト
  • SmallBasic.Editor: エディターUIコンポーネントをレンダリングする Blazor アプリ
  • SmallBasic.Server: エディターのサービスを提供/デプロイ(展開)するのに使われる ASP サーバー
  • SmallBasic.Tests: コンパイラ/エンジンをテストする C# 単体テスト

となります。順番はソリューション エクスプローラーにある順に並べ替えました。

ソリューション エクスプローラーで見るとそれぞれのプロジェクトはフォルダが分けられていて、Backend, Build, Frontend, Tests の4つのフォルダのいずれかに格納されています。Backend はサーバー側のみで実行されるプロジェクト、Build は SBO 1.0 自体をビルドするときに使用されるプロジェクト、Frontend はクライアント側とやりとりしながら実行されるプロジェクト、Tests は(ビルド直後の)自動単体テストのためのプロジェクトと考えられます。

SmallBasic.Bridge というプロジェクトに関しては SBO 1.0 の README.md に説明がありませんでした。このプロジェクトは Small Basic デスクトップ (SBD) をこのソリューションで作成するときに使われるのではないかと思います。

以上のように、ソリューションはシステム全体、プロジェクトはビルド単位と覚えておくと理解しやすいと思います。

関連項目

 

| | コメント (0)

2020/03/05

C# (11) SBO 既知の留意点2

以前、Small Basic オンライン (SBO) の既知の留意点について書いてから約10カ月が過ぎました。直っているものも、新たに見つかったものもあるのでまとめ直してみました。#92, #89, #71, #14は修正されました。

GitHub Issues 掲載分

  • #125 プログラムにループがあると Controls.ButtonClicked イベントが呼び出されない
  • #124 テキストボックスとマルチラインテキストボックスのフォント属性が変更できない
  • #122 TextWindow.ReadNumber で負の数や小数が入力できない
  • #119 配列の初期化がされない(a = “1=One;2=Two;”のような初期化ができない)
  • #118 引用符で閉じない文字リテラルが文法エラーになる
  • #117 Sound.Play と Stop が文法エラーになる
  • #116 Sound.PlayMusic が文法エラーになる
  • #115 GraphicsWindow.Left と Top が文法エラーになる
  • #114 GraphicsWindow.CanResize が文法エラーになる
  • #113 GraphicsWindow.Width と Height への代入が文法エラーになる(リードオンリー)
  • #112 GraphicsWindow.KeyDown イベントが呼び出されない
  • #110 GraphicsWindow.DrawImage でローカルファイルが使用できない
  • #108 オンスクリーン キーボードが自動的に有効にならない
  • #107 ブラウザ Chrome と Edge でタートルが軌跡の上に現れない
  • #106 GraphicsWindow.LastKey が常に空を返す
  • #88 ブラウザ Edge で Shapes.Zoom() が図形の中心から拡大・縮小しない
  • #87 ブラウザ Edge で Shapes.Rotate() が図形の中心で回転しない
  • #74 GraphicsWindow.GetPixel がサポートされていない
  • #69 GraphicsWindow.Title がサポートされていない
  • #60 オブジェクトを切り替えたとき、ライブラリ サブメニューがスクロールしたままとなる
  • #58 GraphicsWindow.DrawImage が画像を表示しない
  • #57 "#12345678" のような透明な色は無視される
  • #27 ビルド中に monaco を最小化から除外する
  • #13 インポートと発行機能(発行とインポートが未サポート)
  • #12 長い初期ロード時間(起動に時間がかかる)
  • #4 ライブラリ エクスプローラにバッジを付ける
  • #3 ブリッジプロジェクトを Electron.NET に置き換える
  • #2 開発サイクルの改善

SBO 1.0 アナウンス掲載分

  • ファイルの拡張子が .sb ではなく .txt になった

その他の留意点

以下の項目はまだ上記のどちらのリストにも載っていない SBD 1.2 との差分になります。

  • File.GetSettingPath() がサポートされていない
  • File.GetTempraryPath() がサポートされていない
  • GraphicsWindow.FontBold の既定値が "False"
  • Program.Directory がサポートされていない

SBO 1.0 でサポートされていない機能はまだ他にもありそうで、GitHub の Issues に登録していく必要があります。

関連項目

その他のリソース

 

| | コメント (0)

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 ではまだ発行ができないので、こちらにソースとその結果のスクリーンショットを公開しました。

関連項目

| | コメント (0)

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)

より以前の記事一覧