← 動的パーツギャラリーへ戻る

パーツ番号 10-06-01 ・ JavaScript使用

AI応答ストリーミング表示

ChatGPTのように1文字ずつテキストが流れて表示される演出。AIチャットボットや自動応答UIの回答表示に使えます。

autojs

プレビュー

ソースコード

HTML

<div class="d10-06-01-box">
          <div class="d10-06-01-head">
            <span class="d10-06-01-ai-badge">AI</span><span class="d10-06-01-name">アシスタント</span>
          </div>
          <p class="d10-06-01-msg"><span class="d10-06-01-text"></span><span class="d10-06-01-cursor"></span></p>
        </div>

CSS

.d10-06-01 .d10-06-01-box{width:100%;max-width:250px;background:#f7f8fa;border-radius:14px;padding:16px 18px;box-shadow:0 2px 10px rgba(0,0,0,.06)}
        .d10-06-01 .d10-06-01-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
        .d10-06-01 .d10-06-01-ai-badge{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
        .d10-06-01 .d10-06-01-name{font-size:12px;font-weight:600;color:#374151}
        .d10-06-01 .d10-06-01-msg{margin:0;font-size:12.5px;line-height:1.8;color:#1f2937;min-height:70px}
        .d10-06-01 .d10-06-01-cursor{display:inline-block;width:2px;height:13px;background:#6366f1;margin-left:2px;vertical-align:middle;animation:d551Blink .8s step-end infinite}
        @keyframes d551Blink{0%,100%{opacity:1}50%{opacity:0}}

JavaScript

(function(){
          var root = document.currentScript.closest('.item');
          var el = root.querySelector('.d10-06-01-text');
          var texts = [
            'ご質問ありがとうございます。WordPressでの実装方法についてご説明しますね。',
            'まずプラグインを有効化し、設定画面からAPIキーを入力してください。'
          ];
          var ti = 0;
          function typeText(str, cb){
            var i = 0;
            el.textContent = '';
            var timer = setInterval(function(){
              i++;
              el.textContent = str.slice(0, i);
              if(i >= str.length){
                clearInterval(timer);
                setTimeout(cb, 1400);
              }
            }, 38);
          }
          function loop(){
            typeText(texts[ti], function(){
              ti = (ti + 1) % texts.length;
              setTimeout(loop, 500);
            });
          }
          loop();
        })();

クラス名 .d10-06-01 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。