HTMLのフォームを使う

快適個人用Linuxサーバー構築記

はじめに
サーバーを調達
Virtual Private Server を調達
SSHの設定
SSHでサーバーにログインして、SSHの設定を行う。
iptables
iptablesを設定してファイアウォールをつくる。
認証局
公開鍵の認証局をつくる。
Postfix
SMTPサーバー。
IMAPサーバー
IMAP & POP3サーバー。

ソフトウェアのつかいこなし

はじめに
Linuxのソフトウェア
Linuxで動く便利なソフトの使い方。
PHP
Excel
バーコードの作り方
バーコードを生成するプログラム。
Perlのスクリプト
Perlで開発したソフト。

開発室

はじめに
主にLAPPの話
ZendFramework Application
ZendFrameworkのApplicationを使って開発する。
文献職人
論文の引用文献(Reference)を作成するソフト
Google Logo Collector
Googleのロゴ収集プログラム。
Loading Circle Maker
コンピュータの待ち時間に表示する時計を作成するプログラム。
アクリルアミドゲル作成
希望する濃度のアクリルアミドゲル(SDS-PAGE用)を作成するのに必要な試薬量を計算します。
算数のおけいこ
小学生の算数のおけいこ。

クラスターコンピュータをつくる

雑記帳

はじめに
RAD-tag
ゲノムを二種類の制限酵素で切ったときに適当な長さの断片はどのぐらいとれるのか。
bwa
マッピングツールとしてbwaを使ってみる。
stats
PHPの統計ライブラリstats。

目的

インターネットで調べものをすることが多くなりました。いろんなウェブページでいろんなキーワードやユーザー名をいれると思います。ブックマークからウェブページを探してそこでキーワードをいれてと二度手間だと思いませんか。自分のページをつくってそこから直接検索できると便利です。

要は下のようにGoogleの検索機能を直接使おうということです。

手順

  1. Googleのサイトを開きます。
  2. ブラウザーのソースを表示する機能を使います。InternetExplorerなら「表示」−「ソース」をクリックします。
  3. Windowsを使っている場合メモ帳が起動し、文字化けした文字が表示されていると思います。そこから「<form」で始まるところを探します。メモ帳のメニューの「検索」−「検索」をクリックし、<formと入力して検索します。
  4. 文字列が見つかったら<formより前の部分を削除します。
  5. 同様に「</form>」の文字を探し、</form>より後ろの部分を削除します。
  6. <formの後ろにある「action="/search"」の部分を「action="http://www.google.com/search"」に変更します。
  7. <formの前に「私のページ」と入力し、</form>の後ろに「ここまで」と入力して、名前をつけて保存します(ここではtest.htmlとします)。ファイル名の最後は.htmlにしてください。
  8. test.htmlをブラウザーで開きます。多くの場合開いているブラウザーのウィンドウにファイルをドラッグ＆ドロップで開きます。
  9. たくさんの読めない字の中にテキスト入力欄とGoogleと書かれたボタンが現われるでしょう。検索したいキーワードを入力して、GoogleをクリックすればGoogleの検索結果が表示されるはずです。

解説

test.htmlをもう一度メモ帳などで開きます。この中でGoogleで検索するために必要なのは<form ...>、</form>、<input ...>、<option ...>、</option>、<select ...>、</select>、だけです。それ以外の<...>は全て消して構いません。つまりこれらのタグだけを自分のページにコピーして、前後に適当な文字をつければGoogleの最初の検索ページの代わりをするようになります。

action="送信先"の部分は重要です。送信ボタンが押されたときに送信先にデータが送られます。送信先がhttpで始まっているときには変更の必要はありません。/で始まっているときには元のページのhttp://から最初の/の直前までを追加します。/で始まっていないときは元のページのhttp://から最後の/までを追加します。

<input ...>の中はいくらかは自由に変更できます。変更できないのはname="..."の部分です。他のvalueやsizeは変更できます。いつも決まった値を入力する場合はvalue="値"と変更すると、表示させたときにその値が入っています。

<input ...>の中のtype="..."をtype="hidden"に変更するとブラウザーに表示されなくなります。値の変更が必要ない<input type="text"...>はtype="hidden"に変更すると画面がすっきりしてデザインしやすくなります。

<select ...><option ...></option></select>の部分も<input type="hidden" name="" value="">に変更可能です。<select ...>のname="..."の部分をinputタグのnameに、<option ...>のvalue="..."の部分をinputタグのvalueにします。選択肢が決まっている場合に有効です。

応用

論文の検索機能を自分のページに作りましょう。

  1. PubMedのサイトを開きます。
  2. ソースを表示させます。
  3. <form ...>、</form>、<input ...>、<option ...>、</option>、<select ...>、</select>以外をひたすら消します。
  4. <option ...>、</option>の部分はselectedのあるもの以外すべて消します。そしてinputタグに変換します。
  5. name=""のないinputタグも消します。type="submit"のタグは今回name=""がありませんが、消してはいけません。
  6. onKey="..."とかonClick="..."とかも必要ありません。全部消すとたぶん下のようになると思います。
    7. <form enctype="application/x-www-form-urlencoded" name="frmQueryBox" action="http://www.ncbi.nlm.nih.gov/entrez/query.fcgi?SUBMIT=y" method="POST" >
<input name="WebEnv" type="hidden" value="0jyUjwGeYTsH-zceE6S3g-lvShOB1ZFVIHbhO5TO53uRq0q06lrF">
<input name="CMD" type="hidden" value="" disabled>
<input name="db" type="hidden" value="pubmed">
<input name="orig_db" type="hidden" value="pubmed"></small>
<input name="term" size="45" type="TEXT" value="">
<input type="submit" value="Go" >
<input name="Clear" type="button" value="Clear" >
<input name="cmd" type="hidden" value="Search">
<input name="cmd_current" type="hidden" value="">
</FORM>
  7. これを表示させるとさらに下のようになります。適当な文字列を入れればPubMedで検索がかけられます。毎日同じキーワードをいれて新着論文をチェックしている人はname="term"のinputタグのvalue=""にそのキーワードを入力しておくと文字の入力の必要がなくなります。