« 2019年1月 | トップページ | 2019年3月 »

2019年2月

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/24

本になった私のブログ 4

約4年ぶりにブログを本にしました。今回は2014年12月30日から2018年1月31日までが対象で4冊目です。印刷は前回と同じブログ出版局にお願いしました。

Blog4

改めて1冊目からざっと目を通してみました。

まず、結構書いた内容を忘れています。

それから、印刷物だと見つけやすいのか、誤字やおかしな文章を見つけました。ブログ上では修正しました。

今年の分は新たな連載も始めたので次回に回しました。

| | コメント (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)

TypeScript (8) ここまでのまとめ

ここまでのまとめをしておきます。

Small Basic Online がオープンソースとして公開され、TypeScript で書かれていたため本連載を始めました。TypeScript についても、開発方法についてもほとんど何も知らなかったのですが、手探り状態でスタートし、一通りの開発手順について試しながら、解説することができました。

・Small Basic Online(TypeScript 版)の起動方法
・Git と GitHub によるバージョン管理方法
・Visual Studio Code の使い方
・デバッグ方法

などをお伝えしました。そして、Small Basic Online の TypeScript 版は開発が中止され、C# 版に移行しました。

オープンソースの開発はインターネット上で世界中の人々が協力しながらやっていくものです。したがって、このようなことも時にはあると思います。ただそこにきちんと関わった経験は決して無駄にはならないと思います。

この連載はここで一旦中断する予定です。続きは C# 版で改めてスタートしますが、こちらも一部は TypeScript が使われているようです。その解説はこの続きとして書こうと思います。

TypeScript そのものについてはほとんど触れられなかったので、そこに期待された方にはお詫びを申し上げます。

このシリーズの目次をこちらに作成してありますのでご活用ください。

ここまで読んでくださりありがとうございました。

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

TypeScript (7) リポジトリの更新

今回は前回修正したソースファイルをリポジトリに登録します。

まずローカルリポジトリの更新ですが、まず変更したソースファイルをステージングエリアに追加します。Visual Studio の枝分かれアイコンでソース管理サイドバーを表示し、変更されたファイルリストの中の ellipse.ts にマウスを乗せるとメニューが表示されます。その中の+マーク「変更のステージング」をクリックします。すると下図のようにステージングエリアが「ステージング済みの変更」として表示されます。

Ellipse_git_add

このとき左下の小さな枝分かれアイコンの右側が blog となっていることに注意してください。第5回のときに作ったブランチです。後でリモートのリポジトリを更新するときに master 直接更新するのではなく、別のブランチにしておいて変更箇所のレビュー後に承認してもらうためです。

今回全部で7個の変更ファイルが表示されています。この中で実際に直したのは ellipse.ts と launch.json(「Launch Chrome」のデバッグオプションを追加するため)だったので、この2つのみ更新します。変更の理由が別の場合、記録上分けたほうがいいので、まずは ellipse.ts のみ登録します。ローカルリポジトリを書き換えるにはステージングされたファイルに対してコミットします。そのときメッセージを残すことができます。

上図の「Message (press Ctrl+Enter to commit)」と書いてある入力欄に変更理由を書き込みます。今回は Small Basic Desktop との差異があるということで「parity #1 fix」と書いておきます。#1 は issue (イシュー:問題点)番号で、リモートリポジトリにあらかじめ登録しておいた issue の番号です。そして、Ctrl+Enter を押します。これでコミットが完了し、ステージング済みの変更欄が消えます。同様に launch.json も「added Launch Chrome」というメッセージとともにコミットします。

これでローカルリポジトリの更新が終わったので、今度はそれをリモートリポジトリに反映します。ソース管理サイドバーの右上に「…」と書かれたメニューがあるのでクリックし「プッシュ先」を選びます。「リモートを選んで、ブランチ 'blog' を次に公開します:」と出るので、「origin https://github.com/nonkit/SmallBasic-Online.git/」をクリックします。GitHub の Username と Password を聞いてくるので入力します。これでローカルリポジトリの変更がリモートリポジトリにプッシュされました。

GitHub のリモートリポジトリをブラウザで表示すると、下図のように「Your recently pushed branches:」としてブランチ blog が表示されます。

Ellipse_github

その右側にある緑の [Compare & pull request] というボタンを押してみます。すると blog というブランチの内容を master に反映する プルリクエストを作成することができます。デフォルトでは反映先は私が作ったリモートリポジトリではなく、フォーク元のオリジナルのリモートリポジトリになっています。この設定は変更することができますが、今回はフォーク元の開発が中止になってしまったので、これ以上は進めないことにします。

またこの画面の下のほうには変更箇所が色付きで示されています。緑の部分が追加した行、ピンクの部分が削除した行になります。

その上にはローカルリポジトリへのコミットの履歴が表示されます。「parity #1 fix」の「#1」というところにマウスを置くと、「#1, Add infrastructure for building/testing/publishing the application.」と表示されます。実はこれはフォーク元の sb/SmallBasic-Online の issue 番号で、私は自分のリモートリポジトリ nonkit/SmallBasic-Online の issue 番号のつもりで書いたものです。これは混乱の元になるので、本来フォーク先には Issues は利用せず、フォーク元の Issues に直接書いたほうがいいでしょう。今回はフォーク元がクローズしていたので仕方がありませんでした。

これで、一連の作業について一通りの説明が終わりました。最後に今回の取り組みについてまとめる予定です。

(つづく)

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

TypeScript (6) デバッグ

今回は Visual Studio Code から TypeScript で書かれた Small Basic Online をデバッグする方法についてお伝えします。

まず、Visual Studio Code の「ターミナル」を立ち上げて、以下のコマンドを入力し、Small Basic Online を立ち上げてみます。

npm i
npm run gulp watch-source

以下の図は上記の2行目のコマンドで [Enter] を押す直前です。

Vscode_npm

上記のコマンドを実行後、ブラウザから http://localhost:8080 を開くと Small Basic Online が表示されます。

今回は Shapes.Ellipse 操作の表示がおかしいので、それを直してみたいと思います。プログラム SXD340 を Small Basic Desktop で実行すると次のようになります。

Ellipse_desktop

ところがこのプログラムを Small Basic Online にコピーして実行すると次のようになります。円が若干左上にずれているのが分かります。(図をクリックすると拡大します。)

Ellipse_parity

ここで、デバッガを起動してみます。最初に一度だけ Debugger for Chrome のための設定として次の操作を行います。Visual Studio Code の左側にある虫のアイコンをクリックしデバッグサイドバーを表示します。Debug Tests と表示されている下向きの三角形をクリックし「構成の追加」を選びます。launch.json の編集画面にメニューが表示されるので、「{ } Crhome: Launch」を選びます。すると先程の下向きの三角形をクリックして「Launch Chrome」が選べるようになるので、これを選びます。

Visual Studio Code の左側にあるファイルのアイコンをクリックしエクスプローラサイドバーを起動し、以下のファイルを開きます。

src\app\components\common\shapes\ellipse.ts

move メソッドの中の1行目にブレークポイントを設定してみます。行番号の左側をクリックすると赤い丸が表示されるので、それがブレークポイントが設定されたという表示です。これでデバッグを開始するとブレークポイントの行の実行直前にプログラムが一時停止します。

ブレークポイントが設定できたらデバッグサイドバーの「Launch Chrome」と表示された左の緑の三角をクリックしデバッグを開始します。Chrome ブラウザが起動され Small Basic Online のエディターが表示されます。ここに上記の SXD340 を貼り付け [Run] ボタンを押すと、ブレークポイントで停止し、次のような画面が表示されます。

Ellipse_break_point

このとき Small Basic Online の画面はこうなります。

Ellipse_debug

Visual Studio Code の上のほうにデバッグのためのコントロールが表示されています。左から、「続行」「ステップ オーバー」「ステップ インする」「ステップ アウト」「再起動」「停止」となっており、「ステップ~」は1行ずつ実行します。そのときソースコードの変数名の上にカーソルを置くと変数の内容が表示されます。「続行」を押してプログラムを続行させることができます。「停止」でデバッグを終了します。

エクスプローラサイドバーから ellipse.ts を開き、10, 11, 28, 29行で strokeWidth / 2 だけ右下に楕円をずらします。編集後エディターの右上に「変更を開く」ための矢印が回転しているアイコンがあるのでこれクリックして変更した箇所を確認します。

Ellipse_diff

すでに Small Basic Online の最新版が起動していると思うのでさきほどのプログラムを走らせると下図のように円の位置が正しくなっていることが確認できると思います。

Ellipse_parity_fixed

今回の内容はここまでとします。次回は修正したソースを GitHub に反映する方法を紹介します。

(つづく)

| | コメント (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)

2019/02/14

TypeScript (5) Visual Studio Code

今回は、TypeScript ベースの Small Basic Online v1.0 を開発するための開発環境について解説します。開発には Visual Studio Code が便利なので、これを使います。Visual Studio というとマイクロソフトの統合開発環境 (IDE: Integrated Development Environment) ですが、Visual Studio Code はそれとはまったく関係のないマイクロソフトがオープンソースとして公開しているエディタ(編集用ソフト)です。

Visual Studio Code は https://code.visualstudio.com/ からダウンロードできます。

また拡張機能として以下の3つをインストールしました。


  • Debugger for Chrome 4.11.2

  • ftp-sync 0.3.9 (Small Basic Online とは直接関係ないですがウェブサイトをアップロードできます)

  • Japanese Language Pack for Visual Studio Code 1.31.4

再度、GitHub から Small Basic Online のソースをクローン(リモートリポジトリからローカルリポジトリへのコピー)します。Visual Studio Code にはこのメニューがないので、ターミナルを開いて以下のコマンドを実行します。


cd \
git clone https://github.com/nonkit/SmallBasic-Online.git/ \SmallBasic-Online

これで C:\SmallBasic-Online フォルダにローカルリポジトリができます。「ファイル」「フォルダを開く」でこのフォルダを開きます。src\app\components\common\shapes\ellipse.ts を開いてみます。このファイルをちょっと直してみたいのですが、その前に画面左下の master と書いてあるところをクリックし、ブランチを作成します。ブランチは複数のメンバーで並行してソースに手を入れるためにリポジトリを枝分かれさせる機能です。下図は、ブランチ名を blog とし、ソース管理 (git) で差分を表示したところです。

Vscode

今回はここまでとします。次回は変更したコードを走らせてデバッグします。

(つづく)

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

2019/02/12

TypeScript (4) Git と GitHub

今回はソースコードのバージョンを管理するツール Git と GitHub について説明します。

Git はオープンなオペレーティングシステム Linux の生みの親であるリーナス・トーバルズ氏が開発したバージョン管理システムです。リポジトリと呼ばれるアーカイブにソースコードの差分を登録し、変更箇所を比較したり、元の版に戻したりすることができます。一連の変更に対するコメントも残せます。

Git はもともとはコマンド形式でしたが、今はさまざまなツールから呼び出せるようになっています。このシリーズでは次回 Visual Studio Code の中から使ってみる予定です。

Git ではローカルフォルダにあるソースコードから管理対象を選んでローカルのリポジトリにある時点のソースコードを登録します。その際にいくつかの手順があります。ざっくり言うと、まずステージングエリアに変更したソースを追加します。この状態で、リポジトリにある以前の版と今回ローカルに編集した版の差分を確認できます。関連するソースコードをステージングしたところで、コミットというコマンドによりリポジトリに差分情報を書き込みます。

そして、GitHub というツールはオンライン上でリポジトリを管理するシステムで、これにより世界中の人たちがソースコードのさまざまなバージョンを共有できるようになりました。オープンソースを支えているシステムだと言えるのではないでしょうか。

最近、たまたま本屋さんで『いちばんやさしい Git & GitHub の教本』という本を見かけたので購入しました。イラスト入りで Git や GitHub のちょっとややこしい手順が分かりやすく解説されているほか、Visual Studio Code についても触れられているので、ホームページのソースを管理したい方にもオススメです。

この本にも詳しく書いてありますが、Git は https://git-scm.com/ からダウンロードしインストールできます。GitHub は https://github.com/ でアカウントを登録して利用します。ちなみに私のアカウントは https://github.com/nonkit です。すでに Small Basic Online v1.0 をフォークという機能で複製したものが、https://github.com/nonkit/SmallBasic-Online です。

今回の Git と GitHub についての説明はここまでとします。

さて、ここで読者のみなさまにお詫びがあります。実は上記の Small Basic Online v1.0 は全面的な方針の変更があり、TypeScript ベースではなく、C# ベースで開発されることになりました。したがって、この連載も見直しをせざるを得ない状況となりました。

そこで、C# ベースの Small Basic Online については新たな連載を始めます。この連載では TypeScript ベースの Small Basic Online で多少の修正をして動作確認するところまでをあと何回かに掲載してひとまず終了したいと思います。新しいコードベースでも一部 TypeScript が使われているので、その話をこちらにまたちょこっと書くかもしれません。

とはいえ、今回の Git / GitHub や次回予定の Visual Studio Code などは知っていて損のない情報だと思いますで、引き続き読んでいただけると嬉しいです。

(つづく)

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

2019/02/04

TypeScript (3) Small Basic Online とは

開発のあれこれに入る前に、まず開発の対象である Small Basic Online v1.0(開発中)を使ってみましょう。使い方はごく簡単に GitHub にも掲載されていますが、マイクロソフトのITプロフェッショナル向けの情報サイト TechNet Wiki に詳しくまとめましたので、そちらを参考にインストール、実行してみて下さい。

インストールはまずサーバ側で JavaScript を実行するためのシステムである Node.js のインストールを行います。このとき同時に npm (Node.js Package Manager) と呼ばれるパッケージ管理ツールもインストールします。次に、npm を使って Small Basic Online をインストールします。Small Basic Online は Node.js のパッケージとして作られているようです。インストール後、npm を使ってローカルPC上で Small Basic Online を実行するウェブサーバを起動し、ブラウザから利用します。

Smallbasiconline
【Small Basic Online v1.0】

上図が Small Basic Online v1.0 の起動画面です。

Small Basic v1.2 や Small Basic v1.3 に比べるとまだオブジェクトが Array、Clock、Math、Program、Shapes、Stack と TextWindow の7つしか用意されていません。これらのオブジェクトにはまだバグがあるようで、その修正やまだないオブジェクトの作りこみ(実装)がこのプロジェクトの作業になっていきます。

バグについてですが、現時点で例えば、Shapes.AddEllipse() 操作で作成した楕円の図形を Shapes.Move() で移動しようとしても移動しないことが判っています。また Shapes.AddRectangle() や Shapes.AddEllipse() で作成した長方形や楕円のサイズが Small Basic v1.2 や v1.3 に比べて小さいことも判っています。

まずはその辺りを直してみるということを行ってみたいと思います。

(つづく)

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

TypeScript (2) 何から手をつければ?

新しいことを始めるとき、何から手をつければいいか迷いますね。

今回 Small Basic Online の開発に取り組むと決めてから、最初は途方に暮れていました。

まず、取り組むと決めることは重要だと思います。

その後は、少しずつ情報を集めてどうすればいいのかに迫っていくしかありません。今回の最初の手がかりは公開されているソースコード https://github.com/sb/SmallBasic-Online でした。

GitHub(ギットハブ)はオープンソースのソフトウェアのソースコードを管理するシステムです。場合によっては、ここにドキュメントがあり、どのように貢献すればよいかがまとめられていることもあります。Small Basic Online に関してはドキュメントは今のところ、Readme に Small Basic Online の使い方、Code of Conduct に参加者の行動規範、Issues のページに問題点などがまとめられていますが、開発に関する文書はないようです。

ソースコード自体は有力な情報源になります。.ts という拡張子のファイルがあるので、TypeScript 言語が使われているだろうということが分かります。TypeScript はマイクロソフトが JavaScript に対して変数のデータ型を指定できるようにした言語です。JavaScript では変数の型が決まっていないので(Small Basic もそうですね)、大規模なプログラムを作るときにはバグを発生させやすいという面があります。これを回避するために TypeScript では変数の型を導入したようです。TypeScript の文法は JavaScript を拡張したもので、さらに Java や C 言語と同様の記法が使われています。いずれかの言語の経験があれば、気軽に覚えていけそうです。

開発環境をどうするのか、マイクロソフトの製品だから Visual Studio かと思いきや、どうやら Visual Studio Code というエディタを使う場合が多いようです。この辺はインターネットで検索して把握できました。Visual Studio Code (VSCodeとも)もオープンソースで、GitHub にソースコードが公開されています。

今回の取り組みの大きな前提として、このオープンソースのソフトウェアを開発する枠組みを理解しておく必要がありそうです。

ここまでのところをちょっとまとめておきましょう。

・オープンソースのソフトウェア開発(共同開発)
・言語は TypeScript
・エディタとして Visual Studio Code を利用
・ソースの管理は GitHub を利用

それぞれについて、インターネットや本で調べることも必要になってくるでしょう。どのような本に出会えるか、プログラミング人生において、結構重要なことだと思います。

私自身は、TypeScript は全く初めてなのですが、Visual Studio Code はホームページの作成と公開に使ったり、GitHub は Small Basic のソースを公開するために使ったりしています。TypeScript も初めてですが、JavaScript については囲碁のプログラムを作ったり、ホームページのちょっとした動作のために使ったりしているので、なんとかなる感覚はあります。初めての場合は、インターネットや本の情報をもとに実際に手を動かして使いながら覚えていくのがいいと思います。

ただ、やみくもにインターネットや本を探していると得られるものもある一方、時間がかかってしまうこともあるでしょう。よく知っている人に話を聞くのも大切かもしれません。今回私の場合は、Small Basic コミュニティを長年いっしょに支えているメンバから開発環境について教えていただくことができました。昨日試してみて、Visual Studio Code とブラウザの Chrome を使って Small Basic Online のデバッグができることを確認できました。

順を追って説明していきたいと思います。

(つづく)

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

2019/02/02

TypeScript (1) 新たな連載のねらい

長年にわたり Microsoft Small Basic のユーザとしてさまざまなプログラムを作ってきました。今後も続ける予定でいます。一方でマイクロソフトは昨年 Small Basic のオンライン版 Small Basic Online をオープンソースとすることを発表しました。これまで Small Basic はデスクトップ版がメインで、オンラインに発行した場合は IE (Internet Explorer) に Silverlight というプラグインを加えた環境で動作するものの、Silverlight のサポートが 2021年までで終了してしまうという状況でした。

Small Basic はマイクロソフト社内のボランティアによって維持されていますが、なかなかメンバも時間が取れず開発が進んでいませんでした。私自身は Small Basic に深く携わってきたので仕様についても細かく理解しているつもりであり、先日オープンソースの取り組みに参加を表明しました。

とはいえ、実はその Small Basic Online の開発言語である TypeScript についてもその開発環境についても全く何も知らないのが現状です。

そこで今回の連載では開発言語についても開発環境についても全く分からない状態から、どのようにそれらを掌握し、オープンソースのプロジェクトに参加していくのか、という実況をお伝えしていこうと思います。

Small Basic の連載では中学生を対象と考えていましたが、今回は高校生以上を対象に進めていきたいと思います。

この連載で扱う内容は現在のところ以下のようになると考えています。

・TypeScript というプログラミング言語について
・Small Basic Online のための開発環境について
・オープンソースの開発について

開発環境についてはまだ確定していませんが、エディタとして Visual Studio Code、TypeScript (JavaScript) のライブラリ Node.js、オープンソフトのソースを管理する GitHub などを扱うことになると思います。


(つづく)

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

« 2019年1月 | トップページ | 2019年3月 »