はじめに 📝

最近とある事情により Twitter の DM を利用しているのですが、Slack などのように絵文字をショートカット入力できないことにフラストレーションが溜まってきていました。そのため、絵文字をショトカで入力可能にしてくれる Chrome 拡張機能を探したのですが見つけられませんでした。

そこで、無いなら作ろうということで Teemo を開発しました。

ソースコードは GitHub 上で公開しています。 何かご要望等ございましたら PR や Issue 作成頂けますと喜びます。Teemo の実際の挙動については下記の動画で確認できます 🎥

Teemo 💕 - Quickly generate chat message with embedded emoji! 💖😆

考えていたこと 💭

今回 Teemo の開発を行うに当たり、考えていた点は下記になります。

• よくある : 入力からの絵文字ショートカットを導入する
  • Slack や GitHub、JIRA などではおなじみの入力方法 ⌨️
• パレットから選択する際は半角英数字で検索できるようにしたい
  • Twitter では日本語で検索しないと絵文字が探せない 🔍
  • 普段英数字で絵文字検索をするので目的の絵文字が見つけづらい 🕵️
• 拡張機能を利用することで文章入力の煩わしさが増加することは避けたい
  • コピペや文章クリアの機能等にもショトカ利用できるようにしたい 💨

プロトタイピングしながら友人に進捗をシェアしながら開発は進めていきました。本当は個人で利用する想定で進めていたのですが、割と評判が良かったため Chrome ウェブストアに公開するのを目標に動いていました。そして、Chrome ウェブストアで公開できるクオリティを目指して動いたことで満足のいく拡張機能が作れました。

使い方 ⚒️

Teemo の使い方について紹介いたします。

Teemo を Chrome 拡張機能として追加する 🛍️

まずは Chrome ウェブストア にアクセスして、Teemo を Chrome に追加する必要があります。

1. Chrome ウェブストア にアクセスして右上の Chrome に追加 ボタンをクリックする

2. 拡張機能として Teemo の追加が完了したら、ツールバーのアイコンをクリックするか Ctrl or Cmd + Shift + O を入力して Teemo のエディタが開くことを確認する

上記確認できれば Teemo が正常に Chrome 拡張機能として追加できています。

Teemo で絵文字を : でショートカット入力する 💨

Teemo のエディタでは : を利用することで文章入力を止めることなく、シームレスに絵文字入力が行えます。: を入力後、関連ワードを半角英数字で入力することで絵文字候補がウィンドウ下部に表示されます。入力したい絵文字をマウスかキーボードの矢印キーで選択して入力できます。

: を入力後、関連ワードを半角英数字で入力することで絵文字候補がウィンドウ下部に表示される 💨

Teemo で絵文字をパレットから選択して入力する 🎨

絵文字をパレットから選択して入力するには Ctrl or Cmd + E キーを入力するか、ウィンドウ下部の真ん中にある 🎨 ボタンをクリックしてパレットを表示する必要があります。ちなみに絵文字選択用のパレットには OSS の Emoji Mart を利用しています。

パレットで関連ワードを入力することで絵文字検索ができる。絵文字をクリックすることで入力できる 🐱

Teemo で入力した文章をクリップボードにコピーする 📋

入力した文章は Ctrl or Cmd + C キーを入力するか、ウィンドウ下部の右にある 📋 ボタンをクリックすることで全文コピーが可能です。わざわざ範囲選択を行わずとも文章を全文コピーすることができます。 コピーが正常にできるとウィンドウ下部の真ん中にある 📋 ボタンが 📋✔️ ボタンになります。

Teemo で文章入力後 Ctrl + C で全文コピー後、ツイート編集画面にペーストした時の様子 🐦

Teemo で入力した文章をクリアする 🧼

Teemo では単一のウィンドウを使い回すため、改めて文章を作成する際に一度入力した文章をクリアする必要があります。 そのため、Ctrl or Cmd + R キーを入力するか、ウィンドウ下部の左にある 🆕 ボタンをクリックすることで文章をクリアできるようにしています。

Teemo の入力欄を 🆕 ボタンをクリックしてクリアした時の様子 🧼

おわりに 🔚

個人的に Teemo のおかげで、Twitter での絵文字を利用した文章作成についてストレス無く出来るようになったので良かったです。副次的な効果として、どんなサイトでも絵文字を利用した文章作成が簡単に出来るようになったため、他に絵文字をショートカット入力できないサイトがあったとしても同様の困りごとは発生しなくなりました。☺️

SNS 上などで文章を作成する際に絵文字を頻繁に利用する方には割とご満足いただける拡張機能になっているはずです多分 🙋