📔 チャットの短文作成に便利な Chrome 拡張機能を開発してみた

2021-06-13T20:10:47+09:00

はじめに 📝

最近とある事情により 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 上などで文章を作成する際に絵文字を頻繁に利用する方には割とご満足いただける拡張機能になっているはずです多分 🙋

Puppeteer on AWS Lambda のスクリーンショットで文字が豆腐になるので、ウェブフォントと絵文字フォントをインストール

2018-12-28T19:11:14+09:00

状況

現在開発中の https://poiit.me で puppeteer のスクリーンショットを使って動的OGPをつくっています。
CSSで動的な画像をデザインできるし、一つ lambda 関数を作っておけば、いろんなところで応用ができるのでいいですね。

が、今回は絵文字が、豆腐になってしまったのでその対処法。

参考記事

ベースはこちらの記事を参考にしました。
https://qiita.com/zyyx-matsushita/items/c33f79e33f242395019e

基本は参考Qiita をベースに対応できましたが、絵文字フォントがどこにあるのか結構探したので、備忘録的にメモ。

絵文字フォントダウンロードと設置

Google の Noto Color Emoji はこちらからダウンロードできました。
https://www.google.com/get/noto/#noto-emoji-zsye-color

他のダウンロード可能な絵文字フォントを知っていたら、是非ダウンロード場所教えてください！

で、ダウンロードしたファイルを解答し /.font/NotoColorEmoji.ttf に設置

WEBフォント

こちらは絵文字以外のフォントについては、WEBフォントをつかっています。

screenshot を撮る前に head に追加してやれば反映されるはず。

        await page.evaluate(() => {
            var style = document.createElement('style')
            style.textContent = `
                @import url('//fonts.googleapis.com/css?family=M+PLUS+Rounded+1c|Roboto:300,400,500,700|Material+Icons');
                div, input, a, p{ font-family: "M PLUS Rounded 1c", sans-serif; };`
            document.head.appendChild(style);
            document.body.style.fontFamily = "'M PLUS Rounded 1c', sans-serif";     
        })

その後、長めに wait させたないとフォントが反映されていないことがあるので注意

        await page.waitFor(3000);

こちらの記事を参考にしています。
https://qiita.com/chimame/items/04c9b45d8467cf32892f

関数実行

lambada で呼び出す関数で、フォントをサーバーにインストールする fc-cache コマンド実行してから、
puppeteer の screenshot などを実行すれば、ちゃんと絵文字が反映されているはずです。

アップロードすれば終了です。

めでたし！

serverless を使ったベーシックな puppeteer on lambda は github に置いてあるので必要あれば。
https://github.com/yahsan2/puppeteer-example-on-serverless-lambda

この記事のフォント反映バージョンも要望あればで公開しますので、コメントください〜！

poiit というサービスつくっています！

この記事がもし参考になれば、50円からサポートお願いします〜！

https://poiit.me/yahsan2/

「emoji」の記事 - Crieit

📔 チャットの短文作成に便利な Chrome 拡張機能を開発してみた

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

Puppeteer on AWS Lambda のスクリーンショットで文字が豆腐になるので、ウェブフォントと絵文字フォントをインストール

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