🖼️

GyazoのAPIが最強すぎる

2023/12/28に公開

Python

Gyazo

tech

GyazoのAPIが最強🔥

Gyazoといえば、スクリーンショットを簡単に共有できるという印象の方が多いでしょう。
スクリーンショットだけではなく、未踏ジュニア23年に採択された、「AI 4コマメーカー」は、GyazoのAPIを最大限に活用しています。
しかし、Gyazoについての情報やドキュメントも詳しく解説されていないので、本記事では 導入からメタデータの活用 まで紹介します。
GyazoAPIの使用はかなり簡単です🙆‍♂️

そもそも「AI 4コマメーカー」とは🤔

「AI 4コマメーカー」は AI があなたの描いた絵を活用し、4コマ漫画を作成するwebアプリケーションです。落書きのように絵を描き、その絵を認識しgpt-4によってストーリーを生成します。そのため、ストーリー構成など考える必要がなく手軽に4コマ漫画を作ることができます。あなたの絵であなただけの4コマ漫画を作りましょう！

https://www.yonkoma.app/

そんな、「AI 4コマメーカー」で、4コマ漫画が生成されると、このような画面に遷移します。
このとき、4コマ漫画、キャラクターの画像、キャラクター紹介の文字、params IDは全て、GyazoのAPIを活用しています。
https://www.yonkoma.app/864127743b07d870a98912c11afa5656

なぜGyazoAPIなのか

製作者がデータベースを触ったこともないというのもあるのですが、、🤥
Gyazoにアップロードする4コマ漫画画像に、以下のような、メタデータを記述し、4コマ漫画画像とキャラクターの画像、キャラクター消化の文字を紐づけています。これによってかなり楽に管理とアップロードができました。

{
"tukkomi":"https://i.gyazo.com/aacd458e9da75a8aafdaae8440cd41cb.jpg", 
"boke": "https://i.gyazo.com/9a73e0d14b51204cf9f4f640878d0770.jpg", 
"introduction_tukkomi": "おい、逃げんなよ！",
"introduction_boke": "自らを痛めつけつつも成長するタミオ"
}

また、Gyazoでは、https://gyazo.com/864127743b07d870a98912c11afa5656というように、864127743b07d870a98912c11afa5656のparams IDがあてられます。このIDは、画像へのリンクを生成する際に使用することで、画像へのダイナミックルーティングを可能にします。

この場合、864127743b07d870a98912c11afa5656というIDがその画像の識別子として機能し、Web上でその画像へ直接アクセスするためのURLの一部となります。そのため、https://www.yonkoma.app/864127743b07d870a98912c11afa5656というURLで、4コマ漫画を閲覧、共有することができます。

このような使い方にすることによって、無制限に画像をアップロードできるGyazo APIは、「AI 4コマメーカー」のURL生成や画像保存に適していました。

GyazoのAPIについて⛏️

ドキュメント
GyazoAPIはHTTPリクエストによるAPIで、JSON形式のレスポンスを返します。

API keyの発行✍️

GyazoのAPIを使用するには、ここから、GyazoのAPI keyを発行する必要があります。

ApplicationsのNew Applicationsを選択します。
Nameで任意の名前を記入します。今回はCallback URLはhttp://exam.comのままでいいです。
Generate accsess tokenから、Your access tokenを発行し、コピーしてください。これが、あなたのAPI keyになりますので、取り扱いには気をつけてください。

API keyは環境変数などに設定することをお勧めします。

画像をアップロード🎞️

API Endpointは、https://upload.gyazo.com/api/uploadです。
Gyazoにアップローする時は、画像をbinary型に変換します。
data={"desc": description}で、メタデータのdescを設定していますが、descを記入しない場合は消してください

以下のコードで、画像をアップロードすることができます。

import requests
from PIL import Image
import io

ACCESS_TOKEN= # YOUR_ACCESS_TOKEN

def pil_to_binary(pil_img, format="JPEG"):
    if pil_img.mode == "RGBA" and format == "JPEG":
        pil_img = pil_img.convert("RGB")
    buffered = io.BytesIO()
    pil_img.save(buffered, format=format)
    return buffered.getvalue()

def singleUpload(img, description):
    headers = {'Authorization': "Bearer {}".format(ACCESS_TOKEN)}
    img_binary = pil_to_binary(img)
    files = {'imagedata': ('image.jpg', img_binary, 'image/jpeg')}
    response = requests.post("https://upload.gyazo.com/api/upload" , headers=headers, files=files, data={"desc": description})
    response.raise_for_status()

    # JSONデータの取得
    response_data = response.json()

    # URLの存在チェックと表示
    if "url" in response_data:
        url = response_data["url"]
        return url
    else:
        print("URL not found in response data.")

if __name__ == "__main__":    
    apple_image1 = Image.open("./images/banana.png")
    description = "神秘的なバナナ"
    upload_url = singleUpload(apple_image1, description)
    print(upload_url)

Gyazoを確認すると、以下のようにアップロードされていることがわかります

上記のコードを実行すると、Gyazoにアップロードされた画像のリンクを取得できます。

https://i.gyazo.com/fcae5cfe1ba5d1672cf8f7cb06d6e3e4.jpg

また、IDだけを取得したい場合は、url = response_data["url"]を、image_id = response_data["image_id"]にしてください。

response_dataの構造

{
'type': 'jpg',
'thumb_url': 'https://thumb.gyazo.com/thumb/200/eyJhbGciOiJIUzI1NiJ9.eyJpbWciOiJfMWFlYTg5ODM0YmM3MDdiNWM4ZDkyNjRkYTdiMmE2YjcifQ.DQqipsUTcRIwEcSJIZEkBwZTMtVyGh3sUsWGGWLzGFs-jpg.jpg',
'created_at': '2023-12-28T06:55:22+0000',
'image_id': 'fcae5cfe1ba5d1672cf8f7cb06d6e3e4',
'permalink_url': 'https://gyazo.com/fcae5cfe1ba5d1672cf8f7cb06d6e3e4',
'url': 'https://i.gyazo.com/fcae5cfe1ba5d1672cf8f7cb06d6e3e4.jpg'
}

メタデータの取得📝

API Endpointは、https://api.gyazo.com/api/images/{id}です。

import requests

ACCESS_TOKEN= # YOUR_ACCESS_TOKEN

def getMetaData_desc(image_id):
    headers = {'Authorization': "Bearer {}".format(ACCESS_TOKEN)}
    
    response = requests.get(f"https://api.gyazo.com/api/images/{image_id}", headers=headers)
    response.raise_for_status()
    response_data = response.json()

    if "metadata" in response_data and "desc" in response_data["metadata"]:
	# ここでdescを取得するためのjson解析
        desc = response_data["metadata"]["desc"]
        return desc
    else:
        print("URL not found in response data.")


if __name__ == "__main__":    
    upload_id = "fcae5cfe1ba5d1672cf8f7cb06d6e3e4"

    MetaData = getMetaData_desc(upload_id)
    print(MetaData)

上記のコードを実行すると、Gyazoにアップロードされた画像のメタデータのdescを取得できます。

神秘的なバナナ

上記コードでは、descだけの取得ですが、response_dataの構造は以下のようになっているので、の他の情報も取得することができます。