Affinger6は、ver20241022から会話ふきだしに「しゃべるモード」（Typing風アニメーション）が実装され、前回記事の『クラシックエディタで「しゃべるモード」を使用』を紹介しました。
ただこの「しゃべるモード」はone way動作のため、画面に入ってTypingアニメーションした後は静止します。 また、Affinger6 EXでないとTyping速度は調整できません。
そこで、jQueryのTyping用「t.js」と画面トリガ用「inview.js」を実装して、上下スクロールで「会話ふきだし」が画面に入った時に常にTyping動作をする様に、更にTypingのスピードも変えられる様にしてみました。
まず、Typing風アニメーション（t.js）を実装した「しゃべるモード」のデモをご覧ください。
上下にスクロールしてみてね！
jQueryのt.jsとinviewをAffinger6に実装して、上下スクロールで「会話ふきだし」が画面に入った時にTypingが開始されます。
今回作成したショートコード
shortcode [kaiwa_typing_new kaiwa_no="1" position="" speed=""]ここに会話を記述する[/kaiwa_typing_new]
Typing速度の調整もできるよ！
100Typingスピードを少し下げてみました。 ショートコードのspeedオプションを100にして、デフォルト のTyping speedの半分にしています。
「inview.js」と「t.js」の導入と準備
「inview.js」は、指定の要素がスクロールして画面内に表示されたら、イベントを発動させることができるjQueryプラグインです。 また、「t.js」は、多機能なタイピングアニメーションを実現するjQueryプラグインです。 この２つのjQueryプラグインを使えば、上下スクロールで「会話ふきだし」要素が画面に入った時にTyping動作を行わせることができます。
Step
1 「inview.js」の準備
inview.js (GitHub)を開き、 【 < > Code 】ボタンを押して、Download ZIPを選択してダウンロードします。 ZIPファイルを解凍して、サイトのドメイン内に jquery.inview.min.jsファイルをアップロードします。
Step
2 「t.js」の準備
t.js (GitHub)を開き、 【 < > Code 】ボタンを押して、Download ZIPを選択してダウンロードします。 ZIPファイルを解凍して、サイトのドメイン内に t.min.jsファイルをアップロードします。
「inview.js」は動作NGでしたが、「t.js」では、下のCDNを利用できました。
html
<script src="https://cdn.jsdelivr.net/gh/mntn-dev/t.js/t.min.js"></script>
Step
3 jQuery Scriptの配置
Affinger6の場合、AFFINGER管理から、 その他 ＞ 「上級者向け」の </body>直前に出力するコード欄に以下の様に記述します。 特定ページで使用したい場合は、投稿・編集ページの下段の「wp_footerに出力します」欄に同じコードを記述します。 他の方法として、ヘッダーやフッターにコードを挿入できるWPCode Liteプラグイン（リンクへ）を使う方法もあります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script src="https://pianoforte32.com/〜/jquery.inview.min.js"></script> <script src="https://pianoforte32.com/〜/t.min.js"></script> <script> jQuery('.typing').on('inview', function(event, isInView) {//oneで1回だけ実行 onにすると毎回実行 if(isInView) { jQuery(this).t({ delay: 0.5, // アニメーション開始までの時間 speed: 50, // アニメーション速度 デフォルト caret: true, // カーソルの有無 blink: false, // カーソル点滅の有無 blink_perm: false, // タイピング中のカーソルの点滅 }); } }); </script> |
コードの説明
- 1行、2行：Step1とStep2でアップロードしたjsファイルのURL（絶対アドレス）を指定します。
- 6行：Typing要素(class='Typing')が画面にはいり、isInViewがtrueになったら
- 7行：Typing要素に対して、Typingが実行されます。（onをoneにすれば、１回だけTypingします。）
- 8〜12行：Typingのオプションを指定しています。
「Post Snippets Plugin」を使ったショートコードの作成
Post Snippetsプラグインのインストールや使い方は、「小技・事例集」を参照してください。
Post Snippets（バージョンは3.1.6） 設定画面は以下の通りで、番号を振ったエリアに従って説明します。 （Post Snippets の最新バージョンは4.xになっていますが、一部不具合と使い勝手が悪く3.1.6バージョンを使っています。）
先ず、「Add New Snippet」ボタンを押します。
① エリアのUntitledにショートコードの名称を記入します。 ショートコード名を、kaiwa_typing_new にしました。
② エリアに下のHTMLコードをコピペします。 { } で囲まれた{kaiwa_no}、{position}と{speed} が変数です。 この変数が、ショートコードオプションになります。
|
1 2 3 4 5 6 |
<div style="margin-bottom:20px;height: 150px;"><!--CLS対策でエリア高さを規定--> [st-kaiwa{kaiwa_no} {position}] <p class="typing" style="margin:0;"><s>{speed}</s>{content}</p> [/st-kaiwa{kaiwa_no}] </div> |
なお、{content}によって、コードの前後が分離される囲み型ショートコードにしています。
③ Variables（変数）をカンマ区切りで記述し、「 =」の後がデフォルト値になります。 下で示す内容を ③ エリアに記述します。
kkaiwa_no=1,position,speed④ エリアにショートコード化するので、レ点を入れます。 ⑤ エリアにはPHPを使っていないので無記入のままです。
⑥ エリアにショートコードの簡単な説明を記載します。（下記は参考です）
kaiwa_noはkaiwa番号を記入、右に配置するには、positionに r を記述、Typing speedは数値を入れる。 会話を記述し[/kaiwa_typing_new]で囲む以上で、ショートコードが完成しました。
完成した「Post Snippets Plugin」によるショートコードの使い方
shortcode [kaiwa_typing_new kaiwa_no="1" position="" speed=""]ここに会話を記述する[/kaiwa_typing_new]
ショートコードの説明
- kaiwa_noオプション：会話ふきだしの番号を記入します。
- positionオプション：「 r 」を指定すると、会話ふきだしのアバターの位置が右寄せになります。
- speedオプション：無記入はデフォルトの50です。 例えば100にするとTyping speedが半分になります。
- 囲み型ショートコードの間に：会話の内容を記述します。
kaiwa_no="4" position="r" speed=""
「会話ふきだし」が画面に入った時にTypingが開始され、更にTypingスピードも変えられます。
会話ふきだし「しゃべるモード」の使用上の注意（2024/12/11追記)
モバイルの様な横幅の小さい画面では、しゃべるモードのアニメーションが開始され会話行が追加されるに従って、下の要素にズレが生じSEO的に望ましくありません。 つまり、「ウェブバイタル（Web Vitals）」中のCLS（Cumulative Layout Shift）が悪化する恐れががあり得ます。 この対応策のため、前記「Post Snippets Plugin」②エリアのHTMLコードの１行目に<div>タグを追加してこの<div>で囲まれた要素の高さを150pxに固定しました。
よって、会話エリア高さを150pxに規定したので、モバイルの様な横幅の小さい画面（例えばiPhoneSE）でプレビューして確認しながら、会話ふきだしの会話行数を５行以内（要素の高さ150px以内）に収める必要があります。
以上、Affinger6の「会話ふきだし」を「t.js」と「inview.js」を実装して「しゃべるモード（Typing化）」にする方法の紹介でした。 「会話ふきだし」以外にも横展開できると思います。
その他のアニメーション
テキストモードにして、<del>タグと<ins>タグを使って<del>誤記訂正の箇所<ins>2</ins></del>の様に記述すると、「誤記訂正の箇所」を2秒後に消去するTypingアニメーションが表示できます。
100このショートコード[kaiwa_typing_new]を使用すれば、誤記訂正の箇所2上下スクロールで「会話ふきだし」が画面に入った時にTypingが開始されます。