arrow_back

アプリ開発: Cloud Storage への画像ファイルや動画ファイルの保存 - Python

参加 ログイン
Test and share your knowledge with our community!
done
Get access to over 700 hands-on labs, skill badges, and courses

アプリ開発: Cloud Storage への画像ファイルや動画ファイルの保存 - Python

Lab 1時間 universal_currency_alt クレジット: 5 show_chart 中級
Test and share your knowledge with our community!
done
Get access to over 700 hands-on labs, skill badges, and courses

GSP185

Google Cloud セルフペース ラボ

概要

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

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

目標

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

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

設定と要件

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

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

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

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

  • 標準的なインターネット ブラウザ（Chrome を推奨）
注: このラボの実行には、シークレット モードまたはシークレット ブラウジング ウィンドウを使用してください。これにより、個人アカウントと受講者アカウント間の競合を防ぎ、個人アカウントに追加料金が発生することを防ぎます。
  • ラボを完了するために十分な時間を確保してください。ラボをいったん開始すると一時停止することはできません。
注: すでに個人の Google Cloud アカウントやプロジェクトをお持ちの場合でも、このラボでは使用しないでください。アカウントへの追加料金が発生する可能性があります。

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

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

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

  2. [Google コンソールを開く] をクリックします。 ラボでリソースが起動し、別のタブで [ログイン] ページが表示されます。

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

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

  3. 必要に応じて、[ラボの詳細] パネルから [ユーザー名] をコピーして [ログイン] ダイアログに貼り付けます。[次へ] をクリックします。

  4. [ラボの詳細] パネルから [パスワード] をコピーして [ようこそ] ダイアログに貼り付けます。[次へ] をクリックします。

    重要: 認証情報は左側のパネルに表示されたものを使用してください。Google Cloud Skills Boost の認証情報は使用しないでください。 注: このラボでご自身の Google Cloud アカウントを使用すると、追加料金が発生する場合があります。

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

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

その後このタブで Cloud Console が開きます。

注: 左上にある [ナビゲーション メニュー] をクリックすると、Google Cloud のプロダクトやサービスのリストが含まれるメニューが表示されます。 ナビゲーション メニュー アイコン

Cloud Shell をアクティブにする

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

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

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

Your Cloud Platform project in this session is set to YOUR_PROJECT_ID

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

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

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

  2. 出力は次のようになります。

出力:

ACTIVE: * ACCOUNT: student-01-xxxxxxxxxxxx@qwiklabs.net To set the active account, run: $ gcloud config set account `ACCOUNT`
  1. （省略可）次のコマンドを使用すると、プロジェクト ID を一覧表示できます。
gcloud config list project

出力:

[core] project = <project_ID>

出力例:

[core] project = qwiklabs-gcp-44776a13dea667a6 注: Google Cloud における gcloud ドキュメントの全文については、gcloud CLI の概要ガイドをご覧ください。

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

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

[エディタを開く] ボタン。

注: Cloud Shell のほかに、ブラウザの別のタブでコードエディタが起動します。
  1. 次のコマンドを実行してプロジェクト 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. アプリケーションを構成します。

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

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

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

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

    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
  1. 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
  1. questions.py を保存します。

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

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

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

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

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

  4. フォームに次の値を入力して、[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

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

  6. [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 を使ってアプリケーション データの保存と取り出しを行いました。

クエストを完了する

このセルフペース ラボは、「Application Development - Python」クエストおよび「Cloud Development」クエストの一部です。クエストとは学習パスを構成する一連のラボのことで、完了すると成果が認められて上のようなバッジが贈られます。バッジは公開して、オンライン レジュメやソーシャル メディア アカウントにリンクできます。このラボの修了後、このラボが含まれるクエストに登録すれば、すぐにクレジットを受け取ることができます。受講可能なすべてのクエストについては、Google Cloud Skills Boost カタログをご覧ください。

次のステップと詳細情報

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

詳しくは「Google Cloud 上の Python」をご覧ください

マニュアルの最終更新日: 2023 年 10 月 13 日
ラボの最終テスト日: 2023 年 10 月 18 日

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