桐生あんずです

日常やプログラミングについて書いています。

谷山浩子を毎日のように聞いている

日常

桐生あんずです。

大昔から家にあるipod touchにTSUTAYAで借りてきた谷山浩子のアルバム曲を入れたことがあったのだけれど、いつの間にか母親がそのipod touchを使うようになりリビングにある古めのスピーカーで連携させて谷山浩子の曲を流すようになった。

ipod touchに曲を新しく入れる方法を母親は知らないので、延々と谷山浩子の曲を流すようになっている。

 

谷山浩子に関する大学時代の思い出 

谷山浩子に関しては大学二回生の頃にやくしまるえつこがカバーしている「恋するニワトリ」を聞いて大ハマりした流れから原曲を辿ったことがきっかけで知った。

そこからしばらくしてTSUTAYAで「白と黒」と「HIROKO TANIYAMA '80s」のアルバム二つを借りて谷山浩子の世界観に浸かることになったのだった。

「ねこの森には帰れない」「カントリーガール」「まっくら森の歌」「てんぷら★さんらいず」「意味なしアリス」辺りのメジャーな曲に特にハマるようになり、一瞬だけ下宿先にあったストラトのエレキギターでネットでコードを見て弾き語りをしてみるなどの思い出もある。

その時期に京都公演ツアーがあって友達に誘われて生の本人を見たこともある。

調べてみたら当時のツイートがあったので掲載。

この時には行ったばかりということもあってポジティブな感想を述べているのだけれど、裏を返せば「意味なしアリス」と「まっくら森の歌」以外は知らない曲がメインで、リクエスト形式のコンサートだったこともあり谷山浩子のガチオタク達が「いかに大衆からは知られてなさそうなニッチな曲を言えるかどうか」選手権と化しており、かなり凄まじい場になっていた。

 

それからもぽつぽつと谷山浩子の曲を聞いていたけれど、社会人になって実家に戻ってからは最初の話通り毎日のようにリビングで流れてくるので聞く頻度はかなり上がっている。

 

谷山浩子と現在

毎日のように聞くようになってから、今まで聞いたことのあるアルバム以外の曲を聞いてみようと思い、デビュー40周年記念コンサートのCD音源をiTunesから購入した。

デビュー40周年記念コンサート at 東京国際フォーラム

デビュー40周年記念コンサート at 東京国際フォーラム

music.apple.com

このアルバムではコンサートの生歌が収録されていて、今まで聞いてきたアルバムの曲も多く収録されているのだけれどほんのちょっぴり違ったテイストに仕上がっていて別の曲として楽しめる良さがある。(谷山浩子の曲、様々なアルバムで既存曲をリメイクして別の音源として録り直していることがよくあるので好きな曲を様々なバージョンで聞くという楽しみが存在する)

 

また、デビュー時から今までの思い出を振り返るトークも収録されており、それが谷山浩子の背景を知る上でかなりよかった。

トークの中では、「この頃はメルヘン歌手というジャンルが存在しなくて珍しがられました。音楽評論家の人に記事で『いいとは思うけど、このままだとメルヘンババアになるよ』って言われてました。それで、この通りメルヘンババアになりました！」と語っていたり、

「若くなくなることが怖いんじゃなくて、年をとるにつれて年齢にふさわしい自分をプロデュースできるんだろうか？そういうのできないんじゃないか？どうしよう？と怖くなっていた。でもそうして30年、40年経ったけど変わらないまま過ごせました。(中略)どういう年をとっていくか分からない人がいると思うんですけど、そのまま年とります。」と、加齢していく自分の立ち振舞いを考えることはありつつも、自分らしさを追求して保ったまま生きてきた人なんだなあということがすごく伝わってきた。

 

谷山浩子の曲調は確かにメルヘンチックなところもあるのだけれど、失恋や叶わない恋についてよく歌っていたり、「行ったらもう帰れない/帰らない」という言葉をやけに強調している曲が多く、切なさを強く感じるのが魅力的であるように思う。

 

そもそも、自分が元々音楽に興味を強く持ったのがSound Horizonからで物語要素の強い音楽に対しては実家のような安心感を覚えてしまうことも谷山浩子の曲に惹かれてしまう理由の一つのような気がするのだけれど、そこを掘り下げると話が長くなりそうなのでここで締めます。

 

コロナが収束していれば2年後には50周年ライブをやってくれるはずなのでも変わらずに健やかに過ごしていて欲しいです。近況を追ってみるとTwitterでどうぶつの森を実況し続けていて元気そうでよかった。

 

MySQLでSQL文を書く時に末尾に\Gを付けるとちょっと見やすくなる

プログラミング

桐生あんずです。

研修でSQLをちょろっと書くときがあったのだけれど、そのときに先輩社員の方から「SQL文の末尾に\Gを付けると縦に表示されてちょっと見やすくなりますよ」という知見を教えてもらったのでメモ。初めて知りました。

比較

SQL文の末尾に\Gなし

mysql> SELECT * FROM rules WHERE id = 1;
+----+-------------------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------+----------------------------+----------------------------+
| id | title | description | created_at | updated_at |
+----+-------------------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------+----------------------------+----------------------------+
| 1 | 毎日フィットボクシングを30分やる | リモート続きで不健康になっているので家で運動しようと思い購入して意外と長続きしています | 2020-05-01 03:53:09.882505 | 2020-05-01 05:22:53.956537 |
+----+-------------------------------------------------+-----------------------------------------------------------------------------------------------------------------------------------+----------------------------+----------------------------+
1 row in set (0.00 sec)

SQL文の末尾に\Gあり

mysql> SELECT * FROM rules WHERE id = 1 \G;
*************************** 1. row ***************************
         id: 1
      title: 毎日フィットボクシングを30分やる
description: リモート続きで不健康になっているので家で運動しようと思い購入して意外と長続きしています
 created_at: 2020-05-01 03:53:09.882505
 updated_at: 2020-05-01 05:22:53.956537
1 row in set (0.00 sec)

便利〜。

追記

\Gは;の代わりなので末尾に;を付けなくても動作するとのことです。セミコロンのことを気にしなくても大丈夫なのもありがたいですね。

意図に沿ったHTML要素でマークアップすることの重要性(アクセシビリティ)を考える

プログラミング

桐生あんずです。 ここ最近は新卒研修のカリキュラムとしてオリジナルのWebサービスをRailsとAngularを使って開発していて、社内の人たちから毎日コードレビューを受けています。その中で、以下のようなやりとりがあって興味深かったので学んだことを書き残しておきます。

経緯(書いたコードと指摘の内容)

最初、以下のように<a>タグでAngularのRouterModuleで用意されているrouterLink属性を利用して画面遷移のリンクを用意するコードを書いたのだけれど、

<a routerLink="/rules/{{ rule.id }}">詳細を見る</a>

<button>タグのブラウザのCSSを使い回したくなったのと、この後の記述に<button>タグで用意した削除の処理のボタンをマークアップしていたのでどちらも<button>タグで書いた方がすっきりするのでは？と思いつき、以下のように書き換えたのだった。

<button class="a-rule-show__button" routerLink="/rules/{{ rule.id }}">詳細を見る</buttton>

このコードをプルリクで出したところ、以下のようなレビューコメントをいただき「なぜそうしてはいけないのか」について考えてみることになった。

「いきなり結論から書きますが、特別な理由がない限り、リンクナビゲーションを <a>タグ以外で実装することは避けるべきです。 なぜなのかは、いったん自分で調べて考えてみてください。ちょっと難しいので考えても浮かびそうになければslackで聞いてください！」

そして色々調べて考えてみたところ、以下のような理由でこの記述はアンチパターンに当たることが改めて理解できたので紹介します。

セマンティクスに沿ったマークアップ設計はアクセシビリティを向上させる

HTMLで用意されている標準のタグ(<h1>, <nav>, <li>など)はそれぞれ意味が定義付けられており、今回使用した<button>タグならば「クリック操作を受け付ける」という意味を持っている。そして、<a>タグはナビゲーション、つまりリンクの行き先を示す時に使われる。

developer.mozilla.org

このように「○○は〜を表すものである」という考え方は セマンティクス(意味論) と呼ばれており、コードの断片に対して役割・意味を位置付けをするものである。

developer.mozilla.org

その考え方にしたがってブラウザの中で標準用意されたCSSはHTMLタグに対してそれぞれ文字のサイズや幅などのプロパティをセットしており、HTMLタグをマークアップするだけでユーザーがある程度想定している画面を用意してくれる。

ただ、標準のCSSをリセットしたり上書きをしてしまえばその見た目を打ち消すことは容易である。

(当たり前だけれど、多くのサービスのUI/UXは標準のCSSを打ち消してクラスを追加して綺麗なUI/UXを用意している)

そのようにCSSを打ち消した上でもHTMLタグを意味通りに使うことを正しく求められるのは、アクセシビリティに優れたページを作り上げる必要があることが一つの理由であると言える。 アクセシビリティについてはMDNの「アクセシビリティとは？」の記事の中で以下のように定義されている。

アクセシビリティというのはあなたのウェブサイトを可能な限り多くの人に利用してもらうようにすることです。かつては我々はアクセシビリティのことをハンディキャップを持つ人々のためのものだと考えていましたが、現在はモバイルデバイスや遅いネットワークを利用している人々のためのものでもあると考えられています。

ここで自分のコードに立ち戻る。

<button>タグを使ってナビゲーションを用意しているが、もし読み上げ機能でHTMLのサイトを巡回している視覚障害者の方がいたと仮定する。

その場合、<button>タグを読み上げられても「クリック操作を受け付ける」ということしかわからず、「ナビゲーションリンクがある」という発想にたどり着くことまでに時間がかかってしまうことが予期される。

このシチュエーションはアクセシビリティが悪いという状態に陥っていると形容できる。この状況を改善するためには、本来「ナビゲーションリンクがある」という意味を持った<a>タグに置き換えることが求められるのである。

この具体例は断片に過ぎないので詳しくはMDNのアクセシビリティ関連の記事を読むのがお勧めです。

developer.mozilla.org

developer.mozilla.org

まとめ

一言で説明すると「使い方が定義付けられているHTMLタグをその意図に沿わずにマークアップを行うとアクセシビリティが低いサイトが出来てしまうのでやめましょう」ということなんだけれど、この結論に至るまでにはアクセシビリティとは何かについてまず考える必要がある。

その理解を深める中で、MDNの記事内で事細かになぜアクセシビリティを重視すべきかということが解説されていてWeb開発をやる上で一読しておくとすごく為になると思った。

そして、「正しいマークアップを行うだけでハンデを抱えた人が情報をインプットできる」という世界観があるのは結構すごい話だなと思っていて、これもWebの力だなあとエモい気持ちを感じた始めたところでそろそろ締めます。

補足

正しいマークアップを意識することはアクセシビリティを考える以外でも必要な理由があるので、補足説明としてそれらについても羅列しておきます。

MDNの「HTML: アクセシビリティの基礎」から引用

  • より開発しやすい——上述のとおり、ある種の機能がただで手に入りますし、それに、より理解しやすいという点はまず間違いないところです。
  • モバイル機器に関して、より優れている——意味的な HTML は非意味的なスパゲッティ・コードよりも、ファイルサイズの点でほぼ間違いなく軽量ですし、レスポンシブにするのも簡単です。
  • SEO に関しても良好である——検索エンジンは、非意味的な
    などに含まれるキーワードよりも、見出しやリンクなどの中のキーワードの方に重みを持たせているので、ドキュメントが顧客に見つけてもらいやすくなるでしょう。

人とたまに会話できるたまごっち

日常

月1くらいでラグナロクマスターズ(ROのスマホ版のゲーム)を復帰したり休止したりする動きをここ半年くらい続けている。

昨今の状況により、人とリアルに関わることが殆どなくなってしまったせいでコミュニケーション不足を感じるようになってしまい、TwitterやSlackでは補え切れない寂しさを補充したくなって数日前から再開してしまった。

 

ラグマスの仕様を事細かに説明しても無駄に長くなりそうなので省くのだけれど、やっていることは主にひたすら放置狩りやクエストをこなしてレベル上げをしながらアイテム集めと装備強化を頑張るくらいなので盆栽を育てているのとそんなに変わらないような気がする。

また、ネットゲームということでギルドという概念があり、ギルドの中でチャットしたりたまにPT狩りに混ざるなどして軽いコミュニーケションができる要素もある。そんなことをやっていると、簡単に所属の欲求が満たせるような感覚がある。

ギルドの中にはレベルがカンストしているのは当たり前で、課金をしまくって装備や資金がとにかく充実していたり、毎日時間に合わせてボス狩りに張付いているような人もいる。

ここまでハマれると楽しそうだなと思ったりもするけれど、ソシャゲにそこまでの時間と情熱をかけるのは何かを代償にしてしまいそうな予感があり、「まあ今の所はいいかな……」と思いながらゆるく遊んでいる。

 

……という心境をつづってみると、これってネトゲというより「人とたまに会話できるたまごっち」のつもりで私はこのゲームをやりにきているんじゃないかとふと思った。

といった特にオチもない話なんだけれど、ソシャゲに対してあまり強いモチベーションを持つことができずやめることを繰り返している人間なので、珍しくだらだらとだけれど続けられているゲームに対してどのような気持ちで続けられているのか言語化したくなったのでふと書いてみました。

 

蛇足

たまに人と話せることをモチベーションにやっている割にはネトゲの馴れ合い文化に違和感を覚えることがちょくちょくあって、その度に「なんか違うな……」と思いフェードアウトしてしまうことがよくある。

ただ、ギルドにいる昔からの知人たちと深夜にだらだらとチャットをする機会が発生してお勧めの本やとりとめもない近況の話を投げ合っていると、中高生の時にROをしながら別窓でMSNメッセンジャーで今と同じような話をしていたことを思い出してしまい、この時間を2020年になっても続けられていることに関しては悪くないなと思ってしまうのだった。

GWやっていたこと雑記

日常

社会人になってから初めての連休でした。

やったことをただ羅列してもごちゃっとしそうなので、時系列形式で書き残しておきます。

 

5/2(土)

7時40分ぐらいに目が覚めたのでそのまま朝ごはんを食べていつも通りどうぶつの森とfit boxingを交互に遊んでいた。

動物のお医者さんが無料公開されていたので読み始めたらあまりにも面白くて1日かけて読んでしまった。

kiryuanzu.hatenablog.com

 

5/3(日)

この日も7時40分台に目が覚めたので朝ごはんを食べてそのまま二度寝してからどうぶつの森とfit boxingをして再度お昼寝してしまった。

夕方辺りからそろそろ勉強っぽいこともしないとダメそうな気がしてきたのでAWSの紫本を読んでいた。1~2章のVPCの作成の解説の中でどのようにネットワークを構築していくかの流れが丁寧に書かれていて勉強になった。

この日は結構夜更かししてしまい深夜3時ぐらいに就寝した。

 

5/4(月)

寝る時間はかなり遅かったはずなのに。なぜか7時40分台にちゃんと目が覚めてしまい朝ごはんを食べてどうぶつの森とfit boxingをやっていた。ただ、睡眠不足だったせいか身体があまり動かず夕方まで生産的なことをできていた記憶がない。母親と近所の公園を散歩していたぐらいだと思う。

なんとかして動こうと思った矢先、両親の部屋に置いてあったサピエンス全史を開いてみたらあまりにも壮大な人類の歴史の情報が飛び込んできて衝撃を受けてしまい、一気に頭が回り始めたのでその流れで紫本を読み終わらせた。

原始の人類の活動についての話を読んでから最新のコンピュータ関連の情報をインプットするとギャップが発生して脳が変な感じになるのであまりお勧めはできない。

 

紫本を読んでいた結果、今後も継続的にAWS関連の情報はインプットしたいな〜という思いが芽生えつつあったので、Udemyで出されているAWSソリューションアーキテクトアソシエイトの試験講座コースをやることにした。ちょうどセールがやっていて1200円で買えたので嬉しい。

 
5/5(火)

この日は珍しく8時台に目が覚めた。この日もどうぶつの森とfit boxingは欠かさずやっていた。

島に流星群が降ってくる日だったので、フレンド限定開放してみたらTwitterのフォロワーがやってきて黄金のトイレと金のバラと青いバラとその他の珍しい花を置いていってくれた。かなりやり込まれている模様で、8往復(ちゃんと数えていないので確実な数字ではない)ぐらいして帰っていった。

 AWS周りのインプットを進めることができたので残り2日はAngularを頑張って進めようと決意しAngularチュートリアルの2週目に取り組むことにした。

 チュートリアルを写経しながらScrapboxで学習ログを書き残して進めていた。

gyazo.com

 

このチュートリアルと並行しつつ以下の「Angular After Tutorial」というサイトの文献を読んでみたところ、Angularにおける設計原則やRxJSとObservableの概念について復習することができて勉強になった。どちらのサイトも今後更に読み込んでいくことになりそう。

gitbook.lacolaco.net

 

5/6(水)

この日はついに9時台に起きてしまった。普段より遅めの朝食を摂ってからどうぶつの森とfit boxingのノルマを終わらせた。

このGWの期間、生産的な活動がどうしても夕方からスタートすることばかりだったので、今日だけは11時からPC机のある椅子に座ることにした。

 なんとかその目標は達成することはできて、Youtubeで動画を流しながらAngularチュートリアルの続きに着手して最後まで終わらせることができた。

明日からも会社の研修でAngularとどんどん触れ合っていくことになるので、最低限の復習ができたのは良かった。(最終日前と最終日の丸二日かけてやったぐらいなので付け焼き刃かもしれないが……)

この復習で得た知識を元に過去にjQueryで作った性格診断ゲームをAngularでリメイクしてfirebaseにデプロイする所までやれるのが一番良い気がするので、明日の退勤後に元気が残っていたら着手していきたい。

 

そんな感じでした。

また、自分が所属していた大学は祝日も授業日になることがほとんどだったのでちゃんとした連休を過ごすのは6年ぶりなので少しだけ感動してしまった。

こんなご時世なのでほぼ家で過ごしていたけれど、もし何もなかったら先週の木金か今週の木金で有給を取って京都に出向いていたかもしれない。

次の連休の時までには京都に行けるくらいには情勢が落ち着いていて欲しいと切に願っている。

 

動物のお医者さんを読んだ

アニメ・漫画・ゲーム

マンガparkで動物のお医者さんが期間限定で全話無料になっていたので読んだ。

manga-park.com

全119話でそこそこ話数があるのだけれど、最初から最後まで安定感のある面白さで手が止められず1日で読み終わってしまった。

かなり昔から知られている作品のようで、TLでも作品名を何度か目にすることはあったのだけれど今日読むまでほとんど詳細は知らないままだった。(どこかの作品で「シベリアンハスキーが出てきて可愛い」と言及されているのは見たことがあるのだけれど何の作品でその情報を見たのはか思い出せない)

小学生の頃、異様に猫マンガが流行っていてその流れで動物エッセイ漫画を読み漁っていたのだけれどその時期に当作品を知っていたらあまりの面白さに衝撃を受けて数日に1回は読み返すぐらいにはのめり込んでいたと思う。*1

 

一番印象に残っている回は登場人物の親戚で飼われているヨークシャーテリアが皮膚病にかかっていたことが判明し丸刈りにされてチワワみたいな見た目になってしまった話。絵柄が強烈で普通にリビングで声を出して笑いそうになってしまった。

昔の漫画ゆえなのか動物への扱いがそこそこ雑で喧嘩沙汰になって血まみれになっている話が割とあったのも印象的だった。

基本的には平和な動物マンガではあるのだけれど、時代柄なのか進んで喧嘩させたり人間の企みによって軽くひどい目に遭わされたり(人間側もよく動物からひどい目に遭わされる)、それでも共存関係を築いて楽しくやっている世界観のようだった。

作品内で登場する動物は死ぬことはないのでそれで大丈夫なのだと思う。死なないと分かっているので読者側も安心して見てられるので良い。

 

人間側も魅力的な登場キャラクターが多く、特に菱沼さんと漆原教授はずっとブレないめんどくさい人間を貫いていてかなり好感を持ってしまった。実際にモデルがいるっぽいのもすごい。

菱沼さんの就活事情やお見合いや恋愛に対して色々言われる話は、そういう時代だったんだなという感じで見ているとかなり大変そうな状況なのだけれど、菱沼さん自身は最後までマイペースに過ごしながら研究を続けているので悲壮感をあまり感じさせなったのは少し良かった。

 

このようにどんどんと感想が溢れ出てくるぐらいには面白いと思えた作品なので、1日で読み切ってしまったのがなんだか勿体無かったような気がしている。

もし数週間経っても読み返したくなったら書籍版の単行本を購入しても良いかもしれないと考えているけれど、ひとまずはアマゾンプライムで配信されている実写ドラマ版の方を見て心を落ち着かせている。

 

*1:正確にはエッセイ漫画ではないけれど

社会人になってから1ヶ月が経った

日常

桐生あんずです。

社会人になって一つの区切りということで、これからはできるだけ雑な記事でも書いていこうと意気込んでいたのだが、前回書いた記事がそこそこPV数があり満たされてしまい、気付いたら一週間経っていた。

そして社会人になってからの1ヶ月を無事過ごせたことに気付いたので、せっかくだし軽く振り返っておこうと思う。

 

生活の状況

入社式を実家の自部屋で迎えるという異様なスタートダッシュだったのだけれど、PCと学習机とサブモニタとニトリのオフィスチェアとPCスタンドとAirPodsさえあればリモートで研修を受ける行為は可能であったことに次第に気付くようになった。

親からは「中学の頃みたいに四六時中ネトゲをしているように見える」と怪しまれて多少面倒臭かったのだけれど、それも時間が解決して私が自部屋で朝から夕方までPCを触って時折ボイスチャットで会話を垂れ流している状況は親にとっても既に日常の一部となっている。

kiryuanzu.hatenablog.com

退勤してからは母親が用意してくれた食事をすぐに食べて21時までSwitchでどうぶつの森とfit boxingで遊んでお風呂に入るようにしている。

22時からはまたゲームをすることあれば本を読んだりコードを書いたりインターネットをだらだらするなどしていて、24時辺りに就寝準備に入る。

最初は「完全に実家に寄生している引きこもりプログラマー見習いじゃん……」と自分の状況に辛さを覚えていたのだけれど、普通に過ごしやすくてその感覚も麻痺しつつある。あと貯金もかなりしやすくて年間目標貯金額がすぐに達成しそう。

東京に住んでいても人に会えない世界になってしまった今、むしろ今の生活のやり方は良いことの方が多いことに気付いてしまった。

 

人に会えないこと自体に寂しさはあるけれど、通話環境が整った今ではオンライン飲み会に軽い気持ちで参加してみると、気付いたら3時間ぐらい過ぎていて満足していることがよくある。こんな状況になっていても、インターネットさえあれば人と話したいと思った時に話すことができてしまうのだ。

こんな生活がずっと続いて欲しいとまではさすがに思えないけれど、もし日常が戻った際には「意外と楽しいことも多かったな」とほんの少しだけ、恋しくなる事もあるかもしれない。