携帯用サイトにプルダウンメニューを簡単に作る方法

ちょっと試しに携帯電話専用のサイトを作ろうと思っています。
その携帯サイトにプルダウン式のメニューを作りたくてやり方を調べました。
私はプログラムの知識は0ですからサルでもできる方式の超簡単に使える方法を探しました。
一番わかりやすかったのはエキサイトにある以下の方法です。
http://allabout.co.jp/internet/hpcreate/closeup/CU20020331A/index2.htm
CGIやJavaScriptで作るプルダウンメニュー

JavaScriptの方が簡単そうでしたが携帯の場合はJavaScriptでなくCGIを使うことになるようです。私はCGIもJavaScriptのなんのことかわかっていませんが簡単に携帯サイトにプルダウンメニューを設置できました。

私が上記のサイトを参考にしてやった方法は以下です。
(なお、この方法を使うにはCGIが使えるサーバーとCGIをアップロードできるサーバーが必要です。要は普通のブログサービスだと使えず、レンタルサーバーを借りている人ならOKです。私が使っているサクラのレンタルサーバーは難しい設定は一切なしでできました。またレンタルサーバーを借りていない人のために、プルダウンメニューのCGIを使えるようにサービスを無料で提供している人がたくさんいます。検索するとたくさん出てきます。はっきりいってそういうサービスを使うほうが超簡単なんですが、その人がサービスをやめた時にまた変更とかしないといけないので私は自分のレンタルサーバーを使ってやりました。)

携帯サイトにプルダウンメニューを作る方法

携帯サイトのプルダウンメニューを表示したい場所に相当するHTMLファイル内の箇所に以下のコードを貼り付ける(ただしコピー&ペーストするとダブルクォーテーションが全角になるので、半角に直さないと上手くいきません。)

<FORM ACTION=”jump.cgi”>
<SELECT NAME=”jumpto”>
<OPTION VALUE=”-” SELECTED>移動先を選択</OPTION>
<OPTION VALUE=”page1.html”>Page1</OPTION>
<OPTION VALUE=”page2.html”>Page2</OPTION>
<OPTION VALUE=”page3.html”>Page3</OPTION>
</SELECT>
<INPUT TYPE=”submit” VALUE=”移動”>
</FORM>

「Page1~3」はプルダウンメニューに表示される表示名、そして「page1~3.html」がそのリンク先URLになります。私は「http://~」からアドレスを全部書きました。「移動」という文字がボタンに表示されるので、他の表示にしたいときはここを変更します。

次に、メモ帳に以下のコードをコピーして貼り付けファイル名を「jump.cgi」として保存する。(ファイル名をjump、拡張子をcgiに変更)。

#! /usr/local/bin/perl
$querybuffer = $ENV{‘QUERY_STRING’};
@pairs = split(/&/,$querybuffer);
foreach $pair (@pairs) {
($name, $value) = split(/=/, $pair);
if( $name eq “jumpto” ) {
$jumpto = $value; # 移動先
}
}

if( $jumpto ne “-” ) {
print “Location: $jumpto\n\n”;
}
else {
print “Content-type: text/html\n\n”;
print qq|<HTML>\n<HEAD><META HTTP-EQUIV=”Content-Type” CONTENT=”text/html ; charset=Shift_JIS”>\n<TITLE>移動先が未指定です</TITLE></HEAD>\n|;
print qq|<BODY><H1>移動先が選択されていません。</H1><P>移動先を選択してからボタンをクリックして下さい。</P></BODY>\n|;
}

exit;

保存した「jump.cgi」のファイルを携帯サイトを作ったフォルダにアップロードして保存。ここで注意しないといけないのは、このファイルの属性(パーミッション)を「755」に変更すること。最初そのままにしていたら作動せず、悩みました。属性(パーミッション)を「755」とすることでこのファイルが実行可能になるようです。

以上で完了です。携帯からサイトを見て確認したところプルダウンメニューがちゃんと表示されて機能していました。携帯サイトにプルダウンメニューを作るのは最初は難しそうだなぁと感じていましたが実際にやってみると拍子抜けするほど簡単でした。何事も思い込みは損しますね。

コメントを残す