昨日から引き続いて。

Laravel + BootstrapVueの習作の一環として、Tumblrから画像データを取得してきてサムネイル表示するアプリケーションを作成してみました。このブログのトップにずっとあったやつですね。「umbles.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にインポートした上で、その扱い部分も実装したい。そうなるとちょっとフロントエンドだけじゃ無くなってくるので、時間が掛かるかも。
  • About

    I'm a web designer/programmer in Kyoto, Japan. Also work as a blogger, DJ.

    NOBODY:PLACE is my personal blog since 1998. Everything I'm interested in is here.

    See Also
    Other Works
    Feed
  • Recent Hatena Bookmark
  • Monthly Archives
    Categories