![• H.N. :蜜葉 優 [@mitsuba yu]
• Microsoft MVP for Windows Development
• 昔は会社やってたりもした。
• Freelance / Designer / Developer / Photographer
• Keynoteの表紙はいつも自分で撮影
• 最近、ベタを飼い始めました。
• http://c-mitsuba.hatenablog.com
Profile](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie nameless ある沼にDeepDiveした人のポートフォリオ
Ähnlich wie nameless ある沼にDeepDiveした人のポートフォリオ (20)
Mehr von c-mitsuba
Mehr von c-mitsuba (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (9)
nameless ある沼にDeepDiveした人のポートフォリオ
- 1. nameless - ある沼にDeepDiveした人のポートフォリオ - @mitsuba_yu
- 2. • H.N. :蜜葉 優 [@mitsuba yu] • Microsoft MVP for Windows Development • 昔は会社やってたりもした。 • Freelance / Designer / Developer / Photographer • Keynoteの表紙はいつも自分で撮影 • 最近、ベタを飼い始めました。 • http://c-mitsuba.hatenablog.com Profile
- 3. 趣味、写真。
- 4. /604 • 写真管理・閲覧Web • asp.net core mvc 製 • 割と真面目に作った。 • https://name-less.space nameless
- 5. • プロダクトを０から作り出す時に、 ”こういう思想、こういう過程でプロダクトを作っているよ。” っていう一例を見てもらえれば。 • 費用感。 • Web開発とかAzure WebAppのちょっとした便利ネタ。 Takeaway /605
- 6. • 動機 • Visual Studioを開く前に • DaDD、名前とロゴの話 • 技術コンセプト、技術選定 • デザイン • デザインコンセプト • インフラ • 開発環境 • AzureとCloudflare • 実装 • ストレージ • キャッシュ対応 • oEmbed • 認証 Agenda /606
- 7. 7 • 今まではflickrに上げてた。 • 現像-公開をiMacからMobileで 完結するようになった。 • flickrだとMobile Uploadがイケてない し、容量制限もある。 • 写真やってます、っていうなら 自分でブランディングした公開用サイト が欲しい。 Motive
- 9. • ドメイン取得駆動開発。 • ドメインを取るためには、まず名前の考案が必要。 • 名前が決まれば、プロダクト名が決まる。 • 名前が決まれば、ロゴが作れる。 • プロダクト名が決まれば、.slnを作れる。 • 開発を始められる。 • ドメイン取得にはお金がかかる。 • 真面目に作る気概が生まれる。 • 挫折しない心大事。 Domain acquisition Driven Development /609
- 10. • なぜその名前をつけたか、を説明できる名前をつける。 • ぐぐって被らないような一意だと尚良。 • だけど今回はあくまで趣味サイトなので、ぐぐってたどり着くようなサ イトじゃないから、気にしない。 • できれば、この時点でコンセプトカラーも決めてしまえると尚良。 今回は写真が主題なので、モノクロ。 余計な色は入れたくないし。 Product Name /6010
- 11. • nameless (ねむれす） • なにかテーマを決めて撮った写真を集めたのではなくて、 日常カメラを持って出歩いた中の１枚を寄せ集めたもの。 • タイトルや背景は置いておいて、純粋に写真を見てほしい。 文字列に第一印象を左右されないコンセプトの名前。 Product Name /6011
- 14. • 薄く、安く、軽く手間なく、でも魅せれるものを、作る。 • 薄く作る。 • DBとかメンテしたくない。 • 運用費は極力安くする。 • コンテンツ管理は極力簡単にできて、手間の無いように作る。 • 更新しにくいウェブページはめんどいよね。 Technology Concept /6014
- 15. • Web • Azure Web Apps • .net core 3.1 • Azure Blob Storage • Cloudflare CDN • No-DB • asp.net core mvc • 仕事で使うことに その勉強も兼ねて。 • Bootstrap 4.x • JSライブラリ • 基本的になし。 • vueとか検討したけど、まず は素で。 Technology Selection /6015
- 17. • 名前を決めた • プロジェクト名を決めないと、プロジェクトが作れない。 • ドメインを取った • お金が掛かると、やる気がでる。頓挫させない。 • ロゴを作った • ロゴがあると、やる気がでる。頓挫させない。 • 技術コンセプトを決めた • このプロダクトをどんな設計思想で作るかを決めた。 • 技術選定を（ある程度）した • 使う技術を決めて、技術コンセプトがブレないようにした。 Before Visual Studio /6017
- 18. デザイン
- 19. • 写真が主役。 • 集中と一覧性を重きに作る。 • 原寸大写真を使う -> 大画面デバイスを優先した見た目。 • モバイルは後回し。 • どんな機材を使ったか、なにを思ってシャッターを切ったか。 • そんなポエムよりまずは写真を１番に見てほしい。 • 全ての写真を平等に扱う。 • 被写体、テーマ、機材とかでフィルタリング・クラスタリングは （今は）しない。 Design Concept /6019
- 21. インフラ
- 22. • nameless.sln • Web • nameless -> 公開ページ • nameless.admin -> 管理ページ • nameless.api -> 写真取得公開API • Library • nameless.ClassLibrary -> Blobアクセスとか共通処理を。 • UWP • nameless.store -> 一応MVP for WDなので。 Project /6022
- 23. • 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
- 24. • https://www.cloudflare.com/ja-jp/ • サンフランシスコの会社 • DNSとかCDNとかのインフラサービスやさん。 • １度アクセスがあったコンテンツを世界中に散らばった地域のサーバに キャッシュする。 • めっちゃ速い。 Cloudflare /6024
- 26. User Cloudflare CDN Azure WebApp Azure Blob • 初めてアクセスされるような時。 • CDNにHTMLも写真もキャッシュがない時。 • 費用はVMのホスト代（固定費）＋ Blob維持費 + Blob通信費。 Network /6026
- 27. User Cloudflare CDN Azure WebApp Azure Blob • CDNにキャッシュがある時。 • Azureに掛かるお金はVMのホスト代（固定費）＋ Blob維持費 Network /6027
- 28. User Cloudflare CDN Azure WebApp Azure Blob • CDNにHTMLのキャッシュがないとき（メタデータを更新した時とか） • Azureに掛かるお金はVMのホスト代（固定費）＋ Blob維持費 Network /6028
- 29. • 大阪の自宅から、Azure 西日本とCloudflareで速度差計測しても、あんま変 わらんかった（そりゃそう。 • fast.comで55Mbps で１写真ページが2秒ぐらい。 • せっかくなので、ブラジル南部にVM立てて検証してみた。 Speed /6029
- 30. Disable Cache / 10.81 s
- 31. Enable Cache / 952.91 ms
- 32. • ブラジル南部 VMから西日本WebApp/Blobまで10倍速い。 • Blobへの通信を軽減してくれる。 • CloudflareのDNSサービスで、ネイキッドドメイン(サブドメインのない) 含む、カスタムドメインでのアクセスをHTTPS化できる。 • これを素直にWebAppでやろうとすると、かなり高いプランが必要だっ た。(P1v2以上 月17500円ぐらい。 • 実は最初CDNよりも、HTTPS化のために導入した。 Cloudflare /6032
- 33. • 170枚*2(original , thumbnail)のJPEG 1GBちょっとぐらい • WebApp JapanWest B1 月約7000円、Blob Storageと通信費 月約40円 • ドメインが年3278円 • トータル、月7314円ぐらい。WebAppがやっぱちょっと高いね。 Total Cost
- 34. 実装
- 35. • Cloudflare • Azure Blob • Auth • oEmbed • ただし細かいコードは割愛。 Dev Point /6035
- 36. • Cloudflareさま、まじさまさま！ • とはいえ、キャッシュを管理する実装が必要。 • これがないとアップデートしても、古いままのページが表示されてしまう。 • １、写真を新規にアップロードしたとき。 • ２、写真の情報を変更したとき。 • ３、開発中にキャッシュが邪魔になったとき。 Cloudflare /6036
- 37. Cloudflare /6037
- 38. • 今回、DBなし。使いたくない。 • Blobに画像をアップロード • Blob メタデータに書込 タイトル、機材、コメント 表示非表示、撮影日時 • 何かあった時に、 最悪Blobさえ生きてれば、 多分、なんとでもなる。 Azure Blob
- 39. • Blobはコンテナにある ファイル名とメタデータをListで取 得できる。 （5000件/１リクエスト） • メタデータの撮影日でソート • ファイル名をCDNのURLと 合わせて、HTMLに出力 • ex):file name -> 00010005_edited.jpg -> https://photo.name-less.space/original/ 00010005_edited.jpg Azure Blob
- 40. Azure Blob /6040
- 41. Azure Blob
- 42. • twitter cardとかfbとかyoutubeみたいに、外部のページから呼ばれた時に HTMLを埋め込む統一規格。 https://oembed.com/ • はてなブログに写真を共有した時に、flickrみたいに綺麗に表示したかった から実装した。 • 個別ページでは、その写真が。 • 一覧ページでは、最新の写真を表示した。 oEmbed
- 44. oEmbed /6044
- 45. oEmbed
- 47. • 公開ページはともかく、管理画面には認証 を掛けたい。 • Azure AD B2Cを検討 • Open IDでログインできる（Twitterと かfbとか でも…※後述） • B2C用のコードを書かないといけない （コレ自体はAttributeの追記だけ） • でも、基本ぼっち。B2Cって規模に合 わなくない？ Auth /6047
- 48. • EasyAuth+AADにした。 • portal作った時にあるはずの既存AADを 設定した（最初は自分のみ。 （要はこのポータルに入れる人のみ。 • ポチッとするだけで、WebAppごとに、 WebApp全体をMSアカウント認証 • 追加コード不要 • 別サービスで認証する場合は、API Keyとか ClientIDとか取得が必要（めんどい（B2Cも Auth
- 50. 次のフェーズ /6050
- 51. • Blob Index Tags • nameless.api • nameless.store • nameless.MR???? • nameless.card Extend /6051
- 52. • Blobを検索、絞込するためのプロパティがプレビュー中。 • ただし、カナダ中部、カナダ東部、フランス中部、フランス南部リージョン • https://docs.microsoft.com/ja-jp/azure/storage/blobs/storage-blob-index-how-to?tabs=azure-portal Blob Index Tag (Preview)
- 53. • https://api.name-less.space/ • Hello api.nameless. /latest => Get latest photo API; • https://api.name-less.space/latest nameless.api /6053
- 54. • Web版のUI完全移植を目指してつくってみた。 • でも、やっぱり細部で向き不向きがあったり 未実装で全く同じに作れない箇所もでてきた。 • nameless.ClassLibraryを使えば一瞬でできる のでは？？？？ • Webは.net coreのClassLibraryだけど、 UWPは.net standardのClassLibraryが必要。 そのまま参照はできなかった。 • 機会があれば、またこの話もどこかで。 nameless.store /6054
- 55. • HoloLens / Windows MixedReality版も、なんかいい魅せ方が思いついたら つくってみたい。 • いまのとこ、2Dコンテンツを3Dにする意味とは？？？？？感ある（ nameless.MR???? /6055
- 57. • インストールされてるフォントで、任意の文字列を表示する。 フォント選定支援 UWPアプリ(公開中) とその紹介カード。 tanzanite card /6057
- 58. • 暇が出来て、渡せるような時勢になったら namelessを紹介するカードみたいなのも 作りたい。 • 写真の印刷の解像度調整が難しそう。 • ちなみにちょっと良い紙で200枚1500円ぐらい。 （名刺用はさらに良い紙を使うけど） nameless.card /6058
- 59. まとめ /6059
- 60. • ポートフォリオをどう作ってきたかをお話しました。 • 真面目に作ったとはいえ、初めてのC# Webだったけど、よくできたのでは？ • 技術コンセプトは、管理は安く、薄く。楽に。 • 運用費用は極力減らして、コンテンツの扱いもファイル１つで、 アップデートもモバイルからさくっと。 • BlobとCloudflareはいいぞ！ • ブランディングへのコストは惜しみなく。 • コストをかければ大事にするし、魅せれるようになる。 • ドメイン、ロゴ作成、oEmbed、ブランディングカード。 Conclusion /6060