ホームページ >
記事 > ウェブフロントエンド > API ベースのゼルダ BOTW モンスター ギャラリー Web コンポーネントを
API ベースのゼルダ BOTW モンスター ギャラリー Web コンポーネントを 
- PHPzオリジナル
- 2024-09-03 13:33:321115ブラウズ
- PHPzオリジナル
- 2024-09-03 13:33:321115ブラウズ
Modulo チュートリアルが戻ってきました!
こんにちは、皆さん！夏休みの後、Modulo チュートリアルに戻ってきました。さらに多くのチュートリアルを準備中ですので、楽しみにしていてください。とはいえ、次のトピックに関する特定のアイデアがある場合は、必ずコメント欄でお知らせください。
私の最後のチュートリアルは、30 行未満の HTML Web コンポーネント コードで構成される、API 駆動のポケモン ダンス パーティー コンポーネントに関する非常に迅速で楽しい「HTML のみ、JS なし」チュートリアルでした。以前のチュートリアルの一部は、プライベート状態とパブリック状態の管理に関するこのより高度なチュートリアルなど、もう少し本格的なものでした。少し無味乾燥に聞こえるかもしれませんが、それは幸運です。なぜなら、今日のチュートリアルは、もう 1 つの人気のビデオ ゲームに関する楽しいチュートリアルだからです...ゼルダ: ブレス オブ ザ ワイルド!
もちろん、いつものように、このチュートリアルで学んだテクニックはあらゆる API に適用できるので、引き続き読み続けて API 主導のギャラリーについて学びましょう!
ハイラル コンペンディアム API の使用方法
このチュートリアルは 100%、素晴らしい Aarav Borthakur の無料で MIT ライセンスを取得し、寛大にホストされている Hyrule Compendium API のおかげです。これは、ファンが管理する楽しいデータベースと、ゼルダ: ブレス オブ ザ ワイルドのフランチャイズ情報や情報を取得するための API です。メディア。ここで入手可能な「Monsters」エンドポイントを使用します: https://botw-compendium.herokuapp.com/api/v3/compendium/category/monsters
スクリーンショット
30 秒以内に今すぐお試しください: ???先に進みたいですか？最後までスクロールし、39 行の HTML コードをローカル HTML ファイルにコピーし、ブラウザで開きます。 Modulo には依存関係がなく、ローカル HTML ファイルに埋め込まれて実行されるため、非常に簡単です!
データから始める
StaticData とそれを表示するためのテンプレートを含む、たった 6 行のコードから始めましょう:
<Template>
<pre class="brush:php;toolbar:false">API DATA: {{ staticdata|json:2 }}
このスニペットには、非常にシンプルな 1 行の があります。これは、返された Hyrule Compendium API の staticdata.data プロパティをダンプします。 |json:2 フィルターを適用して、より読みやすい形式で表示します。 StaticData は、すぐに JSON (その他の形式) をサポートしており、API に URL を指定するだけで、データの使用を開始できます。 StaticData はわかりにくいですか? GitHub API の統合に関するこのチュートリアルを試すか、Modulo.js チュートリアルの「StaticData」セクションにあるインタラクティブな例を試してみてください。
そのスニペットを実行してみてください。 結果のデータが表示されますか? for ループ を使用してループする必要があります。
画像ギャラリーの作成
属性 .data に オブジェクト の 配列 が含まれていることがわかりました。それをループしてギャラリーを生成しましょう。
<Template>
{% for monster in staticdata.data %}
<img src="{{ monster.image }}" style="width: 200px;" />
{% endfor %}
</Template>
これにより、多くの img タグが生成されます。各タグには、元の JSON Array 内の Objects の「image」プロパティに割り当てられた src= と、{% for %} が割り当てられます。 template-tag は、配列内のすべての項目 (各 index など、0 からカウントアップする数値などは言うまでもありません) の HTML を複製するための構文です。さらに練習するために、Modulo.js チュートリアルのパート 4 に for ループのインタラクティブな例が多数含まれています。
ステートとスクリプトの作成
次に行うべき最も重要なことは、新しい Script タグを作成することです。これを使用して、単純な 1 行の JavaScript 関数を作成できます。
<State
selected:=null
></State>
<Script>
function select(payload) {
state.selected = payload;
}
</Script>
これは、Modulo 使用時のスクリプト作成の中核となるテクニックです。JavaScript を使用して状態を変更できる関数を作成します。この場合、「後で使用するためにこのモンスターを保存する」という非常に単純な操作が実行されます。より正確には、状態変数「selected」を指定されたペイロードに割り当てます。このようにして、状態変数「selected」は、API から選択されたモンスターの一種の「隠し場所」になります。
クリックイベントの付加
ここで、パズルのもう 1 つのピースを追加しましょう。それは、クリック イベントのアタッチです。以下を参照してください:
<img @click:=script.select payload:="{{ monster|json }}" />
これは、イベント添付構文 (@click:=、この例では
) を使用して行われました。
この画像をクリックすることで選択しているモンスターを渡すことができるペイロード属性。イベントとスクリプト タグは、JavaScript を初めて使用する場合 (およびそうでない場合でも) 混乱を招く可能性があるため、スクリプト コンポーネント パーツの使用例とイベントの付加例については、このページの例をよく読んでください。
クリックイベントの付加
最後に、モンスターが選択されたときに条件付きでモンスター情報をレンダリングしましょう:
{% if state.selected %}
<h1>{{ state.selected.name|capfirst }}</h1>
<p><img src="{{ state.selected.image }}" /></p>
<p>{{ state.selected.description }}</p>
{% else %}
<h1>Welcome to Hyrule Monster Guide!</h1>
<p><em>← Select a monster to learn more</em></p>
{% endif %}
This will initially show the "Welcome" message (since state.selected begins as null). Then, as soon as someone clicks on a monster image, the state.selected variable will no longer be null, and
instead the contents will displayed formatted with h1 and p tags, with some tweaks applied (|capfirst makes the first letter capital).
- Embeddable snippet
Combining it all, we then wrap everything in a display: grid to make the side-by-side layout, and a overflow: auto to the left div the scrollbar. Finally, we can add a few final CSS tweaks to the second div (padding, margin, and a linear-gradient), and we get the following results that can be embedded anywhere:
<!DOCTYPE html>
<template Modulo>
<Component name="MonsterGuide">
<Template>
<main style="display: grid; grid-template-columns: 2fr 1fr">
<div style="overflow: auto; height: 95vh;">
{% for monster in staticdata.data %}
<img src="{{ monster.image }}"
@click:=script.select payload:="{{ monster|json }}"
style="width: 200px;" />
{% endfor %}
</div>
<div style="padding: 10px; margin: 10px; background: linear-gradient(to bottom, lightyellow, goldenrod);">
{% if state.selected %}
<h1>{{ state.selected.name|capfirst }}</h1>
<p><img src="{{ state.selected.image }}" /></p>
<p>{{ state.selected.description }}</p>
{% else %}
<h1>Welcome to Hyrule Monster Guide!</h1>
<p><em>← Select a monster to learn more</em></p>
{% endif %}
</div>
</main>
</Template>
<State
selected:=null
></State>
<StaticData
-src="https://botw-compendium.herokuapp.com/api/v3/compendium/category/monsters"
></StaticData>
<Script>
function select(payload) {
state.selected = payload;
}
</Script>
</Component>
</template>
<script src="https://unpkg.com/mdu.js"></script>
<x-MonsterGuide></x-MonsterGuide>
I hope you enjoyed this tutorial, if so, follow for more like this!
以上がAPI ベースのゼルダ BOTW モンスター ギャラリー Web コンポーネントを