はてなブックマーク

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

概要 .NET 5の正式版がリリースされ、Blazorも新機能が追加されました。 WebAssemblyがGAされてからしばらくBlazorから遠のいていましたが、リハビリを兼ねて新機能に関して簡単なサンプルを見ながら説明していこうと思います。 MSの公式ドキュメントに書いてある事をなぞっている点が多いとは思いますが、合わせて読むことで理解の助けになればと思います。 大した内容ではありませんが、下記にデモとソースを公開しています。 Demoはこちら GitHubのソースはこちら 今回、紹介する項目は下記になります。 CSSの分離 JavaScriptの分離とオブジェクト参照 InputRadioおよびInputRadioGroupコンポーネント InputFileコンポーネント コンポーネントの仮想化 UIフォーカスの設定 アセンブリの遅延読み込み ※基本的にWebAssemblyの視点で

概要 Blazorにおけるログイン認証の手法の個人的なまとめです。 下記のようなログイン画面を実装する際のメモです。 デモ ソースコード 前提 .NET Core SDK 3.1.100 Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview4.19579.2 Visual Studio 2019 16.4.0 その他、記事内で使用しているパッケージ Microsoft.AspNetCore.Components.Authorization 3.1.0 Blazored.LocalStorage 2.1.1 FirebaseAuthentication.net 3.4.0 MatBlazor 2.0.0 WebAssembly版(Client版)での話となります。 SPAにおける認証の実装 過去VueやNuxtで作成したSPAは下記のような

概要 Blazor WebAssembly 3.2.0 Preview 3がリリースされ、Visual Studio(とVisual Studio Code)のデバッグに対応したようなので、Visual Studioでのデバッグを試した際のメモです。 参照元 環境 Windows 10(64bit) 1909 Google Chorome 80.0.3987.149 (64bit) .NET Core SDK 3.1.300-preview-015048 Microsoft.AspNetCore.Blazor 3.2.0-preview3.20168.3 Visual Studio 2019 Version 16.6.0 Preview 2.0 セットアップ 最新の.NET Core SDK(3.1.201) のインストール 下記から最新バージョンのSDKをインストールします。 リンク テ

概要 つい最近正式版がリリースされた、Blazor WebAssemblyですが、 そのBlazorのコンポーネント向けのテストフレームワークのbUnitを試した際のメモです。 bUnit公式 サンプルコード 前提 Windows 10 (64bit) Visual Studio 2019 16.6 .NET Core SDK (3.1.300) ※今回はBlazor WebAssemblyを使用しています。 (Server-sideは未検証ですが恐らく動くと思います。) 手順 Blazorプロジェクトの作成 Visual Studioもしくはdotnetコマンドから、Blazor WebAssemblyの新規プロジェクトを作成してください。 bUnit用のテンプレートをインストール 下記のコマンドでテンプレートをインストールします。 バージョンは2020/5/22時点で1.0.0-bet

概要 Blazorを使ってカメラから本のバーコードを読み取り、情報を取得して表示する簡単なWEBアプリを作成したので、簡単に紹介します。 Demo (※注意：iOS13のSafariで開くとLoading画面で固まってしまう場合がありました。iOS12環境だと動いたので、最新のBlazorでiOS13の対応が入っているはずですが、まだ未完全なのかもしれません。) アプリのイメージ 下記のように、カメラで本のバーコードをスキャンすることで本の情報と中古価格を調べることができます。 前提 .NET Core SDK 3.1.100 Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview4.19579.2 Visual Studio 2019 16.4.0 実装 実装していく中で、苦労した部分のメモです。 カメラの起動とバーコード認識 カメラの動

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに vue.jsに限ったことではありませんが、UIフレームワークを使用していて、標準のinputタグを配置すると見た目が統一できない（ブラウザによって変わる、UIフレームワークの見た目と統一性がない)点が気になるかと思います。 そこでinputタグを直接使用せずにファイルの選択ダイアログを表示させます。 左：通常のinputタグを用いた場合 右：inputタグを用いない場合 コード ※vuetifyを使用していますが、(v-xタグ)今回の説明と直接は関係は関係ありません。 他のフレームワークの場合、v-btnはそのフレームワーク等のボタンに置き換えてください。 <template> <v-container> // 非表示のinputタグを格納 <input style="display: none" ref="input" type="file" accept="image/jpe

概要 Webアプリでクライアントサイド(ブラウザ)で画像を圧縮(リサイズ)する方法の紹介です。 サンプルとして下図のような入力した画像をプレビュー表示した上で、確定時にサーバーに画像をアップロードするまでのサンプルコードを紹介します。 ※今回はvue.jsとvuetifyによるサンプルになりますが、UIのレイアウト部分以外は基本的に一般的なjavascirptですので 他のフレームワークを使用している場合等でも参考にはなるかと思います 動くデモとGitHubのサンプルコードは下記です。 Demo GitHub 背景 Webアプリで、画像ファイルをアップロードするといったシチュエーションはよくあると思います。 スマホ等で撮影した写真等だと、解像度やファイルサイズも大きいため、そのまま使用せず一度リサイズしたりする事が多いかと思います。 アップロード後にサーバ側で処理するといった手法もあります