1月25日（土）に塩尻市で行われたイベント「GDG信州」のレポートです。
・GDG信州
< https://sites.google.com/site/gdgshinshu/
>
< http://www.zusaar.com/event/3057003
>
・会場の様子
<
・GDG信州
< https://sites.google.com/site/gdgshinshu/
>
< http://www.zusaar.com/event/3057003
>
・会場の様子
<
https://twitter.com/openspc/status/426933324020338688/photo/1>
しかし、参加レポートがメインではありません。いつもは、イベントに行っても見るだけ、聞くだけだったのですが、今回は初めて自分がプレゼンする側に回ることになったからです。それも、決まったのはイベント2日前。
成り行きでそうなったのですが、はてさてどうしたものか。だいたい、プレゼンとかに限らず、人前で何かやるのは嫌なのでずっと避けてきました。
でも、今回は一桁の人数の集まりなので、プレゼンの練習するにはちょうどいいかもということで、やってみることにしました。
プレゼンしたのは、データをビジュアル化するD3.jsについてです。ちょうどイベントの一週間前から、ページを作成していたからです。D3.jsはインタラクティブなビジュアル表現を、ブラウザ上でやりたい場合に使われるライブラリです。
・D3.js例文辞典
< http://www.openspc2.org/reibun/D3.js/
>
勉強がてら作ったので、適切ではないサンプルもあります。でも、まあ学習中だから一週間で覚えたことをプレゼンすればいいやということで、前日にプレゼン用資料を作成することにしました。
ところが、資料を作る段階になって「みんな、何を使ってプレゼン資料作ってるんだろう？」というナントモな状態になってしまいました。
Windowsならパワーポイント、Macならキーノートとかでしょうけど、どっちも持ってません。他には、HTMLで作る、Google Docsで作るとか選択肢があるようです。
しかし、いずれも使ったことがないか、使い慣れていないので、習得するにしても時間がかかります。イベントは明日なのに学習している時間がありません。→この段階ですでに前日の夕方。イベントは明日の午後1時から。
で、思いついたのがIllustratorのマルチページ機能を使ってPDFを作れば、一番早くて簡単そうだ、と。レイアウトも思い通りにできるし、コピー＆ペーストも簡単。なんといっても、1988年から使ってるから慣れてる！
ということで1時間ほどで適当に作ったのがこのPDF。まあ、ずれているところが多々あるけど、実際のプレゼンではわかりません。半分アドリブでやるわけですし、どうにかごまかせば問題ないはずです。
< http://www.openspc2.org/reibun/D3.js/pdf/D3.pdf
>
ということで、当日のプレゼン。スライドに表示する際は、Acrobatのフルスクリーン機能を使って行いました。困ったのがプレゼンの時間です。割り当て時間は30分〜40分です。PDFの1ページを1分で説明すると40分かかります。プレゼンに慣れていない上に、早口で話さないといけないのです。
定番の、東京特許許可局、生麦生米生卵、隣の竹垣立てかけかけた……と早口言葉を練習した甲斐あって、一応40分以内にプレゼンを終える事ができました。
人数が少ないので緊張することもなかったのですが、一回でやる内容じゃありませんでした。二〜三回分入れてしまったのが駄目でした。
毎月イベントというか勉強会があれば、分割したのですが、どうせ一回限りだしということで、詰め込んでしまったのが間違いでした。一週間で覚えたことを30分で説明するのは無理がありました。やはりプレゼンテーションは、場数をこなさないと上手にならないようです。
今回プレゼンしたD3.jsは、SVGを使って表現することが多々あります。D3.js+SVGで横棒グラフを表示するHTMLとJavaScriptは、以下のようになります。頑張れば結構リッチなアニメーションするグラフを作ることもできます。
●HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3.js サンプル</title>
<link rel="stylesheet" href="css/main.css">
<script src="http://d3js.org/d3.v3.min.js
" charset="utf-8"></script>
</head>
<body>
<h1>D3.jsサンプル</h1>
<div id="myGraph"></div>
<script src="js/sample.js"></script>
</body>
</html>
●JavaScript
var list = [10, 30, 5, 60, 40, 78, 56, 30, 24, 80];
var svgWidth = 640; // SVG領域の横幅
var svgHeight = 480; // SVG領域の縦幅
d3.select("#myGraph").append("svg")
.attr("width", svgWidth).attr("height", svgHeight)
.selectAll("rect") // SVGでの四角形を示す要素を指定
.data(list) // データを設定
.enter()
.append("rect") // SVGでの四角形を示す要素を生成
.attr("x", 0) // 横棒グラフなのでX座標は0。これはSVG上での座標
.attr("y", function(d,i){ // Y座標を配列の順序に応じて計算
return i * 18;
})
.attr("width", function(d){ // 横幅を配列の内容に応じて計算
return (d*2) +"px";
})
.attr("height", "16") // 棒グラフの高さを指定
.attr("style", "fill:rgb(255,0,0)") // 棒グラフの色を赤色に設定
興味のある人はD3.jsに挑戦してみてください。
【古籏一浩】openspc@alpha.ocn.ne.jp
< http://www.openspc2.org/
>
今回は、アメリカにいる人とハングアウトで接続して、Team Viewerでマシンをリモート操作してプレゼンするという試みも行いました。ハングアウトはスムーズに表示され、Team Viewerでアメリカからこちら（日本）のマシンをリモートで操作するのも、かなりスムーズにできました。
しかし、会場で使用している回線が1時間で切れてしまうという仕様になっているのを知らずに行ったため、アメリカからのプレゼンの最後が切れてしまうというオチがありました。
その時の連絡手段を用意していなかったので、再度接続してハングアウトで呼び出すまでに5分近くかかってしまいました。Twitterとか携帯電話とか他の連絡手段は、やはり必須のようです。
あと、木でできたキーボードを持ってきた方もいました。
<
他にもタブレットのSurface Proが突然電源も入らずお亡くなりになるというオチもありました。Windowsが，あっという間に石版に早変わり。
早々とSONYから小型の4Kカメラが出るようです。
・FDR-AX1
< http://pur.store.sony.jp/Qnavi/Product/FDR-AX100/
>
パナソニックから4Kカメラが出ればいいんですが、X920Mの後継機として出るのかどうか。パナソニックはもうひとつカメラを付けるという方向になっていますから、どうなるのか。
・W850M/V750M
< http://panasonic.jp/dvc/w850m_v750m/
>
・Adobe CS2〜CS6,CC JavaScriptリファレンス＆ライブラリ
< http://www.openspc2.org/reibun/AdobeJS/index.html
>
・Adobe JavaScriptリファレンス（Kindle版。なぜか正常に検索できないのは
調査中）
< http://www.amazon.co.jp/dp/4844395955
>
・ハイビジョン映像素材集
< http://www.openspc2.org/HDTV/
>
・Nexus 7（アンドロイドタブレット）使い方辞典
< http://www.openspc2.org/reibun/Android/Nexus7/
>
・JavaScript逆引きハンドブック
< http://www.amazon.co.jp/dp/4863541082
>
・クリエイター手抜きプロジェクト
< http://www.openspc2.org/projectX/
>
・Adobe Illustrator CS3 + JavaScript 自動化サンプル集
< http://www.openspc2.org/book/PDF/Adobe_Illustrator_CS3_JavaScript_Book/
>
吉田印刷所の「印刷の泉」でも購入できるようになりました。
成り行きでそうなったのですが、はてさてどうしたものか。だいたい、プレゼンとかに限らず、人前で何かやるのは嫌なのでずっと避けてきました。
でも、今回は一桁の人数の集まりなので、プレゼンの練習するにはちょうどいいかもということで、やってみることにしました。
プレゼンしたのは、データをビジュアル化するD3.jsについてです。ちょうどイベントの一週間前から、ページを作成していたからです。D3.jsはインタラクティブなビジュアル表現を、ブラウザ上でやりたい場合に使われるライブラリです。
・D3.js例文辞典
< http://www.openspc2.org/reibun/D3.js/
>
勉強がてら作ったので、適切ではないサンプルもあります。でも、まあ学習中だから一週間で覚えたことをプレゼンすればいいやということで、前日にプレゼン用資料を作成することにしました。
ところが、資料を作る段階になって「みんな、何を使ってプレゼン資料作ってるんだろう？」というナントモな状態になってしまいました。
Windowsならパワーポイント、Macならキーノートとかでしょうけど、どっちも持ってません。他には、HTMLで作る、Google Docsで作るとか選択肢があるようです。
しかし、いずれも使ったことがないか、使い慣れていないので、習得するにしても時間がかかります。イベントは明日なのに学習している時間がありません。→この段階ですでに前日の夕方。イベントは明日の午後1時から。
で、思いついたのがIllustratorのマルチページ機能を使ってPDFを作れば、一番早くて簡単そうだ、と。レイアウトも思い通りにできるし、コピー＆ペーストも簡単。なんといっても、1988年から使ってるから慣れてる！
ということで1時間ほどで適当に作ったのがこのPDF。まあ、ずれているところが多々あるけど、実際のプレゼンではわかりません。半分アドリブでやるわけですし、どうにかごまかせば問題ないはずです。
< http://www.openspc2.org/reibun/D3.js/pdf/D3.pdf
>
ということで、当日のプレゼン。スライドに表示する際は、Acrobatのフルスクリーン機能を使って行いました。困ったのがプレゼンの時間です。割り当て時間は30分〜40分です。PDFの1ページを1分で説明すると40分かかります。プレゼンに慣れていない上に、早口で話さないといけないのです。
定番の、東京特許許可局、生麦生米生卵、隣の竹垣立てかけかけた……と早口言葉を練習した甲斐あって、一応40分以内にプレゼンを終える事ができました。
人数が少ないので緊張することもなかったのですが、一回でやる内容じゃありませんでした。二〜三回分入れてしまったのが駄目でした。
毎月イベントというか勉強会があれば、分割したのですが、どうせ一回限りだしということで、詰め込んでしまったのが間違いでした。一週間で覚えたことを30分で説明するのは無理がありました。やはりプレゼンテーションは、場数をこなさないと上手にならないようです。
今回プレゼンしたD3.jsは、SVGを使って表現することが多々あります。D3.js+SVGで横棒グラフを表示するHTMLとJavaScriptは、以下のようになります。頑張れば結構リッチなアニメーションするグラフを作ることもできます。
●HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3.js サンプル</title>
<link rel="stylesheet" href="css/main.css">
<script src="http://d3js.org/d3.v3.min.js
" charset="utf-8"></script>
</head>
<body>
<h1>D3.jsサンプル</h1>
<div id="myGraph"></div>
<script src="js/sample.js"></script>
</body>
</html>
●JavaScript
var list = [10, 30, 5, 60, 40, 78, 56, 30, 24, 80];
var svgWidth = 640; // SVG領域の横幅
var svgHeight = 480; // SVG領域の縦幅
d3.select("#myGraph").append("svg")
.attr("width", svgWidth).attr("height", svgHeight)
.selectAll("rect") // SVGでの四角形を示す要素を指定
.data(list) // データを設定
.enter()
.append("rect") // SVGでの四角形を示す要素を生成
.attr("x", 0) // 横棒グラフなのでX座標は0。これはSVG上での座標
.attr("y", function(d,i){ // Y座標を配列の順序に応じて計算
return i * 18;
})
.attr("width", function(d){ // 横幅を配列の内容に応じて計算
return (d*2) +"px";
})
.attr("height", "16") // 棒グラフの高さを指定
.attr("style", "fill:rgb(255,0,0)") // 棒グラフの色を赤色に設定
興味のある人はD3.jsに挑戦してみてください。
【古籏一浩】openspc@alpha.ocn.ne.jp
< http://www.openspc2.org/
>
今回は、アメリカにいる人とハングアウトで接続して、Team Viewerでマシンをリモート操作してプレゼンするという試みも行いました。ハングアウトはスムーズに表示され、Team Viewerでアメリカからこちら（日本）のマシンをリモートで操作するのも、かなりスムーズにできました。
しかし、会場で使用している回線が1時間で切れてしまうという仕様になっているのを知らずに行ったため、アメリカからのプレゼンの最後が切れてしまうというオチがありました。
その時の連絡手段を用意していなかったので、再度接続してハングアウトで呼び出すまでに5分近くかかってしまいました。Twitterとか携帯電話とか他の連絡手段は、やはり必須のようです。
あと、木でできたキーボードを持ってきた方もいました。
<
https://twitter.com/openspc/status/426929951070117888/photo/1>
他にもタブレットのSurface Proが突然電源も入らずお亡くなりになるというオチもありました。Windowsが，あっという間に石版に早変わり。
早々とSONYから小型の4Kカメラが出るようです。
・FDR-AX1
< http://pur.store.sony.jp/Qnavi/Product/FDR-AX100/
>
パナソニックから4Kカメラが出ればいいんですが、X920Mの後継機として出るのかどうか。パナソニックはもうひとつカメラを付けるという方向になっていますから、どうなるのか。
・W850M/V750M
< http://panasonic.jp/dvc/w850m_v750m/
>
・Adobe CS2〜CS6,CC JavaScriptリファレンス＆ライブラリ
< http://www.openspc2.org/reibun/AdobeJS/index.html
>
・Adobe JavaScriptリファレンス（Kindle版。なぜか正常に検索できないのは
調査中）
< http://www.amazon.co.jp/dp/4844395955
>
・ハイビジョン映像素材集
< http://www.openspc2.org/HDTV/
>
・Nexus 7（アンドロイドタブレット）使い方辞典
< http://www.openspc2.org/reibun/Android/Nexus7/
>
・JavaScript逆引きハンドブック
< http://www.amazon.co.jp/dp/4863541082
>
・クリエイター手抜きプロジェクト
< http://www.openspc2.org/projectX/
>
・Adobe Illustrator CS3 + JavaScript 自動化サンプル集
< http://www.openspc2.org/book/PDF/Adobe_Illustrator_CS3_JavaScript_Book/
>
吉田印刷所の「印刷の泉」でも購入できるようになりました。