Velo 第７７回 Wixルーターとは
動的ページではアイテム毎に prefix にぶら下がった異なる URL が与えられています。
そして同じデザインで異なるコンテンツを表示することが可能になっています。
しかし実際には同じページにURLでスイッチした異なるコンテンツを表示しているだけです。
この舞台裏で働いているのが Wixルーターという機能です。
prefix を経由する HTTPリクエストを読み取って相応しいページに移動したり、必要なデータをページに渡したりする機能です。
ルーター機能はコーディング可能になっています。
つまり prefix を経由する HTTPリクエストから必要なデータを受取って、自分なりのルーターロジックを組み立てて、自作の動的ページを作ることが出来ます。
ルーターの追加
先ずはルーターが機能するページ(ルーターページ)を追加する必要があります。
サイドバーにあるメインページの追加(⊕)メニューから「ルーターを追加」をクリックします。
「プレフィックス」の設定をここでは「MyRouter」にしておきます。
その上で「コードを追加・編集」ボタンをクリックします。
ルーターページ・セクションに「MyRouter-page」が、バックエンド・セクションに「routers.js」が作られ、routers.js にはサンプルコードも設定されています。
ここではサンプルコードのまま考察を進めて行きましょう。
wix-router モジュール
ルーターを機能させるモジュールは wix-router です。
サンプルではこのモジュールの関数の内、ok( )、notFound( )、WixSiteMapEntryオブジェクトがインポートされています。
サンプルデータ
４人分のデータが peopleData としてフルネーム(title)と画像(image)がオブジェクト化されています。
キーとして４人のファーストネーム Ash、Aiden、Jess、Morgan が登録されており、後述しますが、これが HTTPS の path としてリクエストに含まれたときに router( )関数が働くように設定しています。
router( ) 関数
関数名には書式が決まっていて、この関数は MyRouter_Router となります。ルーター関数は能動的に呼び出す関数ではなく、prefix(MyRouter)を経由するHTTPリクエストをルーターが受け取ったときに発動されるイベントハンドラです。例えばブラウザーのURLボックスから https : //…/MySite/MyRouter/Ash でページアクセスをすれば発動されます。
引数には HTTPリクエスト(request)が入ります。
リクエストには path という配列プロパティがあり、今の場合は Ash になります。２６行目ではそれを変数 name に入れています。
２９行目で Ash のデータを変数 data に入れています。
３４行目～４８行目でSEOデータを作り変数 seoData に入れています。
５１行目で ok( )関数を使ってルーターページ(MyRuoter-page)に変数 data、seoDataを渡しています。
５５行目はエラー処理で４０４エラーページを表示する指示を出しています。
ルーターページ(MyRouter-page)
ルーターページにはデータとしてフルネーム(title)と画像(image)が送られますので、それらを表示するテキスト(text1)と画像(image1)を設置しておきます。
getRouterData( ) 関数
ok( ) 関数でページに返されたデータは MyRouter-page のページコードで取得することが出来ます。
必要な API は getRouterData( ) 関数で、wix-windowモジュールに入っています。
ここではルーターページ(MyRouter-page)に名前と画像を表示するコーディングをしてみましょう。
１行目でモジュールをインポートしています。
５行目でok()関数で送ったデータ(peopleData)を変数 data に入れています。
６行目でフルネームを、７行目で画像をエレメントに割り当てています。
HTTPリクエストの発動
ホームページにドロップダウンを置き Ash、Aiden、Jess、Morgan が選択できるようにし、onChange( )イベントで to( ) 関数を利用して HTTPリクエストを発出するコーディングをしています。
実行結果
ホームページのドロップダウンで Ash を選択すると、onChange( )イベントが発動し、HTTPリクエスト https : //…/MySite/MyRouter/Ash が発出されます。
するとバックエンドで router( ) 関数 が発動し、Ash のデータをルーターページ(MyRouter-page)に送りページを表示します。
そしてページコードが起動して getRouterData( ) がAshのデータを獲得し、下図の様に、テキスト(text1)にフルネーム、画像(image1)に写真を表示します。
Velo開発のご依頼はこちら