🚀

OpenAI APIで遊ぶのにWix Chatと Velo by Wixが意外に便利[予備知識編]

2023/07/03に公開

はじめに

OpenAI のAPIを使って、趣味や学習用に何かを作って共有したい。
しかし、本体とは別にChat UIの作成やインフラ構築が面倒、あるいは本体の実装に専念したい。
この場合よく見聞きする選択肢として、Google ColabやChat UIのライブラリ（Streamlitなど）があると思います。

無料ホームページ作成サービスWixのチャット機能（Wix Chat）も Velo by Wixという拡張機能を使うことで、簡単にOpenAI APIを組み込みチャットボットを作成することができます。

今回はその事例を紹介したかったのですが、WixやVeloがサーバーサイドエンジニアに馴染みのないサービス・技術であるため、まずは事前知識として WixやVelo by Wixについての説明記事を作成し、次回から本編を書くことにしました。

次回の記事と直接関連のない内容も含まれていますが、以下の前提知識がベースにないと説明しづらいため、少し回り道しますがお付き合いください。

Wixについて

Wixは日本でも知名度が高いサービスかとは思いますが、日本のサーバーサイドエンジニアは、なかなか接点がないサービスです。
そこで参考程度にChatGPTにまとめてもらった紹介文を掲載します。

Wixは、プログラミングの知識がなくても使えるウェブサイト作成プラットフォームです。
直感的なエディタと多数のテンプレートを提供し、ドラッグアンドドロップでウェブサイトを作成できます。
オンラインストアやマーケティングツールも備えています。
無料プランと有料プランがあります。
簡単に魅力的なウェブサイトを作りたい人に適しています。

実際は、制作会社やフリーランスの方に制作を依頼するケースも多く、情報発信はプロの方からの情報が多い印象です。
意外に規模の大きい企業の導入事例もあるようです。
実際の売上やユーザーの割合がどの程度かはわからないので、一概には言えませんが、丸投げするのではなく、専門の要員が不在、または不足しているが、内製化を指向する企業・個人に多く採用されている印象です。

Velo by Wixについて

同様に Velo についても ChatGPTに軽くまとめてもらいました。

Velo by Wixは、Wixが提供する開発プラットフォームで、より高度なウェブアプリケーションの開発を可能にします。
Veloを使用すると、JavaScriptを使って独自のカスタム機能や動的なウェブサイトを作成することができます。
プログラミングの知識があるユーザーや開発者に向けたサービスです。

こちらについては、言葉で説明するより、後述する実装を見ていただいた方が簡潔かつ平易なので言及を省きます。
ただ、このサービス内容で、ここまで自由な拡張を実現していることに驚くとともに、エンジニアとして技術的にかなり興味を惹かれました。
Veloは、日本語での情報や事例がほぼないので、ハードルが高く、少し癖もあります。
初め違和感を感じたり、戸惑うことも多いですが、少し慣れると、こなれた実装（変に最新かつ高度な技術を強いるわけでも、かといってレガシー化しているわけでもない）に魅力を感じる人も多いのではないでしょうか。

開発準備

本編は基本ブラウザ作業なので開発環境の構築は不要です。

ただし、以下だけ事前にご準備ください。本記事で詳細な解説は省きますが、もし迷ったり、疑問点がありましたら、有益な先行事例が多数あるのでネットで検索してみてください。

OpenAIの APIキー
特別言及するべきことではないかもしれませんが、作成した機能は、不特定多数の人がアクセス可能な状態になります。別途キーを発行し、使用量の制限をかけることをお勧めします。
（自分で宣伝でもしなければ、外部導線などないわけですが）
Wixでのサイト構築
https://ja.wix.com/
無料登録をして、画面の指示に従って、お好みのサイトを作ってください。
今回はチャット機能しか使わないので、必要最低限の機能で、タイトルやデザインについては、あまり深く考えずに作ってしまいましょう。

確認

上記のSTEPが終わったら、以下が可能であることを確認してください。

サイトが公開されている（外部からアクセスできる）
サイト作成直後は未公開状態なので、公開処理をしましょう。
例えば https://[あなたのID].wixsite.com/[任意のpath]
のようなURLでアクセス可能かご確認ください。

※上記のように非公開の場合は「サイト編集」or「サイトデザイン」ボタンを押して、遷移先のサイトエディタ画面で「公開ボタン」を押してください。

※ サイトエディタ画面右上メニューの「公開」ボタン

Chat機能が有効になっている
すでにご紹介したスクショのような画面から、チャット入力ができることをご確認ください。
公開サイトにてチャット機能が使えない場合、App Marketからの追加も試してみてください。
以下は管理画面（ダッシュボード）側からアプリを検索・追加する例になります。

※サイドメニュー「アプリ」→「App Market」で出てくる検索メニューで"chat"などで検索

開発モードを有効にする

Veloは高度な設定という扱いなので、いきなり利用することはできません。
サイトダッシュボードからサイトエディタに遷移して、「開発モードを有効にする」のボタンを押してください。

※サイドメニュー「サイト概要」→「ウェブサイト」で出てくるページ内の「サイト編集」or「サイトデザイン」をクリック。

※遷移先のサイトエディタ画面上部ヘッダーの「開発モード」をクリックして出てくるメニューから「開発モードを有効にする」をクリック

最終的にサイトエディタは以下のようになっているかと思います。

さっと機能を紹介すると
以下のメニューは

上から順番に

ページコード・・・現在開いているページに関するコードで、今回触るのは「ホーム」ファイルです。
公開・バックエンド・・・上記ページから呼び出す共通コードで、公開がフロントです。バックエンドがサーバーサイドです。
コードを検索
コードパッケージ・・・npm パッケージをinstallできますがWix側が承認したものだけで必ずしも最新パッケージではありません。
データベース・・・今回は扱いませんが簡単なデータベースが使えます。
デベロッパツール・・・開発、運用時に使うツールがあります。
ヘルプ・・・ APIリファレンスはかなり活用する必要が出てきます。

となっています。

なお、「ページコード」や「公開・バックエンド」で選択したファイルは画面下部の以下の画面で修正できます。

※ コメントなしで日本語が書かれているのは直して欲しいですね。。。

Velo（フロント）の練習（パーツ作成）

少し肩慣らしとして、フロント要素をVeloで動かしてみましょう。

テキストフィールドとボタンを作成し、ボタンを押すとテキストフィールドに入力した文字列を画面に表示させる例を作ります。

特に作業していなければ、現在開いているサイトエディタではデフォルトの「ホーム」画面が選択されていると思います。

このページを編集して以下のスクリーンショットのように要素を追加していきます。

画面左から２番目or３番目のメニューから「パーツの追加」を選びます。
以下のスクショの「+」マークのアイコンです。

「パーツの追加」→「入力欄」→「テキスト入力」を選択するといくつか候補があるので、好きなものを「ホーム」画面内ドロップしてください。ドロップ場所はどこでも良いのですが、なんでも良いので既存の要素を削除して余白を作ると後の作業がやりやすいと思います。

同様にボタン、テキストを追加します。練習なので見た目は気にしないでください。

入力欄、ボタン、テキストそれぞれの要素を選択すると画面右下が以下のように切り替わります。
IDはこの後の作業で使うので覚えておいてください。

Velo（フロント）の練習（作成したパーツの操作）

次に、画面要素をプログラムで操作します。
※Wix独自のjQueryのようなフレームワークです。

画面下のエディターにて「ホーム」をアクティブにしてコードを編集します。
オートコンプリートや、右クリックでフォーマットができるのが便利です。

onReadyについてはエンジニアの方には説明不要かと思いますが、一旦以下のコメントのように覚えておいてください。

$w.onReady(function () {
  // ページ内の要素のローディングが完了するまで実行されない。
});

テキストフィールドから入力文字列を取得

※$w("#ID名")で要素を指定し、そのvalueを取得しています。
※右クリックでformatできるのは嬉しいですね。
同様に、ボタン要素を取得し、onClickイベントを定義
onClick内ではボタンを押した時点の入力欄の文字列を取得し、テキストを上書きます。

$w.onReady(function () {
    $w('#button4').onClick(() => {
    	const input = $w("#input7").value
        $w("#text28").text = input
    })
});

テストする時はソースコード編集欄の右側の「実行」

コード「保存」も忘れにしましょう。サイトに反映させるには「公開」を押します。ウィンドウ右上部にボタンがあります。

Velo（バックエンド）の練習

続いてVeloのバックエンドの肩慣らしです。

バックエンドは左側メニューの「公開・バックエンド」→ バックエンドの右横のプラスマークから「新規Webモジュール」で作成できます。
今回は「chatModule.jsw」という名前にしてみました。

先ほど説明したフロントエンドが、ReactやVueで実装するような部分を担っているとすると、バックエンドは名前の通り、Node.js(Express)のような役割を担っています。同じ画面で編集できますが、混同しないように気をつけましょう。特にAPIキーや、個人情報を扱う処理を不用意にフロントエンドに書かないように気をつけたいです。

バックエンド（ウェブモジュール）はファイルを新規作成すると

コメント（説明）
コメント（フロントからバックエンドを呼び出すサンプルコード）
バックエンド関数のサンプル
が記載されています。

コメント部分から説明します。

/*********
 .jsw file
 *********

 Backend .jsw files contain functions that run on the server side but can be called from page code and frontend files.
 Use backend functions to keep code private and hidden from a user's browser. More info:

 https://support.wix.com/en/article/velo-web-modules-calling-backend-code-from-the-frontend

上記をChatGPTで翻訳すると

バックエンドの .jsw ファイルには、サーバーサイドで実行される関数が含まれていますが、ページのコードやフロントエンドのファイルから呼び出すことができます。
バックエンドの関数を使用すると、コードをユーザーのブラウザから非公開かつ隠蔽することができます。

とあります。裏返せばバックエンドと異なり、フロントエンドは外部に晒されている部分である点に注意が必要です。当たり前のことですが、

残りの部分に

Call the sample multiply function below 
by copying the following into your page code:

import { multiply } from 'backend/multiplication';

$w.onReady(function () {
    multiply(4, 5).then(product => {
        console.log(product);
    })
    .catch(error => {
        console.log(error);
    });
});

「以下のサンプルの乗算関数を呼び出すには、次のコードをページ（フロントエンド）のコードにコピーしてください」と書いてあります。

指示通りサンプルコードをそのまま貼り付けてもいいのですが、せっかく先ほどフロントエンドのコードを書いたので、そちらに以下のコードを修正して組み込んでしまいましょう。

ボタンを押したら、 multiply関数が実行され、結果がテキスト部分に表示されるようにします。

まず先に上記のコメント部分を全て消して
chatModule.jsw の内容を以下だけにします。

export function multiply(factor1, factor2) {
   return factor1 * factor2;
}

続けてフロントエンド部分「ホーム」のコード冒頭に以下の１行を書きます。

import { multiply } from 'backend/chatModule';

ファイル名がサンプルと異なり chatModuleなので from以下の部分が異なります。

続けて、ボタンを押したらバックエンドの multiply関数が実行され、結果がテキストで画面に表示されるように変更します。
計算結果はそのままでは文字として表示できないので、toString()で文字列に変換しています。

$w.onReady(function () {
    $w('#button4').onClick(() => {
        multiply(4, 5).then(product => {
                //const input = $w("#input7").value
                $w("#text28").text = product.toString()
            })
            .catch(error => {
                console.log(error);
            });

    })
});

無理やり組み込んだのでかえってわかりにくくなった部分もあるかもしれませんが。。。
上記が簡単なバックエンドの作成例とフロントエンドでのバックエンド処理の使用例になります。
余裕がある方は入力欄を２つ作って、その値をmultiplyの引数に渡して簡易電卓にしてみてください。

入力欄は右クリック「設定」から「タイプ」の変更ができるので「数値」に変更すると良いでしょう。

説明が少し込み入ったので、参考程度にエディッタのコード編集部分のスクショを載せておきます。

フロントエンド（ホーム）
バックエンド（chatModule.jsw)

なお、バックエンドで作成した関数はフロントエンドから呼び出さなくても直接テストすることができます。

ChatModule.jsw の関数名と行数の左横の三角印をクリックします。

タグが切り替わり、左側にテスト用のパラメタを書き換える欄、左側に実行結果がログとして表示されます。
実行を押してテストを試してみてください。

今回のまとめと次回について

今回は

Wixで利用する機能についての概要
実装の準備と設定
簡単なVeloのフロントエンドコードのサンプル
簡単なVeloのバックエンドコードのサンプル
について書きました。

次回は

WixChat送信メッセージの取得
WixChatメッセージ送信
OpenAI APIのサンプルコード
について書く予定です。

最終的に、WixChatからOpenAIのLLMに質問し返信がもらえるところまで書ければと思います。

参考文献

Start coding with Velo
英語の資料＋動画になりますが、動画に吹き出しがあるのでさほど負担はないと思います。是非一度見てみてください。久しぶりにサイトを訪れたら、一時的な現象かもしれませんが、一部ボタンがChromeで反応しない現象がありました。同じ現象に遭遇した方はSafariなど別のブラウザを試してみてください。

埋め込みだとみづらいので、別途Youtubeで動画は開いた方が良いかと思います。
Youtube動画はこちらから辿ってください。