iOS Safariでページ内ジャンプ直後に画面が一瞬真っ白になる問題を、画面外のCSSアニメーションの解除で解消しました。コンポジットレイヤーによるメモリ圧迫の可能性と、animation-play-state: pausedでは負荷が残り得る理由を考察します。

iOS Safariでページ内ジャンプ直後に画面が一瞬真っ白になる問題と解決策

![Pittiriのスクリーンショット](https://images.microcms-assets.io/assets/72d8a8e80ba44c67bfec8b6cb91bb4d9/3e7383fee0664582bb84fb8e19a6c4fe/pittiri-shot1%402x.png)

Google Tasksでリストが増えると、横一列に並んで画面の右へはみ出していきます。
短いリストの下には大きな空白。目当てのリストを探して、今日も横にスクロール。

この度Google Tasksのリストを隙間なく敷き詰めて、ひと目で見渡せるようにするブラウザ拡張機能「**Pittiri**（ぴっちり）」をリリースします。

- **名称**: Pittiri（ぴっちり）
- **名前の由来**: 隙間なく詰まった様子を表す「ぴっちり」から
- **コンセプト**: Google Tasksのリストを、隙間なくひと目で
- **対応ブラウザ**:
 - Google Chrome（[Chromeウェブストアでインストール](https://chromewebstore.google.com/detail/jcmdoacfahighiilgbeoofjkdhgnjclg)）

## こんな方におすすめ

- Google Tasksでリストをいくつも使い分けている方
- 横にスクロールせずに、すべてのリストを見渡したい方
- 仕事・買い物・アイデアなど、長さの違うリストが混在している方
- 配信や画面共有でGoogle Tasksを映すことがある方

## 主な機能

- **Masonryレイアウト**:
 横一列だったリストを、指定した列数で隙間なく並べます
- **列数・余白・詰め方の調整**:
 ポップアップで列数（1〜12）・余白（0〜64px）・詰め方（普通 / 厳密に詰める / 順番を守る）を変えられます。変更はすぐに反映され、プレビューで並び方を確認できます
- **件数バッジ**:
 各リストの見出しの横に、未完了タスクの数を表示します
- **ヘッダーを隠す**:
 Google Tasks上部のヘッダーを隠して、画面の高さいっぱいにリストを表示します
- **メインメニューの開閉を覚える**:
 左のメニューを閉じておくと、ページを開き直しても閉じたままにします
- **タスク内容にモザイク**:
 タスクのタイトル・メモ・日付をぼかします。マウスを乗せたリストだけ解除されるので、配信や画面共有でも安心です
- **GoogleカレンダーのToDo画面にも対応**:
 カレンダーのToDo画面（全画面表示）でも、同じようにリストを敷き詰めます
- **列の並べ替えを防止**:
 有効な間は、リストの列を掴んで動かしてしまうことがありません
- **設定の同期**:
 設定はChromeの同期機能で、同じアカウントの端末間に共有されます
- **画面構成の変化をお知らせ**:
 Google Tasks側の更新で動かなくなったときは、画面右下の通知でお知らせします
- **多言語対応**:
 日本語と英語に対応し、ブラウザの言語に合わせて切り替わります

## 使い方

インストールしてGoogle Tasksを開くだけです。Pittiriは最初から有効になっていて、リストが画面いっぱいに敷き詰められます。

並び方は、ツールバーのPittiriアイコンから開くポップアップで調整できます。元の表示に戻したいときは、ポップアップ右上のスイッチをOFFにしてください。

## スクリーンショット

![列数・余白・詰め方をワンクリックで](https://images.microcms-assets.io/assets/72d8a8e80ba44c67bfec8b6cb91bb4d9/fcf28ca5bda94124b9cb46badc47196a/pittiri-shot2%402x.png)

## 動作要件

- Chrome 120以降（Chromium系ブラウザ）
- Google Tasks（tasks.google.com）。複数のリストが並ぶ「すべてのタスク」の表示が対象です
- GoogleカレンダーのToDo画面（全画面表示）。この画面では「ヘッダーを隠す」と「メインメニューの開閉を覚える」は使えません。サイドパネルのToDoリストは対象外です
- 新しいレイアウト機能（CSS Grid Lanes）に対応したブラウザでは標準の機能で、未対応のブラウザでは同梱の互換実装で動作します

## 各種連絡先

本拡張機能に関するお問い合わせやご要望等がございましたら、以下の連絡先までお気軽にご連絡ください。

- メールアドレス: info@cofus.work
- X（旧Twitter）: [@\_cofus](https://x.com/_cofus)
- ストアサポートページ: [Chromeウェブストア サポートページ](https://chromewebstore.google.com/detail/jcmdoacfahighiilgbeoofjkdhgnjclg/support)

## その他の情報

- [これまでリリースしてきたブラウザ拡張機能全リスト](https://chrome-extensions.cofus.work/)
- Google TasksはGoogle LLCの商標です。本拡張機能はGoogleと提携・承認関係にありません

 

---

## ChangeLog

### v0.3.0 (2026/10/13)

- GoogleカレンダーのToDo画面（全画面表示）でも使えるようにしました。更新前から開いているカレンダーのタブは、再読み込みすると使えるようになります
- カレンダーのToDo画面では使えない「ヘッダーを隠す」と「メインメニューの開閉を覚える」を、ポップアップで理由とともに操作できない状態にして案内するようにしました
- ポップアップのオプションの並び順を見直しました

### v0.2.1 (2026/09/18)

- 拡張機能の更新後、再読み込みが必要なGoogle Tasksのタブがあればポップアップでお知らせし、ボタンひとつで再読み込みできるようにしました（更新時はアイコンに「NEW」が付きます）
- メインメニューを閉じても、開閉が覚えられないことがある不具合を修正しました

### v0.2.0 (2026/09/18)

- ページ上部のヘッダーを隠して、画面の高さいっぱいにリストを表示するオプションを追加しました
- 左のメインメニューの開閉を覚えて、ページを開き直しても前回の状態にするオプションを追加しました
- 有効な間は、リストの列を掴んで並べ替えてしまうことがないようにしました
- 件数バッジがタスクの操作のたびに点滅していたのを、数値だけが変わるようにしました
- 横スクロールが発生する問題、拡張機能の更新時にモザイクが外れる問題など、多数の不具合を修正しました
- ポップアップと件数バッジのアクセシビリティを改善しました

### v0.1.0 (2026/09/16)

- 初回リリース

 

---

## プライバシーポリシー（Privacy Policy）

最終更新日: 2026年9月18日

Pittiri（以下「本拡張」）は、利用者の個人情報やタスクの内容を収集・送信しません。開発者はサーバーを運営しておらず、利用者のデータを受け取ることもありません。

- **保存する情報**: 列数・余白などの設定と、動作に必要な記録（Google Tasksの画面構成の変化を検知した結果、メインメニューを閉じていたかどうかなど）を、ブラウザの拡張機能用ストレージに保存します。設定はChromeの同期機能で、同じアカウントの端末間に共有されます
- **取得しない情報**: タスクの内容、Googleアカウントの情報、閲覧履歴などは取得しません。件数バッジやモザイクは画面上で処理するだけです
- **外部送信**: 情報を開発者や第三者へ送信しません。解析ツールや広告も組み込んでいません
- **削除**: 本拡張をアンインストールすると、保存された情報は削除されます

お問い合わせは info@cofus.work までご連絡ください。本ポリシーは必要に応じて改定し、本ページに掲載した時点で効力を生じます。

 

---

## 利用規約（Terms of Service）

最終更新日: 2026年10月12日

本拡張をインストール・利用した時点で、本規約に同意したものとみなします。

- 本拡張は無料で、現状のまま提供します。内容や動作は保証せず、利用または利用できないことで生じた損害について責任を負いません
- Google側の更新により、予告なく機能が動作しなくなる場合があります
- Google TasksはGoogle LLCの商標です。本拡張はGoogleと提携・承認関係にありません
- 本拡張と本規約は、予告なく変更・終了することがあります。変更後の規約は本ページに掲載した時点で効力を生じます
- 本規約は日本法に準拠し、紛争が生じた場合は大阪地方裁判所を専属的合意管轄裁判所とします

Google TasksのリストをMasonryレイアウトで敷き詰めるブラウザ拡張機能「Pittiri」をリリースします

iOS Safariで、flex子要素にaspect-ratioとwidthを指定し、clip-pathを併用した際に高さが正しく算出されない問題を解説します。再現条件、height: autoで解決しなかった理由、imgのwidth属性とheight属性を利用した回避策を紹介します。

iOS Safariでflex子要素のaspect-ratioが効かない：clip-path併用時に高さが正しく算出されない問題と解決策

 配信サイトKick(kick.com)のコメントを軽快に表示するコメントビューアー「Miwake(ミワケ)」をリリースします

横書き文書内のwriting-mode: vertical-rl要素が、スマホをランドスケープに回転したときだけ列折り返しして崩れる問題を調査しました。CSS Writing Modesのorthogonal flowにおけるauto-sizing仕様と、WebKitのレイアウト無効化漏れとみられる挙動を切り分け、white-space: nowrapで解消した記録です。

縦書きテキストがランドスケープで列折り返しする原因と、orthogonal flow（直交フロー）でビューポート高が制約になる仕組み

Slim Chatwork メジャーバージョン（v2系）リリースのお知らせ

iOS Safari実機が分数pxのline-heightを整数pxにfloorするため、mask-imageの繰り返し罫線が行ごとにズレて累積する問題（WebKit Bug #225695）の原因と、JSで実描画値を実測してCSS変数に注入する対処法を解説します。

iOS Safari実機だけで罫線がズレる：分数pxのline-heightがfloorされCSS computed値と乖離する問題

Slim Chatwork公式サイトのリニューアルとURL変更（slimchatwork.comへの移行）のお知らせ

ホバーするとシールがめくれるSticker Peelアニメーションを、CSS変数と@propertyだけで実装する手法を解説します。--peel-progressと--peel-directionの2変数でめくれ量と方向を制御し、clip-pathとtranslateYをcalc()で連動させるのがコアです。GSAP等のライブラリは不要です。

ホバーで剥がせるシール（Sticker Peel）をCSS変数と@propertyだけで実装する

Chrome拡張機能（Manifest V3）からhost_permissionsでカバーされたURLにfetchすると、POST以外のメソッドではOriginヘッダが付与されません。この仕様による本番限定の403障害と、サーバー側Origin検証の正しい設計方針を整理します。

Chrome MV3拡張機能でhost_permissions配下にfetchするとPOST以外でOriginヘッダが送られない問題

![ScrollJunky のスクリーンショット](https://images.microcms-assets.io/assets/72d8a8e80ba44c67bfec8b6cb91bb4d9/e8149b1a9d994f70829b1ef05c78c950/screenshot-01-hero-ja%402x.png)

通勤中の SNS、調べもの中の Wikipedia、寝る前のニュースアプリ。
今日のあなたの指先は、いったい何キロぶん旅をしたのでしょうか。

ブラウザでのスクロールを **「距離（km）」** に変換し、世界中のスクローラーとランキングでゆるく競える拡張機能「**ScrollJunky**（スクロールジャンキー）」をリリースします。

富士山何個ぶん？フルマラソン何回ぶん？ ただ読んでいただけのページ移動が、ちょっと面白い移動距離に変わります。

- **名称**: ScrollJunky（スクロールジャンキー）
- **名前の由来**: 「Scroll（スクロール）」+「Junky（中毒）」— 気づくと伸ばしたくなるスクロール距離を、少し自虐的に楽しむ名前です
- **コンセプト**: ただのスクロールを、世界と比べて面白い距離にする
- **対応ブラウザ**:
 - Google Chrome（[Chrome ウェブストアでインストール](https://chromewebstore.google.com/detail/scrolljunky/gponcljbndpcbdllfodgcchofdmbllai)）
 - Mozilla Firefox（[Firefox アドオンでインストール](https://addons.mozilla.org/ja/firefox/addon/scrolljunky/)）

ScrollJunky は、生産性を高めるツールでも、健康管理アプリでもありません。
「今日もずいぶんスクロールしたな」を、ただのため息で終わらせず、ランキングやマイルストーンで笑って眺めるための小さなジョークアプリです。

## こんな方におすすめ

- 毎日のブラウジングに、ちょっとした楽しみを足したい方
- 数字やランキングで、自分の習慣を眺めるのが好きな方
- 「使いすぎ」の罪悪感を、少しだけネタに変えたい方
- アカウント登録なしで、手軽に試せる拡張機能を探している方

## 主な機能

- **スクロール距離の自動計測**:
 ブラウザでのスクロール量をピクセルから距離（km）に変換し、ツールバーバッジに表示
- **3 つの集計ウィンドウ**:
 24 時間 / 7 日間 / 全期間 の距離をひと目で確認
- **距離の翻訳（マイルストーン）**:
 「富士山○個分」「フルマラソン○回分」など、実感しやすい比喩で表示
- **世界ランキング**:
 24 時間 / 7 日間 / 全期間のランキングで、世界中のスクローラーと自分の位置を比較
- **シェア機能**:
 達成距離をスコアカード画像にしてワンタップで X（旧 Twitter）等にシェア
- **アカウント登録不要**:
 ローカル利用のみでも全機能を使用可能。ランキング参加も任意で、いつでも ON / OFF 切り替え可能
- **多言語対応**:
 日本語 / 英語 UI を内蔵。ブラウザのロケールに応じて自動切り替え

## 楽しみ方

インストールしたら、あとはいつも通りのブラウジングを楽しむだけです。
気づいたころにバッジの距離が伸び、ポップアップを開くと「今日の移動距離」や「世界ランキングでの現在地」が見えます。

ランキングに参加しなくても、個人用のスクロールメーターとして使えます。
ランキングに参加すれば、あなたの何気ないスクロールが、世界のどこかの誰かと並びます。

## 各種連絡先

本拡張機能に関するお問い合わせやご要望等がございましたら、以下の連絡先までお気軽にご連絡ください。

- メールアドレス: info@cofus.work
- X（旧 Twitter）: [@\_cofus](https://x.com/_cofus)
- ストアサポートページ: [Chrome ウェブストア サポートページ](https://chromewebstore.google.com/detail/scrolljunky/gponcljbndpcbdllfodgcchofdmbllai/support)

## その他の情報

- [これまでリリースしてきたブラウザ拡張機能全リスト](https://chrome-extensions.cofus.work/)

 

---

## ChangeLog

### v0.5.0 (2026/05/13)

- **✨ 新機能**
 - Firefox に正式対応しました（Firefox アドオンからインストール可能）
 - ランキング上位 3 位の表彰台を、より見やすい縦並びリッチカードに刷新しました
 - 拡張機能のアップデート直後にバナーから「開いているすべてのタブを再読み込み」できるようにしました
 - アップデートで計測が一時停止している間は、ツールバーバッジに赤い「✗」を表示するようにしました
- **💡 改善**
 - 全期間のスクロール距離の管理方法を見直し、長期間使ったときも数値がぶれにくく、より正確に積み上がるようにしました
 - ランキング集計の整合性を向上し、表示されるアクティブ人数と Top 10 の母集団がずれないようにしました
- **🐛 バグ修正**
 - 国選択ダイアログを連打したときに別の国が保存されてしまう問題を修正しました
 - ポップアップが「読み込み中」のままになる可能性のあった経路を修正しました
 - アイドル時間に発生していた不要なサーバー通信を削減しました
 - その他、同期処理・距離復元・スクリーンリーダー対応など、各種の不具合を修正し安定性を向上しました

### v0.4.0 (2026/05/08)

本バージョンから限定リリースから一般リリースを行いました。（2026/05/10）

- **✨ 新機能**
 - 拡張機能のアップデート後にページ計測を確実に再開できるよう、ポップアップに「再読み込みのおすすめ」バナーを表示するようにしました
- **💡 改善**
 - 自分の順位や距離の表示が、複数のデバイスを使っているときでもより正確になるよう調整しました
 - サーバー側の処理を計測しやすくし、今後のレイテンシ改善に活かせるようにしました
- **🐛 バグ修正**
 - ランキング参加時の自動生成名が、選択している国に合うようにしました
 - 国選択メニューの一部のアイテムが画面端で途切れる問題を修正しました
 - ダイアログを連続でクリックした際の二重リクエストや、ESC キーで意図せず外側まで閉じてしまう挙動を修正しました
 - その他、同期処理の競合や表示更新タイミングなど、各種の不具合を修正し安定性を向上しました

### v0.3.0 (2026/05/06)

- **💡 改善**
 - ランキング画面とポップアップの起動を高速化し、ボタン操作後の反映やランキング切り替えがよりスムーズになりました
 - ランキングで近くのランカーと同じ距離だったときに「同点」と表示するようにしました
 - Windows 環境でのフォント表示を改善し、文字のかすれや潰れを軽減しました
- **🐛 バグ修正**
 - ホーム画面の上部に表示されていた「直近 1h」のバッジを整理しました
 - データ復元・ランキング離脱・タブ閉鎖時のスクロール距離が一部消失する問題を修正しました
 - 各種の不具合を修正し安定性を向上しました
- **🔧 メンテナンス**
 - 内部の依存パッケージを最新化し、今後の機能追加に備えました

### v0.2.0 (2026/05/05)

- **✨ 新機能**
 - ランキング画面に、前回からの順位の変化・近くのランカーとの距離差・直近 1 時間のアクティブユーザー数を表示するようにしました
- **💡 改善**
 - ホーム画面のスクロール距離メーターを「自己ベストとの比率」表示にリデザインし、自分の最高記録との比較がひと目で分かるようにしました
 - ツールバーバッジの距離表記を調整し、100〜999m を `.1k`〜`.9k` 表記で表示するようにしました
- **🐛 バグ修正**
 - ランキング離脱後の画面遷移、距離と順位の表示ズレ、画面切り替え時の再計算など、各種の不具合を修正し安定性を向上しました

### v0.1.0 (2026/05/03)

- 限定リリース / Limited release

 

---

## プライバシーポリシー（Privacy Policy）

最終更新日: 2026年5月1日 / Last updated: May 1, 2026

ScrollJunky（以下「本サービス」）は、ブラウザでのスクロール量を距離に変換し、任意参加のランキングを提供するために必要な情報だけを扱います。閲覧中の URL、ページ内容、入力内容、Cookie、閲覧履歴などは取得しません。

### 端末内にのみ保存する情報

ランキング参加の有無にかかわらず、以下の情報は `chrome.storage.local` 等に保存されます。

- **スクロール量**: 1 時間単位で集計した累積スクロール量（ピクセル）
- **表示名**: ユーザーが任意で入力した文字列（ランキング不参加時は端末内のみ）
- **UI 設定**: ロケール（ja / en）、テーマ、表示ウィンドウ等
- **内部識別子・シークレット**: ランキング参加時のみ生成されるランダムな識別子

### ランキング参加時にサーバーへ送信する情報

ポップアップ内のダイアログで明示的に同意した場合のみ、以下の情報が当方のサーバーに送信・保存されます。

- **匿名 ID**: ブラウザ内で生成されたランダムな識別子。メールアドレス、端末固有 ID、閲覧履歴とは紐付きません
- **表示名**: ランキングに表示するためにユーザーが入力した文字列
- **国コード**: ISO 3166-1 alpha-2 形式。任意・未設定可
- **ロケール**: `ja` または `en`
- **スクロール距離**: 1 時間ごとに距離（メートル）へ変換した数値

上記以外の情報は取得・送信しません。特に、閲覧中の URL・ドメイン・ページタイトル・ページ内容（DOM / テキスト / 画像 / 動画）、フォーム入力値・検索クエリ・パスワード・Cookie、閲覧履歴・ブックマーク・タブ情報、メールアドレスその他の個人を特定できる情報にはアクセスしません。

通信は暗号化された経路で行い、リクエストには改ざん検知のための署名検証を実装しています。取得したデータを第三者へ提供することはなく、分析・広告 SDK 等の外部トラッカーも組み込んでいません。

### データの保管と削除

- ローカルに保存されたデータは、本サービスをアンインストールするまで端末に残ります。
- 設定画面から「ランキングをやめる（オプトアウト）」を実行すると、サーバー上のデータは速やかに論理削除されます。
- オプトアウト後もローカルのスクロール距離は保持され、ランキングを使わない個人ツールとして本サービスを引き続きご利用いただけます。完全に消去したい場合はブラウザから本サービスをアンインストールしてください。

### お問い合わせ・改定

本ポリシーに関するお問い合わせは info@cofus.work までご連絡ください。法令や仕様の変更に応じて改定する場合があり、改定後の内容は本ページに掲載した時点で効力を生じます。

 

### English

> This English translation is provided for convenience. In the event of any discrepancy between the Japanese and English versions, the **Japanese version shall prevail**.

ScrollJunky (the "Service") handles only the information needed to convert browser scrolling into distance and provide the optional rankings. We do not collect the URL you are viewing, page contents, typed text, cookies, browsing history, or similar data.

#### Stored only on your device

Whether or not you join the rankings, the following data is stored locally in browser storage such as `chrome.storage.local`.

- **Scroll amount**: Cumulative scroll amount per hour, in pixels
- **Display name**: A string you enter (local only if you have not opted in)
- **UI settings**: Locale (ja / en), theme, selected window, etc.
- **Internal identifier & secret**: Random values generated only after you opt in

#### Sent to the server only when you opt in to the rankings

Only after you explicitly consent through the in-popup dialog, the following data is sent to and stored on our server.

- **Anonymous ID**: A random identifier generated in the browser. It is not linked to your email address, device-specific IDs, or browsing history
- **Display name**: A string you enter to be shown in the rankings
- **Country code**: ISO 3166-1 alpha-2; optional
- **Locale**: `ja` or `en`
- **Scroll distance**: Per-hour value converted into distance, in meters

No other information is collected or sent. In particular, we do not access URLs, domain names, page titles, page contents (DOM / text / images / video), text typed into forms, search queries, passwords, cookies, browsing history, bookmarks, tab information, email addresses, or any other personally identifiable information.

Communication takes place over an encrypted channel, and requests carry a signature so the server can detect tampering. We do not share data with any third party, and we do not embed analytics or advertising SDKs.

#### Retention and deletion

- Locally stored data stays on your device until you uninstall the Service.
- When you opt out from the settings screen, the data on the server is deleted promptly (logical deletion).
- After opting out, your local scroll distance is kept so you can keep using the Service as a personal tool without the ranking feature. To erase everything, uninstall the Service from your browser.

#### Contact / revisions

For questions about this Policy, please contact info@cofus.work. We may revise this Policy in response to changes in laws or to the Service's specifications. Revisions become effective when posted on this page.

 

---

## 利用規約（Terms of Service）

最終更新日: 2026年5月1日 / Last updated: May 1, 2026

ScrollJunky（以下「本サービス」）は、ブラウザでのスクロール量を距離に変換して遊ぶ、エンタメ目的の無料ブラウザ拡張機能です。本サービスをインストール・利用した時点で、本規約に同意したものとみなします。

- **無料で提供します**: 通信料金は利用者のご負担となります。
- **距離はジョーク寄りの近似値です**: 運動量・カロリー消費・健康指標等を表すものではありません。
- **ランキング参加は任意です**: ポップアップ内のダイアログで同意した場合のみサーバーにデータが登録されます。設定画面からいつでもオプトアウトできます。
- **表示名のルール**: 誹謗中傷、差別、性的・暴力的表現、個人情報、スパム、宣伝、URL、第三者の権利侵害、公序良俗違反にあたる表示名は使えません。当方は該当する表示名を、事前通知なく非表示・変更・ランキング除外することがあります。
- **やってはいけないこと**: 自動化スクリプトやボットによる距離の水増し、ランキングの不正操作、API への大量リクエスト、リバースエンジニアリング、運営妨害を禁止します。発覚した場合、サーバー上のデータ削除やランキング参加の制限を行うことがあります。
- **免責**: 本サービスの内容・機能・継続性・正確性について保証は行いません。利用または利用不能により生じた損害について、当方は一切の責任を負いません。
- **サービスの変更・終了**: 当方は事前通知なく本サービスを変更・中断・終了することがあります。
- **規約の変更**: 必要に応じて本規約を改定します。改定後の内容は本ページに掲載した時点で効力を生じます。
- **準拠法・管轄**: 本規約は日本法に準拠し、紛争が生じた場合は東京地方裁判所を専属的合意管轄裁判所とします。

 

### English

> This English translation is provided for convenience. In the event of any discrepancy between the Japanese and English versions, the **Japanese version shall prevail**.

ScrollJunky (the "Service") is a free entertainment browser extension that converts your browser scrolling into distance, just for fun. By installing and using the Service, you agree to these Terms.

- **Free to use**: Communication fees incurred while using the Service are your responsibility.
- **Distances are approximate and just for fun**: They do not represent physical activity, calorie consumption, or any health-related metric.
- **Joining the rankings is optional**: Data is sent to our server only after you explicitly opt in through the in-popup dialog. You can opt out at any time from the settings screen.
- **Display name rules**: Display names that include defamation/discrimination, sexual or violent expressions, personal information, spam, advertising, URLs, infringement of third-party rights, or content contrary to public order are not allowed. We may hide, change, or remove such names from the rankings without prior notice.
- **Don't cheat**: Inflating distance with automation scripts or bots, manipulating rankings, sending mass requests to the API, reverse engineering, and interfering with operation of the Service are prohibited. If detected, we may delete your server-side data or restrict your participation in the rankings.
- **No warranty**: We make no guarantees about the content, functionality, continuity, or accuracy of the Service, and we are not liable for any damage caused by using, or being unable to use, the Service.
- **Changes / termination**: We may modify, suspend, or terminate the Service at any time without prior notice.
- **Changes to these Terms**: We may revise these Terms when needed. Revisions become effective when posted on this page.
- **Governing law**: These Terms are governed by the laws of Japan, with the Tokyo District Court as the exclusive court of first instance for any dispute.

ブラウザでのスクロールを距離(km)に変換し、世界中のスクローラーとランキングで競える拡張機能「ScrollJunky」をリリースします

Firefox拡張機能のポップアップ内でinput type=fileを使うとポップアップが閉じてしまう問題の原因と、新しいタブで開く・windows.createで小ウィンドウ化するなどの実用的な対処法をまとめます。

Firefox拡張機能のポップアップでファイル選択ダイアログを開くとポップアップが閉じる問題と対処法

CSS box-shadowが画面表示・DevToolsエミュレーション・実際の印刷で異なるレンダリング結果になる現象について、考えられる原因の仮説と解決策を整理します。

CSSのbox-shadowが印刷時に異なるレンダリングになる問題を少しだけ深掘りする

いつもSlim Chatworkをご利用いただき、誠にありがとうございます。

2019年4月の初回リリースから、まもなく7年。おかげさまでリリース回数は延べ44回を超えました。「Chatworkをもっと快適に使いたい」という自分自身の思いから始めた個人開発でしたが、多くの方にご利用いただけるようになり、日々の業務に少しでもお役に立てていることを大変嬉しく思っております。

これまでSlim Chatworkは完全無料で開発・公開を続けてまいりました。しかし、個人開発で継続して提供していくうえでは、機能追加や不具合対応、Chatwork本体の仕様変更への追従など、開発・運用にかかる時間的・金銭的な負担も少しずつ大きくなってきております。

そこで、Slim Chatworkを今後も安定して継続提供していくために、**一部機能の有料化（サブスクリプション制）の導入を検討**しております。

この判断にあたり、日頃ご利用いただいている皆様のお声をぜひお聞かせいただきたく、アンケートへのご協力をお願いいたします。

## アンケート概要

- **所要時間**: 約2分
- **設問数**: 13問（選択式中心）
- **内容**: ご利用状況、有料化後のご利用意向、許容できる料金帯 など
- **URL**: ✍️ [アンケートに回答する（Googleフォームへ移動します）](https://forms.gle/maQii8C5HaCMCqmj8)

## 現在検討している内容

現在、以下のような機能区分を検討しています。

### 有料プラン限定を検討している機能

- メインコンテンツサイズ調整機能
- フォント変更機能
- シンタックスハイライト機能
- ステータス変更アシスト機能
- メッセージチェック機能
- その他機能（アバター非表示・句読点変換・曜日表示 など）

### 無料プランで一部制限を検討している機能

- メッセージテンプレート登録機能（登録数を3件までに制限）

### これまで通り無料で利用できる機能

- ルームリストサイズ調整機能
- AI書き換え機能（Beta）

---

上記はあくまで現時点での検討案であり、**皆様からいただいたご意見をもとに最終的な方針を決定**いたします。

いただいたご意見は、今後の開発方針の参考にさせていただきます。ぜひ率直なお声をお聞かせください。

今後ともSlim Chatworkをよろしくお願いいたします。

Slim Chatwork 一部機能有料化に関するアンケートご協力のお願い

CSSマージン崩壊（Margin Collapsing）がposition:absolute要素の位置に与える影響と、Block Formatting Context（BFC）による解決方法を解説します。

CSSのマージン崩壊とBFCの理解：position:absoluteが予期しない位置に配置される問題の解決

![TokiDokeのスクリーンショット](https://images.microcms-assets.io/assets/72d8a8e80ba44c67bfec8b6cb91bb4d9/09e76b2f7d3a43ceb80a66d58f721712/store-screenshot-2560x1600%402x.png)

 

> SNS や動画サイトは、生活に必要なものです。
> けれど、気づいたら何十分も、何時間も見続けていた ──
> まるで時が溶けていた、そんな経験はありませんか？
>
> 　
> TokiDokeは、それらを禁止しません。
> 代わりに、あなたがどこで、どれだけ人生を溶かしているのかを
> 静かに可視化します。
>
> 　
> **時間ではなく、人生という尺度で。**

SNSや娯楽サイトでの利用時間を、**人生という尺度**で可視化するブラウザ拡張機能「**TokiDoke**（トキドケ）」をリリースします。

- **名称**: TokiDoke（トキドケ）
- **名前の由来**: 「時（Toki）」+「溶ける（Tokeru）」— 気づかぬうちに時間が溶けていく感覚を表現
- **対応ブラウザ**:
 - Google Chrome（[Chrome ウェブストアでインストール](https://chromewebstore.google.com/detail/tokidoke/pmjjgfccjaiakcafmcklhmmomghfpbmi)）
 - Mozilla Firefox（[Firefox アドオンでインストール](https://addons.mozilla.org/ja/firefox/addon/tokidoke/)）

## こんな方におすすめ

- 気づいたらSNSを何時間も見てしまっている方
- 「時間を無駄にしている」という漠然とした罪悪感がある方
- 利用を制限したいわけではないが、現状を把握したい方
- 数字ではなく「人生」という視点で時間の重みを感じたい方

## 主な機能

- **自動トラッキング**:
 対象サイトへのアクセスを自動で検出し、利用時間を計測
- **人生比率での表示**:
 利用時間を人生の割合（%）として可視化
- **統計チャート**:
 日別・サイト別の利用時間をグラフで確認
- **寿命設定**:
 ユーザーの年齢・想定寿命をもとにパーセンテージを算出
- **代替アクティビティ提案**:
 娯楽サイト以外の過ごし方のヒントを表示
- **クロスデバイス同期**:
 ブラウザの同期ストレージによる複数端末間でのデータ共有
- **シェア機能**:
 「今日、人生の◯%をSNSに溶かしました」をXでシェア

## 計測対象サイト

- **グローバルSNS**
 X (Twitter), Facebook, Instagram, TikTok, Threads, LinkedIn, Reddit, Pinterest, Tumblr
- **動画・ライブ配信**
 YouTube, Twitch, Kick, ニコニコ動画, TVer, ツイキャス, SHOWROOM, Mildom, OPENREC
- **コミュニティ・クリエイター**
 Discord, pixiv, note, 5ちゃんねる

計測対象サイトは今後のアップデートで拡充予定です。
追加をご希望のサイトがございましたら、[ストアサポートページでリクエスト](https://chromewebstore.google.com/detail/tokidoke/pmjjgfccjaiakcafmcklhmmomghfpbmi/support)をお寄せください。

## 各種連絡先

本拡張機能に関するお問い合わせやご要望等がございましたら、以下の連絡先までお気軽にご連絡ください。

- メールアドレス：info@cofus.work
- X（旧Twitter）：[@\_cofus](https://x.com/_cofus)
- ストアサポートページ: [Chrome Web Store サポート](https://chromewebstore.google.com/detail/tokidoke/pmjjgfccjaiakcafmcklhmmomghfpbmi/support)

## その他の情報

- [これまでリリースしてきたブラウザ拡張機能全リスト](https://chrome-extensions.cofus.work/)

 

---

## ChangeLog

### v0.11.1 (2026/03/23)

- **✨ 新機能**
 - 新しいSNS「Karotter」の利用時間を計測できるようになりました
 - 一部サイトのアイコンを公式ロゴに差し替え、見分けやすくしました
- **🐛 バグ修正**
 - シェアモーダルの「コピー済み」表示が閉じた後も残る問題を修正しました
 - データのインポート時に不正な設定値が混入する可能性がある問題を修正しました
 - 週ごとの統計が特定の条件で正しく集計されない問題を修正しました
 - サービス終了したサイトの過去データが表示されなくなる問題を修正しました
- **🔧 メンテナンス**
 - サービス終了した「Mildom」を計測対象から除外しました（過去データは引き続き表示されます）

### v0.11.0 (2026/03/19)

- **🐛 バグ修正**
 - 英語環境で時間の単位が日本語のまま表示される問題を修正しました
 - シェア画像の英語テキストが読みづらかった問題を改善しました
 - オフラインから復帰した際に「同期中」表示が消えない問題を修正しました
 - テキストコピー失敗時にエラーが表示されない問題を修正しました
 - 振り返り通知やグラフ表示に関する細かな不具合を修正しました
- **💡 使いやすさの改善**
 - シェア画像の年数表示をシンプルにしました
 - ダッシュボードのサイト一覧の表示パフォーマンスを改善しました
- **🔧 メンテナンス**
 - 内部コードの共通化とリファクタリングを実施しました

### v0.10.1 (2026/03/09)

- **✨ 新機能**
 - シェア画像に「よく使ったサイト」の2位・3位を表示するようになりました
- **🐛 バグ修正**
 - シェア画像で利用時間が少ないときに「0.0年」と表示される問題を修正しました
 - 振り返り通知のタイトルが期間と一致しない問題を修正しました
 - 操作中のダイアログが意図せず閉じてしまう問題を修正しました
- **💡 使いやすさの改善**
 - シェア画像の文言やレイアウトをより見やすく調整しました
 - ダークモードの表示を統一しました

### v0.10.0 (2026/02/17)

- **✨ 新機能**
 - 統計画面の期間選択から「半年」と「1年」を直接選べるようになりました
 - 実績バッジの解除条件をいつでも確認できるようになりました
- **🐛 バグ修正**
 - 目標を一時無効化している間に連続達成日数がリセットされる問題を修正しました
 - Firefoxで通知が届かない場合がある問題を修正しました
 - 設定画面のナビゲーションや入力まわりの不具合を修正しました
- **💡 使いやすさの改善**
 - 「SNS」の表記を「対象サイト」に統一し、より分かりやすくしました
 - 通知内容やトレンドラインの表示精度を改善しました
 - データがない場合の案内メッセージを充実させました
- **🔧 メンテナンス**
 - 内部コードの品質向上とリファクタリングを実施しました

### v0.9.1 (2026/02/14)

- **🐛 バグ修正**
 - 複数端末でログインしている場合に寿命割合が正しく表示されない問題を修正しました
- **🔧 メンテナンス**
 - フォントや内部処理の改善を行いました

### v0.9.0 (2026/02/14)

🚀 本バージョンから一般向けのリリースとなります！

- **✨ 新機能**
 - 「もし時間が溶けていなかったら...」セクションを52項目に大幅拡充しました
 - ストレージ容量を超えた際にお知らせする通知を追加しました
- **🐛 バグ修正**
 - データの欠損や二重カウントのリスクを大幅に低減しました
 - 読み込み失敗時にリトライできるようになりました
 - 「別ウィンドウで開く」の動作を改善しました
 - タイムゾーンに関連する不具合を複数修正しました
- **💡 使いやすさの改善**
 - 画面操作のレスポンスを改善しました

### v0.8.0 (2026/02/11)

- **✨ 新機能**
 - 計測対象にBlueskyとMastodonを追加しました
 - サイトのロゴを公式アイコンに統一しました
- **🐛 バグ修正**
 - 複数端末間でのデータ同期の安定性を大幅に改善しました
 - 振り返り通知の重複や消失の問題を修正しました
 - 利用時間の計測精度を向上しました
 - 設定画面やシェアモーダルの不具合を修正しました
- **💡 使いやすさの改善**
 - 拡張機能のサイズを大幅に削減しました
 - キーボード操作やスクリーンリーダーの対応を改善しました

### v0.7.1 (2026/02/08)

- **🐛 バグ修正**
 - 複数端末利用時に「データの不整合を検出しました」が頻繁に表示される問題を修正しました
 - 振り返り通知や統計の集計期間が正しく表示されない場合がある問題を修正しました
 - 一時停止中に休憩リマインダーが表示される問題を修正しました

### v0.7.0 (2026/02/07)

- **✨ 新機能**
 - 初回セットアップ画面からバックアップデータをインポートできるようになりました
 - 設定画面で未保存の変更がある場合に確認ダイアログを表示するようにしました
 - 通知の許可状態が確認しやすくなりました
 - ランクバッジに溶けた時間と一日平均を表示するようにしました
- **🐛 バグ修正**
 - シェア画像のフォントが正しく反映されない問題を修正しました
 - 振り返り通知の安定性を改善しました
 - 各種UIの細かな不具合を修正しました

### v0.6.1 (2026/02/06)

- **🐛 バグ修正**
 - 振り返り通知が日付をまたいだ際にスキップされる問題を修正しました
 - Firefox版で通知の許可確認が正しく動作するようになりました
 - アプリ全体の安定性を向上しました
- **💡 使いやすさの改善**
 - 統計画面の期間切り替え時にローディング表示を追加しました
 - 拡張機能のサイズを削減し、表示速度を改善しました

### v0.6.0 (2026/02/05)

- **✨ 新機能**
 - ヘッダーから計測対象サイト一覧を確認できるようになりました
 - 統計画面に「昨日」「先週」の期間選択を追加しました
- **🐛 バグ修正**
 - 一時停止中にタブを移動すると計測が再開される問題を修正しました
 - 各種UIの細かな不具合を修正しました

### v0.5.1 (2026/02/04)

- **✨ 新機能**
 - 振り返り通知の期間に「週・月・半年・年」の選択肢を追加しました
 - データ同期中の状態表示を追加しました
- **🐛 バグ修正**
 - 通知が重なって表示される問題を修正しました
 - 画面表示や動作の安定性を改善しました

### v0.5.0 (2026/02/03)

- **✨ 新機能**
 - 統計画面に「先月」の期間選択を追加しました
- **🐛 バグ修正**
 - Firefox版でのデータ移行・シェア機能の安定性を向上しました
 - ダークモードの見やすさを改善しました

### v0.4.0 (2026/02/01)

- **✨ 新機能**
 - 今日の振り返りを通知する機能を追加しました
 - 同期通知のON/OFF設定を追加しました
 - 設定画面にデフォルト値の表示とリセットボタンを追加しました
- **🐛 バグ修正**
 - タイムゾーン処理とデータ同期の安定性を向上しました
 - 各種エラーハンドリングを強化しました
- **💡 使いやすさの改善**
 - アクセシビリティと操作性を改善しました

### v0.3.0 (2026/01/30)

- **✨ 新機能**
 - トラッキングの一時停止・再開機能を追加しました
 - 複数デバイス間のデータ同期機能を追加しました
 - ストレージ使用量の警告機能を追加しました
- **🐛 バグ修正**
 - 各種UIの不具合を修正しました

### v0.2.3 (2026/01/28)

- **🔧 メンテナンス**
 - 内部コードの品質と保守性を向上しました

### v0.2.2 (2026/01/27)

- **🐛 バグ修正**
 - 利用時間の計測精度と全体の安定性を向上しました
 - Firefox版の互換性を改善しました

### v0.2.1 (2026/01/27)

- **🐛 バグ修正**
 - 利用時間の計測精度を改善しました
 - 複数タブ・ウィンドウ使用時の安定性を向上しました
 - 対象サイトの検出精度を向上しました

### v0.2.0 (2026/01/26)

- **✨ 新機能**
 - 計測対象サイトにTVerを追加しました
 - 設定画面にアプリ情報とナビゲーションを追加しました
- **🐛 バグ修正**
 - 目標残り時間の表示や各種UIを改善しました
- **💡 使いやすさの改善**
 - 読み込み速度を改善しました

### v0.1.0 (2026/01/23)

- 初期リリース

SNSや娯楽サイトで溶けている時間を可視化するブラウザ拡張機能「TokiDoke」をリリースします

AIがWebを要約・代読する時代に、Webは完成品ではなく解釈対象へと変化している。UIはなぜ消えないのか。構造・意味・役割の変化から、これからのWeb制作を再定義する。

AIがWebを代読する時代、Webページは「台本」になる

Safariでdata属性の変更をトリガーにしたCSS transitionが2回目以降動作しないバグと、reflow強制やCSS animationによる解決策を解説

Safariでdata属性変更時にCSS transitionが2回目以降動作しない問題と解決策

この度、Slim Chatworkの初のメジャーバージョン（v1系）をリリース致しましたのでお知らせいたします。

- v1.0.0: 2025/10/15リリース
- v1.0.5: 2025/10/28リリース（現在最新版）

「**クラウド型チャットツール「Chatwork（チャットワーク）」にミニマムな機能を少しだけプラスするサードパーティー製Chrome拡張機能**」として2019/04/02の初リリースから約6年半、リリース回数は延べ43回を超え、時折開発が停滞していた時期もございましたが、ようやく大台のv1系のリリースにたどり着きました。

完全に趣味かつ無料プロダクトとしてコツコツと開発してまいりましたが、アクティブユーザー数は30,000人を超え、多くの方にご利用いただけるプロダクトに成長し大変嬉しく思います。これもひとえにご利用いただいている皆様からのFBによるものでございます。

今後も可能な限り開発を続けてまいりますので、どうぞよろしくお願いいたします。

## v1系の目玉機能「AI書き換え機能」

今回のメジャーバージョンでの目玉機能は「AI書き換え機能」です。

入力したメッセージをAIにより様々なスタイルに書き換えることが可能です。例えば、以下のような場面でご活用いただけます。

- カジュアルな文章をビジネス向けの丁寧な表現に変換
- 長文を簡潔に要約
- 敬語の調整や言い回しの改善

「このメッセージ、もう少し丁寧に書きたいな」「ちょっと硬すぎるかも？」といった日常のちょっとした悩みを、AIがサポートいたします。

日々のチャットを、よりスマートに。ぜひ体験してみてください。

詳細・インストールは公式ページをご覧ください。

- [Slim Chatwork 公式サイト](https://slimchatwork.cofus.work)
- [Slim Chatwork 公式ドキュメント](https://cofus.notion.site/Slim-Chatwork-b2b50c6df564433689c7fb33249f154f)
- [Slim Chatwork 公式X（旧Twitter）](https://twitter.com/SlimChatwork)

Slim Chatwork メジャーバージョン（v1系）リリースのお知らせ

Google Fonts APIの&text=パラメータでサブセット最適化を行った際、ローカルにフォントがあっても不要なWebフォントがダウンロードされる原因と解決方法を解説します。

Google Fontsの&text=パラメータ使用時にローカルフォントが優先されない問題と解決策

Astroのビルドプロセスでページ内の文字列を抽出し、Google Fontsの読み込みを最小限に抑えるカスタムインテグレーションの実装方法について記します。

Astroでビルド時にGoogle Fontsを最適化するインテグレーションの作り方

AirPods Pro 3のファーストインプレッションと歴代モデルとの比較について記します。

AirPods Pro 3のファーストインプレッションと、歴代AirPods Pro（Pro 1〜Pro 3）の比較写真

VSCode MCP ServersでNotion接続エラーが発生する原因と解決方法。設定ミスやトークン認証エラーを修正して正常動作させる手順

VSCodeにて公式のMCP ServersからNotionを追加した場合に接続がうまくいかない場合の対処法

ChromeのGemini nanoモデルをchrome://on-device-ai-internalsから初期化後、ローカルストレージから完全削除する方法

ChromeにてGemini nanoのモデルを初期化後に強制的に削除する方法

ブラウザ拡張機能Manifest V3で「Status code: 15」Service Workerエラー解決法。Plasmoフレームワークでのバックグラウンドスクリプト設定修正

ブラウザ拡張機能で生じる「Service worker registration failed. Status code: 15」エラーの解決方法

![MarkDaysのスクリーンショット](https://images.microcms-assets.io/assets/72d8a8e80ba44c67bfec8b6cb91bb4d9/c18274d122ec4922b4a1f3f25186282f/markdays-app-screenshot-1.png)

# MarkDays（マークデイズ）リリースのお知らせ

この度、日付と曜日を組み合わせたマークダウンリストを自動生成するWebツールをリリースいたしました。

**MarkDays（マークデイズ）** 
<https://markdays.vercel.app/>

スケジュール管理やプロジェクト計画において、日付に曜日を併記したい場面は多いものです。しかし、手動で曜日を調べながら入力するのは意外と手間がかかります。**MarkDays**は、そんな煩雑な作業をワンクリックで解決し、マークダウン記法に最適化された日付リストを瞬時に作成します。

手作業では時間のかかる曜日計算を自動化することで、文書作成の生産性向上をサポートいたします。

## 搭載機能のご紹介

### 直感的な期間設定
- **日付範囲の指定**: 開始日・終了日を選択するだけで、その間のすべての日付を自動的にリスト化
- **便利なプリセット**: 「今後2週間」「来月分」など、よく使われる期間をすぐに選択可能

### 柔軟なカスタマイズ
- **表示形式の選択**: お好みに合わせて日付の表記方法を変更できます
- **リアルタイム編集**: 生成後のリストは直接編集でき、不要な日付の削除や内容の追記が簡単

### 充実した出力オプション
- **PDF出力**: 会議資料や印刷物として活用できる高品質なPDF形式
- **マークダウン出力**: 他の文書への組み込みがスムーズなマークダウン形式

## 開発の背景

日々のメモ作成やドキュメント執筆において、スケジュール表記が必要になることがよくあります。その際、日付だけでなく曜日の情報も併記したいのですが、カレンダーを確認しながらの手入力は思いのほか時間を要します。

そんな「小さいけれど頻繁に遭遇する不便さ」を解消したいという想いから、このツールが誕生しました。シンプルな操作で正確な日付・曜日リストを生成し、文書作成時のストレスを軽減することを目指しています。

スケジュール管理やプロジェクト進行表の作成など、様々なシーンでお役立ていただければと思います。

## 利用をおすすめしたい方

- マークダウンを使った文書作成を日常的に行っている方
- プロジェクトの進行管理や計画立案を担当される方 
- 効率的なドキュメント作成手法をお探しの方
- 曜日付きの日程表作成に時間をかけたくない方

## オープンソースプロジェクトとして

小さなツールではありますが、同じような課題を感じている方のお役に立てれば嬉しく思います。使用感やご要望がございましたら、お気軽にフィードバックをお寄せください。

**GitHub**: <https://github.com/TsubasaHiga/markdays> 
バグ報告や機能提案など、コントリビューションを歓迎いたします。

**開発者による紹介**: <https://x.com/_cofus/status/1933155258903265741>

マークダウン形式で【日付＋曜日のリスト】を一瞬で生成できるミニツールをリリースします

React Router v7でサブディレクトリ運用時のbasename設定方法。URL第一セグメントを基準としたルーティング構成の実装ガイド

React Router v7でbasenameをURLの第一セグメントにする

WordPress 6.4以降でget_header()存在時にthe_content()のimgタグにloading="lazy"が付与されないバグを調査。原因とコンテキストフックでの回避方法

WordPress 6.4以降では記述の仕方次第でget_header()があるとthe_content()で出力されるimgタグにloading="lazy"が付与されない

macOSで古いSafariバージョンを使ったブラウザ検証を、Apple Developerサイトからダウンロードした過去版で実現する方法

macOSで古いバージョンのSafariを用いて検証する方法

VSCodeで拡張子なしファイル（error_log、access_logなど）にシンタックスハイライトを自動適用。files.associationsでパターンマッチングを設定する方法を解説。

VSCodeにて拡張子が存在しないファイルに対して特定パターンのファイル名に基づきシンタックスハイライトを自動的に適用する方法

HDMI出力をUSB Type-C(DisplayPort Alt Mode)でモバイルモニターに表示するためのCableDeconn変換アダプターの使用例

HDMIをUSB Type-C（DP Alt mode）に変換してモバイルモニターで表示する

ViteLibrary Modeでnpmライブラリを作成する手順とesm/cjs両对応、型定義出力、自作Utilityスクリプト集umakiの活用例

Viteでnpmライブラリを作る方法と、自作したUtilityスクリプト集「umaki」の使い方の宣伝

この度、Webサイト実装時にフロントエンドエンジニア目線で「あると便利かも？」なUtilityスクリプト集「[umaki（うまき）](https://www.npmjs.com/package/umaki)」をリリースしましたのでお知らせいたします。

- 名称: umaki（うまき）
- Repository: <https://github.com/TsubasaHiga/umaki>
- npm: <https://www.npmjs.com/package/umaki>
- 対応プラットフォーム: ブラウザ
- License: MIT
- 名前の由来: 開発時う巻きが食べたかったので。割と気に入っています。

## 概要

主にWeb制作に従ずるフロントエンドエンジニアの方の利用を想定したUtilityスクリプト集です。（TypeScript対応）

これまで様々な制作活動をしてきた中で徐々に増えてきた`utils/`ディレクトリ内のスクリプトファイルを、多くの方が利用できると便利かもなとの思いでnpmパッケージとしてリリースに至りました。

あくまで私個人で利用していたものをパッケージ化したもので、またリリース直後（現在`v0.3.0`）な為実装に不備があるかもしれませんが、今後も継続して処理の最適化やバグの修正などを行っていく予定です。

「こういったユーティリティーがあれば便利だな」という要望や、フィードバックがあれば是非IssueやPull Requestをお寄せいただけると幸いです。

制作界隈のフロントエンドの皆さんで一緒に使いやすいスクリプト集を開発できると嬉しいです。

## 全スクリプト一覧（2024/11/21時点）

本記事公開時（2024/11/21）時点では45のユーティリティスクリプトを利用できます。
是非、お試しいただけますと幸いです。

- Control
 - [bgScrollStop](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/control/bgScrollStop.ts)
 - [pd](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/control/pd.ts)
 - [scrollToHash](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/control/scrollToHash.ts)
 - [videoPlayControl](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/control/videoPlayControl.ts)
- Convert
 - [changeDateStringToSpecificFormat](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/convert/changeDateStringToSpecificFormat.ts)
 - [jsonStringToJsonObject](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/convert/jsonStringToJsonObject.ts)
- EventControl
 - [debounce](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/eventControl/debounce.ts)
 - [throttle](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/eventControl/throttle.ts)
- Get
 - [getAspectRatio](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/get/getAspectRatio.ts)
 - [getClassNames](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/get/getClassNames.ts)
 - [getDocumentHeight](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/get/getDocumentHeight.ts)
 - [getEventPaths](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/get/getEventPaths.ts)
 - [getGcd](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/get/getGcd.ts)
 - [getOrientation](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/get/getOrientation.ts)
 - [getParentList](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/get/getParentList.ts)
 - [getQueryParams](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/get/getQueryParams.ts)
 - [getRem](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/get/getRem.ts)
 - [getScrollbarWidth](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/get/getScrollbarWidth.ts)
 - [getSessionStorage](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/get/getSessionStorage.ts)
 - [getStringLength](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/get/getStringLength.ts)
 - [getStylePropertyValue](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/get/getStylePropertyValue.ts)
 - [getStylePropertyValueToNumber](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/get/getStylePropertyValueToNumber.ts)
 - [getUaData](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/get/getUaData.ts)
- Is
 - [isBetweenDateTime](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/is/isBetweenDateTime.ts)
 - [isExistAllElements](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/is/isExistAllElements.ts)
 - [isIpad](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/is/isIpad.ts)
 - [isKeyExists](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/is/isKeyExists.ts)
 - [isSafari](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/is/isSafari.ts)
 - [isScrollable](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/is/isScrollable.ts)
 - [isTouchSupport](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/is/isTouchSupport.ts)
- Remove
 - [removeAllHtmlTags](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/remove/removeAllHtmlTags.ts)
 - [removeAttribute](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/remove/removeAttribute.ts)
 - [removeSessionStorage](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/remove/removeSessionStorage.ts)
 - [removeStylePropertyValue](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/remove/removeStylePropertyValue.ts)
- Set
 - [set100vh](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/set/set100vh.ts)
 - [set100vw](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/set/set100vw.ts)
 - [setAttribute](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/set/setAttribute.ts)
 - [setScrollPositionToCenter](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/set/setScrollPositionToCenter.ts)
 - [setSessionStorage](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/set/setSessionStorage.ts)
 - [setStylePropertyValue](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/set/setStylePropertyValue.ts)
- To
 - [toBoolean](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/to/toBoolean.ts)
 - [toPositiveNumber](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/to/toPositiveNumber.ts)
- Transform
 - [wrapTextWithSpans](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/transform/wrapTextWithSpans.ts)
- Wait
 - [sleep](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/wait/sleep.ts)
 - [waitForAllMediaLoaded](https://github.com/TsubasaHiga/umaki/blob/main/src/libs/wait/waitForAllMediaLoaded.ts)

※ 今後増減する可能性があります。

Webサイト実装時にあると便利そうなUtilityスクリプト集「umaki（うまき）」をリリースします

ViteのcustomLoggerで不要な警告を除外する設定方法。SCSS・CSS警告の選択的抑制でクリーンな開発環境構築

ViteのcustomLoggerで特定のWarningを抑制する方法と、Scssコンパイル時のWarningを抑制する方法

WordPress WP_Queryでカテゴリ名による投稿ソート機能実装。メタクエリとJOIN文を活用した柔軟な並び替え制御

WP_Queryにてカテゴリ名でソートする

Yarn v4環境でGSAP有料ライセンス（Shockingly）をローカルとGitHub Actions両方でインストールできる.yarnrc.yml設定方法

Yarn v4にてGSAPのShockinglyライセンスをローカルとGitHub Actionsにてインストール出来るようにする方法

Splide.jsスライダーが特定環境で動作しない原因はprefers-reduced-motion。アクセシビリティ設定による影響と対処法

特定の環境でSplide.jsが動かない時はprefers-reduced-motionの存在を疑うべし

この度、YouTubeのライブチャット欄のUIをカスタマイズ出来るブラウザ拡張機能[YouTube Live Chat UI Optimizer](https://chromewebstore.google.com/detail/youtube-live-chat-ui-opti/faaokhogbnjiododephheedmmjnplppj?authuser=0&hl=ja)をリリースしましたのでお知らせいたします。

本拡張機能を用いることで、YouTubeのライブチャット欄に対し細かなUI上のカスタマイズを行うことが可能になります。

YouTubeのライブ放送などで、チャット欄の見た目を変更したい場合にご活用いただければ幸いです。

## 機能一覧

- スーパーチャットのアバター画像を非表示
- スーパーチャットのアバター画像にモザイクを追加
- チャットのアバター画像を非表示
- チャットのアバター画像にモザイクを追加
- ユーザー名を非表示
- チャットのフォントサイズを変更
- チャット欄のメッセージ間隔を狭める
- チャット欄の高さを拡張
- チャット欄の偶数コメントに背景色を追加

※ 上記機能はVersion 1.0.0時点のものです。今後のアップデートにより機能が追加及び削除される可能性があります。

## 対応ブラウザ

現時点ではChrome（Chromium全般対応）と、Firefoxに対応しています。

- Chrome（Chromium全般対応）: [Chrome Web Store](https://chromewebstore.google.com/detail/youtube-live-chat-ui-opti/faaokhogbnjiododephheedmmjnplppj?authuser=0&hl=ja)
- Firefox: [Firefox ADD-ONS](https://addons.mozilla.org/ja/firefox/addon/youtube-live-chat-ui-optimizer/)

## 各種連絡先

本拡張機能に関するお問い合わせやご要望等がございましたら、以下の連絡先までお気軽にご連絡ください。

- メールアドレス：info@cofus.work
- Twitter：[@_cofus](https://twitter.com/_cofus)

## その他の情報

- [これまでリリースしてきたブラウザ拡張機能全リスト](https://chrome-extensions.cofus.work/)

YouTubeチャット欄のUIカスタマイズを行えるブラウザ拡張機能「YouTube Live Chat UI Optimizer」をリリースします

iOS 17.2.1のMobile Safariで高解像度動画（1112×2424など）が再生できないエラーの原因と解像度を下げる解決策

Mobile Safariではデカすぎる解像度の動画ファイルの再生に失敗するかもしれない

Vite+WordPressテーマ開発環境でHMR有効化、manifest.json連携、vite-plugin-full-reloadでPHPファイル変更検知を実現する設定方法

Viteを用いたシンプルなWordPressテーマ開発環境の構築方法

ブラウザの開発者ツールで:hover状態を固定しInspectするため、Elementsパネルの:hovフラグやdebuggerブレークポイントを活用する方法

ブラウザでHoverしている状態をInspectする方法

Liquidテンプレートで変数にオブジェクトを追加するためassignとsplit/joinを組み合わせたハック的な方法と実装例

Liquidにて何とかして変数にオブジェクトを追加する方法

Firefox特有のバグでDocument.readyStateが仕様外の「uninitialized」を返す問題の原因と、iframe初期化時の対処法

Firefoxでは`Document.readyState`が仕様には存在しない`uninitialized`を示す事がある

AstroでHTMLコメントを動的出力したい時にエスケープされないようFragmentでラップする方法

AstroでHTMLコメントを動的に出力する

<textarea>内の特定文字列にアンダーラインやハイライトを引くためmirror-textareaでテキストを重ねて装飾するアイデアと実装例

<textarea>要素に入力された特定の文字列に線を引く際のアイデア

LiquidJSテンプレートエンジンでregisterFilter()を使って独自のカスタムフィルターを作成し、テンプレートで使用する方法

LiquidJSにて自作フィルターを使う方法

CSS FlexboxのorderプロパティでDOM構造と表示順が異なる時、子要素が予期しない方向に積まれる現象とその仕組み

Flexアイテムに対しorderを指定しつつ子要素を追加していく時に、子要素が積まれる方向を確認する

この度、当サイトのデザインをリニューアル致しましたのでご紹介いたします。

2019/05/27に本サイトを初公開してから約4年が経ち、積もった技術的・デザイン的な課題解決の速度向上を狙い、重い腰を上げフルリニューアルを行うことにしました。

以前はXDでデザインを行いWordPress構成にて構築を行いましたが、今回はFigmaでデザインを行い、Next.jsで構築、コンテンツ管理にはmicroCMSを用いた形でリニューアルを行いました。4年間でトレンドな技術スタックも、周辺ツールも大きく変わったことを実感しながらのリニューアルでした。

技術的な面では、全体的にSSGならではの高速なページ表示を行えつつ、実績一覧ページなどの認証が必要なコンテンツはAuth0と連携しSSRで表示を行うなど、Next.jsの特徴を活かした構築を行っています。

デザインから実装まで実質約2週間程でのリニューアルでしたが、Figmaを筆頭に周辺ツールの扱いやすさや、至れり尽くせりなNext.jsの開発環境もあって、全てがスムーズに行えたことはとても良い開発者体験でした。

今後も技術的・デザイン的な課題解決を行い、より良いサイトを目指していきますので、今後ともよろしくお願いいたします。

## 当サイトの主な変更履歴

### 2019/05/27：ローンチ

初期版。

- デザインツール：XD（<a href="https://cofus.work/assets/images/news/site-renewal/old.png" target="_blank">スクリーンショット</a>）
- 構築：WordPress

### 2019/06/26：プチリニューアル

コンテンツの追加＋デザインの調整。

- デザインツール：XD（<a href="https://cofus.work/assets/images/news/site-renewal/new.jpg" target="_blank">スクリーンショット</a>）
- 構築：WordPress

### 2023/04/13：フルリニューアル

約4年ぶりのフルリニューアル。

- デザインツール：Figma（<a href="https://www.figma.com/file/gVoNn9FQ9uWqnERWvrP2y2/cofus.work?node-id=0%3A1&t=11gdRCM99RcmKDrY-1" target="_blank">Figmaで表示</a>）
- 構築：Next.js

サイトフルリニューアルのお知らせ

NextAuth.jsで自動ログイン無効化とプロバイダー選択強制設定。セキュリティ強化と複数認証方式対応のカスタマイズ方法

next-authにてサインイン時に前回ログイン情報で自動ログインされるのを抑制する

この度Chrome拡張機能「[Slim Chatwork](https://slimchatwork.cofus.work/)」のアクティブユーザー数が10,000人を達成した記念企画として、公式TwitterにてAmazonギフトカード1万円分を1名様にプレゼントするキャンペーンを実施いたしましたので、お知らせいたします。

2019年4月にリリース以来、足掛け4年目で10,000人を超えるユーザー様にご利用頂くまでに成長しました。これは、Slim Chatworkの機能の拡充や、ユーザーの皆様のご支援によるものです。今後も、より良いサービスを提供するために、ユーザーの皆様のご意見を参考にさせていただき、機能の充実を図ってまいります。

## キャンペーン企画について

- 実施期間： **2023/03/08（水）12:00 〜 2023/03/16（木）23:59**
- 応募条件： <https://cofus.notion.site/Slim-Chatwork-10-000-Twitter-ad530e47a5ab43f09a4c5267ca085beb>

皆様のご応募お待ちしております。

【Amazonギフトカード1万円を1名様に】Slim Chatworkのアクティブユーザー数10,000人達成記念Twitterプレゼント企画実施中！

この度Chrome拡張機能「Slim Chatwork」公式サイトのリニューアルの実施につき、以下の通りサイトURLが変更されましたのでお知らせいたします。

- リニューアル前：<https://cofus.work/chrome-extensions/slim-chatwork/>
- リニューアル後：<http://slimchatwork.cofus.work/>

以降は上記リニューアル前のURLへアクセスした場合、リニューアル後のURLへ自動リダイレクトされます。
今後ともSlim Chatworkをどうぞよろしくお願いいたします。

Slim Chatwork公式サイトのリニューアルとURL変更のお知らせ

macOS Venturaファイル共有機能停止エラーの緊急対処法。システム設定リセットとネットワーク再構築による復旧手順

macOS Venturaで一切のファイル共有が出来ない時の一時的な解消方法

Viteビルド時にpublicOptions.excludeで特定ディレクトリを除外し、不要なファイルをdistにコピーさせないようにする方法

Viteにてbuild時にpublic配下の一部のディレクトリを除きたい場合

この度2022/12/29をもって、2015/01より無料配布していましたWordPress専用テーマSTINGER5の子テーマ 「SIMPLESTER」の配布を終了しましたことをお知らせいたします。

なお同日をもって配布サイト（<http://simplester.degitekunote.com/>）の公開も終了いたしました。
長年のご利用誠にありがとうございました。

## バージョン別インストール数

- Ver1 (公開日：2015/01/28)：963
- Ver2 (公開日：2015/02/09)：1,091
- Ver3 (公開日：2015/03/01)：1,190
- Ver4 (公開日：2015/04/04)：1,670
- Ver4 カスタマイズ版 (公開日：2015/05/17)：1,568
- Ver5 (公開日：2015/08/10)：2,148
- Ver6 (公開日：2015/12/21)：1,203

## 累計インストール数

- 累計：9,833

WordPress専用テーマSTINGER5の子テーマ 「SIMPLESTER」の配布終了のお知らせ

iframe内でdocument.write()使用後にdocument.close()を呼び忘れるとブラウザのローディングインジケーターが永続する問題と対策

document.write()後にclose()を忘れるとブラウザのローディングが永遠に完了しない場合がある

GitHub Codespacesでlibjpeg-dev等の画像処理ライブラリをapt-getでインストールし、yarn install時のエラーを解決する方法

Codespacesでlibjpegをインストール

SassコンパイルでsassOptionsのfiber指定を省略してもパフォーマンス低下が許容範囲内に留まることを確認した件と設定簡略化の推奨

sassOptionsのfiber指定しなくてもコンパイル速度の低下は許容出来そう

Googleフォームのクエリ文字列制限8192文字の仕様と対処法。URLパラメータでのフォーム事前入力時の制約と回避策

Google フォームのURLに付与出来るクエリ文字列は8192文字まで

Viteマルチページアプリ構成で@macropygia/vite-plugin-glob-inputを使いfast-globでエントリーポイントを自動検知する設定方法

MPA構成のViteのエントリーポイントをvitePluginGlobInputで自動化

ViteのカスタムHMR（Hot Module Replacement）で高度なリロード制御。特定ファイル変更時の独自処理実装と開発効率向上

ViteでカスタムHMRを利用する

Viteでvite-plugin-handlebarsを使ってHTMLパーツやコンポーネントをインクルードし、メンテナンス性の高いMPAを構築する方法

Viteでvite-plugin-handlebarsを使用してHTMLパーツを読み込む

GSAP ShockinglyGreenライセンス使用時のyarnインストールエラー解決法。yarn.lock削除とプライベートレジストリ設定の対処手順

GreenSockのShockinglyGreenライセンスでGSAPを追加したプロジェクトがyarn install出来ない時はyarn.lockを削除すると良い

Xcode 13 SimulatorでSpotlight高CPU使用率問題の対処法。インデックス無効化とパフォーマンス最適化で開発環境を改善

Xcode 13のSimulatorでSpotlightのCPU使用率が100%になる際の対策

Next.jsでisLocal環境変数を活用した開発時限定リソース読み込み制御。ビルド時とランタイムでの環境判定とリソース管理

Next.jsにて環境変数isLocalを新たに用意し開発中のみ読み込みたいリソースをnext buildでも読み込む

複数JSON SchemaをAjvでスタンドアロンバリデーターとしてビルドし、CSP環境下でも使用可能な独立したバリデーション関数を作成する手順

複数あるJSON SchemaをAjvでスタンドアロン化されたValidatorとして生成する

VSCodeのJSON Schema from TypeScript拡張機能でTypeScript型定義からJSON Schemaを自動生成し、APIバリデーションに活用する方法

VSCodeにてtsファイルよりJSON Schemaを生成する

Next.jsでbasePath設定後にクライアントサイドナビゲーションが動かない問題の解決法。Link hrefとasプロパティの設定ミスを防ぐ

Next.jsでbasePath設定を行うとclient-side navigationが効かなくなった時の単純な見落とし箇所

OS視差効果無効設定とブラウザprefers-reduced-motionの関係性。アクセシビリティとウェブアニメーション制御の現状と課題

OSの設定では視差効果をオフに、でもブラウザではその設定を適用しない、という事は現状できない

GSAP 3.10.2のScrollTrigger pin機能使用時にウィンドウリサイズでposition:fixed要素が壊れるバグのrefresh()での対処法

GSAP 3.10.2でScrollTriggerのpinを有効にした状態でウインドウリサイズすると固定要素が壊れる時

この度2022/03/01より、これまで趣味で開発をしてきたGoogle Chrome拡張機能の全てを確認できるリストページを公開しましたのでお知らせいたします。

- Chrome拡張機能開発リスト: https://chrome-extensions.cofus.work/

2016年よりちょこちょこと趣味程度のものから少し本腰を入れたものまで様々なChrome拡張機能を制作・リリースしてきましたが、一覧として見ることができるページが無かった為制作に至りました。

主にツール系の拡張機能を多くリリースしておりますので、もし興味がございましたら是非インストールしてみて下さい。
Chromeウェブストア内でのレビュー等もお待ちしております。

---

Chrome拡張機能開発リストページに関するお問い合わせ先情報：

- メールアドレス：info@cofus.work
- Twitter：[@_cofus](https://twitter.com/_cofus)

Chrome拡張機能開発リストページを公開しました

macOS Montereyでlocalhost:5000が403エラーになる原因はAirPlayレシーバー機能がポート5000/7000を使用するため、システム環境設定で無効化する解決策

macOS Montereyではデフォルトだとlocalhost:5000が403になる

macOSのQuick Lookが機能しない時に~/Library/Caches/com.apple.QuickLook.thumbnailcacheのキャッシュ削除で復旧する方法

macOSのQuick Lookが機能しなくなった時はキャッシュを削除してみるべし

Stylelint v13からv14へのアップグレードで設定ファイルの書き方変更やルール名変更への対応手順と破壊的変更の対処法

Migrating Stylelint from v13 to v14

Safari/WebKitでvisibility:hidden指定時に-webkit-line-clampが効かないバグを調査。テキスト省略が無効化される原因とopacityでの代替手段

Safari（WebKit）ではvisibility hiddenの指定があるとwebkit-line-clampが効かない

JavaScriptのnavigator.onLineとイベントリスナーを使ってネットワークのオンライン・オフライン状態をリアルタイム検出。自動再接続機能も実装可能。

JavaScriptでオンライン・オフラインを検出する

Picture-in-Picture APIで動画以外のコンテンツをPinP表示するためcanvasとcaptureStream()で画像をPinP表示する実装例

Picture-in-Picture APIで画像表示

SVGアイコンをsymbol・useタグで効率的に使い回す方法。ページサイズ削減とコード重複防止を実現するSVGスプライト技術

同じSVGを使い回す

Facebook Pixel Codeの<noscript>タグを<head>内に配置したjsdomでパース時にHTML構造が変わる問題と<body>直下に移動する解決策

Facebook Pixel Codeの<noscript>タグの位置

DOM要素の非同期出現を待受する便利なnpmパッケージを紹介。waitForSelector、MutationObserver代替手段で動的コンテンツ対応

要素出現まで取得を待つ系で便利なnpmパッケージ

JavaScriptで配列の特定要素を効率的に入れ替えるSwapArray関数の実装。ドラッグ&ドロップUI開発でのソート機能に活用できる実用的なコード例を解説。

配列の順番入れ替え

Sass mixin.scssを機能別ファイルに分割してモジュール管理を最適化。Dart Sass対応の効率的スタイル構成設計

mixin.scssを各@mixin単位でファイル分割

JavaScriptでObject.definePropertyを使った変数監視システム。モジュール間でのリアクティブなデータ連携とプロパティ変更検知

JavaScriptファイル間でプロパティの変化をウォッチする手段

ヒートマップのカラーパレット選定でwistia/heatmap-paletteの活用と色覚シミュレーターで視認性を改善した知見

ヒートマップのカラーパレット選定で得られた知見

Chrome拡張機能Manifest V3でServiceWorker内でのi18n国際化メッセージ取得エラー解決法。代替手法と実装パターン

Chrome拡張機能のServiceWorker上でchrome.i18n.getMessage()が取れない時の対応法

同名ファイルダウンロード時のブラウザ別自動リネーム機能比較。Chrome・Firefox・Safari・Edgeの挙動差とUX設計指針

同名ファイル保存時の各ブラウザのリネーム挙動まとめ

macOSでキーボード操作のみでコンテキストメニューを表示する設定方法。アクセシビリティ機能を活用した効率的な操作術

macOSでコンテキストメニューの表示をキーボードのみで行う設定

HTML+JavaScriptでJSONファイルをBlobとURL.createObjectURLでエクスポート、FileReaderでインポートするシンプルな実装例

HTML+JavaScriptでBasicなファイルのエクスポートとインポート

macOS Catalina以降iTunesが廃止され、Finder.appでiOSデバイスのUDIDを取得する新しい手順とシステムレポートでの代替手段

Finder.appよりiPhoneのUDIDを取得する

Adobe XDで標準機能にないposition:stickyを再現する裏技。レイヤーとコンポーネントを使ってスクロール追従ヘッダーを実現する方法を詳解。

Adobe XDでSticky風な動きをさせてみる

JSON SchemaバリデーターAjvをCSP制限環境下で使用するためにnew Function()を回避しスタンドアロン化する方法

Ajvをスタンドアロン化しCSP環境下で利用する流れ

Chrome Web Storeで「3,000+ 人」と省略表示されるChrome拡張機能の正確なユーザー数をページソースのuser_countから取得する方法

正確にChrome拡張機能のユーザー数を知る

この度2021/06/01より、当サイトのディレクトリ「[COFUS技術ブログ](https://cofus.work/blog/)」が移転されました事をお知らせいたします。

- 移転先：[https://cofus.blog](https://cofus.blog)
- 移転先のサイトについて：[https://cofus.blog/pages/about](https://cofus.blog/pages/about)

移転先はNext.jsを用いた完全な静的サイトとして構築されており、Markdown.mdファイルのみで全てのコンテンツの配信が行われています。これまでに比べ素早いコンテンツの作成と更新が可能になり、またページの表示を含めたサイト全体の表示体験の向上も期待出来る仕上がりとなっております。

移転先でもこれまでと同様に、フロントエンドエンジニアとして活動する中で得られたさまざまな技術的知見の掲載を行っていきますので、是非アクセス頂けますと嬉しく思います。

なお以降は移転先でのみコンテンツの更新を行っていきますが、現状当サイトにある既存コンテンツは削除することなく引き続き閲覧が可能です。

今後ともCOFUS技術ブログをよろしくお願いいたします。

技術ブログを移転しました

macOS/Windows不要ファイル.DS_Store・Thumbs.dbを効率的に削除するワンライナーコマンド。プロジェクト整理とGit管理最適化

.DS_StoreとThumbs.dbを1ライナーで削除

Gulp環境でnode-sass(LibSass)からDart Sassへコンパイラを移行する際の設定変更とfibersを用いたパフォーマンス最適化

Dart Sassマイグレーション with Gulp

FFmpegを使って動画からGIFアニメーション・WebP画像を生成する実践的なコマンド集。ファイルサイズ最適化とクオリティ調整テクニックも紹介。

ffmpegで動画をアニメーションGIF/WebPへ変換する手順

モバイルサイトの-webkit-tap-highlight-colorプロパティでタップ時のハイライト色を制御。タブUIやアコーディオンでの不自然な動きを解決するUX改善テクニック。

タップ領域のハイライト色とユーザー体験の改善

git filter-branchでPush済みコミットのCommitterとAuthorのメールアドレスを一括変更し、force pushで履歴を更新する手順

Push済みコミットのCommiterとAuthorのメールアドレスを変更する流れ

HLS(HTTP Live Streaming)でFV動画を実装してパフォーマンス最適化。hls.js導入、初期セグメント調整でFCPスコア維持する手法

FV動画をHLS形式で実装した時の備忘録

Web制作の納品時にクライアント確認用の差分表示HTMLファイルを作成し、変更箇所を視覚的に分かりやすくするツール作成例

納品ファイルに添付する差分確認用HTMLファイルを生成する

WP-CLIでWordPressサイトのURL一括置換方法。search-replaceコマンドでドメイン移行とサイト引っ越しを安全実行

お知らせ

macOS Montereyではデフォルトだとlocalhost:5000が403になる

macOSのQuick Lookが機能しなくなった時はキャッシュを削除してみるべし

Migrating Stylelint from v13 to v14

Safari（WebKit）ではvisibility hiddenの指定があるとwebkit-line-clampが効かない

JavaScriptでオンライン・オフラインを検出する

Picture-in-Picture APIで画像表示

同じSVGを使い回す

Facebook Pixel Codeの<noscript>タグの位置

要素出現まで取得を待つ系で便利なnpmパッケージ

配列の順番入れ替え

お問い合わせ

必須お名前

任意会社名・組織名

必須種類

必須お問い合わせ内容