テック・ジン『カラフルなJavaScriptであそぼう』をつくりました

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年度前期「ネットワーク演習I・実習I」前半課題
担当教員:杉本達應

多摩エリアのアート情報を一覧できる情報サイトの制作を行いました。施設やイベントの情報収集と取材は全員で、サイト制作はグループで取り組みました。JavaScriptで取得したデータにもとづいてDOM構築をしています。Google Sheetを使った簡易APIを使ってJavaScriptでレンダリングしました。サイトは、GitHub Pagesで公開しています。制作期間は、2022年4月から6月中旬までのおよそ2か月です。

tamawalk

多摩地区のアートギャラリー・イベントをまとめた情報サイトです。地図内のピンでは会場情報、右部のスクロールメニューではイベント情報を取り扱っています。それぞれの情報はお互いに連動していますのでどちらからでも探すことができます。また、一部のイベントには製作者のレビューも掲載していますのでぜひご覧ください。


tamart

「tamart」は、多摩地区の多種多様なアート施設をまとめた地図ベースの情報サイトです。地図を眺めて気になった場所をクリック! 施設の詳しい情報を閲覧することができます。ぜひ多摩地区で素敵なアート体験を!


TAMART

多摩地区のアートギャラリーをまとめた情報サイトです。多摩地区は自然に溢れる地域であり、様々な美術館があります。それらの美術館でやっているイベントの情報、美術館の住所や最寄駅、電話番号などの情報を見ることができます。
本サイトで興味のある美術館を探してみてはいかがでしょうか!


Tamart

東京都の西側に広がる多摩地区は、豊かな自然と交通などの利便性がバランス良く融合した、魅力あふれる地域です。そんなここ多摩地区には、数多くのアート作品が存在します。本サイト・Tamartは、そんな多摩地区に存在する魅力的なアートに気軽に触れられるように、という思いで制作された、多摩地区のアート情報を発信するメディアです。このサイトを通して、ぜひ多摩地区のアート文化を探訪してみてください。

日本がデータビジュアライゼーションにもたらしたもの

この記事は、各種チャートのカタログサイトThe Data Visualisation Catalogueのブログ記事の日本語訳です。翻訳にあたっては、訳注やリンクなどを補いました。原著者の許諾を得て公開しています。転載はご遠慮ください。

2023-02-01更新 本翻訳の訳注での指摘を受けて、原記事を修正していただきました。そのため、一部訳注を削除しました。

Original post: Japanese Contributions to Data Visualisation
by Severino Ribecca, The Data Visualisation Catalogue Blog
Published: December 29, 2021
Translation: SUGIMOTO Tatsuo

はじめに

欧米のデータビジュアライゼーションコミュニティの人たちは、データビジュアライゼーションを欧米を中心に生まれた分野だと考えているでしょう。データビジュアライゼーションの歴史上、主要な実践者を挙げるとすれば、ミナール(Charles Joseph Minard)やナイチンゲールFlorence Nightingale)、プレイフェアWilliam Playfair )、デュパン(Charles Dupin )といった名前が思い浮かびます。

ところが、日本人が19世紀から市場取引を支援するためにチャートを使っていたことは、あまり知られていません。20世紀の日本においても、美しく複雑なビジュアライゼーションやインフォグラフィックが作られています。

20世紀の日本のビジュアライゼーション

1926年の作品例に、長瀬鳳輔(ながせほうすけ)による『世界各国興亡表』と題されたチャートがあります。〔京都大学吉田南総合図書館所蔵〕

japanese data visualisation

1935年、東京市は、当時の東京市の統計地図である『東京市勢圖表』を刊行しました。これは、大橋光吉(おおはしこうきち)率いる共同印刷株式会社が印刷しています(デザイナーは不明)。この図表は、アイソタイプを使って、戦前の東京を詳細に描いた素晴らしい地図からなります。デイビッド・ラムゼイ(David Rumsey)が大橋の作品をオンラインで公開していて、ここで詳細を見ることができます。

japanese data visualisation
japanese data visualisation
japanese data visualisation
japanese data visualisation

これまで、データビジュアライゼーションの歴史研究では、欧米各国の制作者の作品を中心に記録されてきました。この問題は、データ可視化史への関心が最近の現象であり、研究者がほとんどいないといった、いくつかの要因によって起こっています。

言語も研究の障壁になっています。日本語は、特に英語圏の人びとにとっては習得がむずかしい言語です。日本のデータビジュアライゼーションの歴史を研究するには、日本出身者や日本在住の日本語が堪能な人の協力が必要です。

古いグラフを調べるには、図書館や公文書館に出向いて資料を渉猟する物理的な時間もかかります。インターネットとGoogle翻訳で調べるだけでは不十分なのです。

そうした制約がありながらも、なんとか日本の才能について価値のある情報を発見して、皆さんにお伝えすることできます。それでは、日出ずる国で生まれたいくつかのタイプのビジュアライゼーションを見ていきましょう。

ローソク足

(キャンドルスティックチャート)

このタイプの視覚化は、取引や時系列の値動きの分析によく使われているツールで、金融取引のプラットフォーム、アプリ、ウェブサイトでよく目にします。ローソク足は、このチャートに関連する酒田市にちなんで「酒田罫線法」としても知られています。

japanese data visualisation

ローソク足は、1991年にスティーブ・ニソン(Steve Nison)が著書『Japanese Candlestick Charting Techniques』で広めるまで、西洋ではほとんど知られていませんでした(もっともニソンは、1989年にローソク足を紹介したと述べています*)。
* Japanese Candlestick Charting Techniques, Second Edition, p. 5

本間宗久(ほんま そうきゅう〈むねひさ〉)は山形県酒田市の米穀商で、「ローソク足の生みの親」とされています。しかし、本間がこのチャートを使っていたという証拠は見つかっていません。ローソク足や日本のチャートについて深く研究しているスティーブ・ニソンは、次のように言っています。

ローソク足の起源ははっきりしないが、明治時代の初期に使われはじめたようだ。
 
– Beyond Candlesticks, 1994, p. 18

本間は1724年に生まれ1803年には没しているため、この時期は彼の死後ずっと後のことです。また、ニソンは次のようにも言っています。

私たちが今日知っているローソク足と関連技術は、何世代にもわたり何人かの人たちが改良を積み重ねてきた可能性が高い。
 
– Beyond Candlesticks, 1994, p. 14

したがって、本間が開発した原理は、ローソク足の誕生に多大な影響を与えてはいるものの、今のところ、たったひとりの「発明者」を示す証しはありません。

ローソク足については、こちらのページで詳しく解説しています。

いかり足

(アンカーチャート)

この視覚化は、ローソク足の前身と考えられますが、あまり知られていません。

japanese data visualisation

ニソンは、いかり足の背景と構造を説明しています。

いかり足は、錨(いかり)のように見えるので、この名前がついた。このチャートは、享保年間(1716年~)に使われはじめ、当時の米穀商が港町で待ち合わせしていたことに由来していると言い伝えられている。

いかり足は、チャートの進化において重要な出来事だった。このチャートでは、始値が加えられ、始値、高値、安値、終値を示すチャートが作成された。日本のチャートの独自性でもあるが、始値と終値の関係を絵で表したところが重要である。いかりの縦線の上端と下端は、場の高値と安値である。いかりの水平線は、始値である。いかりの矢印は、終値である。終値が始値より高ければ、矢印は上向きになり、終値が低ければ、矢印は下向きになる。

– Beyond Candlesticks (1994), p.17

ニソンの書籍以外で、ネット上でいかり足の例を見つけることはできませんでした。この視覚化の実例を教えてもらえると嬉しいです。 

〔訳注:いかり足は現在では使われていないようですが、証券関係の書籍などに登場していることを確認しました。〕

カギ足

カギチャート

これもトレーディングツールとして開発された日本の視覚化です。ただローソク足チャートとは異なり、カギ足は時間軸を無視するため、ノイズが少なく、価格の大きな変動だけに注目することができます。視覚的にもカギ足は、ローソク足とは全く異なる構造をしています。

japanese data visualisation

カギ足の起源について、スティーブ・ニソンは次のように述べています。

カギ足は、1870年代に日本の株式市場が取引を開始した頃に作られたと考えられている。

カギ足という名前の由来は、日本語の「鍵」で、頭がL字型になっている昔ながらの鍵のことだ。このため、一部の日本人はカギ足のことをキーチャートと呼んでいる。カギ足は、値幅チャート、フックチャート、デルタチャート、ストリングチャートなどの名前でも呼ばれる。

– Beyond Candlesticks (1994), p. 213

カギ足については、こちらのページで詳しく解説しています。

練行足

レンコチャート

カギ足と同様に、練行足も取引のためのツールです。時間軸を無視し、ローソク足でよく見られるノイズを除去します。練行足は、互いに45度の角度で配置した一連のカラーブロックを使って、値動きを視覚化しています。

japanese data visualisation

Source: Investopedia

「練行」という名前の由来について、ニソンは次のように説明しています。

レンコチャートを形成する個々のブロックは、レンガと呼ばれることもある(レンコという言葉は日本語の「煉瓦(れんが)」から来ているのかもしれない)。
 
– Beyond Candlesticks (1994), p. 197

練行足については、次の記事をご覧ください。

新値三本足

スリーラインブレイクチャート

この取引ツールも、スティーブ・ニソンが日本から輸入したもので、ローソク足と練行足の中間にあたるものです。

japanese data visualisation

Source: Stockcharts

japanese data visualisation

Source: Financial-Bet Spreading.com

新値三本足についての詳細はこちらをご覧ください。

パレート図と日本

これまで紹介してきたチャートとは異なり、この視覚化は市場分析や取引のためのものではありません。パレート図は、品質管理や最適化のための意思決定ツールとして使用されています。パレート図は、ある工程の要因を減らして改善することを目的とする場面でも採用することができます。

japanese data visualisation

ところで、この視覚化と日本にどんな関係があるのでしょうか。パレート図は、イタリアの土木技師、社会学者、経済学者、政治学者、哲学者であるパレートVilfredo Pareto)が考案したのではないのでしょうか。

実はそうではないのです。ただ、彼が大きな影響を与えたことは間違いありません。

パレートはエリート論の発展に貢献したことで知られ、イタリアの富の80%は人口の約20%によって所有されていると述べています。

経営コンサルタントのジュラン(Joseph M. Juran)は、この政治学の見解を品質管理に応用できることを発見しました。そしてジュランは、「80:20の法則」とも呼ばれる「パレートの法則」という言葉を提案し、パレートの発見を次のように再定義したのです。

「ある状況やシステムから得られる出力の80%は、入力の20%によって決定される」。

ジュランは、この概念を品質管理の文脈で展開したことで知られ、パレート図の発明者とも言われています。しかし、そうではないという意見もあり、今日私たちが「パレート図」として知っている棒グラフと累積折れ線グラフの組み合わせを最初に発表したのは、ジュランではないという主張が提示されています。

そこで代わりに評価されているのが、日本の組織論者で工学博士の石川馨(いしかわかおる)です。石川の編著書『現場のQC手法』(1968年)には、パレート図の例がはじめて掲載されています。石川は、フィッシュボーン図を開発したことでも知られています。

japanese data visualisation

〔訳注:文中に挙げられている書籍に掲載されているパレート図と特性要因図を以下に掲載した。出典:FQC誌編集委員会,1968,『現場のQC手法:やさしい解説と演習』日科技連出版社,p.41, 26.〕

パレート図
特性要因図

ジュランは生涯にわたりたびたび日本を訪れ、石川と親交があったことから、彼がパレート図をまったくのゼロから着想したとはおもえません。ローソク足と同じように、パレート図もパレート、ジュラン、ローレンツ(Max Otto Lorenz)、石川馨が積み重ねた努力の末に完成したものなのです。

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.

ソーシャルな可視化 2022年度「ネットワーク演習II」オンライン成果集

2022年度のネットワーク演習IIでは、パーソナルな可視化、ソーシャルな可視化に取り組みました。前半のパーソナルな可視化は手書きでZINEにまとめました。

ここでは後半課題の最終成果物をご紹介します。制作には、JavaScriptやMarkdownを書いて共有できるノートブックサービスObservableとJavaScriptライブラリのD3.jsを利用しました。制作期間は2ヶ月ほどです。

受講生にはデータジャーナリストになったつもりで、関心ある社会的なテーマを設定し、データを集め、データ可視化をふくむ記事を制作してもらいました。調査・分析は十分とはいえないものもありますが、それぞれが、わかりやすい「見せ方」「伝え方」を追求しています。

完成前のタイミングで、ゲスト講師としてスマートニュースの荻原和樹さんをお招きしました。荻原さんにそれぞれ講評コメントをいただいたことで、ブラッシュアップにつながりました。ありがとうとざいました。

授業の概要

開講時期:2022年後期(最初の数回以外はオンライン)
授業科目:ネットワーク演習II・実習II
東京都立大学システムデザイン学部インダストリアルアート学科
担当教員:杉本達應

以下、成果の紹介です。サムネイルをクリックすると各記事にとべます。

from City to Airport 都市から空港へ

全国各地の空港と都市のアクセス状況を見せています。都市圏の規模や便数などの要素も見れるとより面白くなりそうです。

Why are the strongest schools always the strongest?

女子高校バスケットボールの強豪校はなぜ強いのか。10年間にわたるデータを地道に調べ上げています。強い選手がいるだけでは、上位をキープできないことが明らかになっています。

外来生物の被害度、知名度などに相関はあるのか。

外来の動植物の被害度や知名度などを組み合わてみて相関を見たもの。データが少なくて作るのに苦労したようです。

画像3

日本の花火文化はどのように広がったのか?

全国各地の花火大会の歴史や観客数などを見ています。歴史ある花火の町は全国にありますが、都道府県での色分けだけでは十分に伝えきれていないのが惜しいです。

画像4

政府の10万円給付について考える 一律所得制限に注目して

2021年度、政府の子育て世帯への臨時特別給付金について、所得制限への批判の声がありました。都市部と地方の所得の違いが不満の要因のひとつだと考えられます。

画像5

なぜ人々の新聞離れは止まらないのか?

読めと言われても若者は新聞を読まなくなりました。世代間の隔たりが明らかに見えます。

画像6

デジタルメディア芸術分野における地域格差とは?

ゲームやアニメーションを学べる大学は全国各地にありますが、就職先は都市圏に集中していると指摘しています。業種によっては、こうした地域の偏りが大きいことがわかります。

画像7

VTuber_Music 推しの再生回数はなぜ伸びないのか?

Vチューバーの「歌ってみた」動画の投稿タイミング、再生数、いいね数、コメント数などを丹念に調べたユニークな調査です。所属事務所による傾向の違いなどが読み取れます。

画像8

日本の老人福祉施設は高齢化社会に追いついているのだろうか?

家族の介護が必要になったとき、調べることになる福祉施設について、その数が十分なのか、費用がいくらかかるのか、具体的な地域に絞って調査しています。

画像9

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

『Code as Creative Medium』日本語版が出ました

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

大学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冊の紹介でした!

Kirk, Andy,黒川利明訳,2021,『データビジュアライゼーション ―データ駆動型デザインガイド―』朝倉書店.

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

『データビジュアライゼーション』は、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

テック・ジン『データビジュアリスト宣言』をつくりました

このたび、流浪の編集部「すぎもと組」は、3冊目のテック・ジンとなる『データビジュアリスト宣言:Observable/D3.jsではじめるデータ記事発信』をつくりました。

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

https://data-visualist-manifesto.tumblr.com/

技術書典11で頒布しています。

https://techbookfest.org/product/4641141578268672?productVariantID=5767041485111296

どんな本か

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

データビジュアリストって何?

タイトルにあるデータビジュアリストは、造語です。公開されている統計情報などを分析し可視化した記事をまとめて発信する人のことを意味しています。Observableを使えば、このようなデータ記事を簡単につくることができます。

既刊とのちがい

この本は『ばぶでもわかるおぶざばぶる』の続編にあたります。『ばぶ』本との違いは、次の通りです。

– ローカル開発の解説を省略
– Observableの最新版に対応
– D3.jsの最新版バージョン7に対応
– データ記事発信の心得を追加

今回一緒に作った学生はふたりとも社会的なテーマとデータ可視化の組み合わせに関心をもっていることから、データ記事発信の心得について調べて書いてくれました。

組版トラブル発生

毎回どのように組版するかで悩みますが、今回はCSSで組版できるVivliostyleを使用しました。最初はまったく使い方が分かりませんでしたが、さわっているうちに徐々に理解できました。Markdownから直接PDFが変換できるので便利です。

https://techbookfest.org/product/4671178121674752?productVariantID=6052525503414272

ところが入稿直前におおきなミスに気がつきました。A5判のつもりが、B5判でつくっていたのです。急遽、設定をA5に変えたもののエラーが出てしまいます。判型を変えてしまうと、各ページの細かい調整をすべてやりなおす必要があります。入稿締切が迫っていて、作りなおす時間はとれません。結局、B5判のPDFをA5判に縮小することにしました。それでも塗り足しの幅など調整する必要があり結構大変な作業でした。本文の文字が若干小さめに感じるのはそのせいです。

PDFのプリフライトチェックでページサイズがおかしいことが判明!

共著者の宮崎さん、関口さんに本書制作の感想を書いてもらいましたので紹介します。

「実用的」が難しい(宮崎)

はじめまして。第3章と第4章の執筆を担当しました、宮崎仁美です。杉本先生と本を作らせていただいたのは、今回で2度目になります。今回制作した本は、前回制作した本とは内容も方向性もまったく異なったものになりました。前回の『超ビジュアル訳 ニーチェの詩:p5.jsでうたう「深夜の鐘の歌」』は、いわゆる作品集に近いものです。私自身の趣味(嗜む程度ですが)でもあるp5.jsで思ったように表現しました。非常に楽しかったことをよく覚えています。

『データビジュアリスト宣言』は、「今度は実用的な本を作ってみよう」ということで制作しました。この「実用的」という部分は、私が思っていた以上に考えることが多く、非常に難しかったです。まず、「Observableで記事を作成するときに、どのようなことがすぐにわかると嬉しいだろうか」と考えながら執筆を始めました。しかし書けば書くほど、「この言葉は誤解を招かないだろうか」「本当にこれは正しいのだろうか」「この情報って要るのだろうか」と答えのない問いが沸いてきました。結果、筆が遅くなり、さらに焦って全然書けなくなる、というとても綺麗な負のスパイラルが生まれました。やはり、焦って力が入っているとあまり良い文章が書けないもので、もう少し肩の力を抜いて書いてしまえばよかったな、と今になって反省しています。共同制作者の皆さん、大変ご迷惑をおかけしました。

前回同様、一度も顔を合わせずに制作した本ですので、私はまだ完成した本を手に取ってはいません。今から完成した本に触れるのが楽しみです。私は紙の本の手触りが大好きですし、やはり紙の本は格別だなと思っているので、待ち遠しく思っています。

はじめて本を売ってみた(関口)

はじめまして。関口太樹です。第3章と第5章の執筆、表紙のデザイン、当日の売り子を担当しました。杉本先生と本をつくるのはこれで2度目になります。幸運にも、今回はオフラインの即売会に参加することができました。本の即売会に出店したのは初めてのことだったので、本の制作時のことに加えて、本を実際に売った時の感想をお伝えしたいと思います。

本をつくること〜技術書における書き手のスタンス〜

前回制作した『超ビジュアル訳 ニーチェの詩』は、解説書というよりは作品の作り方を紹介する本でした。それは、サービスや言語について概要を解説するというよりも、こういうコードの書き方をすると、こういう表現が生まれるということを書いた本です。

今回制作した本は、ObservableとD3.jsという、日本ではあまり知名度の高くないサービスやライブラリをこれから使う人のために紹介し、解説する内容でした。なので前回よりも、事実に基づいた文章を書くことが求められます。

しかし、私自身がこれらのものに触れはじめてからまだ日が浅く、文章を書きながら自分自身も初心者であるという感覚がありました。初心者なのに一人前の顔をして、解説を書くのはどうなんだろうか、と戸惑いながら文章を書いていました。初心者である私が正しいことを書けているか、読む人の役に立つだろうか、という悩みがあったのだと思います。

今思えば、もう少し肩の荷をおろして執筆すればよかったです。リアルイベントで他の方が制作した本をいくつか購入しましたが、文章に「私なりに考えたこと」「正確な記述に努めましたが、もしかしたら間違えているかもしれません」といった枕が付いていることが多かったです。これらの本の著者も書かれていることの正しさについては気を使っているのでしょう。ですが、気を使いすぎると書けないので、そこは折り合いをつけて文章を書いたり、本を執筆しているのだと思います。そして、読む方も少なからず、そのことを了解しているんじゃないのかな、とそう思います。そうでないと、同人誌なんて生まれませんよね。

本を売ること〜即売会で販売するということ〜

技術書典11では、コロナ対策のもと、オフラインイベントが開催されました。今回はそこに、出店してお客さんの前で本を並べて、売ってきました。本の即売会に参加したこと自体これが初めてです。

前回の技術書典ではオンラインマーケットだったので、買い手の存在が見えずに、いつの間にか売れていく……というものでした。オフラインイベントでは、買い手の人たちが目の前にいるので、本を売ることの楽しさ、売れることの嬉しさを体で感じました。もちろん、かなり緊張もしましたが。

本の売りかたを当日いろいろと試しました。「本の概要をざっくり説明してあげた方がどんな本か伝わる」、「実際に見せられるものがあったらスマホなどでサービスを見せた方がいい」、「歩いている人は大体上を見ているのでPOPは目線の高さにあった方がいいかも」といったように、自分なりに工夫して学んでいきました。

ただ、そうやって「販売促進行為」をしながら、話しかけることが本を買わせるためのプレッシャーになっていたらなんか嫌だな、とも考えていました。せっかく作った本ですし、杉本先生には出版費用をいつも肩代わりしていただいているため赤字は避けたい、売れてほしいという気持ちはもちろんあります。ただ「本って売る人が稼ぐために売るもの?」とためらう気持ちがちらちらとあらわれていました。

その裏には、読者に対する尊敬と期待があります。本をつくる限りは、何らかの形でその人の役に立ってほしい。消費財として終わらずに、その人が次に何かをするための原動力となってほしい。そういう思いがあります。なので「仕方なく買った」という事態を招くのはやっぱり残念なことだと思います。

それから本そのものに対する畏敬の念もあります。本というものがこれまで歴史上でなしてきたことを思うと、本はそれ自体が尊敬されるべきものだとなんとなく思うのです。私の尊敬する編集者の松岡正剛さんは、『千夜千冊エディション 本から本へ』の後書きに「本は交際である」とタイトルをつけ、「本とは、人類の歴史文化の中で最高無二の知的情報体となってきた柔らかいパッケージである。この連中とはひたすら交際することが一番だ」と述べています。この文章で言われているように、本とは単なるモノとしての消費財ではなく、人間と特殊な関係を結んでいるものである、と私は感じます。なので、本をつくることで本の歴史に関わる限りは、本を粗雑に売るべきではないと思うのです。

だいぶ話が脱線しました。とにかく、本を作って自分の手で読者の人に渡すという行為は、いろいろと感じること、考えなければいけないことが多く、学びの機会になりました。今回も本づくりに関われてよかったです。

目次

第 1 部 入門編
第 1 章  Observable をはじめよう
 Observable とは
 Observable をはじめる
第 2 章  D3.js を使ってみよう
 D3.js とは
 Observable で D3 を使う
 はじめての D3
 D3 vs. jQuery vs. JavaScript
 コミュニティと情報源
第 3 章 基本的なグラフをつくろう
 棒グラフ
 折れ線グラフ
 ドーナツチャート
 散布図
 ヒートマップ
 地図
第 2 部 活用編
第 4 章 デザイン
 こんなときはどんなグラフ?
 見やすい記事のポイント
 色を活用する
 見せ方とミスリード
第 5 章 活用
 データ可視化の構成要素
 データ可視化記事の制作手順
 Observable を使った授業の事例
 ノートブックを公開する前に
第 6 章 データ記事の事例紹介
 データ可視化で見る東京都内の企画展傾向
 日本における子どもの貧困と学力格差
執筆者
おわりに

既刊もどうぞ

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

https://techbookfest.org/organization/5752355920281600

「ネット時代のフォークロア創造」 モバイルコミュニケーション研究会に参加しました

2021年5月15日、オンラインで開催された情報通信学会モバイルコミュニケーション研究会に討論者として参加しました。貴重な事例報告をきく機会をいただきました。研究会のみなさん、ご縁をいただきありがとうございます。

タグチヒトシさん
杉本

アートグループGRINDER-MANのタグチヒトシさんが演出された現代芸能『獅子と仁人』の報告にコメントを寄せました。『獅子と仁人』は、沖縄の獅子舞、音楽、唄、ダンスパフォーマンスに加え、リアルタイムCGが合成されたライブ映像です。新型コロナウイルス感染拡大によって本来の公演は中止されたものの、ストリーミングライブ配信として新たなかたちでの公演が試みられたとのことです。

本作は、現代的な装いの獅子のパフォーマンスなど、見どころの多い作品です。それだけでなく、舞台上を動き回る大胆なカメラワークでライブ配信する意欲的な試みでもあります。2020年、コロナ禍で次々に舞台公演の場が失われていく大きな制約のなか、表現者が新しい見せ方をつかんでいく過程を見ることができ、勇気づけられました。また、テクノロジーを駆使しながらも誇示しない作品構成のバランス感覚にも唸らされました。とくに再撮影版ではCGの要素を減らしていることに感心しました。

沖縄の獅子舞という伝統文化に、現代的な技術が重なることで、あらたな魅力を獲得していました。コロナ禍で伝統文化の継承が危惧されているなか、このような試みで伝統が生き続けていることに注目します。ライブ配信では海外からのアクセスも多かったそうで、地理的な条件にしばられないグローバルな展開が期待できます。

わたしからはタグチさんに、今後の展開についてお訊ねしました。コロナ禍はいつか終息し、パフォーミングアーツの公演は息を吹き返すでしょう。ただし、長期間これまでの公演形態が制限され、ライブ配信が身近になったという大きな変化を存在しなかったことにはできません。今後は、劇場に足を運ぶ人だけでなく、スクリーン越しの観賞を求める人たちも増えていくのではないでしょうか。そのとき、多くの観客と同時に観賞するという体験がどのように変わるのかに興味を抱きました。その体験をデザインする演出家の果たす役割はより重要になりそうです。

もう一人の討論者の藤本憲一さんと司会の伊藤耕太さんからは、お二人とも本作の世界観や読み取れる物語からつぎのような指摘がありました。藤本さんは、本作から、「脱魔術化」(ウェーバー)した合理的社会ではなく、「再魔術化」した多神教的世界を見出したそうです。伊藤さんは、本作から読み取られる物語から、ベンヤミンが「複製技術時代の芸術作品」で論じた礼拝的価値から展示的価値への移行から、再び礼拝的価値へ回帰しているのが興味深いとおっしゃっていました。

今回の研究会がオフライン開催だったら、研究会メンバーの方々をまじえて議論が盛り上がったはずです。それがかなわなかったことは残念でしたが、つぎに直接お会いできる機会を楽しみに待つことにします。

『獅子と仁人』は、再撮影された映像版がVimeoでオンデマンド配信されています。レンタルまたは購入できますので、関心のある方はぜひご覧ください。

Vimeo配信の予告編

The Ancient Lion and Modern Man – 現代芸能『獅子と仁人』 | Facebook


2021年度 第1回モバイルコミュニケーション研究会のお知らせ

テーマ: ネット時代のフォークロア創造〜リアルアイムCGを用いたAR表現を題材に
日時:2021年5月15日(土) 13:00~15:00
場所:オンライン開催
報告者:タグチヒトシ(演出家)
司会:伊藤耕太(マーケティングディレクター、関西大学非常勤講師)
討論者:藤本憲一(武庫川女子大学教授)・杉本達應(東京都立大学准教授)

概要
報告者であるタグチヒトシ氏がコロナ禍において演出を担当した現代芸能『獅子と仁人』(ししとひと)は、身体表現とデジタルテクノロジーの融合による、オンラインでのみ完成する舞台作品かつ映像作品として公演されました。獅子舞、ダンス、生演奏、CG合成によるAR表現がオンラインでリアルタイムに融合し、沖縄から世界への配信を通じて鑑賞する観客は、舞台上に立っているような臨場感の中で、しかも肉眼で見るのよりもリッチな映像として、作品世界を体感することができます。本研究会では、本作を中心としたタグチ氏の実践と、インターネットやデジタル技術や駆使した映像体験で試みるフォークロア(伝承)創造の可能性について議論したいと思います。

(報告者プロフィール)
タグチヒトシ(演出家)
1973年横浜市出身、筑波大学芸術専門学群総合造形学科卒。演出・振付を駆使して生みだすのは「いま・ここ」の身体表現。2008年に株式会社イッカクを設立。現代という時代を創造し、表現と社会の新たなかかわりあいについて、その考察と実践を進めている。文化庁芸術家海外研修でニューヨークに滞在(2016年)。文化庁メディア芸術祭審査委員会推薦作品「HERO HEROINE」(2019年)。
『獅子と仁人』は、沖縄県宜野座の創作エイサーLUCKと、アートグループGRINDER-MAN、ビジュアルデザインスタジオWOWのコラボレーションによって、2020年11月に宜野座村文化センターがらまんホールからストリーミング配信にて発表。2020年12月には文化庁芸術文化収益強化事業に採択され、2021年2月に再収録。2021年4月から新版「The Ancient Lion and Modern Man」がVimeo On Demandにてオンデマンド配信中。
https://www.facebook.com/shishitohito/

参加費: 無料
申込方法: 以下のサイトよりお申込みください。

モバイルコミュニケーション研究会|情報通信学会 -JSICR-