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

  |   2019/01/06 ( 2019/02/11 ) | 443 views
 0

やっほー!ミョウガだよっ!

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

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

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

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

Myoga02.png
新しい吹き出し表示プラグインができたよー!
Xiia02.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ディレクトリ内に直接配置してインストールします。

Myoga02.png
あとはプラグインを有効化するだけで、すぐに利用できます!

3. 使い方

吹き出しを入れたいところで、「Guten-Bubble」ブロックを追加します。カテゴリーは「ウィジェット」の中にありますよ。

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

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

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

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

好きなキャラアイコン画像を、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. キャラの名前を表示する

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

Myoga02.png
ミョウガ
やっほほ~♪
Myoga02.png
こちらは「キャラの名前」を空にしているよ~

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

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

  • デフォルト
  • ベーシック(ローズ、オレンジ、レモン、ライム、ビリジアン、スカイブルー、インペリアルブルー、ラベンダー、モノトーン)
  • Bootstrap風(Success、Info、Warning、Danger)
Myoga02.png
デフォルト(Default)」は、白地の吹き出しだよー!

ベーシックカラー

Myoga02.png
ローズ(Rose)」です!
Myoga02.png
オレンジ(Orange)」だよ!
Myoga02.png
レモン(Lemon)」だよ!
Myoga02.png
こっちは「ライム(Lime)」!
Xiia02.png
ビリジアン(Viridian)」はワタシのセリフでよく使っている色テーマです。
Nia02.png
スカイブルー(Sky Blue)」は私のセリフでよく使っているね。
Myoga02.png
インペリアルブルー(Inperial Blue)」はわたしのセリフでよく使っています!
Myoga02.png
ラベンダー(Lavendar)」です!
ハーブティーが飲みたいな〜
Myoga02.png
モノトーン(Monotone)」だよ!
Myoga02.png
ちなみに、ベーシンクカラーは、塗りつぶしタイプもありますよ!

Bootstrap風

Myoga02.png
Bootstrap風のテーマカラーもありますよー!
これは「Bootstrap風(Success)」です。
Myoga03.png
Bootstrap風(Info)」だよ〜
Myoga04.png
Bootstrap風(Waring)」は、注意文言入りのセリフに活用できそう?
Myoga08.png
はわわ、
Bootstrap風(Danger)」です!

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

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

Myoga02.png
左寄せ(Left)」だよっ!
Xiia02.png
本サイトでは、記事作成者のキャラが左寄せで、ゲストはこのように「右寄せ(Right)」で表示させてます。
Myoga02.png
Speaking」でお話しよ〜!
Myoga04.png
お、落ち着いて、「Thinking」モードにして素数を1から数えるんだ・・・

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

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

Myoga02.png
マテリアルデザインにいかが?

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

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

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

Myoga09.png
こんな感じ〜
Xiia08.png
怖いですー!

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

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

Myoga02.png
デフォルトはこのサイズです!
Myoga02.png
小(Small)」サイズだよ
Myoga02.png
大(Large)」サイズだよ
Myoga02.png
特大(Extra Large)」サイズだよ
Myoga02.png
また、1px単位でもサイズを設定できるよー
Myoga02.png
200
px!

あまりにも大きすぎると、ページに収まり切らなくなるから気をつけてね〜!

3.7. アニメーション

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

回転(Spin)

Myoga10.png
回レわたし!
Xiia02.png
逆回転バージョンもあります

振り子(Pendulum)

Myoga03.png
〜♪

振動(Snake)

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

バウンド(Bound)

Myoga02.png
これらのアニメーションは、CSS3のアニメーション機能を使っているんだ!

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

Gutenbergエディタにある「再利用可能ブロック」機能を使って、よく使う吹き出しブロックを保存しておくと、作業が効率的になり便利です。

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

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

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

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

4. おわりに

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

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

Myoga02.png
あとCSSの作成にSassを使うと便利だよ!

今は吹き出し表示と編集機能のみですが、キャラアイコン画像のアップロード機能をいずれは入れたいと思っています。自分の好きなキャラでやりたいよね。

後日、WordPressプラグインのリリースしたいと思います。

それでは、See you〜♪

Myoga02.png
今はJavaScript(ES5)だけど、いずれはJSX(ESNext)にしたいな
この記事をシェアする
Chronoir.netのRSSフィードを購読する

ミョウガ(Myoga)

Hello~! 「ミョウガ」です。よろしくお願いします!(≧▽≦)/ 主にC#/XAML/C++などをメインにプログラミングやアプリの開発をしています。好きな物はカフェラテとハーブティ、趣味は写真撮影と艦これです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください