嘉宝

各所で多数の動画を使用した構成になっており、また動画が商品の世界観を表現する重要な要素となっていることから
できるだけ読み込み速度を含めたページパフォーマンスを下げずに快適に表示が出来るよう工夫しながら実装を行いました。

動画を含めたメディアの数の割には快適なページの表示を行えているかと思います。

また新しい試みとしてはCodespacesを利用し、リアルタイムに細かなチューニングなども行いました。
デザインをFIXとした作りっぱなしではなく、実装後も細部の調整が行えたのは最終的な品質の向上に繋がったと思います。

Niraikanai

Vite + Vanilla JSで静的サイトを構築する事を想定したボイラープレートです。

余計な事はしないながらも各種Linter等を標準でインストールしたりと、Viteで静的サイトを構築する際に幸せになれるよう現在OSSで開発継続中です。

Chrome拡張機能開発リスト

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

毎日決まった時間に各Chromeウェブストア配信ページをスクレイピングし、数値などの各種データを取得した後Vercelにてデプロイする仕組みを実装しています。

Chrome拡張機能「Supach Numbering」

YouTubeのスーパーチャットやコメント欄のUIをカスタマイズすることが出来るChrome拡張機能です。
Live放送を見ている際に「こんな機能があったらいいな」と思った機能を色々と実装しています。

Chrome拡張機能「マネフォSum」

長年使用しているMoneyForward MEの家計簿テーブルにて「大項目・中項目」で項目を絞り込む事が多いのですが、その際に絞り込んだ項目だけの合計金額を算出する機能が欲しかったのでChrome拡張機能にて実現してみました。

Chrome拡張機能「Amazon定期おトク便の合計金額表示」

Amazon定期おトク便ページ（https://www.amazon.co.jp/auto-deliveries）の各月毎に合計金額が表示されてて欲しいのですが、デフォルトでは表示されないのでChrome拡張機能にて実現してみました。

COFUS 技術ブログリニューアル

本サイトの技術ブログ(https://cofus.work/blog/)をNext.jsにて新たにリプレイス＆移転した技術ブログです。
デザインから実装、運用まで担当し、Markdownファイルのみで記事を管理する事に特化した構成で制作を行いました。

記事の追加から加筆＆修正まで、すべて使い慣れたエディタ+Githubのみの使用で行える特徴があり、技術的な内容を気軽に残しておけるフロントエンドエンジニアとしての知見をまとめる場所として今後も運用を行っていく予定です。

瀧谷不動明王寺

縦書きが各所で見られるWebではあまり無い和を存分に感じられるサイトです。コンテンツが非常に多いこともあり、PJAXを組み込みプリフェッチを存分に活用しページパフォーマンスの担保を行いました。
厄年早見表などは自動処理を行い、万一年号が変わった際でも改修すること無く手動で操作が出来る仕組みも取り入れています。
Instagramのデータ取得はアクセス毎ではなく定期取得したデータでキャッシュファイルを生成し、以降はキャッシュファイルから参照する形にすることでページ読み込み速度の担保も行っています。

piiiQcy

DockerベースのWordPress構築用ボイラープレートです。Makeコマンドで一通り構築が出来るよう仕組みにしており、WordPress構築する際の「面倒」をなるべくブラックボックス化する目標の元制作しています。OSSで開発中。

Quicint - EJS Boilerplate

テンプレートエンジンにEJSを用いたHTML5サイト構築用のボイラープレートです。
静的構築時にメインで使用しているボイラープレートでもあり、知見が溜まった段階で不定期にアップデートしています。
npm（https://www.npmjs.com/package/quicint）でも公開中。

Percolator（Web制作テンプレート）

元々制作会社に在籍していた際に社内テンプレートのFork版として2018年4月より開発を開始。
PHPによる一般的な静的サイトを制作する際に私が好んで用いるテンプレートになります。

Fork版からprivateリポジトリ、そしてpublic版として公開し、2019年7月に名称を「Percolator」（読み方：パーコレーター）としてOSSで公開しております。
メンテナンスは私1人で行っております。

時折知見が溜まった際に一気に更新、仕様追加をしていくスタイルでの開発ですのであまり一般受けはしませんが、もしよければミニマムなWebサイト制作などで使って頂けると嬉しいです。

LicenceはMITです。

Slim Chatwork 公式サイト

Chrome拡張機能「Slim Chatwork」の公式サイトということで、製品自体の名前にも入っている「Slim」を意識したデザインにしてみました。
製品の「操作感」「機能面」「更新情報」の3点に絞った情報を全面的に押し、公式サイトとして必要最低限の情報のみをピックアップした構成にしています。

Chrome拡張機能「Slim Chatwork」

個人的にどうしてもChatwork（Web版）のUIを調整したい部分があったのでChrome拡張機能として制作。
特に不満もなく長い間個人的に使用していましたが、私と同じ様に調整したい方もいるのでは？と思い重い腰を上げて一般化してみました。
インストールすることでポップアップUIから簡単にChatworkのUIをポチポチ調整することが出来ます。

YouTube ScRfixeder

YouTubeの動画再生ページ内にてスクロールをしても動画スクリーンを固定してくれるChrome拡張機能として制作。
あったら良いなと思ったので制作し、しばらく便利に利用しておりました。
動作イメージ：GIFアニメーション

↑このアニメーションを作ったのも良かったのか、公開早々に多くの方にインストール頂きました。

ただ度重なるYouTubeの仕様変更に対応できずVer0.1.2で更新停止。
そのまま放っておいたらいつの間にか多くのBAD評価が付いてしまった為公開を停止しました。（心無い罵倒コメント攻撃を受けた初めての体験でもありました）
公開停止：2019/06/10

またいつか暇な時があれば再公開するかも？...

見え〜るAlt 公式サイト

見え〜るAltの公式サイト。

職場で使用していた見え〜るAltが割と好評でしたので、一般化バージョン「Ver0.7.1」のリリースと同時に公式サイトも準備しました。

特にブランディングもなく、またフロントエンドとしての実績が無い頃の制作物ですのでかなり質素かつシンプルですが、主要機能の1つにホワイトリスト機能があったためその真理値表等の機能面の使用方法にフォーカスして制作しました。

見え〜るAlt

当時のお仕事にてAltを大量に確認しないといけない状況になり、1つ1つソースコードで確認は嫌だし、既存のツールは微妙だし、、では作ってしまおうという事で制作したのが「見え〜るAlt」。

初めての自作Chrome拡張機能でした。

Altが画面上に表示される以外の機能は一切ないなんとも割り切ったものでしたが、当時の私＆同僚としては画期的だったホワイトリスト機能が備わっており、特定のドメイン配下でのみ自動で表示する事が可能でした。

既に同様の既存ツールは幾つかありましたが、一々ボタンをクリックする必要があったり、またON・OFFの為にボタンをクリックするこの動作が作業のロスタイムの原因としてありました。

見え〜るAltでは特定のドメインを予め登録することでAltチェックが必要なページのみ自動で表示、不要なページ、Altが表示されて欲しくないページでは無効化が簡単に出来たことから作業効率化ができ、社内では割と好評でした。

degitekunote2

今年で8周年目を迎える個人ブログ「degitekunote2」です。

元々無料ブログサービス「FC2ブログ」で2011年5月から2014年2月まで運営していましたが、独自ドメインを取得しWordPressへ以降しました。

「初のWebサイト制作はどれか？」と聞かれたら私の場合はこのブログになります。またこのブログがキッカケと言ってもいいほど様々な事が学べ、また現在進行系でWebのアレコレを体感しながら吸収しております。

FC2ブログの時代は複数あるテーマから選んだデザインを当て、徐々にカスタマイズを行い、最終的にはこの様なデザインになりました。http://degiteku.blog.fc2.com/

そしてWordPressへ移行し、初期の頃は既存のテーマを用い運営。徐々にカスタマイズを行い、暫くすると完全オリジナルデザインのテーマに変わっていきました。それから何度もデザインが変わり、徐々にコンテンツの中身も充実し（本当かな笑）、企業様から直接製品レビュー依頼を受ける事も出てきました。

最近は専ら更新が止まっておりますが、現在密かに完全リニューアルを行っている最中で今年夏頃には復活する予定です。
これからも可能な限り続けていきます！