iRSSの日記

はてなダイアリーiRSSの日記の続き

GWの渋滞状況をiPhoneで確認したい

2010/7/19追記
↓AITSの渋滞情報自体がみれなくなりました。残念。
なので、以下のページも動きません。

AITSというリアルタイムの渋滞情報を見れるサイトがあるのですが、こちらのページをiPhoneSafariで見やすくしたとおもい、ページつくってみました

おさまりいいですよね。
首都高、関東高速、阪神高速、関西高速
の4エリアだでけですが、シンプルにみれます。

http://rss.rdy.jp/t/

HTML的には、簡単ですが、ポイントは

<meta name="viewport" content="width=245" />

の一行これで、iPhoneの画面にすっきりと収まります。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-jp" lang="ja-JP">
    <head>
        <meta name="viewport" content="width=245" />
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>渋滞情報</title>
        <style type="text/css" media="all">
            h4 { padding-top: 8px; margin-bottom: 2px; }
        </style>
    </head>
<body style="font-size:8pt">
    <p ><a href="http://www.atis.jp/tnavi/service.html">AITS(アティス)交通情報</a>で配信されている画像をiPhoneで見やすくしてみました。</p>

    <h4>首都高速</h4>
    <img src="http://open.atis.co.jp/atcon/prv/b_hw-syuto.png"><br />
    <span style="color:red"></span>:渋滞
    <span style="color:yellow"></span>:混雑 止:通行止め ×:事故 閉:入口閉鎖

    <h4>関東高速</h4>
    <img src="http://open.atis.co.jp/atcon/prv/b_jh-kanto.png"><br />
    <span style="color:red"></span>:渋滞
    <span style="color:yellow"></span>:混雑 止:通行止め ×:事故 閉:入口閉鎖

    <h4>阪神高速</h4>
    <img src="http://open.atis.co.jp/atcon/prv/b_hw-hanshin.png"><br />
    <span style="color:red"></span>:渋滞
    <span style="color:yellow"></span>:混雑 止:通行止め ×:事故 閉:入口閉鎖

    <h4>関西高速</h4>
    <img src="http://open.atis.co.jp/atcon/prv/b_hw-hanshin.png"><br />
    <span style="color:red"></span>:渋滞
    <span style="color:yellow"></span>:混雑 止:通行止め ×:事故 閉:入口閉鎖

    <p>

    注意:このページは、ATIS様のサービスではありません。個人的に見やすくしているだけです。リンク切れ等で見れなくなる可能性もあります。ご注意ください。</p>
    <p>有料携帯版もありますので<a href="http://www.atis.co.jp/mobile/index.html">こちら</a>でチェックしてみてください</p>
</body>
</html>