EmojioneAreaでプリザンターの入力項目に絵文字パレットを表示させてみる

## 概要
jQueryのプラグイン「EmojioneArea」を使ってプリザンターの入力項目に絵文字パレットを表示させてみます。

### 試したバージョン
プリザンター 1.3.13.0（DB: SQL Server）
EmojioneArea v3.4.2

## EmojioneAreaを設定してみる

（2023/03/28）設定方法②を追記しました。①では設定に３手必要ですが、②では設定が１手で済みます。

### 設定方法①：外部ライブラリのCSS／JSファイルを直接設定する

下記ページより「emojionearea.min.css」ファイルをコピーして、プリザンターのテーブル管理画面から「スタイル」に貼り付けます。
[- emojionearea/emojionearea.min.css at master · mervick/emojionearea](https://github.com/mervick/emojionearea/blob/master/dist/emojionearea.min.css)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37295/a7a57a7a-1783-3de3-65d0-550ad64ace2c.png)

下記ページより「emojionearea.min.js」ファイルをコピーして、プリザンターのテーブル管理画面から「スクリプト」に貼り付けます。
[- emojionearea/emojionearea.min.js at master · mervick/emojionearea](https://github.com/mervick/emojionearea/blob/master/dist/emojionearea.min.js)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37295/f740ea6e-4fe0-3395-6430-86445995cf0f.png)

※distフォルダに.minがあるものとないものがありますが、どちらを選んでも構いません。特に理由がなければ.minを選んでください。（サイズが小さい分、読み込みが早くなるため）
[- emojionearea/dist at master · mervick/emojionearea](https://github.com/mervick/emojionearea/tree/master/dist)

続いて、絵文字パレットを表示させるためのスクリプトを設定します。

```JavaScript:記録テーブルのサンプルスクリプト
$p.events.on_editor_load = function () {
    // 分類Aに絵文字パレットを表示させる
    $("#Results_ClassA").emojioneArea();
    // 説明Aに絵文字パレットを表示させる
    $("#Results_DescriptionA").emojioneArea();
};
```

気持ちをこめて貼り付ける
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37295/e9576b37-37df-6005-fd9b-c7c51ff47872.png)

### 設定方法②：外部ライブラリをCDNから読み込む

以下のように外部ライブラリをCDNから読み込む方法でも適用が可能です。

```JavaScript:記録テーブルのサンプルスクリプト
$p.events.on_editor_load = function () {
    // 外部ライブラリの読み込み（emojionearea）
    var css = document.createElement('link');
    css.setAttribute('rel', 'stylesheet');
    css.setAttribute('href', 'https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.2/emojionearea.min.css');
    document.body.appendChild(css);
    $.getScript('https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.2/emojionearea.min.js', function() {
        // 分類Aに絵文字パレットを表示させる
        $("#Results_ClassA").emojioneArea();
        // 説明Aに絵文字パレットを表示させる
        $("#Results_DescriptionA").emojioneArea();
    })
};
```

## プリザンターを動かしてみる
新規作成画面を開いて、入力項目に表示された顔文字の部分をクリックしてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37295/924eaaf0-0874-4200-c0dd-79ab2feae15c.png)

絵文字パレットが出ました～。絵文字をクリックすると…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37295/393673ca-66d2-d25b-6b32-597e1dc70cd1.png)

項目に入力されました。作成ボタンを押してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37295/dec35236-58a0-330f-b713-cc4b0c387f46.png)

絵文字が入力された状態でレコードが作成できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37295/f2f5e47d-b9cc-405a-0493-148b4ab5c5dd.png)

一覧画面から開いてみると、問題なく表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37295/ed35eee2-5557-16fb-696c-0b2151207f66.png)

## データベースを確認してみる
データベースにはどのように登録されているのか気になったので、SSMSでプリザンターのResultsテーブルを確認してみました。

ClassAのカラムになんか変なのがいます😇
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37295/595c8987-a920-923c-63e7-f1e4e5858285.png)

コピペしてサクラエディタに貼り付けてみると、Unicodeが確認できました😇
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37295/ae5d556b-eabb-b57e-21d5-0d9b1ccc0fff.png)

かんたんに設定できるので、ちょっとした気分転換がしたい人は試してみてください。

## 補足
テーブルごとではなくサービス全体でEmojioneAreaを有効にしたい場合はプリザンターの拡張スタイル／拡張スクリプトを使いましょう。

[- Pleasanterユーザマニュアル - 開発者向け機能：拡張機能：拡張スタイル](https://pleasanter.org/manual/extended-style)
[- Pleasanterユーザマニュアル - 開発者向け機能：拡張機能：拡張スクリプト](https://pleasanter.org/manual/extended-script)

## おわりに
プリザンターではjQueryのプラグインを利用したスタイルやスクリプトの拡張ができるので、「こんなプラグインが使えたよ」というのがあればぜひ教えてください！

## 参考リンク
[- mervick/emojionearea: Emoji Picker Plugin for jQuery](https://github.com/mervick/emojionearea)
[- Pleasanterユーザマニュアル - テーブルの管理：スタイル](https://pleasanter.org/manual/table-management-style)
[- Pleasanterユーザマニュアル - テーブルの管理：スクリプト](https://pleasanter.org/manual/table-management-script)
[- $.getScript() | jQuery 1.9 日本語リファレンス | js STUDIO](https://js.studio-kingdom.com/jquery/ajax/get_script)