Images API の例

リージョン ID

REGION_ID は、アプリの作成時に選択したリージョンに基づいて Google が割り当てる省略形のコードです。一部のリージョン ID は、一般的に使用されている国や州のコードと類似しているように見える場合がありますが、このコードは国または州に対応するものではありません。2020 年 2 月以降に作成されたアプリの場合、REGION_ID.r は App Engine の URL に含まれています。この日付より前に作成されたアプリの場合、URL のリージョン ID は省略可能です。

詳しくは、リージョン ID をご覧ください。

Images API を使用して、画像を動的にアップロード、変換、保存、提供する方法を説明します。この例では、公開メッセージ ボードにメッセージを投稿し、挨拶メッセージ付きのアバターをアップロードする方法を示します。

データストアでの画像モデルの作成

アップロードした画像を BLOB として保存するには、ゲストブック サンプルのモデルを更新する必要があります。

class Greeting(ndb.Model):
    """Models a Guestbook entry with an author, content, avatar, and date."""
    author = ndb.StringProperty()
    content = ndb.TextProperty()
    avatar = ndb.BlobProperty()
    date = ndb.DateTimeProperty(auto_now_add=True)

ユーザー画像のアップロード

ユーザーが画像をアップロードできるようにするには、HTML フォームを変更する必要があります。

  1. ユーザーが自分のパソコンからアップロードするファイルを選択するためのフィールドを追加します。

  2. enctype 属性をフォームタグに追加し、これがマルチパート フォームの投稿であることを指定します。

    self.response.out.write("""
          <form action="/sign?%s"
                enctype="multipart/form-data"
                method="post">
            <div>
              <textarea name="content" rows="3" cols="60"></textarea>
            </div>
            <div><label>Avatar:</label></div>
            <div><input type="file" name="img"/></div>
            <div><input type="submit" value="Sign Guestbook"></div>
          </form>
          <hr>
          <form>Guestbook name: <input value="%s" name="guestbook_name">
          <input type="submit" value="switch"></form>
        </body>
      </html>""" % (urllib.urlencode({'guestbook_name': guestbook_name}),
                    cgi.escape(guestbook_name)))
  3. フォームの投稿から画像データを取得して、BLOB としてデータストアに保存するように、ゲストブック ハンドラを更新します。

    class Guestbook(webapp2.RequestHandler):
        def post(self):
            guestbook_name = self.request.get('guestbook_name')
            greeting = Greeting(parent=guestbook_key(guestbook_name))
    
            if users.get_current_user():
                greeting.author = users.get_current_user().nickname()
    
            greeting.content = self.request.get('content')
    
            avatar = self.request.get('img')
            avatar = images.resize(avatar, 32, 32)
            greeting.avatar = avatar
            greeting.put()
    
            self.redirect('/?' + urllib.urlencode(
                {'guestbook_name': guestbook_name}))

画像の変換

32x32 のアバターを作成するには、以下を行う必要があります。

  1. google.appengine.api.images モジュールをインポートします。

    from google.appengine.api import images
  2. resize 関数を呼び出し、画像データを渡します。

    avatar = images.resize(avatar, 32, 32)

画像の動的表示

画像を配信するには、以下を行う必要があります。

  1. /img パスから画像を動的に配信する画像ハンドラを作成します。

    class Image(webapp2.RequestHandler):
        def get(self):
            greeting_key = ndb.Key(urlsafe=self.request.get('img_id'))
            greeting = greeting_key.get()
            if greeting.avatar:
                self.response.headers['Content-Type'] = 'image/png'
                self.response.out.write(greeting.avatar)
            else:
                self.response.out.write('No image')
  2. 動的に配信されるこれらの画像を表示するように HTML を更新します。

    self.response.out.write('<div><img src="/img?img_id=%s"></img>' %
                            greeting.key.urlsafe())
    self.response.out.write('<blockquote>%s</blockquote></div>' %
                            cgi.escape(greeting.content))

リクエストから img_id を取得するときに、画像ハンドラに挨拶のキーを渡すように、ゲストブックの HTML を更新する必要があります。

App Engine へのアプリのデプロイ

ゲストブック アプリをアップロードするには、アプリケーションの guestbook ディレクトリ(app.yamlindex.yaml ファイルが置かれているディレクトリ)から次のコマンドを実行します。

gcloud app deploy app.yaml index.yaml

データストア インデックスが生成されてアプリケーションが使用可能になるまでに、しばらく時間がかかることがあります。インデックスがまだ生成中の場合は、アプリにアクセスすると NeedIndexError メッセージが表示されます。このエラーは一時的なものなので、最初にこのエラーが発生した場合は、しばらくしてからお試しください。

コマンドラインからアプリをデプロイする方法の詳細については、Python アプリのデプロイをご覧ください。

デプロイしたアプリケーションの表示

ブラウザを起動して https://PROJECT_ID.REGION_ID.r.appspot.com でアプリを表示するには、次のコマンドを実行します。

gcloud app browse