ピースペース

Archive for the ‘.NET’ Category

Vue.jsアプリのスタートポイント

leave a comment »

Vue.jsの検証アプリがだいたいできてきました。
他のフロントエンドフレームワークをやっていないので比較はできませんし、
簡単なアプリなので全部の機能を使いこなしたわけでもないですが、
特に気になったりひっかかったりするところはありません。
良いと思います>Vue.JS

jsをビルドしてjsを生成する。←おもしろいですね。
このおかげ、Webアプリを昔から慣れ親しんだFormアプリのように作成できるわけです。
20年前にDelphiで作成していたようなアプリをひとつポンとWebページに貼りつける。
というイメージです。

template, style, scriptをひとつの.vueファイルにまとめて書く。のも気にいりました。
jqueryとajaxでページの部分更新を行ったりする場合、
必要になるscriptやcssをどこに配置するのがいいの?←で迷うときがありましたが、
そうゆうのが一番面倒なんですよね;から解放される気がします。

なので、簡単なアプリであっても最初から単一コンポーネント化して開始する。
のが良いと思います。
そして、templateが大きくならないようにどんどんコンポーネントに分解していく。
データの共有をどうするの?とちょっと不安がよぎることはありますが、
余計な心配はしないで、どんどん分解しちゃって良いです。
コンポーネントから別コンポーネントのメソッドを呼び出す仕組みもちゃんとあります。
その辺りも、silverlightで作るvmなんかよりもむしろ簡単なような気がしました。

ということで、webpackに食わせるapp.jsはこれで決まり!で良いと思います。
import Vue from ‘vue’
import root from ‘./root.vue’
new Vue({
    el: ‘#app’,
    components: { root },
    template: ‘<root/>’
})

どんなアプリであってもここから始めてコンポーネントに分解していく。
アプリ開発作業=コンポーネント分解作業。に単純化しちゃいます。
作業規模は単純にコンポーネント数のリニア関数です。いいでしょ?

そして分解したコンポーネントに用意するべきものは
components, props, data, methods, computed, created…
とコンポーネントのプロパティにきちんと整理されているも良いと思いました。
vue.jsをデザインした方はきれい好きな人だと思います。

Written by nasu38yen

2017年12月19日 at 8:25 AM

カテゴリー: .NET, プログラム

Tagged with

MVC5のDIはAutofacで行う

leave a comment »

MVC5で新しいプロジェクトを開始しました。
EntityModelを追加してAPIControllerをひとつ開始するまでにずいぶん手間取りました。

まず最初に悩むのはDBContextをどうするか?です。
プロジェクトにはすでにApplicationDbContextがあります。
そこに作成したModelのDbSetを追加すればよいのでしょうか?
DbContextがひとつであればMigrationで悩むことはなさそうです。
ですが、いずれ作成するServiceクラスでApplicationDbContextをどう参照すればいいのでしょう?
DIとか?そもそもIdentityの動作の仕組みをちゃんと理解してないのでとても不安です。

なので、DbContextは別に追加するのがまずは無難な気がします。
でも、できればDataBaseまで分けたくはない!ということはあるでしょう。
そして、プロジェクトにふたつになったDBContextをどうMigrationすればよいのでしょう?
幸いEF6以降ではひとつのDBに複数のDBContextをMigrationする手順があるようです。
そのページをみつけるのがまたひと苦労でした。

さて、ApplicationDbContextじゃないDBContextが準備できたので、
ServiceクラスとAPIControllerを作成して、つづいてDIを構成することにしましょう。
Unityをインストールしてみます。ログインできなくなりました!!
いったいなぜ? よしんば対策があったとしてもそんなことしたくありません。
UnityをアンインストールしてAutofacをインストールしてみます。
問題なくログインできそうです。
それでは、DIするクラスをAutofacに登録していきましょう。
Unityには用意されていたInjectionFactoryのようなものが見当たりません。どうするの?
自前でDBFactoryを作成してDBContextの代わりにInjectする。で良いみたいです。

簡単なごく普通のプロジェクトの形だと思いますがやけに面倒な感じがしませんか?
私は疲れますた。もっとも、
MigrationもDIも必ずしも必要なわけじゃないので勝手に疲れただけと言えます。
でもやはり、「Migration、DI、Identityを考慮したDBContextをどう計画する?」
なにが正解?を知りたい気持ちを収められないのでした。

Written by nasu38yen

2017年12月13日 at 8:37 PM

カテゴリー: .NET, プログラム

Tagged with

VisualStudio2017のSPAテンプレート

leave a comment »

MVC5(.Netframework)の新しいプロジェクトでVue.jsを試しています。
フロントエンドフレームワークは、Angular,React,Vueあたりに人気が集まっているようですが、
VisualStudio2017に搭載されているSPAテンプレートは相変わらずknockoutのままです;
いまどき誰も使わないようなテンプレートがなぜ残っているのか?
おそらく、このテンプレートの主目的がknockoutの説明ではなくてaccess tokenの取得方法だからでしょう。
なのですが、その説明が不足していてその理解にはいつも手間取ります。
https://tsmatz.wordpress.com/2014/05/20/asp-net-spa-javascript-web-api-asp-net-identity-html5biz/
松崎さんのこの解説はとても助かるのですが、自分レベルにはまだ難しいです;

/Account/Authorize にアクセスしてトークンを取得する。
それはその通りですがそのままで理解しようとすると、テンプレートのコードが複雑すぎ!と感じます。
もし”/”(ルート)以外の場所にSPAを設置している場合、リダイレクトURLを適切にする変更も必要でしょう。

/Account/Authorizeはリダイレクトを応答して、リダイレクトURLのフラグメントにtokenが格納されます。
なので、/Account/Authorizeコール時にSPAを設置したページにリダイレクトされるようにする必要があります。
をどうするの?が肝心のSPAテンプレートには書かれていないので手間取ります。
/Account/Authorize要求のクエリーにredirect_uriパラメタを指定すると、
ValidateClientRedirectUriのcontext.RedirectUriに格納されて通知されますので、それを確認してValidated()します。
ValidateClientRedirectUriにaccess tokenを必要とするSPAのURLを登録しておくイメージです。

そしてこの一連の処理がSPAコードの中で行われている。という辺りにも混乱が潜んでいる気がします。
/Account/Authorizeからトークンを取得するパターンは、
SPAの外側、つまりMVCのログインページでログインしていて、
そのログインのaccess tokenを取得してsessionStorageに格納するわけで、
また、その処理手順は、asp.net MVC5フレームワークに依存しているわけですから、
その一連の処理はSPAの外側で実行する。つまり、access tokenの取得~格納はSPAの役割ではない。
のが、わかりやすい気がします。

Written by nasu38yen

2017年12月12日 at 9:58 AM

カテゴリー: .NET

Tagged with

動画@MVC3

leave a comment »

MVC3で動いているサイトに動画アップ機能を追加することになりました。
html5の<video>タグを配置するとページに簡単に動画プレイヤーを実現できます。
うまく動作するようになったと思ったのですが、Safariだけ動画ファイルをうまく読んでくれません;

他のブラウザではちゃんと動作しているようなのでどうにも原因がわかりません。
IISExpressでテストしていたのがさらに周り道になりました。
IISExpressだとContentsフォルダの動画ファイルもSafariではダウンロードさえできません。
これはもうSafariを疑ってしまうレベルでしょ。だって他ブラウザでは問題ないのですから。

結局、どうもmvc3のretun Fileがrange requestに対応していないのが原因だったようです。
今回はとりあえずこれを使って対応しました。感謝です。
https://jonlabelle.com/snippets/view/csharp/range-requests-in-aspnet-mvc

しかしなぜ他のブラウザではこの問題が発覚しなかったのでしょうか?
その他にも、間違ったContentTypeを気にしたりしなかったり、
同じ動画ファイルを再生できたりできなかったり、
<video>の中身はブラウザ毎にかなり違っていそうです。

昔、silverlightのウリのひとつが動画再生だったのを思い出しました。
最初に作成してみたxapもページに埋めこむための動画プレイヤーでした。
実現できること自体は当時とたいして変わってないですし、面倒が減ったわけでもありません。

今回の動画はオマケ的な機能なのでサイト内でホストしていますが、
いずれは、保存場所はどこがいいのか?を含めて機能分離を検討する必要があるかもしれません。
ユーザープライベートなデータをどうやって分離格納するのかがまずは課題です。
と同じことをsilverlight時代にも妄想していて実現できていません。
自分もまたあまり成長できていないですTT

Written by nasu38yen

2017年12月9日 at 4:48 PM

ASP.NET Core(.netframework)でEntityFrameworkCoreを使う

leave a comment »

ASP.NET Core(.netframework)のNugetパッケージをなにも考えないで更新したら…
ことごとく、.NetFrameworkとコンパチブルじゃないと叱られた!
なら、更新リストに表示しないでくれ~
発端は、EntityFrameworkを使うのにEFCoreをインストールしようとしたのが始まりでした。

https://msdn.microsoft.com/ja-jp/magazine/mt742867.aspx
あたりには、.NetFrameworkでもEntityFrameworkCoreは使えて、
でもって、これまでのadd-migrationコマンドも使えるよ♪と書いてあるような気がする。
が、この記事とおりにEFCoreをインストールすると最新版がインストールされて、
その最新の安定板2.0.0はNetFrameworkコンパチブルじゃあない。

なんとか互換そうな最終版1.1.2をインストールしてadd-migrationすると、今度は
This version of the Entity Framework Core Package Manager Console Tools doesn’t support these types of projects
と叱られる!へっ??
https://blogs.msdn.microsoft.com/dotnet/2017/03/07/announcing-net-core-tools-1-0/#user-content-migrating-projectjson-projects-to-csproj
なんかよくわからないけど、このためにはVS2015じゃなくて素直にVS2017を使ったほうが良いらしい;
まあそうすれば良いのでしょう。疲れますた

結局のところASP.NET Core(.netframework)は素人には扱えない!と考えるの吉。のよーな気がする。
.Net Framework, .Net Core, .Net Standard, Entityframework ASP.NET VisualStudio
の各バージョンの依存関係が複雑すぎて鳥頭には簡単についていくことができないTT
一度は理解したつもりが、またすぐに混乱してわけわからなくなる。
ASP.NET Coreで作るのは、 .Net Frameworkを完全に排除できたとき。
と割り切ったほうが無駄足を踏むことはないかも。
が、そんなときはいつになるのかわからない。ので、いつまで経っても使えなくなるよーな。
でもまあ、それであたりまえといえばあたりまえのような、
なにか問題でも?と聞かれて困るような、
なんか辛い
とう状況は、.NETの危機じゃね? そろそろ…みたいな…

Written by nasu38yen

2017年9月20日 at 10:11 AM

初めてのBOT

leave a comment »

最近かかわったアプリに会話なUIがあって、ちょっと気になっていた>BOT
Microsoft Bot Frameworkを使うとわりと簡単にBOTを作成できるよ!という記事を見てやってみた。

BOTって、ときどきどこかで見たりするアレのことだよね?
マイクにしゃべったらいろいろ教えてくれたりするアレのことだよね?
と、わかっていたつもりが、
いろんなサイトの解説や、本家のDocumentを読むうちに、
理解が追い付かなくなり、だんだんとなんのことだかよくわからなくなってくる;
仕組みはそれなりに複雑なので、それを理解してかかろうとすると迷路に迷い込むことがある。

自分の場合、とにかくこれを書かれている順番にやってみるのが良かった。
https://docs.botframework.com/en-us/csharp/builder/sdkreference/gettingstarted.html

BOTというのは、WebAPIアプリの一種で
それを作成して一旦公開する(Azureに公開するのがとにかくは簡単)
で、公開したURLを、Microsoft Bot Frameworkの開発者ポータルで名前を付けて登録する。
ここで登録した名前がBOTの名前になる。
登録したBOTにappIDとPasswordを生成して、
そのappIDとPasswordを、先に作成したBOTアプリ(WebAPIアプリ)のconfigに書き込んで、
再度、公開しなおす。
これで、Skypeの連絡先に登録したBOTを追加して、BOTと会話できるようになる。
まできて、BOTってなに?が少しわかるようになった気がした。

ポータルに登録したBOTの設定をいじると、
メールとか、slackとか、Teamsとか他のアプリからもそのBOTと会話できるようになる。たぶん。
という仕組みと、その仕組みに参加させるアプリのSDKを合わせて、 Bot Frameworkということらしい。
BOTの本体はWebAPIだが、それを作成して登録して構成するだけで、既存アプリから使えるようになる。
をBOTと区別する所以だな。

始めるのはたしかに簡単だった。この後は…
これを育てるのは時間かかりそうだ;

Written by nasu38yen

2017年4月26日 at 4:38 PM

カテゴリー: .NET, プログラム

Tagged with

ASP.NET Coreを.NET Coreから.NET Frameworkに変更する

leave a comment »

VS2017をインストールしたので、ASP.NET Coreって何?を少しづつ見はじめた。
プロジェクトを開始すると、ASP.NET Core(.NET Core)とASP.NET Core(.NET Framework)を選択できる。
ASP.NET Core(.NET Framework)って一旦なんだよ!どっちだよ!
と、意味がわからないので、とりあえずASP.NET Core(.NET Core)を選んでおく。
「違いはなに?」をいちいち調べるのが、とても億劫になっている>自分;

まずは、既存のWebの移植を試してみることにする。
でもって使用している某サービスのAPIライブラリをNugetで追加しよとして叱られた。
なるほど! .NET Coreなプロジェクトで.NET Frameworkなライブラリは参照できない。
どうする?これは結構な問題じゃね?

幸いのそのAPIライブラリはソースも提供されている。
試しにソースプロジェクトをソリューションに追加してプロジェクトで参照してみる。
と、エラーにならずに参照できた!が、実際には使えない。ってまあそうだ。
ライブラリを.NetCoreに書き換える?は、当初の趣旨からはずれるのでしない。

つまり、ASP.NET Core(.NET Framework)という意味不明は、このためにあるってことだな。
資産は.NET Frameworkで作成されていて.NetCore版はまだない。
プラットフォームを変えなければならない要件もまだない。
でも、少しづつは未来に準備を始めたい。

ということで、
作成したASP.NET Core(.NET Core)をASP.NET Core(.NET Framework)に変更することにする。
プロジェクトを右クリック>「編集する」して、エディタで開いて、
TargetFrameworkを書き換える。ですた。

<PropertyGroup>
  <!–<TargetFramework>netcoreapp1.1</TargetFramework>–>
  <TargetFramework>net46</TargetFramework>
</PropertyGroup>

これで無事、某APIライブラリをnugetでインストールできるようになりますたV

Written by nasu38yen

2017年4月18日 at 4:32 PM

カテゴリー: .NET

Tagged with

Actionメソッドのパラメタにactionを指定してはまる

leave a comment »

ひさしぶりに、MVCなプロジェクトに戻っている。
しばらくAngularJsなアプリに従事して、戻ってみると、
以前とは景色がすっかり変わってみえる。
MVCなViewでajaxするのがとても億劫に感じる。
ajaxするくらいなら、こっちもAngularした方がいいんでね?みたいな。
Angularしないならajaxもしない方がええんでね?みたいな。

とはいえ、それにはそれなりの設計が必要になるわけで、
これまでと同じように設計すれば、とは言ってられない場面はおこる。
ということで、とりあえず作成したHtml.Beginformを
あまり考えずにAjax.BeginFormに変更したら、
期待した部分更新がされなかった。

これは、Microsoft.jQuery.Unobtrusive.Ajaxがインストールされてないからで。
をインストールして、参照を追加して… これでうまくいくはず!
からが遠かったT.T

Ajax.BeginFormに指定したActionに要求が届かない。
リクエストは発射されるのだが、指定とは違う方向へ発射される。
つまり、要求のurlが指定とおりにならない。
なにが間違っているのかまったくわからない。
これはもう、Microsoft.jQuery.Unobtrusive.Ajaxを疑うしかないレベルでしょ!

が、もちろんそんなことはなくて、
POST先のActionに’action’というパラメタがあったのが原因ですた。
Html.BeginformをsubmitするButtonのnameにactionは許されるが、
Ajax.BeginformをsubmitするButtonのnameにactionは許されない!
というお話ですた。ワナでしょこれは。に、まんまとはまった;;

Written by nasu38yen

2016年12月13日 at 1:54 PM

カテゴリー: .NET

Tagged with

angular-chart.js

leave a comment »

MVC5サイトのAngularJs(2じゃないやつ)なSPAページにchart.jsでグラフを表示しよう!
どうやって?
MVC5なプロジェクトでAngularJsなSPAする準備はできてるものとして、
そのSPAページでchart.jsのグラフをホストする方法を探してみる。

http://ngmodules.org/tags/chart
に、Chart.JSを使用するAngularのModuleがいくつか見つかる。
どれ?を迷うが、更新が新しそうな↓を選ぶ
http://jtblin.github.io/angular-chart.js/

Angularもchart.jsも初めてで手間取った。
Chart.jsには一応Documentもあるが、読んでもどうすればいいの?がわからなくて、
代わりに、豊富にあるサンプルをクリックして表示してみるのが良かった。
angular-chart.jsの方は、説明書もなくてSampleだけ;
最初はなにがなんだかわからない。が、そのうち使い方が見えてくるようになる。
なんとか、体重推移グラフが表示できるようになった。

ss-chart

Written by nasu38yen

2016年10月27日 at 5:55 PM

カテゴリー: .NET, プログラム

Tagged with

MVC5なプロジェクトにAngularなページを追加しようとして…

leave a comment »

VisualStudioで以前のSPAサンプルコードはKnockoutJsを使っていた。
が、最近はKnockoutJsはあまり見かけなくて、やっぱAngularでしょ。な感じ。
どっち??は、そこへ進もうとする者には重要な問題で、
その判断に使える情報が少なく、つまり、自分で試してみるしかない。という状況。
に、おそれおののいている。

とにかく、探してみる。
MVC5なプロジェクトにAngular2なサンプルが見つかる。(Angular2は正式リリース前版だけど)
https://visualstudiogallery.msdn.microsoft.com/4190ee5c-15d9-4afe-ac14-515bdb6493da

Angularのファイルがプロジェクトのどこにも見つからなんですがっ!??
先にknockoutなSPAを覗いたことがあると、この辺りでいきなりつまづく。
Angular2なファイルはnpmでnode_modulesフォルダにインストールされていて、
そのフォルダはプロジェクトファイルとして見えている必要はない。らしい。なんでっ

まず最初の課題は、「npmっていったい何?」だ。
は、node.jsのパッケージマネージャで、
つまり、サーバーサイドで動作するjsのパッケージのマネージャってことで、
一方、クライアントサイドで動作するjs用には、bowerという別のパッケージのマネージャがいる。
らしい。

そして、上のAngular2MVC5サンプルアプリ…
Angularはクライアントサイドで動くものだよね?が、npmでインストールするようになっていて、
jQueryはnugetでインストールされている。これは混乱している。よね?
AngularとjQueryは、両方、nugetでインストールする。か、bowerでインストールする。
が、混乱のない形だと思う…
そもそも、ASP.NETなプロジェクトなのでnode.jsは使わない。はず。
に、いきなりnpmが登場してきて、なにがなんだかわからない。
npmにすでにパッケージとして準備されているので、新たにnugetパッケージは無駄なので、
すでにあるそれを利用する。ってことだな。たぶん。
オラの場合は、ここまでたどり着いてかかる必要があるので、面倒くさい>自分;
やっとこれから、Angular2って何?

Written by nasu38yen

2016年10月3日 at 9:58 AM

カテゴリー: .NET, プログラム

Tagged with