API ベースのゼルダ BOTW モンスターギャラリー Web コンポーネントを <lines (Modulo.js) で作成する方法を学習します。-jsチュートリアル-php.cn

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 コンポーネントを