こんにちは！
Web制作会社 アクトワン 代表 和田英也です！
今回は前回に引き続き、WixLearn 第2回の Coding with Velo: Frontend の9回のレッスンのうち、後編Lesson6～9のダイジェストです。
Wixには、フルスタックの開発プラットフォーム「Velo by Wix」が用意されていますが、習得のハードルはまだまだ低くないです。
Veloを学習する手段の一つとしてWixが公式に公開しているオンライン教材『Wix Learn』 があります。
熱意溢れるジョシュア氏のレッスンは Velo の理解を深めてくれます。
是非実際にご覧下さい。
全編英語ですが日本語字幕が付き、英文シナリオが掲載されていますので、じっくり時間を掛ければなんとか利用できます。
限られたリソースの中、Wix本家の有益な番組なのでご紹介いたします。
▼ 目次
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 でローカルストーレッジを使用して、初めてサイトにアクセスした訪問者にライトボックスを表示する方法を学習しましょう。
30％のプロモコードを提供するライトボックスを作り、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 には様々なツールがあります。
リリースマネジャーでテストサイトを作成しダッシュボードで公開サイトと公開率を分けることができます。
テストバージョンで十分なフィードバックが得られた場合にはテストバージョンを公開バージョンにすることができます。
モニタリングツールではダッシュボードでサイトイベントを確認できるものから、Googleやサードパーティサービスに接続してモニタリングをすることもできます。
Lesson9: Test and debug with browser tools(3:35)
前レッスンでは console.log( ) の確認をデベロッパーコンソールで行いました。
ブラウザー、例えばGoogleのコンソールでもこの確認は、プレビューモードでも公開サイトでも行えます。
簡単なconsole.log('Hello World')をonReady()に入れてプレビューすると、コンソールに「表示するメッセージはありません」と表示されることがありますが、これはコンソールの既定ビューがデバッグのみになっているからです。
「詳細」にチェックを入れるとコンソールに情報が表示され、「警告」にチェックを入れると警告があれば表示されます。
「エラー」も同様です。
WEBブラウザー、例えばGoogleのコンソールでもこの確認は行えます。
単純な「Hello World」コード、そして $w、さらにイベントハンドラを作成し、wix-storage、wix-window、wix-locationを使用しました。
その上でディベロッパーツールの使い方も学習しましたね。
これらを全て組み合わせ、全てのスキルを総動員することにより Velo by Wix を使った優れたフロントエンド体験を実現できるはずです。
復習や確認が必要な場合はフォーラムやドキュメント、API参照を確認することができます。
Wix Tech Salon
アクトワンではWixクリエイターを中心としたオンラインサロンを運営しております！
Wixの知識のシェアや、ビジネスの課題解決、メンバー同士の交流を目的にしています。 ご興味がある方はぜひ覗いてみてください!
Wix Tech Salon >>