nameless ある沼にDeepDiveした人のポートフォリオ

nameless - ある沼にDeepDiveした人のポートフォリオ -
@mitsuba_yu

• H.N. :蜜葉優 [@mitsuba yu]
• Microsoft MVP for Windows Development
• 昔は会社やってたりもした。
• Freelance / Designer / Developer / Photographer
• Keynoteの表紙はいつも自分で撮影
• 最近、ベタを飼い始めました。
• http://c-mitsuba.hatenablog.com
Profile

/604
• 写真管理・閲覧Web
• asp.net core mvc 製
• 割と真面目に作った。
• https://name-less.space
nameless

• プロダクトを０から作り出す時に、 
”こういう思想、こういう過程でプロダクトを作っているよ。” 
っていう一例を見てもらえれば。
• 費用感。
• Web開発とかAzure WebAppのちょっとした便利ネタ。
Takeaway
/605

• 動機
• Visual Studioを開く前に
• DaDD、名前とロゴの話
• 技術コンセプト、技術選定
• デザイン
• デザインコンセプト
• インフラ
• 開発環境
• AzureとCloudﬂare
• 実装
• ストレージ
• キャッシュ対応
• oEmbed
• 認証
Agenda
/606

7
• 今まではﬂickrに上げてた。
• 現像-公開をiMacからMobileで 
完結するようになった。
• ﬂickrだとMobile Uploadがイケてない
し、容量制限もある。
• 写真やってます、っていうなら 
自分でブランディングした公開用サイト
が欲しい。
Motive

Productを作る上で、
Visual Studioを開く前に
決めておくべきこと。
8

• ドメイン取得駆動開発。
• ドメインを取るためには、まず名前の考案が必要。
• 名前が決まれば、プロダクト名が決まる。
• 名前が決まれば、ロゴが作れる。
• プロダクト名が決まれば、.slnを作れる。
• 開発を始められる。
• ドメイン取得にはお金がかかる。
• 真面目に作る気概が生まれる。
• 挫折しない心大事。
Domain acquisition Driven Development
/609

• なぜその名前をつけたか、を説明できる名前をつける。
• ぐぐって被らないような一意だと尚良。
• だけど今回はあくまで趣味サイトなので、ぐぐってたどり着くようなサ
イトじゃないから、気にしない。
• できれば、この時点でコンセプトカラーも決めてしまえると尚良。 
今回は写真が主題なので、モノクロ。 
余計な色は入れたくないし。
Product Name
/6010

• nameless (ねむれす） 
• なにかテーマを決めて撮った写真を集めたのではなくて、 
日常カメラを持って出歩いた中の１枚を寄せ集めたもの。
• タイトルや背景は置いておいて、純粋に写真を見てほしい。 
文字列に第一印象を左右されないコンセプトの名前。
Product Name
/6011

名前が決まった！ 
じゃあ次は、
どんな設計思想で作る？
/6013

• 薄く、安く、軽く手間なく、でも魅せれるものを、作る。
• 薄く作る。
• DBとかメンテしたくない。
• 運用費は極力安くする。
• コンテンツ管理は極力簡単にできて、手間の無いように作る。
• 更新しにくいウェブページはめんどいよね。
Technology Concept
/6014

• Web
• Azure Web Apps
• .net core 3.1
• Azure Blob Storage
• Cloudﬂare CDN
• No-DB
• asp.net core mvc
• 仕事で使うことに 
その勉強も兼ねて。
• Bootstrap 4.x
• JSライブラリ
• 基本的になし。
• vueとか検討したけど、まず
は素で。
Technology Selection
/6015

ここまできて、 
やっとプロジェクトが作れる！
/6016

• 名前を決めた
• プロジェクト名を決めないと、プロジェクトが作れない。
• ドメインを取った
• お金が掛かると、やる気がでる。頓挫させない。
• ロゴを作った
• ロゴがあると、やる気がでる。頓挫させない。
• 技術コンセプトを決めた
• このプロダクトをどんな設計思想で作るかを決めた。
• 技術選定を（ある程度）した
• 使う技術を決めて、技術コンセプトがブレないようにした。
Before Visual Studio
/6017

• 写真が主役。
• 集中と一覧性を重きに作る。
• 原寸大写真を使う -> 大画面デバイスを優先した見た目。
• モバイルは後回し。
• どんな機材を使ったか、なにを思ってシャッターを切ったか。
• そんなポエムよりまずは写真を１番に見てほしい。
• 全ての写真を平等に扱う。
• 被写体、テーマ、機材とかでフィルタリング・クラスタリングは 
（今は）しない。
Design Concept
/6019

• nameless.sln
• Web
• nameless -> 公開ページ
• nameless.admin -> 管理ページ
• nameless.api -> 写真取得公開API
• Library
• nameless.ClassLibrary -> Blobアクセスとか共通処理を。
• UWP
• nameless.store -> 一応MVP for WDなので。
Project
/6022

• Azure DevOps
• ソース管理 / CI / CD
• Azure App Service -> 1 App Service Plan -> 3 Web Apps
• nameless、nameless.admin、nameless.api ホスト
• Azure Blob
• 写真ストレージ
• jpgの塊 + metadataに撮影日、機材、コメントを追記
Azure
/6023

• https://www.cloudﬂare.com/ja-jp/
• サンフランシスコの会社
• DNSとかCDNとかのインフラサービスやさん。
• １度アクセスがあったコンテンツを世界中に散らばった地域のサーバに
キャッシュする。
• めっちゃ速い。
Cloudflare
/6024

Cloudflare
• https://www.cloudﬂare.com/ja-jp/
plans/
• 今回はフリープラン！！！

User
Cloudﬂare
CDN
Azure
WebApp
Azure
Blob
• 初めてアクセスされるような時。
• CDNにHTMLも写真もキャッシュがない時。
• 費用はVMのホスト代（固定費）＋ Blob維持費 + Blob通信費。
Network
/6026

User
Cloudﬂare
CDN
Azure
WebApp
Azure
Blob
• CDNにキャッシュがある時。
• Azureに掛かるお金はVMのホスト代（固定費）＋ Blob維持費
Network
/6027

User
Cloudﬂare
CDN
Azure
WebApp
Azure
Blob
• CDNにHTMLのキャッシュがないとき（メタデータを更新した時とか）
• Azureに掛かるお金はVMのホスト代（固定費）＋ Blob維持費
Network
/6028

• 大阪の自宅から、Azure 西日本とCloudﬂareで速度差計測しても、あんま変
わらんかった（そりゃそう。
• fast.comで55Mbps で１写真ページが2秒ぐらい。
• せっかくなので、ブラジル南部にVM立てて検証してみた。
Speed
/6029

• ブラジル南部 VMから西日本WebApp/Blobまで10倍速い。
• Blobへの通信を軽減してくれる。
• CloudﬂareのDNSサービスで、ネイキッドドメイン(サブドメインのない) 
含む、カスタムドメインでのアクセスをHTTPS化できる。
• これを素直にWebAppでやろうとすると、かなり高いプランが必要だっ
た。(P1v2以上月17500円ぐらい。
• 実は最初CDNよりも、HTTPS化のために導入した。
Cloudflare
/6032

• 170枚*2(original , thumbnail)のJPEG 1GBちょっとぐらい
• WebApp JapanWest B1 月約7000円、Blob Storageと通信費月約40円
• ドメインが年3278円
• トータル、月7314円ぐらい。WebAppがやっぱちょっと高いね。
Total Cost

• Cloudﬂare
• Azure Blob
• Auth
• oEmbed
• ただし細かいコードは割愛。
Dev Point
/6035

• Cloudﬂareさま、まじさまさま！
• とはいえ、キャッシュを管理する実装が必要。
• これがないとアップデートしても、古いままのページが表示されてしまう。 
• １、写真を新規にアップロードしたとき。
• ２、写真の情報を変更したとき。
• ３、開発中にキャッシュが邪魔になったとき。
Cloudflare
/6036

• 今回、DBなし。使いたくない。 
• Blobに画像をアップロード
• Blob メタデータに書込 
タイトル、機材、コメント 
表示非表示、撮影日時
• 何かあった時に、 
最悪Blobさえ生きてれば、 
多分、なんとでもなる。
Azure Blob

• Blobはコンテナにある 
ファイル名とメタデータをListで取
得できる。 
（5000件/１リクエスト）
• メタデータの撮影日でソート
• ファイル名をCDNのURLと 
合わせて、HTMLに出力
• ex):ﬁle name -> 00010005_edited.jpg ->  
https://photo.name-less.space/original/
00010005_edited.jpg
Azure Blob

• twitter cardとかfbとかyoutubeみたいに、外部のページから呼ばれた時に
HTMLを埋め込む統一規格。　https://oembed.com/
• はてなブログに写真を共有した時に、ﬂickrみたいに綺麗に表示したかった
から実装した。
• 個別ページでは、その写真が。
• 一覧ページでは、最新の写真を表示した。
oEmbed

• 未実装 
 
 
• 実装済 
 
oEmbed
/6043

• 一覧ページでは最新の写真を表示した結果、 
namelessのリンクを固定ツイートにすると、 
twitter社のキャッシュが切れるたびに、 
なにもしなくても、ここに最新の写真が 
表示されるようになってちょっとうれしい。
oEmbed

• 公開ページはともかく、管理画面には認証
を掛けたい。
• Azure AD B2Cを検討
• Open IDでログインできる（Twitterと
かfbとかでも…※後述）
• B2C用のコードを書かないといけない
（コレ自体はAttributeの追記だけ）
• でも、基本ぼっち。B2Cって規模に合
わなくない？
Auth
/6047

• EasyAuth+AADにした。
• portal作った時にあるはずの既存AADを 
設定した（最初は自分のみ。 
（要はこのポータルに入れる人のみ。
• ポチッとするだけで、WebAppごとに、 
WebApp全体をMSアカウント認証
• 追加コード不要
• 別サービスで認証する場合は、API Keyとか
ClientIDとか取得が必要（めんどい（B2Cも
Auth

細かい実装は少しあるけど、
だいたいソレぐらいの技術要点
で、作られてます。
/6049

• Blob Index Tags
• nameless.api
• nameless.store
• nameless.MR????
• nameless.card
Extend
/6051

• Blobを検索、絞込するためのプロパティがプレビュー中。
• ただし、カナダ中部、カナダ東部、フランス中部、フランス南部リージョン
• https://docs.microsoft.com/ja-jp/azure/storage/blobs/storage-blob-index-how-to?tabs=azure-portal
Blob Index Tag (Preview)

• https://api.name-less.space/
• Hello api.nameless. 
/latest => Get latest photo API;
• https://api.name-less.space/latest
nameless.api
/6053

• Web版のUI完全移植を目指してつくってみた。
• でも、やっぱり細部で向き不向きがあったり 
未実装で全く同じに作れない箇所もでてきた。
• nameless.ClassLibraryを使えば一瞬でできる 
のでは？？？？
• Webは.net coreのClassLibraryだけど、 
UWPは.net standardのClassLibraryが必要。 
そのまま参照はできなかった。
• 機会があれば、またこの話もどこかで。
nameless.store
/6054

• HoloLens / Windows MixedReality版も、なんかいい魅せ方が思いついたら
つくってみたい。
• いまのとこ、2Dコンテンツを3Dにする意味とは？？？？？感ある（
nameless.MR????
/6055

• 名刺デザイン、カードデザイン 
も好きで良くやってる。
• 右はお仕事名刺。 
（写りが悪いな…)
card
/6056

• インストールされてるフォントで、任意の文字列を表示する。 
フォント選定支援 UWPアプリ(公開中) とその紹介カード。
tanzanite card
/6057

• 暇が出来て、渡せるような時勢になったら 
namelessを紹介するカードみたいなのも 
作りたい。
• 写真の印刷の解像度調整が難しそう。
• ちなみにちょっと良い紙で200枚1500円ぐらい。 
（名刺用はさらに良い紙を使うけど）
nameless.card
/6058

• ポートフォリオをどう作ってきたかをお話しました。
• 真面目に作ったとはいえ、初めてのC# Webだったけど、よくできたのでは？
• 技術コンセプトは、管理は安く、薄く。楽に。
• 運用費用は極力減らして、コンテンツの扱いもファイル１つで、 
アップデートもモバイルからさくっと。
• BlobとCloudﬂareはいいぞ！
• ブランディングへのコストは惜しみなく。
• コストをかければ大事にするし、魅せれるようになる。
• ドメイン、ロゴ作成、oEmbed、ブランディングカード。
Conclusion
/6060

nameless ある沼にDeepDiveした人のポートフォリオ

nameless ある沼にDeepDiveした人のポートフォリオ

More Related Content

What's hot

Similar to nameless ある沼にDeepDiveした人のポートフォリオ

More from c-mitsuba

nameless ある沼にDeepDiveした人のポートフォリオ