# 【SvelteでRPGゲーム開発】Svelteコンポーネントを使ったHTML中の表示画面のフレキシブル対応 |p2>2023/02/18{1}「コンポーネントを作成する→ゲームステージに追加する→...繰り返し」{2}ユーザーが使っているどのブラウザからでもできるだけ同じように表示させる{1}"フレキシブル対応"

@@@% /tx[1]{説明} <%- RPG風マップでネコ(？)を動かすだけの実験プログラムです。画面下にあるコントローラーからの操作が有効になります。現状は十字キーで上下左右に動くのみです。 -%> - - - ## svelte:window要素のプロパティバインド一般的にブラウザは現在の表示状態に関連したいくつかの情報を裏側で保持しています。この情報を取得して別の処理に利用するにはJavascriptでの実装が不可欠です。 SvelteでDOM要素のサイズ調整をおこないたい場合、[要素](https://svelte.jp/docs#template-syntax-svelte-window)と呼ばれる特別なHTML要素の|px>{3}プロパティバインド{1}「横幅」 //...中略 //👇innerWidthを保持する変数 let innerWidth = 0; //👇拡大比率(=デフォルトの横幅480pxと現在の横幅の比率) let ratio = 1; //👇と、ついでにratioとinnerWidthをリアクティブ化して変化を監視・自動更新 $: ratio = innerWidth/480; //...中略 //...中略 //👇svelte:window要素にinnerWidthをバインド

//👇ゲームのメイン画面の要素にstyle属性からwidthとheightをリアルタイム修正

{#each _map as mapx} {#each mapx as mapxy} {/each} {/each}

//...中略

``` ここでのポイントとして、`svelte:window`要素から`innerWidth`をプロパティバインド(`bind:innerWidth`)して得たページの横幅から、描画に適切なコンポーネントの拡大比率(`ratio`)を計算し、その都度要素のstyle属性へ設定することでサイズを補正しています。ちなみにプロパティバインドするプロパティ名と変数名が一致するときには以下のような略記形が利用できます。 ```html Hoge.svelte //👇略記形 ``` 他のJSフレームワークと比較しても、Svelteならばスッキリとした実装テクニックになっている気がします。 - - - ## iframeを使う場合のフレキシブル対応の注意点必須ではありませんが、HTMLアプリを一般のブログのようなウェブサイトに埋め込む際には、|px>{1}iframe要素{1}「iframeの内部は現在のページの親要素(bodyやdivなど)のサイズは考慮せず、リンク先のウェブページのサイズ設定を反映してありのまま表示する」 ``` 理解のポイントは、|px>{2}iframe自体は制御可能でも、iframeの中は治外法権{2}iframeの中身の高さは外部の読み込み先のウェブページが決める{1}読み込み先のアプリの画面アスペクト比率{1}ユーザーフレンドリー