![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.4.0 (2026/02/01)

- **✨ 新機能**
 - 今日の振り返りを通知する機能を追加
 - データ修復時のユーザー通知を追加
 - 同期通知のON/OFF設定を追加
 - 設定画面にデフォルト値の明示とリセットボタンを追加
 - 統計ページにデータ保持期間の説明を追加
 - エラー発生時のリカバリー案内を改善
 - インポート/エクスポート時のフィードバックを改善
- **🐛 バグ修正**
 - ポップアップウィンドウのタイトル表示を修正
 - シェアモーダルのデザインをアプリコンセプトに統一
 - ランク評価メッセージをアプリコンセプトに合わせて修正
 - タイムゾーン処理とデータ同期の安定性を向上
 - 各種エラーハンドリングを強化
- **⚡ パフォーマンス改善**
 - 定期保存間隔の最適化
 - ストレージアクセスとレンダリングの効率化
- **♿ アクセシビリティ改善**
 - モーダルのフォーカス管理を改善
 - ボタンのタッチターゲットサイズを拡大
 - スクリーンリーダー対応を強化

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

- **✨ 新機能**
 - トラッキングの一時停止・再開機能を追加
 - オフライン状態のインジケーターを追加
 - シェアテキストの自動生成機能を追加
 - 複数デバイス間の同期コンフリクト解決機能を追加
 - ストレージ使用量の警告機能を追加
 - シェア画像の換算表示を短時間利用時にも表示
- **🐛 バグ修正**
 - Xのブランド色を正しい黒色に修正
 - 各種UIテキストの修正
- **⚡ パフォーマンス改善**
 - 統計画面の表示速度を改善

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

- **🔧 メンテナンス**
 - 内部コードの品質と保守性を向上
 - テストカバレッジを拡充

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

- **🐛 バグ修正**
 - 利用時間の計測精度とセッション管理の安定性を向上
 - 通知機能の動作安定性を向上
 - Firefox版の互換性を向上
- **⚡ パフォーマンス改善**
 - UIの描画パフォーマンスを向上
- **🔧 メンテナンス**
 - セキュリティを強化

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

- **✨ 新機能**
 - 通知機能の動作安定性を向上
- **🐛 バグ修正**
 - 利用時間の計測精度を改善
 - 複数タブ・ウィンドウ使用時の安定性を向上
 - タイムゾーン変更時の日付処理を改善
 - データインポート時の重複チェックを追加
 - バッジ表示の不具合を修正
 - 対象サイトの検出精度を向上

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

- **✨ 新機能**
 - 計測対象サイトにTVerを追加
 - 設定画面にアプリ情報セクションとナビゲーションを追加
 - ダッシュボードにエラー通知機能と目標設定への導線を追加
 - ChangeLogページへのリンクを追加
- **🐛 バグ修正**
 - エラーハンドリングの強化
 - 目標残り時間の表示を改善
 - 統計ページの空状態UIを改善
- **🌐 国際化対応**
 - 各種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コマンドでドメイン移行とサイト引っ越しを安全実行

WP-CLIを用いたURLの置換

JavaScriptのMarkdownパーサーremarkでシンタックスハイライト、外部リンク処理、改行対応を実装。TypeScript型定義とプラグイン設定の実用例を解説。

remarkを使用したBasicなMarkdwonパース

macOS AutomatorでコンテキストメニューからAES256暗号化パスワード付きZIP圧縮を右クリックで実行できるワークフロー作成方法

macOSでコンテキストメニューからファイルをAES256パスワード付きZIP圧縮を行うAutomatorのワークフロー作成

Google Analytics 4のDebugViewでリアルタイムモニタリングするためGoogle Analytics Debugger拡張機能やgtagパラメータでデバッグモード有効化

GA4でデバッグモードを明示的に有効化する方法

husky v5以降の新しいインストール手順とpre-commitフックのセットアップ。yarn環境での設定変更とlint-staged連携の実装方法を解説。

husky v5以降のセットアップの仕方

Browser Syncでポート80を指定してローカル開発環境をポート番号なしで構築。FONTPLUS等の外部APIでドメイン制限回避やhosts設定も解説。

Browser Syncでポート番号なしで接続

Chrome拡張機能chrome.runtime.getManifest()でmanifest.jsonの各種設定値を動的に取得し、バージョン表示などに活用する方法

Chrome拡張機能でmanifest.jsonから様々な値を取得する

PowerCMS X標準フォームでユーザー選択項目別に管理者メール通知先を分岐するMTタグの条件分岐活用法と実装例

PowerCMS Xで標準フォームにてユーザーによる選択項目別に管理者へのメール通知先を変える

この度2019/08/01（和暦：令和元年8月1日）よりWeb制作を主とした事業を行う為、個人開業いたしました事をお知らせいたします。
Web制作におけるコーディング業務、システム構築、サービス開発、準委任業務・請負業務等を行う予定でございます。

現状はWeb制作を事業拠点としますが、ゆくゆくはトキメクものづくり全般に携わる事を目標とし「職業＝趣味＝ものづくり」を体現していきます。未熟者ではありますが、精一杯努力いたす所存でございます。何とぞ皆様のご指導と、今後のお引き立てをよろしくお願いいたします。

**実績の確認は[こちら](https://cofus.work/#works)**

---

- 屋号：COFUS
- 屋号（ふりがな）：こふす
- 屋号由来：中学生時代に自宅に初めて自由に触れるPCが登場し、そのPCのセットアップをした際に適当にキーボードをタイプして名付けたUSER名が「COFUS」。OSの仕様上ユーザーフォルダ名にはUSER名が付いた事から、自然と「COFUS」フォルダに様々なデータを保存することになり、当時の私の中で「COFUS」という文字列がトップドメインというイメージになりました。
これが徐々に形を変え、大学生時代には人生における生産物を管理する個人プロジェクトへと置き換わり、そしてこの度屋号名としても採用いたしました。
実は文字列自体には意味を含まない、ちょっぴり変わった由来でございます。

---

- 開業日：2019/08/01
- 活動拠点：大阪府大阪市中央区内久宝寺町（※ 個人事業主の為以下省略）
- [Web（本サイト）](https://cofus.work)
- Mail：info@cofus.work
- [Chatwork](https://chatwork.com/higatsubasa)
- [Twitter(@_cofus)](https://twitter.com/_cofus)

令和元年8月1日 比嘉翼 以上

個人開業のお知らせ

Chrome拡張機能でGoogle Analytics連携時にContent Security Policyエラーを回避するmanifest.json設定とssl.google-analytics.com使用法

Chrome拡張機能でGA連携する時にCSPで怒られたらanalytics.js読み込み先をsslタイプにしてみると良い

2019年時点で一般的なWebサイトの<head>内に必要な最小要素一覧。metaタグ、OGP、標準的なSEO設定を網羅

2019年、最も一般的に使える<head>内に必要な要素一覧

Sass/SCSSのmapデータ型で連想配列操作を効率化。key-valueペアでのスタイル管理とループ処理による動的CSS生成

Scssで連想配列を扱う

HTTP環境下でBasic認証が平文で送信される危険性をWiresharkでパケットキャプチャし、実際にパスワードを盗み見る実験

非SSL環境下でのBASIC認証が危険な理由をWiresharkで実際にパケット解析をして実感してみる

vanilla-autokanaで jQuery不要のふりがな自動入力機能実装。日本語フォームUX向上とライブラリ軽量化を両立

ふりがな入力支援が実現できるjQueryプラグインautokanaのPure JS版「vanilla-autokana」が良い感じ

PHPで現在URLからパンくずリストを自動生成し、カスタムラベル対応や構造化データ出力も行うスマートな実装例

スマートにパンくずリストを実装する

PHPでHTTPリファラー取得と条件分岐によるローディング画面制御。初回訪問者と内部遷移ユーザーのUX最適化手法

PHPにてリファラを取得してローディング画面の出し分けを行う

gulp-penthouseでファーストビュー分のCritical CSSを自動生成し、file_get_contentsで<head>に埋め込みページ描画速度を向上

お知らせ一覧

GulpにてCritical CSSを生成し、PHPで<head>内に出力する簡素な方法

JavaScriptでスクロールに合わせて特定の要素にActiveクラスを追加する

お問い合わせ

必須お名前

任意会社名・組織名

必須種類

必須お問い合わせ内容