《興味のある人はD3.jsに挑戦してみてください》
■クリエイター手抜きプロジェクト[374]イベント編
はじめてのプレゼン
古籏一浩
■ローマでMANGA[71]
あなたは本当に素晴らしい編集者だ!
midori
--PR------------------------------------------------------------------
★DTP・印刷専門のデジタルコンテンツ販売サイト「印刷の泉」
≫≫≫ https://www.ddc.co.jp/estore/
≪≪≪
●セミナー・勉強会を撮影した動画・スライドも好評販売中!
●“無料”のPhotoshopアクション・Acrobat用プリフライトもあります!
●編集作業の味方! PDFの違いを発見してくれるソフトを販売(体験版あり)
★電子書籍 PDF フォント 素材 スクリプト 動画を販売したい方を募集中!
-----------------------------------------------------------------PR---
■クリエイター手抜きプロジェクト[374]イベント編
はじめてのプレゼン
古籏一浩
■ローマでMANGA[71]
あなたは本当に素晴らしい編集者だ!
midori
--PR------------------------------------------------------------------
★DTP・印刷専門のデジタルコンテンツ販売サイト「印刷の泉」
≫≫≫ https://www.ddc.co.jp/estore/
≪≪≪
●セミナー・勉強会を撮影した動画・スライドも好評販売中!
●“無料”のPhotoshopアクション・Acrobat用プリフライトもあります!
●編集作業の味方! PDFの違いを発見してくれるソフトを販売(体験版あり)
★電子書籍 PDF フォント 素材 スクリプト 動画を販売したい方を募集中!
-----------------------------------------------------------------PR---
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■クリエイター手抜きプロジェクト[374]イベント編
はじめてのプレゼン
古籏一浩
< https://bn.dgcr.com/archives/20140127140200.html
>
───────────────────────────────────
1月25日(土)に塩尻市で行われたイベント「GDG信州」のレポートです。
・GDG信州
< https://sites.google.com/site/gdgshinshu/
>
< http://www.zusaar.com/event/3057003
>
・会場の様子
<
しかし、参加レポートがメインではありません。いつもは、イベントに行っても見るだけ、聞くだけだったのですが、今回は初めて自分がプレゼンする側に回ることになったからです。それも、決まったのはイベント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/
>
吉田印刷所の「印刷の泉」でも購入できるようになりました。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■ローマでMANGA[71]
あなたは本当に素晴らしい編集者だ!
midori
< https://bn.dgcr.com/archives/20140127140100.html
>
───────────────────────────────────
講談社のモーニング編集部が日本人以外の作家を起用し、描き下ろしを掲載するという、前代未聞の企画を進行していた。わたしがイタリア人作家と編集部の仲介をするという、嬉し楽し仕事をしていた当時を、記録の意味を込めて書いているシリーズです。
今は、「幸運が服を着て歩いている」楽天的なヨーリとの関わりを書いてます。
●楽天的で大雑把なヨーリは最初の約束を忘れてしまう
前回では「ミヌス」というシンプルな形状をもった主人公が活躍する話を提案して、受け入れられたという話をした。
「ミヌス」提案前に制作を開始した「不思議な世界旅行」も着々と進んでいた。ただ、ヨーリはこれまでに何か月にもわたったミーティングの結果を、どこかに置き忘れてしまう。
イタリア組も日本組も、バカンスを終えた8月終わりのファックスでちょっと波が高まった。「不思議な…(長いタイトルなので編集とのやりとりでは、しょっちゅうこのように略していたのを思い出した)」の第4話と5話のネームがヨーリから届いて、その返事だ。
ポイントが二つあって、一つはネームの内容について。
「これまでの展開に比べて単調なのはなぜか。物語には起伏があってしかるべきだが、ヨーリの魅力である絵の衝撃力がない。悪魔的な男の捨て台詞のコマはもっと大きいほうがよくないか? あるいは後に高笑い場面などをいれたらどうか? 赤い鮫の出現場面も平凡だ。驚きに満ちた絵で表せる要素がたくさんあるのに演出が足らない」
ヨーリはネーム(ストーリーボード)といいながら、実際には「途中経過」として、すでにあちこちに本番の絵を入れたものをコピーして送っていたのだ。まずネームを作って担当編集と相談する、というお約束をすでに忘れている。
もう一件は全体の構成について。
第4話と第5話のネーム(ヨーリの途中経過報告)を読んで、違和感を覚えた編集者がシノプシスを読み返したところ、第5話はシノプシスの第2話に当たることが判明した。
つまり、物語が当初の予定よりもゆっくり進んでいるのだ。打ち合わせの結果は全13話(各話8ページ)の104ページで単行本一冊ということだった。だいたい、打ち合わせでは全12話だったのに、最終シノプシスを全13話で送ってきて、編集をたまげさせた前科を持つヨーリなのだ。
ヨーリはこの件について、全部の話が8ページではなく16ページになる。以前に16ページにすると言ったら喜んでいたではないか、と返事をした。さらには「柔軟性を残して欲しい。制作途中で話が多くなったる少なくなったりするかもしれない」と言う。
私みたいに「決まりごとは守るべき!」というプログラムがインプットされている者にとっては、こんなに鷹揚に気ままに振る舞って、打ち合わせの結果を平気で破っちゃう人は驚異であり、なんで決まりを守らないのかという苛つきに似たものを感じるのと同時に、羨ましさも感じる。
16ページに関しては、話し合いの途中で、中には8ページ二回で一話とするものもある、ということだった。全部の話ではなかったのが、いつの間にかヨーリの中ではそうなってしまっていた。
そして、ヨーリとしては提出したものは話し合いのためのネームではなく、途中経過報告なので、やり直しは好まないとまで言った。担当編集者は、長くなるのは構わないが、知らせて欲しい、ネームを見せてくれ、と当然のことを言った。
ストーリーの案が受け入れられたら、作家が勝手に進めるのがヨーロッパ方式なので、ヨーリとしては話し合いはすでにすべて済んでいると解釈したわけだ。まさか、原稿のレイアウトまで編集者とやりとりをすることになるとは考えていなかったのだろう。
逆の立場から言えば、日本の編集者はおおまかなストーリーと構成についての話合いの後、ネームでもう一度細かい打ち合わせをするのが当たり前なので、「ネームを見せてくれ」と言うのが「ネームを見ながら話し合いをしましょう」という意味だと、相手も取ってくれると思い込んでしまうわけだ。
ただし、ヨーリは担当編集のネームに対する意見に関しては、あなたは本当に素晴らしい編集者だ! と感心して意見を全面的に受け入れた。
その後、仕上がった原稿では、黒いウェットスーツに身を包んだ悪魔的な男の顔のアップが、縦割り2コマの半分を占めてわははは! と高笑いし、血のような赤い鮫が真っ青な海を背景に突然躍り出てきて、視覚的にインパクトのある原稿に仕上がった。
●Macに遊ばれながら編集のお手伝いは進む
ネームと途中経過報告問題は9月の最初の週のやりとり。次のFAXは、私からの14日付けで「不思議な…」の第4話と第5話の再ネーム、訳、「ミヌス」のネーム7ページ、ヨーリの手紙を郵送します、とある。
再ネームをFAXではなく郵送するのは、確か、ヨーリは大きい紙に描くのが好きで、ネームも大きな紙で描き込んできたので、A4のFAX機に入らなかったからだと思う。
何度かこのシリーズで書いたけれど、ネットはまだ一般的ではなかった時期の話で、こうしたやりとりだけで時間がやたらかかっている。郵送ともなると、2月に生まれた子どもを乳母車に乗せて、郵便局まで行ってさんざん並び、「日本までこんなに料金がかかるよ!」と余計な心配をしてくれる郵便局員をなだめて、手続きを終了してもらうという苦労をしていたのだ。
この頃、私は夏に里帰りした時にマックの初期のノートブック型の中古を手にいれて使っていたが、これにはずいぶん翻弄された。ノートブックというより、閉じると高さが4センチ位になる辞書と言った方がいい。
初期の重たい中古ノートブックはどうも、工場から出た時点でバグ満載だったらしい。何度もバクダンが出てフリーズしては弟にFAXでヘルプを求めたり、当時は珍しかったアップルの修理店を探して修理に出したりで、ずいぶんイライラさせられた。
この14日のFAX原稿は、ワープロで打ち込んでいる。この頃はまだいつか良くなると信じて、「そのうち、FAXをMacに取り付けたいと思っています。作った書類を直接送受信できるそうなので便利ですよね」とも書いてある。
ネットはまだまだ遠かったし、中古だから安く買えたのに、修理代が嵩んで仕方がないイライラ・ノートブックに見切りをつけて一体型のデスクトップを買い、FAXアプリを入れるのはまだ先の話だ。
●ミヌスの打ち合わせも最終段階へ
14日のFAXの後、日伊とも沈黙があり、30日に業を煮やしたヨーリから「不思議な…」を進めていいかどうかだけでも教えてくれ、で始まり、担当編集者の返事、私からヨーリへの翻訳、ヨーリの返事、編集者への翻訳通信、編集者からの返事が一日でドーーーッと一気に来た。
編集者からは「不思議な…」のやり直しがうまく行った、という褒め言葉と、ミヌスの容貌と題材についての丁寧な意見だ。
ヨーリは、編集者堤さんが最初にミヌスを見た時に否定的な反応をしたのを気にしていたのか、「鼻をつけてみました」という絵を送っていた。堤さんはミヌスの造形は認めている。だが、提出された二話のブラックなものは楽しめなかった。
ブラックは否定しないが、第一話は「人間の広がっていく感情・行動を素材として物語を作るのがいいと思います。それは例えば、笑い、愛すること、語ること、歩くこと、豊かな食欲などです。これらは国境を越えて人間に共通するものであり、これらを素材に見事な物語を作ることができれば、誰でも楽しめる作品となるでしょう」と返答した。
この見方こそ、堤さんが優秀な編集者たる証拠だと思う。
物語を作る上での土台の話をするわけだ。
そしてFAXは10月に入る。
【みどり】midorigo@mac.com
前々回にお小遣い稼ぐ大冒険でウェブライターに登録したものの、お返事がなかったという話をした。
ところが、勝手にメールで返事が来るものと思っていたのが、登録して作成されたマイページで確認すべきだったので。それで確認したところ、送信した6件がすべて採用となって510円ものお小遣いを稼いでいた!
気を良くして後3件追加した。お題が漠然としているところが難しいのだけれど、慣れるとサイトにあるように一件書くのに数分でできそうだ。
MANGA構築法授業に関して、トントンと話が進んで1月から3か月間、フィレンツェ校で週3回講義をもつことになった。
私が初めてイタリア旅行をした頃は3時間かかったローマ・フィレンツェ間は、もはや1時間半で着いてしまう。しかも、当時のようにしょっちゅうのストライキも延着もほぼない。北へ向かう特急列車はすべてフィレンツェに停車するので、ほぼ30分毎に列車が出ている。3時間の授業をして、余裕で午後に帰宅できてしまう。
ローマ校ではセミナーなので週一回で2時間のみ。フィレンツェ校の講義はコースなので3時間授業が週に3回。たっぷり丁寧に説明できる。いやぁ、正式コースはいいなぁ。いずれ、ローマ校でも正式コースに設置してもらえるようにがんばろう。
「イタリアで新しい漫画を作る大冒険」
< http://p.booklog.jp/book/77255/read
>
主に料理の写真を載せたブログを書いてます
< http://midoroma.blog87.fc2.com/
>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
編集後記(01/27)
●1982年のアメリカ映画「愛と青春の旅立ち」を見た。「愛と…………」というよくある邦題はあまりに陳腐だが、原題の「An Officer and a Gentleman」(士官と紳士)では絶対ヒットしなかっただろう。映画を見ないとその意味はわからない。だらしない生活を送っていた若者ザックが、海軍士官養成学校に入り、自分の手で夢を実現していく話である。自堕落な父は元水兵、母親は彼が13歳の時に自殺している。暗く惨めな子供時代を、ザックはジェット機のパイロットになるという夢にすがって生きて来たのだ。
学校では13週間にわたる苛酷な訓練が続く。鬼軍曹が生徒たちを徹底的にしごく。入校のシーンでは士官候補生を並ばせ、下品な言葉で罵倒しまくる。弱腰の士官候補生には容赦なく任意除隊をつきつける。しかし、この無慈悲な鬼軍曹がキーマンであることは容易に想像できる。ザックは不正を犯し、鬼からしごきにしごかれ、罵られ、任意除隊を迫られる。それまでクールだったザックは「ここ以外に行くところがないんだ!」と感情を爆発させる。当時(ベトナム戦争後)のアメリカでは、このシーンに共感する人が多かったという。
猛訓練の合間にはロマンスが生まれる。ザックはなにか事情のある家庭出身の、女工ポーラと恋仲になる。じつは玉の輿狙いの接近であったが、ザックは本気になり、卒業したら迎えに行くと約束する。だが、エリートである士官になれば、女工相手ではアンバランスだ。ザックは逡巡して距離を置き、プライドの高い彼女も身を引く。同時進行で、ザックの親友ウォーリーとポーラの女工仲間リネットとの恋愛も描かれるが、こちらは悲劇に終わる。4人の男女は、見かけよりよほど未熟であった。もとい、2人の男は、だ。
終りすこし前まで分からず心配なことは、鬼に楯突いて任意除隊を口にしたザックはどうなったのか。ザックはポーラを捨てるのか。DVD最後の2チャプターは感動のシーンがいくつもあって、ちょっと涙ぐむ。この映画は、主人公カップルの話だけでなく、士官たるものは紳士であらねばならない、ということを鬼軍曹が若者たちに叩き込む話でもある。意地悪な教官に思えた軍曹は、じつに任務に忠実な人物であった。「An Officer and a Gentleman」ってそういう意味なんだと思う。なるほど、これが「名画」だということが理解できた。鬼軍曹役は1982年度アカデミー助演男優賞を受賞している。(柴田)
< http://www.amazon.co.jp/exec/obidos/ASIN/B000063UW9/dgcrcom-22/
>
「愛と青春の旅だち」
●続き。それを伝えたら、そうですか、今日は何時までやっていますからと笑顔で言われ、家から一駅はあるのに、すっかり買う気に。ほんとに感じのいい人だったの。
うちのコーヒーメーカーは豆をひくところから自動でできる機種なのに、手入れの時間がもったいない気がして全然使っていなかった。久しぶりに豆をひく時の香りを楽しみたいというのも理由。
夕方、スーパーに行くついでに足を延ばし、再度ショップへ。と、彼女は忙しそうで声をかけられない。店長らしき人は他のお客さんに、コーヒー豆についての蘊蓄トークで忙しそう。説明聞きたかったな〜。続く。(hammer.mule)
■クリエイター手抜きプロジェクト[374]イベント編
はじめてのプレゼン
古籏一浩
< https://bn.dgcr.com/archives/20140127140200.html
>
───────────────────────────────────
1月25日(土)に塩尻市で行われたイベント「GDG信州」のレポートです。
・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とか携帯電話とか他の連絡手段は、やはり必須のようです。
あと、木でできたキーボードを持ってきた方もいました。
<
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/
>
吉田印刷所の「印刷の泉」でも購入できるようになりました。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■ローマでMANGA[71]
あなたは本当に素晴らしい編集者だ!
midori
< https://bn.dgcr.com/archives/20140127140100.html
>
───────────────────────────────────
講談社のモーニング編集部が日本人以外の作家を起用し、描き下ろしを掲載するという、前代未聞の企画を進行していた。わたしがイタリア人作家と編集部の仲介をするという、嬉し楽し仕事をしていた当時を、記録の意味を込めて書いているシリーズです。
今は、「幸運が服を着て歩いている」楽天的なヨーリとの関わりを書いてます。
●楽天的で大雑把なヨーリは最初の約束を忘れてしまう
前回では「ミヌス」というシンプルな形状をもった主人公が活躍する話を提案して、受け入れられたという話をした。
「ミヌス」提案前に制作を開始した「不思議な世界旅行」も着々と進んでいた。ただ、ヨーリはこれまでに何か月にもわたったミーティングの結果を、どこかに置き忘れてしまう。
イタリア組も日本組も、バカンスを終えた8月終わりのファックスでちょっと波が高まった。「不思議な…(長いタイトルなので編集とのやりとりでは、しょっちゅうこのように略していたのを思い出した)」の第4話と5話のネームがヨーリから届いて、その返事だ。
ポイントが二つあって、一つはネームの内容について。
「これまでの展開に比べて単調なのはなぜか。物語には起伏があってしかるべきだが、ヨーリの魅力である絵の衝撃力がない。悪魔的な男の捨て台詞のコマはもっと大きいほうがよくないか? あるいは後に高笑い場面などをいれたらどうか? 赤い鮫の出現場面も平凡だ。驚きに満ちた絵で表せる要素がたくさんあるのに演出が足らない」
ヨーリはネーム(ストーリーボード)といいながら、実際には「途中経過」として、すでにあちこちに本番の絵を入れたものをコピーして送っていたのだ。まずネームを作って担当編集と相談する、というお約束をすでに忘れている。
もう一件は全体の構成について。
第4話と第5話のネーム(ヨーリの途中経過報告)を読んで、違和感を覚えた編集者がシノプシスを読み返したところ、第5話はシノプシスの第2話に当たることが判明した。
つまり、物語が当初の予定よりもゆっくり進んでいるのだ。打ち合わせの結果は全13話(各話8ページ)の104ページで単行本一冊ということだった。だいたい、打ち合わせでは全12話だったのに、最終シノプシスを全13話で送ってきて、編集をたまげさせた前科を持つヨーリなのだ。
ヨーリはこの件について、全部の話が8ページではなく16ページになる。以前に16ページにすると言ったら喜んでいたではないか、と返事をした。さらには「柔軟性を残して欲しい。制作途中で話が多くなったる少なくなったりするかもしれない」と言う。
私みたいに「決まりごとは守るべき!」というプログラムがインプットされている者にとっては、こんなに鷹揚に気ままに振る舞って、打ち合わせの結果を平気で破っちゃう人は驚異であり、なんで決まりを守らないのかという苛つきに似たものを感じるのと同時に、羨ましさも感じる。
16ページに関しては、話し合いの途中で、中には8ページ二回で一話とするものもある、ということだった。全部の話ではなかったのが、いつの間にかヨーリの中ではそうなってしまっていた。
そして、ヨーリとしては提出したものは話し合いのためのネームではなく、途中経過報告なので、やり直しは好まないとまで言った。担当編集者は、長くなるのは構わないが、知らせて欲しい、ネームを見せてくれ、と当然のことを言った。
ストーリーの案が受け入れられたら、作家が勝手に進めるのがヨーロッパ方式なので、ヨーリとしては話し合いはすでにすべて済んでいると解釈したわけだ。まさか、原稿のレイアウトまで編集者とやりとりをすることになるとは考えていなかったのだろう。
逆の立場から言えば、日本の編集者はおおまかなストーリーと構成についての話合いの後、ネームでもう一度細かい打ち合わせをするのが当たり前なので、「ネームを見せてくれ」と言うのが「ネームを見ながら話し合いをしましょう」という意味だと、相手も取ってくれると思い込んでしまうわけだ。
ただし、ヨーリは担当編集のネームに対する意見に関しては、あなたは本当に素晴らしい編集者だ! と感心して意見を全面的に受け入れた。
その後、仕上がった原稿では、黒いウェットスーツに身を包んだ悪魔的な男の顔のアップが、縦割り2コマの半分を占めてわははは! と高笑いし、血のような赤い鮫が真っ青な海を背景に突然躍り出てきて、視覚的にインパクトのある原稿に仕上がった。
●Macに遊ばれながら編集のお手伝いは進む
ネームと途中経過報告問題は9月の最初の週のやりとり。次のFAXは、私からの14日付けで「不思議な…」の第4話と第5話の再ネーム、訳、「ミヌス」のネーム7ページ、ヨーリの手紙を郵送します、とある。
再ネームをFAXではなく郵送するのは、確か、ヨーリは大きい紙に描くのが好きで、ネームも大きな紙で描き込んできたので、A4のFAX機に入らなかったからだと思う。
何度かこのシリーズで書いたけれど、ネットはまだ一般的ではなかった時期の話で、こうしたやりとりだけで時間がやたらかかっている。郵送ともなると、2月に生まれた子どもを乳母車に乗せて、郵便局まで行ってさんざん並び、「日本までこんなに料金がかかるよ!」と余計な心配をしてくれる郵便局員をなだめて、手続きを終了してもらうという苦労をしていたのだ。
この頃、私は夏に里帰りした時にマックの初期のノートブック型の中古を手にいれて使っていたが、これにはずいぶん翻弄された。ノートブックというより、閉じると高さが4センチ位になる辞書と言った方がいい。
初期の重たい中古ノートブックはどうも、工場から出た時点でバグ満載だったらしい。何度もバクダンが出てフリーズしては弟にFAXでヘルプを求めたり、当時は珍しかったアップルの修理店を探して修理に出したりで、ずいぶんイライラさせられた。
この14日のFAX原稿は、ワープロで打ち込んでいる。この頃はまだいつか良くなると信じて、「そのうち、FAXをMacに取り付けたいと思っています。作った書類を直接送受信できるそうなので便利ですよね」とも書いてある。
ネットはまだまだ遠かったし、中古だから安く買えたのに、修理代が嵩んで仕方がないイライラ・ノートブックに見切りをつけて一体型のデスクトップを買い、FAXアプリを入れるのはまだ先の話だ。
●ミヌスの打ち合わせも最終段階へ
14日のFAXの後、日伊とも沈黙があり、30日に業を煮やしたヨーリから「不思議な…」を進めていいかどうかだけでも教えてくれ、で始まり、担当編集者の返事、私からヨーリへの翻訳、ヨーリの返事、編集者への翻訳通信、編集者からの返事が一日でドーーーッと一気に来た。
編集者からは「不思議な…」のやり直しがうまく行った、という褒め言葉と、ミヌスの容貌と題材についての丁寧な意見だ。
ヨーリは、編集者堤さんが最初にミヌスを見た時に否定的な反応をしたのを気にしていたのか、「鼻をつけてみました」という絵を送っていた。堤さんはミヌスの造形は認めている。だが、提出された二話のブラックなものは楽しめなかった。
ブラックは否定しないが、第一話は「人間の広がっていく感情・行動を素材として物語を作るのがいいと思います。それは例えば、笑い、愛すること、語ること、歩くこと、豊かな食欲などです。これらは国境を越えて人間に共通するものであり、これらを素材に見事な物語を作ることができれば、誰でも楽しめる作品となるでしょう」と返答した。
この見方こそ、堤さんが優秀な編集者たる証拠だと思う。
物語を作る上での土台の話をするわけだ。
そしてFAXは10月に入る。
【みどり】midorigo@mac.com
前々回にお小遣い稼ぐ大冒険でウェブライターに登録したものの、お返事がなかったという話をした。
ところが、勝手にメールで返事が来るものと思っていたのが、登録して作成されたマイページで確認すべきだったので。それで確認したところ、送信した6件がすべて採用となって510円ものお小遣いを稼いでいた!
気を良くして後3件追加した。お題が漠然としているところが難しいのだけれど、慣れるとサイトにあるように一件書くのに数分でできそうだ。
MANGA構築法授業に関して、トントンと話が進んで1月から3か月間、フィレンツェ校で週3回講義をもつことになった。
私が初めてイタリア旅行をした頃は3時間かかったローマ・フィレンツェ間は、もはや1時間半で着いてしまう。しかも、当時のようにしょっちゅうのストライキも延着もほぼない。北へ向かう特急列車はすべてフィレンツェに停車するので、ほぼ30分毎に列車が出ている。3時間の授業をして、余裕で午後に帰宅できてしまう。
ローマ校ではセミナーなので週一回で2時間のみ。フィレンツェ校の講義はコースなので3時間授業が週に3回。たっぷり丁寧に説明できる。いやぁ、正式コースはいいなぁ。いずれ、ローマ校でも正式コースに設置してもらえるようにがんばろう。
「イタリアで新しい漫画を作る大冒険」
< http://p.booklog.jp/book/77255/read
>
主に料理の写真を載せたブログを書いてます
< http://midoroma.blog87.fc2.com/
>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
編集後記(01/27)
●1982年のアメリカ映画「愛と青春の旅立ち」を見た。「愛と…………」というよくある邦題はあまりに陳腐だが、原題の「An Officer and a Gentleman」(士官と紳士)では絶対ヒットしなかっただろう。映画を見ないとその意味はわからない。だらしない生活を送っていた若者ザックが、海軍士官養成学校に入り、自分の手で夢を実現していく話である。自堕落な父は元水兵、母親は彼が13歳の時に自殺している。暗く惨めな子供時代を、ザックはジェット機のパイロットになるという夢にすがって生きて来たのだ。
学校では13週間にわたる苛酷な訓練が続く。鬼軍曹が生徒たちを徹底的にしごく。入校のシーンでは士官候補生を並ばせ、下品な言葉で罵倒しまくる。弱腰の士官候補生には容赦なく任意除隊をつきつける。しかし、この無慈悲な鬼軍曹がキーマンであることは容易に想像できる。ザックは不正を犯し、鬼からしごきにしごかれ、罵られ、任意除隊を迫られる。それまでクールだったザックは「ここ以外に行くところがないんだ!」と感情を爆発させる。当時(ベトナム戦争後)のアメリカでは、このシーンに共感する人が多かったという。
猛訓練の合間にはロマンスが生まれる。ザックはなにか事情のある家庭出身の、女工ポーラと恋仲になる。じつは玉の輿狙いの接近であったが、ザックは本気になり、卒業したら迎えに行くと約束する。だが、エリートである士官になれば、女工相手ではアンバランスだ。ザックは逡巡して距離を置き、プライドの高い彼女も身を引く。同時進行で、ザックの親友ウォーリーとポーラの女工仲間リネットとの恋愛も描かれるが、こちらは悲劇に終わる。4人の男女は、見かけよりよほど未熟であった。もとい、2人の男は、だ。
終りすこし前まで分からず心配なことは、鬼に楯突いて任意除隊を口にしたザックはどうなったのか。ザックはポーラを捨てるのか。DVD最後の2チャプターは感動のシーンがいくつもあって、ちょっと涙ぐむ。この映画は、主人公カップルの話だけでなく、士官たるものは紳士であらねばならない、ということを鬼軍曹が若者たちに叩き込む話でもある。意地悪な教官に思えた軍曹は、じつに任務に忠実な人物であった。「An Officer and a Gentleman」ってそういう意味なんだと思う。なるほど、これが「名画」だということが理解できた。鬼軍曹役は1982年度アカデミー助演男優賞を受賞している。(柴田)
< http://www.amazon.co.jp/exec/obidos/ASIN/B000063UW9/dgcrcom-22/
>
「愛と青春の旅だち」
●続き。それを伝えたら、そうですか、今日は何時までやっていますからと笑顔で言われ、家から一駅はあるのに、すっかり買う気に。ほんとに感じのいい人だったの。
うちのコーヒーメーカーは豆をひくところから自動でできる機種なのに、手入れの時間がもったいない気がして全然使っていなかった。久しぶりに豆をひく時の香りを楽しみたいというのも理由。
夕方、スーパーに行くついでに足を延ばし、再度ショップへ。と、彼女は忙しそうで声をかけられない。店長らしき人は他のお客さんに、コーヒー豆についての蘊蓄トークで忙しそう。説明聞きたかったな〜。続く。(hammer.mule)