[JavaScript]リンクのURLクエリをPOSTで送信する

先日、検索 → 一覧 → 詳細 という画面に対して、

1. 一覧から詳細画面へはリンクをつかって遷移すること
2. 詳細画面から一覧画面へは「パンくず」リンクを利用して戻れるようにすること
3. 一覧画面は検索したときの条件で絞り込まれた一覧が表示されること
4. 詳細画面へのＵＲＬに検索条件のURLクエリをつけず、詳細データへのIDのみをクエリにつけること
5. Cookie（セッション）利用不可

という依頼を受けました。
SEO対策のためにURLに余計なクエリをつけたくないけど、パンくずのフローは辿ってきたフローをちゃんと戻れるようにしたいというのが趣旨でした。
そこでHTMLを生成するときには、ID、検索条件ともにリンクのURLにクエリとして追加しておき、Javascriptを利用して、URLからクエリの一部を抜き取り、リンクをクリックしたときに、それらがPOSTされるようにしました。
書いておけば、後々役に立つかなと思ったので書いてみることにしました。
下がそのサンプルになります。
どちらも同じＵＲＬを指定していますが、開く画面は別になるようになっています。

リンクその１
リンクその２

この処理の手順はこんな感じになります。

1. リンク要素を取得する
2. リンクのＵＲＬをアドレスとクエリにわける
3. 動的にフォームを生成し、生成したフォームにクエリをhiddenとして追加していく
4. リンクのhref属性の書き替え
5. リンククリック時に生成したフォームがsubmitされるようにする

ScalaでSwingレイアウト（GridBagPanel編）

scala.swingでは、レイアウトのクラスとPanelが一つのクラスになっています。
GridBagPanelはGridBagLayoutとJPanelクラスが合わさったクラスです。
GridBagPanelはレイアウトの自由度がかなり高いクラスとなっており、これを利用すれば、おおよその画面レイアウトは実装できてしまうのではないでしょうか？

主な使い方は以下の通りです。

1. GridBagPanelの基本的な仕組み
2. GridBagPanelクラスの基本的な利用方法
3. GridBagPanelの色々なレイアウトオプション

ScalaでSwingレイアウト（BoxPanel編）

ScalaでSwingアプリを作っていたんですが（これまた今更ですが・・・）、Scalaに限らずSwingをやっていて、個人的にいつも困るのがフォームのレイアウトだったりします。
普段はWebプログラマ～な自分からすると、Swingのレイアウトマネージャーって、非常に使いづらい。「そんなんだから Adobe Airに・・・」なんてことが出掛ってしまうぐらい使いづらい。そんなSwingですが、Scalaを利用して実装すると少しはマシになるな～というのを実感する今日この頃なので、少しずつScalaでのSwingの利用方法を紹介できたらなんて思っています。そんでもって、まずはBoxPanelクラスを紹介しようと思います。
Scalaではパネルを設定するのにPanelクラスとレイアウトマネージャがセットになっている以下のクラスを利用するようになっています。

1. BorderPanel
2. BoxPanel
3. FlowPanel
4. GridBagPanel
5. GridPanel

その中からBoxPanelを何故最初に紹介するかというと、フォームの右寄せ、上寄せができる数少ない（唯一？）レイアウトマネージャだからです。

1. BoxPanelを定義し、コンポーネントを配置する方向を指定する
2. コンポーネントの表示位置を設定する
3. Swingクラスを利用して、隙間を挿入する

→Pia-no-Jac←のライブに行ったら、買うことをお薦めするグッズ

最近、→Pia-no-JaC← にすっかりはまっており、先日ついにライブに行ってきました。

ライブといえばグッズなわけでして、当然→Pia-no-JaC←のライブでも色々なグッズが売っているわけです。
そんな中から、ライブへ足を運んだ人なら、是非買っておきたいグッズを勝手に紹介しちゃいます。

1. シャカシャカ大作戦袋（300 円）
   

   見ての通り、何の変哲もないビニール袋です。
   しかし、→Pia-no-JaC←のライブに参加する皆様は必ず購入することを強くお薦めします。
   この「シャカシャカ大作戦袋」は→Pia-no-JaC←のライブでは恒例となっている（なっていたらしい）セッションコーナーで活躍するアイテムなのです。
   実際、参加者のほとんどが購入しているため、万が一ステージの近くのポジションが取れたのに買ってないってことがあると、ステージの2人に「あれっ」という表情で見られてちょっと恥ずかしい思いをしてしまう可能性大です。
   あと、これはわたしの経験談になるのですが、コンビニのレジ袋は強度が足りません。
   途中で穴開いてしまいます。
2. タオル（1,000 円）
   

   こちらは、ライブでは定番の商品かと思います。ネタバレになる（さっきのもそうですが）のですが、→Pia-no-JaC←のライブでは、またまた恒例となっている「タオル回し」コーナーがありまして、タオルもシャカシャカ大作戦袋同様、ライブの必須アイテムの一つとなっております。
3. ライブDVD
   

   現在（2011/09/25）行われている最中のツアー限定なんですが、左のDVDがライブ会場で販売されています。
   自分自身これを買ってみて、思ったのですが相当いいです。
   実は、→Pia-no-JaC←のライブDVDをもう1枚もっているのですが、それら２つに限って言わせていただくと実は、CDより音がいいのでは？と密かに思ってます。というわけで、音源としてもかなりいいものなので、今回のものに限らずライブDVDは購入しておくことを強くお薦めします！！
   ちなみに持っているもうひとつのDVDはこちらです。
   

   

   PIANO project.
   

   posted with amazlet at 11.09.25

   DAISHI DANCE × →Pia-no-jaC← 樫原伸彦
   urban sound project. (2010-08-04)
   売り上げランキング: 39811

   Amazon.co.jp で詳細を見る

[JavaScript]ブラウザ上でペーストを禁止する

会員登録フォームなどで、メールアドレスを入力させる場合、確認のために同じメールアドレスを2度入力させるのをよく見かけます。

そのような場合、「確認用はコピー＆ペーストではなく直接入力でお願いいたします。」などと注意書きが入れてあったりするのですが、こういうった注意書きがある場合でも、実際にはコピー＆ペーストできてしまうフォームがあったりします。

そこで、こういったフォームでJavaScriptを利用してコピー＆ペースト（Ctrl-c & Ctrl-s）を防止する方法を紹介します。

コピー禁止フォーム：

ペースト禁止フォーム：

→ Pia-no-JaC← のライブに行こう！！

最近すっかりはまっているピアノ＆カホンの熱い2人組み「→Pia-no-Jac←」（ピアノジャック）。7月の音霊ライブに続き、横浜での彼らのライブに行ってきました。
→Pia-no-Jac←の単独ライブには初参加ということで、客層や雰囲気はどんななんだろう？？なんて不安に思いながら、参加したわけですが・・・・。自分が予想していた雰囲気とは弱冠違いがあったせいかもっと色々な人にライブに参加してほしいな～と思いまして、まあ色々書くことにした次第です。
というわけで、→Pia-no-Jac←（以下ピアノジャック）のライブについて、Ｑ＆Ａ形式にしてまとめてみました。

1. そもそもピアノジャックってどんな感じなの？
2. 客層はどんな感じですか？
3. 一人で見に行っても大丈夫？
4. ＣＤ一枚も持っていないけど、大丈夫なの？
5. 会場の雰囲気はどんな感じなの

[JavaScript]テキストエリアにtitleタグを使って入力例を表示する

JavaScriptを利用して登録フォームのテキストボックスにtitleタグに指定した文字列を入力例として表示する方法を記します。

この処理は

1. フォーカスが外れたとき
   入力した文字列がないまたは、入力した文字列がtitleタグの入力内容と同じ場合、入力例を表示する
2. フォーカスされている場合
   入力した文字列がtitleタグの入力内容と異なる場合、入力した文字列を通常のフォント色で表示する

という方法で実現します。

実際の動作は下のようになります。