この度、Webサイト実装時にフロントエンドエンジニア目線で「あると便利かも？」なUtilityスクリプト集「[umaki](https://www.npmjs.com/package/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」をリリースします

この度、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」をリリースします

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

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

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

この度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変更のお知らせ

この度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」の配布終了のお知らせ

この度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拡張機能開発リストページを公開しました

この度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技術ブログをよろしくお願いいたします。

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

この度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日 比嘉翼 以上

個人開業のお知らせ

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

2019/05/27に公開してから約1ヶ月が経ち、Webサイトとしての機能拡充化を行うため新たに以下のコンテンツとページを追加いたしました。

- 技術ブログ
- お知らせ
- サイトマップ
- 個人情報保護方針ページ
- 免責事項ページ

以前はトップページのみで完結するシングルページ構成で制作しておりましたが、今回のリニューアルで下層ページを持つ事になった為デザインも含め様々な点が一新されております。

- [以前のTOPデザイン（スクリーンショット）](/assets/images/news/site-renewal/old.png)
- [今回新しくなったTOPデザイン（スクリーンショット）](/assets/images/news/site-renewal/new.jpg)

今後も様々な情報を発信できる場として機能拡充とともに、各種コンテンツの追加もしていきますので是非ご覧くださいませ。

サイト機能拡充化の為、当サイトのデザインが一新されました

この度、私比嘉翼（HIGA TSUBASA）の生産活動を発信するポートフォリオサイトを公開致しました。

トップページは活動実績やスキルリストなどを紹介するポートフォリオとして機能し、下層ページには技術ブログやお知らせなどの各種コンテンツを見ることが可能です。
様々な情報を発信し、そして私個人の活動の拠点として機能させていきますのでご興味がありましたら是非ご覧くださいませ。

お知らせ一覧

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

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

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

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

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

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

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

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

個人開業のお知らせ

サイト機能拡充化の為、当サイトのデザインが一新されました

当サイトをローンチ致しました

お問い合わせ

必須お名前

任意会社名・組織名

必須種類

必須お問い合わせ内容

お知らせ一覧

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

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

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

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

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

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

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

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

個人開業のお知らせ

サイト機能拡充化の為、当サイトのデザインが一新されました

当サイトをローンチ致しました

お問い合わせ

必須お名前

任意会社名・組織名

必須種類

必須お問い合わせ内容

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