Hatena::ブログ(Diary)

おまえなんか、訳してやる!

どんどん一言で
訳していくサイトです。
今567語くらい。

1005-01-25 草稿:はてなダイアリーガイド「フォームを使ってみる」

日記内の検索フォームを作ってみる

有料オプションでヘッダを消したときや、はてなダイアリーの見方がよくわからない閲覧者向けなどに、改めて検索フォーム(検索ボックス)を表示させている人がけっこういます。

日記のヘッダテーブルにある検索フォームを、ページ内の他の所に作ってみましょう。簡単なのは「searchformモジュール」です。設定画面の「ページのヘッダ」や「ページのフッタ」などに、

<hatena name="searchform">

と書くと、

のように表示されます。

HTMLタグで検索フォームを作る

細かく設定したい場合は、同じくヘッダやフッタに

<form method="POST" action="searchdiary">
	<input size="20" value="サイト内検索" type="text" name="word"> 
 <input value="検索" type="submit" name=".submit">
</form>

のように書くと

このような検索フォームができて、自分の日記を検索できます。

  • この場合のポイント
    • 「action="searchdiary"」というのが“自分の日記を検索する”このフォームのアクションです。最初からついている検索フォームのアクションを借りてきているわけです。
    • 「size="20"」の数字をいじると入力欄の幅が変えられます。
    • 「value="サイト内検索"」の言葉も変えられます。説明は外に書いてここは無しでも。

キーワードの検索フォームを作る

同じように、ぺージのヘッダやフッタに

<form method="POST" action="http://d.hatena.ne.jp/search">
	<input size="20" value="はてなキーワード検索" type="text" name="word"> 
 <input value="検索" type="submit" name=".submit">
</form>

のように書くと

キーワード検索のフォームが表示され、はてなダイアリーのキーワードを検索できます。

  • ポイント
    • 「action="http://d.hatena.ne.jp/search"」というのは、キーワード画面のヘッダテーブルにある検索フォームのアクションと同じです。
    • 「action="xxx"」という部分で、はてなのサーバーに「こういう動作を頼むよ」とお願いしているわけです(この場合はキーワード検索)。「action属性で指定したアクションを呼び出す」とか言います。

見出しカテゴリーのプルダウンメニューを作ってみる

カテゴリー名をぜんぶ表示せずに、プルダウンメニューで選べるようにする方法です。

この方法は『template="dropdown"』を使ったsectioncategoryモジュールで、代替出来るようになりました。

<hatena name="sectioncategory" template="dropdown">

と書くと、

カテゴリー

のようになります。これは見出しカテゴリーの保存に対応していて、日記上でカテゴリーを増やしていくと自動的にメニューを追加してくれます。メニューの順は詳細設定画面の『日記のカテゴリー一覧』の欄に記入されている順です。

というわけでこのモジュールは便利なのですが、モジュールを使わないformタグの手書きにすると、「見出しカテゴリーの保存」には対応しないものの、構造を単純にできたり、メニューに『この日記のカテゴリー』のような初期値を表示できるのが場合によっては良いかもしれないので、以下の説明も残しておきます。

ページのヘッダやフッタに、

<form method="POST" action="searchdiary">
	 <select name="word">
		 <option>この日記のカテゴリー</option>
			 <option value="*[雑記]">雑記</option>
			 <option value="*[音楽]">音楽</option>
			 <option value="*[web]">web</option>
			 <option value="*[はてな]">はてな</option>
	 </select> <input value="Go" type="submit">
</form>

のように書くと、

プルダウンメニューができて、「Go」を押すとそのカテゴリーの記事だけを読むことができます。

  • ポイント
    • 上のカテゴリー名を、あなたの日記で使っているカテゴリー名に2カ所ずつ書き替えていけばOKです。「この日記のカテゴリー」の部分も、好きな言葉に書き換えられます。
    • カテゴリー機能も、検索フォームと同じアクション(action="searchdiary")なので、それを利用しています。検索フォームで『*[雑記]』を検索したり『*[音楽]』を検索するのと同じアクションです。

Googleやgoo辞書、Amazonなどの検索フォームを作る

ユーザーのid:limboさんがまとめられているので、下記リンク先をご覧ください。limboさんの日記のサイドバーに実際に各種検索フォームが使われています。(見た方がわかりやすいのでとりあえずリンクさせて頂きます>id:limboさん)

こちらでは各々の検索フォームの説明や、スタイル指定に便利な<fieldset>、<legend>というタグが使われています。

<form method="POST" action="searchdiary">
 <fieldset>
  <legend>日記内検索</legend>
   <input size="20" value="" type="text" name="word">
   <input value="検索" type="submit" name="submit">
 </fieldset>
</form>

のように書くと、

日記内検索

となり、検索フォームの説明がつけやすくなります。スタイルシートで指定してやれば、「fieldset」や「legend」の部分の見栄えも変えられます。

補足:フォームタグについて

フォームというのはブラウザ上からメールソフトを立ち上げたり、アンケートを記入したり、検索したりといった動作を閲覧者が行えるようにするものです。その動作は、プロバイダーやはてなダイアリーのような“webサーバー”が設置している、「CGIプログラム」というものを通して行われています。なのでタグで動作を指定してみても、動作を要求したサーバーがその動作のCGIを提供していなければ利用できません。

はてなダイアリーではフォームを使える場面が少ないと思いますが、もう少し詳しく知りたい方は下記参考リンクなどをご覧ください。


画像を貼ってみるに戻る← | →ヘッダやフッタに何かを入れるに進む

トラックバック - http://d.hatena.ne.jp/sugio/10050125