Velo by Wix の入門書
読了時間：4分
基本機能
Velo by Wix をご利用いただきありがとうございます！ 下記は、Velo で高度なウェブアプリケーションを作成しようという皆さんをお手伝いするためのリソースとなっています。 学習のアプローチはひとそれぞれです。そのため、ここではさまざまな動画、記事、チュートリアルを組み合わせてまとめました。 各リソースでは、おおよその学習時間と学習内容の概要を表示しています。 最初に全体像を把握してから、細部に戻る場合は、先に全体的な内容の資料をご覧ください。
Velo でコーディングする
Velo by Wix の紹介（動画 1:17）
ここでは、Velo で Wix サイトに追加できる機能を簡単に紹介します。 実装方法を詳しく知る前に、Velo とは何だろうというレベルの扉を開きましょう。 この動画を見れば、次に何を学べばよいかがわかるでしょう。
Velo by Wix（記事約 5 分）
上の動画と同じく、こちらの記事でも、Velo のすべての機能の概要を説明します。 ここでは、一部、技術的な特徴内容を紹介するとともに、すべての学習リソースへのリンクを提供します。
"Hello World"：サイトにカスタムインタラクションを追加する（ビデオ 6:27、記事を含む）
Velo の API を使用すると、新しい方法でWixサイトを管理できます。 こちらのチュートリアルと動画では、さまざまなユーザー操作に、それぞれ異なった対応をするために、サイトにロジックを追加する方法を説明します。 このチュートリアルでは、さらにコードに着目して、以下のコントロールで作業します。
データベースを利用する
Wix データについて（記事約 5 分）
「Wix データ」はデータベース機能を Wix サイトに追加します。 データを Velo と組み合わせると、サイトをカスタマイズして、ユーザーと訪問者のニーズに応えることのできる、まさに個別対応の操作性を提供することができます。こちらの記事では、コレクションを作成して、あなたのサイト内の要素に接続し、動的ページを作成する方法を説明します。
データベースコレクションを設定する方法（動画 2:25）
こちらの動画では、データベースコレクションを作成し、設定する過程を説明します。 内容は、さまざまなデータ整理方法の解説と、データにアクセスできるユーザーを管理するためのアクセス権限モデルの紹介です。
ウェブサイトでユーザー生成コンテンツを収集して表示する方法（動画 4:01）
次のステップ
Velo API の概要（記事約 7 分）
Velo の API を利用すれば、サイトの機能性をフルに活かすことができます。 API を使用すると、ページ要素、サイトのデータベースコンテンツ、外部サービスとやりとりすることができます。 また、API を使用すると、あなたのサイトとそのユーザーなどに関する情報にアクセスできます。 こちらの記事では、すべての Velo API の概要とそれでできることを紹介します。
高度なコーティング "Hello World"（記事約 45 分～2 時間、 コーティングの習熟度によって異なります）
Velo の利点は、サイトの仕組みの内部に立ち入ってカスタム JavaScript をサイトに追加できることです。 つまり、Velo を利用すれば、Wix の持つパワーをフル活用することができます。 こちらのチュートリアルでは、「Hello World」を体験しながら、通貨換算機能を追加する過程について説明します。 チュートリアルでは、コードを中心に、以下の項目を紹介します。
- 「プロパティ」パネル
- 「コード」パネル
- $w.onReady 関数（ページの読み込み時にコードを実行）
- ドロップダウンをカスタマイズするコード
- getJSON() 関数（ネットワークから JSONリソース を取得）
Velo の全ての開発機能を試してみたい場合は、ここから始めてください。
コードパネルを操作する（記事約 10 分）
Velo におけるすべてのコーディング作業は「コード」パネルで実行します。したがって、その機能を十分に把握しておけばサイト作成時に役立ちます。 こちらの記事では以下の項目を紹介します。
- コードファイル
- プロパティ＆イベントパネル
- コードパネルツールバー
- Velo 構文と自動補完
- 参照する要素が読み込まれていることを確認する方法
- 要素の操作
- 警告とエラー
- メディアマネージャーの統合
- コードのテスト
- コードのバージョンの保存
動的アイテムページと索引ページを作成する方法（動画 7:55）
動的ページを使用すると、カスタム URL とそれぞれ固有のコンテンツがあれば 1 つのページレイアウトだけで必要な数だけページを作成できます。 たとえば、各レシピが同じレイアウトで、しかし個別の専用ページに表示されるレシピサイトを想像してみてください。 動的ページでは、1 つのレイアウトを作成し、そのページをデータベースコレクションに接続します。 サイトには、データに定義されている数だけのページが作成されます。 このように、サイト内に似たようなコンテンツがたくさんある場合は、動的ページの使用が欠かせません。
もっと詳しく知りたい
以上のリソースで基本機能を学んだ後は、高度な機能を説明するリソースが用意されています。 もちろん、こちらに記載されているリソースのすべてのリストは、いつでも閲覧・検索していただけます。
Velo サイドバーを利用する（記事約 6 分）
Velo サイドバーには、ページ、ライトボックス、フォルダー、ファイル、パッケージ、データベースコレクションなど、サイトを構成するすべてのファイルが表示されます。 詳しくはこちらをご覧ください。
プロパティ＆イベントパネルを利用する（記事約 3 分）
「プロパティ＆イベント」パネルでは、サイトの要素を Velo で簡単に操作できます。 ページそのもの、ヘッダーとフッター、データセットなど、サイト上の要素は、Velo で操作できます。
モバイルエディタを利用する（記事約 2 分）
Velo を有効にして、モバイルエディタでサイトを編集する場合、一部の機能はデスクトップエディタとは異なります。 詳しくはこちらをご覧ください。
JavaScript のサポート（記事約 3 分 30 秒）
この記事では、Velo がサポートする JavaScript 機能を説明します。
- Promise
- Arrow 関数
- 破壊的代入
- let 宣言と const 宣言
- async/await
- モジュールのサポート
Velo 例の索引
Wix では Velo を使用してサイトにカスタムソリューションを実装する方法を説明する例をたくさんご用意しております。 こちらでは、そのまま利用できる例や、自分のニーズに合わせて簡単に変更できる例を見つけることができます。 さまざまな例を調べてみると、Velo の独創的な利用方法が思い浮かぶかもしれません。
Velo 用語集
Velo velo-用語集には、Velo で使用するすべての用語が定義されています。 中には、Velo 固有の用語や、基本的なプログラミング概念も含まれています。
お役に立ちましたか？
|