asp.net core mvcと .net core 3.1時代に作って
.net 6に上げてから手を入れてない
namelessを現代的にしたい話

asp.net core mvcと .net core 3.1時代に作って .net 6に上げてから手を入れてない namelessを現代的にしたい話 @mitsuba_yu

Profile • Yuki Izumoto a.k.a 蜜葉 • @mitsuba_yu • Microsoft MVP for Developer Technologies • スクラムマスター at KAG • フリーランス at silkyfeel • Keynoteの表紙はいつも自分で撮影 • http://c-mitsuba.hatenablog.com

• http://c-mitsuba.hatenablog.com

趣味、写真。

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

• https://name-less.space

History 2020-07 2020-11 2021-06 2022-02 初回リリース .net 5 Blob Index Tags .net 6 .net core 3.1 アップデート で色分け実装 アップデート 2025-03 .net 9 アップデート 5/60

2020-07 first release

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

Technology Selection • Web • asp.net core mvc • Azure Web Apps • Bootstrap 4.x • .net core 3.1 • JSライブラリ • Azure Blob Storage • 基本的になし。 • Cloud are CDN • vueとか検討したけど、まずは素 で。 • No-DB fl 8/60

Project • nameless.sln • Web • nameless -> 公開ページ • nameless.admin -> 管理ページ • nameless.api -> 写真取得公開API • Library • nameless.ClassLibrary -> Blobアクセスとか共通処理を。 9/60

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

Cloudflare • https://www.cloud are.com/ja-jp/ • サンフランシスコの会社 • DNSとかCDNとかAnalyticsとか任せてる。 • めっちゃ速い。 • 波で乱数発生器作ってるような会社 fl 11/60

• https://www.cloudflare.com/ja-jp/
• https://blog.cloudflare.com/chaos-in-cloudflare-lisbon-office-securing-the-internet-with-wave-motion/

Network • 初めてアクセスされるような時。 User Cloud are CDN Azure WebApp Azure Blob Azure WebApp Azure Blob • CDNにキャッシュがある時。 User Cloud are CDN fl fl 12/60

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

• http://fast.com

Disable Cache / 10.81 s

Enable Cache / 952.91 ms

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

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

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

• https://oembed.com/

oEmbed • 未実装 • 実装済 19/60

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

Auth • 出先のiPadから更新できるように、管理ページ から写真アップロード。 • WebAppsにEntra認証かけて、サクッと実装 21/60

2025-03 .net 9 update

• 各csprojのプロパティからターゲットフレームワーク を.net 9にする。 • nuget からライブラリを最新にする。 • 全ファイル開いて alt + enterでVSの言われた通り直す。 • 以上！

C#10 to C#13 • namespaceのあとの{}がいらなくなった。 • プライマリコンストラクターがつかえるようになった。 class Person { public string Name; public int Age; } public Person(string name, int age) { Name = name; Age = age; } class Person(string name, int age) { public string Name = name; public int Age = age; } • 正直blobに画像アップロードして出したいだけだから、 そんなC#の機能を使い切るようなコードを書いてない…. 24/60

Bootstrap 4.3.1 to 5.1.0 • 今回の移行ポイントはレイアウトだけ。 • left -> start , right -> end bs4 bs5 ml-* ms-* pl-* ps-* mr-* me-* pr-* pe-* text-left text-start text-right text-end 25/60

既存ライブラリのアップデートはこれだけ。 でも、 もう少し改善というか現代的にしたい。

Cloudflare SpeedTest • アメリカからスピードテスト を叩くと、画像が大きいって 言われてしまう。 • 実際 lazy loadingしてるとは いえ、サムネイルを全部表示 すると71MBもあった。 27/60

History 2020-07 2020-11 2021-06 2022-02 初回リリース .net 5 Blob Index Tags .net 6 .net core 3.1 アップデート で色分け実装 アップデート 2025-03 .net 9 アップデート 28/60

.WebP • Googleが開発した高圧縮率の画像フォーマットで、ウェブページの表示速度向上や データ使用量削減が見込める。 • いいとこどりフォーマット。 WebP JPEG PNG GIF 非可逆圧縮 可逆圧縮 可逆圧縮 ○ △ 256〜1670万 256 非可逆圧縮 圧縮方式 可逆圧縮 を選べる 透過処理 ○ 表現できる色 1670万 アニメーション 表示 ○ 1670万 ○ 29/60

.WebP at 2020 • デスクトップブラウザ: • Google Chrome: WebPをサポート • Mozilla Firefox: バージョン65（2019年1月リリース）以降でWebPをサポート • Microsoft Edge: Chromiumベースの新バージョン（2020年1月リリース）からWebP をサポート • Safari: 2020年9月リリースのバージョン14からWebPをサポート • Internet Explorer: WebPをサポートしていない。 。​ 。​ 。​ 。​ 30/60

.WebP at 2020 • モバイルブラウザ: • Android: 標準ブラウザおよびChromeでWebPをサポート • iOS (iPhone/iPad): iOS 14（2020年9月リリース）からSafariがWebPをサポート • OS: • Windows 10: エクスプローラー上でサムネイル表示は可能だが、デフォルトの「フォ ト」アプリではWebP画像を開けない • macOS: バージョン11 Big Sur（2020年11月リリース）から、デフォルトの「プレ ビュー」アプリでWebP画像の表示・編集が可能 。​ 。​ 。​ 。​ 31/60

.WebP at 2025 • 主要なデスクトップおよびモバイルブラウザはすべてWebPをサポート。 • Google Chrome、Mozilla Firefox、Microsoft Edge、Safariなどの最新バージョンが WebPに対応。 • OSレベルでも、Windows、macOS、iOS、Androidの最新バージョンはWebPをネイ ティブにサポート、デフォルトの画像ビューアでWebP画像を表示・編集できる。 32/60

.WebP at 2025 • まずはサムネイルをWebP に完全移行。 • 71MBから18MBに圧縮。 • ４倍早い！？ • 実寸サイズの写真もアップ ロード時にWebP変換する ようにしてもよいかも。 33/60

Cloudflare Fonts • Google FontsからひっぱってるフォントをCloud areのエッジで肩代わりしてくれる。 fl 34/60

Cloudflare SpeedTest • 83 -> 98点、２秒早くなった！ 35/60

まとめ

Conclusion • .netの息が長い。やっぱ互換性が強い。 • Web開発にasp.net core mvcはいいぞって言うつもりはサラサラないけど、 とはいえ数年放置していても、アップデートが楽なのは正義。 • 言語バージョン対応もVSの言う事聞いてれば、とりあえずそれっぽくなる。 • SPAにする必要なくて、塩漬けにするならこれでいいや感。 • これがReactとかVueだと、node moduleのアップデートまみれで心折れそう。 37/60

Conclusion • もともと技術選定も軽く薄く作る。ファーストビューめっちゃ早くする。 • でも写真がメインコンテンツで自分のストレージ代わりでもあるから、 劣化はさせたくない。ある程度ロードに時間がかかるのは仕方ない。 • 2020年リリース当時は.webp使うには、時代が追いついてなかった。 • 現代の画像リソースはなんもかんもwebpとsvgでいいかもしれない。 • AnalyticsもCDNもセキュリティも全部任せられる、Cloud areはいいぞ！ fl 38/60