福井工業大学で開催されましたロボ・キャンプ 2019でML2ScratchとEV3を使った

» 機械学習×ScratchでAI(人工知能)アプリケーションを作ってみよう！

というワークショップを開催してきたので振り返ってみます。

Keep (今後も続けていきたいこと)

• ワークショップ後の振り返りというのを初めてやってみたのですが、 言葉わからない外国人とも気持ちで通じるけど、ロボットにはナカナカ伝わらなくて難しかった など、ユニークな意見が多く、とても良かった。これは次回からも続けていこうと思う。

• 参加者が保護者の方含め40人規模になると聞いて、最初は1人で行こうとしていたのを、CoderDojo調布のEV3エキスパート北原さんにお願いして一緒に企画、運営することにしました。東京にいる間に事前に打ち合わせを行い計画を練ることができましたし（1人ならやらない）、ワークショップ自体かなりスムーズに進めることができたのは、本当に北原さんのおかげでした。トラブル対処のときも心強かったですし、最初1人で行こうとしていたのは無謀でした。次回こういう企画のときは、2人以上体制にする。

• PCの問題や、ML2Scratch自体の問題でトラブルことがほぼなかった。用意していただいたPCの性能が良かったのと、いろんな場面でML2Scratchを使ってきた上での今までの改善のたまもの。

• 保護者の方々と一緒になって楽しそうに作品創りに取り組んでいたのが印象的でした。干渉し過ぎないようにということで、こどもと保護者をあえて離すという場合もあるのですが、保護者と一緒に参加という今回のケースも、これはこれでありだなと感じました。

• 組み立て済みのEV3を使うため、作品の幅がせまくなってしまうかなあ、と心配していたのだが、杞憂でした。距離センサーを使わず、機械学習で障害物を認識して止まるロボットカーや、ジャスチャーと物体認識を組み合わせてコントロールする例など、作品の幅は広かった。

• スペースが十分に広いというのと、明かりが一定で白基調の部屋というのもあったと思うのですが、カメラを上向きにして天井が背景になるようにするなどの工夫もそれぞれおこなっていて、認識の精度がこれまでよりも高いなと感じました。6つ7つのラベルの判別もうまく動いているケースもあって驚きました。

Problem(反省点)

• 会場の無線LANが帯域的に十分でなく、ScratchもML2Scratchを利用できるようにした改造版Scratchもロードするのに時間がかかっていました。ワークショップ中には、これが問題になることはなかったのですが、バックアップとして、自前のWiFiルーターを持ち込んでおけば良かった。

• ワークショップ前に準備しておくこととして、EV3を指定の形に組んでおくこと、Scratch Link をインストールしておくことなどをお願いしていたのですが、Chromeをインストールしておくことなどの僕が見逃していたところがいくつかあり、ワークショップ直前に慌ただしく準備することになってしまった。ML2Scratch + EV3 は初めての挑戦だったため、事前準備でやっておくこともなかなか定まらず、1回のお願いで済まず、追加のお願いのやり取りが発生してしまったのもまずかった。次にEV3を使ったワークショップをおこなうときには同じ失敗をしないように修正版の事前準備リストを残しておきます。

- Chrome をインストールしておき、デフォルトのブラウザとして設定しておく。
- Scratch Link をインストールしておく。
- EV3組み立てマニュアルの40まで組み立てておく。
- EV3 のファームウェアを V1.10Eにあげる(Scratch EV3エクステンションがV1.10E以上しかサポートしていないため)
- 各EV3の区別がつくようにBRICK NAMEを変更しておく。(ファームウェアをアップデートするとBRICK NAMEが元に戻ってしまうので、順番が前後しないようにする)
- BRICK NAMEをテプラで貼っておく。
- [ML2Scratchを利用できるScratch](https://champierre.github.io/scratch3/)を開き、ショートカットをデスクトップに作成しておく。

• PCを操作しながらマイクでしゃべるのが大変。Afrel のスタッフの方が気をきかせてくれてマイクを持ってくれましたが、これって皆さんはどうやって対処しているのだろう？ワイヤレスマイクといった機器で解決しているのだろうか？

Try (今後ためしてみたいこと)

• そういえば、参加者の振り返りはおこないましたが、運営側の振り返りはおこないませんでした。ワークショップ中「『学習データをリセットする』ブロックを誤って『ずっと』ブロックの中に入れて実行してしまったら、ブラウザがスタックしてしまった」というフィードバックをいただいて、さっそく修正したのだけれど、他のフィードバックもAfrelのスタッフ、福井工業大学の学生の皆さんからも拾うべきでした。次回からは運営側の振り返りを行いたい。

主催のAfrelのスタッフの皆様にはとても良くしていただきましたし、会場の準備、PCのセットアップ、EV3の事前の組み立てなど環境作りが完璧で、おかげさまでワークショップが滞りなく行えたと思います。福井工業大学の学生の皆さんにも、困っている参加者がいたら積極的に助けてくださり、とても助かりました。ありがとうございました。

前日の懇親会での越前蟹おいしかった〜↓

今回、名古屋で開催された DojoCon と日にちがバッティングしてしまって、弾丸出張となってしまい、福井の観光地など満喫できず心残りでしたが、また次の機会の楽しみに残しておくこととします。

昨年から香港、シンガポール、台湾とアジア各国の Maker イベントにいくつか参加しているのですが、今回は上海。

» Maker Carnival Shanghai 2019

に出展してきました。

メインスポンサーで STEM 関連ハードウェアなどを作っている DFRobot の Rachel さんが Maker Faire Tokyo を訪れた際に誘われて出展することにしました。

ML2Scratch を出展しました

機械学習と Scratch とをつなげる ML2Scratch をデモするのですが、今回はこの ML2Scratch を使ってゴミを自動で認識して分別するAIゴミ箱を作ってくれた小川さんの娘さん、桃佳さんの作品と一緒に出展することにしました。

まちクエストも一緒にやっている小川さんのレポートはこちら↓

» Maker Carnival Shanghai 2019 で出展してきたよ（娘が）

小川さん親娘は残念ながら途中で帰国することになったのですが、帰国の理由が、このAIゴミ箱が351作品中最終10作品に残り、JJPC全国小中学生プログラミング大会の最終審査会に出なくてはいけなくなったから。残念ながら、グランプリは取れなかったようですが、アイデア、実装力ともに素晴らしくこちらの記事でも取り上げられています。

» 小学生が作った「未来のゴミ箱」は自律走行＆機械学習でゴミ分別　IoTセンサーで外の環境を検知！JJPC 全国小中学生プログラミング大会レポート

さて Maker Carnival ですが、会場はこんなところ。三国志なんかに出てきそうなお城っぽい門をくぐると、スタジアムになっており、ここにテントを張って出展するのです。なんともスケールがでかい、テンションが上がります。

ML2Scratch と Microbit 拡張をさらに拡張した @yokobond さんが開発された Microbit More を使った作例のコイン選別AIロボットを、制作されたネコリンピックのネコマ製作所さんから許可をいただき、再現して展示しました。

作りかたはこちら↓

» Scratchとmicro:bitでコイン選別AIロボットを作る

香港、シンガポール、台湾では英語での説明でほとんど通じていたのですが、今回上海では英語でOKの場合とそうでない場合とで半々くらいでした。「英語は話せますか？」と聞くと、自分の子どもを指して「この子はわかるので、この子に話しかけてくれ」と言われることが何度かありました。お店などでは中国語しか通じないことが多く、録りためているNHKテレビ中国語を使って中国語勉強しないと、と思いました。

Maqueen を Scratch からプログラミングできる Scratch2Maqueen

上海滞在中、ホテルのアレンジや会場でのお世話などなど、DFRobot のスタッフの方々にはとても良くしてもらいました。何か DFRobot のために貢献したいなと思って、深夜までかかってホテルで作ったのがこちら。DFRobot 製の Maqueen を Scratch から動かせるようにした拡張機能、Scratch2Maqueen です。

» Control DFRobot from Scratch - Scratch2Maqueen

Maqueen のようなプログラミングして前後左右に動かせる車両型のロボットはいろいろなものがありますが、ライントレースもでき、超音波センサまでついて高機能、安定性もあって、ここまで安価なものは他にはあまりないと思うのですが、残念ながら Scratch から動かすことができません。そこで、 Microbit More を使いながらうまく改造して、拡張機能として Scratch からコントロールできるようにしてみました。ML2Scratch と組み合わせて機械学習を使ってジェスチャーで操作するなんてことができますし、本来の Scratch でできることとうまく組み合わせて、できることの幅が広がるかと思います。

日本からの Maker の方々

お隣は AI Trash(AI ゴミ箱)。乾電池か缶、あるいは果物のどれかを Web カメラに見せると、それに応じたミニゴミ箱の蓋が LEGO EV3 で作った機構によって自動的に開きます。

今回、日本の Maker の方々もたくさん参加していて、ステージで楽しい寸劇を披露したり、Overseas（海外勢）の枠で自慢の作品の数々を披露していました。ロボットや盆栽といった日本的な要素をうまく取り入れていて、保安と書かれた腕章をしたちょっとものものしい格好のセキュリティの人たちも観に来ていたりして微笑ましかったです。

反対側のお隣では、わくわくプログラミングの中国語版を並べて、著者の阿部先生自らが売り子になって売っていると、ひっきりなしにサインや写真を求められていました。その阿部先生の日本のプログラミング教育事情を紹介する講演も聞きに行きました。

これからは、勉強が良くできてルールに良く従うA型学生でなく、革新的なアイデアを創造できるX型学生が必要というお話。僕もA型おじさんでなくX型おじさんになれるように精進します。

中国にはX学生が必要だと言っているのが、元清華大学学長で、北京市長の陳吉寧先生。日本だと東工大と東京都知事が旗を振っているようなもの。中国のScratch登録ユーザー数はこの1年で80万人から300万人に増えました(日本は47万人、世界は4700万人)。私の本も中国語版の方が売れているかも。 https://t.co/zMRbUdGkjz

— アベ先生 (CV: 阿部和広) (@abee2) October 27, 2019

滞在中、ずっと行動を共にしていた日本の Maker の方々とも仲良くなれて良かった。休憩中、VRチームのブースにお邪魔して現地のクラフトビールを呑んだり、

夜は、みんなで火鍋を食べにいったり。。QR をスキャンするとスマホでオーダーでき、決済もスマホ決済と現金やクレジットカードはほとんど使いませんでした。

展示の最終日は関係者の方々含めた盛大な懇親会。上海蟹おいしかったです。

上海の印象

2年前に北京トランジットのときに、空気が汚く黄色くかすむ風景の中、空港のセキュリティで息子のモバイルバッテリーが問答無用で没収になったというネガティブな経験があったので、正直上海を訪れるまでは若干の不安がありました。しかし、約一週間滞在してみて、印象はガラッと変わりました。

滞在中、嫌だなあと思ったことは一度もなく、街は清潔ですし、人々のマナー、サービスも良かったです。横入りする人などはいなくて、みんな列に並んでいたと思いますが、こうしたスローガンのおかげなのでしょうか。。「智者は順序を守る」ということなんでしょうか、なかなかにダイレクトです。

クラフトビールのお店に飲みに行った時、おしゃれな感じの屋上でみんなで飲んでいたら、寒いだろうからということでブランケットをお店の方が持ってきてくれていたのが印象的でした。

日本からの Maker グループ内の、Maker Carnival に以前参加したという方に聞くと、2年前とは随分違うとのことだったので、そのあたりは急速に変わっているのかもしれません。

到着した当日、日本からの Maker の方々何人かと観に行った上海中心地の夜景。LED の圧倒的な数、そして各ビルの LED の点滅パターンが同期しており圧巻でした。

帰国前日には、上海の大学や会社、メーカースペースを訪れるツアーをアレンジしていただいたのですが、オフィスの雰囲気、景色はほぼほぼシリコンバレーです。

ツアー中見せてもらった顔認証の自動販売機。現在はまだ、顔の情報を登録している中国人の方に利用は限られているとのことでした。

そして帰国当日、市街地から空港を結ぶリニアモーターカーに乗りました。僕が乗ったのはハズレらしく、時速300kmが上限でしたが、時間帯によっては500km近くまで出るそうです。

街行く自動車やバイクはほぼほぼ電動で、電気自動車ばかりだと、空気がきれいになるのに加え、交差点とが静かになるんだなあ、ということが実感できました。DiDiタクシーで乗った車もフル電気自動車で、信号で止まったときには無音でとても快適でした。

未来都市感があり、今後もさらに発展するのかもと思うと、また来るのが楽しみになりました。ぜひぜひまた訪れてみたいと思いました。

Webシステムを開発していると、ローカルで開発中のサイトに外部からアクセスして確認したいという必要が良くでてきます。スマホ向けのレイアウトを確認したいとき、位置情報を使ったサービスなどの場合は、スマホからhttpsでアクセスして確認する必要があります。（iPhoneのSafariからだとhttpsでないと位置情報へのアクセスが許されないので）

このような場合、今まではngrokという便利ツールを使っていたのだが、無料プランの場合、生成される外部からアクセス可能なアドレスが毎回違ったり、一秒間に許されるアクセスに制限がかかっていたりしてちょっと不便でした。

ngrokに代わってServeroというツールがこれらの欠点がなくて便利だ、という記事をQiitaなどで見かけたのだが、数日前からアクセスできなくなっていました。

そこで、これらに代わるサービスや方法がないかと探していたら、

» Ngrok? You Might Not Need It

などの記事で、何のことはないsshのポートフォワーディングの機能を使えば同等のことが、追加で何かをインストールする必要なくできることを知りました。

ただ、sshのポートフォワーディングだけでは、httpの通信はできるが、httpsの通信を転送できなくて困っていました。いろいろ試行錯誤してみた結果、golang製のCaddyというWebサーバーを使えば簡単にできることがわかったので、その方法を紹介します。

前提

自由にアクセスできるサーバーと独自ドメインを持っていることが前提です。開発者であれば、VPSサーバーの1台や2台、独自ドメインもいくつか持っているんじゃないでしょうか。

もし持っていなければ、Digital Oceanあたりで月額5ドルから借りられます。

ドメインももし持っていなければ、Google Domainsで.devドメインでも取っておきましょう。

sshポートフォワーディング

借りているサーバーにはssh接続できるものとします。

ローカルの3000番ポートで動かしているサービス(http://localhost:3000)に接続したいとして、

ssh -R 3001:localhost:3000 yourdomain.com

をターミナルから実行するだけで、iPhoneなどから

http://yourdomain.com:3001

でアクセスできるようになります。

sshのコマンドの意味は、-Rがリバースプロキシを意味し、次の

3001:localhost:3000

は、続くドメインの3001番ポートに来たアクセスをlocalhost:3000に転送するという意味です。

3000:localhost:3000

とすれば、ポートを合わせることもできるのですが、わかりやすく番号を変えておきました。

これだけでいままでngrokでおこなっていたことができ、しかもアクセス数に制限がなく、またドメインも変わらなくて便利なのですが、https通信をフォワードできないのがいまいちです。

次にcaddyを使ってhttpsを転送する方法を紹介します。

caddyとあわせて使ってhttpsをフォワーディング

借りているサーバーにcaddyをインストールします。

DownloadかLatest releaseのページよりOSにあったビルドをダウンロードしてください。

筆者の場合はUbuntu 64bitなので、caddy_v1.0.3_linux_amd64.tar.gzをダウンロードし、

% mkdir caddy
% cd caddy
% wget https://github.com/caddyserver/caddy/releases/download/v1.0.3/caddy_v1.0.3_linux_amd64.tar.gz
% tar xvf caddy_v1.0.3_linux_amd64.tar.gz

で解凍します。 同じフォルダに以下の内容でCaddyfileを作成します。yourdomain.comには借りているサーバーに向いている自分のドメインに替えてください。

yourdomain.com

proxy / 127.0.0.1:8080 {
  transparent
}

proxy /tunnel 127.0.0.1:8080 {
  transparent
  websocket
}

同じフォルダで、

./caddy

を実行すると、caddyが起動します。caddyは動的に証明書を取得する仕組みがあるため、これだけの設定でhttps接続が可能です。

ブラウザで

https://yourdomain.com

にアクセスしてみましょう。

Caddyfileの設定によると、httpsへのアクセスは8080にプロキシされるのですが、8080には何もサービスがないため、

502 Bad Gateway

と表示されるはずです。

ここで、ローカルマシン上で、

ssh -R 8080:localhost:3000 yourdomain.com

を実行すると、yourdomain.comの8080ポートへのアクセスがlocalhostの3000番にフォワードされるので、

https://yourdomain.com

でlocalhost:3000にアクセスできるようになります。

まとめ

sshポートフォワーディングとcaddyを使い、ngrokやserveoなしでローカルで開発しているサイトに外部からhttpsでアクセスできるようになりました。

途中までは、これどうなんだろう？と思ってたしなかなか読み進めなかったのですが、途中からは展開が加速、一気に読み終わりました。噂に違わず、とても面白かった。いやあ、基礎研究って大事だなあ、と思いました :) （薄い感想ですみません）

読み終わって、何かまた新しいWebサービスとか作りたくなった。Twitterとかマストドン、iPhone の初期の頃に興奮したエンジニアの人にはおすすめ。それ以外の人には、うーむ、この面白さはわかるのだろうか。。

六本木ヒルズでこの夏休み開催されているMIRAI SUMMER CAMPのプログラムのひとつ、「機械学習×スクラッチで、どこにもないアプリを作ろう （ダイジェストプログラム）」を見学してきた。

» 【追加開催！】機械学習×スクラッチで、どこにもないアプリを作ろう （ダイジェストプログラム）

青山学院大学 阿部和広先生によっておこなわれたこのワークショップの第一弾は、実は7月末におこなわれ、好評につき再度開かれるようになったとのことだ。開発したML2Scratchが使用されるということで、そのときに様子を見に行ったのだが、使い勝手がいまいちかつ自分がいつも使っているマシンよりスペックが劣るPCではかなり動作が不安定であることがわかったので、大幅に改良してリベンジで臨むことになった。

結論だけ最初に書くと、ワークショップのタイトル通り、どこにもないアプリをたくさん見ることができたし、機械学習を使ったアプリケーションをこどもたちが（アイデアを出し合うアイデアソンという形ではなく）実際に「手を動かして作る」というワークショップ自体、これまでほとんどおこなわれていない、どこにもないものだったと思う。

アイスブレイクはじゃんけんゲームを作るという内容。グーチョキパーの写真を撮り、それらを高速に切り替え、キーを離した時に表示された手で勝負する。表示する写真に自分の手を使ってはいけないというルールなので、グループ内の他の子にお願いする必要があり、またカメラに慣れるという意味もある。

続いてグーチョキパーを人はどうやって見分けているかという問いかけから、画像を認識するプログラムをScratchでどうやって組むかを考える。Scratchには色を見分けるブロックがあるので、ネコが触れている背景が茶色か白かによって、ステージが野球場なのかバスケのコートなのかを識別することができる。

しかしこの方法だと、別のバスケットボールのコートの背景が追加されると、if文を都度追加しないといけない。いろんな見た目の野球場あるいはコートの画像に対応するには、if文がものすごーく長いプログラムになってしまう。あらゆる画像に対応するにはこの方法だとちょっと無理そうだな、と薄々気づくようになる。

次に「学習ってどういうこと？」についてグループ内で考え、意見をpost itに書き出したあと、発表する。「新しいことを見つける」「情報を覚える」「楽しかったりいやだったりする」など様々な意見が出ていた。

このあと休憩。休憩中は、会場で展示されていたScratchの拡張機能からもプログラミングできるロボットtoioや、 USB接続なしでもScratch3.0からスイッチ制御ができるTFabWorksのカシワニキットをこどもたちは体験していた。

休憩後は、いよいよ機械学習をScratchから利用できるようにしたML2Scratchを使ってオリジナルの機械学習アプリを作る自由制作タイム。

ML2Scratchはウェブカメラで撮った写真数枚をラベル付けすることで、機械がそれを学習および認識するようになり、認識結果を簡単にScratchで利用できるようにしたもの。たとえば、ジャンケンのグーの写真を数枚撮り1とラベル付けし、パーを2、チョキを3とラベル付けすれば、その後に改めてチョキをカメラに見せると3と判定してくれる。

参考にするための機械学習を使ったアプリケーションの実例として、パンの種類を判別して瞬時に会計をおこなえるレジと、キュウリの形や色から等級を自動判別するアプリケーションが紹介された。

紙コップや毛糸、紙皿など様々な素材を利用して、各グループ思い思いの機械学習アプリを作っていく。

右や左という文字、あるいは矢印が描かれた札をカメラに見せることによってキャラクターを操作するゲームや、

お弁当箱に盛られたお米の量を判定するアプリや、お皿に乗せられた素材からおすすめのメニューを表示してくれるもの、

症状に関する質問票をみせることで、風邪かどうかなど診断結果を表示する自動診断アプリ、キャラクターが描かれた紙コップで操作するゲームなどなど、オリジナリティあふれる作品の数々が、最後の発表の時間で披露された。

背景など含めカメラに映ったすべてから機械は学習するので、十数枚の写真をラベル付けするだけで学習ができるとはいっても、一筋縄ではいかないということを実際に手を動かすことで実感できる。

しかし、中には、背景など余計な情報が映り込まないように画用紙で小さなスタジオを用意したり、実際の顔の表情を判別することは少ない学習データでは難しいので、代わりに顔の表情のイラストを使うことで、判別の精度を挙げている例もあった。

最初からついたてなどを用意し、背景を消せばもっと認識率が高くなるよとあらかじめ大人の知恵をさずけることもできるのだろうが、そうしたことに自分たちで気づくということも含め機械学習を理解するということなのであろう。とはいえ、認識率がままならなければ、せっかく作った作品がまともに動かず達成感が薄くなるので、そのあたりの「教えすぎない」さじ加減は難しい。

大げさでなくワークショップのタイトル通り、今までにないユニークな作品ばかりだった。Scratchをある程度触ったことがあるという参加者も何人かいたが、機械学習と組み合わせることでScratchあるいはコンピューターでできることの幅が大きく拡がることを少しでも実感できたのではないだろうか。

というよりかは、こんなアプリケーションがあったら便利だろうなというアイデアを、いままではプログラムできる範囲に一部削ぎ落としていたのが、機械学習を使うことでそれがある程度実装可能になったという言い方の方が正しいかもしれない。

機械学習 x Scratch の可能性を感じたとても楽しいワークショップでした。

ML2Scratch が動かなくなり、JavaScript コンソールをみてみたら、tfhub.dev に接続できていないよう。。

.dev は Google が新たに取得した開発者向けドメインなのだが、以前は正式なドメインではなかったため、puma-dev がローカルでの開発環境用に割り当てていた。

https://github.com/puma/puma-dev/issues/194

に、/etc/resolver/dev を削除すれば良い、という解決方法があったので、

cd /etc/resolver
mv dev _dev

ととりあえず、dev を _dev にリネームすることで、tfhub.dev に無事接続できるようになった。

自分であとから検索したときにヒットするようにメモ。

開発環境周りは進化していて、一昔前と比べて格段にわかりやすくつまづきにくくなったが、サーバー周り、環境構築は相変わらずしんどい。

Ruby をアップデートしようと、割と古い Ubuntu 上で、rbenv install を実行したら、

$ rbenv install 2.6.3
Downloading ruby-2.6.3.tar.bz2...
-> https://cache.ruby-lang.org/pub/ruby/2.6/ruby-2.6.3.tar.bz2
error: failed to download ruby-2.6.3.tar.bz2

というエラーが発生。

ダウンロード先のファイルを curl で取得しようとすると、

curl: (35) SSL connect error

が発生しており、

» rbenv installに失敗する - Qiita

と同じ現象のようだった。curl を最新版に入れ替えれば良さそうだわかる。

Curl のページより最新版のソースをダウンロードしてきて、

./configure
make
sudo make install

でインストールできたのだが、 curl -vV を実行してみると、

Symbol lookup error undefined symbol: curl_mime_init

というエラーが出る。

バージョン表示のときに表示される curl のバージョンと libcurl のバージョンがあっていないのがどうも悪いらしいと、libcurl を入れ替えようとしてみたり悪戦苦闘したのだが、結局

» 【学習メモ】curl-7.59.0のインストール後はldconfigが必要

にあるとおり、

sudo ldconfig

を実行したら、動くようになった。

ldconfig とは、

» 【ldconfig】共有ライブラリの依存関係情報を更新する

にあるとおり、共有ライブラリの依存関係情報を更新する。

うーん、Unix 力がまだまだ足りない。。

[追記]

別の環境では、上記を実行しても、依然 curl: (35) error が出る。

curl -v -1 https://cache.ruby-lang.org/pub/ruby/2.6/ruby-2.6.3.tar.bz2
*   Trying 151.101.109.178...
* TCP_NODELAY set
* Connected to cache.ruby-lang.org (151.101.109.178) port 443 (#0)
* Cipher selection: ALL:!EXPORT:!EXPORT40:!EXPORT56:!aNULL:!LOW:!RC4:@STRENGTH
* successfully set certificate verify locations:
*   CAfile: /etc/ssl/certs/ca-certificates.crt
  CApath: none
* TLSv1.1 (OUT), TLS handshake, Client hello (1):
* TLSv1.1 (IN), TLS alert, protocol version (582):
* error:1407742E:SSL routines:SSL23_GET_SERVER_HELLO:tlsv1 alert protocol version
* Closing connection 0
curl: (35) error:1407742E:SSL routines:SSL23_GET_SERVER_HELLO:tlsv1 alert protocol version

sudo apt-get install libssl-dev

を実行して、libssl-dev を最新版にしたところ、接続できるようになった。

curl -v -1 https://cache.ruby-lang.org/pub/ruby/2.6/ruby-2.6.3.tar.bz2
*   Trying 151.101.109.178...
* TCP_NODELAY set
* Connected to cache.ruby-lang.org (151.101.109.178) port 443 (#0)
* Cipher selection: ALL:!EXPORT:!EXPORT40:!EXPORT56:!aNULL:!LOW:!RC4:@STRENGTH
* successfully set certificate verify locations:
*   CAfile: /etc/ssl/certs/ca-certificates.crt
  CApath: none
* TLSv1.2 (OUT), TLS handshake, Client hello (1):
* TLSv1.2 (IN), TLS handshake, Server hello (2):
* TLSv1.2 (IN), TLS handshake, Certificate (11):
* TLSv1.2 (IN), TLS handshake, Server key exchange (12):
* TLSv1.2 (IN), TLS handshake, Server finished (14):
* TLSv1.2 (OUT), TLS handshake, Client key exchange (16):
* TLSv1.2 (OUT), TLS change cipher, Change cipher spec (1):
* TLSv1.2 (OUT), TLS handshake, Finished (20):
* TLSv1.2 (IN), TLS change cipher, Change cipher spec (1):
* TLSv1.2 (IN), TLS handshake, Finished (20):
* SSL connection using TLSv1.2 / ECDHE-RSA-AES128-GCM-SHA256
* Server certificate:
*  subject: C=US; ST=California; L=San Francisco; O=Fastly, Inc.; CN=m.ssl.fastly.net
*  start date: Sep 24 16:42:11 2018 GMT
*  expire date: Sep  1 15:02:57 2019 GMT
*  subjectAltName: host "cache.ruby-lang.org" matched cert's "*.ruby-lang.org"
*  issuer: C=BE; O=GlobalSign nv-sa; CN=GlobalSign CloudSSL CA - SHA256 - G3
*  SSL certificate verify ok.
> GET /pub/ruby/2.6/ruby-2.6.3.tar.bz2 HTTP/1.1
> Host: cache.ruby-lang.org
> User-Agent: curl/7.64.1
> Accept: */*
>
< HTTP/1.1 200 OK
< x-amz-id-2: CSxKQ4zF5+oGri/uccevgMVR6WPQQsMtjQhgaWhvt4hu92tB++BaSizfF22SF9KolfSE5GgTwA4=
< x-amz-request-id: B53E6653265B2E84
< Last-Modified: Wed, 17 Apr 2019 15:24:47 GMT
< ETag: "9a57b5fd806e5dc0b992a45d21e9c353-2"
< x-amz-version-id: rMhn0_W8iaiOyH_SaOIJVmfaw1UJa12b
< Content-Type: application/x-tar
< Server: AmazonS3
< Accept-Ranges: bytes
< Age: 4737479
< Content-Length: 14509165
< Accept-Ranges: bytes
< Date: Tue, 11 Jun 2019 14:24:42 GMT
< Via: 1.1 varnish
< Connection: keep-alive
< X-Served-By: cache-tyo19928-TYO
< X-Cache: HIT
< X-Cache-Hits: 0
< X-Timer: S1560263082.085898,VS0,VE7
<
Warning: Binary output can mess up your terminal. Use "--output -" to tell
Warning: curl to output it to your terminal anyway, or consider "--output
Warning: <FILE>" to save to a file.
* Failed writing body (0 != 2759)
* Closing connection 0
* TLSv1.2 (OUT), TLS alert, close notify (256):

今年も Scratch Day in Tokyo 2019 が青山学院アスタジオで行われました。

いつもどおり担当することになった Show & Tell は、これまでの振り返りで出ていた問題点を概ね解決し、また多くの関係者皆さんの協力があって、これまでで最多の発表作品数であったにも関わらず、最もスムーズにほとんど問題なく進めることができたのではないかと思う。

2012年に参加したScratch@MITの、本家 Show & Tell でこどもたちが壇上で自分の作品をデモしているのを見て、東京でもやりたいと思い、2013年のScratch Dayで始めました。その頃は発表者が集まらず、自分の子どもたちにお願いして登壇してもらったりしていたほど。今回7回目を迎え、作品は過去最多の応募となり、これまで守ってきた応募者全員に発表してもらう、という方針を守るには、時間が足りませんでした。実行委員内で調整を進め、結果、終了時間を30分伸ばし、一部の方には展示にまわってもらい、一人あたりの持ち時間を3分におさえてもらうことで、何とか全作品に発表の機会を持ってもらうことができました。

Keep（来年も続けたいこと）

• 第1部MC御家さん、質問を会場の皆さんから聞くようにして、以降第3部までずっと続けたが、圧倒的に前席に座っている登壇者からポンポン質問が出てきて、日本の大人社会ではなかなか見られない光景で大変良かった。

• CoderDojo吉祥寺の山浦さん発案で登壇者用に名札を受付で配布したのだけど、出欠管理になるし、一目でわかるし、そして帰りには名札ケースは返してもらって中身は持って帰っていいんだよ、その名札は登壇者だけの特別なものだよ、と言ったらとても喜んでいたので凄く良いアイデアだった。

• 三部構成で普段の数名での運営は無理そうということで手伝ってくれる方を募集し、MCの御家さん、グッチ、サンダース、竹中さん、そのほか進行を手伝ってくださった皆さんのおかげで運営はスムーズだった。フォーラムでの募集に応えてくれた方々に当日呼びかけることができずごめんなさい。

Problem（問題点）

• 準備できるワイヤレスマイクが一本しかなかったのは大変だった。登壇者用にはマイクしたまま操作できるように、ヘッドセットタイプのマイクがあると良さそう。

• Scratch 3のオフライン版は結構バギーで、オンライン版と同じようには動かず登壇者にはせっかくの自慢機能が動かなかったりしてストレスだったよう。WiFiが一応使えたので全編オンラインでいきたかったが、途中通信状況が悪くなりオフラインにスイッチせざるをえなかった時が厳しかった。

Try（来年改善したいこと、やってみたいこと）

• 後から気づいたのだが、それぞれの部の全作品を、オンラインでつながっているうちに別タブで開いてしまっていれば、進行はかなりスムーズだったはず。

• 来年の予想応募作品は50近くと思っていて、これまでの方法ではShow&Tellが開催できない。主観で作品を選択するのはやりたくないので、今のところ一番有力なのは、先着順で30作品を採用し、残りは展示コーナーにまわってもらうか、当日自由発表エリアで自主発表してもらうというもの。

• ここ数回のShow&Tell登壇者は性別、年齢幅広く参加してもらっており素晴らしい限り。今回初めて、香港からの参加者が英語で発表してくださった。Scratchコミュニティ全体の英語ユーザー比率を考えると、Scratch Day in Tokyo はもっとインターナショナルなイベントであってもおかしくはないのにとは思う。

ScratchやCoderDojoのコミュニティに参加して僕が楽しいと思うのは、そこに若く新しい明るい未来を垣間見ることができるからだ。加えて様々な国籍の人が生活していて各国言語が入り乱れている未来を僕は想像するので、まずは手の届くScratchおよびCoderDojoのコミュニティを国際化していくことを個人的なTryとしていこうと思う。

[2019/05/14追記]

展示スペースのShow&Tell出展者ブースの方は、イベント中はほとんど立ち寄れず様子がわからなかったのだが、展示ブースの方をおもに見ていてくれた @togazo さんが振り返り記事にまとめてくれました。

» とが、Scratchのおまつりの手伝いをする

前編では、頒布物をオンラインコンテンツに決まるまでの経緯を書きました。後編では、コンテンツをどうやって制作していったか、そして、技術書典当日の振り返りを書いていきたいと思います。

コンテンツ自体は、かねてから構想していたというのもあって比較的順調に書き進めていくことができました。

お金をいただくコンテンツとそうでないブログなどにザッと書いたコンテンツの違いは、どれだけ第三者の目が入り校正がされているかだということは、これまでの商業誌や雑誌の記事執筆で感じていたことだったので、Kaori Han、uchiyama2000 にお願いしてレビューしてもらいました。おかげで、独りよがりではない、広く誰にでもわかってもらえる説明に改善されていきました。

当初は静的サイトで公開しようかと考えていて、Golang製のHugoなど検討したのですが、自分でカスタマイズしたくなったときのことを考えRuby製のJekyllに落ち着きました。

ところが、

• コンテンツを更新したときや、続編を書いたときに連絡できるよう読者のメールアドレスが欲しい。
• クーポンコードを入れると閲覧できる仕組みにしたい。
• コンテンツの一部は誰でも読めるように公開したい。
• ゆくゆくは英語版、中国版を用意したいので、言語切り替えが欲しい。
• 技術書典ではクーポンコードが印刷されたカードを販売すればよいが、いずれはクレジット決済に切り替えたい。
• コンテンツは Markdown で書きたいんだか、例えば Scratch プロジェクトの embed タグが簡単に書けるような独自拡張も欲しい。

などなど、やりたいことが増えてきて、これら全てを満たすCMSや、ASPサービスを見つけることができなかったので、システムをRuby on Railsで自作することにしました。

これを決意したのが技術書典2日前の金曜日夜でした。

また、その頃勉強していた Docker も使いたいなと思い、Docker コンテナ上で開発し、本番環境用のコンテナは DigitalOcean 月額5ドルのサーバー上に配置することにしました。

このブログシステムも Rails で自作しているのもあって、コードをあちこちから拝借して何とか当日の2:00頃にはコードを名刺シートに印刷するところまで完成し、ようやくロゴを作ってサークルカットをアップロードしたのが3:00頃。見た目を重視しないにもほどがある。

結局のところ、多くの方が本の装丁、デザインに情熱をかたむけるところを、僕の場合はシステムの方に傾けたかったということなんだと思います。時間との闘いでシステムを構築していくのは、1人開発合宿をしているようで、楽しかった。

さてさて、無事にシステムは出来上がり、技術書典の振り返りは以下の通りです。

Keep(次回も続けたいこと)

• 技術書典的には邪道か傍流かもしれませんが、新刊をオンラインコンテンツに絞ったのは正解でした。かかるコストは自分の人件費くらいなので、赤字になることはないですし、僕のように自作するという方法を選ばず、既存のCMSやASPサービスを使えばもっと手際よく用意できるはずです。お手軽に、とりあえず最初の一歩を踏むには最良の選択肢ではないでしょうか？
• とはいえ、オンラインコンテンツのみだと引きが弱い。今回一緒に頒布物として展示していた「Scratch で楽しく学ぶアート&サイエンス」を手にとってくれる方が多く、その内 Scratch を知ってそうな方には「Scratch 3を改造しよう」を薦めてみるということをしてみたのですが、まあまあうまくいったかと思います。

Problem(問題点)

• 一番の問題点は、ほぼ一人売り子体制だったため、ほとんどほかのサークルを見ることができなかったこと。とはいえレビューしてもらった uchiyama2000 には一緒に手伝ってもらい、とても助かったのですが、交代して一人で他を回ってくるのはなかなかに気が引けて、結局ほぼ飲まず食わずで、おじさんの身体には応えました。
• 装丁もそうですが、展示の仕方ももうちょっと工夫のしどころがありそうです。

Try(次回チャレンジしたいこと)

• 売り子としてだけで手伝ってくれる方をお願いするのはどうしても気がひけるので、誰か一緒にコンテンツを提供する側として参加することを募集したいです。機械学習関連で何か書きたいと言っている uchiyama2000 に期待。
• 隣のブースの方が、ポシェットがついた布をブースに敷いており、そのポシェットにおつりなど様々なものを入れることができていて凄い賢いなと思って聞いたら、「あの布」という名前で売っているらしいという情報をゲット。次回は絶対それを用意します。

さて、売り上げの方はというと、アート&サイエンスは、定価 2100円 + 消費税のところをおつり用意するのがめんどいということで 2000円で販売し、

2000円 x 16 = 32000円

オンラインコンテンツの「Scratch 3 を改造しよう」の方は、

500円 x 30 = 15000円

で合計 47000円でした。

利益で計算すると、アート&サイエンスの方は著者割りで仕入れているとは言え、値引きしているのでトントン。オンラインコンテンツの方は原価はかかっていないので、そのまま100パーセント利益です。

「アート & サイエンス」は、初版分はすでに印税をいただいているので売れても売れなくても変わりはないのですけど、印税8パーセントとして計算すると、

2100円 x 0.08 x 16 + 500円 x 30 = 17688円

でした。

これから英語版、中国語版を用意し、日本人ユーザーの100倍はいる全世界の Scratch ユーザーに向けて販売していこうと思うので期待大 :) です。

技術書典、結論としては参加してとても楽しかったので、次回も絶対出るつもりです！

技術書典6に初めて参加しました。アルバイトを含め、接客業をこれまでやったことがないので、何か物をお客さんに売るという経験は初めてでした。

Maker Faire などには参加したことがあるので、お隣の方には「慣れていますね」なんて言われましたが、でも、お金を受け取り、お釣りを渡して商品を渡すというのはたぶん初めて。

技術書典4と5に一般客として行ってみて、漠然と楽しそうだな、僕も技術書を書いて売ってみたいなとは思っていたのですが、直接のきっかけとなったのはCoderDojo界隈で有名なTGZNさんが「技術書典6の募集始まってますよー」って親切に教えてくださったことでした。

とはいえ、原稿の執筆もそうですが、製本したりするのも大変だろうなあとは思っていてかなり迷ったのですが、自分のコンフォートゾーンを抜け出す経験を月に一回はやるということを心がけているので、思い切って参加を申し込みました。

昨年執筆した商業誌のScratchで楽しく学ぶ アート&サイエンスも一緒に頒布しようとは思っていたので、それにあわせて中級者、大人向けのScratchネタにすることに決め、どうせならマニアック過ぎて出版社からはNGが出そうなテーマにしようということで「大人のためのScratch - Scratch 3を改造しよう」というコンテンツに決めました。

とはいえ、「実践ARKit」を書かれた堤さんの技術書でご飯は食べられるのか？ #技術書典を始め、いろんな方の技術書典関連ブログエントリーを読んでいて実感していたのは、コンテンツもそうですが皆さん本の装丁、デザインにとてもこだわって作られているということ。

本は好きなのですが、電子書籍でもいいやと思っている派の僕には、手に取るモノとしての本にそれほどのこだわりはなく、果たしてそれを作ることに情熱を注ぐことはできるのだろうかと思っていました。

外注するか、誰かそういうことが得意な方と一緒にチームを組むという選択肢もあったのですが、勝手が良くわからない初参加の身としてはそこまで他人を巻き込んだり、コストをかける勇気がありませんでした。

一方、Scratchをネタにした場合、Scratchがグラフィカルなプログラミン環境であるゆえ、たとえばブロックの操作は目で見れば一発でわかるのに、それを文章にするとどうしても冗長になったりわかりにくくなる面があります。

グラフィカルな環境が主体ということでScratchと似た面があるUnityを学んでいたとき、is8rさん作成のLearn-Unityが、どの技術書よりもわかりやすかったのですが、その一因にGifアニメが多用されているというのがありました。その記憶が強く残っていて、ハリーポッターの世界に登場する新聞のように、動く本が一番Scratchに向いているのになあ、と思っていたのです。

• 製本しなくてすみそう
• 動く本が作りたい

この2つを満たすものとして、オンラインコンテンツを読めるサイトを作り、パスワードロックをかけ、そのパスワードを頒布すれば良い、という結論にいたりました。

技術書典的には、少し邪道な気もしたのですが、サークル参加要項を確認してみても、

頒布形態は、紙の書籍（いわゆる同人誌）、デジタルコンテンツ、QRコードを印刷した紙などなんでも構いません

とあったので、この方針に決めたのでした。（後編に続く）