Shepherd: 新しい JavaScript ライブラリでユーザーをガイドします

「羊や羊の群れを守り、導き、見守る人を羊飼いと呼びます」。しかし、開発者はどうやってシェパーディングを行うことができるのでしょうか?? Shepherd Js。ユーザーをガイドし、詳細かつ説明的な方法でアプリケーションまたはアプリケーションの特定の部分を理解できるようにするための最高の OS ツールの 1 つです。
 

シェパードって何？？ ?

Shepherd は、アプリを通じてユーザーをガイドするための JavaScript ライブラリです。別のオープンソース ライブラリである Floating UI を使用して、ツアーの「ステップ」ごとにダイアログをレンダリングします。

つまり、ユーザーにアプリのツアーを案内します。

カスタムのユーザー オンボーディング ツアー、トレーニング、アナウンスを作成して、ユーザーの採用を促進できます。

羊飼いはどうやって行うのですか？ ??

Shepherd を使用すると、アプリまたは Web サイト内のカスタム ツアーまたは旅を通してユーザーをガイドできます。最小限のスタイルで高度にカスタマイズ可能な Shepherd は、使いやすく、強力なカスタマイズを可能にします。 React、Ember、Angular、Vue.js、ES モジュール、プレーン JavaScript など、さまざまなフレームワークがサポートされています。

Shepherd をインストールする手順 ?️:

1. 以下のコマンドを使用すると、npm、yarn、pnpm、bun を使用して Shepherd を直接インストールできます。

   • npm install: npm install shepherd.js
   • 糸のインストール: 糸の追加 shepherd.js
   • pnpm インストール: pnpm add shepherd.js
   • bun install: bun add shepherd.js

2. jsDelivr cdn を直接使用して、Shepherd を使用することもできます。
   

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/shepherd.js@13.0.0/dist/esm/shepherd.mjs"
></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/shepherd.js@13.0.0/dist/css/shepherd.css"
/>

ステップを作成するにはどうすればよいですか? ?

羊飼いツアーの作成は非常に簡単で、以下のコードに従うだけです:

const tour = new Shepherd.Tour({
        defaultStepOptions: {
            cancelIcon: {
                enabled: true
            },
            classes: 'class-1 class-2',
            scrollTo: { behavior: 'smooth', block: 'center' }
        }
    });

    tour.addStep({
        title: 'Creating a Shepherd Tour',
        text: 'Creating a Shepherd tour is easy.
               Just create a "Tour" instance, and add as many
               steps as you want.',
        attachTo: {
            element: '.hero-example',
            on: 'bottom'
        },
        buttons: [
            {
                action() {
                    return this.back();
                },
                classes: 'shepherd-button-secondary',
                text: 'Back'
            },
            {
                action() {
                    return this.next();
                },
                text: 'Next'
            }
        ],
        id: 'creating'
    });

    tour.start(); //starts the tour

スタイリングを変更するにはどうすればよいですか? ?

ShepherdJS ライブラリがページに挿入する HTML は次のようになります:

<div aria-describedby="step1-description" role="dialog" tabindex="0" class="shepherd-element shepherd-enabled" data-shepherd-step-id="step1" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate(393px, 302px);" data-popper-placement="bottom">
   <div class="shepherd-arrow" data-popper-arrow="" style="position: absolute; left: 0px; transform: translate(192px);"></div>
   <div class="shepherd-content">
      <div class="shepherd-text" id="step1-description">Users seem to be down by 12.4%. Is that bad?</div>
      <footer class="shepherd-footer"><button class=" shepherd-button " tabindex="0">Next</button></footer>
   </div>
</div>

したがって、以下のようなもので要素 (矢印など) をターゲットにしやすくなります。

.shepherd-arrow {
  /* Some styles here... */
}

また、お気づきかと思いますが、ステップを追加するときに ID が使用されます。したがって、これを使用して、特定のステップの記述をターゲットにすることもできます。
 
上記はいくつかの基本的なプロパティです。 ツアーの進行状況を見せたい人がいれば、それもできます。以下のコード行に従います:

when: {
  show() {
    const currentStep = Shepherd.activeTour?.getCurrentStep();
    const currentStepElement = currentStep?.getElement();
    const header = currentStepElement?.querySelector('.shepherd-header');
    const progress = document.createElement('span');
    progress.style['margin-right'] = '315px';
    progress.innerText = `${Shepherd.activeTour?.steps.indexOf(currentStep) + 1}/${Shepherd.activeTour?.steps.length}`;
    header?.insertBefore(progress, currentStepElement.querySelector('.shepherd-cancel-icon'));
  }
}

すべての詳細は、Shepherd の公式ドキュメント ページ、ここにあるリンク: https://docs.shepherdpro.com/
で入手できます。  

Shepherd Js を使用したクールなプロジェクト ?‍?

1️⃣ 三目並べ ⭕❌

退屈な講義に出席しているとき、親友と真剣な会話をしているとき、あるいは人生のあらゆる瞬間に、私たちは三目並べというゲームをしたことがあります。
このゲームをサポートし復活させる素晴らしいプロジェクトが Susheel Thapa によって作成されました。プロジェクトはOSです。このプロジェクトは、Shepherd の最良の使用法の 1 つを示しています。

ライブデモ: https://tictactoe.susheelthapa.com.np/
Github リンク: https://github.com/SusheelThapa/Tic-Tac-Toe
Shepherd の実装: https://github.com/SusheelThapa/Tic-Tac-Toe/tree/main/src/components/Shepherd

Shepherd Js を使用したゲームのガイド付きツアー

2️⃣ 勉強仲間？

StudyMate は、PDF のページごとの概要を提供し、インタラクティブなフラッシュカードを生成することにより、学習体験を向上させるように設計された革新的な Web アプリケーションです。 Shepherd.js の統合により、StudyMate は、ユーザーがアプリケーションの機能をシームレスにナビゲートできるようにするガイド付きツアー機能を提供します。 StudyMate は、直前の改訂セッションに特に便利で、ユーザーは主要な概念や情報を構造化された方法ですばやく確認できます。

このプロジェクトは Subash Lamichhane によって構築されています。

Github リンク: https://github.com/Subash-Lamichhane/StudyMate
Shepherd の実装: https://github.com/Subash-Lamichhane/StudyMate/blob/main/frontend/src/pages/LandingPage.jsx

Shepherd Js を使用したアニメーション付きの Study Mate のガイド ツアー

3️⃣シードリンク?

SeedLink は、近くの苗床や庭園で入手できるさまざまな植物を探索できるフロントエンド Web アプリケーションです。購入したり、調べたりすることもできます。それでおしまい？？いや、もっと詳しく知りたい場合は、アプリを探索してください! ?

このプロジェクトは Rohan Sharma によって構築されました (はい、私がその作成者です)

Github リンク: https://github.com/RS-labhub/SeedLink-Shepherd
Shepherd の実装: https://github.com/RS-labhub/SeedLink-Shepherd/blob/main/src/shepherd.js

Shepherd Js を使用した視覚化と魅力的なテーマを含む SeedLink のガイド付きツアー

終わりに向かって移動します...?

Shepherd は、オープンソースのフル機能のデジタル アダプション プラットフォーム (DAP) およびユーザー オンボーディング サービスです。

Shepherd は、有料サービスであるプロバージョンにも進化しました。以下は、Shepherd-Pro が提供する 機能 のリストです:

• カスタマイズ可能なツアー テンプレート
• 分析の統合
• 多言語サポート
• ユーザー行動の追跡
• 統合機能
• レスポンシブデザイン
• フィードバックメカニズム
• 高度な分岐ロジック

まだ利用したことがない方は、ぜひ一度アクセスしてみてください！後悔しないと約束します?

Star Shepherd on Github ⭐

以上がShepherd: 新しい JavaScript ライブラリでユーザーをガイドしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。