top of page

Velo の学び方②

更新日:11月14日

前回の記事


Wix専門のWeb制作会社、合同会社アクトワンのVelo開発部です!


Wix はノーコードを売りにしている、ホームページやWebサイトを構築できるクラウドベースのCMSですので、サイト構築のハードルはそれほど高くありません。


いつの日か、AIツールも発達し、取説程度の設定でノーコードでのサイト構築ができる日が来ると思いますが、現状ではそうなっていません。


また、Wixのサイトにおいてノーコードで用意されていない機能は「Velo」という開発プラットフォームでコーディングによる開発をする必要があります。


Velo は日本語の資料が少なく、その分、学習のハードルは高いと思います。

英語で勇気をくじかれている方も多いと察しますがいかがでしょうか?



Wix Learn を見よう!

Wixでは教育用ビデオライブラリーが用意してあります。


もちろん英語ですので敷居を高く感じるかもしれません。


しかし日本語字幕が付いていますので安心して下さい。



Wix Learn
Wix Learn

また英文の台本もついていますのでじっくり調べたいときにはこの台本を活用することもできます。


英文の台本
英文の台本

初めて Velo に挑戦するときは 「Start Coding With Velo」、少し慣れてきたら「Coding With Velo: Frontend」など、学習段階や目的に合わせて視聴すると効果的です。


いきなりバックエンドの話を視聴するとか、全部通しで視聴するとか、チャレンジの仕方は人それぞれですが、かかる時間の割には効果はない様に思います。


Examples を見よう!

分からないときは真似をするのが基本です。


真似ることで学習の方法と内容を身に着けることが出来ます。


下図の様に Velo サイトには Documentationメニューがあって有益な情報が満載されています。


先程の Wix Learn もこのメニューに収められています。


そして最下段の Examples には実際のサイトとそのコーディング例が載っています。



Velo By Wix のページ
Velo By Wix のページ

例えば Hello Data という Example を選んでみると、下図のように実際のページの例が現れ、Edit Now ボタンをクリックすると自分のアカウントにサイトを構成してくれます。


Velo By Wix のページ➁
Velo By Wix のページ➁

また、このサイトの説明、コーディング等々も示してくれます。


サイトの説明
サイトの説明
コーディング例
コーディング例

まさに解答集のような感じです。


ただし全文英文ですので、ある程度 Velo に慣れてコーディングの勘所が分かってからの利用が適当かと思います。

業務でVeloを使うような場合にはもってこいの例文集となります。


ここに掲載されているコードやオブジェクトをAPIレファレンスやJavascriptの教科書で調べることで、コーディング力もモリモリ付いてきます。

上の図でも冒頭に import文、WixDataモジュール、$w.onReady( )ページ初期化関数、async/await演算子、WixDataクエリー等、Velo の核となる構文が満載です。


AIを使ってみる?

この世界、とても便利になっています。使わない手はないですね。

次のようなお願いをしてみました。


$w('#myText') に $w('#inputText') から入力した値を表示し、その値をコレクション $w('#myCollection') のフィールド name に保存する Veloコードを書いて欲しい。

するとあっという間に以下の様に意図した回答をしてくれました。

ご丁寧に送信ボタンまでつけてくれています。


import wixData from 'wix-data';



$w.onReady(function () { // ボタンがクリックされたときのイベントハンドラ 

  $w('#submitButton').onClick(() => { // 入力された値を取得 



    const inputValue = $w('#inputText').value;



    // 取得した値を#myTextに表示

    $w('#myText').text =  inputValue;



    // コレクションに保存するデータオブジェクトを作成

        const toSave = {

            name: inputValue

        };



        // コレクションにデータを保存

        wixData.save('myCollection', toSave)

            .then((result) => {

                console.log('データが保存されました:', result);

            })

            .catch((err) => {

                console.error('データの保存に失敗しました:', err);

            });

    });

});

このようにAIは使い物になります。


ただし、「これで正しい」と判断できるから便利と思えますし、安心して使うこともできます。

そうでなかったら随分危険だとも思います。


そしてこれを繰り返すだけなら何ら学習にはなりません。

AIは答え合わせの一つと思って学習を進めれば力が付くこと間違いなしです。


ヘルプセンターを利用しよう!

Velo を知るには Wix を知ろうと言うことです。Wixについてはヘルプセンターから問い合わせることが出来ます。


ダッシュボードからもHELPメニューがあり同じく利用できます。


本来英語版ですが、幸い日本語版も用意されています。



ヘルプセンター
ヘルプセンター

前回の記事


閲覧数:3回

関連記事

すべて表示

Comentários


bottom of page