Tumblrから画像データを取得してサムネイル表示するアプリをLaravel + BootstrapVueで作ってみました【#np2020】

昨日から引き続いて。

Laravel + BootstrapVueの習作の一環として、Tumblrから画像データを取得してきてサムネイル表示するアプリケーションを作成してみました。このブログのトップにずっとあったやつですね。「umbls.com」というサイトで「Tumblr Thumbnails」として提供していたものとほぼ同じですが、テスト版なので機能面での互換性はありません（デザインのアレンジも出来ません）。

動作例

基本構成

例によってLaravelとVueの合わせ技ですが、Tumblrを取得する部分で公式のPHP向けライブラリを使っています。

参考

Laravel Tumblr API Integration – Laravel School
API | Tumblr


実際に行っていることは次の通りです。

1. LaravelでTumblr APIから画像データを取得する
2. 取得したデータを加工しJSONで出力するAPIを作成
3. JSONを読み込んで整形してHTMLを出力するアプリケーションを作成

デザインは全てBootstrapVueに任せています。マージン等の調整で若干工夫が必要でしたが、結果的に自動的に均等表示出来るようになり、楽になりました。表示領域の拡大縮小や表示枚数の増減（Tumblr APIの仕様上、1枚以上20枚以下（と仕様には書いてあるけど実際には50枚以下））に従って画像サイズが変化しながら、均等に配置されます。

キャッシュ

例によってAPIに関してのみCloudFrontでキャッシュするようにしています。Tumblr APIへのと居合わせ回数を減らすためです。

バリエーション：カルーセル

BootstrapVueのコンポーネントを利用してカルーセルとしても表示出来るようになっています。基本的な部分は全く同じで、出力テンプレートが変わっているだけです。


こちらもレスポンシブになっていますが、もともとの設計が「画像サイズが不定」というのをあんまり想定されていなかったようで、少し苦労しました。最終的には最低限のCSSを付加することで

画像サイズが変わっても表示範囲に合わせて拡大縮小する
表示領域の真ん中に表示する

ということが実現出来たと思います。

今後の展望

Laravel + BootstrapVueの習作シリーズが続いていますが、最後はグラフです。データ生成部分はLaravel、出力部分はVue.jsとChart.jsが主になります。今まで通り行けば割とすぐに作れそうですが（実際、グラフを表示するだけならすぐ出来る）、問題は表示用のデータをどうするかなんですよね……出来れば、現在のサイトで使っているデータを新しいサーバのDBにインポートした上で、その扱い部分も実装したい。そうなるとちょっとフロントエンドだけじゃ無くなってくるので、時間が掛かるかも。