騒音日記(四)

 この日記は、自分が聞こえた騒音や感じた騒音を記録します。とくに、僕に影響を与えた騒音や感想を記録します。

目次

はじめに

 こんにちは。アンです。先月の「騒音日記(三)」に引き続き、今回は2023.8.28〜2023.9.10の2週間の日記を公開します。  

NoisePlanet_OMICRON by Samuel YAN (https://openprocessing.org/sketch/1873227)

2023.8.28(月)

急行の井の頭線の列車で聞いた「ガス代」

 電車に座って電車の発車を待っていたとき、友達と雑談した。電車の中は静かだった。そのとき、「ガス代」という言葉に注意を惹かれた。音源のところを見ると、2人の男性が「ガス代」についてディスカッションしていることがわかった。2メートルくらい離れたところに立っていた人たちの言葉が聴こえたことに驚いた。ブロックチェーンについてのワークショップに参加している私たちに身近な言葉だったから、聴こえて注意を惹かれたかもしらない。本当にNFTについての「ガス代」を話しているかを確認するため、遠いところからの声に注目して友達と一緒にチェックした。やっぱり聞いたのはNFTについての「ガス代」だねという結論だった。

2023.9.1(金)

スタッフを5回くらい呼んだおばあちゃん

 今日、ドトールに行ってアイスコーヒーを頼んだ。作業したかったので、店内で1時間くらい過ごした。入店すると、目の前に白髪のおばあちゃんがいた。レジの前で、ストレッチしていた。まず、それに驚いた。自分は行列の2番目だけど、前の注文が多かったため、1番目のおばあちゃんはまだ注文を聞かれず、待っていた。待っているので、ストレッチしていたのかもしれない。その後、おばあちゃんが頼んだドリンクのカップをテイクアウト用のカップに変えてほしかったので待っていたことがわかった。そして、やっと自分の番になって、ドリンクを頼んだ。ほぼ満席だったので、レジの対面に座った。右を見ると、あのおばあちゃんがまたレジ前に立っていた。今回はハンカチとサングラスを持っていた。おばあちゃんを正面から見たことはないけど、言葉の発音から判断すると、おばあちゃんの歯が少ないことがわかった。そのため、おばあちゃんが店員に話した内容が私にははっきりわからなかった。そのときは店員が2人しかいなかったので、「少々お待ちください」と返事していた。2分くらい後、店員がレジから出ておばあちゃんの隣に移動した。そして、おばあちゃんのハンカチとサングラスを取って、ハンカチを使ってサングラスを拭いた。拭きながら「ここ、こことここで拭いたら良いでしょうか」っておばあちゃんに確認した。もう一回驚いた。日本のサービス業界は、そんな細かいことまでサービスを提供しているんだねと。その後、「お湯頂戴?」「片付けてください」などもう2、3回くらい店員を呼んだ。レジの隣に座って作業に集中したかった私にとって、本当にうるさかった。イライラして、全然落ち着かなかった。気持ちは驚きから、「うるさくて面倒臭い」「また?」「やめてよ」など、怒りまではなかったけど気分が悪くなった。

2023.9.5(火)

拍手・歓声

 午後、友達と東京ドームに行ってボーリングで遊んだ。4年ぶり、日本で初めてのボーリングだから、緊張した。全員揃って、入り口で久しぶりにみんなと挨拶した。みんな最近あまりボーリングで遊んでなかったので、緊張しながら、楽しみに来てテンション上がった。最初の何回か、みんなの点数は低かった。でも、誰かが初めてのストライクを達成した瞬間、みんな一斉に大声で歓声をあげて拍手した。もちろん、自分もテンションが上がって拍手しながら叫んだ。でも、11人の声は本当に大きかった。気になった僕は、周りのスタッフと他のお客様を見た。他の客がこっちを見た一方、スタッフたちは無表情だった。このような音環境にもう慣れたような顔だった。そのあと、自分も何回かストライクが出た。何回もテンションが上がってみんなと一緒に歓声をあげた。他の人にとって、私たちはうるさかったかもしれない。ほぼ1時間後、僕たちの左側に、他の十数人のグループが来た。時々、左側からの歓声と拍手の音に惹かれたことがあった。ボーリングの後、みんなと居酒屋に行って飲んだ。そこでも大声で歓声をあげた。その際、店員さんが来て、「他のお客様もいらっしゃいますので声を控えてくださるようにお願いします」って私たちに言った。そのとき、場所によって、大声が許容される程度が違うことを感じた。

2023.9.7(木)

聞こえなくなったセミの鳴き声

 今日、bilibili(中国の動画共有プラットフォーム)で「夏が終わる音がする」という動画を見た。4つの日本での代表的なセミの声を紹介した。紹介したのは、鳴き声が油を熱したときに撥ねる音に似ているアブラゼミ、「ミーンミンミンミンミンミー…」という鳴き声がよく知られているミンミンゼミ、朝夕に甲高い声で鳴くヒグラシと晩夏から初秋に発生するツクツクボウシだった。そういえば、最近、セミの声が聞こえなくなってきた。そういえば、夏が終わっているかもしれない。面白いところは2つある。1つは、セミの声は種類によってたくさんあることを知らなかったことだ。もう1つは、季節(初夏、真夏、晩夏など)と時間帯(朝、昼、夕方など)により、セミの声は違うことだ。セミの声は夏に聞こえる音だけではなく、時間の流れと季節の移ろいなどの意味もあると思う。それまでは、セミの声が騒音にしか聞こえなかった私にとって、いい勉強になった。前に紹介した4つのセミは日本でカタカナの名前で表記することが多いが、それぞれの漢字表記も面白いと思う。鳴き声の特徴で名付けられたアブラゼミとミンミンゼミは「油蟬」と「ミンミン蟬」だ。時間や季節との関係あるヒグラシとツクツクボウシは「日暮」と「寒蟬」だ。このように命名する方法は日本のロマンチックなところ、日本文化の魅力的なところだと思う。

2023.9.9(土)

大阪メトロのドアのサイン音

 中国から来た家族と旅行するため、東京から大阪に来た。新幹線の新大阪駅から大阪メトロの御堂筋線に初めて乗った。エスカレーターに乗って電車のホームに着いた。ホーム番号をスマホで確認した上、1番線に止まっている列車に入った。その後、ずっと鳴いていた提示音に惹かれた。ドアが開いたままで「ディー…ディー…」のようなゆっくりのサイン音が聞こえた。JR東日本東京メトロと違うので、気になった。最初聞いたとき、意味がわからなかった。何か異常なことが起こっているかと思った。周りの様子を確認しながら、ちゃんと聞いて少し理解できた。これは大阪特有のサイン音かもしれない。停車中の開けたままのドアのサイン音だと思う。

さいごに

 今回のブログで2023.8.28〜2023.9.10の2週間の「騒音日記」を公開しました。これからも、「騒音日記」を引き続き書きます。

はじめてのZINE制作『もじとおどる:JavaScriptで楽しむWebと文字』

『もじとおどる』表紙

はじめに

こんにちは。坂村です。初めてZINEの制作をしたので、紹介・振り返りをしてみたいと思います。

すぎもと組によるテック・ジン5冊目として『もじとおどる:JavaScriptで楽しむWebと文字』を作成しました。 本書は主宰である杉本達應先生の授業課題「Web上に詩的な作品 (a poetic piece) を企画・制作」をテーマとした20の作品を紹介したもので、学生の有志5名によって編集を行いました。

詳しくはこちらからご覧になれます

mojitoodoru.zine.sugimototatsuo.com

どんな本?

基本的なWeb技術を学んだ学生たちが、習得した技術を使用して文字にまつわる作品を制作し、Webとタイポグラフィをテーマにした20作品をおさめた作品集です。

作品を4つのカテゴリー「もじをあじわう」「もじをたのしむ」 「もじとあそぶ」「もじとおどる」に分類し、セクションごとに作品を1ページずつ紹介しています。

編集メンバーが制作した作品は、4ページにわたって詳細な解説を加えました。最後に、「もじをかたる」では作品制作を振りかえった座談会を収録しました。

はじめてZINEを作ってみて

本書は授業課題の制作物をまとめた作品集的な位置付けのZINEです。同じテーマのもと制作された作品たちですが、テーマの解釈は多種多様で、全く異なるベクトルの作品が集まりました。様々な趣向の作品たちに1つ方向性を定めて本として成り立たせていくという作業は、編集メンバー全員が初心者の状態では骨の折れる作業でした。

読み応えのある作品集を目指し、編集メンバーの作品紹介にはページを割いてコンセプトや技術的な解説も加えました。ページを割くといってもわずかなページ数だったので、自分の作品の構造の核となる技術を絞って要点だけ紹介するといった形になりました。つぎはぎコードを作成しがちな自分としては、全てに整合性があるかを考えながら、読者へのわかりやすさと嘘のない解説を書くことの難しさを感じ、普段からお世話になっている解説記事へのありがたさを数倍増しに実感した次第です。

ともあれ、技術解説に限らず「本の制作ってこんなに考えることあるのか…!」の連続でした。章立ての順番、単調さを感じさせない構成、テキストの配し方一つとっても実物が綴じられた状態のことを想像しながらレイアウトするなど、ちょっとした配慮の集合が「本」を成り立たせているんだなぁとこれまた本を作る皆様へのありがたさを感じてしまいました。

技術書典で売ってみて

「技術書典」にてお披露目ということで、ほぼ技術要素のない本書が来場者の方々にウケるのか不安でしたが、技術書の中で作品集というカテゴリーが珍しかったのか、多くの方に手に取っていただけて一安心でした。

なにより、自分が制作したものに興味を持って買っていただけるという体験は代えがたい喜びがありますね。

さいごに

はじめてのZINE、勝手がわからずに手こずった部分も多くありましたが、満足のいく仕上がりになったと思います。普段はあまり見ることのない、学生たちの多様なアイデアが集まった作品集、ぜひ手に取っていただければと思います!

騒音日記(三)

 この日記は、自分が聞こえた騒音や感じた騒音を記録します。とくに、僕に影響を与えた騒音や感想を記録します。

目次

はじめに

 こんにちは。アンです。先月の「騒音日記(二)」に引き続き、今回は2023.8.21〜2023.8.27の週の日記を公開します。

NoisePlanet_THETA by Samuel YAN (https://openprocessing.org/sketch/1868347)

2023.8.21(月)

芝刈り機の芝刈り音

 夏だから、学校のスタジオでエアコンの室内機からの音と外のセミの鳴き声が普通に聴こえた。でも、今日は、本を読みながら、窓から外での音に注意を惹かれた。何かの機械が運転中の音が聴こえた。その音の周波数はエアコンのものと異なっていた。開けている窓から聞こえる音なので音量は小さかった。でも、低周波音だから、音量が小さく聴こえるけど、心はモヤモヤした。窓を閉めてみたけど、その音はまだ聴こえた。何の音かを考えて外を眺めて探した。学校の芝生で芝刈り機を操作している作業員を見つけた。

2023.8.23(水)

傘に当たる雨音

 最近の大気が不安定なので、いきなり雷雨とかにわか雨が降ることが頻繁に発生した。今日もそうだった。1日中、何回も降りだしてまもなくやんでしまった。今朝、家から出るとき大粒の雨が降っていたので、傘をさして歩いた。アパートの出入口から出た瞬間、傘に当たる雨の音が聞こえた。激しい雨だったから、雨音も大きかった。風が吹いたので、雨も一緒に吹いた。そして、傘に当たった雨の音も風の影響を受けたようで、時々傘の左側から音が聞こえた。時々右側から、時々後ろからだった。まるで多数の方向から聞こえた交響曲だった。アパートから3、4分経って、聞こえた雨の音がだんだん小さくなってきた。止んでいるかと思った瞬間、顔に太陽の光を感じた。聞こえる雨音だけで、天気の状況を判断できるんだね。

「左へ曲がります。ご注意下さい。」

 好きな曲をイヤホンで聞きながら、交差点で信号を待っていた。そのとき、自分の右側の後ろから、車のエンジンの音と電子音響の音がだんだん近づいていることに気づいた。集中力も好きな曲からその車からの音に惹かれた。首を右後ろに向けてチェックした。確かに、そのトラックがこっちに近づいてきた。電子のサイン音以外、「左へ曲がります。ご注意下さい。」という報知の内容も聞こえた。交差点に近いところから、信号を待って左へ曲がった数十秒の間に、「左へ曲がります。ご注意下さい。」という音が5、6回以上繰り返された。

2023.8.25(金)

うるさい金曜(夜の通勤ラッシュの時間帯)

 18時半くらいに家から出て駅に行く途中、普通に歩きながらスマホを操作して聞きたかった曲を探していた。前から子供たちの声が聞こえていた。自分の目はスマホから目の前にいる声の源を見た。お母さん2人と子供2人だった。お母さん同士が歩きながら互いに話していた。子供たちは母の身の周りで走って遊んでいた。子供の声は大人のより音調が高いので同じ距離でもより聴こえやすいかなぁと考えた。

 その瞬間、ワンちゃんの鳴き声を聞いた。目の前にいる4人がびっくりした後、一斎に道路の向こうを見た。自分もびっくりして、音源を確認したかったため同じタイミングで同じ方向を見た。動物病院のドアが開いて、50代くらいの夫婦がベビーカーを押してドアから歩いて出てきた。もっと確認するとベビーカーに2頭のワンちゃんがいることが分かった。小型犬のチワワ2頭だった。病院の前に何人が並んでいたので、チワワたちが隣の知らない人に吠えた。「ワン、ワン」って3、4回繰り返した。小型犬だから、子供の声より音調が高い。聴こえた音も子供の声より鋭かった。

 犬の鳴き声を確認している間、何台もの車が自分の目の前を左から右へと疾走していた。もちろん、車のエンジン音が聴こえた。

 駅に近づくと人と車が増えた。交差点で人の話し声、車のエンジンの音、信号機の音、駅からの放送、電車の音、飲食店のドアから漏れる賑やかな音声などが聴こえた。

 そして、中央線に乗りたかったので、ホームに着いた。電車が遅れていたので、状況説明するための放送が多かった。落ち着かなかった。スマホで運行情報を確認した。

2023.8.26(土)

ワークショップの会場のBGM:EDM?

 今日から渋谷のCCBTのワークショップに参加することになった。初日なので、ワクワクした。昼休憩を挟んで午後3時くらいまで参加者のみんなの自己紹介を行なった。そして最初のレクチャーまで15分くらいの休憩時間があった。昨日の夜、あまり眠れなかった私は、すごく眠くなってきた。でも、みんなテンションが上がっているので、休憩中でもディスカッションしていて会場が賑やかになっていた。そのとき、自分の耳に流れていたBGMに驚いた。EDMだった。音量は大きくなかったけど、リズムは速かった。休憩時間だけど、眠くなっている私は、心がイライラして、全然落ち着かなかった。あのBGMにずっと注目していた。予定時間通りレクチャーが開講されたけど、BGMは開講した2、3分間も流れ続けた。他の参加者が気づいたかどうかわからないけど。

エアコンの吹き出し口から風の声

 ワークショップの会場は普通の部屋より広いので、室内の温度を抑えるため、家庭用のエアコンより強い冷房が設置されていた。会場は4つのドアがあった。それぞれのドアの上の壁に4つの吹き出し口が設置されていた。だから、合計16個の吹き出し口だ。そのなかの4つの口から出る風の音が、とくに大きく聴こえた。ずっと気になっていた。講義のときも、休憩のときも、自由なディスカッションのときも、聴こえていた。

さいごに

 今回のブログで2023.8.21~2023.8.27の週の「騒音日記」を公開しました。これからも、「騒音日記」を引き続き書きます。

ギリシャ旅行 アテネ交通機関編

はじめに

 こんにちは。ネットワークデザインスタジオM2の及川です。ついに学生最後の年です。長く休みをもらえるのは最後かもしれない…!ということで、夏休みに同学域の友人と11日間のギリシャ旅行へ行ってきました。今回は、アテネでの交通機関について紹介したいと思います。

パルテノン神殿

今回訪れた場所

 今回の旅程は以下です。

アテネの交通

 アテネでの交通は、電車とバスを利用して移動しました。以下は電車の路線図です。

アテネの路線図

出典: Athens Metro Map 2023/2024 | Englobia Travel

 市内から、Doukissis Plakentiasより先に行くためには、基本的に空港チケットが必要になります。電車とバスは基本的に同じチケットで乗ることができます。基本的なチケットの種類は以下です(他にもあるため詳細はホームページをご確認ください)。

シングルチケット

種類 料金 注意事項
90分チケット 1,2€ X80系のバスおよび空港/市内間の移動は含まない
1日チケット 4,1€ 空港/市内間の移動は含まない
5日チケット 8,2€ X80系のバスおよび空港/市内間の移動は含まない
3日観光チケット 20€ 空港/市内間の移動を往復分含む

空港チケット

種類 料金 注意事項
バス専用 片道 5,5€
片道 9€
往復 16€

出典: Prices of Products – OASA

※ 片道・往復チケットは有効化(機械などにタップした瞬間)から90分間利用することができます。

 ここで注意した方がよいのが、どのチケットを買っても見た目が同じということです。複数のチケットを購入した場合、しっかり分けて管理すると良いと思います。

 ちなみに、バス専用チケット以外の空港チケットでは、空港から市内の駅で電車を降りた後、市内の移動に使うことも可能です(市内の駅で電車の乗り換えやバスの乗り換えができます)。空港チケットという名前だったため、空港から市内圏に移動した後、市内での移動には使えないのかと思いましたが、窓口のお姉さんに可能であることを教えてもらいました。

 日本では、乗った距離に応じて料金が変わることが多いですが、アテネでは時間制でした。バスでは乗る際にしかタップしないため、ガバガバな気もしますが…(笑)

私たちが購入したチケット

 一度目のアテネでは、空港チケットの往復チケットと、シングルチケットの5日チケットを購入しました。3日間だけだったので、90分チケットを複数回購入した方が安く済んだかもしれないのですが、いちいち時間を確認したり、5日チケットのほうがお得だった…などと落ち込んだりするのも嫌だったので、このチョイスにしました。一度目では、空港と市内の移動に空港チケットを、市内の移動には5日チケットを使って移動しました。
 二度目のアテネでは、空港チケットの往復チケットを利用しました。どのチケットを買うべきか分からす、窓口で購入しました。一つ前で触れた、空港チケットでも市内を移動することができることはここで教えてもらいました。危うく空港チケットのほかにシングルチケットを買うところだったので、思い切って尋ねることも大事だなあと感じました。

公共交通機関の治安は?

 スリが多いと聞いていましたが、今回のアテネでの移動では物をすられたり危険なことに巻き込まれたりすることはありませんでした。私たちも、スリが多いということは事前知識として持っていたため、荷物から目を離さないことやチャックに鍵をかけるなど徹底していたおかげかもしれません。ただ、友人が駅のホームでスマホをいじっていたら、現地の男性が危ないからしまった方がいいよと声をかけられていたので、やはり気を抜いていると危険なのかもしれません。雰囲気としては、すごく大きな声で喋っている若者や、大きな音で音楽をかけている人をちらほら見かけました。関わらなければ問題ないと思いますが、少しドキリとしました。また、緑ラインの電車は落書きがすごいです。どこでどうやって描いているんだろう…

アテネ市内 緑ラインの電車

アテネでの交通に関する思い出

  1. 堂々とした無賃乗車

 アテネで電車を降りた際に、スーツケースを持っていたためエレベーターを利用しました。すると、もうドアがほぼほぼ閉じかけているにもかかわらず、現地の若い女性が必死に乗り込んできたのです。少し不思議に思いながら、改札階へ到達し開くボタンを押して女性が降りるのを待ちました。しかし、一向に降りる気配がありません。友人と顔を見合わせてエレベーターから降り、改札を通ろうとした瞬間、友人が開けたゲートをその女性が強行突破してきたのです(笑)その後、彼女はありがとうとギリシャ語で一言残して立ち去って行きました。日本でもたまに改札を無理やり通る人は見かけたりしますが…アテネではこのように無賃乗車をしている場面を何回か見かけました。直接の危害は特にないですが、あまりの手慣れさに少しびっくりした出来事でした。

  1. アコーディオン奏者

 アテネの電車の中では、アコーディオン奏者の方々を何回か見かけました。特に多いのは、空港と市内を結ぶ電車の中でした。若い夫婦で演奏をしていたり、お母さんが演奏、小学生低学年くらいの息子がチップを集めていたりしていました。旅行の初日に見かけた際には、友人と「本当に儲かっているのかな。まあ成功体験があるからやっているんだろうけど」などと会話していました。チップを入れる人を見かけなかったからです。しかし、旅行最終日の市内から空港へ向かう電車の中では、何度かチップを入れる音が聞こえました。推測するに、これから母国に帰る旅行者が、余った小銭くらいなら…と入れているのではないかと思います。残念ながら、私は小銭をほぼ使い切ってしまっていたので渡すことはできませんでしたが、おそらく手持ちがあったら同様にしていたかもしれません。人の心理読み取って商売する人はどこにでもいるもんだなと感じたのです。

おわりに

 今回は、アテネ交通機関について紹介しました。東京の電車や地下鉄とは違いシンプルな路線図をしているので、何日間か乗っているうちに路線図を見なくても駅名がわかるようになったのが嬉しかったです。島と島の移動などでもいくつかエピソードがあるので、また次回紹介したいと思います。

騒音日記(二)

 この日記は、自分が聞こえた騒音や感じた騒音を記録します。とくに、僕に影響を与えた騒音や感想を記録します。

目次

はじめに

Rainy day by Samuel YAN (https://openprocessing.org/sketch/2016869)

 こんにちは。アンです。先月の「騒音日記(一)」に引き続き、今回は2023.8.14〜2023.8.20の週の日記を公開します。

2023.8.14(月)

豪雨の音

 最近、台風7号が日本の本州に近づいている。先日、天気予報によると、台風7号が関東に向かっていたが、関西方面に向かっていた。でも、強風、豪雨などが起こった。ずっと雨が降っていたわけではないけど、台風のせいで大気は不安定だった。いきなり大粒の豪雨が降り、窓から外の風景が見えなくなることもあった。そのため、雨の音も大きかった。家の窓ガラス、ベランダの床、駐輪場のビニール製の天井などに当たる雨音はシンフォニアのように聴こえた。

2023.8.16(水)

電車でお隣さんからの話し声

 今日、座れたのはよかったけど、左と右に座った2人の外国人は知り合い同士だった。耳だけなく目もうるさかった。

 最初は右側の席に欧米人の女の子が座った。2、3駅を経て左側の席にも女の子が座った。そこまで、全然違和感がなかった。みんな普通に座っていた。でも、いきなり右側の方が頭を左に向かって何かを話した。俺に話しているかと疑うと、左側の方が頭を右に向けてきた。「あ!ヤバ!知り合い同士の真ん中に座った。それも英語で話し合っている外国人!」と考えていた、あの瞬間に。でも、自分もそろそろ降りるので、そのまま我慢して座っていいと判断した。引き続き、イヤホンのなかで流れる音楽と手に持っている本に集中したかった。日本人として、電車で静かにするのが基本中の基本のマナーだが、外国人には通じないそうだ。自分の左と右のコミュニケーションが止まらなかった。話の内容はイヤホンを使って音楽を聴いていた私にも届いた。話し声が聞こえただけではなかった。右側の方がスマホを持って左側に渡った。なんか、ある写真やニュースを共有した。真ん中に座っていた私にとって、本当にうるさかった。全然本に集中できなかった。

賑やかなサンシャイン60通り

 サンシャイン60通りとは、JR池袋駅東口からすぐのグリーン大通りの東口五差路交差点とサンシャイン60を結ぶ約200〜300mの通りだ。池袋最大の繁華街で、深夜から早朝にかけての時間帯以外は歩行者天国になっている。その短い道路に不思議な音風景が存在する。いつも人が多いので、人間からの話し声、笑い声、足音などが聞こえる。また、道路両側の店舗から外に向かうスピーカーがたくさんあって、それらのスピーカーから宣伝用の情報や告知などが流れている。さらに、街灯の上部についているスピーカーもあり、そこからの宣伝用のCMとか曲とかもずっと放送されている。うるさいとも言えるほどの賑やかさを耳に感じた。街灯の上部にあるスピーカーは多分指向性があるので、異なるスピーカーから曲が違う、歩きながら区域によって聴こえる曲が変わる。同じ街灯の上に、向かっている方向が違う2つのスピーカーがついている。その同じ街灯上の2つのスピーカーから違う曲や内容が放送されている状況もある。あの周辺に立つと、両耳から聴こえる情報が違った。なんか不思議だと思う。

交差点の信号機からのサイン音(2種の音)

 池袋の東口五差路という交差点で信号を待った。赤信号から青信号になる瞬間、2種のサイン音が流れた。信号機に詳しくないので、そのサイン音で伝えるメッセージがわからなかった。どのような音かというと、一つは、周波数が違う2個の電子音がセットでゆっくり流れている。もう一つは、同じ周波数の電子音3個がセットになって速く流れている。

 「日本の音響装置付信号機[1]」のウィキペディアによると、誘導音には擬音式とメロディ式がある。池袋で聞いた2種のサイン音は擬音式だと思う。擬音式では「カッコー」ないしは「カカコー」が東西または南北もしくは主道路横断用に、「ピヨ」ないしは「ピヨピヨ」が南北または東西もしくは従道路横断用にそれぞれ使用される。

2023.8.18(金)

Spacesの録音データのなかのサイレン

 今朝、学校に行くバスでX(旧Twitter)のSpacesの録音データの「Casey REAS、GenArtの歴史について話そう!」を聞いた。3人でアーティストのCasey REASやジェネラティブアートの歴史について話し合っていた。話を聞きながら、救急車のサイレンの音に気づいた。2回も聞いた。会話の内容より、サイレンの音に注意した。たった数秒間だけど。イヤホンを使って聞いたので、あのサイレンを聞いた際、録音データのなかの音か、現実世界で私とすれ違った音なのか分からなくなった。バスの車窓から外を見てチェックし、あのサイレンは録音データのなかの音だと確信した。

大判プリンタの機械音

 プリンタ:EPSON SureColor P6050

 クリーニング中の音

 研究室をPRするためのA1サイズのポスターを印刷する必要があった。自分が担当したので、学校の大判プリンタを初めて使った。印刷の準備を終え、印刷するボタンを押すと、プリンタから大きい音が出た。びっくりした。普通の印刷中の音よりうるさかった。何かが高速にずっと回っているような音と強い風が吹いている音だった。プリンタのスクリーンを見ると、「クリーニング中」と表示されていた。クリーニング完了後、印刷が始まるとスクリーンに「印刷中」と表示された。印刷中も多少機械音が発生した。普通の印刷の音だった。その後、紙がロールされ、印刷サイズに合わせて紙が切れる音もあった。そして、「クリーニング中」のような音がもう1回数秒間聞こえた。最後、機械が止まって静かに戻った。

さいごに

 今回のブログで2023.8.14~2023.8.20の週の「騒音日記」を公開しました。これからも、「騒音日記」を引き続き書きます。

参考資料

[1] 日本の音響装置付信号機 - Wikipedia

展覧会情報サイトにおけるジャンル分けについて調べてみた

はじめに

こんにちは。ネットワークデザインスタジオM2の及川です。
今回は、展覧会情報サイトにて、展覧会や美術作品などがどのようにジャンル分けされているのかを調べてみました。

方法

Google検索で「展覧会情報」と検索する。検索結果の上から5つの展覧会情報サイトにて、展覧会や美術作品のジャンルがどう分けられているかを調査する。調査日時: 2023.09.10

今回参考にさせていただくサイト

調査結果

美術館・アート情報 artscape

美術館・アート情報 artscapeでは、展覧会スケジュールからジャンルごとに検索することはできませんでした。ただし、「Artwords®(アートワード)」にて、ジャンルごとのワード検索が提供されていたため、今回はそちらを参照いたします。 - 美術 - 身体芸術 - デザイン - 写真 - 建築 - ファッション - 映像 - 音

美術館・展覧会情報サイト アートアジェンダ

美術館・展覧会情報サイト アートアジェンダでは、展覧会や美術作品のジャンル分けは行っておらず、タグによって柔軟に対応しているようです。展覧会の詳細ページについているタグでは、アーティスト名をタグにしてつけているものが多く見られました。

Tokyo Art Beat

  • 平面
    • イラスト
    • ドローイング
    • 漫画
    • 日本画・浮世絵
    • 写真
    • 版画
    • 絵画・平面
  • 立体
  • デザイン
  • 工芸
    • 陶芸・漆
    • 工芸・民藝
    • 手芸
  • 映像
    • 映像・映画
    • アニメーション
  • 資料展示
    • 考古・歴史・民俗
    • 文学
    • 自然・科学
  • その他
    • メディアアート
    • 音楽
    • パフォーマンス
    • 芸術祭
    • アートフェア
    • 公開制作・滞在制作
    • 公募展
  • イベント

美術手帖

美術手帖では、展覧会のジャンル分けは行われておらず、タグによって柔軟に対応しているようです。展覧会の詳細ページについているタグでは、アーティスト名と美術館名をタグにしてつけているものが多く見られました。

美術展ナビ

美術展ナビでは、展覧会のジャンル分けは行われておらず、タグによって柔軟に対応しているようです。展覧会一覧ページや展覧会の詳細ページについているタグでは、美術館名と美術館の地域(関東/東京など)をタグにしてつけているものが多く見られました。

全体を通して

展覧会や美術作品をジャンル分けしているサイトが2件、ジャンル分けを行っていないサイトが3件という結果でした。また、ジャンル分けを行っているサイトの中でも、大きくざっくりわけているサイトと細かく分けているサイトが見られました。ジャンル分けを行っていない場合、タグによって絞ることができるサイトが多いようですが、あくまでアーティスト名や美術館名に留まっており、ジャンルからの検索はできないようです。展覧会や美術作品を型に当てはめることに抵抗があることへの配慮かと推察しますが、どのように扱うのが適切か検討が必要だと感じました。

Webページでユーザが読んでいるセクションのタイトルをヘッダーに表示したい(React)

はじめに

お久しぶりです。ネットワークデザインスタジオM2の及川です。
今回のテーマは、「Webページでユーザが読んでいるセクションのタイトルをヘッダーに表示したい(React)」です。
Webページ制作時に試行錯誤した結果たどり着いたコードを残したいと思います。開発はReact(Next.js)を使用しています。
また、公式があまり推奨していないものも使用しています。全く良いコードではないかと思います。「とりあえず動いた!」記録になりますのでご了承ください。

対象読者

  • HTML, CSS, JSがわかる
  • Reactはある程度わかる(詳しく触れません)
  • ヘッダー等にユーザが読んでいるセクションのタイトルを表示したい または、目次でユーザが読んでいるセクション箇所(現在地)を目立たせたい

想定されるWebページ

本実装が必要になったのは、以下のようなWebページ作成時です。

想定されるWebページの例
ヘッダーにはユーザの現在のセクションタイトルが表示されていて、そこをクリックすると目次がでてくるようなWebページや、目次がサイドバーとして表示されていて、ユーザの現在のセクションタイトルが目立つように表示されているようなWebページです。
学習系のサイトやブログなどで見ることが多いかと思います。
今回は目次の機能は省略し、ヘッダーにユーザの読んでいるセクションのタイトルを表示する、以下のような簡単なWebページを作成した時のコードについて書きたいと思います。

ざっくりまとめると、ステート関数でヘッダー内の文字を管理しようとしたら要らない再描画が起こってしまったのでrefを使って管理した!という内容です。

開発環境

  • React 18.2.0
  • React Intersection Observer
  • Tailwind CSS 3.3.2
  • Type Script 4.9.5

おおまかな構造

  • index.tsx
    • App.tsx
      • Headerコンポーネント
        ヘッダー内の文字列を指定する関数(handleHeaderText)を用意する。親(App.tsx)からも使用できるようにする。
      • MainContentsコンポーネント
        • Sectionコンポーネント
          React Intersection Observerでスクロールを管理する。セクションに入った/セクションから出た時に、Headerコンポーネント内で用意したhandleHeaderTextを用いてヘッダーの文字列を変更する。

最終的なコード

React Intersection Observerが必要となるため、インストールしてあります。

npm install react-intersection-observer

index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import { App } from "./App";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

こちらに関してはよくあるサンプルアプリケーションと同様のため、スキップします。

App.tsx

import { useRef } from "react";

import { Header } from "./components/Header";
import { MainContents } from "./components/MainContents";

const data = [
  {
    id: "apple",
    label: "はじめに",
    body: "顔は処の病気聴衆らからゴーシュが過ぎ小太鼓たた。ではいきなりくたくたましでにとって舞台でしまし。まじめたたんましもなくところが楽長の愉快げの所へはにわかに元気でうが、みんなまで東をしれものんまし。わからすぎ何も血を悪いならので途中の楽長のゴーシュ人にし第何先生がいのまねが叩くていんまし。",
  },
  {
    id: "banana",
    label: "第1章",
    body: "係りは楽隊をたいへんにやめが棒に孔のようがやってホールを見てどんなに皿を仕上げてやりだ。ぐるぐるおもわず風に小節がしんなら。みんなちょっとにセロにあけてむしをなっただ。一つにすましますなら。 「キャベジからくわえだろ。壁、やつをゴーシュ。入れ。」そこはたくさんのときのこれから前のときをきますなら。手は枝からすゴーシュをいっが孔で壁へしからどうか半分ひるられるますうちが出たで。まるでおねがいきいて、してなおりから来たて気持ちがでは拍子をそのまま時きいだまし。「ドアき。たばこに考えだ。いろわ。おれは何に狸を思えからじゃやめ音楽は黒い方たながらね。」それは愉快そうがひとべゴーシュドアにしとだ舞台のセロを弾いて弾いと落ちついててるです。かぶれははせてゴーシュに聞えるたな。誰もすっかりゴーシュは悪いどころでてホールもいきなり悪いのましまし。「こんどの半分の中から。なっ。」きみはいきなり下げなな。",
  },
  {
    id: "orange",
    label: "第2章",
    body: "マッチも下からあわせてひとつない。では一生けん命はぜひなるたらた。うるさい拍手だっと合わて行っからかっこうで怒るようた楽長をしてするとのそのそ下を番目叫びだた。またかとおっかさんはてやっとなっましたてありがたいものをは一生けん命は形のおいでたです。先生はあなたをさっきまし子のままおれにくわえないようになあタクトかっこうを口へおどすてそれかどなりんが睡ててましまし。「するとぎっしり一生けん命のあと。する。」あと許して飛びだしたかとはいりてなぜゴーシュを狸にどうぞなってこどもいじめなな。「愉快た。そのままきかせて行っまし。",
  },
  {
    id: "grape",
    label: "第3章",
    body: "こんなんは勢のゴーシュだんない。君がこのうまくつかれるたんが。係り。せいせいじゃあぱたっと狸一ぺんも広くのますなあ。ゴーシュをドレミファをやっていぼくらがこのかっこう虫かっかたりあと屋のホールなんての頭ゴーシュを結んてくださいたすっかりみんなのちがいもこう出ことな。用口さん。",
  },
  {
    id: "peach",
    label: "おわりに",
    body: "晩は寄りのかっか頭たちを曲がつけ楽長ないた。またまたまっ黒たでて風車ですなら。元気ましましもんたはだでは先生のまじめ汁のままへはすっかり生意気ただて、ぼくほど狸が出られるんましまし。もっすぎそれも扉をいいたとたくさんの扉の狩屋を聞える第三ろ汁のきょろきょろを見からいるなくだ。巻は毎日はいっでいだろ。本気は万落ち糸のようから聞いてしまうた。音もかっこうばかやどこと見ていで。セロはひもへあんまりとねむりからかっこうをいちどのようをあわてとゴーシュからわかってじっと子で叩くからやるまい。ぼろぼろじつにゴーシュを狸がききだた。みんなまたに呆気に困るて向うを来ですまし。ゴーシュが云いました。「こどもが出だ。棒、みんなをゴーシュ。叫び。」これはたくさんのままのすこしこんどのときをあれたます。頭はタクトにお晩をはいって野ねずみを狸が叫びてさっさとこんどあわてられるなかっ所へ云いたた。よほど病気ありて、こぼして見るてくださいんてあとをまたみみずくをいつも日ひいたませ。「壁い。からだを居りた。見るな。",
  },
];

type HeaderComponentType = {
  handleHeaderText: () => void;
};

export const App = () => {
  const headerRef = useRef<HeaderComponentType>(null);

  const headerTextRef = useRef<{ id: string; label: string }>({
    id: data[0].id,
    label: data[0].label,
  });

  const handleHeaderText = () => {
    if (headerRef.current) {
      headerRef.current.handleHeaderText();
    }
  };

  return (
    <>
      <Header headerTextRef={headerTextRef} ref={headerRef} />
      <MainContents
        data={data}
        headerTextRef={headerTextRef}
        handleHeaderText={handleHeaderText}
      />
    </>
  );
};

ここではまず、dataという変数名に対して本文を用意しています。セクションごとに、id、label(タイトル)、bodyを用意しています。
続いて、Headerコンポーネントで用意した関数を使えるように、HeaderコンポーネントへheaderRefを渡します。また、Headerコンポーネント内で描画する文字列をheaderTextRefで渡します。
行いたいことは、MainContents内で新しいセクションに入ったことが検知された時に、新しいセクションのタイトルをHeaderコンポーネントに渡すことです。
当初、ステート関数でheaderText, setHeaderTextを用意してそれぞれのコンポーネントに渡していたのですがうまくいきませんでした。ステート関数で管理した場合、HeaderだけでなくMainContentsも再描画されてしまうからです。今回のサンプルWebページでは文字のみのため特段問題ないのですが、MainContents内に画像や動画が入っていた場合、スクロールしてセクションを跨ぐたびに再描画される…という事態になってしまいます。それを防ぐためにrefで管理を行うことにしました。

Header.tsx

import { forwardRef, useImperativeHandle, useState } from "react";

type HeaderText = {
  id: string;
  label: string;
};

type Props = {
  headerTextRef: React.MutableRefObject<HeaderText>;
};

export const Header = forwardRef(({ headerTextRef }: Props, ref) => {
  const [headerText, setHeaderText] = useState<string>(
    headerTextRef.current.label
  );

  const handleHeaderText = () => {
    setHeaderText(headerTextRef.current.label);
  };

  useImperativeHandle(ref, () => {
    return {
      handleHeaderText: handleHeaderText,
    };
  });

  return (
    <header className="sticky top-0 h-20 flex items-center justify-center bg-slate-600">
      <p className="h-fit text-l text-center text-white font-bold">
        {headerText}
      </p>
    </header>
  );
});

ここでは、forwardRefを使用してhandleHeaderTextを親コンポーネントから使えるようにしています。ヘッダー内の文字列はここではセットしていません。

MainContents.tsx

import { Section } from "./Section";

type HeaderText = {
  id: string;
  label: string;
};

type Data = {
  id: string;
  label: string;
  body: string;
};

type Props = {
  headerTextRef: React.MutableRefObject<HeaderText>;
  data: Data[];
  handleHeaderText: () => void;
};

export const MainContents = ({
  headerTextRef,
  data,
  handleHeaderText,
}: Props) => {
  return (
    <div className="max-w-md py-10 flex flex-col gap-20 mx-auto mb-96">
      {data.map((item) => {
        return (
          <Section
            item={item}
            headerTextRef={headerTextRef}
            handleHeaderText={handleHeaderText}
            key={item.id}
          />
        );
      })}
    </div>
  );
};

ここはSectionコンポーネントを並べているだけなので説明を省きます。

Section.tsx

import React, { useEffect, useRef } from "react";

type HeaderText = {
  id: string;
  label: string;
};

type Item = {
  id: string;
  label: string;
  body: string;
};

type Props = {
  headerTextRef: React.MutableRefObject<HeaderText>;
  item: Item;
  handleHeaderText: () => void;
};

export const Section = ({
  headerTextRef,
  item,
  handleHeaderText,
}: Props) => {
  const ref = useRef<HTMLElement>(null);
  
  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting && entry.boundingClientRect.top < 90) {
            if (
              entry.target.querySelector("h2") === null ||
              entry.target.querySelector("h2")!.textContent === null
            )
              return;
            headerTextRef.current = {
              id: entry.target.id,
              label: entry.target.querySelector("h2")!.textContent!,
            };
            handleHeaderText();
          }
        });
      },
      {
        threshold: [0, 1],
        rootMargin: "-90px 0px -90px 0px",
      }
    );

    if (!ref.current) {
      return;
    }
    observer.observe(ref.current);

    return () => {
      if (ref.current) {
        observer.unobserve(ref.current);
      }
    };
  }, []);

  return (
    <section ref={ref}>
      <h2 className="p-4 mb-4 text-2xl font-bold bg-slate-200">{item.label}</h2>
      <p className="leading-7">{item.body}</p>
    </section>
  );
};

ここでは、React Intersection Observerを使って、スクロールを監視しています。画面内に新しいセクションが入ってきた場合、Header.tsx -> App.tsx -> MainContents.tsx -> Section.tsxと渡ってきたhandleHeaderText関数によってヘッダー内の文字列を変更しています。

おわりに

今回記載したコードは推奨されていないものを使っていたり、ややバケツリレーのような形になっていたり、よろしくないコードかと思います。今後、より良いコードへアップデートしていきたいと思います。