2012年10月31日

CGIで携帯電話用のformを作るときの注意(2)

 自分自身の備忘録として書きます。

 先日、「CGIで携帯電話用のformを作るときの注意」について書きましたが、次の課題はスマホ用の入力ページでした。PC/携帯/スマホのそれぞれに対応したページを作ればそれで済むはずなのですが、今回苦労をしたのは、フォームに入れたデータを処理する「確認画面」「送信完了画面」はCGIはたった一つで共通した処理をしつつ、端末への表示は使い分けをしなければいけないということでした。
 最終的に次のようなことをやってみました。(最初の入力画面で説明していますが、これに共通したデザインの、「確認画面」「送信完了画面」で同じ手法を使いました。)

form1.gif


 上の画像は、入力フォームのページを、PCで表示しています。入力の経過を示す「1 必要事項入力 ・・・」というバーの画像が非常にアンバランスになっています。

 どうしてこの画像が「横幅一杯」になっているかというと、入力の経過を示すバーの画像を、
<img src="img/process3.gif" width="100%">
と、width="100%"という、あまり使ったことのない記述をしているのです。これによって大きすぎず、小さすぎずの、「画面の幅ぴったりの」画像になります。
 PCでは画面サイズに応じて「大きすぎず」どころか「ばかでかい」画像になってしまいますが、今回は<iframe>で幅を制限したので違和感のないサイズに収めることができました。

 ただしこのままだと、スマホでは「画面ぴったり」ではなく、オリジナルサイズの画像表示をするため、横スクロールをすることになってしまいます。

 そこで、HTMLファイルの先頭に
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://...">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=$jcodeset[$jcodeset]">
<meta name="viewport" content="width=device-width">
というふうに、見慣れない1行(赤字の行)を加えます。元々はiPhone用に用意された物らしいのですが、Adndoidでも機能しています。「ディバイスの横幅に、表示の横幅を合わせる」という機能のようです。
 これによって、スマホでは無駄な左右のスクロールがなくなりますし、画像のサイズも「ぴったり」になります。

form2.gif


 ↑写真をとるのが面倒だったので、パソコンで幅の狭いスマホ画面をシミュレーションしました。実際のスマホでもこれに近いイメージで表示されます。

 スマホはこれでうまく表示されますが、携帯電話ではバーの画像をうまく処理できません。それで、実際には、次のような記述にしてみました。

<script type="text/javascript">
<!--
document.write ('<img src="img/process3.gif" width="100%">');
// -->
</script>

<noscript><center>入力>確認><font color="red">送信</font></center></noscript>
<br /><br />

 つまり、
1 JavaScriptを使えるスマホでは、
<img src="img/process3.gif" width="100%">
により、画像を表示し、
2 JavaScriptを使えない携帯電話では、
<center>入力>確認><font color="red">送信</font></center>
により、文字により入力の経過を示します。

from3.jpg



 ということで、今回新たに使ったタグは、
<meta name="viewport" content="width=device-width">

<img src="img/process3.gif" width="100%">
の組み合わせでした。





 
posted by kewpie at 08:06| Comment(0) | TrackBack(0) | ファイル作成
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/59678691
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
コメントの投稿について
○お名前とコメント欄の記入は必須です。
○メールアドレスは任意です。記入されても公開はされません。管理人のみに知らされます。
○スパム防止のため、
・ホームページアドレス欄への記入はできません。
・コメント欄にURLは記入できません。
・スパムと思われる語を記入できません。
 これらをしようとすると、最終的に投稿完了できません。
○投稿完了後に、管理人の判断でスパムと判断した投稿は削除させていただきます。