WordPress 5.0以降のGutenbergエディタで編集できる吹き出し表示プラグイン「Guten-Bubble」を作りました!

こんにちはー、ニアです!

本サイトでは、今まで「Speech Bubble」プラグインを使って、吹き出し表示をしていたのですが、先月にアップデートしたWordPress 5.0以降のGutenbergエディタとの相性問題のため、急遽吹き出し表示プラグインを自作することにしました。

今回は、吹き出し表示プラグイン「Guten-Bubble」を作ったお話とその紹介です。

1. Guten-Bubbleはこんなことができる!

Guten-Bubbleは、キャラアイコン画像と吹き出しを表示することができます。これを使って、以下のようなチャット会話風に表示できます。

02-orange.png
アリス
こんにちは〜、ボブ!
04-lime.png
ボブ
やあ、アリス!
Nia-TN-SDfs-normal2.png
こんな形で、キャラと吹き出しを表示できますよー!

1.1. WordPress 5.0以降のGutenbergエディタで簡単&見たまま編集できる!

Guten-Bubbleは、WordPress 5.0以降のGutenbergエディタに対応しており、専用の「Guten-Bubble」ブロックを使って簡単に編集することができます。

さらにエディタ上で吹き出し表示のプレビューをリアルタイムで見ることができます。

2. インストール方法

2.1. WordPressからインストールする

WordPressの管理者ページあるプラグインの「新規追加」ページを開き、検索ボックスに「Guten-bubble」と入力して検索し、検索結果から「Guten-bubble」をインストールします。

2.2. プラグインファイルを直接インストールする

以下のダウンロードボタン(WordPress.orgのブラグインページ or GitHub)より、プラグインファイル一式をダウンロードし、wp-content/pluginsディレクトリ内に直接配置してインストールします。

Nia-TN-SDfs-normal2.png
あとはプラグインを有効化するだけで、すぐに利用できます。

3. 使い方

吹き出しを入れたいところで、「Guten-Bubble」ブロックを追加します。「ウィジェット」カテゴリーを選択するか、検索ボックスに「Guten-Bubble」と入力すると見つけやすいです。

吹き出しのところにある「ここにセリフを入力 …(Enter serif here …)」の部分にセリフを入力することができます。

キャラアイコンを変更する時は、「キャラアイコン(プリセット)(Character icon(preset))」のドロップダウンから選択します。

3.1. 好きなキャラアイコン画像を使いたい!

Guten-Bubbleプラグインを有効化すると、wp-content/uploadsディレクトリ内に「guten-bubble」フォルダが新規作成されます。その中の「img」フォルダがGuten-Bubbleのキャラアイコン画像フォルダです。

Guten-Bubbleで用意されているデフォルトのキャラアイコンは、アップロードした画像とのファイル名の競合防止のため、img/defaultフォルダに配置されています。

好きなキャラアイコン画像を、wp-content/uploads/guten-bubble/imgフォルダにアップロードし、「キャラアイコン(プリセット)(Character icon(preset))」を「カスタム」にして、「キャラアイコン(カスタム)(Character icon(custom))」にアップロード済みのキャラアイコン画像のファイル名を入力することで、好きなキャラアイコンを使用することができます。

もしくは、WordPressの管理者ページにある「設定」>「Guten-bubble」の設定ページより、メディアライブラリにアップロード済みの画像を選択して、Guten-bubbleにインポート(wp-content/uploads/guten-bubble/imgフォルダ にコピー)することができます。

3.2. キャラの名前を表示する

Nia-TN-SDfs-normal2.png
ニア
キャラの名前(Character name)」に文字列を入力すると、キャラアイコンの下に表示されます。

3.3. 吹き出しのテーマカラーを設定する

Guten-Bubbleには、以下の14種類のテーマカラーが用意されています。「テーマカラー(Theme color)」のドロップダウンより選択できます。

  • デフォルト
  • ベーシック(ローズ、オレンジ、レモン、ライム、ビリジアン、スカイブルー、インペリアルブルー、ラベンダー、モノトーン、エスプレッソ)
  • Bootstrap風(Success、Info、Warning、Danger)
Nia-TN-SDfs-normal2.png
デフォルト(Default)」は、白地の吹き出しです。

ベーシックカラー

01-rose.png
ローズ(Rose)
02-orange.png
オレンジ(Orange)
03-lemon.png
レモン(Lemon)
04-lime.png
ライム(Lime)
05-viridian.png
ビリジアン(Viridian)
06-sky.png
スカイブルー(Sky Blue)
07-imperial.png
インペリアルブルー(Inperial Blue)
08-lavendar.png
ラベンダー(Lavendar)
09-monotone.png
モノトーン(Monotone)
10-espresso.png
エスプレッソ(Espresso)
Nia-TN-SDfs-normal2.png
ちなみに、ベーシックカラーは、塗りつぶしタイプもあります。

ちなみに私こと、ニアがいつも使用しているテーマカラーは「スカイブルー」です。

Bootstrap風

Nia-TN-SDfs-normal2.png
Bootstrap風のテーマカラーもありますよー!
これは「Bootstrap風(Success)
Nia-TN-SDfs-normal2.png
Bootstrap風(Info)
Nia-TN-SDfs-normal3.png
Bootstrap風(Waring)」は、注意文言入りのセリフに活用できそう?
Nia-TN-SDfs-panic.png
Bootstrap風(Danger)」でっせ!

3.4. 吹き出しの向きと種別

キャラアイコンの位置(Character icon alignment)」でキャラアイコンの位置と吹き出し向きを、「吹き出しのしっぽのタイプ(Speech bubble tail type)」で「Speaking」or「Thinking」に選択できます。

Nia-TN-SDfs-normal2.png
左寄せ(Left)
本サイトでは、基本的に左寄せがメインです。
09-monotone.png
右寄せ(Right)
本サイトでゲストキャラが登場する時は、右寄せにしています。
Nia-TN-SDfs-normal2.png
Speaking
Nia-TN-SDfs-normal2.png
お、落ち着いて、「Thinking」モードにして素数を1から数えるんだ・・・

3.5. キャラアイコンと吹き出しの装飾

影を付ける(Drop shadow)」のトグルスイッチをオンにすると、キャラアイコンと吹き出しに影が付きます。

Nia-TN-SDfs-wink.png
マテリアルデザインにいかが?

キャラアイコンの角丸設定(Character icon corner radius)」や「吹き出しの角丸設定(Speech bubble corner radius)」で、キャラアイコンや吹き出しの角をそれぞれ丸みを付けることができます。

Nia-TN-SDfs-normal2.png
四角(Square)
Nia-TN-SDfs-normal2.png
角丸(Lv.1)(Corner radius Lv.1)
Nia-TN-SDfs-normal2.png
角丸(Lv.2)(Corner radius Lv.2)
Nia-TN-SDfs-normal2.png
角丸(Lv.3)(Corner radius Lv.3)
Nia-TN-SDfs-normal2.png
角丸(Lv.4)(Corner radius Lv.4)
Nia-TN-SDfs-normal2.png
角丸(Lv.5)(Corner radius Lv.5)
なんか、iOSアプリのアイコンみたいだね!
Nia-TN-SDfs-normal2.png
キャラアイコンの方はさらに「丸型(Rounded)」もあります。

アイコンのネガ化(Icon negation)」のトグルスイッチをオンにすると、キャラアイコンがネガ反転します。

Nia-TN-SDfs-normal2.png
こんな感じです。
09-monotone.png
怖ぇーよw

3.6. 吹き出しテキストのフォントサイズ

吹き出しテキストのフォントサイズ(Speech bubble text font size)」で、吹き出しテキストのフォントサイズを設定できます。

項目サイズ備考
デフォルト(Default)テーマに準ずる
小(Small)1.0remver. 0.9.1で追加
中(Middle)1.125remver. 0.9.1で追加
大(Large)1.75remver. 0.9.1で追加
特大(Extra Large)2.25remver. 0.9.1で追加
超特大(Ex Extra Large)3.75remver. 0.9.1で追加
(レガシー)極小
((Legacy) Extra Small)
10pxver. 0.8.1: 「極小(Extra Small)」
(レガシー)小
((Legacy) Small)
12pxver. 0.8.1: 「小(Small)」
(レガシー)中
((Legacy) Middle)
16pxver. 0.8.1: 「中(Middle)」
(レガシー)大
((Legacy) Large)
24pxver. 0.8.1: 「大(Large)」
(レガシー)特大
((Legacy) Extra Large)
32pxver. 0.8.1: 「特大(Extra Large)」
カスタム(Custom)px、em、rem単位で任意のサイズを入力ver. 0.9.1よりem、rem単位でも指定可能に
Nia-TN-SDfs-normal2.png
デフォルト(Default)」では、このサイズです
Nia-TN-SDfs-normal2.png
小(Small)」サイズ
Nia-TN-SDfs-normal2.png
中(Middle)」サイズ
Nia-TN-SDfs-normal2.png
大(Large)」サイズ
Nia-TN-SDfs-normal2.png
特大(Extra Large)」サイズ
Nia-TN-SDfs-normal2.png
超特大(Ex Extra Large)」サイズ
Nia-TN-SDfs-normal2.png
(レガシー)極小((Legacy) Extra Small)」サイズ
Nia-TN-SDfs-normal2.png
(レガシー)小((Legacy) Small)」サイズ
Nia-TN-SDfs-normal2.png
(レガシー)中((Legacy) Middle)」サイズ
Nia-TN-SDfs-normal2.png
(レガシー)大((Legacy) Large)」サイズ
Nia-TN-SDfs-normal2.png
(レガシー)特大((Legacy) Extra Large)」サイズ
Nia-TN-SDfs-normal2.png
また、「カスタム(custom)」を選択すると、rem、em、px単位で任意のサイズを設定できます。
(ここでは1.5rem)
Nia-TN-SDfs-normal2.png
200
px!
08-lavendar.png
デカっ!

あまりにも大きすぎると、ページに収まり切らなくなるので気を付けましょう。

3.7. アニメーション

アニメーション(Animation)」のドロップダウンから、キャラアイコンのアニメーションを選択できます。

回転(Spin)

Nia-TN-SDfs-normal2.png
グルグルグルグルー
Nia-TN-SDfs-normal2.png
逆回転バージョンもあります。

振り子(Pendulum)

Nia-TN-SDfs-normal2.png
〜♪

振動(Snake)

Nia-TN-SDfs-surprised.png
実は当初、吹き出しごと振動させようと思ったのだけど、テキストが読みづらかったので、アイコンだけにしました。

バウンド(Bound)

Nia-TN-SDfs-normal2.png
これらのアニメーションは、CSS3のアニメーション機能を使用しています。

3.8. よく使うものは「再利用可能ブロック」に保存しておこう!

Gutenbergエディタにある「再利用可能ブロック」機能を使用して、よく使う吹き出しブロックを保存しておくと、作業が効率的になり便利です。
特に3.1.でアップロードしたキャラを使用している時は、都度キャラアイコン (カスタム)にファイル名を入力する手間が省けるメリットがあります。

再利用可能ブロックに保存したいブロックを選択して、「再利用ブロックを作成」(再利用ブロックに追加)を選択します。

名前を付けて、保存ボタンを押すと、保存完了です。

先ほど保存したブロックは「再利用可能」のカテゴリーにいます。そこから記事に追加することができます。

セリフなどを変更したい時は、「通常のブロックへ変換」を選択します。

再利用ブロックのままセリフなどを編集すると、同一の再利用ブロックを配置している全てのブロックにも反映されます。

4. おわりに

今回は、WordPress 5.0以降のGutenbergエディタ対応の吹き出し表示プラグインの作ったお話と紹介をしました。

今回で初めて、Gutenbergエディタのカスタムブロックを作ってみて、カスタムブロックの構成自体はスムーズにできたのですが、ブロックのバリデーションでコケまくりました。

Nia-TN-SDfs-sweet.png
改修前後で出力するHTMLコードが少しでも違うと、バリデーションエラーになるんだよね、これ・・・。

あと、WordPressのプラグインを公式に上げるのに、Subversionを使用するので、Gitとの違いで戸惑ったり・・・、色々苦労しました(汗)。

今回、CSSのコーディングに使用したSassがとても便利でした。一度使い始めたら元に戻れませぬ。

JavaScriptの方は、今回はES5系でコーディングしましたが、いずれはReact+TypeScriptでコーディングしたいですね。

[END]

バージョン履歴

  • 0.9.2:
    • readme.txtなどでバージョン番号に誤りがあったので、修正しました。コード自体は、ver. 0.9.1と同じです。
  • 0.9.1:
    • 吹き出しテキストのフォントサイズのプロパティをアップグレードしました(ver. 0.8.1の時点で設定済みのブロックは、アップデート後にマイグレーションされます)。
    • 一部のCSSを修正しました。
    • (※)この記事にて、吹き出しのテーマカラーの「エスプレッソ(Espresso)」が抜けていたので修正しました。「エスプレッソ(Espresso)」自体は、ver. 0.8.1よりあります。
  • 0.8.1:
    • 初版リリース

コメント

タイトルとURLをコピーしました