カテゴリー: 本

2023年5月、流浪の編集部「すぎもと組」は、4冊目のテック・ジンとなる『カラフルなJavaScriptであそぼう : p5.js / Konva.js / NestJSのノウハウブック』をつくりました。

著者たちの意見で電子版のみの発行になりました。B5判・162ページでなかなかのボリュームなので、紙の本を出すと高くなりそうですが、技術書典オンラインの最低価格の500円で提供しています。
https://colorfuljs.zine.sugimototatsuo.com/

カラフルなJavaScriptであそぼう | すぎもと組 流浪のテック・ジン発行所「すぎもと組」の最新刊！ colorfuljs.zine.sugimototatsuo.com

技術書典オンラインマーケットで頒布しています。

カラフルなJavaScriptであそぼう p5.js/Konva.js/NestJSのノウハウブック：すぎもと組 『カラフルなJavaScriptであそぼう　p5.js / Konva.js / NestJSのノウハウブック』 【電子 techbookfest.org

「まえがき」より

『カラフルなJavaScriptであそぼう』をお求めいただき、ありがとうございます。本書は、さすらいのテック・ジン醸造所「すぎもと組」が発行するテック・ジンの4冊目になります。

本書の成り立ちは、これまで発表してきたテック・ジンこれまで発表したテック・ジンは、『ばぶでもわかるおぶざばぶる』、『超ビジュアル訳 ニーチェの詩』、『データビジュアリスト宣言』です。とはちょっと違います。これまではすべて、すぎもと組の主宰者が、本文の一部を書いたり組版したりと内容に深くコミットしていました。本書は、ネットワークデザインスタジオ（ネットワークデザインスタジオは、東京都立大学大学院システムデザイン研究科インダストリアルアート学域の研究室のひとつです。）の大学院生3名が主体的に制作したものです。3人それぞれの関心分野で書きながら、1冊のジンとしての統一感は出してほしいだけリクエストし、完成するのを見守りました。

メンバーが決めた共通テーマはJavaScriptで、いろいろなライブラリを紹介しています。JavaScriptによるビジュアル表現やアプリ開発に興味を持っている方におすすめします。中身をすこしのぞいてみましょう。PART 1はp5.js。クリエイティブコーディングで盛り上がっているライブラリですね。PART 2はKonva.js。Canvasで2Dお絵書きなどができるライブラリです。PART 3はNestJS。Node.jsのサーバーサイドフレームワークです。だんだんレベルが上がっていく構成になっているようですね。メンバーそれぞれの関心の方向性や性格が反映された内容になっているとおもいます。

はじめて執筆に挑戦したものなので、読みにくかったり、工夫の余地がのこっているとおもいますが、ご容赦ください。

それでは、どうぞお楽しみください。

目次

1. PART 1　p5.jsでジェネラティブアート表現を高めるコツ
   • CHAPTER 1　はじめに
   • CHAPTER 2　p5.jsとジェネラティブアート
   • CHAPTER 3　アート表現を高める3つのコツ
   • CHAPTER 4　実践：コツが活用された実例
   • CHAPTER 5　おわりに
2. PART 2　Konva.jsを使った写真デコサイトのつくり方
   • CHAPTER 1　はじめに
   • CHAPTER 2　Konva.jsとは
   • CHAPTER 3　Konva.jsを使ってみよう
   • CHAPTER 4　簡易写真デコレーションサイトを作ってみよう
   • CHAPTER 5　おわりに
3. PART 3　お手軽にアプリ開発ができるNestJSの始め方
   • CHAPTER 1　はじめに
   • CHAPTER 2　NestJSとは
   • CHAPTER 3　環境構築
   • CHAPTER 4　CRUD作成
   • CHAPTER 5　おわりに

著者によるレポート記事

3人の著者それぞれが、テック・ジン制作を振りかえった記事を公開しています。

はじめてのZineでクリエイティブコーティングのコード解説に挑戦 – ネットワークデザインスタジオのブログ 目次 目次 はじめに 担当したZineの内容について 表紙のデザイン さいごに はじめに こんにちは。アンです。最近研究室 blog.lab.sugimototatsuo.com

はじめてのZine作成 Konva.jsについて書いてみた – ネットワークデザインスタジオのブログ 目次 目次 はじめに なぜKonva.jsをハンズオン形式で紹介することにしたのか Zine執筆を振り返って おわりに は blog.lab.sugimototatsuo.com

はじめてのZine作成 NestJSでバックエンド開発に挑戦 – ネットワークデザインスタジオのブログ 目次 目次 はじめに NestJSを選んだ理由 取り組んでみて分かったこと 情報量はまだ多くない これからはRuby on blog.lab.sugimototatsuo.com

すぎもと組の既刊

すぎもと組の既刊もひきつづき頒布中です。こちらもどうぞよろしくお願いいたします。

すぎもと組 | 技術書典 杉本達應が主宰する奇妙なテック・ジンを発行するサークルです techbookfest.org

2022年1月25日、『Code as Creative Medium』の日本語版がビー・エヌ・エヌから発売されました。アートやデザインの分野でのプログラミング教育をテーマに、カリキュラムや教育方法を構築する参考となるための学習課題や教育者へのインタビューなどから構成されています。多くの学習課題や作品例を見ることができ、教育者の貴重な体験談を読むことができます。プログラミングの「教育」にフォーカスし、技法書ではないのでプログラミング言語のコードは登場しません。

http://www.bnn.co.jp/books/11411/

杉本は原書インタビューに寄稿し、共同翻訳者としてもこの本に関わりました。

日本語版発売を記念して、杉本の視点から本書を紹介します。

インタビューから刊行まで

原著者のテガ・ブレインさんとのZoomインタビューに協力したのは、2020年4月中旬のことでした。接続先のニューヨークはパンデミックの真っ最中。日本も緊急事態宣言のなか、新年度の授業をオンラインで行うための準備に追われている頃でした。すでに原書の制作は進んでいたようですが、今おなじ本をつくれば、コロナ禍への対応やリモート授業についての話題が入ったでしょう。

その翌年の2021年2月には原書が刊行され、さらに1年後の2022年1月に日本語版が刊行されました。かなり早く邦訳が出たのではないかとおもいます。

翻訳

ほかの翻訳者は、米田研一さんと澤村正樹さんです。米田さんは、クリエイティブコーダーです。澤村さんとは、『Generative Design』の日本語版でもご一緒しました。杉本は、第3章インタビューの翻訳を担当したため、自分のぎこちない英語を、さらにぎこちない日本語へと翻訳するという奇妙な経験をすることになりました。第1部、第2部の学習課題やエクササイズには、膨大な参照資料があるため、翻訳にあたった米田さんと澤村さんのお二人はたいへんな労力を注がれたこととおもいます。

原著者のゴラン・レヴィンさんとテガ・ブレインさんとは、データのやりとりで連絡をとりあうことがあり、親切に対応していただきました。感謝します。

日本語版オリジナルコンテンツ

ビー・エヌ・エヌ編集者の村田純一さんは、制作を進行しながら、日本語版のオリジナルコンテンツをあっという間につくりあげました。日本でこの分野の教育にあたられている方々です。五十嵐悠紀、鹿野護、久保田晃弘、小林茂、城一裕、高尾俊介、田所淳、玉城絵美、橋田朋子、古堅真彦、米田研一、脇田玲。

教育者たちの言葉

本書でもっとも印象に残るのは、第3部インタビューの教育者たちの言葉です。所属している組織によって状況は違いますが、みな口を同じくして学生たちの恐怖心を取り除くことの大切さを語っています。また教師が抱える不安も吐露されています。「教室運営のテクニック」のセクションには、彼らがあみだした授業を円滑に進めるための工夫がたくさん紹介されています。わたしも自分の授業でいくつか取り入れています。オンラインコースでもいろんなことが学べる現在、教育者にはたんなる知識伝達者以上の役割が求められているでしょう。

学生は、どんな宿題よりも、あなたの優しさをずっと覚えているでしょう。
──ホリー・オードウェイ

学習課題の起源

本書には「学習課題の起源」というセクションがあり、ぜひ注目してほしいです。英語圏に偏ってはいますが、アート・デザイン系のプログラミング教育の系譜がたどられています。どちらかと言えば標準化に向かう理工系のカリキュラムとは異なり、アート・デザイン系の課題には、前の世代の教育者からの影響が見られたり、創作者としての発想をベースにしていたりと、やや属人的な性質がありバリエーションも豊かです。

このセクションでは、そうした学習課題やシラバスが消え去っていることについて問題提起しています。課題がもとになって素敵な作品ができることはよくあります。偉大な作品は美術館などでアーカイブされます。しかし一方で、それを生み出した教育内容や課題は残っておらず、残そうとする努力も払われていません。インターネット上のコンテンツも、年月がたてばたやすく失われてしまいます。たった数十年前のことすらたどれないのは、この分野にとっては大きな損失です。本書は紙に定着された一つの記録として貴重ですが、これ以外の記録がなかったことになってはいけません。わたしたち教育者ひとりひとりが活動内容を保存しておく必要があることを教えられました。

英語版との違い

めずらしい横長の判型は、日本語版でも踏襲されています（普通の本よりもコストがかかるそうです）。なお原書のレイアウトは、スクリプトで生成されていて、MarkDownで書かれた原稿から印刷用のデータを生成しています。

ただ日本語版のカバーは、英語版とちょっと違います。原書をお持ちのかたは、ぜひ見比べてみてください。カバーのイメージは、アルゼンチン出身のアーティストManolo Gamboa Naonの作品です。表紙は英語版と同じように見えますが、微妙に違うバージョンが使われています。裏表紙には、英語版とは異なる作品が使われています。今後、別の言語版が登場したら、同じように少しずつ表紙が変わっていくかもしれません。

関連リンク

Processing開発者のケイシー・リースによる序文が公開されています。

https://note.com/bnn_mag/n/n9d5ab560ee1a

本書のサポートサイトには、本文中に登場するすべてのURLリンクが掲載されています。これを見るだけでも膨大な資料にあたっていることがわかります。整理し公開していただいた村田さんの心意気に感激です。

http://www.bnn.co.jp/specially/cacm-jp/

エクササイズの作例が掲載されているGitHubリポジトリです。

https://github.com/CodeAsCreativeMedium/exercises

書誌情報

ゴラン・レヴィン、テガ・ブレイン著、澤村正樹・杉本達應・米田研一訳，2022『Code as Creative Medium［コード・アズ・クリエイティブ・メディウム］―創造的なプログラミング教育のための実践ガイドブック』ビー・エヌ・エヌ．
編集：村田純一／デザイン：白川桃子

Amazonページ

BNN直販ページ

https://bnn.thebase.in/items/57240186

版元の朝倉書店からご恵投いただきました。

『データビジュアライゼーション』は、Andy KirkのData Visualization第2版の邦訳です。本書は、特定のツールに依存せず、データ可視化における技術やプロセスに重点を置いています。約270ページ、フルカラーです。
https://www.asakura.co.jp/books/isbn/978-4-254-10293-2/

Andy Kirkはイギリスのデータ可視化の実務家でトレーナーです。彼のサイトは、データ可視化プロジェクトの好事例を定期的に紹介していて参考になります。
https://www.visualisingdata.com/

以前、彼のブログ投稿を翻訳して紹介したことがあります。

2016年前半のビジュアライゼーション10選
https://lab.sugimototatsuo.com/2016/08/10-significant-visualisation-developments-january-june-2016/

本書の特徴を3つとりあげます。

ひとつ目は、多くのチャートを分類したカタログ（第6章）があることです。棒グラフから方眼地図まで49種のチャートを5つのカテゴリで紹介しています。あらゆるチャートを網羅しているわけではありませんが、これを眺めるだけでいろんなアイディアが浮かんできます。

ふたつ目は、データ可視化プロジェクトにおける要綱作成、データ処理、編集的思考をまとめていることです（第2部）。この内容は、とくにメディアとしてデータ可視化を公開する方にとって力強い指針となりそうです。

みっつ目は、ページのところどころに、数多くの実務家や研究者の言葉が掲載されているところです。短いテキストなので警句集のように読むこともできるでしょう。人名で検索すると、さらに背景情報を得られます。ひとつだけ紹介しましょう。

「すべてに理由がなければならない」。
グラフィックデザイナーとして私が学んだ原則はデータ可視化にも当てはまります。
本質的に、すべてが合理的に説明され、なぜデザイン／ビジュアライゼーションでそうなっているのか、そうなっていないのかを示すロジックがなければなりません。

Stefanie Posavec

【目次】
日本語版によせて
はじめに
謝辞
著者紹介

第I部 基礎
1章 データ可視化の定義
データ可視化とは何か/相違と特徴/まとめ
2章 可視化デザインプロセス
デザインプロセス/デザイン原則/まとめ

第II部 背後の思考
3章 要綱を作成する
プロジェクトの文脈を定義する/プロジェクトのビジョンを確立する/まとめ
4章 データの処理
データ取得/データ検査/データ変換/データ探索/まとめ
5章 編集的思考の確立
編集的思考とは何か/編集的思考の影響/まとめ

第III部 デザインソリューションの開発
6章 データ表現
ビジュアル・エンコーディングとチャート/影響要因と考慮点/まとめ
7章 インタラクティブ機能
インタラクティブな諸機能/影響要因と考慮点/まとめ
8章 注釈
注釈機能/影響要因と考慮点/まとめ
9章 色
色モデルの概要/色のフィーチャー/影響要因と考慮点/まとめ
10章 構成
構成のフィーチャー/影響要因と考慮点/まとめ

エピローグ
参考文献
訳者あとがき
索引

Kirk, Andy，黒川利明訳，2021，『データビジュアライゼーション ―データ駆動型デザインガイド―』朝倉書店．[ISBN: 9784254102932] https://amzn.to/3eZTaaX

このたびご縁がありまして、書籍『Code as Creative Medium』にインタビューが掲載されました。

本書は、コンピュテーショナル・アート・デザインの「教育」に焦点を当てた本です。（１）研究課題、（２）演習問題、（３）インタビューの3部で構成されています。多彩な作品事例の写真が掲載されていて、眺めて楽しめるだけでなく、この領域で教えている人にとっては膨大なリソースの宝庫になっています。

クリエイティブ・コーディングについて特定の技術や技法を扱う書籍は多数出版されています。しかし教育方法に絞った本は初めてではないでしょうか。こうしたコンセプトの本が登場したのは、世界中のアート・デザイン教育の現場で、コンピュテーショナルな演習やカリキュラムが一般化したことを反映しているのでしょう。多くのノウハウを共有することで、この分野の指導者を応援してくれます。本書の著者2人とコントリビューター16人は、著名なアーティストばかり。Golan Levin, Tega Brain, Taeyoon Choi, Zachary Lieberman, Lauren Lee McCarthy, Alison Parrish, Casey Reas, Daniel Shiffman, Jer Thorpなど……。そのなかにわたしも入っているのは単純に驚きですが、とてもうれしいです。

インタビューの部では、下記のトピックについて多くの人が回答しています。それぞれの回答を見るだけで相当勉強になりそうです。

– アーティストやデザイナーにプログラミングを教えること
– 双峰分布クラス（経験者と初心者が混合しているクラス）
– 視点の促し
– 初日
– お気に入りの課題
– うまくいかなかったとき
– 心に残った反応
– 新人教師へのアドバイス

書誌情報
Golan Levin and Tega Brain, 2021, Code as Creative Medium: A Handbook for Computational Art and Design, MIT Press.
https://mitpress.mit.edu/books/code-creative-medium

このたび、すぎもと組では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

ぜひお求めください！

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