satymale’s diary

日々の忘備録

Bowerを使ってBootstrapをインストールする

モック画面ではBootstrapを使ってデザインしていたので、ASP.NETに落とす時も同じ様にBootstrapを使おうと思ったのですが、 .NETのライブラリはNuGetを使って管理するのでバージョンアップも簡単なのですが、JavaScriptのライブラリは公式サイトからダウンロードして配置すると バージョンアップする場合に面倒くさいなと思ったので調べてみました。

以下のブログにまさにやりたいことが載っていたので、これを参考にしてインストールをしてみます。

blog.shibayan.jp

Brower.jsを追加する。

ソリューションで[右クリック]→[追加]→[新しい項目]→[Bower 構成ファイル]でbower.jsを追加します。

f:id:satymale:20150927185319p:plain

bower.jsでBootstrapを指定する

dependenciesに"bootstrap" : "3.3.5"を追加して保存します。 Visual Studioでは、ライブラリの名前やそのバージョンにインテリセンスが効くので簡単です。

{
    "name": "ASP.NET",
    "private": true,
    "dependencies": {
        "bootstrap": "3.3.5"
    }
}

保存すると「インストールされていません」と表示されます。

f:id:satymale:20150927190232p:plain

bower.jsをCtl+Sなどで再度保存を行うとwwwroot/libにbootstrapのファイルが 自動で配置され、「インストールされていません」という文言も表示されなくなります。

f:id:satymale:20150927190907p:plain

レイアウトを共有する

メニューなど同じような部分を纏めれるように、レイアウトテンプレートを試してみました。

ViewStartを作る。

Viewsフォルダで[右クリック]→[追加]→[新しい項目]→[MVC ビュー スタートページ]を選択して追加します。

f:id:satymale:20150927154817p:plain

レイアウトを作る。

Viewsフォルダの直下にSharedフォルダを作ります。

f:id:satymale:20150927161634p:plain

Sharedフォルダで[右クリック]→→[追加]→[新しい項目]→[MVC ビュー レイアウトページ]を選択して追加します。

f:id:satymale:20150927161916p:plain

動作確認

ViewStart.cshtmlは、画面が表示される際に呼ばれてLayoutで指定されているレイアウトを適用するそうです。

@{
    Layout = "_Layout";
}

特にフォルダが指定されていない場合は、Views直下の画面のフォルダにあるLayoutが使用されますが、 そこに存在していない場合は、SharedのLayoutが使用されていました。

試しにShared直下の_Layout.cshtmlが使われていることが分かるように文言を追加します。

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>
        Sharedのレイアウト
    </div>
    <div>
        @RenderBody()
    </div>
</body>
</html>

実行すると確かにSharedのレイアウトが使われています。

f:id:satymale:20150927163010p:plain

同じようにViews/Home直下にLayout.cshtmlを追加し、HomeのLayout.cshtmlが使われていることが分かるように文言を追加します。

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>
        Homeのレイアウト
    </div>
    <div>
        @RenderBody()
    </div>
</body>
</html>

今、HomeとSharedの両方に_Layout.cshtmlが存在しています。 この状態で実行してみます。

f:id:satymale:20150927164149p:plain

確かにHomeの_Layout.cshtmlが使われています。

ASP.NET 5でとりあえず画面を表示させる

久しぶりにASP.NETでWebアプリケーションを作ろうと思ったらさっぱり訳が分からなかったので、仕組みを理解するために必要最小限のファイルで 画面を表示するまでを調べながら作ってみました。

プロジェクトの作成

ASP.NET Web アプリケーション」を選択。

f:id:satymale:20150924231735p:plain

「Empty」を選択。

f:id:satymale:20150924231738p:plain

すると、このような構成のプロジェクトが出来ます。

f:id:satymale:20150924232247p:plain

Controller、Viewの作成

以下のサイトを参考にControllerとViewを作っていきます。

qiita.com

プロジェクトの直下にControllersフォルダを作ります。

f:id:satymale:20150924234640p:plain

Controllersフォルダで[右クリック]->[追加]->[新しいクラス]->[MVC コントローラー クラス]を選んで追加ボタンを押します。

f:id:satymale:20150924235030p:plain

ControlerやIActionResultがエラーになるため、リファレンスで[右クリック]->[NuGetパッケージの管理]で、「Microsoft.AspNet.Mvc」のバージョン6.00-beta5をインストールします。

※バージョンを6.0.0-beta7などにすると原因は調べてませんが、実行時にConfigurationBuilder.Buildのメソッドが見つからないというエラーになるので注意です。

f:id:satymale:20150924235907p:plain

プロジェクトの直下にViews/Homeフォルダを作ります。

f:id:satymale:20150925000727p:plain

Homeフォルダで[右クリック]->[追加]->[新しいクラス]->[MVC ビューページ]を選んで追加ボタンを押します。

f:id:satymale:20150925001013p:plain

追加したビューが表示されていることを確認できるように追加したビューに、適当に文字を入力します。

f:id:satymale:20150925001754p:plain

Startupの編集

ConfigureServicesメソッドに以下のコードを追加します。

services.AddMvc();

Configureメソッドのapp.Runのコードをコメントアウトし、以下のコードを追加します。

app.UseMvc(routes => {
    routes.MapRoute(
        name: "default",
        template: "{controller=Home}/{action=Index}/{id?}");
});

実行

実行すると、先程入力した「test」のみが表示される画面が表示されました!

f:id:satymale:20150925002311p:plain

行動分析でダイエットは成功するか?

結婚して3ヶ月、ついに体重が85kgになってしまいました。 85kgやばい!とは思うものの、またダイエットすればいいかと気楽に考えている自分もいます。 ダイエットの方法は世の中様々なものがあり、基本的には摂取エネルギー<消費エネルギーとなれば どんな人でも必ず痩せれるわけですが、問題は痩せた後にその体重を維持する事が出来ない事だと思います。

行動には法則がある

少しダイエットから離れますが、行動分析学の書籍「メリットの法則」によると普段何気なくしている自分の行動や 他人の行動は4つの原則によってコントロールされているそうです。

どういう事かというと、行動の60秒以内に起きた結果が行動を強化するか弱化させるかを左右しており、行動の後に起きた結果の内容がその行動をした人にとって

  • 好ましい事が出現した場合、行動が強化 → (好子出現の強化)
  • 好ましい事が消失した場合、行動が弱化 → (好子消失の弱化)
  • 好ましくない事が出現した場合、行動が弱化 → (嫌子出現の弱化)
  • 好ましくない事が消失した場合、行動が強化 → (嫌子消失の強化)

されるという事が膨大な実験から判明しているそうです。(太文字は用語です)
また、行動の前後で結果が変わらない場合は行動が消失する事も分かっているそうです。

身近な例では、挨拶をして(行動)、挨拶を返してくれる(好ましい事が出現)と、次も挨拶をしますが、 挨拶を返してくれない(好ましい事が出現しない)と、そのうち挨拶をしなくなるのは、思い当たる節があると思います。

Ingressという現実世界とリンクしたスマートフォンのゲームも、歩くとXMが貯まるという好子出現の強化、 歩くとポータルが見えるという好子出現の強化によって、気づいたら結構な距離を歩いていたりします。 私も好子出現の強化によって、ついついポータルを目指してあちこち歩いてしまい、駅から家まで片道15分で帰れる所を1時間かけて帰り、 ご飯を作って待っていた妻に叱られてしまいました。

60秒以内というのがネック

行動が強化されるか弱化されるかどうかは、行動の60秒以内の結果によるというのはダイエットにおいてネックになります。 食べる食事の量を減らすという行動をとっても絶対に60秒以内に体重が減りませんし、むしろ物理的に食べた重さだけ体重は増えるからです。

体重の増減を行動の結果とするのは、食べたらすぐに体重が減る物理法則を無視した食べ物がない限り無理筋です。 上手く体重を落とすには、行動が続いたことによって結果的に体重が落ちたという方向に持って行く方が良さそうです。

シールでお替りを減らす

私はお替りさえしなければ割とすぐに体重が落ちます。でも妻のご飯が美味しくてついついお替りをしてしまい太ってしまいます。 お替りするという行動を何とか抑止できれば、体重を減らすという目的が達成できそうです。 つまり、お替りすることによって、好子の消失か嫌子の出現があれば抑止の方向に向くという事です。 ですので、妻と二人で考えて次のようなルールを設けてみました。

  • お小遣いを2万円貰っているので月のお小遣いを15,000円にする。
  • お替りをしなければシール1枚が妻から貰える。
  • シール一枚は200円相当とする。

これは

シールあり→[お替りをする]→シールなし

という好子消失の弱化を狙っています。 またシールが貰える事が好子となるように26日以上我慢できれば、以前のお小遣いより200円~1,000円多くお小遣い貰えるような金額にしています。(もう少し多めに貰いたかったのですが、妻の許可が下りませんでした・・・)

これで一ヵ月試してみて、思うように効果が出なかったらまた考えてみようと思います。