引き続き、改修
開発環境は概ね Mac。中でも。Magic Mouse は歴代のマウスの中でもかなり気に入ってる。特にブラウザを使っていてマウスの表面を左や右に撫でるだけで、ページを行ったり来たりできるのは、もう病みつきだ。ただ、ウェブサイトに直接記事を書き込んでいて、指が当たってページ移動してしまい入力内容が飛んでしまうこともよくある。これを防ぐため普段は文章はテキストエディタを使って保存しながら書き、それを投稿の時にコピペしているが、普通のユーザはわざわざそこまではやらないだろう。 Bootstrap のモーダルフォームでは、フォームが表示されると背景をグレーアウトしてくれて、一見移動を抑制してくれそうなものだが、そこまではやってくれない。ExtJSなどでもこれは同じだ。しかし、各サービスは工夫を凝らしており、ユーザの気付かないところで入力内容をセーブしておいてページが戻ってきたときに再現してくれたり、編集中にページ移動を確認するダイアログを出すことで対応している。さっき、書きかけの記事をひとつ飛ばしてしまったこともあり、先にこの対応をしておこうw
$( '#dialog' ).bind( 'show.bs.modal', function() {
$( window ).on( 'beforeunload', function() {
return '記事が保存されていません。このまま移動しますか？';
});
});
$( '#dialog' ).bind( 'hide.bs.modal', function() {
$( window ).off( 'beforeunload' );
});
こんな感じのスクリプトを、ページが表示された後に $( window ).load( function() {…} 読み込んでおく。前半部分で、Bootstrapのモーダルフォームであれば、移動を確認するダイアログが表示されて、誤操作で記事が消えることもなくなる。後半部分はフォームが非表示になった時に確認ダイアログを出す処理を上書きしている。フォームが閉じると確認ダイアログは出なくなる。showとhideにイベントを割り当てられるのでは Bootstrap のおかげ。ありがたや m( )m なお、本来であれば、フォームの個々の入力欄のdefaultValueとvalueの値を比較するなどして、入力内容が変更された場合のみ確認表示をセットすべきである。しかし、元々寄り道的な対応でもあり他にも課題はまだまだ残っている。入力フォームの生成方法やバックエンドとの接続、使用していない入力コンポーネントなどへの対応も必要なので、後に調整することにして今はここまでにしておこう
次は、記事（ARTICLE）にタグ付けができるようにする。 フロントエンドにタグをスペース区切りで編集できるよう入力欄を追加。あわせて、バックエンドのスキーマを調整して登録できるようにする。 タグは一発で見たいので、別テーブル（TAB）に集約して格納しつつ、記事との関連を保存するテーブル（TAG2ARTICLE）と二段階で保存するようにしておく。所謂、正規化
+---------+ +-------------+ +-----+
| 記 事 | <--> | 記事とタグ | <--> | タグ |
| ARTICLE | 1:n | TAG2ARTICLE | n:1 | TAG |
+---------+ +-------------+ +-----+
こうしておくと、一応SQL一発でタグのリストを引っ張り出せる
select [TAGのキー],COUNT([TAGのキー]) from TAG2ARTICLE GROUP BY [TAGのキー] ORDER BY COUNT([TAGのキー]) DESC;
ただ、バックエンドがTinyなMVCを意識して開発しているので、今の実装だと複雑なクエリーを通せず、集合関数た集合クエリはうまく扱えないんだった。うーんどうするかな…半日考えたがこれといった妙案も浮かばず。もう夜か。酒でもかっくらおうかと思ったが、風呂がてらジムに行って運動して、串カツでも食って帰ろうw
３時間ほどでオフィスに戻る。集合関数ライクの動作を実装する方法は思いつかなかったが、リフレッシュのおかげか、コードの断片をいくつか思いつく。大がかりな実装はひとまず置いといて、TAG2ARTICLE を JSON形式で取得する際に、パラメータをつけると集合関数で処理されたっぽい結果が返ってくるようにしてみた。もう少し捻ればきちんと組み込めな感じだし、SQLじゃなく配列で処理したので、データベースを差し替えても使えるだろう。これで、本来のタグ表示と検索の下準備は完了。あとはフロントエンドとバックエンドの調整。まずは、フロントエンド側でタグのリストを取得して表示するようにする。次に、タグで検索されたら（#をつけるとタグ検索）バックエンドの挙動が変わるようにしておく。あとは表示されているタグがクリックされたら、検索テキストに放り込んでバックエンドを呼び出すようにしてできあがり。後半はコードを書いたというよりは、いじってるうちに自然にできた感じ。ふふふ。もう朝か。それじゃ、今日はこのあたりで…
