しなやか暮らし研究所パソコン処理ホームページの自作スマートフォンサイトの作成

スマートフォンサイトの作成

スマートフォン用のホームページはPC用のホームページと同じ手法、手順で作成することができますが、やはり画面サイズが小さく、指先で操作するスマートフォン用にはいくつか注意することがあります。左のスマートフォン用フォーム入力画面を例にスマートフォン用のコードを見てゆきましょう。
スマートフォン用のコードをハイライトして示します。


<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta name="viewport" content="width=device-width,minimum-scale=1, maximum-scale=1, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="content-style-type" content="text/css" />
<link rel="stylesheet" href="../css/sample.css">
<style type="text/css">
<!--

-->
</style>
<title>スマホ ページサンプル</title>

</head>
<body>
<script language="javascript">
<!--
if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
 document.write('<input type="hidden" name="SCR_type" value="sp" />\n');
 //スマートフォン時に実行したいjs
} else {
 document.write('<input type="hidden" name="SCR_type" value="pc" />\n');
}
-->
</script>

<header id="page-header" style="position: relative; overflow: hidden;">
<h1>応募フォーム</h1>
</header>

<div id="wrapper">
<form name="form1" method="post" action="../t_postmail/postmail.cgi">
<input type="hidden" name="reception" value="関口" />
<input type="hidden" name="email_from" value="form@koushuu-sangyou.com" />
<input type="hidden" name="email_to" value="fumio.sekiguchi@ac.auone-net.jp" />
<input type="hidden" name="return_to" value="../06_01recruit/index.html" />
<input type="hidden" name="subject" value="スマホ ページサンプル" />
<input type="hidden" name="need" value="氏名" /> 	
  
<section class="entry">
<label class="smh_left">氏 名</label>
 <input class="smh_right" name="お名前" type="text" size="20"> 
 </section>

<section class="entry">
<label class="smh_left">年 齢</label>
<div class="smh_right">
 <input  name="年齢" type="number" size="8" maxlength="3">
 <span>歳</span>
 </div>
 </section> 
            <br />
<section class="entry">
<input type="submit" value="送信" style="margin : 1% 10%; width : 30%; float: left; height:44px">
<input type="reset" value="リセット"  style="margin : 1% 10%; width : 30%; float: left; height:44px">
</section>

</form>
<div>

  <p id="pagetop"><a href="#top">Page Top</a></p>
  

<footer id="page-footer">
<!--<p><small>© 2013 しなやか暮らし研究所 <br />-->
    <p><small>© 2013 株式会社光洲産業 <br />
  All Rights Reserved.</small></p>
</footer>

</body>
</html>

5行目：ビューポートの設定

<meta name="viewport" content="width=device-width,minimum-scale=1, maximum-scale=1, initial-scale=1">

スマートフォンの論理的な画面サイズ(横幅)は960pxなので、PCと同等の解像度で一般のホームページを表示することができますが、これでは小さな画面に大きなサイズのホームページが表示することになり、そのままでは見にくくなります。もちろん、ピンチ操作(二本の指を画面に着けたまま開く)で表示を拡大することはできますが、ページごとにこの操作をすることは面倒です。そこでホームページをスマートフォンの物理的な画面サイズに対応させて作り、そのページを閲覧するときにスマートフォンの論理的な画面サイズを物理的なサイズに合わせます。こうすれば、表示内容は少なくなりますが拡大せずにそのままページを閲覧したり、書き込みを行ったりすることができます。

6行目：電話番号の自動発信を停止

<meta name="format-detection" content="telephone=no">

家電製品等が高機能になると、必要以上の自動化によってかえって使いにくくなることがあります。スマートフォンでも電話番号のような数字列を見つけると自動的に電話発信に移ってしまう電話発信リンクという機能があり、思いがけず電話をかけ始めてしまい慌てることがあります。そこで、この指定によって電話発信リンクを無効にします。

19行目～28行目：画面の種類を取得し、以後の自動処理を切り分ける

<script language="javascript">
<!--
if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
 document.write('<input type="hidden" name="SCR_type" value="sp" />\n');
 //スマートフォン時に実行したいjs
} else {
 document.write('<input type="hidden" name="SCR_type" value="pc" />\n');
}
-->
</script>

サンプルに使ったフォーム入力は送信ボタンが押されると指定されたCGIプログラム（Webサーバ上のユーザプログラム）に処理が移ります。そこで、そのCGIプログラムの中でユーザがページを閲覧しているブラウザーに合わせた処理が行えるよう、ブラウザーのタイプ（PCかスマートフォンか）をCGIプログラムに知らせます。

1 2