Create Next App

ポートフォリオver5で必要な実際にタイピングしているかのようなインタラクション。取り急ぎ下記の機能が完成したのでmainにマージした。

完成した機能

basic, lookahead, withParseの3パターンのタイピング実装
basic：1フレーム毎に印字するだけ
lookahead：複数文字を先読みして印字
withParse：文字列を解析して、HTMLタグの装飾やクラスにも対応
※ サンプルに出しているのは、withParse、lookaheadの機能が付いたインタラクション

使い方

import { Typing } from "@/lib/utils/typing"
import types from "../../../store/types.json"
import { basic } from "@/lib/utils/typing/pattern/basic"
import { lookahead } from "@/lib/utils/typing/pattern/lookahead"
import { withParse } from "@/lib/utils/typing/pattern/withParse"

export default function TypeTest() {
  useEffect(() => {
    const test = new Typing()
    const endFunc = () => {}
    test.exec(
      'test',
      withParse(
        types.sample,
        document.querySelector<HTMLElement>('[data-typing-id="test"]'),
        test.store,
        {
          speed: 2,
          convertSpeed: 5
        }
      ).typeFunc,
      () => endFunc()
    )
  })
  return <>
    <div className={styles.root}>
      <div className={styles.samples}>
        <span className={styles.type} data-typing-id="test"></span>
      </div>
    </div>
  </>
}

Typingクラスをインスタンス化したオブジェクトの.exec()メソッドでタイピングを開始できる。basic, lookahead, withParse、どれも下記の同じ引数を取る。

/**
 * 【共通の引数】
 * @/lib/utils/typing/pattern/**
 * @param {string} types 印字する文字列
 * @param {HTMLElement | null} target 印字先のHTML要素
 * @param {Store} store new Typing().storeどの場所でも参照できるオブジェクト
 * @param {Record<string, any>} option オプション
 * @returns {{typeFunc: () => boolean}} booleanを返す`typeFunc`という関数を持つオブジェクト
 */

optionにspeed等の設定ができる想定。もっと複雑なオプションになれば流石にJsDocが必要かな...。

メモ

取り急ぎポートフォリオver5に必要な処理は完成。できれば漢字変換の処理も実装したいけど、保留。現状メモしておきたい仕様等は「開発メモ」のタブに整理。

🔛

漢字変換インタラクションの実装

メモ

const text = "kanji(私たちは, わたしたちは)"

function extract(text) {
  const regex = /kanji\(([^,]+),\s*([^)]+)\)/
  const match = text.match(regex)
  if (match) {
    return {
      kanji: match[1],
      hiragana: match[2],
    }
  }
  return null
}

extract().kanjiをボディ部分に印字して、extract().hiraganaをahead（先読み文字）として印字。extract().kanjiを印字している時は、store.status.interactionにconvertを付与して、実際に漢字変換されているようなインタラクションにする。

👀

リファレンス

株式会社鈴木商店

先に薄いテキストが先行して表示される
漢字変換や装飾付与がされてタイピングされる
変換中は薄く背景色が付く
タイピング中は常に縦線が末尾に点滅

Web Creative｜タイピングインタラクション【開発部屋】

完成した機能

使い方

メモ

メモ