1. ©2021 cti

Extension Creator

Extension Creator Image
個人開発でスムーズに開発を開始できるように、要件を伝えるだけでChrome拡張機能のファイルを作成してくれるAIツールを作成。追加指示で修正を依頼した場合は、差分のみが強調表示されるようにしたことで依頼内容に対して適切に修正されているか判断しやすいUIにしました。
React.js
TypeScript
Tailwind.css
OpenAI

SlideMate GPT

SlideMate GPT Image
ChatGPT APIをまずは触ってみる事が目的で作成しました!スライドの下書きをChatGPTに作成してもらうためのツールです!
Next.js
Tailwind.css
React.js
ChatGPT

ChatGPT Extension Base

ChatGPT Extension Base Image
ChatGPTを開いている状態でプロンプトの付与をワンクリックでできるようにするために個人的に作成したChrome拡張機能で現在開発途中です!
Chrome拡張機能
ChatGPT
Plasmo
Tailwind.css
Mantine

Back Translation Tool

Back Translation Tool Image
SlackやChatworkなどのテキストベースでの英語のやり取り用に逆翻訳を効率よく実施できるようにするために作成したツールです。 裏側はGASで作られていて、利用しているユーザーのアカウントの利用枠で1日2500回翻訳を行えるため、利用枠上限を超えると停止してしまう可能性がありますが、ツールとしては無料で利用できます。
GAS
React.js
Tailwind.css

oVice Controller Extension

oVice Controller Extension Image
所属しているコミュニティ内でoViceを利用していて気づいた問題点を解決するためのChrome拡張機能を開発しました! oViceのイベント参加時に偶然お話しする機会を頂いて、モックをお見せしたところ、スタッフの方からも好評を頂いてぜひリリースしてください!と公開を公認頂けたため、現在は正式版をリリースし、oVice社内や所属コミュニティ内で活用いただいています!
Chrome拡張機能
Next.js
Tailwind.css
React.js
TypeScript

所属コミュニティ用情報共有サービス

所属コミュニティ用情報共有サービス Image
所属しているコミュニティの貴重な情報を取り逃さないように共有されたURLをスプレッドシートでまとめ始めたのがきっかけで個人的に作成を開始しました! 最初はバックエンドの知識がなく、後から編集しやすいという理由からGASでWebAPIを作り情報を取得できるようにしてフロントエンドのNext.js側からAPIをたたいて表示するだけでしたが、supabaseを導入しCRUD化しだれでも追加・編集ができるサービスとして現在もコミュニティ内で活用頂いております!
Next.js
Tailwind.css
supabase
React.js
ダークモード対応

ポートフォリオサイト

ポートフォリオサイト Image
面談の際にポートフォリオを見る時にリポジトリのソースを見て判断することが多いと伺い、Wantedlyの場合、1つしかポートフォリオのリンクを張れず、サイトかリポジトリのリンクのどちらかしか選べなかったため、急遽作成しました! 使用技術はNext.jsとTailwind.cssです!
Next.js
Tailwind.css
NotionAPI
React.js
TypeScript

最初のポートフォリオ

最初のポートフォリオ Image
参加していたコミュニティの会議の中で『ポモドーロ・テクニック』の話題が上がり、タイムキープや話題が脱線した時などにベルを鳴らすとか面白いねと話していた時に、元々作り始めていたポートフォリオを流用しその会議中に作って完成させたポートフォリオです!
PWA

bookmarklet Maker

bookmarklet Maker Image
業務改善の一環で個人的にブックマークレットをメモ帳で作成していましたが、 フロントエンドを学習したことをきっかけに作成を簡単に出来るツールをまずは作りたいと思い作成したポートフォリオです! 作成したのは半年近く前ですが、現在も個人的に活用しています!

Tailwind.css チートシート作成

Tailwind.css チートシート作成 Image
Next.jsとTailwind.cssの学習のためにボックスをクリックするとクリップボードにコピーできるチートシートを作成しました!
Next.js
Tailwind.css
React.js

DeepL翻訳

DeepL翻訳 Image
Chrome拡張機能の学習のために、選択した文字をDeepLで翻訳できる拡張機能を作成しました! 2022年11月現在、ユーザー数が21,500人突破しましたがGoogleストアからのご依頼によりやむなく現在閉鎖中!
Chrome拡張機能
i18N

GitHub Search Extension

GitHub Search Extension Image
GitHubでコードを検索する作業を効率化するために拡張機能化しました! ポップアップで検索を実行する画面を表示する機能と選択しているテキストで直接コードを検索できる機能を実装しています!
Chrome拡張機能
Next.js
Tailwind.css
React.js

Map Switching Extension

Map Switching Extension Image
Googleストリートビューから直接他のマップ(GoogleMap,YahooMap,地理院地図)を開ける拡張機能を作成しました! Popupを開く拡張機能は前にも作成していましたが、今回はPopupを呼び出したタブの情報(URL,タイトル)をNext.jsを使って呼びだせるようにするところを検証するために作成しました!
Chrome拡張機能
Next.js
Tailwind.css
React.js

Tailwindcss Extension

Tailwindcss Extension Image
Tailwind.cssのサイトでクラスをすぐに検索できるように拡張機能化しました! 新規タブで開く方式ではなくポップアップで表示するようにしたため、 手軽に検索が出来るような仕様になっています。
Chrome拡張機能
Next.js
Tailwind.css
React.js

simple-memo-extension

simple-memo-extension Image
サイトを調べた際に手軽にメモが取れるようにChrome拡張機能を作成しました!
Chrome拡張機能
Next.js
Tailwind.css
React.js