人力LZW圧縮/展開/グリッチ

授業第2回。去年は山本さんに『算道』の実演をしてもらったりeasy6502を使った授業をしてたんだけど、今年はプログラムを書く体験の前の「プログラムを実行する体験」として、圧縮/展開アルゴリズムを受講生の手で実行してもらう授業をやってみた。

もともとはComputer Science Unpluggedを見てたなかでText Compressionのアクティビティが見た目楽しそうで、こういう「テキストが圧縮(コーディング)される」という結果が得られるアルゴリズムが題材なら、コンピュータとプログラムがすることを実感して興味を持ってもらえるイントロダクションの授業ができるんじゃないかと思ったことがきっかけ。

CS Unpluggedの「Text Compression」アクティビティの解説pdfより

でもよく考えたら圧縮アルゴリズムの内容ってよく知らなくてハフマン圧縮とかでできるのかなーと思いながら思って調べているうちに、テキストの圧縮過程を実感できそうでかつ学生も常々お世話になってるだろうLZW圧縮に決めた(検討にはデータ圧縮法概説がとても参考になった。最終的に例文にした早口言葉もこの概説の実演で使用されていたもの)。

当初「受講生の好きな歌の歌詞を圧縮させて、圧縮データを他の受講生と交換して展開する授業にしよう」と思っていたんだけど、実際に自分の手でLZW圧縮のアルゴリズムを実行してみると思った以上に時間がかかる(2,30文字の処理に20分以上)うえ、意図的に歌詞の繰り返しの多い歌を選ばないかぎりは圧縮のおもしろみも味わえない単なる作業になってしまうことが予想できたので、後ろ髪をひかれつつ元テキストは圧縮が効きやすい早口言葉(「カエルピョコピョコ…」)に固定して、プログラム手実行の過程を理解するところにフォーカスできるように手順やワークシートをまとめて授業に臨んだ。

ワークシートその1(入力・出力)(pdf)

ワークシートその2(ワークメモリ:圧縮用辞書)(pdf)(亜展開用辞書(内容は同じです)

圧縮手順書(プログラム部)(pdf )(展開手順pdf

実行時のポインタの役割をするものとして色ごとに役割を決めた付箋を配って使ってもらうようにしたんだけど、これはなかなかうまくいったような気がする。実際に学生(8人)にやってもらったらやってるうちに手順を飛ばしてしまうことが続出したので、もう一つ付箋を配っていま実行している手順を指す(つまりプログラムポインタ)ようにしたほうがよかったかもしれない。手違いで途中からやり直しになってしまった人もいたけど、見たところみんな最初の意味のわからないことをやらされている、という感じから途中でこのアルゴリズムの巧妙さにはっと気づき、最後まで興味を持って作業してもらえていたように思う。

デバッグ中

kotaro tanakaさん(@doppac)がシェアした投稿 -

そして、LZW圧縮といえばGIF画像の圧縮アルゴリズムであり、アーカイブデータのコードをいくつかスワップさせれば簡単にグリッチさせることができる。今回圧縮しているのは文字単位のテキストなので、「カエルピョコピョコミピョコピョコアワセテピョコピョコムピョコピョコ」が「エカルピョピョココミココアココワセココアョピテョムコ」になったりする。というのを、受講生にそれぞれ好きなところでグリッチしたデータを展開させて結果を見てもらった。これ、正常データとグリッチデータを両方手で展開してみると、データの入れ替えが辞書にどのように波及していくかがよくわかってとてもおもしろい。(4,5箇所グリッチするよう指示したけど、2つくらいでもいいのかも)。

というわけで、僕がこれまでいろいろ試したなかでも一番手応えのある授業になってよかった。来週からは普通のプログラミングの授業に入っていくけど、今回やったことがプログラム言語の諸概念の参照(変数は人力圧縮でいうところのワークシートのところだよとか)にできるはずなので、そこの飲み込みやすさにもつながるといいなと思う。あと以前からデバッガのおもしろさをプログラミング入門の文脈で使えないものかなと思ってたんだけど、考えてみると今回のはその点にもかなっている面があって個人的な満足度が高い。


Scrapboxを授業グループウェアに使う

2017年の授業第1回。ここのところの定番になっている正規表現ワークショップをした。

新機軸としては授業の情報共有用のグループウェアにScrapboxを使うことにしたこと。去年のSlackは発言の敷居がとても低かったり絵文字が使えたりする点はとてもよかったんだけど、情報をストックするのが困難なのはどうにもならなそうだったのでやめた。scrapboxはチャットみたいに気軽に書いてもらうのは無理とはいえ、今のところいい感じ。受講者をプロジェクトに参加してもらう手順を楽に組めた(参加URLをgoo.glで短くしたurlを打ち込んでもらう)のは助かった。Googleアカウントを持ってない学生も今年はいなかった。

CTRL-I で自分のプロフィールページの画像がアイコンがわりにおける機能がなかなかいいので、活用できないかなと思っている

出席者一覧として

アンケート


授業終了

最終課題の発表、講評が終わって今年度の授業が終了した。今年は例年にくらべて履修途中で脱落する学生が(比較的)少なく進行していたんだけど、最終課題についてはやりきれた感じのものが少なかったかな。だいたい学期末には他の授業でも集大成的な課題が出されるので、作業として彼(女)らの手に馴染んているとは言い難い段階のプログラミングの最終課題は後回しになりがちなのかなと思ったりする(まあ自分が学生のときの課題提出のことを思い出してみればえらそうなことはいえない)。期末より前のタイミングに大きな課題が出せるといいのかなと思って前から思案しているんだけど、プログラムについてのレクチャーが終わっていないと大きな課題も出せないというジレンマもあり、うまい形が出せていない。

あと授業の情報共有ツールとしてslackを使っていた件だけど、けっこううまくいった部分もあるけど、ストック情報を作ったり集めたりすることがどうしてもまだるっこしいやり方(受講生に自分用のチャットルームを作ってもらい、そのルームにPage機能で課題のプログラムを書き込んで提出してもらったりした)でしかできず一覧性も参照性もよくないので、来年もこれでやるかというとかなり微妙な感じ。よかったのはコミュニケーションが圧倒的にフランクで楽しげになること。プログラムで制作した画像やGIFアニメをslackに投稿したり、作業経過のスクリーンショットを共有するのは受講生間のモチベーションキープにもかなり効果があるような気がしたのでこういうのは今後もやるといいなと思う。


授業すると顎が痛くなる

最近気づいたんだけど、授業がおわると口が開かないくらい顎関節症が悪化している。いまのところ慢性化するわけではなく一時的なものなのでまあいいんだけど、講義のあいだ思っている以上に緊張して歯を食いしばっていたりするのだろうか。授業のあと以上に疲労を感じるのもそのせいかな。

授業内容のほうでは課題でプログラム動作中の画面をGIFアニメに録画する仕掛けをサンプルで用意して、GIFアニメをどんどん作ってslackに投稿させるようにしている。これもわりといいかもしれない。ちなみに現時点だと公式でリンクされているGIFライブラリはProcessing Ver.3では使えないっぽくて、ブランチで対応されているこちらのほうを使った。


学生にUSキーボード使いが多い

最近の大学生の傾向なのか、美大生の傾向なのか、それとも芸大生だからなのかわからないけど、授業に自分のマシン(Macbook)を持ってきている学生にUSキーボードを使っている学生がわりと多い気がする。そっちのほうがキートップの印字がすっきりしてていいみたいな好みの問題なのかな。まあ個人の好みなのでいいんだけど、授業で学生のプログラムをかわるがわる指導するような局面だと、ああこっちはUSキーボードかとか、こっちは違ったみたいなコンテキストスイッチの都度切り替えが必要でわりと難儀することがある。

USBデバイスさすと一時的にキーリマップするみたいなデバイスがあるといいなと思ったけど、そういうのないのかな。


静止画の時計

昨年度までは授業のテキストにいちおう「Built with Processing」のコピーを配ってそれ合わせて進める部分もあったんだけど、さすがに古すぎるしコピーを配っても実際のところほとんどリファレンスとしては使ってもらえないので、今年はほとんど紙テキストなし(あとから参加学生対策にslackに参加してすることなどをまとめたプリントは必要だった)で授業をすすめている。テキストくばってもそれを読むよりgoogleで検索してみつかった情報を参照されてしまうのはしょぼーんという感じなのだが、まあ自分も普段はそうするわけだし仕方ないよなと思うことにした。それでいうと本家Processingサイトリファレンスの日本語版こそが必要という話になるのだけど、これはどうにかならないかな…。

で、例年だと図形描画命令を教えたあとは繰り返し構文を使ってみようという授業だったんだけど、今年は変数と条件分岐を先に説明して、時・分・秒を得る命令( hour() / minute() / second() )の値を変数に入れて、そのデータを使って、静止画の時計というか「現在時刻によって変化する画像」を作ってもらう課題を課して取り組んでもらった。変数ってプログラムの授業で教えるときに新概念がいきなりたくさん出てきて難しいわりに単体だと演習で自然に使ってもらうのが難しいなと思ってたんだけど、「時間のデータを変数に格納して使う」という形だと、難しくなりすぎない形で自然に変数を扱うプログラムを書いてもらえる課題になったかなと。


プログラムで描いた絵をプログラムで真似する

授業第3回。今回から実際にProcessingのプログラム演習なんだけど、命令の解説的な座学をしてから個々人が自分でプログラムを書くだけでなくて、受講生同士がお互いのプログラムを意識し合えるような演習にできないものかなと思って、「プログラムで描いた絵を出題して、それを再現するプログラムを描く」という課題を出してやってもらった。

  1. こんな感じのサンプルに、図形描画命令や色を扱う命令で簡単な絵を描くプログラムをつくってもらう。これを「出題プログラム」とする
  2. 出題プログラムでできた画像をslackにアップロードしてどんどん出題してもらう。
  3. 出題した受講生は、今度はslackに流れている出題画像どれかをダウンロードして、こんな感じの「解答プログラム」に画像をドロップし、解答画像を再現するプログラムをつくることに取り組んでもらう。
  4. できあがったら、解答画像としてslackに流す。

この出題、解答を順番に繰り返しつつslackに流してもらうことでたんに図形描画の命令を試すだけではなくて、求める画像をつくるのにどういう命令が必要なのかも考えてもらえる課題にしたつもり。ちょっと手順が多いとか課題もあったけど、slackで各自が進めている課題の画像が流れるのはプログラムの授業としてはライブ感も出てなかなかいいなと思った。この路線で今後の課題も考えていこう。

あとProcessingの紹介も兼ねてBNNのProcessing関連本を全部授業に持っていってみたんだけどやっぱり持ち運ぶ重さではなくてたいへん疲れた…


Easy6502と『算道』

授業第2回。自分の授業にはじめてゲスト講師を呼ぶというのをやってみた。

BCCKSの仕事でデジティミニミにいるときに、4月から来るようになった新入社員だと紹介された山本ー彰さんが聞いてみると昨年度のメディア芸術祭でアート部門入賞した『算道』の作者だというので、ちょうどいいタイミングだったのもあり紹介してもらって数週後のゲスト講師をお願いすることになった。授業では算道のパフォーマンス(「真または偽」の計算実演)や、メディアアートと現代アートの関係の話などをしていただいた。算道のパフォーマンスは正式には着物ですると聞いてたんだけど今回は着物ではなかった。

算道 | 第19回文化庁メディア芸術祭

僕のほうの講義は、例年だと第2回からProcessingの演習に入っていくんだけど、山本さんの講義に合わせてもうちょっとコンピュータの原理の部分に触れてもらうといいのかなと思ってノイマン型コンピュータの話をしてからEasy6502でCPUとメモリとプログラムの関係を体験するという授業にしてみた。Easy6502はJavaScriptで動く6502エミュレータにビジュアルで状態が表示されるメモリが接続された学習用のバーチャルマシンみたいなもので、メモリにデータを書き込めばメモリ状態部にデータに応じた色でドットが表示されることになるので、ある意味BASICやProcessingと同じようにプログラムの結果をビジュアルに確かめられてわかりやすく、プログラムによってコンピュータの中で起きていることを説明するのには最適なんじゃないかと思った。一瞬でこれでプログラムの授業全部すればいいのでは? と思ったんだけど分岐とかサブルーチンコールとかをアセンブラで教えるのは不毛そう。

授業ではEasy6502そのものではなく、福地健太郎さんがプログラムメモリ部分もビジュアル表示するようにしたバージョン「6502 snake (destructive edition)」を使ってプログラムもメモリ上ではデータの一部であること、プログラム自身がプログラムとしてのデータを書き換えることも可能であることなどを説明して、こういう発想が発展した表現としてのグリッチやゲームのバグ技(ポケモンのセレクトバグやスーパーマリオワールドのTASグリッチ)なども紹介した。プログラムの自己書き換えの話やEasy6502のカラフルなドットでプログラムが示されるあたり「算道」の話にもちょっとつながったかな?


正規表現ワークショップ2016

今年も藝大先端のプログラミング演習講師業の季節。今年度から藝大内での改組やカリキュラム変更があったみたいで例年水曜日午前だった授業が火曜日午前になった。週明けてから月曜中に授業準備をなんとかしないといけないプレッシャーがけっこうある。

といいつつ、今年の授業第1回は去年度とほぼ同じ感じで正規表現を使ってみるワークショップをしてみた。あと授業での情報共有は今年はslackを選択してみたけど、これがうまく働くかはもうちょっと様子をみていきたい。

ことしみんなが作った正規表現:

  • (日米)?安(全)?保(障)?(条約)?
  • /お?(にぎり|むすび)め?し?/g
  • (オ|)?(シャ|サ)レ?(オツ)?(ンティ|ッティ)?
  • /(セ)?(ブン)?(イレ|レ)?ブン?(イレ|レ)?(ない)?/g
  • /(デイ)?(リュ|バ|サ|パ)ッ(ク|グ)/g
  • (キムラ?|きむら?|木村)(タクヤ?|たくや?|拓哉)?
  • コス(パ|プレダンスパーティー|トパフォーマンス)
  • (New)?(スーパー)?(マリオ|ルイージ)(ブラザーズ|サンシャイン|ギャラクシー|USA|64|(3D)?ランド|(3D)?ワールド)?(2|3|U|Wii)?
  • (東京)?(ディズニー)?(ランド|シー)
  • /(も〜っと!)?おジャ魔女どれみ(♯|ドッカ〜ン!|ナ・イ・ショ|16シリーズ)?/g

授業グループウエアとしてのサイボウズLive

これまで授業での情報共有にはながらく(7年くらい)qwikWebを使っていたんだけど、去年の秋にサービス終了が告知されて今年からは別のものにしないといけなくなった。

ちょうどそれを考えていたころ参加した「wikiばな同窓会」という飲み会にて、ただただしさんとその話(qwikWeb終了)になり授業での情報共有に向いたサービスとかないもんですかねと水をむけたところ「サイボウズliveとかでいいんじゃないの」と提案され、しかにwikiとかでなくてもふつうのグループウエアでいいのかと思って今年は試しにサイボウズLiveを使ってみた。授業も終わったのでふりかえり。

授業の情報共有では

  • 受講者への積極的な通知(休講情報とかのわりと緊急に全員に伝えたいこと)
  • 毎週の授業の講義録や資料などの共有
  • 毎週のプログラム課題の提出

などをおもにするんだけど、資料の共有とか課題の提出はそんなに問題なかった。サイボウズLiveの掲示板はファイル添付とか添付されたファイルやURLのプレビュー機能がわりと充実しているのがなかなかよかった。ただやっぱコメント追記型の掲示板なので、コメントの再編集ができないので添付忘れとかがあってコメントが入り乱れてしまったり、提出された課題にあとから返信してもコメント同士が離れてしまうのでいまいち情報としてストックされていく感じにならないのは使いにくいなと思ったところ(いちおう機能としては掲示板のヘッダ部分にWikiのように継続的に情報をメンテンスしていけるような仕組みが用意されているんだけど、今回の使いかた的にはあまり役に立たなかった)。

意外と向いてなかったのがグループメンバー全員への積極的な通知の方法がないことで、qwikWebは基本的にMLなので連絡事項がちゃんとサブジェクトの付いたメールとして流れるのがよかったんだけど、サイボウズLiveでそれをしようとするとメンバー全員を参加されたチャットルームを作ってそこに連絡事項を投げるくらいしかないのかな? しかもそれの通知は新着情報のチャットの新着発言1つとしてメールなどで知らされるだけなので、あんまり緊急連絡にならない。アプリをインストールしていればプッシュ通知されるだろうけど、半期の週1の授業のためにあんまりアプリいれないよね。連絡がチャットメインというのはマシンが起動しているときは常ににタブが開いておくようなふつうの仕事で使うぶんにはいいんだけど、学生に週1の授業で使ってもらう(それ以外のタイミングではサービスがほぼ見られない)というユースケースだとあんまり有効じゃない感じだった。

というわけで、来年も引き続き使うかというとちょっとどうかなという感じだった。