Zenn
🖼️

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を発行する必要があります。

  1. ApplicationsのNew Applicationsを選択します。

  2. Nameで任意の名前を記入します。今回はCallback URLはhttp://exam.comのままでいいです。

  3. 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の構造は以下のようになっているので、の他の情報も取得することができます。

response_dataの構造
{
'image_id': 'fcae5cfe1ba5d1672cf8f7cb06d6e3e4',
'type': 'jpg', 
'created_at': '2023-12-28T06:55:22.120Z',
'permalink_url': 'https://gyazo.com/fcae5cfe1ba5d1672cf8f7cb06d6e3e4', 
'thumb_url':'https://thumb.gyazo.com/thumb/200/eyJhbGciOiJIUzI1NiJ9.eyJpbWciOiJfMWFlYTg5ODM0YmM3MDdiNWM4ZDkyNjRkYTdiMmE2YjcifQ.DQqipsUTcRIwEcSJIZEkBwZTMtVyGh3sUsWGGWLzGFs-jpg.jpg',
'url': 'https://i.gyazo.com/fcae5cfe1ba5d1672cf8f7cb06d6e3e4.jpg', 
'access_policy': None, 
'metadata': {
	'app': None,
	'title': None, 
	'url': None, 
	'desc': '神秘的なバナナ',
	'original_title': None, 
	'original_url': None
}
}

最後に

GyazoのAPIを使うことで、データベースとしても活用することができます。さらに、JSON形式のレスポンスなのでかなり簡単に扱い応用することができました。
さらに、無料プランだと過去10枚しか閲覧できませんが、最大の容量が現時点ではないため、規模感によっては、コストを"0"に抑えることができます。

これらのコードは全て、githubにて公開してありますので、そちらも参照してください。
https://github.com/ka1ut/GyazoAPI

Discussion