検索

ホームページ >ウェブフロントエンド >jsチュートリアル >API ベースのゼルダ BOTW モンスター ギャラリー Web コンポーネントを

API ベースのゼルダ BOTW モンスター ギャラリー Web コンポーネントを
PHPz
PHPzオリジナル
2024-09-03 13:33:321191ブラウズ

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

スクリーンショット

Learn how to create a API-backed Zelda BOTW monster gallery web component in <lines (Modulo.js)

30 秒以内に今すぐお試しください: ???先に進みたいですか？最後までスクロールし、39 行の HTML コードをローカル HTML ファイルにコピーし、ブラウザで開きます。 Modulo には依存関係がなく、ローカル HTML ファイルに埋め込まれて実行されるため、非常に簡単です!

データから始める

StaticData とそれを表示するためのテンプレートを含む、たった 6 行のコードから始めましょう:

<Template>
   <pre class="brush:php;toolbar:false">API DATA: {{ staticdata|json:2 }}

このスニペットには、非常にシンプルな 1 行の

そのスニペットを実行してみてください。 結果のデータが表示されますか? 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>&larr; 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>&larr; 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 コンポーネントを

JavaScript json css less html Array NULL if sort for while format try Filter auto using public private finally Attribute Property Event copy JS number function this display overflow margin padding github database https everything
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：API のスケーラビリティを向上させるためのヒント次の記事：API のスケーラビリティを向上させるためのヒント

関連記事

続きを見る