top of page

APIの基本概念とWix studio Veloの活用方法 - 基礎　Understanding APIs and Utilizing Wix Velo for SEO Optimization

API（Application Programming Interface）は、ソフトウェア同士が情報や機能をやり取りするための「窓口」のようなものです。これにより、異なるアプリケーション間での連携や機能の統合がスムーズに行えます。


APIの基本概念

APIは、以下のような役割を果たします：

  • 機能の再利用: 既存のソフトウェアの機能を他のアプリケーションから利用できます。

  • データの共有: 異なるシステム間でデータを交換する際の橋渡しとなります。

  • サービスの統合: 複数のサービスを組み合わせて新たな機能を提供できます。

例えば、ウェブサイトに地図を表示する際、Google MapsのAPIを利用することで、地図機能を一から開発することなく組み込むことができます。


APIのイメージ図
APIのイメージ図



Velo（以前は Corvid by Wix と呼ばれていました）は、Wix.com が提供するウェブ開発プラットフォームです。Wix を利用してウェブサイトを構築する際に、コードを使った高度なカスタマイズやアプリケーションの開発を可能にするツールです。初心者にも使いやすいビジュアルエディタと、エキスパート向けのコーディング環境を組み合わせた柔軟なプラットフォームです。


Veloの主な特徴

  1. フルスタック開発環境Velo は、クライアントサイド（フロントエンド）とサーバーサイド（バックエンド）の両方の開発をサポートします。

    • クライアントサイドでは、Wix エディタを通じてデザインをカスタマイズできます。

    • サーバーサイドでは、JavaScript を使用して独自のビジネスロジックを実装可能です。

  2. データ管理

    • Wix Data: 簡単にデータベースを作成・管理でき、フロントエンドからクエリを実行して動的コンテンツを表示できます。

    • データベース操作は、コードまたはビジュアルインターフェイスから行えます。

  3. APIの利用と統合

    • 外部API連携: Veloを使うと、外部APIと統合してデータを取得・送信することが可能です。

    • REST APIやHTTPリクエストをサポートしているので、他のサービスやツールとの連携が簡単に行えます。

  4. Wix内API

    • Velo には、Wix サイトの特定の機能を拡張できる組み込みAPIが用意されています。たとえば、フォームの送信処理、ユーザー認証、SEO 設定などをカスタマイズできます。

  5. 統合されたIDE

    • Veloには、ブラウザ上で動作する統合開発環境 (IDE) があり、直接JavaScriptのコードを書いてサイトの挙動を制御できます。


Veloを使う場面

  1. 動的ウェブサイトの構築

    • 動的データ（例：ブログ記事、製品リスト、イベント情報など）を表示するウェブサイトを簡単に作成できます。

  2. 高度なカスタマイズ

    • 通常のWixエディタではできない複雑なカスタマイズを、コードを使って実装できます。

  3. API連携による拡張機能

    • サードパーティサービス（Google Maps、PayPal、RESTful APIなど）を利用して機能を拡張できます。

  4. eコマースやメンバーシップサイト

    • カスタムデータベースや会員機能を活用して、複雑なサイトを構築可能です。


Veloを学ぶためのリソース

  1. 公式ドキュメントVelo Documentation: 機能、APIリファレンス、チュートリアルが充実しています。

  2. Wix LearnVeloやWixの使用方法を段階的に学べる無料のオンラインリソースです。

  3. 開発者フォーラムVeloに関する疑問やトラブルシューティングを他の開発者と共有できます。


Wix StudioでVeloを利用




Wix StudioでVeloを使用する手順


1. Wix Studioのセットアップ

  1. アカウントの作成・ログインWix Studioにアクセスし、アカウントを作成するか、既存のアカウントでログインします。

  2. 新しいプロジェクトを作成ダッシュボードから「新しいサイトを作成」をクリックし、テンプレートを選択するか、空のキャンバスで開始します。


2. Veloを有効化

  1. Veloモードを有効にするWixエディタの右上メニューから「Velo（旧称: Corvid）」を有効化します。これにより、コードエディタや開発機能が使用可能になります。

  2. 開発者ツールの表示サイトエディタの右側に表示される「コードエディタ」をクリックして、Veloの開発環境を起動します。




3. 基本機能の実装

動的データ管理

  1. データコレクションの作成「データ」セクションから新しいデータベースを作成します。例として、「製品リスト」や「ブログ記事」などのコレクションを作成可能です。

  2. データとコンテンツを結びつける動的ページやリピーターを作成し、データコレクションをバインドします。




ree


コードの記述とデバッグ

  1. コードエディタの利用: 開発モードを有効にすると、エディタ内でJavaScriptコードを直接記述できます。例えば、ページが読み込まれたときに特定の処理を実行するには、$w.onReady(function () { ... }); 内にコードを記述します。

    Qiita


  2. デバッグ: コードの動作を確認するために、エディタ内のプレビューモードを活用します。また、コンソールログを使用して、コードの実行状況や変数の値を確認できます。


外部APIとの連携

  1. 外部APIの利用: Veloを使用すると、外部のAPIと連携してデータを取得・送信できます。例えば、fetch 関数を使用して外部のデータを取得し、サイト内で表示することが可能です。

  2. セキュリティの考慮: 外部APIを利用する際は、APIキーの管理やデータの取り扱いに注意し、適切なセキュリティ対策を講じてください。


ree

ree


WixのVeloで提供されている「SEO Structured Data for Products」パッケージに関する説明です。このパッケージは、schema.orgの要件に基づいて、サイト内の製品に関する構造化データを生成します。これにより、Googleが製品ページをリッチ検索結果として表示できるようになります。


主なポイント:

  • 構造化データの生成: このパッケージは、製品ページの<head>セクションに挿入する構造化データを生成し、検索エンジンが製品情報を正確に理解できるよう支援します。

  • 必要な情報の入力: サイトのダッシュボードで、ビジネス名、連絡用メール、通貨などの必須情報を入力し、製品コレクションにタイトル、説明、SKU、画像、価格、価格有効期限などのフィールドを設定する必要があります。

  • 動的製品ページの設定: 製品データを表示する動的ページを作成し、提供されたコードをページに追加することで、各製品ページに適切な構造化データを挿入できます。

  • 設定ファイルの構成: config.jsファイルで、追加のラベルや著者名などのオプション設定を行うことができます。

このパッケージを正しく設定することで、製品ページが検索エンジンのリッチ検索結果に表示されやすくなり、SEO効果を高めることが期待できます。


詳細な手順やコード例については、以下のWixの公式ドキュメントを参照してください。




協賛者の方々のSEO順位を向上させるために、Wixの「SEO Structured Data for Products」パッケージを活用し、あなたが作成したウェブサイトを「商品」として構造化データを設定する方法をご提案いたします。


手順:

  1. サイト情報の設定:

    • ビジネス名: 協賛者のビジネス名を入力します。

    • 連絡用メール: 協賛者の連絡先メールアドレスを入力します。

    • 通貨: 取引に使用する通貨を設定します。


  2. 製品コレクションの準備:

    • 協賛者のウェブサイトを「商品」として扱うため、製品コレクションに以下のフィールドを追加・確認します:

      • タイトル (title): ウェブサイトの名称

      • 説明 (description): ウェブサイトの概要や特徴

      • SKU (sku): 一意の識別子（例: 協賛者名など）

      • 画像 (images): ウェブサイトのスクリーンショットやロゴ

      • 価格 (price): ウェブサイト制作の費用や価値（任意）

      • 価格有効期限 (priceValidUntil): 価格の有効期限（任意）





また、データセットの活用方法についてのビデオチュートリアルも参考になります。



上記を参考にまた時間を見つけて開発したいと思います！


まとめ

  • APIはサービス間をつなぐ「窓口」。

  • Velo by Wixを使えば高度なウェブ開発が可能。

  • SEO Structured Data for Productsで協賛者サイトのSEO順位を向上させ、リッチ検索結果に表示させる。




Understanding APIs and Utilizing Wix Velo for SEO Optimization

What is an API?

An API (Application Programming Interface) serves as a "bridge" or "gateway" that allows different software systems to exchange data and functionalities. This integration makes it easy for various applications to work together and build enhanced services.

Core Concepts of APIs

  1. Reusing Functions: APIs allow existing software features to be utilized by other applications.

  2. Data Sharing: APIs facilitate data exchange between different systems.

  3. Service Integration: APIs connect multiple services to create new functionalities.

Example: If you want to display a map on a website, you can use Google Maps API instead of developing a map from scratch.

What is Velo by Wix?

Velo by Wix (formerly Corvid by Wix) is a powerful web development platform offered by Wix.com. It enables developers to customize Wix websites through coding, integrate APIs, and create dynamic applications.

Key Features of Velo

  1. Full-Stack Development:

    • Client-Side: Customize design and front-end elements via the Wix Editor.

    • Server-Side: Write JavaScript to handle business logic.

  2. Data Management:

    • Wix Data allows you to easily create, manage, and query databases for dynamic content.

  3. API Integration:

    • External APIs: Use REST APIs and HTTP requests to fetch or send data.

    • Built-in APIs: Extend Wix's native functionalities, such as user authentication, form submissions, and SEO customization.

  4. Integrated IDE: Velo provides an in-browser Integrated Development Environment (IDE) to write and debug JavaScript code.

How to Use Wix Velo to Optimize SEO for Sponsors

Wix's SEO Structured Data for Products package can help improve your sponsors' search engine rankings by generating structured data based on schema.org. This enables Google to display product pages as rich search results.

Steps to Implement SEO Optimization

1. Set Up Site Information

  • Business Name: Input the sponsor's business name.

  • Contact Email: Provide the sponsor's email address.

  • Currency: Define the site's currency settings.

2. Prepare Product Collections

Treat each sponsor's website as a "product" in Wix. Ensure the product collection includes these fields:

  • Title: Website name.

  • Description: Overview of the website.

  • SKU: A unique identifier (e.g., sponsor name).

  • Images: Screenshots or logos.

  • Price: Value of the site or service (optional).

  • Price Valid Until: Validity date for the value (optional).

3. Create Dynamic Pages

Build dynamic pages that pull data from the product collection and display each sponsor’s details.

4. Add Structured Data Code

Add the following code to your dynamic page to generate structured data:

javascript

import wixSeo from 'wix-seo'; 
import { buildSchema } from '@velo/seo-structured-data-product-backend';
import wixLocation from 'wix-location'; 

$w.onReady(async function () { 
	const schemaPromise = new Promise((resolve) => { 
		$w('#dynamicDataset').onReady(async () => { 
			const siteBaseUrl = wixLocation.baseUrl; 
			const currentItem = $w('#dynamicDataset').getCurrentItem(); 
			const schema = await buildSchema(currentItem, siteBaseUrl); 
			resolve(schema); 
		}); 
	}); 
	const resolvedSchema = await schemaPromise; 
	if (resolvedSchema) { 
		wixSeo.setStructuredData([resolvedSchema]); 
	} 
});
Replace #dynamicDataset with the actual dataset ID in your project.

5. Test with Google

Use Google's Rich Results Test to verify that the structured data is set up correctly.


Summary

  • APIs: Serve as a bridge for exchanging data and functionalities between software systems.

  • Velo by Wix: Enables advanced web development through coding and API integration.

  • SEO Structured Data for Products: Improves search engine visibility by generating schema-based structured data for sponsor websites.

By following these steps, you can enhance the SEO ranking of sponsor websites, increasing their visibility through rich search results.

 
 
 

コメント

bottom of page