読者です 読者をやめる 読者になる 読者になる

Ridery

Webのデザインやエンジニアリング、カメラや写真のことをメインに日常生活もたまに書いています。

maner[まねる]という、写真ギャラリーサイトを作りました📷✌️

はじめまして、ライダーです。

そういえば、無事、卒業できそうです🎉

新居だー、退居だー、旅行だー、引越しだー、とばったばたの日々ですが、ひさびさにちょっとしたものを作れました。

f:id:mtmtkzm:20170228020556p:plain

つくったもの

これです

maner.gallery

manerは、「まねる」と読みます。そのまま、真似るから名づけました。
Flickrで人気の写真とそのEXIFを参考にすることにより、撮影技術の向上を目指す写真ギャラリーサイトです。

つまり、 日替わりでいい感じの写真が見られるフォトギャラリー ですね!

f:id:mtmtkzm:20170228013928p:plain

(Webデザインと、その他ヴィジュアルとの乖離がすごい)

技術的なところ

ユーザが写真を投稿するとき、多くのSNSは自動で写真のEXIFを削除するようです。 そんな中Flickrでは、EXIFが残っている写真(※)もあるのでFlickrAPIを利用することにします。

EXIFが、写真本体からは削除されているものの、紐付けた別の場所で保管されている状態

写真の選別

Flickr Services: Flickr API: flickr.interestingness.getList

Returns the list of interesting photos for the most recent day or a user-specified date.

interestingなphotoを取得できるAPIがありました。なんて曖昧な表現なんだ…と思いつつも、他を調べるのも面倒だったのでこれを使うことにしました。

取得できた固有のIDをもとにEXIFを取得し、いい感じに情報が揃っている写真のみフィルターし、表示しています。

フロントエンド

その描画に、vue.js v2 を初めて使ってみました。まあ、v-for="photo in photos"くらいしかしてませんが。笑

ちなみにmasonry的なレイアウトは、無理矢理ではありますがCSS3Flexboxを使ってやってみました。Flexbox関連のプロパティ多すぎて覚えられないね。

公開

GitHub Pagesに独自ドメインをあてています。

つくってみて思ったこと

カメラの設定を見れるのもいいけど、加工のbefore/afterを見たいよね

今後

既に、.gallery の契約に3000円くらい支払っているので、一年間くらいは頑張って開発してみようかと。新卒入社後のアウトプットする場として活用することにします😆

実装したい機能(するとは言っていない)

  • EXIFの値で写真をフィルタリングする機能
  • 写真をお気に入り登録する機能
  • 写真投稿機能

それではどうぞ👇

maner.gallery