今年の初めの投稿では、Squarespaceのウェブサイト上で、動画をもっと簡単に使用する方法として、動画をバックグラウンドビデオとして、または埋め込みクリップとして使用する方法を紹介しました。
今回の投稿では、動画レコーダーとアップローダー•ウィジェットをサイトに直接埋め込むことで、ユーザーやサイト訪問者から動画を収集するために最も最適な方法を紹介します。
私たちは、Clipchampの HTML5カメラAPIを使用してこれらの作業を行います。- この製品は、あらゆる種類のウェブサイトで使用できる動画キャプチャツールであり、たとえば、オンラインストアを運営している場合に顧客から動画評価を収集したり、動画コンテストで動画の投稿を受けつけたり、あなたのブログの読者から動画によるコメントを受け取ることも可能です。
チュートリアルに従えば、、専門知識を必要とせずにSquarespaceのサイトに簡単にインストールする事ができます。
Squarespace の動画レコーダーの作成と追加
サイト訪問者があなたのサイトを通して自分のウェブカメラで直接録画したり、既に自分のデバイスで録画してある動画を選択してアップロードする事も出来ます。あるいは、オプションとして、どちらか好きな方法を選べるように設定することも可能です。
私たちが構築した独自の技術により、すべての動画ファイルは、私たちのインフラストラクチャを経由することなく、ターゲットである選択したクラウドストレージにユーザーのデバイスから直接、送信されます。 これはあなたとサイト訪問者のプライバシーを保護するのに役立ちます。
アップロード先は、YouTube、Dropbox、Googleドライブ、Amazon S3またはMicrosoft Azureアカウントなどからお好きなサービスを選択して、動画を送信することができます。
動画がアップロードされた後であなたのウェブサイトにその動画クリップを表示できるようにするには、それらをYoutubeに送信して、Squarespaceの管理画面から埋め込むことができるようにするのが最も最適な方法だといえます。
ここで、Squarespaceの動画レコーダーを入手するための手順についてご説明します：
あなたのウェブサイトの管理インターフェースにログインしてください
後の手順でサンプルの新しいページを作成したり、このページのHTMLにいくつかのコードをコピーする際にもログインする必要があります。
2) 2番目のブラウザタブで、CipchampビデオAPIの無料トライアルに登録します
次のステップで必要となる固有のAPIキーを取得し、対象となる受け取りたい動画のアップロードを有効にするには、APIのお試しアカウントに登録する必要があります。 申し込みにはクレジットカードは必要なく、いつでもお試しをキャンセルすることができます。
3) YouTubeをアップロードする対象に設定してユーザーの動画を送信します
お試しアカウントを開設したら、https://util.clipchamp.com/ja/api-setup/integrationsのAPI設定でYouTubeをクリックし、Clipchamp APIをYouTubeアカウントに接続して、ユーザーが投稿した動画をあなたのチャンネルまたは特定のプレイリストにアップロードできます。
4) 次に、https://util.clipchamp.com/ja/api-setup/install にアクセスします
このページには2つのコードスニペットがあります – あなたのサイトにウェブカメラレコーダーとアップローダーを埋め込むために両方のスニペットをSquarespaceにコピーする必要があります。（下記のステップ5と6を参照）また、このページに記載されている説明はSquarespaceのものではないウェブサイトに適用されるので、無視することができます。
5) Squarespaceに新しいページを作成し「ページヘッダーコードの挿入」へ
ページヘッダーコードの挿入のセクションで、次のように、 Clipchampのページの最初のセクション（あなたのAPIキーを含むもの）からコードスニペットを貼り付けます。:
6) 次に、ページの「ページのコンテンツ」のコードブロックに2番目のコードスニペットを挿入します。:
ページのコンテンツを編集します
そして、動画ボタンを表示したいページに新しいコードブロックを追加します。
コードブロックに、https://util.clipchamp.com/ja/api-setup/install からコピーした2番目（大きいもの）のコードスニペットを挿入します。
コードブロック内で、次の設定を選択してください：右側のドロップダウンにある 「HTML」を選択し、そして、左側にある 「ソースを表示」のチェックを外してください。 コードスニペットを追加したら、「適用」を押してください。
7) 次に、Clipchampのコードを埋め込んだページを保存してプレビューします
スニペットが正しく追加されて保存されている場合、プレビューページに新しいSquarespaceの動画レコーダーボタンが表示されます。 サンプルページでは、ボタンは次のようになります:
8) 最後のステップとして、あなたのウェブサイトのドメインをClipchampの設定エリアで承認します
ボタンが機能するようにするには、次のようにClipchamp APIの設定エリアで、ボタンのドメインのホワイトリストが必要となります。:
あなたのウェブサイトのURLをコピーし、https://util.clipchamp.com/ja/api-setup/domainsのClipchamp APIの設定エリアの承認済みドメインのリストに追加してください。
ホワイトリストに登録したドメインの例としてclipchamp-test.squarespace.comやwww.clipchamp-test.squarespace.comなどがあります。 独自のドメインを挿入し、またオプションとして、そのドメインのwww. subdomainを挿入してください。
URLをリストに追加したら、Squarespaceページのプレビューを再読み込みします。 ページ上の動画レコーダーおよびアップローダーボタンはすぐに使用できるようになり、サイト訪問者は録画した動画やその他の動画の送信を開始できます。
あなたのサイトに投稿されたビデオを表示します
あなたに送られてきた動画が、現在あなたのYouTubeチャンネルに配置されていて、その動画をあなたのウェブサイトに表示したい場合は、Squarespaceのヘルプの次の手順を参照してYouTube動画を埋め込む方法をご覧ください。
Squarespace KB about embedding videos
まとめ
Squarespaceを使用している場合、これらの作業はビデオを収集するために全て必要なステップです。 また、ClipchampのビデオAPIアカウントに既に登録されている方のためにこの件に関するヘルプ記事を簡単にまとめましたのでご覧ください。
知識データベース関連の記事には、動画ボタンがサイトに正しく表示されなかった場合のトラブルシューティングのヒントが多数掲載されています。 また、サイトのすべてのページに動画レコーダーを自動的に埋め込むことができるオプションについても説明されており、レコーダーを好みに合わせてカスタマイズするためのサンプルコードも記載されています。
カメラウィジェットには様々なカスタマイズオプションが用意されています。たとえば、自分のブランドを変更できたり、色やその他のスタイル要素を調整したり、入力動画およびや出力動画に関連するいろいろな設定を行うことができます。
この投稿では専門的な知識を必要とするオプションについては触れていませんが、Squarespaceの動画レコーダーに追加するパラメータについて知りたい場合は、APIドキュメントの詳細をご覧になることをお勧めいたします。 上記のステップ6でコードブロックに挿入したコードスニペットにオプションを追加するだけです。
この記事では、Squarespaceで動画を受け取る方法について説明しましたが、ここで説明した方法は、他のホームページビルダーのプラットフォームやCMSでレコーダーを入手する際にも活用できます。その一例として、Wixのチュートリアルに関する記事も以前、投稿しています。 また、すべての主な要件として、あなたのサイトの管理者設定のページにカスタムコードを追加する必要があることを覚えておいてください。
