7
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-07-08

概要

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

試したバージョン

プリザンター 1.3.13.0(DB: SQL Server)
EmojioneArea v3.4.2

EmojioneAreaを設定してみる

(2023/03/28)設定方法②を追記しました。①では設定に3手必要ですが、②では設定が1手で済みます。

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

下記ページより「emojionearea.min.css」ファイルをコピーして、プリザンターのテーブル管理画面から「スタイル」に貼り付けます。
- emojionearea/emojionearea.min.css at master · mervick/emojionearea
image.png

下記ページより「emojionearea.min.js」ファイルをコピーして、プリザンターのテーブル管理画面から「スクリプト」に貼り付けます。
- emojionearea/emojionearea.min.js at master · mervick/emojionearea
image.png

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

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

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

気持ちをこめて貼り付ける
image.png

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

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

記録テーブルのサンプルスクリプト
$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

絵文字パレットが出ました~。絵文字をクリックすると…
image.png

項目に入力されました。作成ボタンを押してみます。
image.png

絵文字が入力された状態でレコードが作成できました。
image.png

一覧画面から開いてみると、問題なく表示されました。
image.png

データベースを確認してみる

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

ClassAのカラムになんか変なのがいます😇
image.png

コピペしてサクラエディタに貼り付けてみると、Unicodeが確認できました😇
image.png

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

補足

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

- Pleasanterユーザマニュアル - 開発者向け機能:拡張機能:拡張スタイル
- Pleasanterユーザマニュアル - 開発者向け機能:拡張機能:拡張スクリプト

おわりに

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

参考リンク

- mervick/emojionearea: Emoji Picker Plugin for jQuery
- Pleasanterユーザマニュアル - テーブルの管理:スタイル
- Pleasanterユーザマニュアル - テーブルの管理:スクリプト
- $.getScript() | jQuery 1.9 日本語リファレンス | js STUDIO

7
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?