©2021 cti
Extension Creator
個人開発でスムーズに開発を開始できるように、要件を伝えるだけでChrome拡張機能のファイルを作成してくれるAIツールを作成。追加指示で修正を依頼した場合は、差分のみが強調表示されるようにしたことで依頼内容に対して適切に修正されているか判断しやすいUIにしました。
React.js
TypeScript
Tailwind.css
OpenAI
SlideMate GPT
ChatGPT APIをまずは触ってみる事が目的で作成しました!スライドの下書きをChatGPTに作成してもらうためのツールです!
Next.js
Tailwind.css
React.js
ChatGPT
ChatGPT Extension Base
ChatGPTを開いている状態でプロンプトの付与をワンクリックでできるようにするために個人的に作成したChrome拡張機能で現在開発途中です!
Chrome拡張機能
ChatGPT
Plasmo
Tailwind.css
Mantine
Back Translation Tool
SlackやChatworkなどのテキストベースでの英語のやり取り用に逆翻訳を効率よく実施できるようにするために作成したツールです。
裏側はGASで作られていて、利用しているユーザーのアカウントの利用枠で1日2500回翻訳を行えるため、利用枠上限を超えると停止してしまう可能性がありますが、ツールとしては無料で利用できます。
GAS
React.js
Tailwind.css
oVice Controller Extension
所属しているコミュニティ内でoViceを利用していて気づいた問題点を解決するためのChrome拡張機能を開発しました!
oViceのイベント参加時に偶然お話しする機会を頂いて、モックをお見せしたところ、スタッフの方からも好評を頂いてぜひリリースしてください!と公開を公認頂けたため、現在は正式版をリリースし、oVice社内や所属コミュニティ内で活用いただいています!
Chrome拡張機能
Next.js
Tailwind.css
React.js
TypeScript
所属コミュニティ用情報共有サービス
所属しているコミュニティの貴重な情報を取り逃さないように共有されたURLをスプレッドシートでまとめ始めたのがきっかけで個人的に作成を開始しました!
最初はバックエンドの知識がなく、後から編集しやすいという理由からGASでWebAPIを作り情報を取得できるようにしてフロントエンドのNext.js側からAPIをたたいて表示するだけでしたが、supabaseを導入しCRUD化しだれでも追加・編集ができるサービスとして現在もコミュニティ内で活用頂いております!
Next.js
Tailwind.css
supabase
React.js
ダークモード対応
ポートフォリオサイト
面談の際にポートフォリオを見る時にリポジトリのソースを見て判断することが多いと伺い、Wantedlyの場合、1つしかポートフォリオのリンクを張れず、サイトかリポジトリのリンクのどちらかしか選べなかったため、急遽作成しました!
使用技術はNext.jsとTailwind.cssです!
Next.js
Tailwind.css
NotionAPI
React.js
TypeScript
最初のポートフォリオ
参加していたコミュニティの会議の中で『ポモドーロ・テクニック』の話題が上がり、タイムキープや話題が脱線した時などにベルを鳴らすとか面白いねと話していた時に、元々作り始めていたポートフォリオを流用しその会議中に作って完成させたポートフォリオです!
PWA
bookmarklet Maker
業務改善の一環で個人的にブックマークレットをメモ帳で作成していましたが、
フロントエンドを学習したことをきっかけに作成を簡単に出来るツールをまずは作りたいと思い作成したポートフォリオです!
作成したのは半年近く前ですが、現在も個人的に活用しています!
Tailwind.css チートシート作成
Next.jsとTailwind.cssの学習のためにボックスをクリックするとクリップボードにコピーできるチートシートを作成しました!
Next.js
Tailwind.css
React.js
DeepL翻訳
Chrome拡張機能の学習のために、選択した文字をDeepLで翻訳できる拡張機能を作成しました!
2022年11月現在、ユーザー数が21,500人突破しましたがGoogleストアからのご依頼によりやむなく現在閉鎖中!
Chrome拡張機能
i18N
GitHub Search Extension
GitHubでコードを検索する作業を効率化するために拡張機能化しました!
ポップアップで検索を実行する画面を表示する機能と選択しているテキストで直接コードを検索できる機能を実装しています!
Chrome拡張機能
Next.js
Tailwind.css
React.js
Map Switching Extension
Googleストリートビューから直接他のマップ(GoogleMap,YahooMap,地理院地図)を開ける拡張機能を作成しました!
Popupを開く拡張機能は前にも作成していましたが、今回はPopupを呼び出したタブの情報(URL,タイトル)をNext.jsを使って呼びだせるようにするところを検証するために作成しました!
Chrome拡張機能
Next.js
Tailwind.css
React.js
Tailwindcss Extension
Tailwind.cssのサイトでクラスをすぐに検索できるように拡張機能化しました!
新規タブで開く方式ではなくポップアップで表示するようにしたため、
手軽に検索が出来るような仕様になっています。
Chrome拡張機能
Next.js
Tailwind.css
React.js
simple-memo-extension
サイトを調べた際に手軽にメモが取れるようにChrome拡張機能を作成しました!
Chrome拡張機能
Next.js
Tailwind.css
React.js