2020/11/30

JavaScript (45) スクロール時の不具合を改修

前回作成したカードのサンプルは、スクロール後にドラッグアンドドロップするとカードがどこかへ行ってしまうという不具合がありました。これは、カードの左上のクライアント座標が、スクロールすると変わってしまうのに、onload 時(ページのロード時)に覚えたものをそのまま使ってカードの移動先を計算していたためです。

クライアント座標はブラウザに表示されるページの左上を原点とした座標です。スクロールすると変わってしまいます。

そこで、スクロールのイベントリスナーを登録し、スクロール後にカード左上のクライアント座標を取得し直すように修正しました。スクロールは連続して行われる可能性もあるので、スクロール後 500ms(0.5秒)待ってからその処理を行っています。

プログラムのソースと実行結果はこちらに公開しました。

今回作成したサンプルは静的な HTML5 + JavaScript のコードでしたが、最終的にはメンバー毎に違うものを表示する必要があるので、サーバーからの情報を元に表示内容を変更する処理を作り込まなければなりません。これはおそらく Ruby の連載で行った Ajax (Asyncronous JavaScript +XML) と呼ばれる非同期通信を使うことになるでしょう。

関連項目

| | コメント (0)

JavaScript (44) ドラッグアンドドロップを使ってみた

BASIC の構文解析の途中ですが、話題を変えます。

コロナ禍でオフラインのワークショップが開きにくい状況なので、オンラインでワークショップができないか研究を始めることにしました。カードを使ったワークショップを Zoom や Skype などのオンライン会議ツールで実施するときに、JavaScript と Ruby でオンラインのカードシステムを作れないか、検討しようと思います。

まずはクライアント側でいろいろ実験をやってみます。カードはイメージ(ビットマップ)を使うとしたとき、HTML5 + JavaScript ではイメージには元々ドラッグ可能という設計になっているので、これを試してみたいと思います。

最初の実験結果をこちらに公開しました。

Dragndrop01

ドラッグアンドドロップに関するイベントリスナーを onload の時点で準備するだけです。そもそも HTML でイメージを配置するだけで、ドラッグはできます(ただ、ドロップしても何も起きませんが)。

今回の実験は単純にカードを画面上で移動するだけでしたが、システムとしてはディーラ役が複数のメンバに対してカードを分配する機能も必要になるでしょう。ディーラやメンバがそれぞれの URL にアクセスしてもらういわばクラウド型のシステムにする予定です。

関連項目

| | コメント (0)

2020/06/05

JavaScript (43) BASIC の構文解析

JavaScript の連載は 3 年ぶりになります。今回は最近始めた「BASIC でコンバータを作る」企画の一環で、BASIC の構文解析の部分を6年前に作った JavaScript のパーサージェネレーターで使って作ってみようということで、BASIC パーサーを作ります。

作成したコードとその結果をこちらに公開します。

とりあえずパーサーらしきものが出力されました。次回は作成したパーサーが動作するか確かめてみたいと思います。

(つづく)

関連項目

| | コメント (0)

2020/05/30

BASIC (5) 構文解析について

BASIC の構文解析をどのように進めるか、考えていこうと思います。

『FM-7 F-BASIC文法書』 の PLAY 文のところに「PLAY構文図」というのが載っています。これは PLAY 文の構文を図で表したものです。

Play

すべての文に対してこのようなものを作り、それにしたがって内容を読み取るのが今回作ろうとしている構文解析になります。

そういえば以前、JavaScript でパーサージェネレータというものを作りました。これは囲碁の棋譜 SGF (Smart Game Format) の構文を解析するために、EBNF (Extended Backus-Naur Form) で書かれた構文から JavaScript のパーサー(構文解析プログラム)を作り出すツールです。

EBNF は上図の構文図の代わりになるものです。SGF の構文を書けば SGF のパーサーが出力され、BASIC の構文を書けば BASIC のパーサーが出力されます。

このツールで出力されるのは JavaScript のコードですが、一から BASIC のコードを書くより JavaScript のコードを見ながら書いたほうが、正しいコードを書けるような気がします。

ということで、しばらくの間、JavaScript の連載に移行します。

関連項目

| | コメント (0)

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

より以前の記事一覧