吉祥寺.pm6に参加しました(トーク音声公開&スライド作成方法)

以下でお知らせした通り、1/15(金)に開催された第6回吉祥寺.pmに参加してきました。
吉祥寺.pm6に参加します(2016/1/15) - the code to rock

発表資料は以下です。

www.slideshare.net

それから、これは今回初の試みですが(というか登壇自体ほぼやったことがないわけですが)、発表時の音声を手元で録音しておいたので、若干編集した上でSoundCloudにUPしてみました。

soundcloud.com

Index

  • 00:00 p01 - スタート
  • 00:30 p03 - 第1部: 自己紹介
  • 01:15 p06 - 最近の仕事
  • 03:20 p12 - FAQ: なんでプログラミング始めたの?
  • 05:50 p21 - 第2部: ぼんやりと考えたこと
  • 06:00 p22 - プログラミング入門者にもいろいろある
  • 07:25 p26 - 大人のプログラミング入門者にどう教えるか
  • 08:00 p27 - 入門者へのお勧め言語
  • 09:35 p34 - エラーを読まない初心者
  • 11:00 p37 - コミュニティの多様化
  • 12:00 p40 - プログラマーの御用達ツールを本業で活用
  • 14:40 p42 - まとめ

音声データの編集について

音声の編集では、無駄に言いよどんでいるところや息継ぎが耳につくところなど、主に聞き心地を邪魔する要素をカットOR音量調整しています。

その他、説明のわかりづらいところを数箇所つまみましたが、現場では15分をちょっと回ったぐらいで終わって、上記音源も大体そのぐらいなので、ほぼ現場ママの内容ですね。

音声の編集ソフトはフリーかつMacでもWindowsでも使える(どちらかと言うとWin向きらしい)Audacityを使いました。ほんと素晴らしいこれ。
Audacity: Free Audio Editor and Recorder

ついでに(というか)以前に映画美学校の夏期講習として、宇都宮泰さんのAudacity講座を受けたことがあるのですが、その宇都宮先生による同ソフトのプロフェッショナル・マニュアルにもリンクを貼っておきます。
Audacity プロフェッショナル・マニュアル 正式版ver,1.0+++
(自分はここまでのことはしていないですが)

スライドの変更点

録音の中でも言っていますが(1:55頃)、スライドの前半でカットしたページが1枚あって、「最近の仕事」として紹介しているscholaの座談会の現場風景を上のSlideShareからは外しています。

というのも、そのカットしたページには坂本さん&専門家の皆さんが写っていて、これはscholaの商品ページで公開しているYouTube動画の一場面をキャプチャしたものだったので、YouTubeの方は管理者が許す限りどこに貼りつけたって構わないわけですが、そのスクリーンショットをスライドに含めたまま公開するというのはちょっとバランスが悪いように思い、外した次第でした。

その代わりというわけではないですが、以下に同場面から始まる同動画を貼り付けておきます。
(参加者は左から坂本さん、三輪眞弘さん、小沼純一さん、川崎弘二さん、一番右に私)

なお、前記の通りこの動画は以下の商品紹介ページに埋め込む用途で作ったものでした。よろしければあわせてどうぞ。
【vol.13】Electronic Music(電子音楽)| commmons: schola(コモンズスコラ)-坂本龍一監修による音楽の百科事典- | commmons

スライドの作り方

さて、そのスライドですが、今回も @yusukebe さんの手によるPerlモジュール App::revealup を使用して作りました。

metacpan.org

同モジュールについては以下でも触れていますが、
Reject Conf に行ってきた #yapcasiareject - the code to rock

reveal.jsという素晴らしいツールPerlでさらに使いやすくしたものですね。

Markdownで指定のルールに沿ってゴリゴリ文章を書けばパッとスライドができるという、本当にラクで便利なものです。

テキストファイルだけで内容を管理できるので、Gitを使えば以前のバージョンとの差分も簡単に確認できて(延々と「名前を付けて保存」する必要もなく)、その点もナイスです。

ちなみに、今回のテーマ(デザイン)はデフォルトで用意されているcssの中からserif.cssをベースに用い、font-familyを一律Rictyに置き換えたものを使いました。

App::revealupで作成したスライドのPDF化

一方、これは前回も突き当たった壁だったのですが、そのように作った資料をPDF化する方法がなかなかわかりませんでした。

本家のreveal.jsのドキュメントをさらっと読むと、何らかの方法が用意されてるっぽいことはわかるのですが、詳細をイチから読み解くリソースが自分に残っておらず、結局これはベスト・ソリューションとは言いがたいのですが、以下の方法で書き出しました。

1. 「localhost:5000」でスライドが起動していることを確認(Chrome使用)。
2. おもむろに「http://localhost:5000/?print-pdf#/」にアクセス。
3. こんな画像が出てきて、一瞬何をしでかしたか不安に陥るが、落ち着く。
f:id:note103:20160117001716p:plain:w350
4. PDFとして保存。
f:id:note103:20160117001730p:plain:w350

以上。

コードもコマンドも無く、非常にあれなのですが、これで最低限のものはできました。
とくに、日本語テキストをリンクに置き換えた部分もちゃんとリンクとして働いているので(p9, 20など)、その点はありがたかったです。

デメリットとしては、若干レイアウトが崩れるのですよね。たとえば上のSlideShareでp15〜17を見て頂くと、p15と17がp16に比べて上に詰まってしまっているのですが、ブラウザで見たとき(プレゼン時)にはすべて同じ高さ(p16に近い)です。

あるいはブラウザなら未改行の部分がPDFだと途中で改行されてしまったり……。

とはいえ、前回に比べたらずっとマシなPDF化であること(前回)、そして何より現場では思ったとおりのレイアウトで展開できたので、まあそれで良いかと。

なお、上記のスライド化については以下の知見を参考にしました。ありがとうございました。
qiita.com

カットしたトピックについて

先日の予告記事や、その後のTwitterでは折りに触れスライド作成の進捗を実況していたのですが、土台的な構成はすでに1週間前ぐらいにはできていて、しかしその段階ではスライド枚数が最終版の倍ほどもあり。

また、今回は2部構成となりましたが、その初期段階では3部構成でした。
具体的には、最終バージョンでは大きく「来歴(プログラミングに足を踏み入れるまで)」と、「その後にいろいろ考えたこと」の2テーマで構成しましたが、もう一つ大きめのテーマとして、「プログラミングに足を踏み入れた非エンジニアがその後に遭遇する困難あれこれ」というものがありました。

そこでは「どんな大変さがあるのか」「どんなカルチャーショックがあったか(エンジニアと非エンジニアの文化の違いあるある)」「それでも継続するためにどんなことを考えていたか」などについて載せていましたが、これを含めるとどう頑張っても30分に収めることすら難しい感じだったので、テーマごとバッサリ落としました。

また、今回の終盤で「趣味プログラマーが増えるメリット」について、一つだけ「コミュニティの多様化」を挙げましたが、実はもう一つそのメリットの話を用意していて、これは本当に最後の最後まで残していたのですが、他のトピックをなるべく丁寧に扱えるよう、直前になってカットしました。

いずれにしても、それらを落とすことによって焦点が絞られた面もあったように思われ、結果オーライというか、まあそのぐらいでちょうど良かったよね、という感じです。

イベント後の懇親会では、それらを含む完全版をどこかで公開しよう、みたいな話もしましたが、考えてみるとその場合は結局イチから構成を吟味し直す必要もあるので、それはそれで結構大変かもしれないですね……。
ともあれ、もし良い形で活かせる機会があれば、その時にあらためてまとめたいと思います。

吉祥寺.pm6の感想(の予告)

ということで、ようやく自分の発表に関することをひとしきり書き終えたら随分長くなってしまったので、同イベント自体の感想は少し間を空けてから別記事に書きます。

ひとまず主宰の @magnolia_k_ さん、参加された皆さん、楽しい機会をありがとうございました。
kichijojipm.connpass.com