ASP.NET MVCをOSXで動かしてみる

最近暖かかったり寒かったりと、春が着実に近づいているなと感じますよ。あとは何と言っても花粉でしょうか。辛いですよね。あ、フロントエンド担当のふみえです。

そんなこんなで、本日は昨年リリースされた Visual Studio Code の OSX ベータ版をインストールしつつ ASP.NET MVC を OSX でちょこっと動かしてみたいと思います(^^)ノ

Visual Studio Code インストールから起動

まずはこちらのページの「Download for OSX」というボタンをクリックして zip ファイルをダウンロードして解凍します。
展開した「Visual Studio Code」を Application フォルダに移動させます。すると Launchpad に追加されていることが確認できると思います。そこから起動してみましょう！
当たり前ですが、ここまではあっという間です。

ASP.NET をインストールしていく

ASP.NET ドキュメントやドキュメントなどを参考にしながら進めていきます。

1. DNVM と DNX をインストール（前提条件: npm インストール済み）

DNXとは….NET Execution Environment の略。引用になりますが、要するに

.NETアプリをクロスプラットフォームで実行するために必要な要素をまとめた環境

だそうです。 （引用元: http://www.atmarkit.co.jp/ait/articles/1505/19/news016.html）
そして、その DNX のバージョン管理パッケージが DNVM（DNX Version Manager）です。

そんなこんなでドキュメント通りに DNVM をインストールします。

$ curl -sSL https://raw.githubusercontent.com/aspnet/Home/dev/dnvminstall.sh | DNX_BRANCH=dev sh && source ~/.dnx/dnvm/dnvm.sh

DNVM を有効にします。

$ source /Users/toyooka/.dnx/dnvm/dnvm.sh

すると、DNVM を最新にしろと怒られるのでそれに従います。

$ dnvm upgrade

無事 DNVM がインストールされました。
さて、次は DNX を .NET Core にインストールするために DNVM を使用できるようにします。

$ dnvm upgrade -r coreclr

こちらを実行後、.bash_profile に下記を追記し、ターミナルを再起動します。

source dnvm.sh
export MONO_MANAGED_WATCHER=disabled

そして、下記を実行して dnvm を再度アップグレードします。

$ dnvm upgrade

2. yeoman をインストールする

ここまできたら、本家の推奨する yemoman を使用して scaffold で新しいアプリケーションを作成します。その際に ASP.NET のジェネレータとなる gulp とbowerも一緒にインストールしています。

$ sudo npm install -g yo generator-aspnet gulp bower

うまく行った！！

3. yo aspnet を実行するぞ！

ということで、下記コマンドを入力します。

$ yo aspnet

すると、対話形式でどんなアプリケーション作成するのか訊かれますので、ただの "Web Application" を選択してみます！ 下記の画像のようにかわいいのが表示されます！イケメてる！！

4. いよいよビルドするよー！！！！

先ほどのコマンド実行後、最後の方に下記のような説明があるので、その通りにしていきます！

$ cd WebApplication
$ dnu restore // 結構時間かかります！
$ dnu build
$ dnx web

これで、localhost:5000 にアクセスしてみましょう！！すると・・・ じゃじゃーん！

めでたしめでたし☆
これで、OSX 上で ASP.NET の開発環境を整えることができました！Visual Studio Code はまた今度いじってみます！scaffold って便利すぎて困る時もあるけど、初学者にとっては本当にありがたい。。。
それでは、ふみえでしたー！！ばいびー！！

Read More

CSSスプライトを作ってみた

こんにちは山田です。

サイト内に、メニューやボタンなど細かい画像がバラバラとありますが、
それを、一枚の画像にまとめて、ページの読込速度を速める方法があります。
CSSスプライト　というのですが、作ってみたのでその備忘録になります。

■元画像
ペイントで簡単に作成

■HTML

 


TOP
NEWS
ABOUT
Contact Us
FAQ

■CSS

/*----------------------------------------------------------
ナビゲーション
------------------------------------------------------------*/

#navi{
 position:absolute;
}

#navi ul{
 list-style:none;
}

#navi li a{
 display:block;
 width:108px; 
 height:53px;　//←幅と高さを指定
 text-indent:-9999px;
}

#navi li#top{
 background:url(../images/menu.gif)no-repeat 0px 0px;　//←最初から表示したい画像
}
#navi li#top a:hover{
 background:url(../images/menu.gif)no-repeat -108px 0px;　//←マウスオーバー時の画像
}

/*-----------------
同じ要領で残りも書く
------------------*/
#navi li#news{
 background:url(../images/menu.gif)no-repeat 0px -53px;
}
#navi li#news a:hover{
 background:url(../images/menu.gif)no-repeat -108px -53px;
}
#navi li#about{
 background:url(../images/menu.gif)no-repeat 0 -106px;
}
#navi li#about a:hover{
 background:url(../images/menu.gif)no-repeat -108px -106px;
}
#navi li#contact{
 background:url(../images/menu.gif)no-repeat 0px -159px;
}
#navi li#contact a:hover{
 background:url(../images/menu.gif)no-repeat -108px -159px;
}
#navi li#faq{
 background:url(../images/menu.gif)no-repeat 0px -212px;
}
#navi li#faq a:hover{
 background:url(../images/menu.gif)no-repeat -108px -212px;
} 

■画像の数値について
以下のように画像の位置を指定しています。

Read More

アプリのプロトタイピングツールをいろいろ使ってみる③ - InVision -

こんにちは。岡田です。

３月に入って暖かくなったり寒くなったり雨が降ったり花粉が飛んだり、忙しいですね。
私は花粉症を発症していないのですが、毎年「今年こそはデビューするんじゃないか」とビクビクしながら下積み時代を送っています。
できるだけデビューが先送りになることを願ってやみません。


前回の記事、読み返してみると、雑だなぁ、、と思ったので、（ごめんなさい）
今回はちょっと丁寧に書こうと思います。

「InVision」

前回の「POP」は、かなりシンプルで、単純な機能を簡単に使うアプリのプロトタイプを作るのに

かなり便利な印象でしたが、今回さわってみた「InVision」は、結構細かい設定まで簡単に行えるので

画面の動きを高度に再現できると思いました。

「InVision」のいいところ

他のプロトタイピングツールではあまりないな～と思ったのが、

ボタンをタップしたときの挙動に「URLをひらく」を設定できることです。

全部が全部ネイティブでないアプリを作る場合、これがあることによって

ネイティブの動きとWEBを見せる動きのイメージが

かなりつかみやすいのではないかと思いました。

あとは、、圧倒的な機能の充実具合でしょうか。

ベータ版とありますが、他サービスとの連携でユーザーテストを録画できたり、

更新状況をリアルタイムでメンバーと共有できるようです。

リアルタイム性はInVisionにとってかなり大きな特徴のような感じがします。

「InVision」のちょっと不便なところ

日本語対応していないところでしょうか。。

アプリのプロトタイプを作って、チーム内であーじゃねこーじゃねをしたり

ユーザーテストを録画してみたり、端末に共有してみたりと

かなり至れり尽くせりで便利だと思いますが

また、"お絵かき"をアップして画面を設定した時に、

ステータスバー（電波とか時間とか出ているところ）が"お絵かき"と被ってしまうので

ナビゲーションバーをちゃんと見たい場合は、ステータスバー分の余白を

あらかじめ"お絵かき"に入れておく必要がありました。

画面によって適当に入れていると、画面遷移したときにちょっとずれちゃったりして

結構気持ち悪くなってしまうので、

ステータスバー、考慮してほしいな～と思いました。

おまけ？

チャット機能が充実しているInVisionですが、面白いなと思ったのが

「ホワイトボード」というツールです。

ちょっと人と一緒に試せていないのですが、お絵かきチャットができます。

これでお絵かきしりとり、、したいなーーー。笑

「InVision」。全体的に、情報を共有することにとっても長けているプロトタイピングツールだと感じました。

Read More

開発初心者がこれだけは知っておいた方が良いこと④

こんにちは！Sです。

今回はデータベースのロックについて書きたいと思います。

DBで行う主な操作としては
①新規登録　②更新　③削除　④参照
だと思いますが、同じテーブルに対して複数の人が同時に様々な操作を行うとデータの整合性がとれません。

そんなことにならないようにDBにはロックという機能が存在します。

ロックの粒度(行に対してのロックなのか、テーブルに対してのロックなのかなど)やルールは
使っているDBによって多少違うようですが、ここからはわたしが使っているSQL Serverについて書きます♪

◆ロックの種類
ロックには共有ロック、排他ロック、更新ロック、インテントロックなどがありますが、
難しいので詳細の説明は省きます。
初心者の方にまず覚えて頂きたいのは

①データの参照中は共有ロックがかかり、その間他の人が更新などできない
②削除などデータの書き換え中は排他ロックがかかり、他の人が何もできない
ということです。
(詳しく知りたい人はこちらやこちらを！）

バッチのスケジュールを組む際にはこれらのことを考慮しないといけないですね。

ちなみに排他ロックをどの粒度でかけるかは、SQL Serverが決めてくれます。
https://technet.microsoft.com/ja-jp/library/ms189286(v=sql.105).aspx

◆安全なおまじない
DBで行う操作の中で更新や削除はとても怖いですよね。。。
出来ればやりたくないですが、避けることはできません。
そんなとき上記のロックを利用して安全に操作を行うことができる魔法の呪文を教えてもらったので紹介します♪

1.まずはこれを書く
begin transaction

2.やりたいことをやる
update文 や delete文など

3.select文で思い通りの結果になっているか確認

4-A.やばい！思った通りの動きじゃない！というときは
ROLLBACK TRANSACTION
→これで元通り。なんの心配もいりません！

4-B.意図通り！成功！というとき
COMMIT TRANSACTION
→これを忘れずに！忘れると反映されません。


...余談ですが、わたしは今朝通勤途中に電車にすべての荷物を忘れてきました。
　(別に寝ぼけていたわけでもないのに。。。)

電車を降りるところからROLLBACKしたいです。。。

Read More

日々の学習

こんにちは、舟橋です。

今回は「日々の学習」についてです。

私は普段、ネットで情報収集をするのですが
最近では課題図書を設けて、通勤時間やお昼休憩で読んでいます。

昨日やっと１冊読み終わりましたので
忘れない為にも備忘録的に、まとめと感想を書こうかと思います。

今回読んだ本はこちら、

「こころの情報学」　西垣 通

（初めて新書を読んだのですが、、最初の方は専門用語と引用の多さに愕然としました。）

内容としては、21世紀になって急速に進んだ情報社会化によって変容した
「ヒトの心」についてのお話です。

意外なのが、割と冒頭で人工知能の話が出てきます。
私は最近映画で「her」という映画を見たばかりで、人工知能については必ず達成できる夢とさえ思っていたのです。

人口知能を搭載したOS（サマンサ）と、主人公が恋に落ちる話です。
（ラストはなんとも不思議でした。）

ですが、「こころ」というものは歴史的文脈からなるもので、人工知能で再現するには

そこらじゅうにあるもの（机、鉛筆、海、空気..）の概念（情報）を処理しなければいけなく、今の技術ではそのロードの為に固まってしまうとのことでした。

そもそもの処理の仕方が違うとのこと。

そんなショックな内容の多い本だったのですが、本の後半で出てきた「サイバーなこころ」についての内容が、とても印象に残りました。

現在われわれを取り巻く機械情報の量は、ヒトの処理できるレベルをとっくにこえています。そんななかで、子供たちは一種の「思考停止」という手段で自分を防御しているように思えます。

私たちの世代やその下の世代で最近「さとり世代」という言葉がありますが、それを彷彿させる言葉でした。
ヒトの心とは動物の心であり、身体的な感覚のないネットでは不満がたまっていくのは当たり前だとのこと。
確かに情報化も進んでいますが、大勢で集まって何かをしたり（ハロウィンなど）今までなかった新たなグループでの行動が出てきたりなど、どこかで発散をしようとする活動は意外と多いのではと思いました。

ここでUXに立ち返って考えてみると、身体的体験、動物としての基本的な部分を満たすものが
ヒトの心に一番響くのではということを思いました。
（昔マンモスを大勢で狩った記憶を再現するのは映画に任せるとして、コミュニケーションや自然の体験ということでしょうか。）


私にとっては難しい本でしたが、難しいなりに面白かったです。
この課題図書は、UXのサイト「U-site」というページで紹介されていました。
（こちらですhttp://u-site.jp/book/ux-books-2015）

ということで、感想でした！
みなさま、お疲れ様でした。

Read More