ピースペース

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

こんにちわ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 PM

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

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 PM

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

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 PM