ガイドグループ世話人の日記

はてなダイアリーガイド

はてなダイアリーガイドの草稿置き場です。この日記へリンクはどこでもご自由にどうぞ。ガイドを作るガイドグループ参加もお気軽に*。グループに入らなくても、ガイドははてなダイアリー市民なら誰でも作成・編集できるものですのでよろしくどうぞ。

※MacOS9でInternetExplorerをお使いの方は、この日記にコメントを書き込もうとすると文字化けすることがあります。対処方法はこちらをご覧ください。

 | 

1901-01-06草稿「フォームを作ってみる」

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

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

日記のヘッダ部にある「日記」検索フォームを、ページ内の他の所に作ってみましょう。「searchformモジュール」で作れるけど、細かい指定ができるのでタグで書いてみます。ヘッダやフッタに

<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="/search">
	<input type="text" name="word" value="" size="20">
	<input type="submit" name="keyword" value="キーワード"> 
	<input type="submit" name=".submit" value="検索">
</form>

のように書くと

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

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

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

カテゴリー名をぜんぶ表示せずに、プルダウンメニューで選べるようにする方法です。sectioncategoryモジュールで作るのが簡単で、これは見出しカテゴリーの保存に対応していて、日記上でカテゴリーを増やしていくと自動的にメニューを追加してくれます。メニューの順は詳細設定画面の『日記のカテゴリー一覧』の欄に記入されている順です。

というわけでそのモジュールは便利なのですが、タグで書く方法もご紹介しておきます。「見出しカテゴリーの保存」には対応しないものの、構造を単純にできたり、メニューに『この日記のカテゴリー』のような初期値を表示できるのが場合によっては使えるので。

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

<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さんのところで詳述されており、サイドバーに設置例もあったのでそちらにリンクして説明に変えさせて頂きます。

そちらでは各々の検索フォームの説明や、<fieldset>、<legend>というタグが使われています。

<form method="GET" name="search" action="http://dictionary.goo.ne.jp/search.php" target="goo">
	<fieldset>
		<legend>goo辞書</legend>
		<input type="text" name="MT" value="" size="10">
		<input type="submit" value="Go!"><br>
		<input id="ej" type="radio" name="kind" value="ej" checked><label for="ej">英和</label> 
	v<input id="je" type="radio" name="kind" value="je"><label for="je">和英</label>
		<input id="jn" type="radio" name="kind" value="jn"><label for="jn">国語</label>
		<input type="hidden" name="FROM" value="USER"><br>
		<a href="http://www.goo.ne.jp/">goo.ne.jp</a>
	</fieldset>
</form>

のように書くと、

goo辞書
v
goo.ne.jp

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

補足:formタグについて

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

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


画像を貼ってみるに戻る← | →日記の中で使うタグ1に進む


 | 

ホームページ制作