カスタムアプリケーションでGoogle Sheetsに接続する

Google Sheetsアドオンはプロの機能

Google Sheets Addonやその他の強力な機能をアンロックして、ビジネスを成長させましょう。

WPForms Proを入手する

Google SheetsアドオンをWPFormsのGoogleアプリの代わりにカスタムGoogleアプリで使用したいですか?カスタムアプリケーション経由でGoogle Sheetsに接続することは、開発者や上級ユーザーにとって最良の選択肢である場合があります。

このチュートリアルでは、独自のカスタムGoogleアプリでWPForms Google Sheetsアドオンを使用する方法を紹介します。

必要条件


使い始める前に、まずWPFormsがあなたのWordPressサイトにインストールされ、有効化されていることを確認し、ライセンスを確認する必要があります。また、まだGoogleアカウントをお持ちでない場合はGoogleアカウントを登録し、Google Sheetsアドオンをインストールして有効化する必要があります。

注意:WPFormsをカスタムGoogleアプリケーションに接続することは、開発者または上級ユーザにのみ推奨されます。カスタムアプリケーションを必要としない場合は、Google Sheetsアドオンの使用ガイドを参照してください。

アドバンスモードの有効化

開始するには、WordPressのダッシュボードを開き、WPForms " 設定に移動します。次に統合タブをクリックします。

クリック・インテグレーション・タブ

次に、Google Sheetsインテグレーションをクリックして、その設定を展開する。

クリック-グーグル-シート

Googleアプリケーションの接続を開始するには、[詳細モードを有効にする]をクリックします。

クリック有効-アドバンスト・モード

Google Cloud Platformからの情報を入力する必要がある追加の設定が表示されます。

アドバンスモード接続設定

この情報を見つけるには、まずGoogle Cloud Platformにログインし、カスタムアプリケーションを作成する必要があります。しかし、後でアクセスする必要があるため、アプリケーションを作成している間はWPForms設定を別のブラウザタブで開いたままにしておくことをお勧めします。

新規プロジェクトの追加

Google Cloud Platformにログインしたら、API & Servicesをクリックします。

クリック・アプリ・サービス

次の画面で、プロジェクトのドロップダウンメニューをクリックします。

クリックでプロジェクト選択ドロップダウン

その後、あなたのプロジェクトを表示するオーバーレイが現れます。新規プロジェクト」をクリックしてください。

クリック-新規プロジェクト

次に、プロジェクト名フィールドに名前を追加する必要があります。プロジェクトの用途を覚えておくのに便利な名前を使うことをお勧めします。しかし、好きな名前を使うことができます。

名前を追加したら、CREATEボタンをクリックします。

プロジェクト名を追加してクリック・クリエイト

プロジェクトを作成したら、もう一度プロジェクトのドロップダウンをクリックし、デフォルトでまだ選択されていなければ、新しく作成したプロジェクトを選択します。

クリック・プロジェクト・ドロップダウン

Google APIの有効化

プロジェクトが作成できたら、次はGoogle APIを有効にしましょう。まず、左側のメニューからLibraryをクリックします。

クリックライブラリー

APIライブラリに移動し、3つの異なるAPIを見つけて有効にする必要があります:Google Drive APIGoogle Sheets APIGoogle Picker APIです。

検索バーに "Google Drive API "と入力し、Google Drive APIを検索する。

サーチ・グーグル・ドライブ・アピ

Google Drive APIを見つけたら、「ENABLE」ボタンをクリックします。

Google-drive-apのクリック有効化

次に、GoogleのAPIライブラリに戻り、検索バーに「Google Sheets API」と入力する。

search-google-sheets-api(サーチ・グーグル・シート・アピ

Google Sheets APIを見つけたら、ENABLEボタンをクリックします。

クリック-有効-グーグル・シート・アピ

最後に、グーグルのAPIライブラリに戻り、検索バーに「Google Picker API」と入力する。

サーチピッカー

Google Picker APIを見つけたら、「ENABLE」ボタンをクリックします。

クリック・トゥ・イネーブル・ピッカー・アピ

ユーザータイプの選択

必要なAPIを有効にしたので、左側メニューのOAuth同意画面をクリックします。

クリック認証同意画面

次の画面では、アプリケーションのユーザータイプを選択する必要があります。アプリを誰と共有したいかによって、内部または外部のいずれかを選択できます。

この例では、「External」を選択します。選択したら、CREATEボタンをクリックして次に進みます。

クリック-作成-ボタン-認証-同意

注:外部ユーザーと内部ユーザーの詳細については、Googleのユーザータイプに関するドキュメントを参照してください。

アプリの登録

アプリのユーザータイプを選択すると、アプリ登録を完了するためのページにリダイレクトされます。アプリを登録するには、次のセクションで説明する一連のステップを完了する必要があります。

アプリ情報の追加

あなたのアプリに関する情報を追加することは必須であり、ユーザーはあなたが誰であり、どのように連絡を取るかを知ることができます。

必須フィールドには、アプリ名と ユーザーサポートメールを必ず追加してください。

アプリ登録名とサポートメール

アプリドメインの追加

App domainセクションまでスクロールダウンし、Authorized domainsセクションを見つけます。ここからADD DOMAINボタンをクリックします。

クリック・ドメイン追加ボタン

Authorized domain 1フィールドに、ドメインとしてwpforms.comを追加する必要があります。

add-wpforms-ドメイン

注意: wpforms.comを認証ドメインとして追加する必要があります。そうしないと、アプリはWPFormsへの接続に失敗します。

開発者の連絡先情報の追加

次に、Developer contact informationセクションに希望するメールアドレスを追加します。プロジェクトに変更があった場合、Googleからこのメールアドレスに連絡が入ります。

開発者メールアドレス

最後に「SAVE AND CONTINUE」ボタンをクリックして次のステップに進みます。

クリック・セーブ・アンド・コンティニュー

スコープの追加

次の画面で、ADD OR REMOVE SCOPESボタンをクリックします。

クリックスコープの追加と削除

表示 さ れたサ イ ド モーダルで、 「Enter property name or value」 と書かれた検索バーをク リ ック。

プロパティ名または値の入力検索バー

次に、以下の各スコープを検索する:

  • https://www.googleapis.com/auth/userinfo.email
  • https://www.googleapis.com/auth/userinfo.profile
  • https://www.googleapis.com/auth/drive.file
  • https://www.googleapis.com/auth/spreadsheets

左側のチェックボックスをクリックして、上記の各スコープを有効にする必要があります。

クリック・チェックボックスでスコープを有効にする

必要なスコープを有効にしたら、画面下部にある「UPDATE」ボタンをクリックします。

クリック更新ボタン

その後、有効なスコープを表示・管理できる「スコープ」画面に戻ります。ここで "SAVE AND CONTINUE "ボタンをクリックして変更を保存します。

クリック・セーブ・アンド・コンテニュー・スコープ・スクリーン

テストユーザーの追加

ユーザーがアプリを利用できるようになるには、Googleが検証プロセスを完了する必要があります。ただし、特定のユーザーにアプリの検証前にテストを許可することは可能です。今回のセットアップではこのステップは必要ないので、「SAVE AND CONTINUE」ボタンをクリックして次のステップに進みます。

クリック保存してテストを続ける-ユーザー画面

アプリ登録の確認

アプリ登録の最後のステップは、サマリー画面で設定を確認することです。すべてが正しく、このチュートリアルのステップに対応しているようであれば、画面下部の「BACK TO DASHBOARD」ボタンをクリックします。

ダッシュボードに戻るボタン

アプリの公開

アプリの登録が完了したら、アプリを公開する必要があります。Oauth consent画面からPUBLISH APPボタンをクリックして、直接これを行うことができます。

クリック・パブリッシュ・アプリ

ボタンをクリックすると、モーダルが表示され、Googleのアプリ検証プロセスを完了するためのさらなる手順が表示されます。確認するには、CONFIRMをクリックします。

クリック・コンファーム

アプリケーションの認証情報を作成する

次のステップは、アプリケーションのクレデンシャルを作成することです。始めるには、左側メニューのCredentialsをクリックします。

クリック認証

次に、Credentials 画面の上部にあるCREATE CREDENTIALSをクリックします。

クリック認証

その後、OAuthクライアントIDをクリックします。

select-oauth-client-id

次に、Application typeドロップダウンをクリックし、Web applicationを選択します。

セレクトウェブアプリケーション

その後、NameフィールドにOauth 2.0クライアントの名前を入力してください。これはエンドユーザーには見えないので、自由に好きな名前をつけてください。

クライアントIDの追加名

次に、[Authorized redirect URIs]セクションまでスクロールし、[ADD URI]をクリックします。

クリックアド-ウリ-ボタン-1

ここでWPFormsの統合設定に戻り、コピーアイコンをクリックして最初のCallback URLをコピーする必要があります。

クリック-コピー-アイコン-コールバック-url-1

次に、Googleアプリケーションの設定に戻り、コールバックURLをURIs 1フィールドに貼り付けます。

ペースト-コールバック-url-into-uri-1-フィールド-1

その後、ADD URIボタンをもう一度クリックして、2つ目のURIを追加します。

クリック・アド・ウリ・ボタン-2

WPFormsの設定に戻り、2番目のCallback URLの横にあるコピーアイコンをクリックします。

クリック-コピー-アイコン-コールバック-url-2

Googleの設定に戻り、2つ目のコールバックURLをURIs 2フィールドに貼り付けます。

第2コールバックURLの追加

次に「CREATE」ボタンをクリックする。

クリック・クリエイト・ボタン・クライアントID

モーダルウィンドウが表示され、OAuthクライアント認証情報が表示されます。ここから、コピーアイコンをクリックしてクライアントIDをコピーします。

クリックコピーアイコンクライアントID

次に、WPFormsの統合設定に切り替え、クライアントIDをGoogleクライアントIDフィールドに貼り付けます。

クライアントIDフィールド

次に、Googleアプリケーションの設定に戻り、クライアントシークレットをコピーします。

クリックコピーアイコン・クライアント・シークレット

もう一度WPFormsの統合設定に切り替え、クライアントシークレットをGoogleクライアントシークレットのフィールドに貼り付けます。

クライアント秘密の貼り付け

接続の完了

クライアントIDとクライアントシークレットを取得したら、接続を完了しましょう。Googleと接続する]ボタンをクリックします。

クリック-Googleシートへ接続ボタン

次に、Google認証ページにリダイレクトされます。ここでWPFormsにGoogleアカウントへのアクセスを許可する必要があります。

Googleアカウントを選択したら、[続行]ボタンをクリックしてWPFormsにアカウントへのアクセスを許可します。

グーグルドライブとシートのチェックボックス

これでWPForms " Settings " Integrationsに戻ると、接続の詳細とともに緑色のConnectedステータスが表示されるはずです。

グーグル・シート接続状況

これで、サイト上のフォームにGoogle Sheetsの統合を追加することができます。

以上です!これでWPForms Google Sheetsアドオンで使用するカスタムGoogleアプリの設定方法がわかりました。

次に、WPFormsでユーザーから送信された情報を使って何ができるか、もっと詳しく知りたいですか?詳しくはフォーム入力の完全ガイドをご覧ください。

最高のWordPressドラッグ&ドロップフォームビルダープラグイン

簡単、速い、安全。WPFormsを信頼する600万人以上のWebサイトオーナーの仲間入りをしてください。

このフォームを入力するには、ブラウザのJavaScriptを有効にしてください。