テック・ジン『まるっとぷろっと!』をつくりました

流浪のテック・ジン編集室「すぎもと組」は、このたび新刊『まるっとぷろっと!:Spotify API・Observable Plot・D3.jsでつくる歌姫のチャートレシピ』を発行します。2024年5月開催の「技術書典16」に出展します。

まるっとぷろっと! Spotify API・Plot・D3.jsでつくる歌姫チャートレシピ:すぎもと組 ●この本について データ可視化のプロトタイピングに最適な共有ノートブックサービス「Observable」と、みじかいコー techbookfest.org

どんな本?

本書が扱うのは、JavaScriptやMarkdownが書けるノートブック共有サービスのObservable(オブザーバブル)と、JavaScriptライブラリのObservable Plot(オブザーバブル・プロット)です。

すぎもと組はObservableを扱ったテック・ジンをこれまでも発表してきました。本書は、『ばぶでもわかるおぶざばぶる』(2020)、『データビジュアリスト宣言』(2021)の続編にあたります。既刊と異なり、D3.jsの解説を省略し、Plotの解説を中心にしました。D3.jsの基本については、ひきつづき『データビジュアリスト宣言』をご参照ください。

『まるっとぷろっと!』誌面より

Observable Plotって何?

おそらく多くの方が、Observable Plotをはじめて聞いたとおもいます。Plotは、みじかいコードで様々なチャートを生成することができるJavaScriptのライブラリです。チャートを作るライブラリは、Chart.jsなど、すでにたくさん存在していますが、Plotは、それらよりも多くの機能と大きなカスタマイズ範囲を提供してくれます。

次の散布図は、Plotで作りました。オリンピック選手を性別で色分けした、体重と身長の散布図です。これは、その下の4行のコードで作ることができます。とてもお手軽ですよね。

Plotで作成した散布図
Plot.plot({
  grid: true,
  marks: [Plot.dot(olympians, { x: "weight", y: "height", stroke: "sex" })]
})

この散布図をもとに、Plotのコードに手を入れていくことで、夜空のようなイメージを生成することもできます。Plotのチャートは標準的なものだけでなく、カスタマイズや拡張が柔軟であることが、この例からおわかりいただけるかとおもいます。

Plotで作成した散布図のアレンジ版

お気づきかもしれませんが、このページ冒頭の本書の表紙画像の背景パターンは、じつはPlotで作った散布図をつかっています。

このほか、ダッシュボードのための静的サイトジェネレーターObservable Framework(オブザーバブル・フレームワーク)もご紹介しています。

制作プロセス

2023年度後期に、東京都立大学システムデザイン学部インダストリアルアート学科で、データ可視化のデザインをテーマにした演習授業を開講しました。本書は、その授業の受講生有志3名と一緒につくりました。2024年2月に企画を立てはじめ、十数回のミーティングを重ねて完成しました。執筆した学生はみな優秀で、どんどん書いてくれました。私はなかなか原稿が進まず、チームの足を引っ張ってしまいました。

Plotはサンプルが豊富に提供されているので、何となく雰囲気で分かっていたつもりでしたが、本書で説明することで、あらためて理解がすすみました。今回は基本しか紹介していませんが、Plotのメソッドは数多く、リファレンスをつくるだけで分厚い一冊になりそうです。

Plotのサンプル集は、種類ごとに分担して書きました。サンプルのデータは、昭和・平成・令和の歌姫としました。Spotify APIで取得した歌姫のデータを、Plotでいろいろなチャートに仕上げてみています。

Plotで世界地図も作れます!

また、授業で制作したデータ可視化記事の制作プロセスを解説する記事も書きました。テーマは、ノーベル文学賞、紅白歌合戦、CMキャラクターと多彩です。私も、以前試作していた「カラオケ諸島」を紹介する記事を書きました。

Plotで仮想の地図も作れます!

組版は、Vivliostyleを使いました。3年ぶりに触ったところ、テーマファイルの作り方が変わっていました。が、新たなテーマ作りには踏み込まず、以前のテーマをベースにして作成しました。終盤になって、判型のミスに気がついてあわてました(以前もおなじミスをしていました・笑。すっかり忘れていました)。

徒然研究室(仮称)さんの特別寄稿!

本書の目玉は、徒然研究室(仮称)さんによる特別寄稿「音楽サブスク時代の”文化的雑食性”をデータ可視化してみる」を収録していることです。徒然研究室(仮称)さんは、ポップカルチャーや社会現象のデータ分析・可視化を通じて、深い考察を多数発表されています。分析には、PythonやD3.jsを活用されているそうです。

特別寄稿の扉ページ

まだ本書の内容が固まっていない段階でしたが、ご寄稿をお願いしたところ,ご快諾いただきました。ありがとうございます! 徒然研究室(仮称)さんのコラムを読むと、公開されているデータを分析し、意外なことが発見する醍醐味を味わえます。

本書は、プログラミング技術書だけでなく「読み物」としてもお楽しみいただけます。

こちら徒然研究室(仮称)|note 徒然なるままに、オープンデータとプログラミングで社会と人間の不思議を可視化する仮想研究室です。あやしうこそものぐるほしけれ note.com

制作の感想

ここからは、共著者の山本さん、長久保さん、魚田さんによる、本書制作の感想を紹介します。

●制作の感想(山本さん)

折れ線グラフ・箱ひげ図・ノーベル賞分析の記事を担当しました、山本晴菜です。今回、杉本先生と初めて本を制作し、新しい経験ばかりでとても楽しく取り組むことができました。

本書の中で私は、Observable Plotを使った折れ線グラフと箱ひげ図の作成方法について解説しています。また、授業で制作したD3.jsを用いてノーベル文学賞が異なる言語圏にどのような影響を与えているかを分析した記事もまとめました。

チャート作成では、昭和・平成・令和それぞれの時代の歌姫についての分析を行いました。このテーマを決めるまでには紆余曲折がありましたが、世代を超えて多くの人が楽しめる内容を目指しました。

ノーベル文学賞の記事では、制作時の試行錯誤を振り返りながら執筆しました。どの部分を記事にするかを選ぶのは難しかったですが、自分の思考過程を再確認する良い機会にもなり、新たな発見も多くありました。 ぜひ、手に取ってご覧いただければ嬉しいです。

●制作の感想(長久保さん)

2度目の技術書典!

はじめまして。紅白歌合戦の記事などを書いた長久保有香です。杉本先生と本を作るのは、今回で2度目になります。前回が楽しかったので、今回も参加しました。1人でイベントに本を出展しようとすると、作業量的にも費用的にもなかなか大変だと思うので、このような機会を設けてくれた先生と一緒に作ってくれた仲間には感謝しています。

技術書としても読み物としても充実!

前回の『もじとおどる』は作品集のようなものでしたが、今回の『まるっとぷろっと!』は技術解説に加え、メンバーそれぞれのコラムも入っているので、技術書としても読み物としても充実した本になりました。

第2部のPlotサンプル集では、基本的なチャートの描き方が解説されているので、初心者でも簡単にObservable Plotを始めることができます。

また、特別寄稿として徒然研究室(仮称)さんにコラムを書いていただきました(嬉しい! ありがとうございます!)。今の音楽サブスク時代だからこそ読みたい内容になっています。音楽が好きな人必見です!

Spotify APIも!

今回、チャートの描き方だけでなくSpotify APIの使い方についても記載しています。

昭和・平成・令和の歌姫として、松田聖子・椎名林檎・Adoをチャートで可視化してみると、アーティストのそれぞれの特徴などが読み取れ面白かったです。思ったより簡単に取得できたので、他のアーティストでも試してみたいと思いました。

たくさんの人に届いてほしい!

前回の技術書典で売り子をしていて、先輩方が作った『データビジュアリスト宣言』がたくさん売れていたのを見ていたので、その続刊となる『まるっとぷろっと!』もたくさんの人に読んでもらえる本になるよう頑張って作りました。この本を機にデータビジュアライゼーションをする人が増えてくれたら嬉しいです。ぜひお手にとってみてください。

●制作の感想(魚田さん)

はじめまして、魚田真之介と申します。『まるっとぷろっと!』のチャート解説では「ヒートマップ」、「樹形図」、「レーダーチャート」を担当しました。あと、「2023年を代表する広告キャラクターは誰だ!?」も執筆しました。

すぎもと組の同人誌制作には関わるのは2回目です。ただ、前回は、すでにある作品をまとめた作品集だったこともあり、コンテンツをつくるというよりも、いかにまとめるかといった作業中心でした。今回は以前制作した記事に加えて、可視化方法の解説文を書くということで、前回とはまた違った面白さがありました。ただ、本格的に解説記事を書くのは初めてで、執筆のコツをつかむことはついぞ最後までできませんでした。この部分はまだまだ経験が必要ですね。

『まるっとぷろっと!』そのものに目を向けると、ObservableとD3.jsの解説書という点では、『データビジュアリスト宣言』『ばぶでもわかるおぶざばぶる』の弟分になると思いますが、その内容は負けず劣らず、充実したものではないでしょうか。データ取得やチャート作成の手順を詳細に示していることに加えて、これを使うとより便利だよといった機能も盛り込んでいます。データを可視化したい!といったときには、そばにおいていただくと、スムーズにチャートができあがるんじゃないかと思います。

解説の後には音楽、文学、アニメ・マンガなど、様々なカルチャーを取り扱った記事の制作レポートがあります。Observable上で公開している記事の制作過程を振り返ると、結構頑張っていたんだなと感じました。そんな分析記事もぜひご覧ください!

ここまででも十分すぎるボリュームですが、最後には徒然研究室(仮称)さんの記事もあります。原稿チェックの際に、読ませていただいたのですが、チャートや文章の表現にはこれがプロかと感じました。 繰り返しになりますが、『まるっとぷろっと!』はお値段以上のボリュームとなっています。Observable上のノートブックとともにお楽しみいただければ幸いです。

目次

本書の目次は、以下の通りです。

はじめに
第1部 導入
 Observable
 Observable Plot
 Observable Framework
第2部 Plotサンプル集
 Spotify APIで歌姫データの準備
 棒グラフ
 折れ線グラフ
 箱ひげ図
 散布図
 ヒートマップ
 樹形図
 レーダーチャート
 ビースウォーム
 地図
第3部 制作レポート
 ノーベル文学賞作品が異なる言語圏でどのように受け入れられているか?
 紅白歌合戦のバーチャートレースを作ろうとしたら…
 2023年を代表する広告キャラクターは誰だ!?
 番外編:カラオケ諸島をつくろう
特別寄稿 音楽サブスク時代の”文化的雑食性”をデータ可視化してみる
執筆者
おわりに

既刊もよろしくお願いします!

『データビジュアリスト宣言』もひきつづき頒布しています。

https://note.com/embed/notes/ndcd5f5209750

『ばぶでもわかるおぶざばぶる』は電子版を無料化しました。紙の本はのこりわずかです。

https://note.com/embed/notes/n0dd991a3a0c4

このほかにもありますよ。

すぎもと組のテック・ジン一覧

技術書典の「すぎもと組」のサークルページをご覧ください。

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

最後までお読みいただき、ありがとうございました。

Visualized Nietzche at MozFest 2022

In March 2020, the Sugimotogumi, our zine publishing group was presented our zine “Visualized Nietzsche” at #MozFest Virtual Zine Exhibition.

This zine is an excerpted version of Part I, with notes in English.

https://schedule.mozillafestival.org/session/REZDJD-1

Zine cover

MozFest Zine Fair!
https://schedule.mozillafestival.org/session/GTVWQG-1

I was invited by @kiwakosakamoto, whom I met at SFPC in Yamaguchi.

大学1年生がはじめてつくる手書きのZine 2021年版

昨年度に引き続き、大学1年生対象にZine制作の科目を実施しました。

自分の関心でテーマを決めて、すべて手書きのZineをひとり1冊つくりました。2021年度も新型コロナウイルス感染症の影響で、オンライン授業中心で実施しました。序盤数回と最終回だけは対面でできたので、最終回に集合写真が撮れました。

テーマも内容もクオリティの高い成果物ができました。立ち読みサイトも公開しています。ぜひご覧ください!

ZINESTAND 2021 sugimototatsuo.github.io

2021年度前期 教養基礎科目「基礎ゼミナール」
テーマ:「自分と社会を振りかえるZineの編集デザイン」
担当教員:杉本達應(東京都立大学システムデザイン学部)

mt world(おおつか はるの)

カモ井加工紙が販売する、マスキングテープ『mt』の図鑑です。mtコレクターが、mtのデザイン・色彩に加え、使い方や専門店等を簡単に紹介しています。基本的なことから、ファンだからこそ知っている情報まで3分で眺められるようにまとめました。マスキングテープをよく知らない方やmtに興味がある方におすすめします。皆さんに、mtの魅力が伝われば幸いです。

画像1

DOCCHI SUKI?(村永実里)

日本のメイクと韓国のメイク、どっちが好きですか?…そんなこと言われてもいったい何が違うの?このzineでは、本物のコスメを用いたイラストで、日韓のメイクの違いを筆者なりに比較しました。アイシャドウの冊子を開いて、それぞれの違いを感じてみてください。

画像2

日本語の達人のにほんご(はりおあやの)

広告のキャッチコピーってそんなにじっくり見ることはないと思います。でも、よーくみると、どれもこれもとっても魅力的なんです。日常の中に潜むそんな魅力をぜひたくさんの人と共有したくてこのzineをつくりました。楽しんでいただけたらうれしいです。

画像3

コクヨについての本(KIMURA)

ゆかいな「コクヨのキャンパスノートちゃん」と一緒に、コクヨの文房具7種類を見てみよう!カタログとは一味違った冊子だよ!見たことある文房具はあるかな?これを機に覚えていってね!そしてぜひキャンパスノートを買ってね!買うんだよ!byコクヨのキャンパスノートちゃん

画像5

麺食いで御免〜いらっしゃい!〜(ながのきょうか)
いらっしゃい!ラーメン好きが熱意を込めて作り上げた激アツのzineです。ラーメンを好きな人もそうでない人も楽しめる濃い内容になってます。少しでも多くの人に、ラーメンの興味を持っていただけたら幸いです。ドンとこい!!!

画像4

新幹線みらい号未来行き(はやぶさ のぞみ)

主に2000年以降の新幹線車両の進化について、個人的な見解も含めてまとめたZineです。製本テープを全周ホロに見立てたり、駅名標の意匠を取り入れたりして工夫しました。新幹線のイラストは、SNSで見たことはあったのですが、実際に自分で描くのは初めてだったので、少し下手な絵になってしまったかもしれません。最後のページでは、ポスト・コロナ時代の新幹線に対する意見も書いているので、ぜひ読んでみてください!

画像6

サツマイモ〜美容と健康のエキスパート〜(ふくもとりりこ)

甘いだけが取り柄じゃない、そんなサツマイモの本性に迫ります。この一冊にサツマイモの魅力を凝縮させました。サツマイモが好きなあなたはもちろん、みなさんでお芋ブームを巻き起こしましょう。少しでも多くの方にサツマイモを好きになってもらえれば幸いです!

画像7

後味の悪い映画(川口結子)

見た後にモヤモヤが残る…そんな「後味の悪い映画」をこよなく愛するおじさん、通称:胸糞じいが「後味の悪い映画」の魅力を案内してくれます。映画好きなあなたも、そうで無いあなたも、少し違った角度から映画の世界に足を踏み入れてみては…?

画像8

ふるうつさんど(土屋志野)

フルーツサンドは見た目よし味よしの最強のたべものである(「フルーツサンドとは」より)。人々が視覚的にフルーツサンドをたのしむためのzine。紙の種類や画材の違いを感じつつ、手書きならではの質感をたのしんで。

画像9

そこにいたひと観察日記(きたはらあいこ)

6月から7月にかけて人の洋服の観察をしてみました。パッとみてビビッときた人を取り上げた、完全に私の好みからできているzineです。万人受けはしないと思いますが、好みの服に出会ったときの自分の心情をそのまま書いているので臨場感あふれる、スラスラ読めるものになっていると思います!人の日記を読みたい方はぜひ。

画像10

キッコーマンの豆乳(きんそな)

これは貴方にキッコーマンの豆乳を好きになってもらうために作ったキッコーマンの豆乳大図鑑です。貴方もお気に入りのキッコーマンの豆乳を見つけて一緒に豆乳ライフを送りませんか?(私は決してキッコーマン社の回し者ではありません笑)

画像11

ALOHA, E KOMO MAI(もろずみ わかな)

私は南の島が好きです。青い海が好きです。青い空が好きです。やわらかい空気が好きです。そんな私の好きがハワイには溢れていました。このZINEには私のハワイ旅行が記録されています。ハワイの魅力を少しでも感じていただけたら嬉しいです。

画像12

【実況】ゲーム実況者今昔 part1(大内日菜子)

ゲーム実況。見たことがない方も多いと思いますが、きっとYouTubeは知っているはずです。これは古参ヅラした私がニコニコ動画に上げられたかつてのゲーム実況と、YouTubeにある今のゲーム実況を比べたものです。見るだけで変化が見て取れるはず。驚くべき変化をぜひお楽しみください…

画像13

konbini matca book(鈴木千裕)

数あるコンビニスイーツのなかでも多くの人が愛する抹茶のスイーツたちを集めました。手に取ってぜひコンビニで手軽に楽しめる抹茶スイーツに魅了されてみてください。たくさんのイラストで眺めて楽しい!美味しい!そんな気持ちになれるzineです。

画像14

FIRST PENGUIN(中島祥奈)

水族館の人気者・ペンギンと言えば、氷の上をよちよち歩く姿を思い浮かべる人は多いですよね。しかし、ペンギンがいるのは寒いところだけではないんです!この本を読めば、あなたの知らなかったペンギンに出会えるはず。ペンギンの世界に一歩足を踏み入れてみませんか?ペンギンたちに会いに行きたくなる、ペンギンの入門的ZINEです。

画像15

4分間の旅に出よう〜NEWSの創る4つの世界〜(中村莉緒)

こんにちは!皆さんはNEWSについてどのくらい知っているでしょうか?どんどん人数が減ってる?歌がうまい?…そんなもんじゃないんです!!このZINEでは2017年から2021年にかけて行われていた特大プロジェクトNEWSの4部作の世界へ皆さんを案内します。一度入ったらなかなか抜け出すことのできないNEWSの世界、ぜひ一度体感してみては?

画像17

あおはる(かじつくし)

皆さんは、少女漫画を読んだことがありますか?もしかしたら、男性や社会人の方など、興味はあるけど手に取りにくいという人もいるかもしれません。しかし、最近の少女漫画は、恋愛以外にも様々な要素が詰め込まれていて、老若男女問わず楽しめるものになっています。そんな少女漫画の魅力を伝えるZineです!これを読んで青春(あおはる)に戻りませんか?

画像16

もも?(うのふうか)

もも‥‥?そうです、ただの桃ではありません。桃太郎電鉄です!!昔から大人気の桃鉄ですが、私のZINEでは私が実際に持っていてプレーしたことがある、2020年に発売された令和版桃鉄について書きました。本のデザインの工夫、キャラ絵に力を入れたので、ぜひ見てください!

画像18

ラグビーはやわかりGUIDE BOOK(ばんばたいせい)

2年前のW杯の影響などで名前ぐらいは知っているけどルールも難しそうだし…と観戦を敬遠されがちなスポーツ、ラグビー。そのラグビーについてわかりやすくレクチャーし、これを読み終わった頃にはみなさんがラグビー観戦を楽しめるようになることを目的として、現役大学生プレイヤーがラグビー愛をもって制作したzineとなっております。暖かい心でご覧になって頂けるとうれしいです。

画像19

おいしい!楽しい!南大沢(はじめん)

お洒落の街、南大沢。駅前に広がるアウトレットパークやレストランの数々が有名です。普段多くの人々で賑わっていますが、実は駅前周辺はもちろん少し離れた場所にもまだまだたくさんの魅力があるんです!!学生にはうれしい安くてお得な飲食店、ちょっぴり贅沢でインスタ映え間違いなしの喫茶店、意外と知らない隠れ家まで!?全ページ手書きのイラストと一緒に盛りだくさんの魅力をご紹介いたします!!

画像20

あの音(平川詩織)

イエッセルさんの「おもちゃの兵隊の行進」という曲を知っていますか?「???」となっているそこのあなたも、絶対知ってるはず。「キューピー3分クッキング」のテーマ曲です。そう、あの音です。このZINEでは曲名は知らないけど聴いたことのあるクラシック曲を紹介します。読んだらきっと「あ~あれかぁ!」となるはず!!

画像21

知ってほしい ブルーナとミッフィーのひみつ(よしだみひろ)

ミッフィーがだいすきな著者が、みんなが知っているキャラクター、ミッフィーとその作者のディック・ブルーナについてぜひ知ってほしい!ということを詰めこみました。こだわりポイントがたくさんあるので見てもらえると嬉しいです。

画像22

この境界線の向こう、底なき沼の「-」(ぷちまり)

「推し」という沼にハマったことはありますか?このzineでは宇宙一深い沼、K-POPグループ「ENHYPEN」を紹介します。K-POPを言語を理由に避けている人、もったいないです!今から私が視覚的、聴覚的、触覚的にK-POPの世界に連れ込みます!QRを読み取れば、もうそこはENHYPENの沼。さあ私と一緒にこの深い沼にハマりませんか?

画像23

テレビからのおはよ(森早苗)

このzineはeテレで放送されている子供番組を紹介するものです。小さな頃よくみていた子供番組の数々。もう見ることはないと思っていた番組たちには、大人になった今見るからこそ気づける魅力が詰まっています。私は大学生になった今でも子供番組が大好きで、そんな私からのおすすめポイントもたくさん盛りこみました。いつもの朝の時間、みなさんもたまにはニュースでなくeテレにチャンネルを合わせてみてはどうでしょうか?

画像24

以上、24冊の紹介でした!