Zenn


 自動再生する固定要素
アクセシビリティを意識するようになってから、Webサイトで自動再生するGIFやアニメーションについてどう実装するのが良いか？と考えるようになってきました。
特にADHD等の発達障がいを持っているわけではありませんが、あるのとないのとではコンテンツが頭に入ってくる感覚が若干違う気がします。
またWCAGのガイドラインでも取り上げられているため、見る人によって情報の受け取り方や量が違う実装はできるだけ避けたいものです。
達成基準 2.2.2: 一時停止、停止、非表示を理解する

 自動再生するGIF要素をユーザーが停止できるように実装する
そんな中、直近で携わったW...

GIFなどの自動再生する要素のアクセシビリティを担保したいときの備忘録


 はじめに
2023年3月頃にconnpassでアクセシビリティに関する講座を拝聴しました。
登壇者の株式会社freee所属のデザイナー/エンジニアである山本さんが書籍「見にくい、読みにくい『困った！』を解決するデザイン」を激推ししていたので購入してみました。
自分はデザイナーではありませんが、本書を通じて実装者も意識したいと感じたことがいくつかありましたのでまとめてみました。
本書はデザイン本なので、「いやそれはデザイナーの仕事やろ」って突っ込みたくなる項目もあると思います。
ただ実装者もデザインのことをある程度知っていることで、”よしなに”指示されたときにデザインの知識に基づいた実...

「見にくい、読みにくい『困った！』を解決するデザイン」を読んで感じた実装者も意識したい10のこと

業界のとある知り合いのベテラン実装者さんから以前からおすすめされていたオブジェクト指向をきちんと学びたいなと思い、ネットで調べた結果、入門書・初心者向けとして「なぜ、あなたはJavaでオブジェクト指向開発ができないのか」という書籍に辿り着きました。
https://gihyo.jp/book/2005/4-7741-2222-X
結論からいうと、最初に読む一冊としてとても分かりやすかったです！
今回は本書を読んでオブジェクト指向について分かったことをざっくりとまとめてみました。
本記事が「オブジェクト指向って何？美味しいの？」くらいのきっかけになれば幸いです。

 オブジェクト指向 is...

オブジェクト指向入門書「なぜ、あなたはJavaでオブジェクト指向開発ができないのか」で学んだオブジェクト指向のオの字


 前編の概要と後編について
以前に前編としてこちらの記事を書きました。
https://zenn.dev/kalubi/articles/27fa889c338cdf
コミットメッセージをリントして、型通りの書き方でないとエラーになりコミットできないという機能でした。
後編ではその型通りに入力するための補助ツールを追加します。
他人と使うことが前提のツールなので、自分だけルールが分かっていて他人が使いにくいというのはナンセンスすぎますので、そのための改善機能を追加します。

 コミットメッセージ入力補助「git-cz」
他の人が作ったコミットルールに沿って書くのはしんどいので、選択肢に...

commitlintというコミットメッセージのリンターを導入してみた（後編：入力補助git-czの導入）


 オレオレなGitコミットからの卒業
現在の会社では基本的に案件ごとにレポジトリがあるのですが、基本的にGitはほぼ自分しか使っていないので、コミットメッセージは好きなように書いているのが現状です。
以前Next.jsの勉強で某テンプレを使っていたところ、コミット時にエラーが出て「？」となり、色々調べてみたらcommitlintというものを使ってコミット時にあるルールに従っているかリントしていることが分かりました。
将来的にチームでの実装も経験したい＆レポジトリの可読性を高め管理のしやすさを向上したいという思いから、commitlintを勉強したので記事にしました。
記事の中で「こうし...

commitlintというコミットメッセージのリンターを導入してみた（前編：huskyを使ってコミット前にリントする）

先日、自分のアウトプット用のインデックスサイト「Laid Back Code」をNext.jsとNotionで制作しました。
データは基本的にNotionで管理できるので、スマホからも気軽に編集したり投稿できたりするところが気に入っています。

 本記事について
Next.js×Notionで検索すると色々と記事が見つかると思いますが、本記事ではとりあえずどんな感じなのか触ってみたいという方向けに、シンプルなテンプレートを使ってブログサイトを実装する方法をご紹介します。（といってもREADME.md通りに進めるだけですが…）
こんなサイトができます↓
https://notion-blo...

テンプレートを使ってNext.js × Notion のブログサイトを作ってみよう

本記事はUdemyの「【2022年最新】React(v18)完全入門ガイド｜Hooks、Next.js、Redux、TypeScript」を参考にまとめたものです。

 外部CSSファイルの読み込み
グローバルスコープで読み込んでスタイリングする方法。サイト全体に適用したいときに使える。

 インラインスタイル
style属性として各要素にインラインでスタイリングする方法。

一時的な検証用として使う
疑似要素、メディアクエリが使用できない


 CSS Modules
CSSをモジュールとしてJSファイルに読み込んで、コンポーネントごとにローカルスコープを作ってスタイリングする方法。
...

Reactでのスタイリング方法の比較


 ミーティングや面接で恥ずかしい思いをしてもいいけどできればしたくない人
過去に他のコーダーさんとのミーティングでWordPressのプラグイン「All-in-One WP Migration 」の発音を「ミグレーション」と発音していたら、コーダーさんがさりげなく「マイグレーション使えば～…」と訂正していて、恥ずかしさのあまり爆発しそうになりました。
間違うこと自体は悪くないのですが、間違った発音を直さなかったりそれを他人に教えたりするのは良くない気がしますので、自戒も込めて読み間違いしやすい用語をまとめてみました。（Twitterでリプくださった方ありがとうございました。）
!
なお...

Web・コーディング界隈で読み間違いしやすい用語一覧


 はじめに
先日参加したマークアップな夜で画像最適化のセクションがあり、レスポンシブをはじめsizes属性などを使って色々分岐させるのはブラウザに任せるのがいいよねという話がありました。
EJSやPug,素のhtmlなどの場合は手動でloading="lazy"などを追加するかと思います。（もちろん自作で自動化もできると思いますが）
ただスニペットなどを準備していたとしても、やはりそれなりの手間が発生することは間違いないと思います。
これを受けて個人的にWeb制作でもジェネレータやフレームワークを使用するのがベターだと思い始めてきました。
その中でも最近よく見かけるAstroをまだ使っ...

初めてのAstroで画像最適化を試してみた @astrojs/imageとastro-imagetools

.avifの画像を使う機会が増えてきたのですが、私の職場のwindows（2021年3月購入）ではプレビューが見られなかったので、見られるように設定を行いました。
とはいえ拡張機能を入れるだけですのすぐでできます。

 AV1 Video Extension
この拡張機能をインストールします。
手っ取り早い方法は以下の手順です。

PCに.avifの画像をダウンロードする
その画像を「フォト」アプリで開く
「このファイルを表示するには～」の「今すぐダウンロードしてインストール」をクリック
4.開いた先のmicrosoft storeでインストール

もちろん直接microsoft sto...

Windowsで.avifの画像プレビューを表示する設定


 スライドが1枚のときにarrowsがあるのはややこしいしスライドさせたくない
WordPressが入った動的サイトでsplideを使ったカスタムフィールドを作成したのですが、splide側で1枚のときだけarrowsをfalseにしてスライドできなくするようなオプションが用意されていなかったので、JSでゴニョゴニョして実現してみました。

 デモ


 splideのオプションの注意点
// CodePenより一部抜粋
isDestroy = slideLength === 1 ? "completely" : false; //destroy:trueはブレイクポイントを監視する場...

Splideでスライドが1枚だけのときはarrowsをfalseにしてスライドできなくする方法（ブレイクポイント非考慮の場合）


 経緯
１ヶ月以上ぶりくらいにVue×Netlifyで管理しているサイトを更新し、いつも通りbuildでデプロイしようとしたところエラーが出ました。
このエラーが一筋縄ではいかず原因究明・解決までおおよそ10時間以上使ってしまいました。
しかもその日のうちに更新しなければいけなかったため、多大なプレッシャーとストレスにさらされゲボを吐きそうになりながら調査しました。
同じエラーに直面した人が同じ思いをしなくて済むようにメモ程度に書き留めておきます。
!
恐らく2022年9月くらいに変更があったようです。（2022年8月にデプロイしたときは何も起きませんでした）


 主な原因
Netl...

GitHub Organization（Private）のVue×Netlifyのサイトが急にデプロイできなくなったのを解決した話


 英語のドキュメントをスラスラ読めるようになりたい
コーディングでわからないことを調べている時に英語の記事が参考になったり、ライブラリやフレームワークの使い方では公式ドキュメントがなんだかんだ最強だったりするので、英語力を上げたいなと思い始めた今日この頃。
また書籍「リーダブルコード」を読み進めていたところ「明確な単語を選ぶ」という項目があったのですが、「そもそも英単語のボキャブラリーがないと難しいよなぁ」と感じたので色々調べてみました。
https://nelog.jp/programming-words
この記事で紹介されているサイトをいくつかを読んで以下の単語を自分用にまとめまし...

英語ドキュメントをスラスラ読むために知っておきたい単語まとめ for 自分


 &lt;video&gt;が省電力モードだと自動再生されない罠
動画を背景で自動再生する案件に携わったのですが、iPhoneの省電力モードだと自動再生されず、代わりに再生ボタンが表示されることを初めて知りました。

!
ちなみに省電力モードはiPhoneの
「設定」→「バッテリー」→「省電力モード」で設定できます。



 省電力モードかどうかをJavaScriptで判定する

 デモ
!
省電力モードでご覧ください。省電力モードではない場合、普通に動画が自動再生されます。



 コードについて
videoタグにはplayメソッドが備わっているので、それが成功したかどうかで処理を分...

<video>が省電力モードだと自動再生されない罠
動画を背景で自動再生する案件に携わったのですが、iPhoneの省電力モードだと自動再生されず、代わりに再生ボタンが表示されることを初めて知りました。

!
ちなみに省電力モードはiPhoneの
「設定」→「バッテリー」→「省電力モード」で設定できます。



 省電力モードかどうかをJavaScriptで判定する

 デモ
!
省電力モードでご覧ください。省電力モードではない場合、普通に動画が自動再生されます。



 コードについて
videoタグにはplayメソッドが備わっているので、それが成功したかどうかで処理を分...

iPhoneの省電力モードをJavaScriptで判定する方法


 JSファイル内では属性を折り返したい
Reactを勉強していてコンポーネントの属性を折り返したくなったのですが、VSCode上でPrettierの設定を見てもそのような項目はありませんでした。
&lt;Button color="red" fn={count} bool /&gt;;
&lt;!-- ↓こうしたい --&gt;
&lt;Button
  color="red"
  fn={count}
  bool
/&gt;

 singleAttributePerLineを設定すれば折り返される

.prettierrc.js
module.exports = {
  singl...

JSファイル内では属性を折り返したい
Reactを勉強していてコンポーネントの属性を折り返したくなったのですが、VSCode上でPrettierの設定を見てもそのような項目はありませんでした。
<Button color="red" fn={count} bool />;

<Button
  color="red"
  fn={count}
  bool
/>

 singleAttributePerLineを設定すれば折り返される

.prettierrc.js
module.exports = {
  singl...

PrettierでJavaScriptファイルの属性を折り返すように設定する


 ScrollTriggerを使っていたら意図しない挙動になった
これまで背景スクロール固定はZennで紹介されていたこちらの方法を導入していました。
https://zenn.dev/tak_dcxi/articles/bbdb6cd9305ba4
しかし某案件でGSAPとScrollTriggerを使って、pinを使ったスクロールジャックがあるアニメーションを実装していたのですが、ドロワーメニューを開く瞬間にスクロールジャックした要素が謎の挙動で出現しまう現象にぶつかりました。

 救世主「body-scroll-lock」
色々検索していたところ「body-scroll-lock...

body-scroll-lockというライブラリを使ってドロワーメニュー、モーダルの背景スクロールを固定する

Webサイトで游明朝を使いたい場合など、Androidでは明朝体が読み込まれずゴシック体で表示されてしまいます。
ただGoogle Fontsの読み込みをそのまま&lt;head&gt;に記述してしまうとAndroid以外のデバイスでも読み込まれてしまい、パフォーマンスが落ちてしまいます。なのでJavaScriptを使ってAndroidだけ読み込ませるようにします。
!
比較的新しい機種・ブラウザなどでは明朝体が表示されるという記事を見かけましたが検証が不十分のため、まだまだフォールバックは必要かと思われます。

https://blahis.com/dev/android_font_m...

Webサイトで游明朝を使いたい場合など、Androidでは明朝体が読み込まれずゴシック体で表示されてしまいます。
ただGoogle Fontsの読み込みをそのまま<head>に記述してしまうとAndroid以外のデバイスでも読み込まれてしまい、パフォーマンスが落ちてしまいます。なのでJavaScriptを使ってAndroidだけ読み込ませるようにします。
!
比較的新しい機種・ブラウザなどでは明朝体が表示されるという記事を見かけましたが検証が不十分のため、まだまだフォールバックは必要かと思われます。

https://blahis.com/dev/android_font_m...

デバイス判定をしAndroidだけGoogle Fontsを読み込んで明朝体を表示させるためのあれこれ

!
2022/07/18追記
d属性の値の変化を見られるデモを作成しました。興味がある方はお試しください。


!
2022/07/17追記
ドロワーメニューアニメーションではメニュー内のリンクをクリックしたときにも閉じる処理をしないとダメなパターンもありますが、今回はメニューの表示・非表示の切り替えは基本的にJSで行っているため、通常のページ遷移であれば初期状態（メニューは隠れた状態）に戻るので問題ないかと思います。

デザインスタジオ・エルさんのコーポレートサイトをはじめ、おしゃれサイトで見かけるSVGアニメーションがカッコよかったので、Twitterで質問したところありがたいことに...

おしゃれサイトで見かけるSVGがグニョーンってなるアニメーションをドロワーメニューで使ってみた


 SVG pathアニメーションの挙動はブラウザに依存している？
ある案件でSVGのパスアニメーションを実装をしたのですが、検証の際に「Safari・スマホだけ逆再生される」という謎の現象に出くわしました。
!
Mac OS：Big Sur/Safariのバージョン：15.0
（2022年6月時点）


 デモ
簡易版のデモを作成しました。スクロールに合わせて描画されるアニメーションです。
（実際のデザインはもっと複雑）
!
こちらのデモではSafari・スマホ共に逆再生の現象は起きません。



 原因
恐らくはイラレのバージョンによるSVGデータの出力方法の違いなのかなと思います。...

MacのSafariとスマホだけSVGのpathアニメーションが逆再生されるときの原因と解決方法


 方法①正規表現の「\n」を使う
console.log('----------\n改行されます\n----------');

//出力結果↓
//----------
//改行されます
//----------
実際のコンソールの画像


 方法②「バッククオート（`）を使う」
console.log(
`----------
改行されます
----------`);

出力結果↓
----------
改行されます
----------

 方法②は使いにくいかも
方法②の場合、コードがフォーマットされた状態などで出力すると、半角スペースも含まれて変にズレてしまいます。
func...