知識をテストして、コミュニティで共有しましょう

done

700 を超えるハンズオンラボ、スキルバッジ、コースへのアクセス

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

ラボ 1時間 universal_currency_alt クレジット: 5 show_chart 中級

info このラボでは、学習をサポートする AI ツールが組み込まれている場合があります。

GSP185
概要
設定と要件
タスク 1. クイズアプリケーションを準備する
タスク 2. クイズアプリケーションのコードを調べる
タスク 3. Cloud Storage バケットを作成する
タスク 4. Cloud Storage にオブジェクトを追加する
お疲れさまでした

知識をテストして、コミュニティで共有しましょう

done

700 を超えるハンズオンラボ、スキルバッジ、コースへのアクセス

GSP185

Google Cloud セルフペースラボ

概要

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

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

目標

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

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

設定と要件

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

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

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

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

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

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

ラボを完了するために十分な時間を確保してください。ラボをいったん開始すると一時停止することはできません。

注: すでに個人の Google Cloud アカウントやプロジェクトをお持ちの場合でも、このラボでは使用しないでください。アカウントへの追加料金が発生する可能性があります。

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

[ラボを開始] ボタンをクリックします。ラボの料金をお支払いいただく必要がある場合は、表示されるポップアップでお支払い方法を選択してください。左側の [ラボの詳細] パネルには、以下が表示されます。
- [Google Cloud コンソールを開く] ボタン
- 残り時間
- このラボで使用する必要がある一時的な認証情報
- このラボを行うために必要なその他の情報（ある場合）
[Google Cloud コンソールを開く] をクリックします（Chrome ブラウザを使用している場合は、右クリックして [シークレットウィンドウでリンクを開く] を選択します）。

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

ヒント: タブをそれぞれ別のウィンドウで開き、並べて表示しておきましょう。
注: [アカウントの選択] ダイアログが表示されたら、[別のアカウントを使用] をクリックします。
必要に応じて、下のユーザー名をコピーして、[ログイン] ダイアログに貼り付けます。
{{{user_0.username | "Username"}}}
[ラボの詳細] パネルでも [ユーザー名] を確認できます。
[次へ] をクリックします。
以下のパスワードをコピーして、[ようこそ] ダイアログに貼り付けます。
{{{user_0.password | "Password"}}}
[ラボの詳細] パネルでも [パスワード] を確認できます。
[次へ] をクリックします。
重要: ラボで提供された認証情報を使用する必要があります。Google Cloud アカウントの認証情報は使用しないでください。注: このラボでご自身の Google Cloud アカウントを使用すると、追加料金が発生する場合があります。
その後次のように進みます。
- 利用規約に同意してください。
- 一時的なアカウントなので、復元オプションや 2 要素認証プロセスは設定しないでください。
- 無料トライアルには登録しないでください。

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

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

Cloud Shell をアクティブにする

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

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

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

Your Cloud Platform project in this session is set to YOUR_PROJECT_ID

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

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

gcloud auth list

[承認] をクリックします。
出力は次のようになります。

出力:

ACTIVE: * ACCOUNT: student-01-xxxxxxxxxxxx@qwiklabs.net To set the active account, run: $ gcloud config set account `ACCOUNT`

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

gcloud config list project

出力:

[core] project = <project_ID>

出力例:

[core] project = qwiklabs-gcp-44776a13dea667a6

注: Google Cloud における gcloud ドキュメントの全文については、gcloud CLI の概要ガイドをご覧ください。

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

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

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

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

次のコマンドを実行してプロジェクト 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

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

作業ディレクトリを変更します。
cd ~/training-data-analyst/courses/developingapps/python/cloudstorage/start
アプリケーションを構成します。
. prepare_environment.sh 注: 警告が表示されても無視します。
このスクリプトファイルを実行すると、以下の処理が行われます。
- App Engine アプリケーションを作成する。
- 環境変数 GCLOUD_PROJECT をエクスポートする。
- pip を更新し、その後 pip install -r requirements.txt を実行する。
- Cloud Datastore でエンティティを作成する。
- プロジェクト ID を出力する。
アプリケーションを実行します。
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

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

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

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

質問追加用フォーム。[画像] カテゴリ内で [ファイルを選択] ボタンがハイライト表示されています。

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

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

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

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

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

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

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

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

フォームが変更されていることに注意してください。enc-type に multipart/form-data が使用され、次の 2 つのフォームコントロールが追加されています。
- image: ファイルアップロード用コントロール
- imageUrl: 非表示項目
...quiz/webapp フォルダにある routes.py ファイルを選択します。

このファイルには、フォームデータを受け取る POST ハンドラのルートが含まれています。フォームから画像ファイルを取得するように変更されています。
...quiz/webapp フォルダにある questions.py ファイルを選択します。

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

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

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

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

Cloud Shell コマンドラインに戻ります。
Ctrl+C キーを押してアプリケーションを停止します。
<プロジェクト ID>-media という名前の Cloud Storage バケットを作成します。
gsutil mb gs://$DEVSHELL_PROJECT_ID-media
バケットを作成するには gsutil mb コマンドを使用します。バケットの名前として gs://BUCKET_NAME を渡します。

接頭辞 $DEVSHELL_PROJECT_ID に -media を付けたバケット名を使用します。
次のコマンドを実行して、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 モジュールをインポートして使用する

コードエディタで ...quiz/gcp/storage.py ファイルの先頭に移動します。
GCLOUD_BUCKET 環境変数からバケット名を取得します。
google.client パッケージから storage モジュールをインポートします。
Cloud Storage クライアントを作成します。
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 にファイルを送信するコードを記述する

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

storage.py を保存します。

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

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

questions.py を保存します。

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

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

python run_server.py

Google のストレージから画像ファイルをローカルマシンにダウンロードします。
Cloud Shell で [ウェブでプレビュー] アイコン > [ポート 8080 でプレビュー] をクリックして、クイズアプリケーションをプレビューします。
[Create Question] をクリックします。

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

Google Cloud コンソールに戻り、ナビゲーションメニュー > [Cloud Storage] に移動します。
[Cloud Storage] > [ブラウザ] ページで、適切なバケット（<プロジェクト ID>-media という名前）をクリックします。

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

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

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

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

imageUrl プロパティには、Cloud Storage のオブジェクトに対応する値が含まれています。
アプリケーションのホームページに戻り、[Take Test] リンクをクリックします。
[GCP] をクリックし、各質問に答えます。

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

お疲れさまでした

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

クエストを完了する

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

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

チェックポイント

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

GSP185

概要

目標