今回はGoogle スプレッドシートと Google Apps Script にアクセスする必要がありますので、Googleアカウントを事前に取得しておく必要があります。またOpenAI API キーを取得する必要があります。

■新しいGoogleスプレッドシートを作成する

まずは新しいGoogleスプレッドシートを作成します。作成のために、今回はWebブラウザで「個人向けのクラウド ストレージおよびファイル共有（https://www.google.com/intl/ja_jp/drive/）」にアクセスし、Webサイト上の「ドライブを開く」ボタンをクリックします。

クリックすると、左側に「＋新規」ボタンがありますので、こちらをクリックします。

クリックするとプルダウンメニューが表示されメニューから「Googleスプレッドシート」をクリックします。クリック後、さらにメニューが表示されこの中から「空白のスプレッドシート」をクリックします。

クリックすると新しいページに移動し、移動後「無題のスプレッドシート」が作成されます。これで新しい Google スプレッドシートの作成は完了となります。

■新しいGoogleスクリプトを作成する

作成後、新しいGoogleスクリプトを作成します。

作成するために、作成したスプレッドシートのメニューから「拡張機能」をクリックします。クリックするとプルダウンメニューが表示されます。このメニュー内に「Apps Script」がありますので、こちらをクリックします。

クリックすると「Apps Script」の「無題のプロジェクト」が作成されます。これで新しいGoogleスクリプトを作成する準備が完了となりました。

■ChatGPT API に接続する

完了後、「ファイル」の「コード.gs」にChatGPT API に接続するスクリプトを書いていきます。

■コード

function myFunction() {
  var apiKey = "取得したOpenAI API キー";
  var endpoint = "https://api.openai.com/v1/engines/davinci/completions";
  var text = "織田信長とはどんな人物ですか？"
  var payload = {
    "prompt": text,
    "max_tokens":1024,
    "stop": "."
  };
  var options = {
    "method": "post",
    "headers": {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + apiKey
    },
    "payload": JSON.stringify(payload)
  };
  var response = UrlFetchApp.fetch(endpoint, options);
  var json = response.getContentText();
  var data = JSON.parse(json);
  var sheet = SpreadsheetApp.getActiveSheet();
      sheet.appendRow([text, data.choices[0].text]);
}

今回はGoogle ScriptのUrlFetchAppを使って、ChatGPT APIに対してテキストを送信し、応答を受け取り、それをスプレッドシートに保存します。

なお、payload変数を宣言し、変数内に引数,パラメータとしてmax_tokens（生成する文章の最大単語数）を渡していますが、「2048」に設定すると下記のエラーが出力されました。

Exception: Request failed for https://api.openai.com returned code 400. Truncated server response: {
"error": {
"message": "This model's maximum context length is 2049 tokens, however you requested 2072 tokens (24 in your prompt; 2048 for t... (use muteHttpExceptions option to examine full response)

”例外です。https://api.openai.com のリクエストに失敗し、コード 400 が返されました。サーバーの応答は切り捨てられています。{
"エラー": {
"message": { "メッセージ": "このモデルの最大コンテキスト長は2049トークンですが、あなたは2072トークンを要求しました(あなたのプロンプトでは24、t...では2048トークンです)。(muteHttpExceptions オプションを使用すると、レスポンス全体を確認することができます。）”

Question regarding max_tokens

If I lower the max_tokens value in my request, does GPT-3 generate shorter but complete texts, or does it just cut off t...

community.openai.com

Just a moment...

beta.openai.com

そのため、「1024」と設定しています。

■実行・検証

スクリプトを書いた後に実行・検証を行います。「コード.gs」のコード編集画面上部に「実行」の文字がありますので、こちらをクリックします。

クリックすると、「承認が必要です」というポップアップが表示されますので、ポップアップ内の「権限を確認」ボタンをクリックします。

クリックすると、「Googleアカウント ログイン（OAuth2.0,認可を行うためのプロトコル）」ページが表示されます。ページ内では「アカウントの選択」でお持ちのGoogleアカウントが表示されていますので、こちらのアカウントを選択します。

選択すると、別のページが表示されページ内に「このアプリは Google で確認されていません」、「アプリが、Google アカウントのプライベートな情報へのアクセスを求めています。デベ ロッパー ( ”お持ちのGoogleアカウント”) と Google によって確認されるまで、このアプリ を使用しないでください。」と表示されていますので、このページ内の「詳細」の文字をクリックします。

クリックすると、「リスクを理解し、デベロッパー( ”お持ちのGoogleアカウント”)を使用できる場合のみ、続行してください。」とページ内に追加の文章が表示され、その下に「無題のプロジェクト（安全ではないページ）に移動」と文字がありますので、こちらをクリックします。

クリックすると、別のページが表示され「無題のプロジェクトがGoogleアカウントへのアクセスをリクエストしています。」などの文章が表示されます。このページの下に「許可」ボタンがありますので、こちらをクリックします。これで無題のプロジェクト（今回はGoogle Scriptを使って、ChatGPT APIに対してテキストを送信し、応答を受け取り、それをスプレッドシートに保存するというプロジェクト）に対して「Googleスプレッドシートのすべてのスプレッドシート参照、編集、作成、削除」を許可します。

許可すると、「Apps Script」の「コード.gs」のコード編集画面の下にある「実行ログ」に「実行開始」と出力され、しばらくすると「実行完了」と出力されます。

出力後、作成したスプレッドシートを確認すると、ChatGPTに対してpromptで指示（今回は「織田信長とはどんな人物ですか？」というもの）を与えているのでその指示に対して回答がスプレッドシート上に保存されていることを確認できました。

確認後、ChatGPTからの今回の回答を確認しましたが、日本語の文章として意味をなしていないことがわかります。

これを改善するために、payload変数を宣言し、変数内に引数,パラメータとしてtemperature（生成する応答の多様性）を渡してみることにしました（https://beta.openai.com/docs/api-reference/completions/create#completions/create-temperature）。temperatureの値が高いほど、モデルがより多くのリスクを負うことを意味し、明確な答えとなります。もしくは変数内に引数,パラメータとしてtop_p（https://beta.openai.com/docs/api-reference/completions/create#completions/create-top_p） を追加し変更することをOpenAI APIでは推奨しているが、temperatureとtop_pの両方を変更することは推奨していない。

■コード（修正版）

function myFunction() {
  var apiKey = "取得したOpenAI API キー";
  var endpoint = "https://api.openai.com/v1/engines/davinci/completions";
  var text = "織田信長とはどんな人物ですか？"
  var payload = {
    "prompt": text,
    "max_tokens":1024,
　　"temperature" : 0.5,
    "stop": "."
  };
  var options = {
    "method": "post",
    "headers": {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + apiKey
    },
    "payload": JSON.stringify(payload)
  };
  var response = UrlFetchApp.fetch(endpoint, options);
  var json = response.getContentText();
  var data = JSON.parse(json);
  var sheet = SpreadsheetApp.getActiveSheet();
      sheet.appendRow([text, data.choices[0].text]);
}

修正版ではtemperatureの値を「0.5」と設定し、このスクリプトを保存。保存後、実行・検証してみます。

実行・検証後、スプレッドシートで保存されたChatGPTからの回答を確認すると修正前とは異なり、日本語の文章として、同じ文章を生成しているものの意味をなしていることが確認できました。

■Python

Google Colaboratory(Google Colab),Python3.7.10

■Google Colaboratoryにアクセスする

まずはGoogle Colaboratory（https://colab.research.google.com/?hl=ja）にアクセスします。

アクセスすると、上部メニューに「ファイル」という項目があるので、クリックします。クリックすると、プルダウンメニューが表示され「ノートブックを新規作成」という項目があるので、こちらをクリックします。

クリックすると、「Googleへのログインが必要」というウインドウが表示されますので、Googleにログインするために、お持ちのGoogleアカウントでログインします。そのために「ログイン」ボタンをクリックします。

クリックすると、「アカウントの選択」というウインドウが表示されますので、お持ちのアカウントを選択します。

選択すると、アカウントのパスワードを入力するウインドウが表示されますので、「パスワードを入力」欄にパスワードを入力し、「次へ」ボタンをクリックします。

クリックすると、2段階認証のプロセスを有効にしている方はプロセスの手順を踏みます。

その後、Google Colaboratory上で新しいノートブックが作成されます。

■ノートブックの設定

作成後、新しいノートブックの上部メニューにある「表示」から「ノートブック情報」をクリックします。

クリックすると、「ノートブック情報」というウインドウが表示されます。ウインドウ内に「ノートブックの設定を開く」という文字が表示されているので、こちらをクリックします。

クリックすると「ノートブックの設定」というウインドウが表示されます。ウインドウ内の「ハードウェアアクセレータ」の矢印マークをクリックします。

クリックするとプルダウンメニューが表示されますので、「GPU」を選択します。

選択後、「Colab を最大限に活用するには、不要な GPU の使用を控えるようにしてください。」と表示されます。気になる方は「詳細」をクリックします。

「このノートブックを保存する際にコードセルの出力を除外する」のチェックボックスにはチェックを入れずに「保存」ボタンをクリックします。

クリックすると、設定が変更されます。

■個人のGoogleドライブを使用する設定

■コード

from google.colab import drive
drive.mount('/content/drive')

変更後、コードセルに上記のコードを記述します。個人（自分）のドライブにある画像、ビデオを使用することができるようになります。

記述後、セルを実行します。

Go to this URL in a browser: https://accounts.google.com/o/oauth2/auth?client_id=***

Enter your authorization code:

セルを実行すると、上記のメッセージが出力されますので、記載されているURLをクリックします。

クリックすると、URLへアクセスされます。「アカウントの選択」というウインドウが表示されますので、アカウントを選択します。

選択すると「このアプリを Google からダウンロードしたことをご確認ください」というウインドウが表示されますので、「ログイン」ボタンをクリックします。

クリックすると、「ログイン」というウインドウが表示され、「このコードをコピーし、アプリケーションに切り替えて貼り付けてください。」と書かれていますので、その下のコードをコピーします。

コピーしたコードを、先ほど出力された「Enter your authorization code:」の入力欄に貼り付けて、Enterキーを押します。

Enterキーを押すと、ノートブックの左側にフォルダのアイコンがありますので、こちらをクリックし、「drive」のフォルダ内を確認すると「MyDrive」が追加され、個人（自分）のドライブが使用できるようになります。

■YOLOv5リポジトリのクローン作成

次に、YOLOv5リポジトリのクローンを作成します。

!git clone https://github.com/ultralytics/yolov5

ノートブック上にコードセルを追加し、上記のコードを入力し、セルを実行します。

Cloning into ‘yolov5’…
remote: Enumerating objects: 7276, done.
remote: Counting objects: 100% (398/398), done.
remote: Compressing objects: 100% (252/252), done.
remote: Total 7276 (delta 251), reused 263 (delta 146), pack-reused 6878
Receiving objects: 100% (7276/7276), 9.20 MiB | 6.50 MiB/s, done.
Resolving deltas: 100% (4979/4979), done.

実行すると、「Resolving deltas: 100% (4979/4979), done.」と出力されますので、これでクローンの作成完了となります。

■インストール要件

完了後、YOLOv5を使用しオブジェクト検出するために必要なパッケージをインストールします。

!pip install -r yolov5/requirements.txt

インストールのために、コードセルを追加し、上記のコードを入力し、セルを実行します。

Requirement already satisfied: matplotlib>=3.2.2 in /usr/local/lib/python3.7/dist-packages (from -r yolov5/requirements.txt (line 4)) (3.2.2)
Requirement already satisfied: numpy>=1.18.5 in /usr/local/lib/python3.7/dist-packages (from -r yolov5/requirements.txt (line 5)) (1.19.5)
Requirement already satisfied: opencv-python>=4.1.2 in /usr/local/lib/python3.7/dist-packages (from -r yolov5/requirements.txt (line 6)) (4.1.2.30)
Requirement already satisfied: Pillow in /usr/local/lib/python3.7/dist-packages (from -r yolov5/requirements.txt (line 7)) (7.1.2)
Collecting PyYAML>=5.3.1
  Downloading https://files.pythonhosted.org/packages/7a/a5/393c087efdc78091afa2af9f1378762f9821c9c1d7a22c5753fb5ac5f97a/PyYAML-5.4.1-cp37-cp37m-manylinux1_x86_64.whl (636kB)
     |████████████████████████████████| 645kB 14.1MB/s 
Requirement already satisfied: scipy>=1.4.1 in /usr/local/lib/python3.7/dist-packages (from -r yolov5/requirements.txt (line 9)) (1.4.1)
Requirement already satisfied: torch>=1.7.0 in /usr/local/lib/python3.7/dist-packages (from -r yolov5/requirements.txt (line 10)) (1.9.0+cu102)
Requirement already satisfied: torchvision>=0.8.1 in /usr/local/lib/python3.7/dist-packages (from -r yolov5/requirements.txt (line 11)) (0.10.0+cu102)
Requirement already satisfied: tqdm>=4.41.0 in /usr/local/lib/python3.7/dist-packages (from -r yolov5/requirements.txt (line 12)) (4.41.1)
Requirement already satisfied: tensorboard>=2.4.1 in /usr/local/lib/python3.7/dist-packages (from -r yolov5/requirements.txt (line 15)) (2.5.0)
Requirement already satisfied: seaborn>=0.11.0 in /usr/local/lib/python3.7/dist-packages (from -r yolov5/requirements.txt (line 19)) (0.11.1)
Requirement already satisfied: pandas in /usr/local/lib/python3.7/dist-packages (from -r yolov5/requirements.txt (line 20)) (1.1.5)
Collecting thop
  Downloading https://files.pythonhosted.org/packages/6c/8b/22ce44e1c71558161a8bd54471123cc796589c7ebbfc15a7e8932e522f83/thop-0.0.31.post2005241907-py3-none-any.whl
Requirement already satisfied: kiwisolver>=1.0.1 in /usr/local/lib/python3.7/dist-packages (from matplotlib>=3.2.2->-r yolov5/requirements.txt (line 4)) (1.3.1)
Requirement already satisfied: cycler>=0.10 in /usr/local/lib/python3.7/dist-packages (from matplotlib>=3.2.2->-r yolov5/requirements.txt (line 4)) (0.10.0)
Requirement already satisfied: python-dateutil>=2.1 in /usr/local/lib/python3.7/dist-packages (from matplotlib>=3.2.2->-r yolov5/requirements.txt (line 4)) (2.8.1)
Requirement already satisfied: pyparsing!=2.0.4,!=2.1.2,!=2.1.6,>=2.0.1 in /usr/local/lib/python3.7/dist-packages (from matplotlib>=3.2.2->-r yolov5/requirements.txt (line 4)) (2.4.7)
Requirement already satisfied: typing-extensions in /usr/local/lib/python3.7/dist-packages (from torch>=1.7.0->-r yolov5/requirements.txt (line 10)) (3.7.4.3)
Requirement already satisfied: tensorboard-plugin-wit>=1.6.0 in /usr/local/lib/python3.7/dist-packages (from tensorboard>=2.4.1->-r yolov5/requirements.txt (line 15)) (1.8.0)
Requirement already satisfied: protobuf>=3.6.0 in /usr/local/lib/python3.7/dist-packages (from tensorboard>=2.4.1->-r yolov5/requirements.txt (line 15)) (3.12.4)
Requirement already satisfied: requests<3,>=2.21.0 in /usr/local/lib/python3.7/dist-packages (from tensorboard>=2.4.1->-r yolov5/requirements.txt (line 15)) (2.23.0)
Requirement already satisfied: absl-py>=0.4 in /usr/local/lib/python3.7/dist-packages (from tensorboard>=2.4.1->-r yolov5/requirements.txt (line 15)) (0.12.0)
Requirement already satisfied: setuptools>=41.0.0 in /usr/local/lib/python3.7/dist-packages (from tensorboard>=2.4.1->-r yolov5/requirements.txt (line 15)) (57.0.0)
Requirement already satisfied: werkzeug>=0.11.15 in /usr/local/lib/python3.7/dist-packages (from tensorboard>=2.4.1->-r yolov5/requirements.txt (line 15)) (1.0.1)
Requirement already satisfied: wheel>=0.26; python_version >= "3" in /usr/local/lib/python3.7/dist-packages (from tensorboard>=2.4.1->-r yolov5/requirements.txt (line 15)) (0.36.2)
Requirement already satisfied: google-auth-oauthlib<0.5,>=0.4.1 in /usr/local/lib/python3.7/dist-packages (from tensorboard>=2.4.1->-r yolov5/requirements.txt (line 15)) (0.4.4)
Requirement already satisfied: grpcio>=1.24.3 in /usr/local/lib/python3.7/dist-packages (from tensorboard>=2.4.1->-r yolov5/requirements.txt (line 15)) (1.34.1)
Requirement already satisfied: markdown>=2.6.8 in /usr/local/lib/python3.7/dist-packages (from tensorboard>=2.4.1->-r yolov5/requirements.txt (line 15)) (3.3.4)
Requirement already satisfied: google-auth<2,>=1.6.3 in /usr/local/lib/python3.7/dist-packages (from tensorboard>=2.4.1->-r yolov5/requirements.txt (line 15)) (1.31.0)
Requirement already satisfied: tensorboard-data-server<0.7.0,>=0.6.0 in /usr/local/lib/python3.7/dist-packages (from tensorboard>=2.4.1->-r yolov5/requirements.txt (line 15)) (0.6.1)
Requirement already satisfied: pytz>=2017.2 in /usr/local/lib/python3.7/dist-packages (from pandas->-r yolov5/requirements.txt (line 20)) (2018.9)
Requirement already satisfied: six in /usr/local/lib/python3.7/dist-packages (from cycler>=0.10->matplotlib>=3.2.2->-r yolov5/requirements.txt (line 4)) (1.15.0)
Requirement already satisfied: idna<3,>=2.5 in /usr/local/lib/python3.7/dist-packages (from requests<3,>=2.21.0->tensorboard>=2.4.1->-r yolov5/requirements.txt (line 15)) (2.10)
Requirement already satisfied: urllib3!=1.25.0,!=1.25.1,<1.26,>=1.21.1 in /usr/local/lib/python3.7/dist-packages (from requests<3,>=2.21.0->tensorboard>=2.4.1->-r yolov5/requirements.txt (line 15)) (1.24.3)
Requirement already satisfied: certifi>=2017.4.17 in /usr/local/lib/python3.7/dist-packages (from requests<3,>=2.21.0->tensorboard>=2.4.1->-r yolov5/requirements.txt (line 15)) (2021.5.30)
Requirement already satisfied: chardet<4,>=3.0.2 in /usr/local/lib/python3.7/dist-packages (from requests<3,>=2.21.0->tensorboard>=2.4.1->-r yolov5/requirements.txt (line 15)) (3.0.4)
Requirement already satisfied: requests-oauthlib>=0.7.0 in /usr/local/lib/python3.7/dist-packages (from google-auth-oauthlib<0.5,>=0.4.1->tensorboard>=2.4.1->-r yolov5/requirements.txt (line 15)) (1.3.0)
Requirement already satisfied: importlib-metadata; python_version < "3.8" in /usr/local/lib/python3.7/dist-packages (from markdown>=2.6.8->tensorboard>=2.4.1->-r yolov5/requirements.txt (line 15)) (4.5.0)
Requirement already satisfied: pyasn1-modules>=0.2.1 in /usr/local/lib/python3.7/dist-packages (from google-auth<2,>=1.6.3->tensorboard>=2.4.1->-r yolov5/requirements.txt (line 15)) (0.2.8)
Requirement already satisfied: rsa<5,>=3.1.4; python_version >= "3.6" in /usr/local/lib/python3.7/dist-packages (from google-auth<2,>=1.6.3->tensorboard>=2.4.1->-r yolov5/requirements.txt (line 15)) (4.7.2)
Requirement already satisfied: cachetools<5.0,>=2.0.0 in /usr/local/lib/python3.7/dist-packages (from google-auth<2,>=1.6.3->tensorboard>=2.4.1->-r yolov5/requirements.txt (line 15)) (4.2.2)
Requirement already satisfied: oauthlib>=3.0.0 in /usr/local/lib/python3.7/dist-packages (from requests-oauthlib>=0.7.0->google-auth-oauthlib<0.5,>=0.4.1->tensorboard>=2.4.1->-r yolov5/requirements.txt (line 15)) (3.1.1)
Requirement already satisfied: zipp>=0.5 in /usr/local/lib/python3.7/dist-packages (from importlib-metadata; python_version < "3.8"->markdown>=2.6.8->tensorboard>=2.4.1->-r yolov5/requirements.txt (line 15)) (3.4.1)
Requirement already satisfied: pyasn1<0.5.0,>=0.4.6 in /usr/local/lib/python3.7/dist-packages (from pyasn1-modules>=0.2.1->google-auth<2,>=1.6.3->tensorboard>=2.4.1->-r yolov5/requirements.txt (line 15)) (0.4.8)
Installing collected packages: PyYAML, thop
  Found existing installation: PyYAML 3.13
    Uninstalling PyYAML-3.13:
      Successfully uninstalled PyYAML-3.13
Successfully installed PyYAML-5.4.1 thop-0.0.31.post2005241907

実行すると、「Successfully installed」と出力されます。これが出力されれば、正常にインストールは完了となります。

!cd /content/yolov5

完了後、「/content/yolov5」ディレクトリに移動するため、コードセルを追加し、上記のコードを入力してセルを実行します。

■YOLOv5を使用しオブジェクト検出する

実行後、単一のコマンドだけでYOLOv5を使用しオブジェクト検出することが可能となりました。

!python <detect.pyへのパス> --source <画像/動画/Youtubeビデオへのパス> --weights <ウェイト（重み）へのパス> --conf <最小信頼値>

YOLOv5を使用しオブジェクト検出するための基本的な単一のコマンドは上記になります。

■著作権フリーの写真を使用し、オブジェクト検出する

今回は上記の著作権フリーの写真（Pixabayからダウンロードした写真）を、個人（自分）のドライブ（MyDrive）にアップロードし、オブジェクト検出してみます。なお、「taxi.jpg」という名前で保存し、「content/drive/MyDrive/（フォルダパス）」内に置きます。

!python /content/yolov5/detect.py --source /content/drive/MyDrive/taxi.jpg --weights yolov5s.pt --conf 0.25

その後、コードセルを追加し、上記のコードを記述し、セルを実行してみます。

!python /content/yolov5/detect.py --source /content/drive/MyDrive/taxi.jpg --weights yolov5s.pt --conf 0.25
detect: weights=['yolov5s.pt'], source=/content/drive/MyDrive/taxi.jpg, imgsz=640, conf_thres=0.25, iou_thres=0.45, max_det=1000, device=, view_img=False, save_txt=False, save_conf=False, save_crop=False, nosave=False, classes=None, agnostic_nms=False, augment=False, update=False, project=runs/detect, name=exp, exist_ok=False, line_thickness=3, hide_labels=False, hide_conf=False, half=False
requirements: /content/requirements.txt not found, check failed.
YOLOv5 🚀 v5.0-223-gb83e1a4 torch 1.9.0+cu102 CUDA:0 (Tesla K80, 11441.1875MB)

Downloading https://github.com/ultralytics/yolov5/releases/download/v5.0/yolov5s.pt to yolov5s.pt...
100% 14.1M/14.1M [00:00<00:00, 26.5MB/s]

Fusing layers...
/usr/local/lib/python3.7/dist-packages/torch/nn/functional.py:718: UserWarning: Named tensors and all their associated APIs are an experimental feature and subject to change. Please do not use them for anything important until they are released as stable. (Triggered internally at /pytorch/c10/core/TensorImpl.h:1156.)
return torch.max_pool2d(input, kernel_size, stride, padding, dilation, ceil_mode)
Model Summary: 224 layers, 7266973 parameters, 0 gradients
image 1/1 /content/drive/MyDrive/taxi.jpg: 448x640 7 cars, Done. (0.064s)
Results saved to runs/detect/exp
Done. (1.303s)

実行すると、今回用意した写真内からオブジェクト検出を開始します。開始後、しばらくすると「Done.（完了）」と出力されます。これでオブジェクト検出は完了です。

■オブジェクト検出した結果を確認する

完了後、オブジェクト検出した結果を確認してみます。

確認する際は、ノートブックの左側にフォルダのアイコンがありますので、こちらをクリックすると、「runs」というフォルダが生成されていることが確認できます。このフォルダをクリックし、「detect」の「exp」フォルダを確認すると、今回用意した画像ファイル「taxi.jpg」と同じ名前のファイルが確認できます。このファイルを開きます。

開くと、YOLOv5を使用したことで、写真内のタクシーが「car（車）」として認識されていることが確認できました。

serpstack（https://serpstack.com/）は、無料でリアルタイムのGoogle検索結果APIで、世界中の検索エンジンの結果ページにおいて制作したWebサイトを監視するために使用できます。

■serpstackのアカウントを取得する

まずは「serpstack（https://serpstack.com/）」にアクセスします。

アクセスすると、サイトの上部に「SIGN UP FREE（無料会員登録）」という文字がありますので、こちらをクリックします。

クリックすると「Pricing（価格設定）」のページに移動します。このページ内で「Free（無料）」の「SIGN UP」ボタンをクリックします。

クリックすると、「Sign Up（登録）」のページに移動します。「ACCOUNT DETAILS（アカウントの詳細）」の項目でメールアドレスとパスワードを入力します。

入力後、ページを下にスクロールし、「請求内容（BILLING DETAILS）」の項目を入力します。「Full Name（姓名）」、「Address（住所）」、「Postal Code（郵便番号）」、「Country（国名）」、「State（都道府県）」、「City（市）」を入力します。

入力後、ページを下にスクロールし、「会社情報（COMPANY DETAILS）」の項目を入力しますが、今回は個人でのアカウント登録になりますので、入力はしません。法人の場合は入力する必要があります。

入力後、「私はロボットではありません」のチェックボックスにチェックを入れます。

その後に「Receive important maintenance and service notifications (recommended)メンテナンスやサービスに関する重要なお知らせを受け取る（推奨）」のチェックボックスにチェックが入っていますので、確認します。不要の場合はチェックを外します。

次に「I have read and agree to the Terms & Conditions, Privacy Policy and Service Agreement of this website and service. （私は、本ウェブサイトおよびサービスの利用規約（https://serpstack.com/terms）、プライバシーポリシー（https://serpstack.com/privacy）、サービス利用規約（https://serpstack.com/agreement）を読み、同意します。）」のチェックボックスにはチェックが入っていませんので、これにチェックを入れないとアカウント登録できないので、チェックを入れます。

最後にページの一番下にある「Sign Up」ボタンをクリックします。

クリックすると、「Quickstart Guide（クイックスタートガイド）」のページに移動します。これでアカウントの登録は完了となります。

なお、Free（無料）プランは、Google検索の検索結果を月で100回取得することができます。それ以上は制限がかかります。また取得できる形式は、JSONのみとなります。

■GoogleAppsScriptを作成

まずは、GoogleアカウントでGoogleドライブ（https://drive.google.com/drive/u/0/my-drive）にアクセスします。

アクセスし、左側のメニューから「新規」ボタンをクリックします。

クリックするとプルダウンメニューが表示されますので、メニューの中から「その他」をクリックします。クリックすると、さらにプルダウンメニューが表示されますので、メニューの中から「Google Apps Script」をクリックします。

クリックすると、Apps Scriptのプロジェクトの作成画面が表示されます。こちらの画面で、Web サイトをスクレイピングするスクリプトを作成していきます。

■Google検索結果をスクレイピングし検索結果を取得する

作成後、Google検索結果をスクレイピングし検索結果を取得するスクリプトを書いていきます。

■コード

function scrapeGoogle() {
  var searchResults=UrlFetchApp.fetch("https://www.google.co.jp/search?q="+encodeURIComponent("日本"));
  Logger.log(searchResults)
}

UrlFetchApp.fetch()を使用し、日本のGoogle検索から「日本」という検索結果の情報を取得してみます。

■実行

Exception: Request failed for https://www.google.co.jp returned code 429. Truncated server response: <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> <html> <head><meta http-equiv=”content-type” content=”text/html; charset=utf-8″><me… (use muteHttpExceptions option to examine full response)

実行してみると、エラーが出力されました。エラーの内容を確認してみると、「https://www.google.co.jp のリクエストが失敗し、コード 429 が返されました。」というものです。

エラーを出力後、様々な方法でリクエストを試みましたが、いずれもリクエストは失敗。

原因を調べてみると、Google検索はUrlFetchからのリクエストを自動化されたトラフィックと判断し、ブロックされていることが判明しました（https://stackoverflow.com/questions/66429810/error-429-on-scraping-from-google-search-with-google-apps-script）。

検索結果を取得する場合は、Custom Search JSON/Atom API（https://developers.google.com/custom-search/v1/overview）を使用した方が良い。

※RESTを使用してCustom Search JSON/Atom APIを呼び出す方法（https://developers.google.com/custom-search/v1/using_rest）

■PC環境

Windows 10 Pro

Android Studio バージョン 4.2.1

■OpenCVパッケージのダウンロード

まず、OpenCVパッケージのダウンロードを行います。OpenCVパッケージのダウンロードを行うには、こちらのサイト（https://opencv.org/releases/）にアクセスします。

アクセスすると、OpenCVのリリース情報が公開されていますので、この中からダウンロードするパッケージを確認します。なお、Android Studioバージョンと同じバージョンのOpenCVをダウンロードする必要があります。

今回は「Android Studio バージョン 4.2.1」を使用していますので、4.2.1バージョンはありませんので、近いバージョンである「OpenCV – 4.2.0」をダウンロードします。ダウンロードする際は「Android」のボタンをクリックします。

クリックすると、「Find out more about OpenCV | SourceForge.net（https://sourceforge.net/projects/opencvlibrary/postdownload）のページに移動します。移動すると、自動的にダウンロードが開始されます。ダウンロードが開始されない場合は「Download」ボタンをクリックします。

しばらくすると、Webブラウザで指定されている保存場所に「opencv-4.2.0-android-sdk.zip」というzip形式のファイルがダウンロードされます。

ダウンロード後、「opencv-4.2.0-android-sdk.zip」を展開（解凍）します。

■Android Studioにモジュールをインポートする

その後、Android Studioを起動させます。起動後、「Create New Project」をクリックします。

クリックすると、「新規プロジェクトの作成」で、今回は「Templates」から「Empty Activity」を選択し、「次へ」ボタンをクリックします。

クリックすると、「Empty Activity」の設定が表示されますので、「Language」を「Java」に設定し、「完了」ボタンをクリックします。

クリックすると、プロジェクトが作成されます。作成後、プロジェクトの作成画面の上部にあるメニューから「ファイル」をクリックします。クリックするとプルダウンメニューが表示されますので、「新規」をクリックし、さらに「import Module..」をクリックします。

クリックすると、「Import Module from Source」というウインドウが表示されます。ウインドウ内の「フォルダ」のアイコンをクリックします。

クリックした後に、先程展開（解凍）した「opencv-4.2.0-android-sdk」内の「OpenCV-android-sdk」の「sdk」から「Java」を選択します。なお、展開（解凍）した「opencv-4.2.0-android-sdk」は、「C:\Users\user_」のディレクトリ内に移動してあります。

選択後「OK」ボタンをクリックします。

クリックすると、「Source directory」に「C:\Users\user_\opencv-4.2.0-android-sdk\OpenCV-android-sdk\sdk\java」が選択された状態になります。「Module name」には、自動的にAndroid Studioがモジュールを取得して名前を設定するようですが、今回は「Java」となっていますので「opencv」と変更します。

変更後「次へ」ボタンをクリックします。

クリックすると、「ADT Import Preferences」というウインドウが表示されます。

The ADT project importer can identify some .jar files and even whole source copies of libraries, and replace them with Gradle dependencies. However, it cannot figure out which exact version of the library to use, so it will use the latest. If your project needs to be adjusted to compile with the latest library, you can either import the project again and disable the following options, or better yet, update your project.（ADTプロジェクトインポーターは、いくつかの.jarファイル、さらにはライブラリのソースコピー全体を識別して、それらをGradleの依存関係に置き換えることができます。しかし、使用するライブラリの正確なバージョンを把握することができないため、最新のものが使用されます。最新のライブラリでコンパイルするようにプロジェクトを調整する必要がある場合は、プロジェクトを再度インポートして、以下のオプションを無効にするか、いっそのことプロジェクトをアップデートしてください。）

ウインドウ内には上記のメッセージが書かれています。

Replace jars with dependencies, when possible（可能であれば、jarを依存関係に置き換える）

Replace library sources with dependencies, when possible（可能な限り、ライブラリのソースを依存関係に置き換える）

Other Import Options:（その他のインポートオプション）

Create Gradle-style (camelCase) module names（Gradleスタイル（キャメルケース）のモジュール名の作成）

さらに上記のチェックボックスにはチェックが入れられていますが、このままの状態でOpencvのモジュールを追加しますので、「完了」ボタンをクリックします。これでモジュールが追加されました。

■プロジェクト構造を変更する

追加後、プロジェクト構造を変更します。変更する際は、プロジェクトの作成画面の「ファイル」から「プロジェクト構造」をクリックします。

クリックすると、「プロジェクト構造」のウインドウが表示されますので、「All Modules」を選択し「All Dependencies」から「+」ボタンをクリックします。

クリックすると、プルダウンメニューが表示されますので「Module Dependency」をクリックします。

クリックすると、「Add Module Dependency」というウインドウが表示されますので、opencvを選択し「OK」ボタンをクリックします。

クリックすると、「Select at least one module」という警告が表示され、モジュール依存性の追加が行うことができません。

■モジュール依存性の追加が行うことができないので対処する

対処するために、プロジェクトを再度作成します。作成後、プロジェクトの作成画面の上部にあるメニューから「ファイル」をクリックします。クリックするとプルダウンメニューが表示されますので、「新規」をクリックし、さらに「import Module..」をクリックします。

クリックすると、「Import Module from Source」というウインドウが表示されます。ウインドウ内の「フォルダ」のアイコンをクリックします。

クリックした後に、先程展開（解凍）した「opencv-4.2.0-android-sdk」内の「OpenCV-android-sdk」の「sdk」を選択します。「Java」は選択しません。

選択後「OK」ボタンをクリックします。

「Module name」には、自動的にAndroid Studioがモジュールを取得して名前を設定するようですが、「opencv」と変更します。変更後「完了」ボタンをクリックします。

To build this project, accept the SDK license agreements and install the missing components using the Android Studio SDK Manager.
Alternatively, to transfer the license agreements from one workstation to another, see http://d.android.com/r/studio-ui/export-licenses.html

Using Android SDK: C:\Users\user_\AppData\Local\Android\Sdk

クリックすると、「opencv」モジュールがインポート。プロジェクトの作成画面に上記のエラーが表示されます。表示された下に「Install latest NDK and sync project」という文字が表示されていますので、こちらをクリックします。

クリックすると、「SDK Quickfix Installation」というウインドウが表示されます。ウインドウ内には「Licence Agreement（ライセンス契約）」と表示され、「Licence」の「android-sdk-licence」の「NDK(Sidebyside）」が選択され、「Terms and Conditions（ご利用条件）」が表示されていますので、翻訳ツールで確認し「Accept（受け入れ）」にチェックを入れます。

その後、「次へ」ボタンをクリックします。

クリックすると、ウインドウに「Component Installer（コンポーネント・インストーラ）」と表示され、要求されたコンポーネント「NDK(Sidebyside）」のインストールが開始されます。

しばらくすると、インストールが完了となりますので、「完了」ボタンをクリックします。

クリックすると、今度はエラーが表示されなくなり、ビルドが開始され、「BUILD SUCCESSFUL」となります。

■プロジェクト構造を変更する

追加後、プロジェクト構造を変更します。変更する際は、プロジェクトの作成画面の「ファイル」から「プロジェクト構造」をクリックします。

クリックすると、「プロジェクト構造」のウインドウが表示されますので、「Modules」から「app」を選択し、「Declared Dependencies」から「+」ボタンをクリックします。

クリックすると、プルダウンメニューが表示されますので「Module Dependency」をクリックします。

クリックすると、「Add Module Dependency」というウインドウが表示されますので、opencvを選択し「OK」ボタンをクリックします。

■ネイティブライブラリを追加する

クリック後、プロジェクトの作成画面の「app」が表示されている箇所で、右クリックします。すると、プルダウンメニューが表示されますので、「新規」-「Folder」-「JIN Folder」をクリックします。

クリックすると、「New Andoroid Component」というウインドウが表示されます。ウインドウ内の「Change Folder Location」のチェックボックスにチェックを入れます。チェック後、「New Folder Location」の入力欄の「src/main/jni/」を、「src/main/jniLibs」に変更します。

変更後、「完了」ボタンをクリックします。クリックすると、「JIN Folder」が作成されます。

作成後、ネイティブライブラリを追加するために、「opencv-4.2.0-android-sdk」内の「OpenCV-android-sdk」の「sdk」フォルダを確認します。「native」フォルダがあるのでこの中身を確認します。

確認すると「libs」フォルダがあるので、これをコピーします。

コピー後、「C:\Users\***\AndroidStudioProjects\MyApplication<プロジェクト名>\app\src\main」のディレクトリに移動し、コピーした「libs」の中身（「libs」フォルダ以外）を「jniLibs」に入れます。これで、OpenCVライブラリをAndroidアプリケーション（プロジェクト）へ追加する作業が完了となります。

■OpenCVが正常に追加されたかどうかを確認する

完了後、OpenCVが正常に追加されたかどうかを確認してみます。

プロジェクトの作成画面の「MainActivity.java」を編集します。

■コード

package com.example.myapplication;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;

import org.opencv.android.OpenCVLoader;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        if(OpenCVLoader.initDebug()){
            Log.d("Check","OpenCv configured successfully");
        }else{
            Log.d("Check","OpenCv doesn't configured successfully");
        }
    }
}

上記のようにコードを編集し保存。

保存後、プロジェクトの作成画面の上部にある「実行」ボタンをクリックします。クリックすると、ビルドが開始されます。

開始後、しばらくすると、「Gradle Invocation Finished（Gradle の呼び出しが完了しました）」とWindowsの通知が表示されます。

また、プロジェクトの作成画面の下にある「Build」を確認すると、「BUILD SUCCESSFUL in 3s 51 actionable tasks: 3 executed, 48 up-to-date」と出力されますので、このような出力がでればビルドは完了となります。

Manifest merger failed : uses-sdk:minSdkVersion 17 cannot be smaller than version 21 declared in library [:opencv] C:\Users\user_\AndroidStudioProjects\MyApplication\opencv\build\intermediates\merged_manifest\debug\AndroidManifest.xml as the library might be using APIs not available in 17
Suggestion: use a compatible library with a minSdk of at most 17,
or increase this project’s minSdk version to at least 21,
or use tools:overrideLibrary=”org.opencv” to force usage (may lead to runtime failures)

なお、ビルドを開始し、上記のようなエラーが表示される場合があります。

このエラーを解決する場合は、「C:\Users\user_\AndroidStudioProjects\MyApplication<プロジェクト名>\app」のディレクトリ内にある「build.gradle」のファイルを編集します。

defaultConfig {
applicationId "com.example.myapplication"
minSdkVersion 21
targetSdkVersion 30
versionCode 1
versionName "1.0"

testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
}

ファイル内に上記のコードが書かれていますので、「minSdkVersion」の部分を変更します。エラーを確認すると「this project’s minSdk version to at least 21」となっていますので、「minSdkVersion」を「21」に変更し、保存します。保存後、プロジェクトの作成画面の上部にある「実行」ボタンをクリックすると、正常にビルドが開始されます。

■正常に追加されたかどうかを確認する

ビルドが完了後、正常に追加されたかどうかを確認するために、プロジェクトの作成画面の下にある「Logcat」をクリックします。

クリックすると、ログの出力が確認できますので、「OpenCv configured successfully」と出力されていれば、OpenCVが正常に追加されています。

■GoogleAppsScriptを作成

まずは、GoogleアカウントでGoogleドライブ（https://drive.google.com/drive/u/0/my-drive）にアクセスします。

アクセスし、左側のメニューから「新規」ボタンをクリックします。

クリックするとプルダウンメニューが表示されますので、メニューの中から「その他」をクリックします。クリックすると、さらにプルダウンメニューが表示されますので、メニューの中から「Google Apps Script」をクリックします。

クリックすると、Apps Scriptのプロジェクトの作成画面が表示されます。こちらの画面で、Web サイトをスクレイピングするスクリプトを作成していきます。

■Webサイトのデータを取得する

作成後、Webサイトのデータを取得するスクリプトを書いていきます。

■コード

function scrapewebpage() {
  var newurl = "https://www.yahoo.co.jp/";
  var response = UrlFetchApp.fetch(weburl);
  Logger.log(response)
}

今回は、newurl変数を宣言し、その中にデータを取得するサイトのURLを指定します。今回はYahoo!Japan（https://www.yahoo.co.jp/）を指定しています。指定後、格納します。

格納後、response変数を宣言し、UrlFetchApp.fetch()関数を使用し、GETリクエストを行います。UrlFetchApp.fetch()関数の括弧内に、引数,パラメーターとして、newurl変数を渡します。

その後、Logger.log()関数で、response変数のログを出力します。

■実行

スクリプトを実行する際は、プロジェクトの作成画面の「選択した機能を実行」ボタンをクリックします。

クリックすると「承認が必要です」というウインドウが表示されますので、ウインドウ内の「権限を確認」ボタンをクリックします。

クリックすると、ウインドウが表示されます。ウインドウ内には「Googleにログイン」と表示され「アカウントの選択」と表示されていますので、表示されたお持ちのアカウントを選択します。

選択すると、ウインドウ内に「このアプリは Google で確認されていません」という警告が表示されます。

アプリが、Google アカウントのプライベートな情報へのアクセスを求めています。デベロッパー（<メールアドレス>）と Google によって確認されるまで、このアプリを使用しないでください。

ウインドウ内には、上記のメッセージが表示されており、不安になりますが、ウインドウ内の「詳細」という文字をクリックします。

クリックすると、ウインドウ内に追加で文章が表示されます。

リスクを理解し、デベロッパー（<メールアドレス>）を信頼できる場合のみ、続行してください。

追加された文章は上記になります。そして追加された文章の下に「無題のプロジェクト（安全ではないページ）に移動」という文字が表示されているので、こちらをクリックします。

クリックすると、ウインドウが表示され、「<プロジェクト名> が Google アカウントへのアクセスをリクエストしています」と表示されています。さらに「<プロジェクト名> に以下を許可します:」と表示されており、「外部サービスへの接続」が表示されています。

Webサイトのデータを取得するために、「外部サービスへの接続」を許可する必要がありますので、ウインドウ下の「許可」ボタンをクリックします。クリックすると、ウインドウが閉じます。

これで「外部サービスへの接続」許可を承認完了となります。

完了後、プロジェクトの作成画面の「実行ログ」に「このプロジェクトを実行するには、ご利用の Google アカウントへのアクアセスを許可する必要があります。再試行して、許可してください。」という警告が表示されていますが、再度「選択した機能を実行」ボタンをクリックします。

クリックすると、「実行ログ」に「実行開始」と表示され、GETリクエストが行われ、指定したWebサイトのデータを取得し、出力されました。

なお、「AppSheet Automation」を利用する際はGoogleアカウントが必要になります。

■AppSheetにアクセスする

まずはAppSheet（https://www.appsheet.com/）にアクセスします。

アクセスすると、「Start for free」ボタンがありますので、こちらをクリックします。

クリックすると、「Start with your data（データから始める）」と表示されたページが表示されます。AppSheetでは、ページ内に表示された好きなクラウドストレージプロバイダーを通じて接続しますので、今回は「Google Sheets and Forms」、「Excel on Office365」「Excel on Dropbox」、「Smartsheet 」、「Salesforce」、「Excel on Box」の中から「Google Sheets and Forms」をクリックします。

クリックすると、「Googleにログイン」という表示があらわれますので、お持ちのGoogleアカウントを選択します。

選択すると「AppSheet が Google アカウントへのアクセスをリクエストしています」と表示されますので、リクエストを許可するために「許可」ボタンをクリックします。

クリックすると、「AppSheet FREE」と表示されたAppSheetのコンソール画面が表示されます。これで「AppSheet Automation」の無料版への登録は完了となります。

■サンプルアプリを使用する

完了後、AppSheetコンソール画面の上部にあるメニューから「Sample apps」をクリックします。

クリックすると、「Copy and Customize Sample Apps（サンプルアプリのコピー＆カスタマイズ）」というページが表示されます。このページでは、すでに作成済みのサンプルアプリをライブラリ内から選び、使用することができます。

今回は、「To Do List（To Do リスト、タスク管理）」をクリックします。

クリックすると、「To Do List」の詳細ページへ移動します。ページ内の「Copy and Customize（コピー＆カスタマイズ）」をクリックします。

クリックすると、「Clone your App（アプリのクローン）」というウインドウが表示されます。ウインドウ内では「App name（アプリの名前）」と「Category（カテゴリー）」を入力、選択します。選択後、「Copy app（コピーアプリ）」ボタンをクリックします。

クリックすると、アプリのコピーが開始され、新しいアプリの作成が開始されます。

しばらくすると、コピーされ新しく作成されたアプリのカスタマイズ（編集）画面が表示されます。ここで一旦、コンソール上のメニューから「My apps（あなたのアプリ）」をクリックします。

クリックすると、「My apps（あなたのアプリ）」のページが表示され、ページ内に「Prototype Apps（プロトタイプのアプリ）」の項目に「To Do List」が追加されていることが確認できます。

■アプリをデプロイ（利用できる状態）にする

再び、「My apps（あなたのアプリ）」から「To Do List」をクリックして、カスタマイズ（編集）画面に戻ります。戻った後に、「To Do List」アプリをデプロイ（利用できる状態）してみます。

カスタマイズ（編集）画面の左側メニューから「Manage（管理）」をクリックします。クリックすると「Manage（管理）」のページが表示されますので、この中で「Deploy（デプロイ）」をクリックします。クリックすると、「Deployment Check（デプロイメント・チェック）」という項目があるので、こちらをクリックします。

クリックすると、「Run deployment check（デプロイメントチェックの実行）」ボタンがありますので、こちらをクリックします。

クリックすると、デプロイする前にアプリのチェックが実行されます。実行後、チェックされた項目が表示されます。各項目には、「PASSED（合格）」、「WARNING（警告）」、「ERROR（エラー）」のマークが表示されますので、合格マークが表示されたもの以外の修正します。なお、各項目はクリックすると、なぜ警告、エラーが表示されたのかの原因が表示されます。

チェック項目が表示された下には「Move app to deployed state despite errors（エラーがあってもアプリをデプロイ状態にする）」ボタンと「Continue editing（編集を続ける）」ボタンがあります。今回はテストで「Move app to deployed state despite errors（エラーがあってもアプリをデプロイ状態にする）」をクリックします。

クリックすると、「Your app To Do List is deployed.（アプリのTo Do Listが展開されます。）」と表示されます。これでデプロイは完了となります。

完了となりますが、今回は無料版を利用していますので、カスタマイズ（編集）画面の左側メニューの「My account」に警告マークが表示されています。表示されていますので、確認のため、クリックします。

クリックすると、「My account」のページが表示されます。ページ内に下記のメッセージが表示されています。

Plan upgrade needed — click to fix it!
You should be on the AppSheet Starter secure plan. Please see the App Info pane for details. （プランのアップグレードが必要です – クリックして修正してください
AppSheet Starterのセキュアなプランをご利用ください。詳細は「App Info」ペインを参照してください。）

また、「ToDoList-3149838: User signin not allowed with the FREE plan, ToDoList-3149838: Offline access not allowed with the FREE plan（ToDoList-3149838：FREEプランでユーザーサインインができない、ToDoList-3149838：FREEプランでオフラインアクセスができない）」と表示されています。デプロイは完了していますが、無料版ではユーザーサインインとオフラインアクセスができない。これを可能にするには、料金プランを変更する（アップグレードする）。

■PC（パソコン）上でサンプルアプリを使用する

デプロイ後、PC（パソコン）上でサンプルアプリを使用してみます。その場合は、「My account」のページで、今回作成したサンプルアプリの名前が表示されています。その左側にコメントのマークがありますので、こちらをクリックします。

クリックすると、「ToDoList」アプリが起動し表示されます。

起動後、タスクを追加してみますので、追加ボタンをクリックします。

クリックすると、タスクの詳細を記入・選択する画面が表示されますので、各項目を記入・選択します。その後「Save」ボタンをクリックします。

クリックすると、「ToDoList」アプリにタスクが追加されました。

追加後、このアプリをハンバーガーメニューをクリックしログアウトするか、もしくはブラウザのアプリ画面を閉じます。

閉じた後、再び「AppSheet」にログインし、「ToDoList」アプリを起動します。

起動してみると、先ほど追加したタスクは削除されずにアプリに保存されていることが確認できました。

なお、お持ちのGoogleアカウントのGoogleドライブを確認すると、「To Do」というGoogleスプレッドシートを作成されてます。スプレッドシートを確認すると、「ToDoList」アプリのタスクが保存されていることが確認できます。

■スマートフォン（Android）からサンプルアプリを起動する

スマートフォン（Android）からサンプルアプリを起動してみます。スマートフォン（Android）は「Moto g8 power（Android バージョン10）」を使用します。

「Play ストア」アプリを起動し、「検索」をタップします。

「AppSheet」と検索すると、「AppSheet」アプリが表示されますので、「インストール」ボタンをタップします。

タップしてしばらくするとインストールが完了し、「開く」ボタンが表示されますので、タップします。

タップすると、アプリが起動し、サインイン画面が表示されます。画面内の今回はGoogleを選択します。

選択すると、アカウントの選択画面が表示されますので、サンプルアプリを作成したアカウントを選択します。

選択すると、アプリが起動します。起動後、ハンバーガーメニューをタップします。

タップすると、メニューが表示されますので「Created by me」をタップします。

タップすると、PC（パソコン）上で作成した「ToDoList」アプリが表示されますので、タップします。

タップすると、「ToDoList」アプリが起動し、表示されます。なお、PC（パソコン）上で追加したタスクはクラウド上で保存されていますので、スマートフォンから「ToDoList」アプリを起動しても、追加したタスクは表示されます。

■PC環境

Windows10

firebase cli 9.10.0

Visual Studio Code 1.55.0

■Firebase Realtime Databaseの設定

まず、Firebase Realtime Databaseの設定を行いますので、Googleアカウントを取得（登録）した後に、「Firebase – Google」にアクセスします。

アクセスすると、「使ってみる」というボタンがありますので、こちらをクリックします。

クリックすると、「Firebaseへようこそ」と表示されます。ページ内の「プロジェクトを作成」ボタンをクリックします。

クリックすると、「プロジェクトの作成」のページが表示されますので、「プロジェクト名」でプロジェクトの名前を入力します。その後、「Firebase の規約に同意します」でFirebase の規約を確認し、チェックボックスにチェックを入れます。入れた後に「続行」ボタンをクリックします。

クリックすると、「Google アナリティクス （Firebase プロジェクト向け）」を有効にするかどうかを設定するページが表示されます。今回は「このプロジェクトで Google アナリティクスを有効にする」と設定し、「続行」ボタンをクリックします。

クリックすると、「Googleアナリティクスの構成」ページが表示されますので、「アナリティクスの地域」を「日本」に設定し、Google アナリティクス利用規約を読み、「Google アナリティクス利用規約に同意します。」のチェックボックスにチェックを入れます。その後、「プロジェクトを作成」ボタンをクリックします。

クリックすると、プロジェクトの作成が開始されます。

しばらくすると、「新しいプロジェクトの準備ができました」と表示されますので、「続行」ボタンをクリックします。

■Firebaseコンソールでデータベースを作成する

クリックすると、プロジェクトの作成が完了します。完了後、Firebaseコンソールの左側に「構築」という項目がありますので、こちらをクリックします。

クリックすると、プルダウンメニューが表示されますので、「Realtime Database」をクリックします。

クリックすると、「Realtime Database」のページが表示されます。ページ内の「データベースを作成」ボタンをクリックします。

クリックすると、「データベースの設定」というウインドウが表示されます。ウインドウ内では、まず「データベースのオプション」が表示されますので、今回は「Realtime Database のロケーション」で「米国」を選択し、「次へ」ボタンをクリックします。

クリックすると、「セキュリティ ルール」が表示されます。「セキュリティ ルール」では、「ロックモードで開始」か「テストモードで開始」のいずれか選択します。今回は「テストモードで開始」を選択し、「有効にする」ボタンをクリックします。

クリックすると、データベースの作成が開始されます。その後、表示されます。これでデータベースの作成は完了です。

■ウェブアプリにFirebaseを追加する

次にウェブアプリにFirebaseを追加しますので、「プロジェクトの概要」をクリックします。

「プロジェクトの概要」が表示されますので、概要から「ウェブ」ボタンをクリックします。

クリックすると、「ウェブアプリにFirebaseを追加する」と表示されますので、「アプリの登録」で「アプリのニックネーム」でニックネームを入力します。入力後、「アプリを登録」ボタンをクリックします。なお、「このアプリのFirebaseHostingも設定します。」にはチェックを入れません。

クリックすると、「Firebase SDK の追加」が表示されます。表示後、「コンソールに進む」ボタンをクリックします。

クリックすると、「プロジェクトの概要」に戻ります。

■ウェブアプリを作成する

戻った後、Windows10のデスクトップ上に、「firebase_realtime_database」というフォルダを作成し、コードエディタ（Visual Studio Code）を開きます。

Firebase Realtime Databaseを使用し、データベース作成を行い、データの登録を行いますが、データを入力し送信するために、今回は簡易のウェブアプリを作成します。

■index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Firebase Realtime Databaseのテスト</title>
        <meta name="description" content="ディスクリプション">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <main>
            <form>
                <label for="userid">ユーザーID</label><br>
                <input type="text" name="userid" id="userid"><br>
                <label for="firstname">苗字</label><br>
                <input type="text" name="firstname" id="firstname"><br>
                <label for="lastname">名前</label><br>
                <input type="text" name="lastname" id="lastname"><br>    
                <button id="addbtn">追加</button>                            
            </form>
        </main>
<script src="./functions.js"></script>
    </body>
</html>

■functions.js

const userid = document.getElementById('userid');
const firstname = document.getElementById('firstname');
const lastname = document.getElementById('lastname');
const addbtn = document.getElementById('addbtn');

const database = firebase.database();

addbtn.addEventListener('click',(e) => {
    e.preventDefault();
    database.ref('/users/'+ userid.value).set({
        first_name: firstname.value,
        last_name: lastname.value,
    });
});

コードエディタ（Visual Studio Code）上で「firebase_realtime_database」の中に、今回は「index.html」と「functions.js」という2つのファイルを作成し、保存します。

■Firebase SDK snippetを追加する

保存後、Firebaseコンソールの左側に「プロジェクトの概要」で歯車のマークがありますので、こちらをクリックします。

クリックすると、メニューが表示されますので「プロジェクトを設定」をクリックします。

クリックすると、「Firebase SDK snippet」という項目がありますので、「CDN」になっていることを確認し、表示されたのスクリプトをコピーします。

■index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Firebase Realtime Databaseのテスト</title>
        <meta name="description" content="ディスクリプション">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <main>
            <form>
                <label for="userid">ユーザーID</label><br>
                <input type="text" name="userid" id="userid"><br>
                <label for="firstname">苗字</label><br>
                <input type="text" name="firstname" id="firstname"><br>
                <label for="lastname">名前</label><br>
                <input type="text" name="lastname" id="lastname"><br>    
                <button id="addbtn">追加</button>                            
            </form>
        </main>
        <!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-database.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-analytics.js"></script>

<script>
  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    apiKey: "******",
    authDomain: "******",
    databaseURL: "******",
    projectId: "******",
    storageBucket: "******",
    messagingSenderId: "******",
    appId: "******",
    measurementId: "******"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>
<script src="./functions.js"></script>
    </body>
</html>

コピー後、「firebase_realtime_database」のindex.htmlに貼り付けます。この時に「<script src=”./functions.js”></script>」のタグより上に「<script src=”https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js”></script>」などのタグを貼り付けます。これでfirebase.jsを先に読み込ませることができます。先に読み込ませないと、「ReferenceError: firebase is not defined」というエラーが発生しますので、注意が必要です。

貼り付けた後、「<script src=”https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js”></script>」の直下に「<script src=”https://www.gstatic.com/firebasejs/8.4.1/firebase-database.js”></script>」のタグを追加しておきます。追加後、保存します。

■プロジェクトをローカルで起動する

保存後、「firebase_realtime_database」を、今回は「C:\Users\Administrator」という場所に移動しておきます。

移動後、Firebase CLIのインストールが完了している状態で、Windows10の「ここに入力して検索」で「cmd」を入力し、コマンドプロンプトを起動します。

C:\Users\Administrator>cd firebase_realtime_database

起動後、上記のコマンドを入力し、エンターキーを押します。「firebase_realtime_database」に移動します。

C:\Users\Administrator\firebase_realtime_database>firebase login

移動後、上記のコマンドを入力し、エンターキーを押します。

Allow Firebase to collect CLI usage and error reporting information? (Y/n)（ FirebaseがCLIの使用状況やエラー報告情報を収集することを許可しますか？(Y/n)）

エンターキーを押すと、上記の質問が表示されますので、「Y」と入力しエンターキーを押します。

Visit this URL on this device to log in:

ログイン - Google アカウント

accounts.google.com

〇〇

エンターキーを押すと、上記のメッセージが表示され、Webブラウザが起動します。

起動後、上記の「Googleにログイン」という表示がされますので、Firebaseでデータベース作成を行ったアカウントを選択します。

選択すると、「Firebase CLI が Google アカウントへのアクセスをリクエストしています」と表示されますので、許可するために「許可」ボタンをクリックします。

Firebase CLI Login Successful

You are logged in to the Firebase Command-Line interface. You can immediately close this window and continue using the CLI.(Firebase Command-Line インターフェイスにログインしています。このウィンドウをすぐに閉じて、CLIの使用を続けることができます。)

クリックすると、Webブラウザに上記のメッセージが表示されます。またコマンドプロンプトでは「Success! Logged in as 〇〇〇〇@gmail.com」と表示されます。これでFirebaseへのログインは完了となります。

C:\Users\Administrator\firebase_realtime_database>firebase init

ログイン後、上記のコマンドを入力し、エンターキーを押します。これでFirebase プロジェクトを初期化します。

エンターキーを押すと、「Firebase」と表示され、「Are you ready to proceed? (Y/n)続行する準備はできていますか？(Y/n)」と質問されますので、「Y」を入力し、エンターキーを押します。

エンターキーを押すと、「Which Firebase CLI features do you want to set up for this folder? （このフォルダにどのFirebaseCLI機能を設定しますか？）」と質問されますので、「Hosting: Configure and deploy Firebase Hosting sites」をスペースキーで選択しエンターキーを押します。

エンターキーを押すと、「Please select an option: (Use arrow keys)（選択してください。(矢印キーを使用)）」と表示されますので、「Use an existing project（既存のプロジェクトの利用）」を選択し、エンターキーを押します。

エンターキーを押すと、今回Firebaseで作成したプロジェクトの名前が表示されますので、選択し、エンターキーを押します。

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build’s output directory.（パブリックディレクトリは、Firebase deployでアップロードするホスティングアセットを格納するフォルダ（プロジェクトディレクトリからの相対パス）です。
firebase deployでアップロードするホスティングアセットを格納します。もし
アセットのビルドプロセスを行っている場合は、ビルドの出力ディレクトリを使用します。）

エンターキーを押すと、上記のメッセージが表示され、「パブリック・ディレクトリには何を使いますか？」と質問されますので、そのままエンターキーを押します。

エンターキーを押すと「Configure as a single-page app (rewrite all urls to /index.html)? (y/N)（シングルページアプリとして構成しますか）」と質問されますので、「y」と入力しエンターキーを押します。

エンターキーを押すと「 Set up automatic builds and deploys with GitHub? (y/N)（GitHubで自動ビルドとデプロイを設定するには？）」と質問されますので、「N」と入力しエンターキーを押します。

エンターキーを押すと「public/index.htmlというファイルがすでに存在しています。上書きしますか？」と質問されますので、「y」と入力しエンターキーを押します。

i Writing configuration info to firebase.json…
i Writing project information to .firebaserc…
i Writing gitignore file to .gitignore…

+ Firebase initialization complete!

エンターキーを押すと、「Firebase initialization complete!（Firebaseの初期化が完了しました。）」と表示されます。これで初期化は完了となります。

C:\Users\Administrator\firebase_realtime_database>firebase serve

完了後、Firebase プロジェクトをローカルで実行するために、上記のコマンドを入力し、エンターキーを押します。

=== Serving from ‘C:\Users\Administrator\firebase_realtime_database’…

i hosting: Serving hosting files from: public
+ hosting: Local server: http://localhost:5000

エンターキーを押すと、ローカルサーバーが起動します。

■Firebase Realtime Databasにデータを保存する（検証）

起動後、Webブラウザを起動し、アドレスバーに「http://localhost:5000/」を入力し、アクセスします。

Welcome
Firebase Hosting Setup Complete
You’re seeing this because you’ve successfully setup Firebase Hosting. Now it’s time to go build something extraordinary!（ようこそ
Firebase ホスティング設定完了
Firebase ホスティングのセットアップが完了しましたのでご紹介します。いよいよ、素晴らしいものを作りましょう。）

アクセスすると、上記のように表示されます。

表示後、「C:\Users\Administrator\firebase_realtime_database」フォルダを確認します。

確認すると、「public」というフォルダが作成されています。これが先ほど「http://localhost:5000/」をアクセスしたときに確認できたindex.htmlが保存されているフォルダになります。

今回は検証で、「index.html」と「functions.js」をコピーして、「public」というフォルダにコピーしたファイルを移動します。

移動後、「http://localhost:5000/」に再びアクセスすると、入力フォームが表示されますので、仮でユーザーIDと苗字、名前を入力し、「追加」ボタンをクリックします。

クリックした後に、Firebaseコンソールの「Realtime Database」を確認すると、送信されたデータがRealtime Databaseに登録されていることが確認できました。

なお、送信されたデータが登録できない、もしくはデータベースが更新されない場合は、Firebaseコンソールの「Realtime Database」の「ルール」をクリックします。

クリックすると、上記のようなルールになっています。これを下記のように変更します。

これでルールを保存すると、データが登録できるようになります。

※この手順を行うまえに、プロジェクトの「課金を無効にする」（https://cloud.google.com/billing/docs/how-to/modify-project#disable_billing_for_a_project）ことを行っておくことを推奨します。

■Google Cloud Platformにアクセスする

まずはお持ちのGoogleアカウントでログインし、Google Cloud Platform（https://console.cloud.google.com/home/dashboard）にアクセスします。

アクセスすると、ダッシュボードが表示されます。ダッシュボード内の左側にある「ナビゲーションメニュー」ボタンをクリックします。

■お支払いから請求先アカウントの閉鎖をする

クリックすると、メニューが表示されます。このメニュー内の「お支払い」をクリックします。

クリックすると、「お支払い」の「概要」が表示されます。「概要」内の「請求先アカウント」という項目の右側に「管理」という表示がありますので、こちらをクリックします。

クリックすると、「アカウント管理」の「お支払い」が表示されます。「アカウント管理」内の上部に表示されている「請求先アカウントを閉鎖」をクリックします。

クリックすると、「請求先アカウント「請求先アカウント」の閉鎖「請求先アカウント」を閉鎖する前に、次の点に留意する必要」というポップアップが表示されます。

ポップアップ内の「「閉じる」と入力して閉鎖」と表示されている欄に「閉じる」と入力します。

入力後、ポップアップ下の「請求先アカウントを閉鎖」がクリックできるようになりますので、クリックします。

クリックすると、「アカウント管理」内に「この請求先アカウントは閉鎖されています。リンクされているプロジェクトを引き続き使用するには、このアカウントを再開してください。」と表示されます。

これで請求先アカウントが閉鎖されましたので、料金を請求されることはありません。つまり、Google Cloud Platformの「サービスを解約」したことになります。サービスを解約しましたが、Googleアカウントは削除されません。

なお、請求先として設定した情報は削除できません。また、Googleアカウントを削除する場合はこちらからご確認ください。

以前、Firebaseを使ってWebアプリを制作していたのですが、制作してからFirebaseにはほとんど触れていなかったのですが、Gmailを確認すると、Firebaseから突然「Hosting ドメインの所有権を再確認してください」という通知が届きました。

■内容

プロジェクトの Hosting ドメインの所有権が確認できなくなりました。www.○○○.com の所有権の再確認期日まで残り 30 日 日です。これを過ぎると、削除されてコンテンツの配信が停止されます。
プロジェクト名 に接続しているドメイン www.○○○.com の所有権を再確認してください。
このドメインの前回の確認が無効となりました。これは、ユーザーがサイトの確認用 DNS レコードをドメイン プロバイダから削除した場合か、所有権の確認を実施したユーザーが Firebase プロジェクトでドメインを追加する権限を失った場合に起こる可能性があります。権限が付与されているロールには、オーナー、編集者、開発管理者などが該当します。

無効になった所有権確認
○○○
Hosting ドメイン
www.○○○.com
残り日数
30 日

届いた内容を確認すると、上記の内容でした。

■原因について調べて対処について考える

このような通知が突然届き、さらに「残り日数 30 日」という表示がこちら（制作者）を焦らせますが、こちら（制作者）の方で、Firebaseの設定は何も変更しておらず、届いた原因がわかりません。

もしかしたら、無料で利用できるSparkプランにしていることが原因かと考えましたが、そういうわけでもなさそうです。

とりあえず、通知のメールに表示されていた「ドメインの確認」ボタンをクリックしてみます。

クリックすると、「Firebase」の「Hosting」のダッシュボードが表示されました。ダッシュボード内の情報を確認するのですが、「ドメイン」の「ステータス」は「接続されています」となっていますと表示されています。それ以外はエラーなどは発生していません。

発生していませんが、「Firebase」の「Hosting」のダッシュボードの上部に、

You may have received one or more unexpected emails with the subject “[Firebase] Re-verify ownership of your Hosting domain”. These were sent by mistake and your domains’ verification status have not changed. No action is required, and your domains continue to serve traffic as normal.

（件名が「[Firebase] あなたのホスティングドメインの所有権を再確認する」の予期しない電子メールを受信した可能性があります。これらは間違って送られたもので、あなたのドメインの認証状態は変わっていません。アクションは不要で、ドメインは通常どおりトラフィックを処理し続けます。）

上記のメッセージが表示されており、翻訳して内容を読んでみると、「Hosting ドメインの所有権を再確認してください」という通知は間違って送られたものの可能性があるということで、何かこちら（制作者）で対処しなければいけないこと（アクション）はないよう。

アクションは不要だということで安心はしましたが、少々不安なので、不定期ではありますが「Firebase」の「Hosting」のダッシュボードを確認していきます。

■追記

Firebaseから突然「Hosting ドメインの所有権を再確認してください」という通知が届いた後に、またFirebaseから「Firebase Hosting domain re-verification email sent in error（エラーで送信されたFirebase Hostingドメイン再検証Eメール）」というメールが届きました。

Hi ○○○,
We are writing to let you know that an error in our domain verification check process for Firebase Hosting caused a number of emails with a subject line of: [Firebase] Re-verify ownership of your Hosting domain to be sent incorrectly. You’re receiving this email because you were sent one or more ownership re-verification notices between February 23 to February 24, 2021.

No action is required on your part to address this issue, and your domains have continued serving content as normal during this time. We are restoring any records that may have been mistakenly marked as unverified, and your domains will continue to serve content to users as normal.

We apologize for any inconvenience this may have caused.

If you continue to see errors in the console or to have problems with verifications, feel free to reach out to our support team.

Thanks,
Michael on behalf of the Firebase team

（こんにちは○○○
Firebase Hostingのドメイン検証プロセスでエラーが発生したため、 [Firebase] Re-verify ownership of your Hosting domainという件名のEメールが不正に送信されました。2月23日から2021年2月24日までの間に所有権の再確認通知が送付されたため、このEメールを受け取りました。

この問題に対処するためにユーザー側で対処する必要はありません。この期間、ドメインは通常どおりコンテンツを提供し続けています。誤って未確認とマークされたレコードを復元しており、お客様のドメインは通常どおりユーザーにコンテンツを提供し続けます。

ご迷惑をおかけして申し訳ございません。

コンソールにエラーが引き続き表示される場合、または検証で問題が発生する場合は、サポートチームにお問い合わせください。

ありがとう
Firebaseチームを代表するMichael）

メールの内容は上記です。

Firebase Hostingのドメイン検証プロセスでエラーが発生し、Eメールが不正に送信されたため、今回のメールを送信したようです。なお、「この問題に対処するためにユーザー側で対処する必要はありません。」ということなので、こちら（製作者）では何もしなくても良いということですが、ちょっと驚きました。