重めのタスクは朝、脳が最高にフレッシュなゴールデンタイムに取り組むのが一番効率良いですね。

jQueryを使った久しぶりのアコーディオン機能の実装だったので、HTML構造を考えたりするのも含めて４時間もかかっちゃいましたが、次似たようなデザインが来たら今回の流用で３分の１の時間で実装できると思います。

Stylus用のクラス命名規則（ハイフンでつなげる）は分かりやすいですが、HTML階層が深くなればなるほどクラス名が長くなり冗長になっちゃうのだけが欠点。

なので、アコーディオンだけ別でAccordionからクラス命名を開始してコンパクトにしましたわ。

2023年4月28日の動画日記

動画日記1050日目！

2023年4月の日記一覧

「GoogleMapAPI 複数ピン」で検索したらすぐにドンピシャリな技術記事がヒットしたおかげでそのサンプルコードを少し調整しただけで実装できて爽快感ハンパなかったです。

TIPS NOTE by TAMさんに感謝です。

Google Maps APIを使って複数のマーカーと吹き出しを設置してみる

今回は地図上５箇所にピンを立てました。ピン画像はデザインファイルから書き出したSVG画像を指定。地図の表示サイズによりますが、オリジナルのピン画像が大きすぎたり、ピン同士の位置が近すぎると重なり合って見づらくなってしまうので注意しなきゃなと思いました。

2023年4月27日の動画日記

動画日記1049日目！

2023年4月の日記一覧

アニメ好きの友人と個人的今季覇権アニメや退職の経緯、おすすめのアニメ映画などについて90分間くっちゃべりました。

ぼくの中の2023年春の覇権アニメは、その友人がおすすめしてくれた『スキップとローファー』。友人のおすすめアニメ映画は『GRIDMAN UNIVERSE』。グリッドマンシリーズは１つだけ見て、もう１作品はまだ見てないので近いうちに見て、忘れた頃に映画が配信されたら見てみようかなと思います。

ラストオーダー10分前になったときに空いてる皿を片してくれた店員さんが「お鍋も片付けてしまってよろしいですか？」と聞いてきて、ぼくらは締めの雑炊かなにかを頼もうと思ってたので「これから締め頼みます」と伝えたら数分後、頼んでもいないチーズリゾットセットが運ばれてきて困惑しました（笑）。締めは麺類の気分でした。

温野菜の席は２時間制。時間すぎていることを忘れて喋り続けていたら、「これ以上いると延長料金いただきます」と忠告されたので慌ててお会計しました。

2023年4月26日の動画日記

動画日記1048日目！

2023年4月の日記一覧

まず２時間格闘して、「あともう少し…！このエラーさえ回避すれば成功しそうなんだけどなあー！」というところまでこぎつけました。自分ではだいぶ粘ってトライアンドトライアンドトライでいいところまでよく頑張ったと思います。

ただ、これ以上ひとりで考えてても突破できそうにないし、時間をただただ浪費してしまいそうだと感じた次の瞬間、即リーダーに相談。

相談して大正解！たった１度のラリーで、躓いてた問題を乗り越えることができました。

ちょっとしたことですが、相談の仕方が格段に上手くなったなと感じた出来事でした。

自分が何に躓いているのか、どういったことを試したのかを詳細に言語化して相談することで、相談された人の脳ミソのリソース負担を最低限に抑えることができますし、こちらが求めている回答をスパッともらうことができるんだなと勉強になりました。

2023年4月25日の動画日記

動画日記1047日目！

2023年4月の日記一覧

SNS運用を代行させていただいているコミュニティーのインスタ投稿を別の人にいつでも引き継げるように、投稿マニュアルの作成に勤しみました。

投稿用の正方形の画像はFigmaというデザインツールで作成していて、Figmaを使ったことがない初心者でもぼくと同じアウトプットが出せるように実際の操作の様子を各工程ごとに画面録画してテキストベースのマニュアルに動画マニュアルを加えました。

この作業に着手するまで、Mac Bookで画面録画をしたことなかったんですが、「command + Shift + 5」で簡単に撮影できると知れて大収穫でした。

プライベートではワンピース最新話にて、海軍の英雄モンキー・D・ガープと元海軍大将・青キジが激突しただけでなく、別の島では四皇黒ひげとトラファルガー・ローの対決が決着し、ローの母船が破壊され、ベポとローは命からがら逃走するというとんでもなく熱い展開でした。

2023年4月24日の動画日記

動画日記1046日目！

2023年4月の日記一覧

WordPressでお問い合わせフォームの確認画面を作るときに愛用していたプラグイン「Contact Form 7 add confirm」が最新のWordPressのバージョンでは使用できないという衝撃の事実を知り、代替案をリサーチしたところ、「Contact Form 7 Multi-Step Form」というプラグインで代替できるという情報が多かったのでさっそくインストールして使ってみました。

「Contact Form 7 add confirm」と仕様は似ていたのでほぼ躓くことなくノンストレスで確認画面＆送信完了画面を実装できてありがたかったです。

その過程で、「前のページが確認画面だったときは〜する」というプログラムや、入力画面でテキストエリアに入力された値の確認画面での改行反映方法などを新たに習得できていい勉強にもなりました。

ちゃんとフォームが動作してるかテスト送信したとき、[your-name][your-email]といったcf7のタグが自動返信メール文にそのまま出力されてしまい少し困りましたが、時間置いて再考したら一瞬で解決できました。

入力画面用のフォームだけでなく、確認画面用のフォームのメッセージ設定もしなければならなかったようです。

昔Webサイト制作したときよりも、エラーや問題に出くわしたときにあの手この手をトライアンドトライアンドトライして無事解決できる速度が格段に上がっていることにこの上ない喜びを感じました。

2023年4月23日の動画日記

動画日記1045日目！

2023年4月の日記一覧

ひとり仕事で急遽来れなくなってしまい残念でした。LINEの返信もできないくらい大忙しだったようで…。土日確実にお休みというのは当たり前のようでいて実はとてもありがたいことなのだと思いました。

今回お邪魔した居酒屋は新宿野村ビルB2階の「串焼き・魚 新宿宮川」。新宿勤務の友人のチョイスはさすがでした。

串焼き、卵焼き、刺し身、日本酒どれも超美味で、前の晩にてきとうに入った格安そうに見えてけっこうコスパが悪いガヤガヤ居酒屋とは大違いでした（笑）。

この投稿をInstagramで見る

ゆうやの日常〜This Is Me〜(@yuyauveronepiece)がシェアした投稿

友達いわく、野村ビルには他にもいい感じの居酒屋があるらしいので今度なにかの機会で利用したいと思います。自分にとって店選びで迷ったら野村ビル！くらいの安定のスポットになれば嬉しい。

新宿宮川は実は姉妹店が徒歩7分圏内にあって、ぼくと今月雲仙から凱旋した九州男児は最初間違えてそっち（昭和ビル店）行っちゃってたというプチハプニングがありました（笑）。

駅に集合の予定でしたが、前の予定でお店の近くにいたので直で行きます〜と言って一番乗りや！と思ってたら姉妹店だったというオチです。友人から送られてきてた店舗URLが違ってたようでした。集団行動しなかったバチが当たったのかな？

4月22日のサブトピックはこの２つ。

・新宿住友ビルのタリーズコーヒーは席数多めで土日でも空いてて勉強や作業するのにもってこいの穴場スポットだった！
・西口ヨドバシカメラ付近に土日でもゆうちょATMがちゃんと稼働してる郵便局があることに気づいた！新宿に行った時にゆうちょATM探すの面倒だったから次からは新宿郵便局一択でいける！

2023年4月22日の動画日記

動画日記1044日目！

2023年4月の日記一覧

Webサイト制作でよく使う機能・アニメーションのサンプルを分かりやすくまとめてくれているお気に入りの情報サイト「動くウェブデザインアイデア帳」で紹介されていたコードを少し調整してやって割と簡単に実装できて非常に助かりました。

かゆいところに手が届くサンプルコードばかり。何度も助けられてます。運営者に大感謝！

自分の書いた技術系のTips記事も、どこかの誰かの助けになっていれば嬉しいなあと思うばかりです。

ちょっとしたことでも悩んでいる当人にとっては大問題なので、些細なことでも確実に解決できるTipsを記事化していこうと思いました。

2023年4月21日の動画日記

動画日記1043日目！

2023年4月の日記一覧

Tailwindで用意されているclassをHTML要素にせっせと書いていくだけなので、class命名規則で悩むこともないし、cssの記述を書く必要もない（breakpointも用意されてる！）のでこれはこれで楽ちんで良いなと思いました。

今回ぼくが担当したのは記事ページ。すでにトップページをTailwindでコーディングしてあったので、そちらのコンポーネントを参考にできたおかげで超時短で静的コーディングは今日一日でほぼ完了できて良かったです。

記事ページのようなシンプルなデザインのものをコーディングするときにはTailwindで事足りそうだと感じました。ゴリゴリかっちょいいデザインのLPやトップページは厳しそう。

あと、Tailwindってborderを一方向だけに生やすのってできないのかな。border-b-2みたいな感じでリサーチしたとおりにやってみたけど上手くいかんかった。

2023年4月20日の動画日記

動画日記1042日目！

2023年4月の日記一覧

事前にピンタレストで探しておいた「社員紹介ピン」のページが役に立った。

▼「社員紹介 デザイン」で検索した時の▼

参考サイト探しをするときはピンタレストを活用していくのが一番効率良いと気づいたのが大きな収穫。

今回はカメラマンに撮影依頼するための指示書作りがチームとしても初めてだったからけっこう時間かかったし大変だったけど、学びも発見もそれ以上にあった。

次回からはざっくり以下の流れで進めていこうと思う。1つの業務フローとして活用していく。

・参考サイトをピンタレストで探す
・デザインやイメージに合う画像を保存する
・保存した画像をデザインにはめてみる
・社員やメンバー紹介ページの宣材写真は、異なる拡大率や彩度、ポージングなどで3種類ほど用意する

2023年4月19日の動画日記

動画日記1041日目！

2023年4月の日記一覧