amplifyを使いFB投稿を分析するアプリを作った

運用を手伝っている、FBページの投稿でどんな投稿文or写真がいいね数やリーチ数が高いのかを調べるべく、文章解析/画像解析AIサービスであるAWSのComprehend、Rekognitionを使って分析を行った。

Amazon Comprehend(テキストのインサイトや関係性を検出)| AWS

Amazon Rekognition(高精度の画像・動画分析サービス)| AWS

以下の構成図のようにサービスを使って作った

f:id:fumishitan:20200510111716p:plain

開発期間

4月25日〜5月9日の休業日(正味:10日間)

使ったサービス
  • Cognito ・・・認証認可をしてくれるマネージドサービス、ログイン機能などをAPIベースで使える
  • Lambda・・・イベントドリブンに動く、マネージドコンピューティングサービス。今回イベントドリブンに使ってないが
  • DynamoDB・・・NoSQLマネージドDBサービス
  • AppSync・・・GraphQLのマネージドサービス
  • Rekognition・・・画像解析AIサービス、APIに画像を投げ込むと画像内に映っている物などをJSONで返す
  • Comprehend・・・文章解析AIサービス、APIに文章を投げ込むと文章の感情や要約・キーワードなどをJSONで返す
  • S3・・・オブジェクトストレージサービス
  • CloudFront・・・CDNサービス
  • amplify・・・上記のサービスたちをCLIベースでデプロイできる、JSベースで上記サービスたちを利用できるライブラリでもある…すごく便利だけど一言で説明しづらい
  • Cloud9・・・開発環境を提供してくれるサービス
  • Vue.js・・・SPAフレームワークAWSは関係ない)
AWSでかかったお金
  • Cognito・・・$0
  • Lambda・・・$0
  • DynamoDB・・・$0
  • Appsync・・・$0.01
  • Rekognition・・・$0
  • Comprehend・・・$0
  • S3・・・$0
  • CloudFront・・・$0.05
  • amplify・・・$0
  • Cloud9・・・$2.8
  • DataTransfar・・・$0.05

$3程度で10日間遊べるなら結構コスパがいい

メモ

GraphQLとは

難しいので間違っていたら申し訳ない。FaceBookが開発する新しいWEBAPIの規格。RESTだとアプリの1ページに対して何回もAPIを叩かないといけなかったことを改善すべく、一つのAPIが複数のデータソースにアクセスでき、かつクライアント から取得データもある程度指定できる様な体系をとっている。

クエリがクライアント からのAPIへのアクセスに使う

スキーマAPIの仕様を定義する

ゾルバはGraphQLサーバーとデータソース間のデータ操作を定義する

AppSyncで複数データソースを一つのAPIにまとめる方法

AppSyncでパイプラインリゾルバを定義して作った。ただあまり意味がない作りをしてDynamoDBを叩きすぎる構成を作ってしまった。 DynamoのDB設計も悪かったが、 GraphQLへの理解も足りなかった

DynamoDBの設計が重要である点

パーティションキーやソートキーをどう指定するか、AppSyncからのアクセスを想定しながら作るべきでした。。。 mBaaS系でよく使用されるMongoDBと同じだと思い込んでいたのが痛い目にあった原因

FB−GraphAPIでの投稿写真の取得方法

FacebookページのpageIDを指定して以下のAPIでPostIDを取得(Curlで叩く風)

https://graph.facebook.com/v6.0/{pageID}/posts&{access_token=************}

あとは、PostID指定?full_pictureすれば写真のURLを取れる

https://graph.facebook.com/v6.0/{PostID}?fields=full_picture&{access_token=************}

参考ドキュメント:https://developers.facebook.com/docs/graph-api/reference/post/

Vue.jsでiframeを使う方法、CssをComponentに読み込ませる方法

今回一番詰まったところ2〜3日くらいかかっている感じ Componentを使用する.Vueファイルに以下の様な記述をする