Shepherdでアプリケーションを紹介します

キーテイクアウト

Hubspotが開発した
• Shepherdは、アプリケーションツアーを通じてユーザーをガイドし、ユーザーにアプリケーションをより効率的でインタラクティブに導入するプロセスを提供するシンプルなJavaScriptライブラリです。
ライブラリはオープンソースであり、依存関係がないため、開発者にとって好ましい選択肢となっています。それぞれに独自のテキスト、位置、およびアクションを備えたステップを作成でき、カスタマイズのための広範なAPIを提供します。
• その有望な機能にもかかわらず、Shepherdはブラウザのサポートが限られています。特にIE 9用です。ただし、古いブラウザーをサポートすることを計画していない開発者にとって貴重なツールになる可能性があります。また、シンプルなAPIと明確なドキュメントを提供し、あらゆるスキルレベルの開発者がアクセスできるようにします。

Web開発者として、あなたはおそらくアプリケーションを作成することは多くの場合簡単な部分であることに気付くでしょう。世界にそれを提示することはそれ自体が困難な仕事です。プレゼンテーションを作成することを好む人もいれば、ビデオを作る人もいます。あなたがあなたのユーザーをアプリを介して歩くのを助ける何かを持っていたらいいのではないでしょうか？ HubspotでShepherdを入力してください。 Shepherdは、アプリケーションのツアーを通じてユーザーをガイドするのに役立つシンプルなJavaScriptライブラリです。羊飼いが彼の羊の群れの世話をするように、ユーザーを適切な場所に向けるのに役立ちます。 この目的のために他のライブラリもありますが、私が羊飼いを好む理由は、依存関係がないことです。また、Coffeescriptのサポートもありますが、ここではJavaScriptのみを探索します。

始めましょう

Shepherdはオープンソースであり、そのコードはGithubで見つけることができます。 ShepherdのデモはHubspotでも入手できます。始めましょう。 焦りのために、ここに開始する基本的なコードがあります。これにより、アプリケーションのワンステップツアーが作成されます。これにより、ダイアログがセレクター#ID_SELECTORと一致する要素の下部に結合します。

<span>var tour = new Shepherd<span>.Tour</span>({
</span>  <span>defaults: {
</span>    <span>classes: 'shepherd-theme-arrows',
</span>    <span>scrollTo: true
</span>  <span>}
</span><span>});
</span>
tour<span>.addStep('myStep', {
</span>  <span>title: 'Hi there!',
</span>  <span>text: 'This would help you get started with this application!',
</span>  <span>attachTo: '#id_selector bottom',
</span>  <span>classes: 'shepherd shepherd-open shepherd-theme-arrows shepherd-transparent-text',
</span>  <span>buttons: [
</span>    <span>{
</span>      <span>text: 'Exit',
</span>      <span>classes: 'shepherd-button-secondary',
</span>      <span>action: function() {
</span>        <span>return tour.hide();
</span>      <span>}
</span>    <span>}
</span>  <span>]
</span><span>});</span>

羊飼いを壊して

簡単なコードが実行されているので、私たちが理解できる手順を細かく分けてみましょう。

を含む シングルシェパードJavaScriptファイルを含める必要があります。 Shepherdには、CSSファイルに含まれるデフォルトのテーマも付属しています。

<span><span><span><link> type<span>="text/css"</span> rel<span>="stylesheet"</span> href<span>="css/shepherd-theme-arrows.css"</span> /></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="./shepherd.min.js"</span>></span><span><span></span>></span></span></span>

shepherd

を初期化します 次のコードサンプルは、JavaScriptを介してツアーの作成方法を示しています。まもなくツアーに手順を追加するので、初期化のデフォルトオプションは、それらをオーバーライドしない限り、すべての手順にそれらのオプションを追加します。

tour <span>= new Shepherd<span>.Tour</span>({
</span>  <span>defaults: {
</span>    <span>classes: 'shepherd-theme-arrows',
</span>    <span>scrollTo: true
</span>  <span>}
</span><span>});</span>

ステップの作成

「開始する」コードをもう一度チェックしてみましょう。ツアーの単一のステップを開始するコードは次のとおりです。

tour<span>.addStep('myStep', {
</span>  <span>title: 'Hi there!',
</span>  <span>text: 'This would help you get started with this application!',
</span>  <span>attachTo: '#id_selector bottom',
</span>  <span>classes: 'shepherd shepherd-open shepherd-theme-arrows shepherd-transparent-text',
</span>  <span>buttons: [
</span>    <span>{
</span>      <span>text: 'Exit',
</span>      <span>classes: 'shepherd-button-secondary',
</span>      <span>action: function() {
</span>        <span>return tour.hide();
</span>      <span>}
</span>    <span>}
</span>  <span>]
</span><span>});</span>

複数の手順を立てることを計画している場合は、追加のボタンを添付できます。 2つの手順がある場合は、ボタンの使用方法の例です。

tour<span>.addStep('step1', {
</span>  <span>...
</span>  <span>buttons: [
</span>    <span>{
</span>      <span>text: 'Exit',
</span>      <span>classes: 'shepherd-button-secondary',
</span>      <span>action: function() {
</span>        <span>return tour.hide();
</span>      <span>}
</span>    <span>}, {
</span>      <span>text: 'Next',
</span>      <span>action: tour.next,
</span>      <span>classes: 'shepherd-button-example-primary'
</span>    <span>}
</span>  <span>]
</span><span>});
</span>
tour<span>.addStep('step2', {
</span>  <span>...
</span>  <span>buttons: [
</span>    <span>{
</span>      <span>text: 'Back',
</span>      <span>action: tour.back,
</span>      <span>classes: 'shepherd-button-example-primary'
</span>    <span>}, {
</span>      <span>text: 'Exit',
</span>      <span>classes: 'shepherd-button-secondary',
</span>      <span>action: function() {
</span>        <span>return tour.hide();
</span>      <span>}
</span>    <span>} 
</span>  <span>]
</span><span>});</span>

ツアーを開始

ツアーを設定した後、残っているのはそれを開始することだけです！

tour<span>.start();</span>

api

Shepherdは、その動作を説明するドキュメントだけでなく、広範なAPIを提供します。ここでは、いくつかの有用な電話をお勧めします。

ツアーインスタンス

まず、以下に示すようにツアーを作成します。

myTour <span>= new Shepherd<span>.Tour</span>({ options })</span>

さて、このインスタンスでどのように協力できるかを確認します。手順とデフォルトは、ツアーインスタンスのオプションです。その方法については、以下に説明します。

• AddStep（ID、Options） - 上で見たように、IDを割り当てることによりステップが作成され、テキストやボタンなどのオプションを追加します。
getByid（ID） - この方法は、IDで特定のステップを選択するために使用されます。
• show（id） - 特定のステップを表示します
オン（イベント、ハンドラー） - ツアーにイベントをバインドします。これは、jQueryのbind（）メソッドに似ています
• オフ（イベント、ハンドラー） - イベントを解除します。

ツアーインスタンスには、Start、Complete、Show、Hideなどのイベントもあります。

ステップ

以前に手順を追加しましたが、詳しく見てみましょう。次のリストでは、定義できるオプションについて説明します。

• タイトル - タイトルを適用する場合と適用できない場合があります
テキスト - ステップに表示されるテキスト。
• アタッチト - これには2つの部分があります。ステップを接続する要素のセレクターと、ステップを接続する位置（つまり#ID_SELECTORボトム）。
• クラス - ダイアログに追加する追加のクラス。これは、使用しているテーマに依存します
ボタン - 表示されるボタンのリスト。各ボタンにはテキスト、追加のクラスが追加され、ボタンをクリックするときに実行されるアクションがあります。
• タスクを簡単にするために使用できるさまざまな方法があります。これが便利なもののいくつかです：
• show（） - ステップを表示します。

hide（） - ステップを非表示。

• cancel（） - ステップを非表示にして、ツアーをキャンセルします
complete（） - ステップを非表示にして、ツアーを完了します
• Destroy（） - ステップを破壊します。
• on（event、handler） - イベントにバインドします。
• on（event、handler） - イベントのバインドを解除します
• 結論
シェパードはかなり有望に見えますが、私が気づいたヒカップの1つは、IE 9のブラウザのサポートです。しかし、古いブラウザをサポートする予定がない場合は、試してみてください。 GitHubのこの記事のコードに基づいて、ライブデモを見つけることができます。デモをさらに変更できます。 Shepherd Navigationの矢印キー用のバインディングイベントハンドラーを試すことができます。また、CSSクラスを作成し、さまざまな要素に接続して、ある要素から別の要素に焦点を移すこともできます。
• アプリケーションシェパード
に関するよくある質問（FAQ）
• Application Shepherdは、アプリを導くJavaScriptライブラリです。 Shepherd.jsとは異なり、よりユーザーフレンドリーで実装が簡単になるように設計されています。 Shepherd.jsは強力なツールですが、効果的に使用するにはJavaScriptをより深く理解する必要があります。一方、アプリケーションシェパードは、すべてのスキルレベルの開発者が簡単なAPIとクリアドキュメントを使用してアクセスできるように設計されています。簡単です。 Command NPM Install Application-Shepherdを使用して、NPM経由でインストールできます。インストールしたら、「Application-Shepherd」からImport Shepherdを使用してプロジェクトにインポートできます。 Shepherdは、広範なカスタマイズを可能にします。色、サイズ、位置、およびガイド要素の多くを変更できます。これにより、アプリのルックアンドフィールに合ったガイドを作成し、シームレスなユーザーエクスペリエンスを提供できます。

  アプリケーションシェパードは、複雑でマルチステップガイドをどのように処理しますか？

  ​​

  アプリケーションシェパードは、複雑なガイドを簡単に処理するように設計されています。一連のタスクをユーザーに導くマルチステップガイドを作成できます。各ステップには、独自のテキスト、位置、およびアクションがあり、詳細でインタラクティブなガイドを作成できます。アプリケーションシェパードは、既存のコードベースと簡単に統合できるように設計されています。スタンドアロンライブラリであるため、使用するために特定のフレームワークやテクノロジーは必要ありません。プロジェクトに単純にインポートしてガイドの作成を開始できます。

  新しいユーザーのオンボーディングにアプリケーションシェパードを使用できますか？新しいユーザーのオンボーディング。新しいユーザーを介してアプリを介して新しいユーザーを順を追って説明する詳細な段階的なガイドを作成し、それを効果的に使用する方法を理解するのに役立ちます。 🎜>アプリケーションシェパードでは、ガイドの更新または変更は簡単です。コードのガイドステップのプロパティを単純に変更でき、変更はガイドに反映されます。これにより、アプリが進化するにつれてガイドを最新の状態に保つことができます。アプリケーションシェパードのネットワークでは、一般的なJavaScriptおよびWeb開発フォーラムとコミュニティに関するヘルプとアドバイスを見つけることができます。アプリケーションシェパードのドキュメントは、ライブラリを効果的に使用する方法を学ぶための優れたリソースでもあります。

以上がShepherdでアプリケーションを紹介しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。