atelier:mitsuba

i love UI/UX, Blend, XAML, Behavior, P5, oF, Web, Tangible Bits and Physical computing. なにかあればお気軽にご連絡ください。atelier@c-mitsuba.com

写真のポートフォリオ用サイトを作った。

自分用のポートフォリオサイトって以前作ったやつがあったのだけど、ソースぶっ飛ばしてしまったんよね。
写真管理はflickrを使ってたのだけど、それとは別に自分の写真用ポートフォリオサイトを作るかって思ってサクッと作った。


name-less.space`

ブログ写真専用にするか???とか思ってたのもあって、もともと1つ作りたいなと思ってたんだけど、[nameless(ねむれす)]っていうタイトルが降りてきたので作ってみた。
いい感じのドメインも空いてたし、ドメイン取得駆動開発ははかどってよい(


以下構成実装設計の話。

Webサーバは素直にAzureのWebApp。

ドメインはvaluedomainで買ったのをcloudflareに向けてhttps化した。
Azure内でLetencryptとか使って頑張るよりめっちゃ簡単で、cloudflareにアクセスしたいページとドメインを入力するとほぼほぼよしなにしてくれて優秀。


写真を更新するためにいちいちWebページをいじってデプロイするのはアホらしい。
ので、写真はAzure Blobに入れる。
Azure Blobの一覧取得は最大5000件まで一度に取得できるので、これをファイル一覧として扱う。
写真のタイトルと、"ぱっと見隠してある"コメントと機材は、Blobのメタデータに入力することにした。
これで写真とそのテキストを管理するようなDBだったりJSONは一切不要。すばらしー。


写真はフルサイズであげてしまって、サムネは初回なのでMacAutomatorでサクッと横800pxに縮小バッチを掛けて作成。
現状は写真を2つアップロードするとWebにコンテンツが追加される。
ここはfunctionsを使えば、フルサイズ写真からサムネを作るように自動化できそう。


Blobには同じくcloudflareでカスタムドメイン化してる。
cloudflareを刺せばcloudflareのCDNに乗っかって、フルサイズな写真もさくさく降ってくる。
初回アクセスはAzure Blobからダウンロードされるし、2回目はcloudflareのエッジにキャッシュされた写真が降ってくる。
ってことは毎アクセス無闇矢鱈にAzure Blobにアクセスしないので課金される転送量が最小限に済む。
しかもめっっっっっちゃ速い!!!!すばらしー。
(今回はカスタムドメインSSLにしたくてcloudflareを使ったらCDNもついてきたっていう実態だけど、世の中の皆さんは普通逆の意図で使うらしい。)
(今お手頃だったりフリーな証明書機関っていくつかあるけど、でもAzure内完結するようにAzure WebAppをカスタムドメインhttps化して使いたい!ってなると割と結構かなりめんどくさい。)
(cloudflareに黙って付いていくって思えるぐらいに気に入ってしまった。)


今回サイトは.net core 3.1でasp.net core mvcで開発。
ぇー、C#Webなんてチョットって昔は思ってたけど、せっかくなので勉強がてら。
っていうか、むしろこの勉強目的が本命。

最初にasp.netに触れたのはまだC#をほとんど使えなかった頃だから、今の時代だとC#/Azure/Visual Studioの親和性の良さを感じれるから、悪くないかな。
mvcも肌感として分かった気がする。
ただ、mvcに乗っかるとURLが長めになりがちで、見栄えのいい短いURLで作れないのがしゃーないとは思いつつ、ちょっと気に入らないぐらいかな。


ちなみにフォントはgoogle fontから見繕ってみた。あんまり読ませる気のないフォントにしたけど。


横スクロールだったりわざと隠したリンクだったり古き良き時代の名残を感じるけど、小綺麗に作ったつもり。
でも裏はちゃんとクラウドに乗っかったものが出来て満足。
勉強しながら作って3日ぐらいかな。

1つ作って仕上げたので、asp.net core mvcを仕事でも使っていくぞ!