« 2020年10月 | トップページ

2020年11月

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月 | トップページ