Velo 第４０回 Wix Learn (Coding with Velo: Frontend [後半])
WixLearn 第２回 Coding with Velo: Frontend の後半のダイジェストです。
記事の前半はこちら ↓
lesson6: Use Wix Window API(10:26)
今回は wixWindow API を使って、ページ上のフォーム入力で得たデータをライトボックスに渡すイベントハンドラーを作る。
ページに入力欄を２つ置き、ID を nameInput、planetInput とする。同時にボタンを１つ置き、ID をsubmitButton とする。一方、ライトボックスを１つ作り、ID を Popup とする。
２つの入力欄に入力したデータを、ボタンのクリックでライトボックスに渡して表示するイベントハンドラーをコーディングする。ライトボックスには仕様上、オブジェクトで渡す必要があることに注意する。
冒頭で wixWindow をインポートしておく。ボタンに動的イベントハンドラー onClick( ) を設定する。入力欄から得たデータを変数 dataObj にオブジェクト化する。
dataObj を wixWindowAPI を使ってライトボックスに 渡す。
ライトボックスに２つのテキストを置き、ID を nameObj、planetObj とする。
nameObj は Name の部分で宇宙飛行士の名前、planetObj は planet name の部分で惑星の名前である。dataObj で送られたデータをこの２カ所に表示する。
ライトボックス(Popup) のonReady( ) 関数に dataObj のプロパティを取得し各要素のテキストプロパティへ値を代入するコールバックを設定する。
プレビューして、入力欄に名前をJoshua、惑星名をEarthとし、ボタンを押すとライトボックスに「Welcome Josha … planet: Earth」と表示される。
この方法は様々な場面、例えばショップの精算、コンサートチケット販売などに活用でき、クリエイティブな使い方が期待できる。
この様に、Velo API を使うことでサイトを一層強化することができる。
lesson7: Use Wix Storage API(06:06)
レッスンを一歩進めて、wix-storage API でローカルストーレッジを使用して、初めてサイトにアクセスした訪問者にライトボックスを表示する方法を学習する。
３０％のプロモコードを提供するライトボックスを作り、ID を FirstTime とする。
ライトボックスを開くための onReady( ) 関数を masterPage.js で使い、サイト全体で機能するようにする。今回の例の様に、masterPage.js は初回アクセス時のウィンドウ表示や、ヘッダー内、フッター内の関数の処理に使われる。
masterPage.js の冒頭に、wix-storage API の session、wixWindow APIをインポートする。
session データはブラウザーセッションのデータを保つストーレッジで、サイト訪問者がアクセスしているかどうかを判断するために使用する。wixWindow API はライトボックスを開くために使用する。
条件文を onReady( ) 関数内に作る。session を指定して getItem( )を取得し、初回を示すプロパティ名 'ForTheFirstTime' が無ければ、ライトボックスを表示し、setItem( ) で プロパティ 'ForTheFirstTime' を作り、値 'yes' を設定する。
保存して公開するとライトボックスが表示される。
最下行にプロモコードが提供されている。今回は静的にデータを与えているが動的化することも可能である。
ここで紹介した以外にも使用できるフロントエンド API が多数用意されている。Wix ストアや WIx イベント、ブッキングなど様々な分野で利用できるAPI が用意されている。
しかしフロントエンドの処理で最も重要だと私が思うのは storage と location そして wix-windowである。このコースではこれらすべてを学習してきた。
lesson8: Test and debug with Velo tools(5:54)
Velo で利用できるツールセットを学習する。
最初はディベロッパーコンソールから始める。
ディベロッパーコンソールはコンソールにどのような応答があるかでコードのチェックができる。未定義のものはないか、エラーの有無を確認できる。コードのテスト結果は console.log( ) で確認できる。
注意すべき点はサンドボックス版も含め、データベースのデータを検索してもデータが見つからず応答が返らないことがあることだ。
従って結果を確認する場合は公開版で実行する必要がある。
簡単なテストを作成する。
onReady( ) の中でシンプルなconsole.log('Hello Velo')を作るとコンソールに表示され、実行元のページも分かる。
Velo Tools には様々なツールがある。
リリースマネジャーでテストサイトを作成しダッシュボードで公開サイトと公開率を分けることができる。テストバージョンで十分なフィードバックが得られた場合にはテストバージョンを公開バージョンにすることができる。
モニタリングツールではダッシュボードでサイトイベントを確認できるものから、グーグルやサードパーティサービスに接続してモニタリングをすることもできる。
lesson9: Test and debug with browser tools(3:35)
前レッスンでは console.log( ) の確認をデベロッパーコンソールで行った。ブラウザー、例えばグーグルのコンソールでもこの確認は、プレビューモードでも公開サイトでも行える。
簡単なconsole.log('Hello World')をonReady()に入れてプレビューすると、コンソールに「表示するメッセージはありません」と表示されることがあるが、これはコンソールの既定ビューがデバッグのみになっているからである。
「詳細」にチェックを入れるとコンソールに情報が表示され、「警告」にチェックを入れると警告があれば表示される。「エラー」も同様である。
WEBブラウザー、例えばグーグルのコンソールでもこの確認は行える。
単純な「Hello World」コード、そして $w、さらにイベントハンドラーを作成し、wix-storage、wix-window、wix-locationを使用した。その上でデベロッパーツールの使い方も学習した。
これらを全て組み合わせ、全てのスキルを総動員することにより Velo by Wix を使った優れたフロントエンド体験を実現できるはずである。
復習や確認が必要な場合はフォーラムやドキュメント、API参照を確認することができる。
Velo開発のご依頼はこちら
この記事が気に入ったらサポートをしてみませんか？