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

2017/06/09

JavaScript (40) ソースコードの表示 SyntaxHighlighter

JavaScript について久しぶりに書きます。このシリーズでも使わせていただいている SyntaxHighlighter ですが、ココログでもコードを表示できる他、カスタマイズすることもできます。

そこで今回は、SyntaxHighlighter の最新版 (4.0) を使っていろいろやってみようと思います。

まず、GitHub にある SyntaxHighlighter のビルドのインストラクション(指示)にしたがって SyntaxHighligher をビルドしてみようと思います。

最初は git コマンドを使うので、Git Shell を立ち上げます。

 

Windows PowerShell

Copyright (C) 2016 Microsoft Corporation. All rights reserved.

~\Documents\GitHub> git clone https://github.com/syntaxhighlighter/syntaxhighlighter.git

Cloning into 'syntaxhighlighter'...

remote: Counting objects: 3500, done.

remote: Total 3500 (delta 0), reused 0 (delta 0), pack-reused 3500

Receiving objects: 100% (3500/3500), 5.94 MiB | 1.81 MiB/s, done.

Resolving deltas: 100% (1762/1762), done.

~\Documents\GitHub>

 

次に node.js のコマンドを使うので、Node.js コマンドプロンプトを立ち上げ、コマンド npm install を実行します。

 

npm ERR! node -v v0.10.13

npm ERR! npm -v 1.3.2

npm ERR! path C:\Users\Nonki\Documents\GitHub\syntaxhighlighter\node_modules\bab

el-preset-es2015\node_modules\babel-plugin-transform-es2015-function-name\node_m

odules\babel-helper-function-name\node_modules\babel-template\node_modules\babyl

on\lib\index.js

npm ERR! fstream_path C:\Users\Nonki\Documents\GitHub\syntaxhighlighter\node_mod

ules\babel-preset-es2015\node_modules\babel-plugin-transform-es2015-function-nam

e\node_modules\babel-helper-function-name\node_modules\babel-template\node_modul

es\babylon\lib\index.js

npm ERR! fstream_type File

npm ERR! fstream_class FileWriter

npm ERR! code ENOENT

npm ERR! errno 34

npm ERR! fstream_stack C:\Program Files (x86)\nodejs\node_modules\npm\node_modul

es\fstream\lib\writer.js:284:26

npm ERR! fstream_stack Object.oncomplete (fs.js:107:15)

npm http GET https://registry.npmjs.org/regenerator-runtime

npm http 304 https://registry.npmjs.org/regenerator-runtime

npm ERR!

npm ERR! Additional logging details can be found in:

npm ERR!     C:\Users\Nonki\Documents\GitHub\syntaxhighlighter\npm-debug.log

npm ERR! not ok code 0

C:\Users\Nonki\Documents\GitHub\syntaxhighlighter>

 

どうやら、エラーになってビルドがうまくいかなかったようです。そこで、Node.jp の最新版をインストールし直し、npm cache clean コマンドを実行してから、再び npm install を実行しました。

 

| `-- webpack-core@0.6.9

|   +-- source-list-map@0.1.8

| `-- source-map@0.4.4

`-- yargs@3.32.0

+-- camelcase@2.1.1

  +-- cliui@3.2.0

| `-- wrap-ansi@2.1.0

  +-- decamelize@1.2.0

+-- os-locale@1.4.0

  | `-- lcid@1.0.0

| `-- invert-kv@1.0.0

  +-- string-width@1.0.2

| +-- code-point-at@1.1.0

  | `-- is-fullwidth-code-point@1.0.0

| `-- number-is-nan@1.0.1

  +-- window-size@0.1.4

`-- y18n@3.2.1

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\ch

okidar\node_modules\fsevents):

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@

1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}

)

C:\Users\Nonki\Documents\GitHub\syntaxhighlighter>

 

こちらはうまくいったようなので、次に進み、node .\node_modules\gulp\bin\gulp.js setup-projectnode コマンドを実行します。今度は、git clone https://github.com/syntaxhighlighter/brush-php.git でエラーになってしまいました。調べてみると、Windows 10 でのビルドはうまくいかないようでした。そこで、上記と同じことを Mac でやってみました。Node.js インストール後、実行したコマンドは以下の通りです。

 

git clone https://github.com/syntaxhighlighter/syntaxhighlighter.git

cd syntaxhighlighter

npm install

./node_modules/gulp/bin/gulp.js setup-project

 

Mac では問題なくビルドできました。最後に以下のコマンドを実行しました。これで、dist フォルダに syntaxhighlighter..js と theme.css が作成されます。

 

NONKI-Mac-mini:syntaxhighlighter nonki$ ./node_modules/gulp/bin/gulp.js build --compat

--brushes=css,cpp,csharp,java,javascript,vb,xml --theme=default

[19:18:47] Requiring external module babel-register

[19:18:47] Using gulpfile ~/Documents/syntaxhighlighter/gulpfile.babel.js

[19:18:47] Starting 'build'...

[19:18:50] Theme: default

[19:18:50] Brushes: css, cpp, csharp, java, javascript, vb, xml

[19:18:50] Hash: 5910dbdf4bb31d0abb6a

Version: webpack 1.15.0

Time: 2392ms

Asset Size Chunks Chunk Names

syntaxhighlighter.js 145 kB 0 [emitted] main

syntaxhighlighter.js.map 224 kB 0 [emitted] main

chunk {0} syntaxhighlighter.js, syntaxhighlighter.js.map (main) 137 kB [rendered]

[0] ./src/index.js 1.18 kB {0} [built]

[1] ./src/core.js 7.16 kB {0} [built]

[2] ./repos/opts-parser/opts-parser.js 1.5 kB {0} [built]

[3] ./repos/syntaxhighlighter-regex/index.js 1.16 kB {0} [built]

[4] ./repos/syntaxhighlighter-regex/xregexp.js 67.8 kB {0} [built]

[5] ./repos/syntaxhighlighter-match/index.js 659 bytes {0} [built]

[6] ./repos/syntaxhighlighter-match/lib/match.js 1.19 kB {0} [built]

[7] ./repos/syntaxhighlighter-match/lib/apply-regex-list.js 1.05 kB {0} [built]

[8] ./repos/syntaxhighlighter-match/lib/matches.js 2.67 kB {0} [built]

[9] ./repos/syntaxhighlighter-html-renderer/index.js 9.67 kB {0} [built]

[10] ./src/utils.js 2.3 kB {0} [built]

[11] ./src/transformers/index.js 538 bytes {0} [built]

[12] ./src/transformers/trim.js 316 bytes {0} [built]

[13] ./src/transformers/blogger_mode.js 186 bytes {0} [built]

[14] ./src/transformers/strip_brs.js 181 bytes {0} [built]

[15] ./repos/unindenter/unindenter.js 955 bytes {0} [built]

[16] ./repos/retabber/retabber.js 1.4 kB {0} [built]

[17] ./src/dom.js 6.76 kB {0} [built]

[18] ./src/config.js 311 bytes {0} [built]

[19] ./src/defaults.js 1 kB {0} [built]

[20] ./src/html_script.js 1.72 kB {0} [built]

[21] ./~/process/browser.js 5.45 kB {0} [built]

[22] ./repos/brush-base/brush-base.js 2.78 kB {0} [built]

[23] ./repos/brush-css/brush.js 4.86 kB {0} [built]

[24] ./repos/brush-cpp/brush.js 4.51 kB {0} [built]

[25] ./repos/brush-csharp/brush.js 1.8 kB {0} [built]

[26] ./repos/brush-java/brush.js 1.37 kB {0} [built]

[27] ./repos/brush-javascript/brush.js 1.05 kB {0} [built]

[28] ./repos/brush-vb/brush.js 1.56 kB {0} [built]

[29] ./repos/brush-xml/brush.js 1.54 kB {0} [built]

[30] ./~/domready/ready.js 1.13 kB {0} [built]

[31] ./src/dasherize.js 526 bytes {0} [built]

[32] ./src/compatibility_layer_v3.js 478 bytes {0} [built]

[19:18:50] Finished 'build' after 2.75 s

NONKI-Mac-mini:syntaxhighlighter nonki$

 

このようにして作成した、theme.css と syntaxhighlighter.js について、下記のようにココログの設定を行ってみたのですが、結局うまくいきませんでした。他の原因も考えられるのですが、SyntaxHighlighter 4.0 はまだ開発途中と判断し、3.0.83 をダウンロードし、上記のようなビルドは行わず、ココログの設定 | 基本情報 | ブログのサブタイトルの下に <script> タグを設定しました。

 

<link type="text/css" rel="stylesheet" href="http://www.nonkit.com/javascript/css/shCoreEclipse.css">

<link type="text/css" rel="stylesheet" href="http://www.nonkit.com/javascript/css/shThemeEclipse.css">

<script type="text/javascript" src="http://www.nonkit.com/javascript/js/XRegExp.js"></script>

<script type="text/javascript" src="http://www.nonkit.com/javascript/js/shCore.js"></script>

<script type="text/javascript" src="http://www.nonkit.com/javascript/js/shBrushCpp.js"></script>

<script type="text/javascript" src="http://www.nonkit.com/javascript/js/shBrushCSharp.js"></script>

<script type="text/javascript" src="http://www.nonkit.com/javascript/js/shBrushCss.js"></script>

<script type="text/javascript" src="http://www.nonkit.com/javascript/js/shBrushJava.js"></script>

<script type="text/javascript" src="http://www.nonkit.com/javascript/js/shBrushJScript.js"></script>

<script type="text/javascript" src="http://www.nonkit.com/javascript/js/shBrushVb.js"></script>

<script type="text/javascript" src="http://www.nonkit.com/javascript/js/shBrushXml.js"></script>

<script type="text/javascript">  

SyntaxHighlighter.config.stripBrs = true;

    SyntaxHighlighter.all();  

</script>

 

図36 ココログの設定

【図36 ココログの設定】

 

これでココログの記事の中でコードを表示できるようになります。コードは以下のタグで挟みます。

 

<pre class="brush: vb">

</pre>

 

SyntaxHightligher 自身は JavaScript で書かれていますが、さまざまなプログラミング言語をサポートしています。例えば、以下のプログラムは私が書いた Visual Basic のコードです。結果のとおり、<p> タグが残ってしまいます。サブタイトルの下に設定した、SyntaxHighlighter.all(); の前に、SyntaxHighlighter.config.stripBrs = true; を置いたことにより、<br> タグは削除できていますが、&ltp> タグはうまく削除できません。また、右上の?を押すと本来、SyntaxHighlighter についてのバージョン情報などが表示されるはずなのですが、今のところ @ABOUT@ と表示されてしまします。

Imports System.IO

Module FDump

 

Sub Main()

' get filename from arguments

    Dim filename As String = System.Environment.GetCommandLineArgs(1)

' open input file

    Dim stdin As FileStream = New FileStream(filename, FileMode.Open, FileAccess.Read)

' output a line

    Dim b, i As Integer

b = stdin.ReadByte()

    i = 0

While 0 < b

        If i Mod 256 = 0 Then

Console.WriteLine("")

            Console.WriteLine("Addr  +0 +1 +2 +3 +4 +5 +6 +7 +8 +9 +A +B +C +D +E +F")

Console.Write("---- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --")

        End If

If i Mod 16 = 0 Then

            Dim h As String

Console.WriteLine("")

            h = Hex(i \ 16)

Console.Write(Left("000", 4 - h.Length) & h & " ")

        End If

Console.Write(Hex(b) & " ")

        i += 1

b = stdin.ReadByte()

    End While

Console.WriteLine("")

#If DEBUG Then

Console.WriteLine("")

    Console.WriteLine("Press any key to continue...")

Console.ReadKey()

#End If

End Sub

End Module

 

ココログでの表示は上記のように多少問題が残っていますが、次回は Small Basic 用に設定をカスタマイズしてみたいと思います。

 

(つづく)

 

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

2016/04/30

プログラミング講座(172) フォームエディターを GitHub で公開

入力フォームを編集するプログラム Form を作り始めました。ソースを GitHub に公開しています。

図173 Form 0.5b

【図173 Form 0.5b】

 

まだ編集機能はありませんが、コントロールや図形をファイルに持たせることができます。図形エディターのときはプログラムそのものを生成しましたが、今回は Small Basic のコメントの形式にしました。したがってこのファイルは Small Basic のエディターで編集できます。

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