Pinterest APIを使用してローカルに保存された画像ファイルをピン投稿するWebアプリについて

背景

前回、以下記事でPinterest APIの申請方法と使用例について紹介しました。

7rikazhexde-techlog.hatenablog.com

本記事ではPinterest APIを使用してローカルに保存された画像ファイルをピン投稿するWebアプリを作成したので紹介します。

作成したもの

OAuth 2.0認証（Sandbox仕様）で取得したPinterest APIアクセストークンを使用して、指定したフォルダ内の画像ファイルを読み込んでPinを投稿するWebアプリです。¹

WebアプリはPythonとFlaskを使用してlocalhost指定でHTTPサーバーを起動し、OAuth 2.0認証フレームワークでアプリに紐付けられたApp idとApp Secret Keyを使用してAccess Tokenを生成し、Bearer認証メソッドを使用してエンドポイントURLにGET/POSTリクエストを送信します。

スクリーンショット

Pinterest_Pin_Creator

コード

Webアプリは以下リポジトリでコミットしています。

github.com

処理の流れ

初期アクセス時の処理

• ユーザーが http://localhost:3000/にアクセスすると以下のフォームを表示します。
  • App id とApp Secret Keyの入力フィールドを持つ認証フォーム(auth_form)
  • Pinterest APIのAccess TokenとボードID、画像フォルダパスを入力フィールドに持ピン投稿フォーム(pin_form)

認証フォームについて

• 認証フォームではPinterest API 認証を行います。
• ユーザーがApp idとApp Secret Keyを入力し、認証ボタンを押すと、入力データが/auth ルートに POST リクエストを送信します。
• POSTリクエストにより、auth()関数が呼び出され、入力されたアプリ ID とシークレットキーを使って Pinterest API の認証処理を行います。
• 認証に成功すると、Access Tokenが発行され、sessionに保存します。
• その後、ユーザーはルート/にリダイレクトされます。

ピン投稿フォームについて

• ピン投稿フォームには、画像ファイルを表示、ボード一覧を表示、ピンを投稿の 3 つのボタンを持ちます。
• それぞれ入力フィールドに指定のテキストが入力されない場合はアラート、もしくは、エラー処理します。
• 画像ファイル一覧の取得では、画像ファイルを表示ボタンを押すと、Ajax リクエストを/get_imagesルートに送信します。 サーバー側では指定された画像フォルダからイメージファイルのリストを収集し、クライアントに返して取得したファイル一覧を画面に表示します。
• ボード一覧の取得では、ボード一覧を表示ボタンを押すと、Ajax リクエストを /get_boardsルートに送信します。
• サーバー側では Pinterest API を呼び出し、ユーザーのボード一覧を取得し、取得したボード一覧をクライアントにして取得したボード一覧を画面に表示します。
• ピンの投稿では、ボード ID と画像フォルダパスを入力し、ピンを投稿ボタンを押すと、Ajax リクエストをルート/に送信します。
• サーバー側で入力値のバリデーションを行い、指定された画像フォルダ内の画像をループで処理し、PinterestPinCreator クラスを使用してPinterest API を呼び出します。
• 各画像に対して、指定のボードにピンを投稿して、投稿の成功/失敗に応じて、クライアント側にメッセージを表示します。

まとめ

Pinterest APIを使用してローカルの画像をピン投稿するWebアプリを作成したので紹介します。

アプリでは前回記事で記載した通り、アプリの登録とApp idとApp Secret Keyの取得が必要ですが、PinをAPI経由で投稿することができます。

なお、上記はローカルの画像ですが、source_typeをimage_urlに指定すれば、URL指定で投稿可能です。気になれば使用してみて下さい。

最後に、本記事が参考になれば「はてなスター」、「はてなブックマーク」をお願いします。

以上です。

---

1. Standard Accessを承認された場合は、https://api.pinterest.com/v5の指定でアクセストークンの取得とピン投稿することが可能です。↩