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

プログラミング講座(203) 人間にしかできない何か

数学者 新井紀子さんの著書『AI vs. 教科書が読めない子どもたち』を読みました。現在の AI (人工知能)がどのようなものなのか、わかりやすくまとまっています。現在の AI はコンピューターのプログラムです。プログラムは数学の上に成り立っています。AI で使われる数学は著者によると「論理と確率、統計」ということです。そして現在の AI は意味を理解していないというのです。

たとえば、囲碁 AI が囲碁界を全く変えてしまうほどの影響を及ぼしたにもかかわらず、意味を理解していないと思うと、とても不思議な気持ちになります。

今「プログラミングと数学」についてこの連載を続けているのは、プログラミングは数学に属する分野だとの思いがあったからなのですが、プログラミングや数学には無いが、人間に有るというものが存在していることを改めて感じました。そしてプログラミング教育で本当に必要なのは、人間にしかできない何かを育むことなんだろうと思いました。その中にもちろん新井さんが力説する「読解力」が含まれるのは間違いないでしょう。

「わかる」と「できる」の両方ができることが望ましいですね。コンピューターはいろいろできるが、わかってはいない。一方の人間もある程度しかわかっていないと思います。できるようになる努力とともにわかるようになる努力も重要ということでしょう。

そもそも「わかる」とはどういうことか、科学的にはわかっていないようです。これがわかれば「わかる」コンピューターを作り出せるのかもしれません。

関連項目

| | コメント (0)

2020/10/26

本になった私のブログ 5

このブログの 2018年1月~2020年9月までの記事をブログ出版局のサービスで本にしました。今はなきココログ出版で作ったものを含め、これで5冊目です。

2日前に依頼したのですが、もう届いていてびっくりしました。これまで期間を分けて出版していましたが、ジャンル別の内容でまとめて本にするのもありだと思いました。

Img_1099

関連項目

 

| | コメント (0)

2020/09/29

Ruby (5) カウンターの改良

懸案だった、Ruby のカウンターを改良しました。Ruby で作ったカウンターは合計6か所で運用していたのですが、リセットされたのはおそらく1つだけだったのではないかと思います。まずは新たな版をこちらに1つ追加しました。

前回、ログも残したいと書いたのですが、とりあえず io.flock という機能を使って、多重に開けないように対策しました。前回公開したものを除き、それ以外のカウンターは新しい版に順次入れ替える予定です。

前回、Ruby カウンターを書いたのが、2016年。Aptana Studio 3 で開発し、Apache Server でテストしていました。今使っている PC にはどちらもインストールされていません。今は Aptana Studio 3 より、Visual Studio Code (VSCode) のほうが使いやすいかもしれないと思い、今回は VSCode で開発しました。VSCode からもローカルサーバーを起動する方法があるのですが、CGI で Ruby を起動してブラウザと Ajax 通信するような拡張機能を見つけられなかったので、テストは実環境で行いました。

CGI ファイル(今回は counter02.rb)のモードを実行可能にする必要があるのですが、前回どうやったのか覚えていません。chmod というコマンドを使ったような気もするのですが、Windows の FTP コマンドには chmod がないとのことで、調べた結果、ファイル エクスプローラーのパス入力に FTP サイトのアドレスを入力し、アップロードしたファイルのプロパティで実行可能にするという方法を取りました。

関連項目

| | コメント (0)

2020/09/20

プログラミング講座 (202) 1次元セルオートマトン

以前、Facebook の Small Basic グループに公開した1次元セルオートマトンのプログラムがあったので、これを Small Basic オンライン用に改造しました。

1dca_18

プログラムはこちらに公開しました。描画が終わるまで多少の時間がかかります。上図はルール18の1次元セルオートマトンについて y 方向に各世代を並べたものです。ルール18を含むいくつかのルールでは上図のようなシェルピンスキーのギャスケットと呼ばれるフラクタル図形を生成します。

関連項目

| | コメント (0)

2020/09/14

プログラミング講座 (201) パラメーター

数学のパラメーター

最近の連載で、直線の方程式をパラメーター k で表したり、スーパー楕円をパラメーター θ で表したりしました。このパラメーターは数学用語で媒介変数(ばいかいへんすう)とも言います。確率統計の母数(ぼすう)も英語では parameter です。

y = f(x) において、x を独立変数 (independent variable)、y を従属変数 (dependent variable) と言います。y を x の関数で表せればいいのですが、例えば円の方程式 x2 + y2 = r2 のように y = f(x) で表しずらいとき、媒介変数を使って x = g(θ), y = h(θ) のように従属変数を独立変数の関数で表せると計算がしやすくなったりします。

プログラミングのパラメーター

一方で、プログラミングでは仮引数(かりひきすう)が英語で (formal) parameter です。Small Basic では例えばヘルプ画面に出てくる GraphicsWindow.DrawRectangle(x, y, width, height) の x、y、width、height は仮引数です。これに対して実際に与える値を実引数(じつひきすう)と言い、英語では actual parameter と言います。例えば GraphicsWindow.DrawRectangle(150, 100, 400, 300) の 150、100、400、300 は実引数です。

引数を使うことで、その部分は外から変えられるのでより一般化されることになります。例えば3次関数の y = x3 を計算する関数より y = ax3 + bx2 + cx + d を計算するほうがより一般的な解が得られます。

プログラミングの引数にはもう一つメリットがあります。仮引数がローカル変数として扱われる点です。コピーしたものを変数として使うので、中身を上書きしても実引数は壊れません。

Small Basic では関数の定義ができず、全ての変数がグローバル変数なので、サブルーチンに変数を渡す場合、壊さないようにしたり、事前にコピーするようにするなどの工夫が必要です。また、何を外から渡しているかは、コメントなどで明示したほうが読みやすくなります。

GitHub Gist に Small Basic のサブルーチン群をスニペット (snippet) として公開しています。ここでは疑似的な引数については、

' param x, y - Cartesian coordinate

のように記述しています。この param はもちろん parameter の略ですが、伝統的なドキュメント形式として、JavaDoc、JSDoc 3、Doxigen などの(ソースコードからドキュメントを出力する)ツールで @param 仮引数名 と書いているものを真似ました。 ちなみに C# や VB でも <param id="仮引数名"></param> という記法が使われています。

なお、Gist に上げているサブルーチン群は今のところ Small Basic デスクトップ用なので、Small Basic オンラインでは動かないものもあります。

関連項目

| | コメント (0)

«プログラミング講座 (200) 3次ベジエ曲線