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コマンドでドメイン移行とサイト引っ越しを安全実行

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でパケットキャプチャし、実際にパスワードを盗み見る実験

お知らせ一覧

Migrating Stylelint from v13 to v14

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

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

Picture-in-Picture APIで画像表示

同じSVGを使い回す

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

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

配列の順番入れ替え

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

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

お問い合わせ

必須お名前

任意会社名・組織名

必須種類

必須お問い合わせ内容