はぴすぷ

【WordPressプラグイン】会話をLINEの様なチャット形式で表示！全種サンプルと使い方【Speech Bubble】

      2015/12/03


Warning: Use of undefined constant i - assumed 'i' (this will throw an Error in a future version of PHP) in /home/c0127342/public_html/hapisupu.com/wp/wp-content/plugins/speech-bubble/classes/SnbSpeechBubble.php on line 368

Warning: Use of undefined constant i - assumed 'i' (this will throw an Error in a future version of PHP) in /home/c0127342/public_html/hapisupu.com/wp/wp-content/plugins/speech-bubble/classes/SnbSpeechBubble.php on line 368

Warning: Use of undefined constant i - assumed 'i' (this will throw an Error in a future version of PHP) in /home/c0127342/public_html/hapisupu.com/wp/wp-content/plugins/speech-bubble/classes/SnbSpeechBubble.php on line 368

Warning: Use of undefined constant i - assumed 'i' (this will throw an Error in a future version of PHP) in /home/c0127342/public_html/hapisupu.com/wp/wp-content/plugins/speech-bubble/classes/SnbSpeechBubble.php on line 368

Warning: Use of undefined constant i - assumed 'i' (this will throw an Error in a future version of PHP) in /home/c0127342/public_html/hapisupu.com/wp/wp-content/plugins/speech-bubble/classes/SnbSpeechBubble.php on line 368

Warning: Use of undefined constant i - assumed 'i' (this will throw an Error in a future version of PHP) in /home/c0127342/public_html/hapisupu.com/wp/wp-content/plugins/speech-bubble/classes/SnbSpeechBubble.php on line 368

Warning: Use of undefined constant i - assumed 'i' (this will throw an Error in a future version of PHP) in /home/c0127342/public_html/hapisupu.com/wp/wp-content/plugins/speech-bubble/classes/SnbSpeechBubble.php on line 368

Warning: Use of undefined constant i - assumed 'i' (this will throw an Error in a future version of PHP) in /home/c0127342/public_html/hapisupu.com/wp/wp-content/plugins/speech-bubble/classes/SnbSpeechBubble.php on line 368

Warning: Use of undefined constant i - assumed 'i' (this will throw an Error in a future version of PHP) in /home/c0127342/public_html/hapisupu.com/wp/wp-content/plugins/speech-bubble/classes/SnbSpeechBubble.php on line 368

Warning: Use of undefined constant i - assumed 'i' (this will throw an Error in a future version of PHP) in /home/c0127342/public_html/hapisupu.com/wp/wp-content/plugins/speech-bubble/classes/SnbSpeechBubble.php on line 368

Warning: Use of undefined constant i - assumed 'i' (this will throw an Error in a future version of PHP) in /home/c0127342/public_html/hapisupu.com/wp/wp-content/plugins/speech-bubble/classes/SnbSpeechBubble.php on line 368

Warning: Use of undefined constant i - assumed 'i' (this will throw an Error in a future version of PHP) in /home/c0127342/public_html/hapisupu.com/wp/wp-content/plugins/speech-bubble/classes/SnbSpeechBubble.php on line 368

まちゃぬ
やぁ(´・ω・`)

まちゃぬ
今日はこういう感じで会話を、チャット形式で表示できるようにするプラグイン「Speech Bubble」を紹介するよ！

杏
どうでもいいから早く帰りたい。

スポンサーリンク

Speech Bubbleの魅力

日本製

まちゃぬ
まず最初に、作者が日本人で国産品です！
楓
困った時にはサポートしてくれてるみたいですし、とても安心できますね。
まちゃぬ
そうなんです。さすが日本人！
作者様のサイトはこちらです。
智絵里
使用方法も用意してくれているようですし、とっても親切な方なんですね。
小梅
だ、だ……だったら……。
使用方法は……説明しなくて……いいってことだよね……？
幸子
何を言ってるんですか。ボクのカワイさを世界中のみんなに届ける為に、やるに決まってるじゃないですか！
まちゃぬ
そうだね！せっかくの機会だし。
幸子
ふふーん♪ちゃんとボクの魅力をたっぷり紹介して下さいね。プロデューサーさん♪

表示タイプが9種類ある

まちゃぬ
なんと表示タイプが9種類もあります！
まちゃぬ
9種類となると…
にこ
そんなのμ’sしかいないでしょ！
希
せやな。ウチらを使わんとバチが当たるで。
まちゃぬ
分かりました。μ’sの皆さんでお願いします！

1. std

穂乃果
じゃあトップバッターは私、高坂穂乃果です！
みんな！ファイトだよ！
穂乃果
stdは多分スタンダードの略だと思うんだ！
穂乃果
あれ？スタンダードってどういう意味なんだろう…。
穂乃果
…。分かんないや…。でも、ファイトだよ！って言えたからノルマは達成だね！

2. fb

海未
次は私、園田海未と申します。fbはFacebookをイメージしたもののようです。
海未
ちなみにスタンダードは標準という意味です。
海未
まったく穂乃果は…。
海未
…。でもそんなところが可愛らしいのですが…。

3. fb-flat

希
次はうち。東條希です
希
fb-flatはFacebookのものをフラットにした感じみたいやね。
希
ここはうちの占いで…。
希
スピリチュアルパワーを注入するん…！

4. ln

ことり
次は私、南ことりって言います。
ことり
lnはLINEをイメージしたものみたいです！
ことり
どうしよう、私着せかえしてるから…。
ことり
標準のLINEのものが、どうなっているか分からないよう…。

5. ln-flat

花陽
次は私…。小泉花陽…です！
花陽
ln-flatなので、LINEをフラットにしたものだと思います！
花陽
はぁ…。緊張したなぁ…！
花陽
緊張し過ぎてお腹空いてきちゃった…。おにぎり食べたいなぁ…。

6. pink

にこ
にっこにっこにー♪あなたのハートににこにこにー♪笑顔届ける矢澤にこにこー♪
にこ
pinkは私みたいな可愛い感じをイメージをしたものに違いないにこ！
にこ
なんで私の時によく分からないものが当たるのよ…！
にこ
でも私の可愛さは十分にアピール出来たわよね…！

7. rtail

真姫
次は私、西木野真姫よ。rtailは青を基調としたデザインの様ね。
真姫
クールで冷静沈着？私のことかしら。…え、AB型の特徴？
真姫
rtail　…。ナニソレイミワカンナイ！
真姫
もう！私に変な名前のものを当ててくるの止めてよね…！まったく…！

8. drop

絵里
次は私、絢瀬絵里と申します。小さい頃は「かしこいかわいいエリーチカ」なんて呼ばれていたわ。
絵里
dropはポップな感じで名前の通り雫のようなデザインだわ。影がくっきり表示されていて浮いているような印象ね。
絵里
良かった…。私にも変な名前のものが当たるのかと思ってドキドキしちゃったわ…。
絵里
…。ハラショー。

9. think

凛
最後は私！星空凛にゃ～！！
って、これ喋れてないにゃ～！酷いにゃ～！
凛
thinkは考えるだから、通常タイプの吹き出しを選んでも考えてしまうにゃ～。色は左右で変わらずに吹き出しの出元のタイプが通常タイプで青色、丸い点々の方でオレンジになるみたいなので注意が必要だにゃ。
凛
どうしようかにゃ…。凛は元気なのが1番の取り柄なのに…。
凛
にゃ～！！凛にも喋らせるにゃ～！

 

凛ちゃんすまぬ…！最後そんなことになると思って無かったんだ…。

いかがでしたか？まずは魅力をお伝えしました！是非使ってみたい！思って頂けたら嬉しいです。

あと自分用に全パターンの一覧が欲しかったので用意した感じですｗ

導入方法

それではインストールの方法。

これは公式に登録されているプラグインなので、管理画面の「プラグイン」→「新規追加」から「Speech Bubble」を検索して「今すぐインストール」をクリックしましょう。

SS_5381

「プラグインを有効化」をクリックして完了。

SS_5382

使い方と開発者向け情報

2種類方法が用意されています。

基本的な使い方

1番簡単な方法は、以下のようなショートコードを貼り付けます。

[speech_bubble type="std" subtype="L1" icon="1.jpg" name="Aさん" ]セリフ[/speech_bubble]

type

吹き出しのタイプで先ほど上げた9つのうち、表示したい見た目のものを「std, fb, fb-flat, ln, ln-flat, pink, rtail, drop, think」から選択します。

デフォルトは「std」。

subtype

これは4種類あって、指定の仕方はそれぞれ3種類あります。

ことり
「L1、left1、a」がこのタイプで、左側で通常の会話のような吹き出しになります。
花陽
「R1、right1、b」がこのタイプで、右側で通常の会話のような吹き出しになります。
にこ
「L2、left2、c」がこのタイプで、左側で考えているような吹き出しになります。
真姫
「R2、right2、d」がこのタイプで、右側で考えているような吹き出しになります。

覚えやすいものを、覚えると良いと思います。大文字と小文字は区別されるので注意して下さい。

デフォルトは「L1」。

icon

画像ファイルの指定。デフォルトは「1.jpg」。

1.jpgさん
私デフォルトの「1.jpg」です。
2.jpgさん
「1.jpg」以外で唯一最初から内蔵されている「2.jpg」です。
[speech_bubble type="ln" subtype="L1" icon="1.jpg" name="1.jpgさん" ]私デフォルトの「1.jpg」です。[/speech_bubble]

[speech_bubble type="ln" subtype="R1" icon="2.jpg" name="2.jpgさん" ]「1.jpg」以外で唯一最初から内蔵されている「2.jpg」です。[/speech_bubble]

iconに画像のURL「https://hapisupu.com/○○.jpg」などを指定することは出来ません！

この2つ以外の画像を使いたい場合は、プラグインのディレクトリにファイルを転送する必要があります。

「wp-content/plugins/speech-bubble/img/」に、FTPなどで使いたい画像ファイルを配置しましょう。

name

名前として表示されているものです。デフォルトは「no name」。

表示したくない時は空文字「” or ””」にしましょう。

私は「名無し」ではなく「」（空白）です
（ ｰ`дｰ´)ｷﾘｯ

セリフ

ショートコードのタグに挟まれた部分がセリフになります。

何もない場合は無視されて何も表示されません。スペースは表示されます。

全角スペース
　
半角スペース

なので、セリフだけが必須パラメータになります。

iconにURL指定できるようにする方法

115行目くらいにある、この部分を。

$sb_icon_path = plugins_url( self::PLUGIN_FOLDER_PATH_IMG . $user_icon );

こうします。

// URLでない場合だけプラグイン以下の画像を使用する
if ( strpos( $user_icon, '://' ) === FALSE) {
	$sb_icon_path = plugins_url( self::PLUGIN_FOLDER_PATH_IMG . $user_icon );
} else {
	$sb_icon_path = $user_icon;
}

これで、URLを指定してもアイコンを表示できるようになります。

プラグインの更新はバックアップを取ってから！

最初私はプラグインの更新の仕組みを知らずに、プラグインに手を入れた状態でいきなり更新したことがありました。

見事に綺麗な状態のプラグインに置き換わりました(；´Д｀)

これはWordPress本体、テーマにも同じことが言えるので、気をつけましょう！ばっさりいかれますｗ

自分で追加した画像が消えたり、手を入れてURL使えるようにした変更も失われます！

高度な使い方

簡単な方法の他に、ちょっと難しい高度な方法もありました。

でも不具合をいくつか含んでいるので、気をつけて下さい(´・ω・`)詳しく知りたい人以外は、ここは読み飛ばして下さい。

どんなものかというと、あらかじめ登場人物や表示方法の設定を登録した上で、セリフを連ねていくというもの。

登場人物が少なくて単調な会話が繰り返される時に効果を発揮しそうです。

ショートコードの書き方はこう。

[speech_bubble_preset]
{sb_id=matyanu: type=fb-flat, subtype=R1, icon=matyanu.jpg, name=まちゃぬ}
{sb_id=anzu: type=fb-flat, subtype=L1, icon=anzu.jpg, name=双葉杏}
{SPEECH_BUBBLE_DELIMITER}
[speech_bubble_id sb_id=matyanu ]これが高度な方法の使い方だ！どうだ！凄いだろ！ [/speech_bubble_id]
[speech_bubble_id sb_id=anzu]へぇ～すごいね。ねぇ、もう帰っていい？[/speech_bubble_id]
[speech_bubble_id sb_id=matyanu]飴あげるから…。もうちょっと付き合って下さい…。[/speech_bubble_id]
[speech_bubble_id sb_id=anzu]しょうがないな～。飴うま～。[/speech_bubble_id]
[/speech_bubble_preset]

これで、こうなる。

まちゃぬ
これが高度な方法の使い方だ！どうだ！凄いだろ！

双葉杏
へぇ～すごいね。ねぇ、もう帰っていい？

まちゃぬ
飴あげるから…。もうちょっと付き合って下さい…。

双葉杏
しょうがないな～。飴うま～。

不具合の内容

  • 「shortcode_speech_bubble_preset」内で$contentを返さずに、echoして抜けるせいで、記事の先頭に全て吐き出される。
  • $typeの抜き出し関数の「get_sb_arguments_type」で正規表現内に「-」が含まれてないので、flat系を指定するとスタイルかからなくなる。

一応この2つ直せば正しく動くと思います。多分…。一応修正した上で、上のコードを実行しています。

感想としては、一度「speech_bubble_preset」から抜けると設定した内容覚えてないのと、デリミタに「:」使ってるおかげでiconにURL突っ込めないのが辛い感じ…。

謝辞

アイコン使わせてもらいました！ミニキャラ大好きなので見てるだけで幸せになれる(^q^)

終わりに

実はこのプラグインは随分前から知っていたんですが、この形式で記事を書くことはないだろうとスルーしていました。

それが何で今になって入れようと思ったかと言うと、会話形式で記事を書くサイトを、新たに作ろうとしているからなんです( ･`ω･´)

サイトで取り扱う内容はプログラミング講座を予定しています。

当サイト「はぴすぷ」で扱っているWordPress系の記事は変わらず、こちらで書き続けます。新しいサイトではPHPやMySQL、JavaScriptといった基礎部分を扱おうと思っています。また、開設したら案内します！

とりあえず会話するキャラが必要なので、ちこさんに相談しました。


まちゃぬ
ちこてんてー。何かアイコンに使えそうで可愛いキャラないですか。

ちこ
あした仕事するからかきましょうか。

まちゃぬ
描いていただけるならぐみこ（まちゃぬのアイコン）お願いしたいです！

ちこ
おっけ。

まちゃぬ
他のキャラまだ何も考えてなかった…！

ちこ
アングルとか背景色とかすきなのかんがえといて。

キャラのイラストは何とかちこさんに頼めそう！良かった！

ちこさんの紹介記事はこちら。
pixiv埋め込みタグの使い方とサンプル。かわいいイラストの依頼ならこの人に！

まずはキャラ設定とか色々考えないといけないですね！

いつかはぴすぷにも出張させる予定なのでお楽しみに！

それでは。

 - WordPress, プラグイン