ポケモン不思議のダンジョン依頼リスト検索サイト化

うごいたよーっ！　Triggersタグ

片桐　継（Tugu Katagiri） — Tue, 23 Oct 2007 22:19:00 GMT

悩んでいたこれ
http://blogs.wankuma.com/esten/archive/2007/10/20/103080.aspx

解決しました。ボタンコントロールの設定が原因でしたですよ。

         <asp:Button ID="BtnSelect" runat="server" Text=" 条 件 で 検 索 " width="70%"  />

これは、まぁ、ふつー。これをデザイン画面のプロパティから見ると……あれ？　AutoPostBackは？、で、それらしいプロパティをつらつらと探す。

←これを「FALSE」から「TRUE」へ

動いた。

ってことで、UseSubmitBehaviorプロパティはTRUEでよろしく♪

VisualStudio2008だと、AutoPostbackプロパティ無いんで首かしげたんですけど、こういうことだったんね（笑）　AJAX統合でJAVAScriptで処理しやすいようになったのかなー？なんて憶測してみた＜おいこら　相変わらずのイキアタリバッタリー

    <Triggers>
        <asp:asyncpostbacktrigger ControlID="BtnSelect" EventName="Click" />
    </Triggers>

で、UpdateControlのTriggersタグを設定、これで動きました（＾－＾）

かるあさーん、ありがとうございますですー。

簡単AJAX対応

片桐　継（Tugu Katagiri） — Thu, 18 Oct 2007 21:27:00 GMT

ポケモン不思議のダンジョン　不思議なメール一覧サイト

こちらのアクセス数がすごいことになっているので、ちょっと表示の軽量化（笑）

簡単な対応としては、やはりAJAXでのUpdatePanel対応かな？ということで、超簡単に乗っけてみました。

まずはお約束、ASPAJAXExtSetup.msi　をダウンロードしてインストール

http://www.microsoft.com/downloads/details.aspx?FamilyID=ca9d90fa-e8c9-42e3-aa19-08e2c027f5d6&displaylang=en

インストールし終わったら、VS起動。ツールバーに「AjaxExtenstions」が追加されてます。

はい、準備はOK

そこで既存のASPプロジェクトをあけて、まずはマスターページに「AJAX使うんでよろしく」のお約束として「ScriptManager」を追加します。場所は、Formタグの内側でOK。ツールバーからドラッグしたらファイルを保存します。（ここで約２分）

この後、改良したいページを開きます。今回は一覧リストの表示を軽量化したいのでそのページを開いて、軽量化したい部品をUpdatePanelの内側に入れてしまいます。赤い線の部分が今回の追加部品。今まで作った部品の外側になるようにいれただけです。

できたら、次に一箇所だけ、ロジックを追加します。「ここの部分だけ更新したいんで、よろしくね」という命令です。

    Protected Sub BtnSelect_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles BtnSelect.Click

        Gd.PageIndex = 0

        SetList()

        up_List.Update()

    End Sub

赤文字の部分ね。これで「up_List」という名前のUpdatePanel だけが更新されてクライアントに送られます。うん、簡単。（ここまで５分）

はい、動かしてみましょう。

今までとちょっと変わります。リスト部分だけが表示されて更新されてページ送りできて、検索結果の表示に切り替わるようになり、メニュー部分や検索条件部分がちらついたりしません。

というわけで、WEBサイト発行、トータル10分でできる、サイトの軽量化、でした♪

白鳥の足のあがき方（VB.NETのLINQでページング）

片桐　継（Tugu Katagiri） — Tue, 09 Oct 2007 23:15:00 GMT

さて、怪しい妖しいサイト、おかげさまで盛況です。ありがとうございます。色んな方からの色んな要望・希望・イチャモン・わけわからん中傷などなどをいただいておりますが、食欲の秋でもあるので美味しいトコだけカジリつつ精進させていただいてます。かまってもらえるって幸せだナァ（おい）

ってことで、このサイト実現に至る＆メンテナンスの過程で見つけたことなんかをちょこちょこと書いてみようかなんぞとおもってみたわけです。何かのお役にたてれば幸いですですですよ。

そして、今日の～てぇまはぁ～っ…… (By加賀丈史）

VB.NETのLINQでページング

ページングって何ぞ？という人はこちら

http://japan.internet.com/developer/20060509/26.html
http://japan.internet.com/developer/20060620/25.html

　早くからここの部分は手を入れよう、と思っていたのがこれでした。情報収集＆リスト一覧検索がメインのサイトである以上レコードが増え続ける事がわかっていたのですし、検索さえ機能してしまえばあまり一覧は使わなくなるだろうと思っていましたし。かといってページ開いてイキナリ検索ボックスだけだと寂しいし＜おい
なので、効率よく、かつ、サイトが重くならない範囲でのリスト表示制御、を実現したい時にページングはとても有効な手段ってわけなのですです。

さて、まずは旧ソース。元記事はこっちね

 Gd.DataSource = From L In pMContext.MissionList Where L.MID Join M In dMl On L.MID Equals M.MID _

                        Select MID = L.MID, _

                        DNGN = L.DNGN, _

                        PNAME = L.PNAME, _

                        RANK = L.RNK, _

                        EXMM = L.EXMM, _

                        RWD = L.RWRD, _

                        PWD = L.PWD

  Gd.DataBind()

こちら、新ソース。

Gd.DataSource = From L In pMContext.MissionList Where L.MID Join M In dMl On L.MID Equals M.MID _

                        Select MID = L.MID, _

                        DNGN = L.DNGN, _

                        PNAME = L.PNAME, _

                        RANK = L.RNK, _

                        EXMM = L.EXMM, _

                        RWD = L.RWRD, _

                        PWD = L.PWD _

                        Skip (Gd.PageIndex * Gd.PageSize) _

                        Take (Gd.PageSize)

 Gd.DataBind()

ステートメントが増えてます。ポイントはそこ。

SKIP　→取得するレコード開始位置指定
TAKE　→取得するレコード件数指定

この二つさえ押さえてしまえば、ページングの考え方を簡単簡潔即実装。LINQの超便利ステートメント、TAKEとSKIPを駆使することで、一ページ分に必要なレコードだけをピンポイントで取得、これをGridViewへバインドさせることで処理が高速できるってシカケです。次の応用としては、一ページに何行表示するかをユーザーが設定できるようにしたいのですけれど、このロジックのどの変数に対して何をすれば良いのか、もう大体の方は直感でお分かりいただけると思います。

なお、このやり方はほんの一例。プログラミングにはいくつかのセオリーがあるとはいえ、答えは一つとは限りませんので、そこんところもよろしくです＜何がだオイ

こうやって見るとカンタンじゃん、なんだけど、知って触ってこういうことかと理解するまでは時間がかかったの。というわけで

参考にしたサイトはこちら

まずはどどーんとブックマーク必須的LINQサンプルコード集。素晴らしいラインナップです。
http://msdn2.microsoft.com/en-us/vbasic/bb688084.aspx

そしてLINQの勉強にあたってはScottGuさんのブログは欠かせないですね。判りやすい解説に感謝。
http://weblogs.asp.net/scottgu/

ピンポイントなLINQ、Gridviewページングに関する記事はこちらに翻訳版で。
http://blogs.wankuma.com/chicasharp/archive/2007/09/09/94926.aspx
毎度の事ながら、Chicaちゃん翻訳GJ＆Thanksです。だってニホンジンだもの。

ポケモン不思議のダンジョン依頼パスワードサイト　ベータ公開

片桐　継（Tugu Katagiri） — Sun, 30 Sep 2007 14:15:00 GMT

いろいろいろいろいろと戦った、個人的にやってみたASP.NET、暫定公開します。

ここです。

http://pokeps.dip.jp/fdty

プログラムもさることながら、今回は「WEBサイト発行」で激しくつまづきました。もう、思いっきりハマりましたですよ。

「BC30456: 'InitializeCulture'はメンバーではありません」

というエラーで外部からのアクセスができず（大汗）デバッグは動くんですけどね。

結局、http://forums.asp.net/p/955888/1177929.aspx の記事ズバリで

WEBサイト発行時にはこの状態にしないと動かないってことでした。

でもこのサイト、結局ザンゲの嵐ではあるのですよ。FormView使ってないし、DetailViewも使ってないし、UPDATELINQもINSERTLINQも使ってないし。SelectはLINQしたし、オブジェクトの捜索もLINQしたけど、結局自分でコントロール配置して、制御して、InsertやUPDATE、DeleteのSQLを発行したほうが早かったの　

il||li ＿|￣|○ il||li ダメダメ

MasterPageは便利だとわかったし、LINQも便利だってわかったし、WEBコントロールのオブジェクトについても把握できたことは収穫だと思いたい（おい）収穫した知識については、おいおい、コードも交えながらご報告できたらいいなぁ。

LINQ使いつつ、動的条件でデータを検索してみる

片桐　継（Tugu Katagiri） — Sat, 29 Sep 2007 13:45:00 GMT

もっと簡単な方法はあるんだろうなと思いつつ、VB4なステゴサウルスは今日もがんばる（笑）

さて、一覧ができたので、次は検索機能を。ランク、ダンジョン、報酬で検索するんだけど、絞り込み条件は色々と組み合わせられて、かつ、それらをAND条件にしたいわけです。

まだリストはバグバグだけど、とりあえずできてる。なのでこの段階で一覧から入力するコントロールを配置。「（すべて）」は必須だとおもってるので、静的カラムも追加して、AppendDataBoundItemsをTrueにセット。で、考えたこと。Oracleなんかの動的Where句がLINQでかけるのかどうかがよくわからない（おい）。そこで、対象データのMIDを収集してそれでJOINすることでLINQ部分は静的コードでかけるなぁ、と。

        'コンテキスト宣言

        Dim pMContext = New nListDataContext

        'まずは全件とっちゃう

        Dim dMl = From L In pMContext.pMission Select L.RNK, L.DID, L.RWRD, L.MID

        'ランクで絞込み

        If dRank.SelectedIndex > 0 Then

            dMl = From L In dMl Where L.RNK = dRank.SelectedValue

        End If

        'ダンジョンで絞込み

        If dDNGN.SelectedIndex > 0 Then

            dMl = From L In dMl Where L.DID = dDNGN.SelectedValue

        End If

        '報酬をあいまい検索

        If tRWD.Text > "" Then

            dMl = From L In dMl Where L.RWRD Like "*" & tRWD.Text & "*"

        End If

        '対象データがあったらバインド、なかったらごめんなさい

        If dMl.Count > 0 Then

            Gd.DataSource = From L In pMContext.pMission Where L.MID Join M In dMl On L.MID Equals M.MID _

                           Select _

                            DNGN = L.dMaster.DNAME & "(" & L.FLR & "F)", _

                            RANK = L.RNK & "(" & L.LVL & ")", _

                            RWD = L.RWRD, _

                            PWD = L.PWD1 & " " & L.PWD2 & " " & L.PWD3 & " " & L.PWD4 & " " & L.PWD5 & " " & L.PWD6

        Else

            Gd.DataSource = Nothing

        End If

        Gd.DataBind()

みたいなソースを書いてみたところ……

できたｗ

こんだけでいいの？　LINQってすげーっ！

片桐　継（Tugu Katagiri） — Sat, 29 Sep 2007 01:46:00 GMT

さて、では作ってみるかと、いじってて感動。ASP.NETのDataGridとLINQが出会うとここまでやるかという恐ろしくコードレスな世界が展開できるらしいです。

まずは、DBML、LINQtoSQLのオブジェクトを作ります。データベースはポケモン不思議のダンジョン依頼リストサイト化計画のものです。

で、ここから取ってくるデータを想定して、DataGridをデザインします。RANK（依頼ランク）、DNGN（ダンジョン）、RWD（報酬）、PWD（パスワード）のそれぞれをBoundFieldにセット。この辺りはVisualStadio2005とそんなに変わってないかなぁと。

さぁここからだ。このDataGridへのバインドなんだけど、LINQが返すオブジェクトをそのまま割り当てても動くんです。つまり、SELECT結果そのままバインドしちゃうと、たった３行で一覧画面の出来上がりです。

        Dim pMContext As nListDataContext = New nListDataContext

        Gd.DataSource = From L In pMContext.pMission _

                       Select _

                        DNGN = L.dMaster.DNAME & "(" & L.FLR & "F)", _

                        RANK = L.RNK & "(" & L.LVL & ")", _

                        RWD = L.RWRD, _

                        PWD = L.PWD1 & " " & L.PWD2 & " " & L.PWD3 & " " & L.PWD4 & " " & L.PWD5 & " " & L.PWD6

        Gd.DataBind()

コツは、列名のコンテキストをきちんと決めて割り当てておくところ。BoundFieldではフォーマット関数も用意されているのでこれを使ってGrid表示時に整形してしまうのもありですけれど、今回は複数の列をあわせて一列にしてるのでこのSQL文？で。それにしても……LINQおそるべし（笑）

うおー、表示できてるよ。おー、まじっすか？（かんどー）

囚人さんから教えていただいて、LINQDataSourceを使ってみてさらに感動！
ただ、ちょっと「？」とおもったのが、

あるテーブルAから生成したFormView内に新しいコントロール（コンボボックスとか）を配置
新しいコントロールに対して、LINQDataSourceでテーブルBを割り当てようとする
LINQDataSource生成ウィザードでテーブル選択しても、必ずテーブルAを選択したことになって処理が継続する
SQLDataSourceだとウィザードでテーブルBを選択してそのままテーブルBの列を選択できるようになる

これってフィードバック？（やったことが無いので判らないらしい）

さて、そろそろ画面設計

片桐　継（Tugu Katagiri） — Thu, 27 Sep 2007 20:27:00 GMT

　in ポケモン不思議のダンジョン依頼パスワード検索サイト構築計画

ポケモンマスター作って、ダンジョンマスターと依頼テーブル作ったんでその続き

データベースと大体の要件が決まったら、基本に立ち返りましょう。このサイトは「ポケモンたちの依頼パスワードを収集・検索するサイト」です。ということで、大きく分けると「登録・検索」の２種類が大きな柱というわけですね。そこで、それぞれの画面について考えましょう。

必要な画面は、メニュー・登録画面・一覧画面・詳細画面、かな。最低限だけど。

メニューはトップ画面だね。各画面へはボタンで飛ぼう。
登録画面は項目の登録。訂正もここで。
一覧画面は項目の検索と一覧表示、ソートなんかを。
詳細画面は項目の表示。削除はここで行うこととしましょう
各画面同士の移動はボタンがあるといいな。

大まかなイメージはこんなで。さて、では色々と考えて行きますか。

全体構成

やっぱりここはマスターページを使おうかと。さっきイメージしたサイト構成を考えるに、メニューを上にだしてしまって、登録と一覧をボタンで行き来する方が使い勝手よさそう。現在登録ミッション数なんかを出しておくと素敵かな。

登録画面

一通りの項目は登録できるようにします、まぁこれは当たり前。でも、どうやって登録させましょう。DS片手に、こそっと楽チンに登録できたほうが良いし、とは言ってもWEBだからできることも知れてる。ユーザーインターフェイスはちょっと頭をひねらないといけないかも。

入力項目

依頼ポケモン

リストなんてやってらんない（笑）頭文字入れたらリストを絞り込んでいけるようにしてみようか。そもそもとして、ここは空欄でもOKかな。一部のテンプレにはこの項目もないし。

依頼ダンジョン

ここも頭文字入れたらリストを絞り込んでいけるようにしてみようか

依頼フロア

これは数値だからスピンボタンでいいような。最大値はマスターから引っ張る

謝礼

こればっかりは入力するしかないか（笑）

パスワード

入力できるけれど、入る文字は限られてる。一応入力用のボタンアイテムを準備したいな

備考

テキストエリアでいーじゃん、すげーじゃん（落書き禁止）

暗証番号

登録者が好きに入力できる４桁の数字。削除や修正の時にはこれがないとできない。

……かなりわがままだ（笑）作る側の事なんか、そんなの関係ねぇっ！＜お前がやるんだろ的ツッコミなしで
あと気をつけることとして、この画面を詳細編集画面でも使いたいから、レコードのIDを渡すようにして、IDがあればデータを取ってきて編集するというロジックも必要だね。

さて、入力とくれば、チェック。これは入力画面を考えたらセットで考えるべき仕様だと思うの。

依頼ポケモンはマスターにあるか

　→ない場合はエラー

ダンジョンはマスターにあるか

　→無い場合登録する

　→ある場合、階層のチェック

　　→階層が無い場合、エラー

パスワード

　→文字数は合っているか

　　→合っていない場合エラー

　→文字は全て規定内か

　　→合っていない場合はエラー

暗証番号

　→数字４桁が入力されているか

　　→されていない場合はエラー

　→編集モード、削除モードの時は既存のレコードの値と一致しているか

　　→していたら処理

　　→していなかったらエラー

エラーの場合にはエラー表示。ダメだった所の色を変えようかな。エラーの処理フローは全部に対してチェックして一気に返したほうが入れる側もイライラしなくて良いと思うし、訂正は一回でやりたいし。登録できたら、OKメッセージと共に、もう一度入力画面へ。依頼リストは単発でみるよりは連続で見ることが多いから、繰り返し入れられる方が良いと思う。つか、POSTBACK必須だな、ここ（笑）

こんなカンジで、登録画面の構想はだいたいOK。

一覧画面

一覧画面は素直にグリッドでいっちゃえー、というイメージで。

表示するリスト項目

依頼ランク（探検隊ポイント）
依頼ダンジョン＋フロア
謝礼
詳細アイコン
編集アイコン

ランクレベルとダンジョン、謝礼はソートできればいいなぁ。「詳細アイコン」をクリックすると詳細画面へ。「編集アイコン」をクリックすると編集画面（登録画面）へ。ここは、そんなに悩まないと思う。シンプルにシンプルに。上部に検索ボックスと検索ボタンをつけて、該当する依頼をさくっと表示できたらかっこいいｗ　ランクや探検隊ポイント、ダンジョン、謝礼で絞り込む、と。

ここで、ちょっと考えたのだけれど、検索条件のうち、ランクはマスターがないから、集計のビューをつくっておいて、今登録されている全レコードからさらっとDISTINCTで情報を取っておくいう方法が使えるんじゃないかな。同じように、登録ミッション数だって集計ビューにしておけば楽。謝礼のあいまい検索も視野にいれて、この列項目にはフルテキスト検索設定をつけておこう。SQL-Serverさまさま♪

詳細画面

ここも超シンプル。そのままここで計画した画面表示項目でいいじゃん、と思う。

編集画面

登録画面と同じだけど、既存情報が表示されているってところが違うの。編集のチェックや処理の流れは一緒。ただし、削除ボタンを表示しておかなくちゃ。ちなみに、今回の削除だけど、もう一個、pMissonテーブルと同じレイアウトのテーブルを用意して、データをそっちにインサート後にpMissionテーブルから削除するつもり。最終編集者のIPとリモートホストを記録しておくことと、データ蓄積延べ件数把握のためなんだけどね。物理的にはユーザーからは見えないはずだし、パフォーマンスにも影響ない……と思うし。

さて、こんなカンジで画面構想は何とかなったかな……次はいよいよ製造開始ｗ

ここまでの計画で必要な情報は以下から収集ｗ
SpecialThanks

ドロップダウンコンボリストコントロールhttp://blogs.sqlpassj.org/yoshihirokawabata/articles/3251.aspx

マスターページ関係
http://weblogs.asp.net/scottgu/archive/2005/11/11/430382.aspx
http://blogs.wankuma.com/mymio/archive/2007/08/11/89888.aspx

SQL　フルテキストインデックス関係
http://technet.microsoft.com/ja-jp/library/ms142583.aspx
http://technet.microsoft.com/ja-jp/library/ms187787.aspx

みっしょん・いんぽっしぶる

片桐　継（Tugu Katagiri） — Wed, 26 Sep 2007 20:09:00 GMT

「おはようフェルプス君。今回の君の任務は……」＜違っ

　in ポケモン不思議のダンジョン依頼パスワード検索サイト構築計画

ポケモン不思議のダンジョン用サイトを作りたいとはじまって、ポケモンマスターを作ってみたの続き。ポケモンマスターが出来たところで、次は、ポケモン達の依頼を受けるための準備をしましょうか。

その前に、ちょいちょいとネットで情報収集すると、ダンジョン情報があるじゃん。それなら早速集めてリスト化、テーブル化しちまえってことで、ダンジョンマスターを作るｗ　寝るときには鉄格子を降ろしましょう（謎）

ダンジョンマスター

列名	タイプ	内容
DID	smallint	ダンジョン番号
DNAME	nvarchar(50)	ダンジョン名
MFLR	smallint	最終階層

作り方はポケモンマスターと一緒。

ビバインターネット、情報リストさえGetできればOKOK。

で、本題ね。

依頼サイトを作るのにまずは依頼情報をまとめることが必要。で、その要件は

要素	内容
依頼ポケモン	ポケモンマスターに存在するポケモンであること
ランク	S～E、☆×数、＋（対応レベル）の書式
お礼	これはアイテム名。テキスト検索（あいまい検索）は可能にしておきたい
場所	ダンジョン名＋フロア階層の書式
パスワード	全角４文字×８。使われている文字は固定なので入力時にチェック可能。

って所でしょうか。この辺りの内容については、あちこちのWEBサイトで交換されている情報から自身で洗い出していけば絞り込めていける項目ではありますね。

さて、ある程度こんなもんか、となったところで、まず、画面にどう表示するかを考えて見ます。デザインは後でいいから細かな項目書式を考えて、それに編集しやすく、かつ、データベース内容としても扱いやすいように要素を細かくしていきます。

項目	画面表示	データベース要素
依頼ポケモン	ポケモン名	ポケモン図鑑番号（マスターと連携）
ランク	ランク（対応レベル）	ランク（文字列）、レベル（数字）
お礼	アイテム名	アイテム名（文字列）
場所	ダンジョン名［フロア階層Ｆ］	ダンジョン名（文字列）、フロア（数字）
パスワード	全角４文字×８	パスワード（文字列４個）×８

ふむ、んなカンジかな。これに、依頼固有のキー項目を加え、依頼テーブルの要素は決定。後、複数の人からの登録とメモなんかも残せるようにしておくと、情報共有という概念も持たせることができると思うので、

依頼テーブル

列名	タイプ	内容
MID	bigint(ID)	依頼固有キー（連番）
PNO	smallint(FK)	依頼ポケモン図鑑番号
RNK	varchar(10)	依頼ランク
LVL	smallint	対応レベル
RWRD	nvarchar(50)	謝礼アイテム
DID	smallint(FK)	ダンジョン番号
FLR	smallint	ミッションフロア
PWD1	nchar(8)	パスワード１
PWD2	nchar(8)	パスワード２
PWD3	nchar(8)	パスワード３
PWD3	nchar(8)	パスワード３
PWD4	nchar(8)	パスワード４
PWD5	nchar(8)	パスワード５
PWD6	nchar(8)	パスワード６
PWD7	nchar(8)	パスワード７
PWD8	nchar(8)	パスワード８
IP	varchar(80)	登録者のリモートホストID+(IPアドレス)
CDNM	char(4)	登録者が登録時に設定する暗証番号
EXMM	ntext	備考

　　　　
これでいいかな？　今回は日本語を使う場所が多いので、ちょっと意図的に勉強の意味もこめてnvarchar型とnchar型を多用してみました。

決まったところで早速このテーブルを実際にSQL-Serverに登録。

さぁ準備はできたぞっと。

今度は、これをWEB画面にデザイン、ページ構成と、部品とユーザーインターフェイスをどう実現するか考える事にしましょう。……目標、AJAX！（爆死）