2017/08/25

JavaScript (42) chibi:bit

英国で11~12歳の子どもたちに配布されたという小さなボードコンピューター BBC micro:bit の互換機 SWITCH SCIENCE chibi:bit を購入しました。micro:bit / chibi:bit のプログラミングには、ブロック, JavaScript, Python などが使われますが、この記事ではマイクロソフトの IDE を使って ブロック / JavaScript を使います。

micro:bit / chibi:bit は、約 5×4センチの小さなコンピューターですが、スイッチ、5×5 LED、加速センサー、温度センサー、磁気コンパス、入出力ピン、Bluetooth などが備わっており、入門機として申し分ない機能を持っています。

今回は温度センサーを使って温度計を作ってみました。

IDE は micro:bit 版が https://makecode.microbit.org/ chibi:bit 版が http://chibibit.io/ide/ にあります。どちらを使っても動作しますが、今回は chibi:bit のほうを使ってみます。

図37  chibi:bit 専用開発環境
【図37 chibi:bit 専用開発環境】

作ったプログラムを https://makecode.microbit.org/_KCoUCbaDE2YY で [共有] しました。[JavaScript] ボタンを押すと JavaScript のコード、[ブロック] を押すとブロックでのコードを見ることができます。

chibi:bit を USB ケーブルで PC につなげると、CHIBIBIT というドライブが見えるようになります。

[ダウンロード] ボタンを押すと hex ファイルがダウンロードフォルダにできるので、それを CHIBIBIT というドライブにコピーします。

chibi:bit のリセットボタンを押します。

chibi:bit の A ボタンを押します。すると、現在の温度が LED に表示されます。

今回のプログラムは温度を LED に表示するだけでなく、温度が変わるたびに、USB ケーブル経由で PC 側に温度の数値と改行コードを送っています。

このデータを受けるプログラムを Small Basic と Litdev Extension を使って作りました。(プログラムID KKK886-0)このプログラムは以前、Arduino (Osoyoo) UNO 用に作ったものとほぼ同じです。ボーレートを 9600 から 115200 に上げました。COM ポートの番号は必要に応じて変更してください。ポート番号は、デバイス マネージャー の「ポート」で確認できます。

Small Basic プログラムを走らせた後、chibi:bit の A ボタンを何回か押してみて下さい。

図38 温度計
【図38 温度計】

※ chibi:bit 専用開発環境での [共有] がうまくいかなかったので、micro:bit の JavaScriptブロックエディターのほうで [共有] しました。

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

2017/06/14

JavaScript (41) SyntaxHighlighter のカスタマイズ

前回、いろいろ試してうまくいかなかった点がありました。ダウンロードしたバージョンが正しくなかったようです。今回は改めて最初から SyntaxHighlighter 3.0.83 を使って Small Basic のコードをきれいに表示できるようにしてみたいと思います。

SyntaxHighlighter 3.0.83 のダウンロード

GitHub の zip ファイルをダウンロードします。

ファイルのコピー

このうち以下のファイルを自分のサイトにコピーします。
・ styles\shCore.css
・ styles\shThemeEclipse.css
・ scripts\shCore.js
・ scripts\shBrushCss.js
・ scripts\shBrushJScript.js
・ scripts\shBrushVb.js
・ scripts\shBrushXml.js

ココログの設定

ココログの設定 | ブログのサブタイトル の下に以下のコードを設定し、反映します。










VB のブラシを使って SB のプログラムを表示

以下のようなコードをブログに埋め込むと、



For i = 1 To 100
TextWindow.WriteLine("Hello World!")
EndFor

このように表示されます。


For i = 1 To 100
TextWindow.WriteLine("Hello World!")
EndFor

SB のブラシとテーマを作成

作成したブラシ (.shBrushSBjs) とテーマ (shThemeSb.css) をこちらに公開しました。

SB のブラシを使って SB のプログラムを表示

ココログの設定に作成したブラシを追加して以下のようなコードを埋め込むと、



For i = 1 To 100
TextWindow.WriteLine("Hello World!")
EndFor

このように表示されます。


For i = 1 To 100
TextWindow.WriteLine("Hello World!")
EndFor

| | コメント (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/09/22

Ruby (2) アクセスカウンター

@homepage のサービスが9月29日で終了します。ホームページ本体は @nifty ホームページサービスへ移行済みだったのですが、アクセスカウンターは @homepage の cgi が手頃だったので使い続けていました。

そこで、アクセスカウンターを Ruby で作ることにしました。前回の hello を作ってからもう4年も経っているのですが、この hello 0.3 (Ajax版)をベースにアクセクカウンターを作りました。counter として公開します。

図2 アクセスカウンター
【図2 アクセスカウンター】

@homepage のアクセスカウンターは同じIPアドレスからのアクセスをカウントしないようになっていましたが、今回のものはリロードするたびにカウントアップします。

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

2015/11/28

プログラムを学んでみるには

プログラミングを始めてみようかと考えている方向けに、NAVERまとめに「プログラミングを学んでみるには」というまとめを作りました。いろいろな手段があるのですが、コーディングから学ぶのであれば、まずは Small Basic をおすすめします。文字通り小さな言語なので簡単に覚えられます。ただ簡単なだけに複雑な機能がありません。Small Basic で物足りなくなってきたら、HTML5 + JavaScript をおすすめします。学べるサイトも充実してきています。テキストエディターとブラウザがあれば一通りのことができる点もいいと思います。Small Basic で学んだ色や図形に関してはほぼそのまま SVG や Canvas に応用できるでしょう。

NAVERまとめ

その他、以下のまとめも作りました。
Microsoft Small Basic まとめ
プログラミングのアイディアをまとめてみました。

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

2015/11/16

JavaScript (39) MathJax について

JavaScript と直接関係ないのですが、HTML の話も JavaScript の連載の一環として取り扱おうと思います。以前の記事「数式の入力」でも紹介した、MathJax という数式整形スクリプトが新しくなっているようなので、再度解説したいと思います。

MathJax 自身は JavaScript で書かれていますが、利用するのに JavaScript の知識はほとんど必要ありません。むしろ数式を記述するための言語、MathML, TeX, AsciiMath などの知識が必要です。

今回是非紹介したいと思ったのは、HTML上に表示された数式の上でマウスの右ボタンをクリックすると、メニューが表示されるようになったことです。以前はこの機能はなかったと思います。

下図は本連載の「グラフ理論を用いた囲碁 数式一覧」というページです。数式の上で右クリックしメニューが表示されています。

図34 MathJaxのメニュー
【図34 MathJaxのメニュー】

このメニューから数式のソース(MathML コードや TeX コマンド)が取り出せるほか、数式のズーム(拡大)の設定やメニューの言語選択を行うことができます。下図は数式を拡大表示したところです。

図35 数式のズーム(拡大)

【図35 数式のズーム(拡大)】

どちらのスクリーンショットも Microsoft Edge で撮ったものです。MathJax はブラウザに依存せずに利用できるのも魅力です。

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

2015/10/28

JavaScript (38) 碁盤にもなる囲碁シミュレーター

Simulator 0.5 には、結局、棋譜関連で2つのバグがありました。1つは初手が記録されない件、もう1つは日付の月がずれる件です。どちらも Small Basic では 1オリジンで処理しており、JavaScript で 0オリジンに変えるべきところを直していなかったのが原因です。

バグだけを直すのももったいないので、シミュレーターに碁盤の機能を追加しました。[はじめから]ボタンを追加して碁盤上をクリックした結果も棋譜として記録できるようにしました。

プログラムを Simulator 0.6 として公開します。

JavaScript でプログラムするのは 1年7か月ぶりでしたが、プログラムそのものは比較的簡単に直せました。今回初めて Windows 10 + Edge + Aptana Studio 3 という環境で開発しましたが、特に問題はありませんでした。Microsoft Edge の F12 開発者ツールもまずまずの使い心地でした。

下図は Simulator 0.6 の rec03.js の修正した箇所(日付の月のずれ)にブレークポイントを設定し、そこで止めて、d.getMonth() をウォッチリストに追加し、9 (10月を示す値) になっていることを確認した画面です。

図33 Microsoft Edge F12 開発者ツール

【図33 Microsoft Edge F12 開発者ツール】

ただ、JsDoc Toolkit の使い方をすっかり忘れていました。以前の記事を見ると当時は Mac mini を使っていたようです。改めて Windows 10 のマシンにインストールし、記事を参考に実行しました。Windows 10 のコマンドプロンプトでは、指定するファイル名すべてにフルパスを指定したところうまく動きました。

これでバグも解消したので、C++ のほうに安心して移植できます。

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

2015/10/16

JavaScript (37) フォントについて

最近 JavaScript はほとんど手を付けていないのですが、今回改めて Simulator 0.5 を見ていたらバグを発見してしまいました。初手が SGF に反映されていません。また機会をみて修正しておきたいと思います。

さて、今回は JavaScript とは直接関係ないのですが、ウェブサイトを作る上で欠かせないフォントについて書いてみたいと思います。

JavaScript のいいところは多くのデバイスで利用できるところであり、そこで使うフォントもデバイスに依存しないほうが望ましいと考えています。そこでまず欧文のフォントについて調べた結果、以下の6つはWindows, OS X, iOS で共通に使えることが分かっています。

  • Arial
  • Trebuchet MS
  • Verdana
  • Courier New
  • Georgia
  • Times New Roman

和文については Windows では Meiryo(Windows XP 以降)または Yu Gothic(Windows 8.1 以降)、OS X と iOS では Hiragino Kaku Gothic Pro と Hiragino Mincho Pro がありますが、これらは共通ではありません。

そこで最近は Web フォントという仕組みがあり、サイト上に置かれたフォントを利用できるようになってきました。欧文のフォントはかなり揃ってきています。和文についても有料のものが多く揃えられてきましたが、無料のものがまだ種類が少ないようです。

今回、Google の Noto Sans JapaneseM+ の和文フォントを使ったフォント表を作ってみました。上記に挙げたもの以外にも標準的なフォントは含めてあります。

表の中で、「プロポーショナル」とはフォントの幅が一定でないもの、「セリフ」とはフォントにヒゲと呼ばれる装飾があるものです。

無料で使える和文の Web フォントが充実してくれるといいですが、有料のものも検討してみてもいいかもしれません。

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

2015/05/02

JMOOC 『物理法則プログラミング入門』に挑戦

JMOOC (日本版大規模公開オンライン講座)として開講されている『物理法則プログラミング入門』を受講しました。

講師は武蔵野美術大学の古堅真彦教授で、初心者を対象とした JavaScript によるプログラミング入門講座です。

受講の感想を3つほど。

まず Programming Base と呼ばれるフレームワークが用意されていて、書かなければならないコードは少しで済むように、初心者の負担に配慮されていました。厳密な物理法則のプログラミングではないものの、本質を捉えていて、かつシンプルであることに魅力を感じました。

そして、作ったプログラムの公開方法として Google Drive のホスティングサービスについて詳しく解説されていて、初めてこの使い方を知ったので、とてもためになりました。

さらに、スマートフォンの加速度センサーを使ったプログラムが簡単に作れました。今後、自作のプログラムにも応用したいと思います。

講座で学習したプログラムを少し直したのがこれです。

以下は修了時にもらえる終了証 (pdf) のイメージです。

Gacco

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

2014/03/31

JavaScript (36) プレイアウトの棋譜再生

前回作成した棋譜ビューワーの再生機能を、以前作ったプレイアウトによる囲碁対局のシミュレーターに移植しました。プログラムを simulator05 として公開します。

図32 プレイアウトの再生
【図32 プレイアウトの再生】

上図は iPad 2 でこのプログラムを実行した結果です。タブレットは縦長のスクリーンショットを撮るのに便利ですね。

前回の棋譜ビューワーの画面と代わり映えしませんが、[プレイアウト]のボタンを追加しています。そして、今回初めて実行結果からSGFの棋譜を生成しています。これでSGFの読み書きができるようになりました。中国ルールで計算しているので、棋譜のルールを RU[Chinese] としてあります。

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

より以前の記事一覧