# cti1650 Portfolio
> Yuichi Sakagami (cti1650) のポートフォリオサイト。個人開発したChrome拡張機能・Webアプリ・ツール類と、Qiita/Zennで公開している技術記事をまとめています。
Last-Updated: 2026-04-12
## プロフィール
- Name: Yuichi Sakagami
- Handle: cti1650
- Birthday: 1992-01-25
- Skillset: HTML, JavaScript, TypeScript, CSS, React.js, Next.js, Tailwind CSS, React Native, Expo, Python, PHP, VBA, GAS, Chrome拡張機能開発
- Qualifications & Tools: ITパスポート, VBA Expert Standard(Excel), GitHub, VSCode
## リンク
- [Site](https://cti1650-portfolio-site.vercel.app/): ポートフォリオサイト本体
- [GitHub](https://github.com/cti1650)
- [X (Twitter)](https://x.com/cti1650)
- [Qiita](https://qiita.com/cti1650)
- [Zenn](https://zenn.dev/cti1650)
## 参照先
- [ポートフォリオ一覧](https://cti1650-portfolio-site.vercel.app/llms/portfolios.txt): 公開中の個人開発プロジェクト一覧(技術スタック・リンク付き)
- [記事一覧](https://cti1650-portfolio-site.vercel.app/llms/contents.txt): Qiita/Zennで公開している技術記事一覧(公開日・いいね数付き)
- [全文まとめ](https://cti1650-portfolio-site.vercel.app/llms-full.txt): 上記すべてを1ファイルに連結したもの
# ポートフォリオ一覧
Name: simple-memo-extension
Description: サイトを調べた際に手軽にメモが取れるようにChrome拡張機能を作成しました！
Link: https://chrome.google.com/webstore/detail/simple-memo-extension/cbjnjeodomlbimegfmenffenlfpndpoc?hl=ja&authuser=0
GitHub: https://github.com/cti1650/simple-memo-extension.git
Image: https://i.gyazo.com/e6b3af37d38c368a6dafdf9266ad79b0.png
Tags: Chrome拡張機能, Next.js, Tailwind.css, React.js
Type: 公開中
Name: Map Switching Extension
Description: Googleストリートビューから直接他のマップ（GoogleMap,YahooMap,地理院地図）を開ける拡張機能を作成しました！
Popupを開く拡張機能は前にも作成していましたが、今回はPopupを呼び出したタブの情報（URL,タイトル）をNext.jsを使って呼びだせるようにするところを検証するために作成しました！
Link: https://chrome.google.com/webstore/detail/map-switching-extension/dkpkkcfenknkfjjpbaafahfakkdlnjcl/related?hl=ja&authuser=0
GitHub: https://github.com/cti1650/map-switching-extension.git
Image: https://i.gyazo.com/afd2a165618829d816d535ab2cc5511c.png
Tags: Chrome拡張機能, Next.js, Tailwind.css, React.js
Type: 公開中
Name: Tailwindcss Extension
Description: Tailwind.cssのサイトでクラスをすぐに検索できるように拡張機能化しました！
新規タブで開く方式ではなくポップアップで表示するようにしたため、
手軽に検索が出来るような仕様になっています。
Link: https://chrome.google.com/webstore/detail/tailwindcss-extension/pajplfpbbmajkeebcenokomnkloapamf?hl=ja&authuser=0
GitHub: https://github.com/cti1650/tailwindcss-extension.git
Image: https://i.gyazo.com/197977e482bbf0890c765e15babbe8b4.png
Tags: Chrome拡張機能, Next.js, Tailwind.css, React.js
Type: 公開中
Name: GitHub Search Extension
Description: GitHubでコードを検索する作業を効率化するために拡張機能化しました！
ポップアップで検索を実行する画面を表示する機能と選択しているテキストで直接コードを検索できる機能を実装しています！
Link: https://chrome.google.com/webstore/detail/github-search-extension/djnkfnlokjljmdcebmofcghfgnjhfpnm?hl=ja&authuser=0
GitHub: https://github.com/cti1650/github-search-extension.git
Image: https://i.gyazo.com/a24c8c3e616b9c931859d02a5e7f4ae8.png
Tags: Chrome拡張機能, Next.js, Tailwind.css, React.js
Type: 公開中
Name: DeepL翻訳
Description: Chrome拡張機能の学習のために、選択した文字をDeepLで翻訳できる拡張機能を作成しました！
2022年11月現在、ユーザー数が21,500人突破しましたがGoogleストアからのご依頼によりやむなく現在閉鎖中！
Link: https://chrome.google.com/webstore/detail/deepl%E7%BF%BB%E8%A8%B3/alghoachpmoojgnopkdopgbhmdjomcaa?hl=ja&authuser=0
GitHub: https://github.com/cti-tl/deepl-chrome-extension.git
Image: https://i.gyazo.com/771165d158e457adc2c59340cb84f384.png
Tags: Chrome拡張機能, i18N
Type: 公開中
Name: Tailwind.css チートシート作成
Description: Next.jsとTailwind.cssの学習のためにボックスをクリックするとクリップボードにコピーできるチートシートを作成しました！
Link: https://tailwind-cc.vercel.app/
GitHub: https://github.com/cti1650/tailwind_cc.git
Image: https://i.gyazo.com/e02697ac08aa0887bba3efb83396e095.png
Tags: Next.js, Tailwind.css, React.js
Type: 公開中
Name: bookmarklet Maker
Description: 業務改善の一環で個人的にブックマークレットをメモ帳で作成していましたが、
フロントエンドを学習したことをきっかけに作成を簡単に出来るツールをまずは作りたいと思い作成したポートフォリオです！
作成したのは半年近く前ですが、現在も個人的に活用しています！
Link: https://cti-tl.github.io/mklet/
GitHub: https://github.com/cti-tl/mklet.git
Image: https://i.gyazo.com/83a11f2c254f2f057551d986f9f8bb6b.png
Tags:
Type: 公開中
Name: 最初のポートフォリオ
Description: 参加していたコミュニティの会議の中で『ポモドーロ・テクニック』の話題が上がり、タイムキープや話題が脱線した時などにベルを鳴らすとか面白いねと話していた時に、元々作り始めていたポートフォリオを流用しその会議中に作って完成させたポートフォリオです！
Link: https://cti-tl.github.io/oto/bell/
GitHub: https://github.com/cti-tl/oto.git
Image: https://i.gyazo.com/3c67731951a2bcbdff46a7a8d1fa6bea.png
Tags: PWA
Type: 公開中
Name: HTML Publisher
Description: 使い捨てアプリを100個以上作ってGitHubへのデプロイ作業が手間になってきたので、MCPサーバー経由でGistにアップロードして、共有可能なWebアプリのURLを返してくれるようにしました！
また、その流れでスマホにインストールできるようにPWA対応することで、作成から活用までスマホで完結するようにしました！
Link: https://github.com/cti1650/html-publisher
GitHub: https://github.com/cti1650/html-publisher
Image: https://i.gyazo.com/5281ed21d0e631ee4e0c76aa910c8f3c.png
Tags: MCP, Next.js
Type: 公開中
Name: Wi-Fi QRコード生成ツール
Description: 会社のオフィスに初めて行った時に、Wi-Fiの接続に手間取ったので、ポップアップがあったら便利そうと以前から思っていましたが、再訪問のタイミングが近づいたので思い立って作りました
Link: https://cti-ai-tools.vercel.app/tools/dfa4t4a3/
GitHub: null
Image: https://i.gyazo.com/54526d08a1200fafafb4daafc5b67d72.png
Tags: Claude
Type: 公開中
Name: iPaaS連携サービス比較ツール
Description: iPaaSを利用する際にどのサービスと連携できるか調べるのが手間だったので主要iPaaSプラットフォームの連携サービス・コネクターを横断検索・比較できるように作成したツールです。
Link: https://platform-service-comparison.vercel.app/
GitHub: null
Image: https://i.gyazo.com/a27d496c5593c810f087cfff34b0bd08.png
Tags: Claude
Type: 公開中
Name: オンラインコワーキングスペースを整備
Description: 自分の作業、知人との交流用にoviceでオンラインコワーキングスペースを作って交流の場を整備しています！
地域がかなり離れている人との交流が多くなってきたため、オンラインでもリアルに近い交流のできるoviceはかなり気に入っています！
Link: https://cti1650-portfolio-site.vercel.app/lnk/space
GitHub: null
Image: https://i.gyazo.com/380512a86240f40ab62a0fcecf0cf270.png
Tags: ovice
Type: 公開中
Name: 作成したChrome拡張機能の共有用にドキュメントを整備
Description: 知人や同僚に作ったChrome拡張機能を共有することが多いためCosense(旧: Scrapbox)でドキュメントを整備することで説明の手間を軽減できるようにしました
Link: https://cti1650-portfolio-site.vercel.app/lnk/chrome_extension_install
GitHub: null
Image: https://i.gyazo.com/c98ebec934fdbfbbbbdcdda6a3104e15.png
Tags: Cosense
Type: 公開中
Name: Contact Information Extractor
Description: CSVインポート用のファイルを複数のサービス用に関数を駆使して作っていましたが、そういった環境がなくても手軽にデータの相互変換を行う仕組みを検証したくて作成したツールです。
Link: https://cti-ai-tools.vercel.app/tools/08116eb/
GitHub: null
Image: https://i.gyazo.com/0576c0a172763a0468b50cc977e098f9.png
Tags: Claude
Type: 公開中
Name: Script Manager
Description: 複数の媒体でそれぞれのフォーマットに合わせてUserScriptを管理していたため、統合管理用の個人ツールをFastAPIで作成し活用しています
Link: https://scriptmanage.vercel.app/script/098f6bcd4621d373cade4e832627b4f6/manage/
GitHub: null
Image: https://i.gyazo.com/97398915f72a4e2d6d3ccc961a276dd1.png
Tags: FastAPI, Python
Type: 公開中
Name: Extension Creator
Description: 個人開発でスムーズに開発を開始できるように、要件を伝えるだけでChrome拡張機能のファイルを作成してくれるAIツールを作成。追加指示で修正を依頼した場合は、差分のみが強調表示されるようにしたことで依頼内容に対して適切に修正されているか判断しやすいUIにしました。
Link: https://ai-extension-creator.vercel.app/
GitHub: null
Image: https://i.gyazo.com/a355c6d707b92210d1ef79edd2307fc8.png
Tags: React.js, TypeScript, Tailwind.css, OpenAI
Type: 公開中
Name: SlideMate GPT
Description: ChatGPT APIをまずは触ってみる事が目的で作成しました！スライドの下書きをChatGPTに作成してもらうためのツールです！
Link: https://slide-mate-gpt.vercel.app/
GitHub: null
Image: https://i.gyazo.com/66a3ce6512caa95113214c1ce50906e9.png
Tags: Next.js, Tailwind.css, React.js, ChatGPT
Type: 公開中
Name: ChatGPT Extension Base
Description: ChatGPTを開いている状態でプロンプトの付与をワンクリックでできるようにするために個人的に作成したChrome拡張機能で現在開発途中です！
Link: https://chrome.google.com/webstore/detail/chatgpt-extension-base/gmgabcdklmfbnbpgdbfclbilfnplfpie/related?hl=ja&authuser=0
GitHub: null
Image: https://i.gyazo.com/e4984888a1ef1acc0f648e5c447775a7.png
Tags: Chrome拡張機能, ChatGPT, Plasmo, Tailwind.css, Mantine
Type: 公開中
Name: Back Translation Tool
Description: SlackやChatworkなどのテキストベースでの英語のやり取り用に逆翻訳を効率よく実施できるようにするために作成したツールです。
裏側はGASで作られていて、利用しているユーザーのアカウントの利用枠で1日2500回翻訳を行えるため、利用枠上限を超えると停止してしまう可能性がありますが、ツールとしては無料で利用できます。
Link: https://gas-back-translation-tool.vercel.app/
GitHub: null
Image: https://i.gyazo.com/7e808cc59d49a5efafa61f469bec37b0.png
Tags: GAS, React.js, Tailwind.css
Type: 公開中
Name: oVice Controller Extension
Description: 所属しているコミュニティ内でoViceを利用していて気づいた問題点を解決するためのChrome拡張機能を開発しました！
oViceのイベント参加時に偶然お話しする機会を頂いて、モックをお見せしたところ、スタッフの方からも好評を頂いてぜひリリースしてください！と公開を公認頂けたため、現在は正式版をリリースし、oVice社内や所属コミュニティ内で活用いただいています！
Link: https://chrome.google.com/webstore/detail/ovice-controller-extensio/bebojhcmkpcojcalbadohngjiacdcdde?hl=ja&authuser=0
GitHub: https://github.com/cti1650/ovice_controller_extension
Image: https://i.gyazo.com/1bd6b64cbb3ff3eaf94a92044eb72a4f.png
Tags: Chrome拡張機能, Next.js, Tailwind.css, React.js, TypeScript
Type: 公開中
Name: 所属コミュニティ用情報共有サービス
Description: 所属しているコミュニティの貴重な情報を取り逃さないように共有されたURLをスプレッドシートでまとめ始めたのがきっかけで個人的に作成を開始しました！
最初はバックエンドの知識がなく、後から編集しやすいという理由からGASでWebAPIを作り情報を取得できるようにしてフロントエンドのNext.js側からAPIをたたいて表示するだけでしたが、supabaseを導入しCRUD化しだれでも追加・編集ができるサービスとして現在もコミュニティ内で活用頂いております！
Link: null
GitHub: https://github.com/cti1650/tech_board_next
Image: https://i.gyazo.com/a048031a1cf641ee3b6349b705144c45.png
Tags: Next.js, Tailwind.css, supabase, React.js, ダークモード対応
Type: 公開中
Name: ポートフォリオサイト
Description: 面談の際にポートフォリオを見る時にリポジトリのソースを見て判断することが多いと伺い、Wantedlyの場合、1つしかポートフォリオのリンクを張れず、サイトかリポジトリのリンクのどちらかしか選べなかったため、急遽作成しました！
使用技術はNext.jsとTailwind.cssです！
Link: https://cti1650-portfolio-site.vercel.app/
GitHub: https://github.com/cti1650/MySite.git
Image: https://i.gyazo.com/68e88c6351f9905717683901f4454556.png
Tags: Next.js, Tailwind.css, NotionAPI, React.js, TypeScript
Type: 公開中
# 記事一覧
Title: Pythonでフォルダ内の日付順に管理されたExcelファイルの最新データを開いてみた
URL: https://qiita.com/cti1650/items/76b6956929c19ef2278f
Likes: 1
Source: Qiita
PublishedAt: 2021-01-07T18:08:50+09:00
UpdatedAt: 2021-01-07T18:08:50+09:00
Title: Pythonでフォルダ配下のファイルをファイル名で検索してみた
URL: https://qiita.com/cti1650/items/fa1f227f2e470a031d84
Likes: 1
Source: Qiita
PublishedAt: 2021-01-07T18:03:02+09:00
UpdatedAt: 2021-01-07T18:03:02+09:00
Title: Pythonでファイルをフォルダ分けしてみた
URL: https://qiita.com/cti1650/items/d70ba4fd702e95fec0ea
Likes: 4
Source: Qiita
PublishedAt: 2021-01-05T19:58:27+09:00
UpdatedAt: 2021-01-05T19:58:27+09:00
Title: VBAでSingleton（シングルトン）パターン
URL: https://qiita.com/cti1650/items/d05465ed1844ceef130d
Likes: 2
Source: Qiita
PublishedAt: 2020-02-14T02:23:06+09:00
UpdatedAt: 2025-01-05T01:28:42+09:00
Title: CreateObjectでよく使用するオブジェクト一覧
URL: https://qiita.com/cti1650/items/c0d2de73be45e4e4d10f
Likes: 10
Source: Qiita
PublishedAt: 2020-02-13T02:39:02+09:00
UpdatedAt: 2026-01-24T22:23:09+09:00
Title: VBAでPythonのGlob方式でファイルを検索するためのクラスを作成してみた
URL: https://qiita.com/cti1650/items/e9ab825c5e83fe23f629
Likes: 6
Source: Qiita
PublishedAt: 2020-02-09T19:57:13+09:00
UpdatedAt: 2025-01-05T01:28:42+09:00
Title: Cloud9からherokuへのpushを省略してみた
URL: https://qiita.com/cti1650/items/9ad33c01eda36ec0a59a
Likes: 2
Source: Qiita
PublishedAt: 2018-04-21T09:03:43+09:00
UpdatedAt: 2025-01-04T15:47:59+09:00
Title: Next.js、Mantine、Tailwind CSSを一緒に使ってみたらボタンが表示されない問題の解決方法を少し工夫してみた
URL: https://zenn.dev/cti1650/articles/c90439cc01d139
Likes: 41
Source: Zenn
PublishedAt: 2022-05-26T04:25:48.619+09:00
UpdatedAt: 2025-01-30T09:59:31.170+09:00
Title: Next.jsでChrome拡張機能のポップアップページを作成する方法
URL: https://zenn.dev/cti1650/articles/81016618ec5a87
Likes: 20
Source: Zenn
PublishedAt: 2021-10-30T14:44:25.035+09:00
UpdatedAt: 2025-01-04T21:16:32.000+09:00
Title: 【個人開発向け】Next.jsのSSGで公開されたページの再ビルドをWebAPIのデータに変更があったときのみ実行する方法を考えてみた
URL: https://zenn.dev/cti1650/articles/983dcec5caba9b
Likes: 14
Source: Zenn
PublishedAt: 2022-05-22T16:51:41.673+09:00
UpdatedAt: 2025-01-04T22:16:23.501+09:00
Title: 【GAS】スプレッドシートのメニューをJSON形式で指定して一括で追加する方法
URL: https://zenn.dev/cti1650/articles/gas_create_menu_items
Likes: 6
Source: Zenn
PublishedAt: 2021-11-06T18:00:02.999+09:00
UpdatedAt: 2025-01-05T00:10:41.136+09:00
Title: Lodashで使える便利な関数と代替可能なJavaScriptの標準機能
URL: https://zenn.dev/cti1650/articles/lodash_functions
Likes: 21
Source: Zenn
PublishedAt: 2024-06-09T12:38:17.695+09:00
UpdatedAt: 2026-01-25T02:16:30.012+09:00
Title: 【Chrome拡張機能】開いているタブのリンクを効率よくMarkdownに貼り付ける方法
URL: https://zenn.dev/cti1650/articles/tools_chrome_extension_copy_all_urls
Likes: 7
Source: Zenn
PublishedAt: 2021-12-04T21:23:46.521+09:00
UpdatedAt: 2025-01-05T00:10:41.573+09:00
Title: Chrome拡張機能のmanifestのバージョン管理をNode.js + Pythonで効率化してみた
URL: https://zenn.dev/cti1650/articles/extension_manifest_version
Likes: 3
Source: Zenn
PublishedAt: 2021-10-31T13:57:51.023+09:00
UpdatedAt: 2025-01-05T00:10:40.252+09:00
Title: Claude Codeのフロントマター、トークンにどれだけ影響するのか実測してみた
URL: https://zenn.dev/cti1650/articles/claude-code-frontmatter-token-measurement
Likes: 4
Source: Zenn
PublishedAt: 2026-04-04T15:14:23.331+09:00
UpdatedAt: 2026-04-05T11:21:39.020+09:00
Title: AIで作ったChrome拡張機能をWXTでリプレイスした話
URL: https://zenn.dev/cti1650/articles/wxt_replace_ai_extension
Likes: 5
Source: Zenn
PublishedAt: 2026-01-25T11:37:19.005+09:00
UpdatedAt: 2026-04-11T13:03:13.938+09:00
Title: CSS単位「dvh」をTailwind CSSに適用してみた
URL: https://zenn.dev/cti1650/articles/4d36c8a667f88a
Likes: 27
Source: Zenn
PublishedAt: 2022-06-09T20:52:17.912+09:00
UpdatedAt: 2026-01-25T02:28:34.956+09:00
Title: Chrome拡張機能のmanifestのバージョン管理をNode.js自作パッケージで効率化してみた
URL: https://zenn.dev/cti1650/articles/651bf40103730e
Likes: 5
Source: Zenn
PublishedAt: 2022-03-06T20:57:06.736+09:00
UpdatedAt: 2025-01-05T00:10:39.013+09:00
Title: Chrome拡張機能のコードでよく見かける『use strict』を調べてみた
URL: https://zenn.dev/cti1650/articles/01576963ce66d3
Likes: 4
Source: Zenn
PublishedAt: 2021-10-30T16:23:44.427+09:00
UpdatedAt: 2025-01-04T21:16:31.164+09:00
Title: Chrome拡張機能+Next.jsで『chrome』未定義のエラーにつまづいた時に試すこと
URL: https://zenn.dev/cti1650/articles/extension_chrome_error
Likes: 4
Source: Zenn
PublishedAt: 2021-11-09T11:44:38.327+09:00
UpdatedAt: 2025-01-04T23:50:54.097+09:00
Title: ブラウザ自動化を「仕組み」にするために知っておきたいこと
URL: https://zenn.dev/cti1650/articles/ai-browser-automation-prerequisites
Likes: 2
Source: Zenn
PublishedAt: 2026-02-02T21:48:47.097+09:00
UpdatedAt: 2026-02-02T23:34:55.727+09:00
Title: URLクエリでAIを叩く便利ワザまとめ
URL: https://zenn.dev/cti1650/articles/ai_query_url_guide
Likes: 4
Source: Zenn
PublishedAt: 2025-05-28T23:05:06.632+09:00
UpdatedAt: 2025-05-30T20:19:17.891+09:00
Title: 【GAS】Yahooで検索した結果を自分宛にメールで送る方法
URL: https://zenn.dev/cti1650/articles/gas_send_email_with_search_results
Likes: 2
Source: Zenn
PublishedAt: 2021-11-25T00:26:40.515+09:00
UpdatedAt: 2025-01-04T21:58:21.587+09:00
Title: CGIとFastCGIでPythonフレームワーク(FastAPI, Flask)を実行する方法
URL: https://zenn.dev/cti1650/articles/5e6c7bd15d7fbe
Likes: 4
Source: Zenn
PublishedAt: 2024-02-25T11:58:02.736+09:00
UpdatedAt: 2025-01-04T17:27:24.474+09:00
Title: 開発者が情シスを経験して気づいた、アプリ配布形式の「めんどくさい」話
URL: https://zenn.dev/cti1650/articles/desktop-app-distribution-formats
Likes: 4
Source: Zenn
PublishedAt: 2026-01-31T16:45:41.250+09:00
UpdatedAt: 2026-04-05T11:29:04.890+09:00
Title: Grafanaの積み上げグラフ（タグ別、ステータス別など）の設定方法
URL: https://zenn.dev/cti1650/articles/4b8a40e13d0d4c
Likes: 0
Source: Zenn
PublishedAt: 2024-07-26T10:14:24.254+09:00
UpdatedAt: 2025-01-04T17:27:23.629+09:00
Title: GrafanaとRedashのSQLへの変数の入力方法の違い
URL: https://zenn.dev/cti1650/articles/8fab724eba0647
Likes: 1
Source: Zenn
PublishedAt: 2024-03-01T19:39:36.074+09:00
UpdatedAt: 2025-01-04T17:27:24.895+09:00
Title: GrafanaでのLineチャートの設定を左右に分割する方法
URL: https://zenn.dev/cti1650/articles/a8942833131336
Likes: 0
Source: Zenn
PublishedAt: 2024-07-26T10:14:24.994+09:00
UpdatedAt: 2025-01-05T00:10:39.468+09:00
Title: Grafanaでの期間フィルターの使い方
URL: https://zenn.dev/cti1650/articles/893c6ad3204e9e
Likes: 0
Source: Zenn
PublishedAt: 2024-07-26T10:14:24.620+09:00
UpdatedAt: 2025-01-04T21:16:32.817+09:00
Title: Grafanaで一定期間の日付テーブルを取得する方法
URL: https://zenn.dev/cti1650/articles/26aee3fd2867cd
Likes: 0
Source: Zenn
PublishedAt: 2024-07-26T10:14:23.796+09:00
UpdatedAt: 2025-01-05T00:10:37.743+09:00
Title: Grafanaで日付関連の目盛りラベルを変更する方法
URL: https://zenn.dev/cti1650/articles/18060dbc61ad30
Likes: 0
Source: Zenn
PublishedAt: 2024-07-26T10:14:23.343+09:00
UpdatedAt: 2025-01-05T00:10:37.263+09:00
Title: WordPress用に契約したXserver、せっかくだからCD環境も整備してみた
URL: https://zenn.dev/cti1650/articles/xserver-cd-rsync-github-actions
Likes: 3
Source: Zenn
PublishedAt: 2026-02-11T20:27:20.124+09:00
UpdatedAt: 2026-04-05T11:29:05.539+09:00