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: 公開中