【個人開発🔥】絵文字エクスプローラー・powered by ChatGPT🤖

個人開発した、絵文字を検索するWebアプリ「絵文字エクスプローラー」の紹介です。

同様のサービスは星の数✨ほど存在しますが、ChatGPT API のお試しも兼ねて、自分の使いやすいアプリ🚀を作りました。

特徴・できること 💪

ChatGPT API を使った絵文字検索 🔎

検索ワードを入れてボタンを押すと ChatGPT API を通して、ChatGPT がそのワードから連想される絵文字を回答します。なので、どんな検索ワードでも柔軟に対応し、ほぼ間違いなく、何らかの絵文字を提示することができます。また、同じ検索ワードでも、検索のたびに結果が変わる可能性があります。

カテゴリー一覧からの絵文字検索 🔍

カテゴリーごとの絵文字一覧を表示し、その中から好きな絵文字を選ぶことができます。

絵文字をクリップボードにコピー 📋

上記の方法で検索した絵文字は、クリック(タップ)することでクリップボードにコピーされます。メールやSNS、ブログなど好きなところに貼り付けることができます。

履歴を保管 🗂️

コピーした絵文字は「履歴」として保存されます。ブラウザのローカルストレージに保存しますので、パソコンやスマホの電源を落としても消えることはなく、いつでも再利用可能です。

履歴の絵文字は1文字ずつ、あるいは一括で削除が可能です。

お気に入り登録 🥰

履歴に取り込んだ絵文字には「お気に入り」マーク🌟を付けることができます。

「お気に入り」の絵文字だけをフィルタリングして表示できます。

「お気に入り」の絵文字は一括削除の対象外となります(削除したい場合は「お気に入り」マーク🌟を外します)

Twemoji、Noto Emoji、OpenMoji の表示 🥳

オープンソースの絵文字プロジェクトである Twemoji、Noto Emoji、OpemMoji の表示に切り替えることができます。

TwemojiTwemoji は、Twitter が開発しているオープンソースの絵文字プロジェクトです。Twitter の絵文字が広く使われているため、Twemoji も非常に人気があります。Twemoji のデザインはフラットでカラフルで、多くの絵文字がシンプルでわかりやすいデザインを持っています。
Noto EmojiNoto Emoji は、Google が開発しているオープンソースの絵文字プロジェクトの一部であり、Noto フォントファミリーの一部です。Noto フォントは、多様な言語やスクリプトをサポートするために設計されており、「no more tofu」という目標を持っています。「tofu」は、コンピュータが未知の文字を表示できないときに現れる四角いブロックを指します。Noto Emoji の目的は、絵文字も含め、すべてのユーザーがそれぞれの言語で情報をシームレスにやりとりできるようにすることです。
Noto Emoji のデザインは、Google のマテリアルデザインのガイドラインに基づいており、カラフルでシンプルなスタイルが特徴です。
OpenMojiOpenMoji は、HfG Schwäbisch Gmünd というドイツのデザインスクールが中心となって開発しているオープンソースの絵文字プロジェクトです。OpenMoji のデザインは、シンプルでフラットなスタイルで、ユニークで魅力的な絵文字が特徴です。
Written with ChatGP
Twemoji
多言語対応 🌍 🌎 🌏

以下の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がふさわしいペットの名前の候補を3つ回答してくれるというアプリです。

ソースコードをみると、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を使ったレシピ提供サービスもあります。

ChefGPT というネーミングはいいですね。

私が知ったのは 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:

  • 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.
https://help.openai.com/en/articles/6825453-chatgpt-release-notes

「Webブラウジングとプラグイン」が現在ベータ版として展開されています(5月12日)

ChatGPT Plusユーザーの皆様には、開発中に変更される可能性がある新機能への早期アクセスをお楽しみいただけます。これらの新機能は、設定内の新たなベータパネルを通じてアクセス可能となり、次の1週間で全てのPlusユーザーに順次展開されます。

ベータパネルが展開されると、2つの新機能を試すことができます:

  • ウェブブラウジング:最近の話題やイベントについての質問に答えるために、いつどのようにインターネットを閲覧するかを理解する新バージョンのChatGPTを試してみてください。
  • プラグイン:あなたが有効化するサードパーティのプラグインをいつどのように使用するかを理解する新バージョンのChatGPTを試してみてください。

ChatGPT-4 Browsing 降臨 🔥🔥🔥(追記)

5月16日の夕方に、私のアカウントに「ウェブブラウジング」が降臨しました!

これまでの ChatGPT-4の回答

新生 ChatGPT-4 Browsingの回答

ついでにこのブログについて訊いてみました。

30秒ほどの時間がかかりました。とりあえず WordPress のメニューを取得したようですね。質問を繰り返していけば、より詳細をブラウジングして調べてくれるでしょう。

個人的には、ChatGPTに最初に触れたときと同程度のインパクトがあります。さあ、色々試してみましょう。

さらに追記

ブラウジングを試してみたところ、現行ではとても時間がかかるようです。3分とか5分とか。結果の表示まで行かないこともあります。そして全体のレスポンスが、ちょっと前のGPT-4のように遅くなっていますね。現時点でググるの代替にはまだなれないようです。最適化はこれからでしょう。

Summary
software image
Author Rating
1star1star1star1star1star
Aggregate Rating
no rating based on 0 votes
Software Name
Emoji Explorer
Software Category
WebApplication
Price
Free
Landing Page

最近の投稿です

Thumbnail of new posts 135

:

ランチョンミートのガパオライス

ランチョンミートを使ったガパオライスです。 材料 ランチョンミート1/2缶 10 ...
Thumbnail of new posts 038

:

ランチョンミートと卵とピーマンの炒めもの

相性抜群のランチョンミートと卵の炒めものに、ピーマンを加えました。 材料 ランチ ...
Thumbnail of new posts 104

: 野菜

シャトルシェフでつくる鶏手羽先と野菜のトマト煮

シャトルシェフの保温調理でつくる鶏手羽先と野菜のトマト煮です。 サーモス社の下記 ...
Thumbnail of new posts 080

: パスタ

ガパオのパスタ

ガパオライスのライスをパスタに置き換えたレシピです。 材料 豚コマ肉80g赤パプ ...
Thumbnail of new posts 062

: 麺類

具材は別皿で – ZUBAAAN!背脂濃厚醤油

最近発売される袋麺はとてもレベルが高くて、食べてみて、これがインスタントラーメン ...

このブログへのアクセスについて

  • 287今日の閲覧数:
  • 212今日の訪問者数:
  • 335昨日の閲覧数:
  • 236昨日の訪問者数:
  • 6094今月の閲覧数:
  • 1現在オンライン中の人数:

252ビュー

Tec系PC

Posted by movinow