【個人開発🔥】絵文字エクスプローラー・powered by ChatGPT🤖
個人開発した、絵文字を検索するWebアプリ「絵文字エクスプローラー」の紹介です。
同様のサービスは星の数✨ほど存在しますが、ChatGPT API のお試しも兼ねて、自分の使いやすいアプリ🚀を作りました。
特徴・できること 💪
ChatGPT API を使った絵文字検索 🔎
検索ワードを入れてボタンを押すと ChatGPT API を通して、ChatGPT がそのワードから連想される絵文字を回答します。なので、どんな検索ワードでも柔軟に対応し、ほぼ間違いなく、何らかの絵文字を提示することができます。また、同じ検索ワードでも、検索のたびに結果が変わる可能性があります。
カテゴリー一覧からの絵文字検索 🔍
カテゴリーごとの絵文字一覧を表示し、その中から好きな絵文字を選ぶことができます。
絵文字をクリップボードにコピー 📋
上記の方法で検索した絵文字は、クリック（タップ）することでクリップボードにコピーされます。メールやSNS、ブログなど好きなところに貼り付けることができます。
履歴を保管 🗂️
コピーした絵文字は「履歴」として保存されます。ブラウザのローカルストレージに保存しますので、パソコンやスマホの電源を落としても消えることはなく、いつでも再利用可能です。
履歴の絵文字は１文字ずつ、あるいは一括で削除が可能です。
お気に入り登録 🥰
履歴に取り込んだ絵文字には「お気に入り」マーク🌟を付けることができます。
「お気に入り」の絵文字だけをフィルタリングして表示できます。
「お気に入り」の絵文字は一括削除の対象外となります（削除したい場合は「お気に入り」マーク🌟を外します）
Twemoji、Noto Emoji、OpenMoji の表示 🥳
オープンソースの絵文字プロジェクトである Twemoji、Noto Emoji、OpemMoji の表示に切り替えることができます。
| Twemoji | Twemoji は、Twitter が開発しているオープンソースの絵文字プロジェクトです。Twitter の絵文字が広く使われているため、Twemoji も非常に人気があります。Twemoji のデザインはフラットでカラフルで、多くの絵文字がシンプルでわかりやすいデザインを持っています。 |
| Noto Emoji | Noto Emoji は、Google が開発しているオープンソースの絵文字プロジェクトの一部であり、Noto フォントファミリーの一部です。Noto フォントは、多様な言語やスクリプトをサポートするために設計されており、「no more tofu」という目標を持っています。「tofu」は、コンピュータが未知の文字を表示できないときに現れる四角いブロックを指します。Noto Emoji の目的は、絵文字も含め、すべてのユーザーがそれぞれの言語で情報をシームレスにやりとりできるようにすることです。 Noto Emoji のデザインは、Google のマテリアルデザインのガイドラインに基づいており、カラフルでシンプルなスタイルが特徴です。 |
| OpenMoji | OpenMoji は、HfG Schwäbisch Gmünd というドイツのデザインスクールが中心となって開発しているオープンソースの絵文字プロジェクトです。OpenMoji のデザインは、シンプルでフラットなスタイルで、ユニークで魅力的な絵文字が特徴です。 |
https://fonts.google.com/noto/specimen/Noto+Emoji
https://openmoji.org/多言語対応 🌍 🌎 🌏
以下の13カ国語に対応しています。
| 日本語 | |
| 英語 | English |
| 中国語（簡体字） | 简体中文 |
| 中国語（繁体字） | 繁體中文 |
| スペイン語 | Español |
| アラビア語 | العربية |
| ポルトガル語 | Português |
| フランス語 | Français |
| ロシア語 | Русский |
| ドイツ語 | Deutsch |
| 韓国語 | 한국어 |
| インドネシア語 | Bahasa Indonesia |
| ヒンディー語 | हिन्दी |
使用している主な技術スタックに関して
- TypeScript
- Next.js 13
- Cakra UI
- Framer Motion（アニメーション関連）
- zustand（状態管理、ローカルストレージ保管)
- next-i18next（多言語対応）
- next-seo
- openai
ホスティングは Netlify で、このブログのサブドメインに割り当ててあります。https://emoji-explorer.movinow-sober.com
開発のきっかけは Open AI のドキュメント、クイックスタートに記載されている pet name generator（ペットの名前を生成するアプリ）です。
これは動物名（犬や猫など）を入力すると、ChatGPTがふさわしいペットの名前の候補を３つ回答してくれるというアプリです。
ソースコードをみると、Next.jsのAPIルート経由でChatGPTのAPIを叩いているのがわかります。これを参考にしました。使用モデルは 'text-davinci-003’ から 'gpt-3.5-turbo’ に変更しました。
コーディングは ChatGPT 4 との二人三脚で行いました。
現時点では最新情報をキャッチアップできないという致命的な欠点（これは過去のものとなるようです なりました）を踏まえつつ、バグの解消では堂々巡りすることも多々ありますが、ChatGPTとやりとりしながら試行錯誤する開発体験がとにかく楽しいです。Framer Motion を使ったアニメーションの実装や、多言語対応では、まさにChatGPT先生様々でしたね。
今では GitHub Copilotも導入しています。ハマるとTab連打でどんどんコードが補完されていくのはとても気持ちよいですが、「二人三脚」している実感は乏しいです。（これは Copilot の欠点ではありません）
ChatGPT の登場でコーディングの効率が爆上がりしたのはもちろんですが、加えて、それまでにはなかった新しい楽しみ（AIとのペアプログラミング）があることを知りました。
このブログのメインコンテンツは「行き当たりばったりテキトー自炊飯」です。
料理といえば、ChatGPT の APIを使ったレシピ提供サービスもあります。
https://www.chefgpt.xyz/jaChefGPT というネーミングはいいですね。
私が知ったのは vercel のブログ経由で、Next.jsとChatGPT API を使ったソリューションのひとつとして紹介されていました。その時点では英語表記だったのですが、いつの間にか日本語にも対応しています。
このブログでは、ChatGPTの提供レシピそのものはネタとして扱っています。
サービスを使ってみていないのでなんとも言えませんが、どうなんでしょうか、シェフの腕前は。気になりますね 🤔
と書いていたら、ChatGPT Plus ユーザーには、今週中にも「Webブラウジング」や「プラグイン」機能が提供されるというニュースが入ってきました🎉🎉🎉
プラグインには「Tasty Recipes」というものもあるそうです。そしてWebブラウジングで最新情報にもアクセスできるようになると。とても待ち遠しいですね。
以下は ChatGPTのリリースノートからの引用です。
Web browsing and Plugins are now rolling out in beta (May 12)
If you are a ChatGPT Plus user, enjoy early access to experimental new features, which may change during development. We’ll be making these features accessible via a new beta panel in your settings, which is rolling out to all Plus users over the course of the next week.
Once the beta panel rolls out to you, you’ll be able to try two new features:
https://help.openai.com/en/articles/6825453-chatgpt-release-notes
- Web browsing: Try a new version of ChatGPT that knows when and how to browse the internet to answer questions about recent topics and events.
- Plugins: Try a new version of ChatGPT that knows when and how to use third-party plugins that you enable.
「Webブラウジングとプラグイン」が現在ベータ版として展開されています（5月12日）
ChatGPT Plusユーザーの皆様には、開発中に変更される可能性がある新機能への早期アクセスをお楽しみいただけます。これらの新機能は、設定内の新たなベータパネルを通じてアクセス可能となり、次の1週間で全てのPlusユーザーに順次展開されます。
ベータパネルが展開されると、2つの新機能を試すことができます：
- ウェブブラウジング：最近の話題やイベントについての質問に答えるために、いつどのようにインターネットを閲覧するかを理解する新バージョンのChatGPTを試してみてください。
- プラグイン：あなたが有効化するサードパーティのプラグインをいつどのように使用するかを理解する新バージョンのChatGPTを試してみてください。
https://dev.classmethod.jp/articles/chatgpt-plugins-beta/ChatGPT-4 Browsing 降臨 🔥🔥🔥（追記）
５月１６日の夕方に、私のアカウントに「ウェブブラウジング」が降臨しました！
これまでの ChatGPT-4の回答
新生 ChatGPT-4 Browsingの回答
ついでにこのブログについて訊いてみました。
30秒ほどの時間がかかりました。とりあえず WordPress のメニューを取得したようですね。質問を繰り返していけば、より詳細をブラウジングして調べてくれるでしょう。
個人的には、ChatGPTに最初に触れたときと同程度のインパクトがあります。さあ、色々試してみましょう。
さらに追記
ブラウジングを試してみたところ、現行ではとても時間がかかるようです。３分とか５分とか。結果の表示まで行かないこともあります。そして全体のレスポンスが、ちょっと前のGPT-4のように遅くなっていますね。現時点でググるの代替にはまだなれないようです。最適化はこれからでしょう。
最近の投稿です
過去7日間でアクセスの多い投稿です
