カテゴリー別アーカイブ: Programing

ブロックで亀 2016

一年間のご無沙汰でした。
これは「Processing Advent Calendar 2016 – Qiita」の参加記事です。

昨年は、p5.jsをブロックで編集・実行できる「ブロックでタートル with mameblock.js」を紹介しましたが、ちょうどアップデートが間に合ったので、紹介します。

今回は、なんとカメが動くようになりました!!!
ラインの上で、カメがアニメーションするようになっています。

turtle_s

ま、それだけなんですが、少しばかり、ややこしい展開でここまでこぎつけました。
まず、p5.play.jsを導入しました。
そして、インスタンスモードで動かそうとしたんですが、createGraphicsが対応していないことが判明。
がんばってバグレポートを書きました。
そしたら、なんとか#119で対応してもらえました。
(ただし、p5.play.jsのmasterには取り込まれていないので、#119から取り出す必要があります)

これで、タートルでブロックでも、細かなところを気にせずに、タートルコードを書けるようになりました。

という訳で、いよいよこれで、なにかまとまったアプリを作ってみたいと思います。

こちらからは以上です!


英語WebページをGoogle翻訳で日本語にするブックマークレット

Dictionary 8

Google翻訳が精度が上がったようなのでBookmarkletを作ってみました。特定のWebページを開いている時、このブックマークを呼び出すと、こんな感じでGoogle翻訳の結果を表示します。

導入

下記のリンクをブックマークツールバーにドラッグ&ドロップする、または、右クリック -> ブックマーク/お気に入りに追加。

使い方

特定のWebページを見ているとき、保存したブックマークを呼び出すと、別ウィンドウでGoogle翻訳の結果ページを開きます。

サンプル

以下のページを開いて、保存したブックマークを呼び出してみてください。

ソースコード

ライセンス


CC0


To the extent possible under law,

Yutaka Kachi

has waived all copyright and related or neighboring rights to
Google翻訳 Bookmarklet.
This work is published from:

日本
.

変更履歴

  • 2016-11-29 新規公開
  • 2016-11-29 ソースコードとライセンスを追加
  • 2016-11-30 コードをクロージャで書き直す

参考リンク


「60%の人間はプログラミングの素質がない」という論文は撤回されていた

Camel

知らなんだ。

広くプログラミング教育を実施しようというとき、「60%の人間はプログラミングの素質がない」と批評されることがあります。けれども、そもそも学校のテスト等で難易度が高い場合には、正規分布にならず、ふたこぶラクダのように頂点が2つになることがあるそうです。だから、プログラミングの素質がないのではなく、プログラミング教育へのモチベーション設定に失敗していたり、チャレンジングな教育目標が設定されているのではないかな。つまり、素質の問題ではなく、環境の問題なんだ。だとしたら、環境が改善されたら、ふたこぶラクダは解消されて正規分布に近づく。そして、平均点は上がるはず(ふたこぶの上位層はさほど変化しない)。

ということを考えて、いろいろ調べていたら、はなはだ旧聞なんだけど、論文が撤回されていたことを知りました。ぐぐっても上位に出てこないので、ここに書く。

「60%の人間はプログラミングの素質がない」

元ネタは、これ。

そして、 “この論文では、60%の人間にプログラミングの素質がないと推定している。”、と。

学校の成績は、ふたこぶラクダになることがある

長年、なにか腑に落ちないな、と思っていたら、ひらめきました。

プログラミング教育に限らず、学校の成績は、ふたこぶラクダになることがあるって、どこかで聞いたぞ。

実際に、モチベーションや学習環境が、成績のふたこぶラクダを生み出すことは、すでに日本の教育で問題になっているみたいです。

そもそも、統計や生産現場の品質管理の分野では、学習のふたこぶラクダ現象が指摘されている

いや、もうね。ここに書いてあるじゃん、という感じ。

正規分布にならない例として、学校のテスト等で難易度が高い場合、勉強してきた人とそうでない人で平均が分かれ、70点付近と40点付近などフタこぶラクダのように頂点が2つできる場合もありま す。

この場合「一定の条件」に当てはまらないというか、本来欲しいデータではない。グラフ上の高い山は、70点と40点付近だが、平均点は55点辺りになり、グラフでいうと、ちょうど谷にあたる部分になる。これがテストの点数の話ではなく、製品の測定値の場合、単に測定値の平均だけ見ると「何となく良さそう」と思ってしまうが、実際グラフに起こすと「何じゃこりゃ!」となります。

ちなみに工程で、測定値のグラフがフタこぶになったとなると、例えば、装置トラブルで途中から加工の位置がズレたとか、となりの規格の違う製品が混入した、等が考えられます。

というので、あらためて調べてみたら、元ネタとなった、ふたこぶラクダ論文は撤回されていたことを知りました。

ちゃんちゃん。


p5.js-widgetを試してみた


Dashboard widgets and iChat w/Jabber

手軽にグラフィカルなプログラミングを楽しめる「p5.js」が、Webページに簡単に埋め込めるようになりました。それが「p5.js-widget」です。

まずは、実物を見てみましょう!

こんな感じで、Webページに、p5.jsの実行環境を埋め込みできるんです。


このコードエリアで、右側のところにマウスポイントを合わせると、グリグリ動きますよね。これ、Procesingのコードを書き換えて、すぐに試すことができます。

使い方

次の1行を記述して・・・

<script src="//toolness.github.io/p5.js-widget/p5-widget.js"></script>

あとは、こんな感じで、コードを書くだけ。

<script type="text/p5" data-autoplay>
function setup() {
  createCanvas(200, 200);
}
function draw() {
  fill(255);
  ellipse(mouseX, mouseY, 30, 30);
}
</script>

機能

簡易的な開発&デモ環境として、いろいろと機能が充実しています。

  • Autoplay
  • Autosave
  • Error Handlin

こんな感じで、Wordpressに埋め込むこともできます。

うーむ、これは便利。

関連ページ


プログラミング学習の失敗

Someone let Toby paint on my car!

あけまして、おめでとうございます。

新年早々、ほんの少しネガティブなタイトルにしてみましたが、これは「プログラミング学習のブームは失速する」ということではありません。プログラミング学習では「失敗」を学ぶ必要があるという意味です。

デジタルネイティブ

今の若い人たちは、「デジタルネイティブ」「デジタル世代」なんて呼ばれています。

生まれたときから、ネットが身近にあり、スマホやPC・Webアプリを使いこなしています。

そこに、プログラミング学習のブームがやってきました。プログラミングを身に付けて、新しい仕事にチャレンジしたり、コンピュータについての理解を深めたり、子供たちの将来の可能性を広げたり、場合によっては貧困状態から抜け出すきっかけにしようと、世界中で多くの人たちが取り組んでいます。

では、このデジタルネイティブな人たちが、さらにプログラミングができるようになると、どうなるのでしょうか。スマホやPCやWebアプリをより細かく使いこなす・もっと道具として使いたおすことと、いったい何が違うのでしょうか。
続きを読む


ブロックで亀

101

年の瀬も、押し迫ってまいりました。

少し時間に余裕ができてきたのを良いことに、
大掃除も手伝わずコードを書いてみました。
これも、今年のやり残しの片付けなのです。

さて今年、ブロック編集ライブラリ「MameBlock.js」や、Processingでタートルグラフィックを実現する「p5.turtle.js」なんてものを作ってきましたが、この2つを合体させたサンプルプログラムをこしらえてみました。

いわゆるタートルグラフィックスを、Scratch風のブロックエディタで編集・実行できます。

続きを読む


p5.jsでプログラミングのハードルを下げるイロイロ

happy e-thanksgiving

これは、Processing Advent Calendar 2015の12日目の参加記事です。

さて、ごく普通の人が、プログラミングで身近な問題を解決できるようになればいいな、と個人的に思っていまして、そのために注目しているツールのひとつがProcessingです。

Processingは、電子アートとビジュアルデザインを主なターゲットとしたプログラミング言語+プログラミング環境です。キャセイ・レアスとベンジャミン・フラによって開発されました。デザイナやアーティストがデジタルなインタラクティブ作品などを作るときや、非エンジニアのプログラミング学習などに利用されています(Processing – Wikipedia)。

今回とりあげるp5.jsは、このProcessingのJavascript実装です。Webブラウザで、Processingの機能をJavascriptと連動させながら、Webブラウザで実現するのに最適なツールとなっています。

このp5.jsなら、ごく普通の人にとってプログラミング入門のとっかかりに良いんじゃないか思いまして、この1年くらい、いくつか簡単なツールを作ってみたのでご紹介します。どれもオープンソースですので、自由に使ってください。
続きを読む


Processingでタートル言語を作ってみた

screenshot_s

Scratchみたいなツールから、ビスケット塾みたいな勉強会まで、子供向けのプログラミング教育が、一種のブームになっていますが、その源流にあるのが、シーモア・パパートLOGOだったりします。

LOGOで特徴てきなのが、タートルグラフィックスと呼ばれる機能ですね。亀ロボットを操作することで、子供でも手軽にコンピュータでグラフィックを描いてみることができます。Scratchにも、同じような機能が搭載されています。

そんなタートルグラフィックスを実現するタートル言語「p5_turtle.js」を、Processingで作ってみました。ProcessingのJavascript実装である、p5.jsで作ってあるので、ブラウザだけでそのまま動作します。

これまでもProcessingに、タートル言語ライブラリはあったのですが、ライセンスが厳しかったりして、個人的にはイマイチ使いづらいと感じていました。そこで、そのあたりをゆるくして。さらに、がんばって、カメが絵を描く軌跡をアニメーションで表示する機能も盛り込みました。

ただし、まだエディタ機能を持たせていないので、jsファイルを直接編集する必要がありますし、コマンドもまだ4つくらいしかありません。

とはいえ、p5.jsとスプライトなどをサポートするp5.play.jsライブラリのおかげで、わりと簡単に機能拡張できそうなので、もう少し遊べるオモチャにしてみたいと思います。