『超ビジュアル訳 ニーチェの言葉』をつくりました

このたび、すぎもと組では2冊目の技術同人誌『超ビジュアル訳 ニーチェの言葉:p5.jsでうたう「深夜の鐘の歌」』をつくりました。

特設ウェブサイトはこちら。

https://visualized-nietzsche.tumblr.com/

技術書典9で頒布します。

https://techbookfest.org/product/5727504515989504

この本の特徴

ずばり!
・ニーズのない本です(明日の仕事に役立ちません)
・右綴じ・縦書きの本です
・ニーチェの入門になる本です
・p5.jsをすこし学べる本です
・紙で読んでいただきたい本です(電子版はおまけです)
……ようはヘンな本です。

「超ビジュアル訳」って何?

超ビジュアル訳とは、テキストをビジュアルに翻訳すること。本書では、ニーチェの詩の一行一行を解釈し、想像したイメージをつくりあげました。どのイメージも文字を構成したタイポグラフィ作品です。

今回も編者のわたしの呼びかけに応じた学生といっしょに作りました。表紙、本文のイメージ、テキストは、ほとんど学生が制作しました。わたしはブックデザインに力をいれました。

目次

まえがき

第一部 作品篇
  深夜の鐘の歌
  ひとつ!
  ふたつ!
  みっつ!
  よっつ!
  いつつ!
  むっつ!
  ななつ!
  やっつ!
  ここのつ!
  とお!
  じゅういち!
  じゅうに!

第二部 解説篇
  深夜の鐘の歌
  「深夜の鐘の歌」解説

第三部 技法篇
  p5.jsとは
  作品概要とコード解説

あとがき

Zarathustra’s Rundgesang
ニーチェ略歴
ブックガイド
編著者かく語りき

技術書典すごい!

さて、前回の技術書典8は急遽オンライン開催になりましたが、今回ははじめからオンラインイベントとして開催されます。
イベント運営の目玉として、作り手にも読み手にもやさしい変更がたくさんありました。出展料が無料、販売手数料ほとんどの場合無料、紙の本の送料も無料。前回、主催者にはおおきな損失があったはずなのに、こんなすぐに新機軸が発表されるなんてびっくりです。これでイベントが成り立つのか心配ですが、きっと大丈夫なのでしょう。ありがたくこの場を使わせていただきます。

既刊もどうぞ

すぎもと組の既刊『ばぶでもわかるおぶざばぶる D3.jsとObservableではじめるデータビジュアライゼーション超入門』もひきつづき頒布します。こちらもどうぞよろしくお願いします。特設ウェブサイトはこちら。

https://observable-babies.tumblr.com/

技術書典9のページはこちら。

https://techbookfest.org/product/5174238650564608

技術書典9のp5.js本

技術書典9にでているp5.js関連本は、レオナさんの2冊が注目です!

できるだけ毎日続けるためのデイリーコーディング戦略 [第2版]
https://techbookfest.org/product/6000948635762688

2時間でクリエイティブコーダーになる本 p5.jsではじめるアートプログラミング
https://techbookfest.org/product/5666883730669568

ぜひお求めください!

ニーチェ本は、あまり世の中に似たものがないヘンな本です。読んでくれる人がどれほどいらっしゃるか想像がつきません。興味をもたれた方はぜひお求めください。印刷費をたっぷりかけて紙の本をしっかり作りました。でも赤字覚悟でお安くしています。
お読みになった方から感想をいただけることをたのしみにしています。

技術同人誌『ばぶでもわかるおぶざばぶる』をつくりました

このたび、すぎもと組は技術同人誌『ばぶでもわかるおぶざばぶる』をつくりました。すぎもと組とは、わたしが授業連絡などでつかっているSlackのワークスペース名です。決してあやしい団体ではありません。

すぎもと組編,2020,『ばぶでもわかるおぶざばぶる : D3.jsとObservableではじめるデータビジュアライゼーション』すぎもと組.

技術書典応援祭(オンライン開催、2020年3月日−4月5日)

つくった経緯

この同人誌は、「技術書典8」にはじめて出展する予定でした。新型コロナウイルス感染症のため開催中止となり、代わりに開催されている技術書典応援祭に出展しています。

技術書典は、来場者1万人規模の大きな技術同人誌の即売会イベントです。2018年秋、わたしは出張の合間に技術書典5に参加者として訪れました。開場前からの長蛇の列に、身動きがとれないほどの会場内の混雑ぶりに驚きながら、こんな場に参加するなら、出展者として参加したほうが楽しいだろう。そう思いましたが、地方在住者(当時は佐賀在住)としては、東京でしか開催されない技術書典への出展は現実的ではありませんでした。もちろん地方から参加しているサークルも多数あるとはおもいますが。

それから1年──。2019年の秋、わたしは東京に引っ越していました(!)。メールマガジンで技術書典8サークル参加申込みの締切が迫っていることを知り、出展することを思いついたのです。締切前日(2019年11月30日)に、いっしょに同人誌作ってみないかとデータ可視化の演習授業の受講生に呼びかけました。すると数人の学生が手をあげたので、翌日ぎりぎりに申し込みました。12月15日、当選発表があり、参加費を支払って制作をはじめました。

2月中旬にできあがったので、制作期間は約3か月です。ただし実質はもっと短い短期集中で作りました。学生は第2章の作例を担当し、わたしは前半の第1章を担当しました。第2章の内容や、タイトル、カバーデザイン、イラストなどは、どれも学生の発案です。

目次

はじめに
第I部 入門編
第1章 D3.js をはじめよう
 1.1 D3.jsとは
 1.2 はじめてのD3
 1.3 D3 vs.jQuery vs. JavaScript
第2章 Observable 入門
 2.1 Observableとは
 2.2 ノートブックの編集
第3章 Observable の JavaScript
第4章 ノートブック・ギャラリー
第II部 実践編
第5章 シンプルな表
 5.1 ここで作れる表
 5.2 2次元配列の場合
 5.3 オブジェクトの配列の場合
第6章 ロリポップチャート
 6.1 ここで作れるグラフ
 6.2 データの準備
 6.3 チャートの作成
第7章 折れ線グラフ
 7.1 ここで作れるグラフ
 7.2 データの準備
 7.3 チャートの作成準備
 7.4 チャートの作成
第8章 ドーナツチャート
 8.1 ここで作れるグラフ
 8.2 データの準備
 8.3 チャートの作成
第9章 箱ひげ図
 9.1 ここで作れるグラフ
 9.2 データの準備
 9.3 チャートの作成
第10章 ヒートマップ
 10.1 ここで作れるグラフ
 10.2 データの準備
 10.3 チャートの作成
第11章 地図
 11.1 ここで作れる地図
 11.2 データの準備
 11.3 地図の作成
著者紹介
おわりに

誰のための本か

この本で紹介しているのは、JavaScriptのライブラリD3.jsと、JavaScriptの共有ノートブックWebサービスのObservableです。データビジュアライゼーション超入門と謳ったとおり、はじめてデータからビジュアルをつくってみたい初学者のためのガイドブックです。そのため本書で取り扱っているのは、棒グラフなどの基本的なチャートです。複雑なデータビジュアライゼーションではありませんが、データセット(CSVやJSONなど)があれば、ちょっとしたスケッチを描くように可視化できるので、ぜひ体験していただきたいです。

Image from Gyazo
わたしのObservableノートブックは200個を超えています。

デザイナーの方でも、エンジニアの方でも、データの可視化にすこしでも興味のある方は、ぜひ読んでいただきたいです。また、学生やお子さんも、プログラミングの入門として気軽に読んでいただけます。

感想は、ハッシュタグ #ばぶでもわかるおぶざばぶる #ばぶ本 でお待ちしています。続編の希望があれば、動的なデータの取り扱いや、ボタンなどをつかったインタラクションなどについても書いてみたいです。

同人誌づくりは楽しい!

はじめて技術同人誌をつくってみて、よかったと思ったことがいくつかありました。

第一に、誰かといっしょにつくる楽しさがあります。今回は、学生といっしょに作ったことでなんとかできあがりました。ひとりでつくっていたらモチベーションを維持できず、途中で頓挫したかもしれません。

第二に、テーマとなる技術の勉強になります。執筆した学生は、「文章で伝えるって難しいですね」とつぶやいていました。何となく理解しているつもりのことでも、伝えるために文章に起こすと、意外と分かっていなかったりします。だれかに教えるためには、まず書き手が学ぶ必要があるんですね。わたしも内容に間違いがないように、D3.jsのソースコードを確認することがあり、大いに勉強になりました。

第三に、出版物の理解が深まります。同人誌でも商業書籍でも、1冊の本が生まれるまでには、企画、執筆、編集、デザイン、組版、印刷、製本、営業(宣伝)、流通、販売など、数多くのプロセスがあります。同人誌を作ることは、そのプロセス全部に関われます。世の中に流通している本にも、ひとつひとつ制作のストーリーがあることに思いをはせると、本が生まれることへの感謝の気持ちが生まれました。

今回、同人誌最大の醍醐味である対面販売の機会がなくなったのは残念ですが、同人誌づくりは楽しかったです。技術書典に関心のある人は、ぜひ何か作ってみてはいかがでしょうか。複数人で書くのが気楽でよいとおもいます。丸ごと1冊書ける人でも、デザインや校正など他者の協力をもらいながら作ることを強くおすすめします。その方が完成度も上がりますし、なによりつくる過程を楽しめますから。

制作プロセスについては、別途エントリーをあげる予定です。

『Dear Data』日常生活のデータが綴られたビジュアルな文通

2016年の書きかけの書評。ブログにアップしていたとおもっていたけど、アップしていなかったようなので、ここにあげておく。


Lupi, Giorgia, and Stefanie Posavec. Dear data

Dear Data
Dear Data

posted with amazlet at 16.11.11
Giorgia Lupi Stefanie Posavec
Princeton Architectural Press
売り上げランキング: 30,680

↑米国版

Dear Data
Dear Data

posted with amazlet at 16.11.11

売り上げランキング: 1,992,209

↑英国版

本書は、ニューヨークとロンドンに住む同い年の女性デザイナー、ジョージア・ルピとステファニー・ポザベックのふたりが1年間文通した記録だ。葉書の内容は、文字で書かれたメッセージではなくデータをあらわすグラフィック。52週にわたって綴られた量に圧倒されるだけでなく、毎週あらたな表現にチャレンジしていることに驚かされる。本書のさいごに「そんなに難しくないよ」と、つくる手順が紹介されているが、しっかり取り組むとこれだけで1週間が終わってしまいそうだ。

  1. データ収集家として世界を見よう
  2. 問いからはじめよう
  3. データを集めよう
  4. データをじっくり見よう
  5. まとめて分類分けしよう
  6. メイン・ストーリーを見つけよう
  7. ビジュアルをひらめいて、自分らしいボキャブラリーをつくろう
  8. 最初のアイディアでスケッチして実験しよう
  9. 最終版のスケッチを描こう
  10. 凡例を描こう
  11. 最後に投函しよう

交わされた葉書はすべてWebサイトで見ることができるが、細部までじっくり眺めることができる本をおすすめする。

本書は、ジョージアとステファニーが、日常生活の細かなことを相手に見せながら仲良くなった物語です。といってもカフェやバー、ソーシャルメディアでおしゃべりしたのではありません。その代わり、時代遅れの通信に変わった工夫をほどこしました。1年のあいだ毎週ポストカードを送りあい、その週の出来事を相手に説明するのです。出来事を「書く」のではなく「描く」ことにしました。すべての出来事は描かずに毎週テーマを決めました。

毎週月曜日、その週の自分に関するデータを集めるテーマを決めます。文句を言う頻度、嫉妬にかられる回数、いつだれの身体と接触するか、聴こえてくる音。葉書サイズの紙に、こうしたデータをあらわすスケッチを描き、ステファニーは「ポストボックス」(英国)に、ジョージアは「メールボックス」(米国)に投函しました。

[……]私たちは「ビッグデータ」の時代に生きていると言われています。そこではアルゴリズムと計算が普遍的な問いへの新たな鍵であり、無数のアプリケーションが私たちのデータを発見し、収集し、ビジュアライズすることで、人間を超人にしようとしてくれます。私たちは、もっとゆっくり、よりアナログな方法でデータに近づくことにしました。「Dear Data」は、自分を定量化するプロジェクトではなく、「パーソナル・ドキュメンタリー」だと考えています。これは微妙だけれど決定的な違いです。ただ効率化するためにデータを使うのではなく、より人間的になり、他者と深いレベルでつながるために、データを使うことができると思うのです。

(はじめに)

二人はビッグデータ時代の功利的なデータ活用が盛んに広まっている潮流に抗い、あえてデータをテーマにしたパーソナルなドキュメンタリーに取り組んでいることがわかる。もっとも彼女たち自身はデザイナーとして、ふだん商業的なプロジェクトに携わっているはずだ。そうした合間に、みずからの好奇心とスキルをいかしながら個人的な表現活動を続けている。そのことに表現者としての矜持を感じた。

書誌情報

Lupi, Giorgia, and Stefanie Posavec. 2016. Dear data. New York : Princeton Architectural Press.
Lupi, Giorgia, and Stefanie Posavec. 2016. Dear data. London: Particular Books.

目次

  • 序文 Maria Popova(米国版のみ)
  • はじめに
  • 本文

リンク

ビデオ

Eyeo 2015 – Giorgia Lupi and Stefanie Posavec from Eyeo Festival // INSTINT on Vimeo.

『メディア技術史―デジタル社会の系譜と行方』

2013年10月、飯田豊(編著)『メディア技術史―デジタル社会の系譜と行方』(北樹出版、2013年)が発行されました。

メディア技術史―デジタル社会の系譜と行方
飯田 豊 大久保 遼 木暮 祐一 柴野 京子 杉本 達應 谷口 文和 溝尻 真也 和田 敬
北樹出版
売り上げランキング: 16,931

本書は、書物や写真、映画などさまざまなメディア技術の成り立ちを学ぶためのテキストです。
杉本は、第8章(コンピュータ)、第9章(インターネット)、カバーデザインを担当しました。
目次の下に、立ち読み風連続ツイートを掲載しています。

『メディア技術史―デジタル社会の系譜と行方』
目次

第1章 技術としての書物―紙の本vs電子本への古くて新しい回答(柴野京子)
1.デジタルとアナログのかなしい対立
2.書物の技術を考える
3.活版印刷の発明と革命
4.グーテンベルクの銀河系—活字人間とデジタル人間のあいだで

第2章  写真はどこにあるのか―イメージを複製するテクノロジー(大久保遼)
1.カメラ・オブスキュラと〈写真〉の夢
2.ダゲレオタイプと鏡としての写真
3.カロタイプと複製技術としての写真
4.マジック・ランタンと語りのなかの写真
5.写真製版とマスメディアとしての写真
6.写真の現在へ—デジタル化と写真コミュニケーション

第3章  映画の歴史を巻き戻す―現代のスクリーンから映画の幼年時代へ(大久保遼)
1.遍在するスクリーン
2.マジック・ランタンとスクリーン・プラクティス
3.映像が動き始める
4.パフォーマンスのなかのシネマトグラフ
5.初期映画から現代のスクリーンへ

第4章  音楽にとっての音響技術―歌声の主はどこにいるのか(谷口文和)
1.ボーカロイドから考える音の技術とメディア
2.録音技術から録音メディアへ
3.レコード音楽のリアリティ
4.ボーカロイドの居場所

第5章  声を伝える/技術を楽しむ―電話・ラジオのメディア史(溝尻真也)
1.メディア技術の楽しみ方をめぐる歴史
2.メディアとしての電話の生成と変容
3.ラジオアマチュアたちの戦前/戦後史
4.新しいメディアの楽しみ方に向けて

第6章 テレビジョンの初期衝動 ―「遠く(tele)を視ること(vision)」の技術史(飯田豊)
1.「テレビジョン」の源流を訪ねて
2.二つの技術方式
3.「テレビジョン」の未来像
4.「テレビジョン」から「テレビ」へ
5.テレビの21世紀

第7章  ローカルメディアの技術変容―ミニFMという実践を補助線に(和田敬)
1.ローカルメディアとは何か
2.マスメディア型のローカルメディア
3.パーソナルネットワーキング型のローカルメディア
4.ハイブリッド型の「ミニFM」—関西のネットワークを事例に
5.他者関係を組み替えてゆくローカルメディアの可能性

第8章  文化としてのコンピュータ―その「柔軟性」はどこからきたのか(杉本達應)
1.コンピュータの多様な用途
2.コンピュータの歴史をとらえる支店
3.「超人」マシンの夢から、パーソナルコンピュータへ
4.コンピュータユーザの身体性—インタフェースの変遷
5.コンピュータの「柔軟性」はどうなるのか

第9章  開かれたネットワーク―インターネットをつくったのは誰か(杉本達應)
1.コンピュータネットワークの変遷
2.インターネットの自由な文化〈フリーカルチャー〉
3.ユーザとインターネットの関係を再考する
4.インターネットの豊かさの行方

第10章  手のひらの情報革命―携帯からケータイへ(木暮祐一、飯田豊)
1.場所を問わず、より多くの通信をさばけるように
2.携帯電話からケータイへ—端末のマルチメディア化
3.ケータイを学ぶ/ケータイから学ぶ

第11章  誰のための技術史?―アマチュアリズムの行方(飯田豊)
1.メディアの黎明期=「アマチュア」の時代
2.「アマチュア」の困難—専門家と非専門家の「乖離」
3.技術思想としての「アマチュアリズム」
4.再び「アマチュア」の時代?—インターネット上の創作活動をめぐって