GSP185

概要

Cloud Storage では、世界中のどこからでも、いつでもデータを保存、取得できます。データの量に制限はありません。ウェブサイト コンテンツの提供、アーカイブと障害復旧のためのデータの保存、直接ダウンロードによるユーザーへの大きなデータ オブジェクトの配布など、さまざまなシナリオで Cloud Storage を使用できます。

このラボでは、Cloud Storage を使用してアプリケーション データを保存、取得するようにアプリケーションを構成します。使用するアプリケーションはオンライン クイズ アプリケーション、使用するデータはそのフォームデータです。フォームに含める画像をローカルマシンからアップロードします。

目標

このラボでは、次のタスクの実行方法について学びます。

• Cloud Shell を開発環境として設定する
• アプリケーション コードを更新して Cloud Datastore を統合する
• クイズ アプリケーションを使用して画像ファイルを Cloud Storage にアップロードし、その画像をクイズに表示する

設定と要件

[ラボを開始] ボタンをクリックする前に

こちらの説明をお読みください。ラボには時間制限があり、一時停止することはできません。タイマーは、Google Cloud のリソースを利用できる時間を示しており、[ラボを開始] をクリックするとスタートします。

このハンズオンラボでは、シミュレーションやデモ環境ではなく実際のクラウド環境を使って、ラボのアクティビティを行います。そのため、ラボの受講中に Google Cloud にログインおよびアクセスするための、新しい一時的な認証情報が提供されます。

このラボを完了するためには、下記が必要です。

• 標準的なインターネット ブラウザ（Chrome を推奨）

注: このラボの実行には、シークレット モード（推奨）またはシークレット ブラウジング ウィンドウを使用してください。これにより、個人アカウントと受講者アカウント間の競合を防ぎ、個人アカウントに追加料金が発生しないようにすることができます。

• ラボを完了するための時間（開始後は一時停止できません）

注: このラボでは、受講者アカウントのみを使用してください。別の Google Cloud アカウントを使用すると、そのアカウントに料金が発生する可能性があります。

ラボを開始して Google Cloud コンソールにログインする方法

1. [ラボを開始] ボタンをクリックします。ラボの料金をお支払いいただく必要がある場合は、表示されるダイアログでお支払い方法を選択してください。 左側の [ラボの詳細] ペインには、以下が表示されます。

   • [Google Cloud コンソールを開く] ボタン
   • 残り時間
   • このラボで使用する必要がある一時的な認証情報
   • このラボを行うために必要なその他の情報（ある場合）

2. [Google Cloud コンソールを開く] をクリックします（Chrome ブラウザを使用している場合は、右クリックして [シークレット ウィンドウで開く] を選択します）。

   ラボでリソースがスピンアップし、別のタブで [ログイン] ページが表示されます。

   ヒント: タブをそれぞれ別のウィンドウで開き、並べて表示しておきましょう。

   注: [アカウントの選択] ダイアログが表示されたら、[別のアカウントを使用] をクリックします。

3. 必要に応じて、下のユーザー名をコピーして、[ログイン] ダイアログに貼り付けます。

   {{{user_0.username | "Username"}}}

   [ラボの詳細] ペインでもユーザー名を確認できます。

4. [次へ] をクリックします。

5. 以下のパスワードをコピーして、[ようこそ] ダイアログに貼り付けます。

   {{{user_0.password | "Password"}}}

   [ラボの詳細] ペインでもパスワードを確認できます。

6. [次へ] をクリックします。

   重要: ラボで提供された認証情報を使用する必要があります。Google Cloud アカウントの認証情報は使用しないでください。 注: このラボでご自身の Google Cloud アカウントを使用すると、追加料金が発生する場合があります。

7. その後次のように進みます。

   • 利用規約に同意してください。
   • 一時的なアカウントなので、復元オプションや 2 要素認証プロセスは設定しないでください。
   • 無料トライアルには登録しないでください。

その後、このタブで Google Cloud コンソールが開きます。

注: Google Cloud のプロダクトやサービスにアクセスするには、ナビゲーション メニューをクリックするか、[検索] フィールドにサービス名またはプロダクト名を入力します。

Cloud Shell をアクティブにする

Cloud Shell は、開発ツールと一緒に読み込まれる仮想マシンです。5 GB の永続ホーム ディレクトリが用意されており、Google Cloud で稼働します。Cloud Shell を使用すると、コマンドラインで Google Cloud リソースにアクセスできます。

1. Google Cloud コンソールの上部にある「Cloud Shell をアクティブにする」アイコン をクリックします。

2. ウィンドウで次の操作を行います。

   • Cloud Shell 情報ウィンドウで操作を進めます。
   • Cloud Shell が認証情報を使用して Google Cloud API を呼び出すことを承認します。

接続した時点で認証が完了しており、プロジェクトに各自の Project_ID、 が設定されます。出力には、このセッションの PROJECT_ID を宣言する次の行が含まれています。

Your Cloud Platform project in this session is set to {{{project_0.project_id | "PROJECT_ID"}}}

gcloud は Google Cloud のコマンドライン ツールです。このツールは、Cloud Shell にプリインストールされており、タブ補完がサポートされています。

3. （省略可）次のコマンドを使用すると、有効なアカウント名を一覧表示できます。

gcloud auth list

4. [承認] をクリックします。

出力:

ACTIVE: * ACCOUNT: {{{user_0.username | "ACCOUNT"}}} To set the active account, run: $ gcloud config set account `ACCOUNT`

5. （省略可）次のコマンドを使用すると、プロジェクト ID を一覧表示できます。

gcloud config list project

出力:

[core] project = {{{project_0.project_id | "PROJECT_ID"}}} 注: Google Cloud における gcloud ドキュメントの全文については、gcloud CLI の概要ガイドをご覧ください。

Cloud Shell コードエディタを起動する

1. Cloud Shell で [エディタを開く] をクリックして、コードエディタを起動します。

注: Cloud Shell のほかに、ブラウザの別のタブでコードエディタが起動します。

2. 次のコマンドを実行してプロジェクト ID を構成します。このとき YOUR-PROJECT-ID は実際のプロジェクト ID に置き換えます。

gcloud config set project <YOUR-PROJECT-ID>

タスク 1. クイズ アプリケーションを準備する

このセクションでは、Cloud Shell にアクセスしてクイズ アプリケーションを含む git リポジトリのクローンを作成し、アプリケーションを実行します。

Cloud Shell でソースコードのクローンを作成する

• 次のコマンドを実行して、クラスのリポジトリのクローンを作成します。

git clone https://github.com/GoogleCloudPlatform/training-data-analyst

クイズ アプリケーションを構成し、実行する

1. 作業ディレクトリを変更します。

   cd ~/training-data-analyst/courses/developingapps/python/cloudstorage/start

2. 変数を使用してリージョンを設定します。

   REGION={{{project_0.default_region | REGION}}} sed -i s/us-central/$REGION/g prepare_environment.sh

3. アプリケーションを構成します。

   . prepare_environment.sh 注: 警告が表示されても無視します。

   このスクリプト ファイルを実行すると、以下の処理が行われます。

   • App Engine アプリケーションを作成する。
   • 環境変数 GCLOUD_PROJECT をエクスポートする。
   • pip を更新し、その後 pip install -r requirements.txt を実行する。
   • Cloud Datastore でエンティティを作成する。
   • プロジェクト ID を出力する。

4. アプリケーションを実行します。

   python run_server.py

   アプリケーションの実行が開始されると、次のような出力が表示されます。

   * Running on http://127.0.0.1:8080/ (Press CTRL+C to quit) * Restarting with stat * Debugger is active! * Debugger PIN: 502-577-323

クイズ アプリケーションを確認する

1. [ウェブでプレビュー] アイコン > [ポート 8080 でプレビュー] をクリックして、アプリケーションをプレビューします。

2. ツールバーの [Create Question] をクリックします。

シンプルなフォームが表示されます。このフォームには、質問と解答用のテキスト ボックスと、正解を選択するためのラジオボタンが含まれています。

注: このフォームには、ファイル アップロード用の新しい項目があります。画像ファイルをアップロードすることも、動画ファイルをアップロードすることもできます。このラボでは画像ファイルをアップロードしますが、動画ファイルをアップロードする場合もプロセスは同じです。

タスク 2. クイズ アプリケーションのコードを調べる

このセクションでは、このケーススタディ用アプリケーションのコードを確認します。

このラボでは、ファイルの閲覧と編集を行います。Cloud Shell にインストールされている nano や vim などの shell エディタや、Cloud Shell コードエディタを使用できます。

このラボでは、Cloud Shell コードエディタを使用してこのクイズ アプリケーションのコードを確認します。

アプリケーションのコードを確認する

1. エディタの左側にあるファイル ブラウザ パネルを使用して、/training-data-analyst/courses/developingapps/python/cloudstorage/start フォルダに移動します。

2. ...quiz/webapp/templates/ フォルダにある add.html ファイルを選択します。

   このファイルには、Create Question フォームのテンプレートが含まれています。

   フォームが変更されていることに注意してください。enc-type に multipart/form-data が使用され、次の 2 つのフォーム コントロールが追加されています。

   • image: ファイル アップロード用コントロール
   • imageUrl: 非表示項目

3. ...quiz/webapp フォルダにある routes.py ファイルを選択します。

   このファイルには、フォームデータを受け取る POST ハンドラのルートが含まれています。フォームから画像ファイルを取得するように変更されています。

4. ...quiz/webapp フォルダにある questions.py ファイルを選択します。

   このファイルには、routes.py ファイルで抽出されたフォームデータを処理するハンドラが含まれています。Cloud Storage のクライアントである新しいモジュールを使用できるように、このファイルを変更します。

5. ...quiz/gcp/storage.py ファイルを選択します。

   このファイルに、画像ファイルのデータを Cloud Storage に保存するためのコードを記述します。

タスク 3. Cloud Storage バケットを作成する

このセクションでは、Cloud Storage バケットを作成し、それを参照する環境変数をエクスポートします。

1. Cloud Shell コマンドラインに戻ります。

2. Ctrl+C キーを押してアプリケーションを停止します。

3. <プロジェクト ID>-media という名前の Cloud Storage バケットを作成します。

   gsutil mb gs://$DEVSHELL_PROJECT_ID-media

   バケットを作成するには gsutil mb コマンドを使用します。バケットの名前として gs://BUCKET_NAME を渡します。

   接頭辞 $DEVSHELL_PROJECT_ID に -media を付けたバケット名を使用します。

4. 次のコマンドを実行して、Cloud Storage バケット名を GCLOUD_BUCKET という名前の環境変数としてエクスポートします。

export GCLOUD_BUCKET=$DEVSHELL_PROJECT_ID-media 注: 前述のとおり、このアプリケーションでは、構成に環境変数を利用します。 開発チームはこれらの変数を変更するだけで、開発、テスト、ステージング、本番の各環境にアプリケーションをデプロイできます。

[進行状況を確認] をクリックして、目標に沿って進んでいることを確認します。

バケットを作成する

タスク 4. Cloud Storage にオブジェクトを追加する

このセクションでは、アップロードされたファイルを Cloud Storage に保存するためのコードを記述します。

注: 次の文字列の間のコードを更新してください。

# TODO

# END TODO

学習効果を最大限に高めるために、コード、インライン コメント、関連する API ドキュメントを確認してください。

Cloud Storage の API ドキュメントについて詳しくは、API とリファレンスをご覧ください。

Python の Cloud Storage モジュールをインポートして使用する

1. コードエディタで ...quiz/gcp/storage.py ファイルの先頭に移動します。
2. GCLOUD_BUCKET 環境変数からバケット名を取得します。
3. google.client パッケージから storage モジュールをインポートします。
4. Cloud Storage クライアントを作成します。
5. Cloud Storage バケットへの参照を取得します。

quiz/gcp/storage.py

# TODO: GCLOUD_BUCKET 環境変数から # バケット名を取得する bucket_name = os.getenv('GCLOUD_BUCKET') # END TODO # TODO: storage モジュールをインポートする from google.cloud import storage # END TODO # TODO: Cloud Storage のクライアントを作成する storage_client = storage.Client() # END TODO # TODO: クライアントを使用して Cloud Storage バケットを取得する bucket = storage_client.get_bucket(bucket_name) # END TODO

Cloud Storage にファイルを送信するコードを記述する

1. 引き続き storage.py で、upload_file(...) 関数の既存の pass ステートメントを削除してから、Cloud Storage クライアントを使用して、Cloud Storage バケットにファイルをアップロードして公開します。
2. バケット内の Cloud Storage blob オブジェクトへの参照を取得します。
3. その blob オブジェクトを使用して画像をアップロードします。
4. ファイルを公開します。
5. blob の公開 URL を返します。

quiz/gcp/storage.py - upload)file(...) 関数

""" 指定した Cloud Storage バケットにファイルをアップロードし、新しいオブジェクトの公開 URL を返します。 """ def upload_file(image_file, public): # TODO: バケットを使用して blob オブジェクトを取得する blob = bucket.blob(image_file.filename) # END TODO # TODO: blob を使用してファイルをアップロードする blob.upload_from_string( image_file.read(), content_type=image_file.content_type) # END TODO # TODO: オブジェクトを一般公開する if public: blob.make_public() # END TODO # TODO: blob の公開 URL を返すように変更する return blob.public_url # END TODO

6. storage.py を保存します。

Cloud Storage の機能を使用するためのコードを記述する

1. エディタで ...quiz/webapp/questions.py ファイルの先頭に移動します。
2. datastore クライアントだけでなく storage クライアントも使用できるように import ステートメントを変更します。
3. upload_file(...) 関数に移動します。storage クライアントを使用してファイルをアップロードし、返された公開 URL を変数に代入します。
4. その公開 URL を返すように return ステートメントを変更します。
5. save_question(...) 関数に移動します。image_file が存在するかどうかを確認する if テストを記述します。
6. 存在する場合は、upload_file(...) 関数を呼び出して、imageUrl という名前のエンティティ プロパティに公開 URL を割り当てます。
7. 存在しない場合は、imageUrl エンティティ プロパティに空の文字列を割り当てます。

quiz/webapp/questions.py

# TODO: storage モジュールをインポートする from quiz.gcp import storage, datastore # END TODO """ ファイルを Google Cloud Storage にアップロードします。 - ファイルをアップロードする - public_url を返す """ def upload_file(image_file, public): if not image_file: return None # TODO: storage クライアントを使用してファイルをアップロードする # 2 番目の引数はブール値です。 public_url = storage.upload_file( image_file, public ) # END TODO # TODO: オブジェクトの公開 URL # を返す return public_url # END TODO """ ファイルを Google Cloud Storage にアップロードします。 - ファイルをアップロードするメソッドを呼び出す（public=true） - 質問を保存する Datastore ヘルパー メソッドを呼び出す """ def save_question(data, image_file): # TODO: 画像ファイルがある場合はそれを # アップロードして、結果を新しい Datastore # プロパティ imageUrl に代入する # ない場合は空の文字列を代入する if image_file: data['imageUrl'] = str( upload_file(image_file, True)) else: data['imageUrl'] = u'' # END TODO data['correctAnswer'] = int(data['correctAnswer']) datastore.save_question(data) return

8. questions.py を保存します。

アプリケーションを実行して Cloud Storage オブジェクトを作成する

1. ...gcp/storage.py ファイルと ...webapp/questions.py ファイルを保存してから、Cloud Shell コマンドに戻ります。
2. Cloud Shell に戻ってアプリケーションを実行します。

python run_server.py

3. Google のストレージから画像ファイルをローカルマシンにダウンロードします。

4. Cloud Shell で [ウェブでプレビュー] アイコン > [ポート 8080 でプレビュー] をクリックして、クイズ アプリケーションをプレビューします。

5. [Create Question] をクリックします。

6. フォームに次の値を入力して、[Save] をクリックします。

   フォームの項目	値
   Author	自分の名前
   Quiz	Google Cloud Platform
   Title	Which product does this logo relate to?
   Image	先ほどダウンロードした Google_Cloud_Storage_logo.png ファイルをアップロード
   Answer 1	App Engine
   Answer 2	Cloud Storage（[Answer 2] のラジオボタンを選択します）
   Answer 3	Compute Engine
   Answer 4	Container Engine

7. Google Cloud コンソールに戻り、ナビゲーション メニュー > [Cloud Storage] に移動します。

8. [Cloud Storage] > [バケット] ページで、適切なバケット（<プロジェクト ID>-media という名前）をクリックします。

Google_Cloud_Storage_logo.png という名前の新しいオブジェクトが表示されます。

オブジェクトをバケットにアップロードする

クライアント アプリケーションを実行し、Cloud Storage の公開 URL をテストする

1. アプリケーションの URL の末尾に /api/quizzes/gcp を追加します。

   先ほどこのウェブ アプリケーションに追加した質問に対応する JSON データがクライアントに返されるはずです。

   imageUrl プロパティには、Cloud Storage のオブジェクトに対応する値が含まれています。

2. アプリケーションのホームページに戻り、[Take Test] リンクをクリックします。

3. [GCP] をクリックし、各質問に答えます。

   先ほど追加した質問まで進むと、クライアント側ウェブ アプリケーションに画像が表示されます。

お疲れさまでした

ラボ「アプリ開発: Cloud Storage への画像ファイルと動画ファイルの保存 - Python」はこれで終了です。Cloud Storage を使ってアプリケーション データの保存と取り出しを行いました。

次のステップと詳細情報

• 画像や動画で他にどのようなことができるか確認します。

  • Cloud ML API を使用して画像内のテキストの抽出、分析、翻訳を行う
  • Video Intelligence: Qwik Start

• Google Cloud 上の Python をご確認ください。

マニュアルの最終更新日: 2025 年 1 月 24 日

ラボの最終テスト日: 2024 年 1 月 24 日

Copyright 2025 Google LLC. All rights reserved. Google および Google のロゴは Google LLC の商標です。その他すべての企業名および商品名はそれぞれ各社の商標または登録商標です。