ピースペース

Archive for the ‘プログラム’ 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 午前

カテゴリー: .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 午後

カテゴリー: .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 午前

カテゴリー: .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 午後

こんにちわVue

leave a comment »

MVC5でVueを試してみました。
もっとも簡単な手順をみつけました。
http://www.mithunvp.com/working-vuejs-asp-net-mvc-5-visual-studio/

むかしあったknockoutなSPAテンプレートに比べてずっと意味がわかりやすいと思います。
余計な手順に翻弄されることもないので助かりました。
あまりにも簡単なコードなので、これでわかった気になるのは早すぎですが、
最初の印象は大切ですね。長く付き合えっていけるでしょうか?
よろしく>Vue

Written by nasu38yen

2017年11月17日 at 4:47 午後

カテゴリー: つれづれ, プログラム

Tagged with

こんにちわNode.js

leave a comment »

Kindle Unlimitedのひと月無料お試しを使って、「Node.jsビギナーズガイド」を試してみました。
ASP.NETerが入門するにはとてもわかりやすい説明になっていました。
せっかちなもんで、どこが同じでどこが違うの?を手っ取り早く知りたいわけですが、
チュートリアルを進めていくとそうゆう疑問に順番に答えが得られたような気がします。
「Expressを導入しよう」まで進んで、これまでと同じように開発できる確信が持てました。
「PostgreSQLを使おう」で、でもまあやっぱまだasp.netでいいかも;と確信しました。

asp.netがマルチプラットフォーム対応になった今となっては、
積極的に選択する理由はあまりなくなった感じがしないでもありません。
今後どうなるかはわかりませんが、asp.net開発にもnodeのあれやこれが入り込んできているので、
ASP.NETerにもやはり必要なわけです>Node入門。
なにかいろいろ微妙に絡まっていて困ったものです;

さて、今回Node入門の先にMeteor入門があったわけですが、
こちらはKindleに見当たらず、本家チュートリアルをやってみました。う~みゅ
手順とおりに進めればそのとおりに動くアプリケーションが作成でききるわけですが、
なんでしょう?過去に覚えた言葉で理解できないまま進んでしまうところがあるような気がします。
なので、このチュートリアルを終えてもこれで準備ができた!という確信まで至りません。
とりわけ、ASP.NETerには躓き所がいろいろありそうで、その霧が晴れるのには時間がかかりそうです。
たぶん心をもっと真っ白にして進んだほうが良いのでしょう。

Written by nasu38yen

2017年11月14日 at 12:11 午後

カテゴリー: つれづれ, プログラム

Windows Subsystem for Linuxを動かした。の後は?

leave a comment »

Fall Creators Updateを行いました。
Windows Subsystem for Linuxが正式版として提供されているそうです。
WindowsストアからUbuntuもインストールして、無事Bashなコマンドも打てるようになりました。
Bashから、pythonだとかmeteorだとかも起動できるみたいです。
これでLinux入門の準備ができたような気がします。めでたし。

さて、githubからmeteorなプロジェクトをgit cloneしてmeteor-build-clientなどもしてみました。
あ~流石bashシェルです!プロジェクトサイトの説明通りコマンドがすんなり動作します!
これで、このマシンでon Linuxな開発もできるようになるのかあ!!

をVisual Studio Codeを使って行えるのか?←がよくわかりませんT.T
Visual Studio Code@WindowsでWSLのファイルをいじるのはやばい気がします。
んだば、WSLにもVisual Studio Codeをインストールすればええんでね?←できるの?←がわかりません;
コードはVisual Studio Code@Windowsで行って、ビルドとかだけbashで行えばいいのかも
などといろいろ考えたりしているうちにあんまりたいしてうれしくなくなりました>WSL
すなおにVMでやればよくね!てか、macでやればいいんでね!みたいな;
うう~~みゅ どうも一旦お蔵入りしそうです>WSL

Written by nasu38yen

2017年11月6日 at 1:48 午後

非同期がやっぱり苦手

leave a comment »

最後のピースが一枚綺麗に収まらないとパズルは終わりません。
自分の場合、c#のasync awaitも、jqueryのdeferredも、残りのピースが後何枚か残っていて、
いつまで経っても自信をもって使えない。という状況が続いております。
何かの理解が不足しているのはわかっていますが、それが何か?がわからない。みたいな;

2つ前のエントリで試したファイルの順次アップロードのコードが移植したアプリで想定通りに動かなくなり、
また迷路に迷い込んでしまいました。
結論は移植先で使用していたjqueryが1.5.1だったから!というオチでした。
1.6以降でその動作が改善されているということは、1.5の$.Deferredには不具合があったということでしょう。
既存コードの関係でjqueryのアップグレードが困難だったので今回はjsdeferredという別のコードで対応しました。
そうゆうことは茶飯事なのでそのこと自体どうこうではありません。

気になったのは
1.6がないときに$.Deferred@1.5の挙動を「これはおかしい!」と自信をもって言えたかどうか?です。
そもそも魔法の呪文のようにしか使えていないコマンドに突っ込み入れることなど到底無理でしょう。
教えられたとおりに唱えるしかないので疑いようはありません>呪文。

async awaitが呪文である内は謎は解けていないのです。
最後のピースが収まらないのは、前に置いたピースの配置が間違っているわけで、
つまり、自分の中のなにか思い込みが邪魔をしているということですが、それが何か?
が、つかめそうでつかめないのですTT

まあ、
シーケンシャルに記述するしかないコードから並列で動くCPUの作業を上手にイメージできていない。
ということでしょう。イメージが下手。なのは練習が足りないということなのでしょう。
地道に時間をかけるしかない。といういつものオチですた。

Written by nasu38yen

2017年10月20日 at 9:33 午前

カテゴリー: つれづれ, プログラム

Tagged with

multipulなファイルinputを個別に順次uploadする

leave a comment »

選択された複数のファイルをまとめてドンと送るのは問題が多い気がする。
選択されたファイルを個別に$.ajaxすると、ファイルは順不同で送られて、
サーバー側でその順不同リクエストは並列で処理される。
送られたファイルをただ保存するだけならそれで問題ない。が、
ファイルの内容に従ってDBにレコードを登録する必要があり、
内容によっては既存レコードの更新が必要になるような場合、
つまりサーバー側のファイル処理を並列ではなく直列で行う必要がある。
というケースはあり得ると思う。が、
これをサーバー側で解決する方法が思いつかなかった;できるの??
なので、送る側でひつつづつ順番に送る。をやってみた。

looper = $.Deferred().resolve();
$.each(files, function(i, file) {
    looper = looper.then(function() {
        return $.ajax({
        });
    });
});

基本的にはこれでひとつ前のUploadの応答を待って次のUploadが行われるはず!
が、なぜか以前と変わらず一気にUploadされてしまった。

looper = $.Deferred().resolve();
$.each(files, function(i, file) {
    looper = looper.then(function() {
        var deferred = $.Deferred();
        $.ajax({
        }).done(function (response) {
            deferred.resolve();
        }).fail(function(response){
            deferred.resolve();
        });
        retutn deferred.promise();
    });
});

return $.ajaxの代わりに、
明示的にdeferred.promiseをリターンすると意図したように動くようになった。
ちょっと理由がわからないTT
このようにしてまた苦手意識が蓄積されていく…

Written by nasu38yen

2017年9月28日 at 7:40 午前

カテゴリー: プログラム

Tagged with

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 午前