amplifyを使いFB投稿を分析するアプリを作った
運用を手伝っている、FBページの投稿でどんな投稿文or写真がいいね数やリーチ数が高いのかを調べるべく、文章解析/画像解析AIサービスであるAWSのComprehend、Rekognitionを使って分析を行った。
Amazon Comprehend(テキストのインサイトや関係性を検出)| AWS
Amazon Rekognition(高精度の画像・動画分析サービス)| AWS
以下の構成図のようにサービスを使って作った
開発期間
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へのアクセスに使う
リゾルバは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ファイルに以下の様な記述をする