こんにちは！
Web制作会社 アクトワン 代表 和田英也です！
Wixには、フルスタックの開発プラットフォーム「Velo by Wix」が用意されていますが、習得のハードルはまだまだ低くないです。
Veloを学習する手段の一つとしてWixが公式に公開しているオンライン教材『Wix Learn』 があります。
アドボケーターのジョシュア氏が6つの初心者向け講座を担当しています。
全編英語ですが日本語字幕が付き、英文シナリオが掲載されていますので、じっくり時間を掛ければなんとか利用できます。
限られたリソースの中、Wix本家の有益な番組なので、6つのレッスンをダイジェストで紹介します。
▼ 目次
Lesson1: About Velo(05:56)
エディタメニューの「開発モード」をオンにすると、コードパネル、プロパティパネル、サイドバーが現れてコーディングが開始できます。
サイドバーにはページコード、公開・バックエンド、コードの検索、データベース、ディベロッパーツール、ヘルプの機能があります。
Lesson2: Work with page elements(07:02)
$w( ) 関数の引数にページ要素のIDを指定するとページ要素のコーディングができます。
ページ要素を選んで機能をコードで動的に追加することがコーディングの基本であり、またこのレッスンの目的でもあります。
onReady( ) 関数はページ初期化時のイベントホルダーです。
コールバックは、宇宙飛行士を浮遊させるアニメーションやウェルカムメッセージを非表示にすること、「Read More」ボタンにクリックイベントを実装して追加テキストの表示をさせることとします。
Lesson3: Get your page ready(11:48)
コーディングの前にページデザインが整っているかを確認します。
onReady( ) 関数のコールバックは、サイト訪問時刻を表示し、「分」の偶奇で異なるテキストを表示する関数とする。その際、onReady( ) のスコープ外で関数を宣言し、スコープ内で呼び出す方法を使います。
エディタのコード補完機能、フォーマット機能、スコープ表示機能や JS のDate( ) コンストラクター、toLocaleString( ) 関数、% 演算子、？：条件演算子を紹介します。
Lesson4: Respond to element-based events(10:54)
ページ要素にイベントハンドラを設定します。
「Read More」ボタンをページに追加し、クリックするとページに追加テキストを表示するようにイベントハンドラを作成します。
onClick、onDblCkickはマウスクリックやダブルクリックで、onMouseIn、onMouseOut はマウスカーソルを合わせたり外したりすることで、viewPortEnter、viewPortLeaveは特定の空間に出入りすることで発出するイベントハンドラです。
デフォルトで非表示に設定した追加テキストを、onReady( ) コールバックの中で「Read Me」ボタンにイベントハンドラを動的に付加し、追加テキストを表示させます。
こうした仕掛けを作るにはユーザーの目線でサイトを構築する心がけが必要です。 このボタンを押せばどうなるか、この要素に触れると何が起こるか、これらを総合的に考えながらサイトを作る必要があります。
Velo by Wix を使えば、事前に考えた効果をエレメントをページにドラッグ＆ドロップしコーディングで確かめながら作業を進めることができます。
Lesson5: API reference(12:41)
API 参照はサイドバーのヘルプから直接呼び出すことができる API のメインリソースです。
大量のコードやサンプルが用意されていてコピー＆ペーストで利用することができます。
今回の説明に使う Wix Editor Elements($w) はページ要素のセレクターで、ページ要素の選択やその機能の追加に使います。
API 参照にはそのテーマごとに概要ページがあり、当該セクションの追加情報が記載されています。
またコピー＆ペーストができる様々なコード例が示されています。
関数の説明、構文、パラメーター等、様々なものが用意されています。
レッスンではスライドショー要素を使っているのでこれを API 参照で確認する。
Slideshow にはいくつかの関数とプロパティがあり、概要にも目を通しておきます。
最初の関数 currenIndex についての説明を見ると、インデックスは 0 から始まっています。changeSlide( ) はインデックスを引数にしてスライドを変更する関数で戻り値はプロミスになっています。
ここではボタンを押したときにスライドが切り替わるようにしたいので、サンプルコードをコピー＆ペーストし、IDなどを変えて利用します。
API 参照をこのように使うことで、開発者の便利なツールとなる。私にとってAPI 参照はホームページを作成する際に欠かせない存在である。
Lesson6: Get a glimpse beyond $w(12:42)
$w 以外にも様々なAPIがあるので、このレッスンでは wix-window-frontendについて詳しく学習します。
API参照に戻ると、wix-window-frontend には豊富な API が用意されています。
$w とは異なりこの API を使うためにはインポートをする必要があります。
ここで取り上げる関数は copyToClipboard( ) で、サイト訪問者のクリップボードにテキストをコピーできるようにします。
API 参照のサンプルコードの中身は以下のようになっています。
import wixWindowFrontend from 'wix-window-frontend';
// ...
wixWindowFrontend.copyToClipboard("Text to copy!")
.then( () => {
// handle case where text was copied
} )
.catch( (err) => {
// handle case where an error occurred
} );クリップボードにコピーした後は .then( ) を使ってプロミスを返しています。
またエラーにも対応しています。
コーディングでは import 文は冒頭に置きます。
ページ要素ではコピーする内容が分かるようにプロモーションコードを表示するテキストと、コピー用のボタンを作っておきます。
onReady( ) 内でこのボタンにイベントハンドラーを 作成するために、copyToClipboard( ) を実行し、ボタンのラベルを「Copied」に変える関数を宣言しておきます。
プレビューしてプロモーションコードがコピーされ、ユーザーが割引価格で受講できるようになっていることを確認します。
Wixストア、Wixブッキング、Wixイベントなど、多くのアプリにAPIは組み込まれています。
他にもアニメーション、HTTP機能など便利なものが多くあります。
API 参照には Wix で使用できる全ての API に関する様々な詳細情報が豊富に掲載されています。
Wix Tech Salon
アクトワンではWixクリエイターを中心としたオンラインサロンを運営しております！
Wixの知識のシェアや、ビジネスの課題解決、メンバー同士の交流を目的にしています。 ご興味がある方はぜひ覗いてみてください!
Wix Tech Salon >>