デザイン本を元に Web サイトを作ってみたよ

デザイン本を元に Web サイトを作ってみたよ はコメントを受け付けていません。

どーも、うぇぶまとりっくすたんでございます。ここんところ書いて無くてすいません。

先日 Microsoft さんで行われた TechFielder イベントのWebMatrixイベント行ってきました。

結果 A4 263ページカラー印刷というお金かかってそうですねな冊子を頂いてみたり。(さっそくRazorのRにコーヒー一滴こぼしてシミにしてみたり)これってどっかでダウンロードとかできないんでしょうかね。

追記: ここからダウンロードできるしオンラインですべて読めるという事です Razor 構文と ASP.NET Web ページ という事です

んなわけで、隣の本、よくあるデザイン本でございます。おしゃれなネットショップのデザイン 空いた時間ですぐに作れる テンプレート・コレクション、こういう本では基本的に html と css 、イメージが入ってる感じでデザインセンスのない私なんかがベースになんかするというのにベストですよねっと。

006005

というわけで、これを元に WebMatrix でサイトを作ってみますですよ。

デザインショップという形で空のサイトから作成。

imageimage

サイトページのパスをクリックするとエクスプローラが上がりますので、付録CDからサイトイメージを一個選んでコピー、今回は01-01を選びました。トップがindex.htmlになってるのでURLで参照すればすぐに中身が出来ている事が解ります。いいですね。

imageimage

各htmlファイルを cshtml にリネーム、これで Razor を使えるようになります。しかし .htmlでのリンクを .cshtml に書き換える必要がありますね。 “.html”で検索してみるとまぁ普通にファイル拡張子でつながっていますのでこれを .cshtml に置換する事を各ファイルで繰り返す。

imageimage

これをした段階で普通にページ間を飛び回れるようになってるはずなので確認して次へ。

Razor 冊子での50ページからですね「一貫性のある外観の作成」でヘッダとかフッターを切り出します。

_Header.cshtml を作成して、ヘッダ部を切り出し。@RenderPage でヘッダを出すようにする。

imageimage

imageimage

ちゃんとヘッダが出てますね、これを各ページ繰り返しでヘッダを共通化します。続いてフッタ、その他各種部品を切り出しては@RenderPageの利用に切り替えながら本体となる cshtmlを順次減らしていきます。

index.cshtml からは ヘッダ、グローバルナビを _Header.cshtmlへ、フッターを _Footer.cshtml に切り出ししました。

そして、index.cshtml から _Header.cshtmlを@RenderPageするところ、_Footer.cshtml を@RenderPage するところから最後までを _Layout.cshtml に切り出しレイアウトページを作ります。

image

大方の整理をしたうえで pickup ページを眺めると似た構造の繰り返しが続きます。まぁ、カタログページなんてそんなもんです。この構造を出す部分をヘルパーに切り出します。

ヘルパーに切り出したらまずヘルパーの呼び出し羅列に置き換えましょう。

そしてヘルパーへ渡すパラメータを Database からのレコードで埋めるとカタログページの出力は完了と。

正味2時間ぐらいでデザイン本にあったショッピングサイトのテンプレートを動的にすることが出来ましたです。

実際にはカート画面とか色々必要だと思いますけど WebMatrix はこの辺軽快でいいですね!

広告

某サイトが WebMatrix で作られてないわけないぢゃない

某サイトが WebMatrix で作られてないわけないぢゃない はコメントを受け付けていません。

(ネタです。)

ウェブマトリクスマン

@WebMatrixManウェブマトリクスマン

今はテキストエディタで手打ちです。準備が整いましたら皆さんのご意見を募集しますので、忌憚のないフィードバックをお願いします。 RT @Lundih: http://bit.ly/fmofdR のサイトはなんと言うツールで作成しているのですか?そのうち動的ページの開発言語は?

以下(ねつ造)証拠写真いくつか

image

image

ちゃんと WebMatrix で作成されてますね!

Web Platform Installer から IIS Express へのインストール

Web Platform Installer から IIS Express へのインストール はコメントを受け付けていません。

WebMatrix のインストール時に使ってる Web Platform Installer こっちでも IIS Express へのインストールができますよって話。

一番したのオプションをクリック、オプションの変更画面で「どの Web サーバーを使用しますか?」でIIS Express を選ぶってだけ。

image image

こんだけなんですけど、たとえば Server Side Include (SSI)とか、昔っからの静的HTMLファイルからスタートしてる物のメンテナンスとかで必要よねっ

image image image

で、入ったんですが、 IIS Manager みたいなツールが無いのでインストールしたモジュールの有効化手順がちょっと厄介

コマンド一発叩いてください

"C:\Program Files (x86)\IIS Express\appcmd.exe"
    set config -section:handlers -+[name=’SSINC-html’, path=’*.html’, verb=’GET,POST’,
    modules=’ServerSideIncludeModule’,resourceType=’File’]

(実際には一行で入力してねー)

んで、できたのかどうかって事で WebMatrix で html 書いてSSIで#include file してみる。

image image

image image

はい、ちゃんと動きました。

管理ツールが無いって面で IIS Express 固有の厄介さはありますけど、普通に Web PIからIIS拡張の類を IIS Express に入れて確認するって事もできるわけですね。

ホスティング利用の場合、ホスティング先にIIS拡張があるかによってしまいますのでそのあたりの確認もお忘れなく。

WebSecurity class

WebSecurity class はコメントを受け付けていません。

どーも、うぇぶまとりっくすたんと呼ばれる bot ですけど何か?

という訳で WebSecurity クラスです。

概要

ASP.NET メンバーシップの上位レイヤを構成し、アプリケーションに認証および、ユーザー管理機能を提供します。

WebSecurityクラスはすべて静的メンバで構成される静的クラスです。

静的メソッド

bool ChangePassword( string userName, string currentPassword,
string newPassword

指定ユーザーのパスワードを変更します。

パスワードの変更に成功した場合には true 、それ以外の場合には false が返ります。

false 時は以下の可能性があります。

  1. userName で指定されたユーザーが存在しない (UserExists(userName)がnullを返します)
  2. ユーザーの現在パスワードに誤りがある

ユーザーがパスワードを完全に忘れている場合にはこのメソッドでのパスワード変更は機能しません。この場合、以下のシーケンスでユーザーをパスワード変更させます。

  1. GeneratePasswordResetToken( userName ) によりパスワード変更トークンを取得します。
  2. ユーザー登録時に同時に設定させた電子メールアドレス等、Webとは異なる手段によってパスワード変更トークンをユーザーに伝えます。
  3. パスワード変更トークンと新規パスワードをユーザーに入力させ、ResetPassword(  passwordResetToken, newPassword ) によりユーザーのパスワードを更新します。

bool ConfirmAccount( string accountConfirmationToken )

ユーザーのカウントを確認します。

ユーザー登録後の電子メールでの確認結果を反映します。

ユーザーアカウントの作成時に requireConfirmationToken:true で登録させた場合、ユーザーは認証トークンを使って有効化される必要があり、この有効化を行います。

string CreateAccount( string userName, string passward,
bool requireConfirmationToken=false )

ユーザーアカウントを作成します。

requireConfirmationToken にfalseを指定または省略した場合、確認トークンは使われません。戻り値は確認トークンが返されます。

利用例 – User を作成し同時にログインさせる

@{
// TODO: form より userName , password を取得します
if( UserExists( userName ) )
{
ModelState.AddError( userName,”指定ユーザー名のユーザーは既に存在します。” );
}
else
{
WebSecurity.CreateAccount( userName, password );
WebSecurity.Login( userName, password );
Response.Redirect( “~/” ); // サイトトップに誘導します
}
}

利用例 – User を作成し確認トークンを電子メール送信し、URL認証する

@{
// TODO: form より userName, password, emailAddr を取得します。
if( UserExists( userName ) )
{
ModelState.AddError( userName, “指定ユーザー名のユーザーは既に存在します。” );
}
else
{
var token =WebSecurity.CreateAccount( userName, password );
/* 本文とかすべて英語にする事で日本固有のメール事情についての処理から
逃げてます。必要なエンコーディング等確認して、いい感じなメールが送れるように
した方が無難でしょう。(もしくはその辺やってくれるヘルパーが出るの待つか */
var mailMessage = new System.Net.MailMessage(
“admin@example.com”, emailAddr );
mailMessage.Subject = “welcome to example.com”;
mailMessage.Body = string.Format( @”welcome to example.com
please confirm your account.
{0}?token={1}”, Url(“~/Account/Confirm”), token );
/* メール送信サーバについての設定が web.config に必要です */
using( var client = new System.Net.SmtpClient() )
{
client.Send( mailMessage );
}
// TODO: emailAddr をデータベースに保存してください。
//          これはパスワードを忘れたユーザーとのやり取りに必要になります。
}
}
— ~/Account/Confirm.cshtml
@{
var token = Request.Query[“token”];
if( !WebSecurity.ConfirmAccount( token ) )
{
ModelState.AddError( token, “確認トークンが正しくないか有効期限が切れています”);
}
}

string CreateUserAndAccount( string userName, string password,
object propertyValues=null,
bool requireConfirmaionToken=false )

アカウントを作成すると同時にユーザー属性情報を設定します。(属性情報を取り出す方法が見当たらなかったりします) 同じ WebMatrix.WebData アセンブリ内の ExtendedMembershipProvider を利用する場合に、CreateUserAndAccoutに渡されそうな気がしますが、取り出す方法が見当たりません。というわけで、多分使い道のないメソッドだと思います。

string GeneratePasswordResetToken( string userName,
int tokenExpirationInMinutesFromNow=1440 )

指定ユーザーのパスワードの回復トークンを生成します。

パスワード回復トークンは ResetPassword メソッドのパラメータに使われます。

利用例 – パスワード確認トークンの電子メール送信と、パスワードリセット

@{
/* 本文とかすべて英語にする事で日本固有のメール事情についての処理から
逃げてます。必要なエンコーディング等確認して、いい感じなメールが送れるように
した方が無難でしょう。(もしくはその辺やってくれるヘルパーが出るの待つか */
// TODO: form から userName の取得
// TODO: 登録時に取得した userName に対応する emailAddr の取得
var token = WebSecurity.GeneratePasswordResetToken( userName );
var mailMessage = new System.Net.MailMessage(
“admin@example.com”, emailAddr );
mailMessage.Subject = “welcome to example.com”;
mailMessage.Body = string.Format( @”welcome to example.com
please confirm your account.
{0}?token={1}”, Url(“~/Account/ResetPassword”), token );
/* メール送信サーバについての設定が web.config に必要です */
using( var client = new System.Net.SmtpClient() )
{
client.Send( mailMessage );
}
}
— Account/ResetPassword.cshtml
@{
if( IsPost )
{
var token = Request.Query[“token”];
var newPassword = Request[“newPassword”];
var passwordConfirm = Request[“newPassword2”];
if( string.IsNullOrWhiteSpaces( newPassword ) )
{
ModelState.AddError( “newPassword”, “新しいパスワードを指定してください”);
}
if( newPassword!=passwordConfirm )
{
ModelState.AddError( “newPassword2”, “確認パスワードが一致しません” );
}
if( ModelState.IsValid )
{
if( WebSecurity.ResetPassword( token, newPassword ) )
{
var userId =WebSecurity.GetUserIdFromPasswordResetToken( token );
// TODO: 要カスタマイズ
// サイトテンプレート、フォトギャラリーのデフォルトのDB構造に依存しています
// _AppStart.cshtml での WebSecurityの初期化部の各パラメータに合わせて
// PhotoGallery, UserProfiles, UserId, Email の各文字列を置き換えて下さい
// WebSecurity.InitializeDatabaseConnection(
//    “PhotoGallery”, “UserProfiles”, “UserId”, “Email”, true);
var db = Database.Open( “PhotoGallery” );
var user = db.QuerySingle( “select Email
from UserProfiles where UserId=@0”,userId );
WebSecurity.Login( user.Email, newPassword );
// TODO: 要カスタマイズ部 end
Response.Redirect( “/” );
}
else
{
ModelState.AddError(“パスワードを変更できませんでした”);
}
}
}
}
<form method=”post” action=””>
<label for=”password”>新規パスワード:</label>
<input type=”password” name=”newPassword” title=”パスワード”
class=”@PhotoGallery.GetValidationClass(“password”)” />
@Html.ValidationMessage(“newPassword”)
<label for=”password”>新規パスワード確認:</label>
<input type=”password” name=”newPassword2″ title=”パスワード”
class=”@PhotoGallery.GetValidationClass(“password”)” />
@Html.ValidationMessage(“newPassword2″)
<input type=”submit” value=”登録” title=”登録” />
</form>

 

すいません、疲れました、投げていいですか?って事でこの先はメソッドシグニチャと簡単な説明な感じ。

DateTime GetCreateDate( string userName )

指定ユーザーの作成日時を返します。

DateTime GetLastPasswordFailureDate( string userName )

指定ユーザーの最終パスワード認証失敗日時を返します。

DateTime GetPasswordChangedDate( string userName )

指定ユーザーの最終パスワード変更日時を返します。

int GetPasswordFailuresSinceLastSuccess( string userName )

最終ログイン成功からのパスワード認証失敗回数を返します。

int GetUserId( string userName )

指定ユーザーのIDを返します。

int GetUserIdFromPasswordResetToken( string token )

パスワード回復トークンを元にユーザーIDを返します。

void InitializeDatabaseConnection( string connectionString,
string providerName, string userTableName,
string userIdColumn, string userNameColumn,
bool autoCreateTables )

データベース接続を初期化します。カスタムプロバイダを利用する場合にプロバイダを指定する場合にはこちらを利用します。それ以外の場合、providerName パラメータを受け取らないInitializeDatabaseConnection を利用します。

void InitializeDatabaseConnection( string connectionString,
string userTableName, string userIdColumn,
string userNameColumn, bool autoCreateTables )

データベース接続を初期化します。

利用例 – _AppStart.cshtml で以下の要領でデータベース接続を初期化します。

WebSecurity.InitializeDatabaseConnection(
“PhotoGallery”, “UserProfiles”, “UserId”, “Email”, true);

bool IsAccountLockedOut( string userName,
int allowedPasswordAttempts, TimeSpan interval )

アカウントがロックアウト状態であるか返します。

bool IsAccountLockedOut( string userName,
int allowedPasswordAttempts, int intervalInSeconds )

アカウントがロックアウト状態であるか返します。

bool IsConfirmed( string userName )

アカウントが確認済みであるか返します。

bool IsCurrentUser( string userName )

現在のユーザーが指定のユーザー名であるかを示します。

bool Login( string userName, string password,
bool persistCookie=false )

ユーザーを指定パスワードでログインします。

void Logout( )

現在ユーザーをログアウトさせます。

void RequireAuthenticatedUser()

ユーザーが認証済みでない場合 HTTP 401 (Unauthorized) ステータスコードを返し処理を打ち切ります。

void RequireRoles( params string[] roles )

ユーザーが指定ロールのすべてを持っていない場合 HTTP 401 (Unauthorized) ステータスコードを返し処理を打ち切ります。

void RequireUser( string userName )

ユーザーが指定のユーザー名でない場合 HTTP 401 (Unauthorized) ステータスコードを返し処理を打ち切ります。

void RequireUser( int userId )

ユーザーが指定の ID でない場合 HTTP 401 (Unauthorized) ステータスコードを返し処理を打ち切ります。

bool ResetPassword( string passwordResetToken,
string newPassword )

ユーザーのパスワードを指定パスワードに変更します。

bool UserExists( string userName )

userName で指定されたユーザーが存在すれば true が返されます。

静的プロパティ

int CurrentUserId { get; }

現在ユーザーのIDを返します。

string CurrentUserName { get; }

現在ユーザーのユーザー名を返します。

bool HasUserId { get; }

bool IsAuthenticated { get; }

現在ユーザーが認証済みかを返します。

静的フィールド

readonly string EnableSimpleMembershipKey

Database class

Database class はコメントを受け付けていません。

どーも、うぇぶまとりっくすたんと呼ばれる bot ですけど何か?

日本語リファレンスがアレなんで書いちゃいますー的blogです。一部、誰も使わんだろなイベントとかは割愛、最初はDatabaseクラスからいきます。

概要

サイト内のデータベースにアクセスする方法を提供します。

静的メソッド

Database Open( string name )

データベースを開きます。

パラメータ name

データベースの名前を指定します。データベースファイルの拡張子(.sdf)部分を除くファイル名部分で指定します。

利用例 – データベース名を指定してデータベースを開く

@{
var db = Database.Open( “PhotoGalery” );
}

Database OpenConnectionString( string connectionString )
Database OpenConnectionString( string connectionString, string providerName )

接続文字列、または接続文字列とプロバイダを指定してデータベースを開きます。

プロパティ

DbConnection Connection { get; }

データベースへのコネクションを返します。

利用例 – 接続文字列の取得

@{
var db = Database.Open( “PhotoGallary” );
var connectionString = db.DbConnection.ConnectionString;
}

メソッド

Close()

データベースとの接続を閉じます。

閉じられた接続を使ってデータベースを利用する事はできません。

WebMatrix では Database はページの終了時に自動的に閉じられますので明示的に呼ぶ必要は殆どありません。

利用例 – データベースを開いたのち、データを取得して接続を閉じます。

@{
var db = Database.Open( “PhotoGalery” );
var data = db.Query( “select * from Galery” );
db.Close();
}

Dispose()

Close メソッドと同様です。このメソッドは IDisposable インターフェースの実装です。

利用例 – データベースを開いたのち、データを取得して接続を閉じます。

@{
using( var db = Database.Open( “PhotoGalery” )
{
var data = db.Query( “select * from Galery” );
}
}

int Execute( string commandText, params object[] args )

SQLコマンドを実行し、影響を受けた行数を返します。(更新コマンドの場合、更新行数、削除コマンドの場合、削除行数)

argsで指定されたパラメータはSQLコマンドのプレースホルダ @0 , @1 …のそれぞれに渡されます。

WebMatrixのデータベースクラスはトランザクションによる一貫性を提供しない為、この行数が予想と合致しない場合は他のユーザーによる操作の影響を受けた事が解るだけです。たとえば更新行数が予想と一致しなかった場合、更新しようとした行が他のユーザーにより既に更新されていて条件に合致しなくなっているか、削除されています。

利用例 – データベーステーブルへレコードを挿入する

@{
var db = Database.Open( “PhotoGalery” );
db.Execute( “insert into Photo_Tags (Photos_Id, Tags_TagName) values( @0,@1 )”
UrlData[0], tagName );
}

利用例 – データベースレコードを更新する

@{
var db = Database.Open( “PhotoGalery” );
db.Execute(“update UserProfiles set EmailAddress=@0 where Id=@1”
newEmail, UrlData[0] );
}

利用例 – データベーステーブルから指定条件にマッチする行を削除する

@{
var db = Database.Open( “PhotoGalery” );
var userId = db.QueryValue( “select Id from UserProfile where name=@0”, UrlData[0] );
var photoIds = db.Query( “select Id from Photos where UserId=@0”, userId );
// 関連テーブルからのデータ削除
foreach( var photoId in photoIds )
{
db.Execute( “delete from Photos_Tags where PhotosId=@0”, photoId );
}
// 主キーテーブルからのデータ削除
db.Execute( “delete from Photos where UserId=@0”, userId );
}

dynamic GetLastInsertId()

最後に挿入されたレコードのIDを返します。

注意事項

テーブルの作成時に「IDかどうか」で Trueを指定した列の値が返されます。テーブルを一度保存すると「IDかどうか」を変更する事はできないという点に注意してください。

image

IEnumerable<dynamic> Query( string commandText,
params object[] args )

データベースから指定のSQLクエリで示されるレコードを取得します。

argsのパラメータ埋め込みは Execute と同様のルールによります。戻りシーケンスの各要素の dynamic 値は select 文で指定された列名によって列の値を示すプロパティを提供します。

このため、通常は foreach で列挙をスキャンする事になります。

注意事項

取得したデータは一端サーバのメモリに展開されます。データ件数が多くなると当然に負担になりますので、データを大量に取得する場合には部分毎にデータを検索する等の工夫が必要になります。

利用例

@{
var db = Database.Open( “PhotoGalery”” );
var tags = db.Query( “select tagName from Tags” );
}
<ul>
@foreach( var tag in tags )
{
<li>@tag.TagName</li>
}
</ul>

dynamic QuerySingle( string commandText, params object[] args )

データベースから指定のSQLクエリで示される単一レコードを取得します。

データベースからレコードが取得できなかった場合には null が返されます。複数レコードが返された場合には1レコード目が返されます。

注意事項

古くからDBプログラムに慣れ親しんでいる方は間違いがちですが、このメソッドは最初のレコードを返します。そういう意味で ExecuteScalar とは違う物です。

データ型のマッピング

SQL Server Compact では以下のデータ型が利用できます。

image

DB型 Webサーバ上の型
bigint long
binary byte[]
bit boolean
datetime System.DateTime
float float
image byte[]
int int
money decimal
nchar string
ntext string
numeric double
nvarchar string
real double
rowversion byte[]
smallint short
tinyint byte
uniqueidentifier System.Guid
varbinary byte[]

SQL Server / Express にADO.NETでアクセスする場合にはレコードのカラムをストリームとして受け取れたりするのですが、このクラスでは基本としてバイナリはバイト配列として返されます。データ容量が大きい場合等にはある程度のサイズで切り分けて保存する等の工夫が必要と言えそうです。

NuGet.org ダウンロードカウントランキング

NuGet.org ダウンロードカウントランキング はコメントを受け付けていません。

@WebMatrix_Tan による定期 NuGet.org のチェックによる

ダウンロードカウントランキング Top 20です。 今朝の8:40のスナップショットより取得しました。

8:40 分時点において nuget.org のパッケージ登録総数は 809 パッケージです。

「順位. パッケージID バージョン ダウンロード数 プロジェクトURL」

  1. EFCodeFirst    0.8    13693
  2. microsoft-web-helpers    1.0    4536
  3. microsoft-web-helpers    1.1    4536
  4. Facebook.Helper    1.0    4170
  5. Twitter.Helper    1.0    3800
  6. Castle.Core    1.1.0    3514
  7. Castle.Core    1.2.0    3514
  8. Castle.Core    2.5.1    3514
  9. Castle.Core    2.5.2    3514    http://www.castleproject.org/
  10. WebActivator    1.0.0.0    3354
  11. WebActivator    1.1.0.0    3354    https://bitbucket.org/davidebbo/webactivator
  12. NHibernate    2.1.2.4000    2900
  13. NHibernate    3.0.0.2001    2900
  14. NHibernate    3.0.0.3001    2900
  15. NHibernate    3.0.0.4000    2900
  16. log4net    1.2.10    2557
  17. MvcScaffolding    0.8.0    2531
  18. MvcScaffolding    0.8.1    2531
  19. MvcScaffolding    0.8.2    2531
  20. MvcScaffolding    0.8.3    2531

寸感: EFCodeFirst ダントツで頭一つ抜けてる感じですね。

今回のメンテナンスにより、毎日のダウンロード数を集計するための基礎データが整うことになる為、そのうち日別のダウンロードランキングが提供できるようになるでしょう。

EFCodeFirst に躊躇している方、全世界に少なくとも 13,000の人柱はありそうという事で次の人柱にあなたもどうぞ。

Older Entries