チュートリアル機能の作成

• PushButtonへのフォーカス
• 全面を覆う透過黒背景のオーバーレイ
  • clip-path: polygon作成して、押したいボタンを避ける様な形にする。
• フォーカスしたボタン付近の広い場所に「指輪」と「メッセージ」を表示する
• Reactツアーなどのチュートリアル用ライブラリは使わないほうが作りやすいはず

figma

Figma

DB設計

is_nakama_tutorial_completed
is_nakama_completed
: boolean default falseがいっぱいあるテーブル
create table tutorial_completions (
  player_id string
  is_nakama_completed
  ...
) 

チュートリアルの項目数だけカラムが存在する。増えてく。

チュートリアルマスターデータ

export type TutorialStep = {
  /** チュートリアルメッセージ。タップで次へ進む */
  messages: string[];
  /** data-tutorial-id と一致するボタンID。最後のメッセージ表示時にハイライトされる。省略時はメッセージ送りのみ */
  targetButtonId?: string;
};

export type TutorialMasterType = {
  id: string;
  tutorialFlag: TutorialFlag;
  steps: TutorialStep[];
};

使い方

1. shared/master-data/tutorials にデータを追加する

nakama-tutorial.ts

/** Members画面: ルーク選択 → 強化 → 自動選択 → 強化実行 */
export const MembersEnhanceTutorial: TutorialMasterType = {
  id: "members-enhance-tutorial",
  tutorialFlag: "isNakamaTutorialCompleted",
  steps: [
    {
      messages: ["まずはルークを選んでみよう！"],
      targetButtonId: "character-grid-item-luke",
    },
    {
      messages: ["ルークを強化してみよう！", "「強化」ボタンを押してね"],
      targetButtonId: "enhance-button",
    },
    {
      messages: ["素材を自動で選択できるよ！", "「自動選択」を押してみよう"],
      targetButtonId: "auto-select-button",
    },
    {
      messages: ["準備ができたね！", "「強化」を押して強化しよう！"],
      targetButtonId: "enhance-confirm-button",
    },
  ],
};

2. PushButton の tutorialId にcharacter-grid-item-luke などの紐付け用IDを 設定する

<PushButton
    key={character.characterMasterId}
    onClick={() => onCharacterClick(character.characterMasterId)}
    className="block"
    dataTestId={`character-grid-item-${character.characterMasterId}`}
    tutorialId={`character-grid-item-${character.characterMasterId}`}
  >

3. チュートリアルを発生させたい場面でヘルパー関数 useTutorial を呼ぶ

Members.tsx

const tutorial = useTutorial(MembersEnhanceTutorial);

...

        </OverlayUI>
        {tutorial.component}
      </PageFadeIn>
);

挙動

画面タップするとmessagesが流れて、最後のメッセージと一緒にragetButtonIdで指定したidのPushButtonがハイライト（黒板切り抜き）されて、その上に透明の当たり判定DOMが作られ、そこをタップするとPushButtonのclickが発火される。

フラグをすぐに建てたくない場合

オプションに{ markComplete: false }を入れておくと、そのチュートリアルが終わってもDB上のフラグは立たない。別画面に遷移して、そこでのチュートリアルが完了して初めてフラグ成立したい場合などに使う。（＊ローカルで管理してるuseStateの localCompleted はオプション関係なく、チュートリアル完了時にtrueになる。画面リフレッシュなどで同じチュートリアルメッセージが再出現しないようにするため。）

const tutorial = useTutorial(HomeNakamaTutorial, { markComplete: false });