僕は発展途上技術者

【大人のためのスクラッチ】スクラッチからブラウザを全自動でコントロール - scratch2web

こども向けのプログラミング学習がちょっとしたブームのようだ。

夏休みの自由研究にということだろうか、Amazon の 実用・工作・趣味 の ベストセラー ランキングで小学生からはじめるわくわくプログラミングは上位だし、拙著Raspberry Piではじめる どきどきプログラミング (はじめるプログラミング シリーズ)の方もブログラミングの本としてはそこそこ売れているようだ。両方とも扱っているプログラミング言語はスクラッチだ。

「さあプログラミングを勉強しなさい」ということで、親御さんはこれらの本をこどもに買い与えてはい終わり、というケースが多そうなのだが、ちょっと待って欲しい。スクラッチをこどもだけに使わせておくのはあまりにもったいない。

「え?でもスクラッチってどうせこども向けでしょ」というのは大きな誤解だ。次に多い誤解は、「スクラッチでできることってちょっとしたゲーム作りでしょ。実用的なものでないと大人としてはちょっと…」だ。

スクラッチはゲームを作る以外、実用的なプログラミングだって何でもできる、ということを証明するためにこれから「大人のためのスクラッチ」というシリーズでいくつか例を示していこうと思う。

スクラッチからブラウザを全自動でコントロール

ブラウザを開いてインターネットにつなげ、何らかのページに情報を入力し、ボタンを押すという作業が会社のお仕事の一部になっていることは多いと思う。

そうした作業のなかで、いつも同じ繰り返しになっている部分はないだろうか。毎日ポチポチ手作業でおこなっている操作があるなら、それをプログラムで自動化することで、チリも積もれば何とやら、で節約できる時間は結構なものになるのではないだろうか。

スクラッチでブラウザを全自動でコントロールする方法を以下に紹介しよう。

スクラッチだけではインターネットにつなげることはできないのだが、ruby の watir というライブラリをつかったプログラム(scratch2web と名づけた)を実行しておき、それをコントロールする形で実現してみた。

ブラウザで特定のアドレスを開くには、「goto」という命令をスクラッチから送る。

テキストフィールドに文字を入力するには、「input」という命令を送る。

ボタンを押すには、「click」という命令を送る。

これらを全部組み合わせて、スクラッチのページを開いて「マリオブラザーズ」と検索する操作をスクラッチから自動で行ってみる。

応用すれば、ブラウザでできるほぼどんな操作でもスクラッチから全自動でできる。

突貫で作ったので、ドキュメントが未整備な上にまだ使い勝手が悪いが github に公開しておく。

» scratch2web

順次呼べる命令を増やしていって、普通に使えるツールにしていきたいと思う。

iPhone がロボットになる Romo を Scratch でコントロールしてみました

Romo とは

Romo(ロモ)はiPhoneなどで動く「体感型のエデュケーショナルロボット」で、誰でも動かすことが可能です。iPhoneアプリが頭脳の役割になり、様々な感情や動きを表現することができます。楽しみながら子どもの論理的思考や想像力、思考力を育むことができ、遊びや学びの幅がさらにひろがる可能性を秘めています。

Romo のページ の動画をみれば、どんなことができるのかがわかります。

簡単に言ってしまえば、iPhone にキャタピラがくっつき自在に動き回れるようになる。iPhone のカメラが目になり、マイクは耳に、スピーカーは口に、画面は表情豊かな顔に。ガンタンクのようにキャタピラを付けてみたら、高性能なロボットになった、というコロンブス的な発想が面白い。

Romo の SDK を使えば、Romo を自在にコントロールするアプリを自分で作ることができます。Scratch(ブロック型の命令を組み合わせて簡単にプログラミングできる教育用プログラミング環境) から Romo を動かすために、Scratch からの命令を受け付けて Romo を動かすコントローラーとなるアプリを作ってみました。

Scratch と Romo が動く iPhone とをつなげるために、iPhone には Romo をコントロールできるようにした簡易 Web サーバーを立ち上げておき、PC 上では Scratch の命令をこの Web サーバーに対するアクセスに変換するブリッジプログラム Scratch2Romo を動かします。

構成はこんな感じです。

iPhone の IP アドレスを 10.0.0.2 とすると、http://10.0.0.2/forward というアドレスにアクセスすると Romo が前進します。PC 上では、遠隔センサー接続で接続した Scratch2Romo が Scratch から forward の命令を受け取ると http://10.0.0.2/forward に対してアクセスするという仕組みです。

Romo を正方形を描くように動かす Scratch のプログラムは以下になります。

以下が実際に動いているところです。

PC 上で動くブリッジプログラムと、iPhone 上で動かす Romo をコントロールする Web サーバーアプリのソースコードを GitHub 上に置いておきます。

» https://github.com/champierre/scratch2romo/

iPhone 上で動かすアプリは、Romo を動かすだけでなく、カメラのシャッターを切ったり、ライト代わりにフラッシュを点灯できるようにしています。機能を増やせばもっといろいろなことができそうなので、ドキュメントを順次用意していくとともにこれから改良していきたいと思います。

MacOS X 10.9.3 で nokogiri gem がインストールができないときの対処方法

MacOS X 10.9.3 Mavericks で bundle install を実行したところ

An error occurred while installing nokogiri (1.6.2.1), and Bundler cannot
continue.

nokogiri がインストールできない。良く見る光景です。

libiconv is missing.

とエラーログに表示されているので調べてみると、gem をインストールするときに –use-system-libraries を指定する必要があるとのことなので、

%bundle config build.nokogiri --use-system-libraries 

を実行して、bundle install で nokogiri gem をインストールするときに上記オプションが指定されるようにする。

結果、やはりエラーが起こるのだが、メッセージは変わっている。

You have to install development tools first.

という表示があるので、調べてみると、

%sudo ln -s /usr/bin/gcc /usr/bin/gcc-4.2

と、gcc を gcc-4.2 にシンボリックリンクする必要があるとのこと。上記を実行して再度 bundle install を試みると、今度は、

libxml2 version 2.6.21 or later is required!

と表示される。再度調べると、libxml2 のライブラリの場所を下記のように指定する必要がある。

%bundle config build.nokogiri --use-system-libraries --with-xml2-include=
/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/
Developer/SDKs/MacOSX10.9.sdk/usr/include/libxml2

上記を実行して、再々度 bundle install を実行してようやく成功。

うーん、環境構築って大変。

原宿を侵略するインベーダーを探しだせ

原宿が密かにスペースインベーダー達に侵略されているということをご存知だろうか?

街のあちこちに写真のようにタイルで描かれたインベーダーを見つけることができます。

どうやらフランスの Invader(インベーダー) と名乗る匿名のアーティスト(日本語での紹介)の仕業のようで、彼のサイト URBAN INVASION DETECTED によれば、東京以外でもすでにパリ・ロンドン・ニューヨークなどなど各国の主要都市のいくつが侵略済みのようです。

これらのインベーダーがどこにいるかは、オフィシャルサイトより購入可能なマップで知ることができるようです。(2014.6.30 時点でショップは Temporary Closed となっていました)

原宿を家族と散歩してきて、いくつか見つけてきたので「まちクエスト」に登録してきました。(まちクエストは自分が開発運用している、スマホを使ってまちを歩きながらクイズに答えて楽しむことができるアプリ/ウェブサービスです)

家族と原宿界隈にでかけたとき、あるいはデートのときなどに探すと楽しいかと思いますので見つけてみてください。

また、クエストと呼んでいる謎解きポイントはユーザーなら誰でも追加できるので、他のインベーダーを見つけたら、よかったら登録してみてください。その際に「インベーダータイル」でタグ付けすると、グループ化されて探しやすくなります。

mac を新調したとき、あるいは OS を入れ替えたときに毎回てこずること

mac を新調したとき、あるいは OS を入れ替えたときに毎回てこずることを備忘録としてメモしておく。

homebrew でインストールしていたはずのツールがない

time capsule から time machine でバックアップをリストアして、たいがいのファイルは元通りになるのだが、homebrew でインストールしたはずのツールが使えない。

% brew list

で確かに目的のツールはリストされるのだが、 /usr/local/opt にはない。

こういうときは、 brew uninstall xxx; brew install xxx でインストールし直す。

gem(native extensions)のインストールで「You have to install development tools first.」と言われる

http://qiita.com/mah_lab/items/e3493a99af31d61c81be にあるとおり、

sudo ln -s /usr/bin/gcc /usr/bin/gcc-4.2

を実行して解決できる。

Show & Tell(ショーアンドテル) at Scratch Day Tokyo 2014 振り返り

Scratch Day Tokyo 2014が先週土曜日に開催されました。

Scratch Day は教育用プログラミング言語「Scratch」のユーザー、関係者が一同に会するイベント。世界中各地で同時にこの日に開催されます。今年の Scratch Day Tokyo は東京大学の福武ホールで行なわれました。

イベントの模様は Ustream の sd2014tokyo のチャンネルで観ることができます。今年から始まったプログラミングバトル、そして昨年に引き続きおこなった Show & Tell、そして各パネルディスカッションが見どころです。

このうち僕がおもに関わっていた Show & Tell について、振り返ってみたいと思います。

Show & Tell とはスクラッチで自分で作った作品をステージ上でこどもたちが Show、つまりデモして見せながら、Tell、工夫した点などを説明します。持ち時間は各5分、IT 系のイベントでおこなわれる LT(ライトニングトーク)をこどもたちがおこなうイメージです。

2012年、Scratch@MIT(Scratch のカンファレンス。開発元の米ボストン MIT でおこなわれる) に参加したときに、本家の Show & Tell を見て、これを日本でもぜひやりたいと思って昨年から Scratch Day Tokyo のプログラムの一つとして行なっています。

Keep

アメリカ人の子どもたちは生き生きとプレゼンしていましたが、それはアメリカの学校では、この Show & Tell(聴衆の前で何かについて見せて説明する)がごく一般的におこなわれているからであり、要は場数を踏んでいるから。日本でも同じような機会をどんどん増やしたいと思っているので、Keep では過去2回おこなった Show & Tell での運営ノウハウをまとめ、来年の Scratch Day Tokyo にはもちろん、他のイベントで Show & Tell をやってみたいというときの参考にもなればと思います。

  • Show & Tell の応募は Google Docs のフォーム機能を使っておこなっています。応募フォームのテンプレートを参考までに公開しておきます。新規の応募があったときに関係者に通知されるよう、回答が集計されるスプレッドシートの方で [ツール] > [通知ルール] を設定しておくとよいでしょう。イベント当日の1ヶ月〜2ヶ月前くらいから応募を始めます。
  • 昨年は会場に来られる人限定だったのですが、今年から遠方のかたでも説明の動画あるいは読み上げて1分間くらいの内容のテキストを作品とともに送ってくださればエントリー可としました。今年は14作品中3作品が遠方のかたの作品で、動画での説明を流したりあらかじめ送っていただいていた説明テキストを読み上げた後、こちらでデモをおこないました。もちろん本人自身が会場で説明するにこしたことはないのですが、それと比べてさほど遜色なく、作品自身が作者の思いまで伝えることができたように思います。
  • 当日の司会は昨年に引き続き CoderDojo 柏の宮島くん(なんとまだ高校生!)にお願いしました。昨年からおまかせしたときからさらにパワーアップ、大人顔負けの MC ぶりでもう脱帽です。
  • 応募作品はスクラッチのサイトのスタジオ機能を使い一箇所に集めておきます。Show & Tell @ Scratch Day 2014 in Tokyo が実際につかったスタジオのページです。
  • 〆切の一週間前になっても作品の応募がほとんどなく心配だったのですが、〆切直前に結局10作品と昨年以上の応募がありました。作品を受け付けた旨をメールで各応募者に送ったのですが、迷惑メールにいってしまうのか届かないという方が現れ、Twitter や Facebook での連絡も駆使してなんとか全員問題なく連絡がとれました。「応募いただいたすべての作品を採用させていただき、案内のメールを 5/10(土) 15:30 頃に送付いたしました。もし、応募したのにも関わらず案内メールを受け取れていない場合は、◯◯までご連絡ください。」という告知を応募のページに表示していたのが功を奏しました。
  • 応募作品はひと通り事前に遊んでやりこんでおきます。なかなか手強いゲームも多く、最後のボスまで辿りつけないという場合は、やむをえずプロジェクトの中身をのぞき、どんなステージが用意されているのか、どういうボスが待ち受けているのかをチェックしておきます。
  • 今年はプログラミングバトルのために低い机が用意されていたため、必要ありませんでしたが、昨年はステージの壇上の机が大人用の高さだったので、その場合は小さいこどもの顔が聴衆から見えるよう、台が必要になります。

Problem

  • 当日はネットにつなげてスタジオページに集めた応募作品を順次再生すればいいや、と思っていたのですが、当日の午前中 Scratch のサイトが不安定であることを知り、急遽全作品をダウンロードして、Scratch 2.0 のオフラインエディタで再生することにしました。前もって準備しておくべきでした。
  • ダウンロードしたファイルは 01_ロボットバスターズスーパーEX.sb2
  • のように先頭に番号をふっておきます。1番は 1_◯◯ ではなく 01_◯◯ のように 0 始まりの二桁で番号付けしておくときちんと並びます。スムーズな進行のためにこのあたりの細かい気配りが大切です。
  • PC のオーディオ端子とスピーカーとをつなげておくのを最初忘れてしまっていました。また、マウスも事前につなげておくべき。事前の準備不足でした。
  • 当日応募枠を含め応募が予想より数作品多くなってしまい、割り当てられた時間を10分ほどオーバーしてしまいました。来年は15作品以上は応募があることを予測して時間を長く設けるなどの対処が必要そうです。
  • Show & Tell が終わったあとに参加者をあつめるスペースと機会を設けるべきでした。クロージングが始まってしまいあたふたと退場してしまったのですが、あの場に一緒に参加したということでスクラッチの ID をこどもたち同士、交換する機会にもなったかと思うと悔やまれます。せめて、もし参加者自身あるいは保護者の方でこの振り返りを読んでいたら、Show & Tell @ Scratch Day 2014 in Tokyoのスタジオページをたどって、気に入った作品の作者に友達申請するなり、お子様にそのことを伝えてあげてください。

Try

  • Show & Tell は1部と2部に分かれているのですが、イベント中盤でおこなわる第一部の作品に関しては、会場内のどこかのスペースで実際に遊んでもらえるコーナーを作っておけばよかったと思います。
  • お国柄か、アメリカでの Show & Tell よりもゲームの作品の比率がかなり高めでした。しかも確実にレベルが高くなっており、楽しみではあるのですが、一方でゲーム以外の作品の応募がしにくくなるような状況にもなりかねないので、ゲーム部門、ストーリー部門、音楽部門、ツール部門のように部門をいくつか作る必要があるかもしれません。女の子の応募をしやすくする工夫も必要そうです。
  • Ustream の録画で雰囲気は何とか伝わりますが、ライブ配信と同時での録画のためか画質が悪い。次回はプログラミングバトルとともに、Show & Tell はライブの配信とあわせて、普通に録画しておいて YouTube に動画をアップロードしたい。
  • たくさんの知らない人の前でこどもたちが緊張しつつも勇気を出して発表し、保護者の方を時には驚かせ、とても良い経験になったと、毎回感謝の言葉やメールをもらうたび、やって良かったと感じます。来年の Scratch Day Tokyo でも Show & Tell は必ずやりたいし、その後もずっと続けたい。

ライトセーバーのCG動画作り@こどもVFX部 でプロのワザを見た!

CG動画制作のプロのワザをこどもと一緒に見てみようということで、下北沢オープンソースカフェで「こどもVFX部」なるワークショップが行なわれました。

撮影・CG加工含め、2.5時間くらいでしょうか。。魔法のワザでできあがった、圧巻の動画がこちら↓

作ったのは、VFXアーティストの大槻直貴さん、黒田製作所の黒田さん。大槻氏は日本の映画やドラマのCGを実際に制作している方で、ワークショップの前半では、実際の映画で使われているCGを解説してもらいました。

後半は、Adobe の After Effects というツールで、電柱が切られ、背景の邪魔なものは次々消されていき、ライトセーバー、煙、瓦礫なんかが魔法のように現れていくのをライブで見ながら、こどもたちも昔こどもだった大人たちも大興奮!

「こどもVFX部」やりましょう!というきっかけとなったのがうちのこどもたちが作ったライトセーバー動画↓

これを観た黒田さんが、友人の大槻さんに声をかけたら、快く引き受けてくださいました。これってまさに、自分の好きなこと、興味を持ったことを公開しておくといいことあるよ、という看板効果だなあ、と思います。

CG動画もさることながら、撮影の方に参加していた息子たちは、かっこ良く見えるライトセーバーの持ち方だったり、カメラに向かって走るときの注意、カット割り、三脚の使い方などなど、動画の撮り方の細かな工夫や手法自体にもとても興味を持ったようでした。

創作意欲を刺激された次男がなにやら寝る前にメモに残していました↓

きっとかれらの人生で思い出に残る一日となったことでしょう。

delayed_job を monit で動かし、サーバー再起動時に自動起動するようにする

結構苦労したので、備忘録的にメモしておきます。

monit をインストール

% sudo apt-get install monit

monit の自動起動を設定

% sudo update-rc.d monit defaults

monitrc の編集

% sudo vi /etc/monit/monitrc

以下のようにコメントを外す。

set httpd port 2812 and
#    use address localhost  # only accept connection from localhost
    allow localhost

monit の状況を確認するコマンドが実行できることを確認。

% sudo /etc/init.d/monit restart % sudo monit summary

ここが一番はまった箇所。delayed_job が提供するサンプルのmonitrcではうまく動かず、以下のように設定したところ動いた。

## /var/www/apps/{app_name}/shared/config

check process delayed_job
  with pidfile /var/www/apps/{app_name}/shared/pids/delayed_job.pid
  start program = "/bin/su - app -c 'cd /var/www/apps/{app_name}/current; RAILS_ENV=production script/delayed_job start'"
  stop program = "/bin/su - app -c 'cd /var/www/apps/{app_name}/current; RAILS_ENV=production script/delayed_job stop'"
## /etc/monit/monitrc

include /var/www/apps/{app_name}/shared/config/delayed_job.monitrc

を追加

「Raspberry Piではじめるどきどきプログラミング」という本を書きました

共著で書きました「Raspberry Piではじめるどきどきプログラミング」が本日出版されました。

Raspberry Piではじめるどきどきプログラミング (はじめるプログラミング シリーズ)
阿部 和広 石原 淳也 塩野 禎隆
日経BP社
売り上げランキング: 978

要点については

»「Raspberry Piではじめるどきどきプログラミング」のここがすごい

の方を見ていただくとして、ここでは書いた本人だからこそ知る裏話的なことをいくつか紹介したいと思います。

  • OtOMO やこども向けプログラミング教育の活動で大変お世話になっている阿部先生、そして塩野禎隆さんとの共著で、僕はマインクラフトのパートを書きました。このブログでScratch で Minecraft を動かすという試みを紹介していたのがきっかけで執筆のお誘いを受けました。こういう話はブログを書き続けている人からは良く聞く話なのですが、自分のブログで情報を発信しておくといいことが起こるので、まだやっていない人はぜひやったほうがいいと思います。

  • 小学生からはじめるわくわくプログラミング から続くシリーズ第2弾ということで、いくつかのキャラクターが再登場します。こども向けとは言え技術書ですから間違いのないように気を使いながら記述する一方で、ストーリーを考え、ニャタロ〜とワールド博士との掛け合いのセリフも創作する必要があり、これが思っていたよりもだいぶ大変でした。なんというか左脳とウノウの両方を駆使する必要がありました。ワールド博士になりきって、「◯◯なのじゃ」「◯◯だぞい」とブツブツつぶやきながら執筆していました。

  • 本の中に登場する Scratch と Minecraft をつなげる Scratch2MCPI を作り、GitHub 上で公開しています。誰でも簡単にインストールできるようにということで、依存するライブラリのインストールやその他の手順をすべてひとつのスクリプトで実行できるようにし、たった一行ターミナルに入力するだけで終わるように工夫しています。

  • 原稿は、小6、小3の息子二人に加えて、スクラッチもマインクラフトも全くわからない奥さんに頻繁にレビューしてもらいました。スクラッチもマインクラフトもよくわかっている息子達はスイスイ読み進めて操作できるのに、奥さんはつまずきまくるので、「もう、なんでそんなことわからないんだよ」と腹が立ちそうにもなりましたが、一つ一つそうしたつまずきポイントをつぶしていったおかげで、だいぶ改善されてわかりやすくなっているのではと自負しています。

  • 手タレとして長男の手が写真にたびたび登場しています。ガッサガサの遊んだときの傷まであった手で大丈夫かなと思いましたが、プロフェッショナルな技のおかげで見違えるほど綺麗に撮っていただいています。

  • マインクラフトの画面例として、次男がマインクラフトの世界の中に作ったまちをキャプチャしました。「小さな家や高い塔、地下基地やお城といった好きなものを作れる」という文脈にマッチするように作ってほしいとお願いしたところ、どうも地下基地を地下墓地と読み間違えたと思しき部分があるのですが、それも愛嬌ということでそのまま採用しています。

Amazon ではすでに入荷待ち(2014/2/15時点)になってしまっていますが、リアル書店ではこれから入荷されるとのことです。 もし見かけたら、ぜひ手にとってみてください。

こどもに買い与えてはい終わりではなくて、てきたら大人にも読んでもらってこどもと一緒に Raspberry Pi とプログラミングを楽しんでほしいと思っています。

» Raspberry Piではじめるどきどきプログラミング (はじめるプログラミング シリーズ)

ちなみに Raspberry Pi を購入する場合は、RSオンラインの方が安く購入できるのでおすすめですが、ワンクリックで Amazon から購入したいという場合はこちらから(LANとUSBが2つ、メモリが512MBを搭載するタイプBのほうがおすすめです)↓

Raspberry Pi Type B 512MB
Raspberry Pi Type B 512MB
posted with amazlet at 14.02.19
RS Components Ltd (ソースマーキング及び販売 Umemoto LLP)
売り上げランキング: 242

raspberry pi でスクリーンキャプチャを撮る

raspberry pi でスクリーンキャプチャを撮るツールとして、ググってみると KSnapshot がおすすめとして挙がってくるのだが、依存関係が多くインストールにめちゃめちゃ時間がかかる。

% sudo apt-get install gnome-utils

で gnome-utils をインストールするほうが、こちらもやや時間がかかるが、まだ早い。

アクセサリ > スクリーンショット でキャプチャツールを使うことができるようになる。

Recent Entries

Tags

Archives

Admin