futoase

よろしくお願いします。

俺 AdventCalender 14日目

jQuery mobile を使う

  • 使ってスマホ向けページを・・・ということについて手つけたことなかったからやってみる

ドキュメントを見ながら。

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Mobile のテスト</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
  </head>
  <body>
    <div data-role="page">
      <div data-role="header">
        <h1>jQuery Mobileのテスト</h1>
      </div>
      <div data-role="content">
        <p>今日もまた、何もせず一日が終わるのか────</p>
        <p>僕は部屋の窓の外から見える、日暮れに近づく太陽を見つめていた。空はまだ青白い。だがすぐに赤く染まるだろう。冬の昼間は短い。</p>
        <p>僕は悪くない。でも社会も悪くない。結果が、今ここにあるだけだ。明日も、明後日もずっとその結果が変わらないまま同じ世界を形作るのだろうか。</p>
        <p>変化が欲しかった。ただひとつの変化が。部屋で静かに座り本読んだり、ネットでFUDに勤しんだりした。当たり前だけど、変わらなかった。ブログもやっていない。ツイッターもやっていない。僕には、何も、ない。</p>

      </div>
    </div>
  </body>
</html>

Mac OSX(Lion) の Sarafi上で確認

  • 良い塩梅だ

iOS 5.0 の Safari上で確認

  • こちらもいい塩梅だ。タイトルが長いので省略もされる。

f:id:syanbi:20120101182945p:plain

もう少し複雑なページを作成してみる

  • ここに Multipage Template のサンプルがあるので参考に以下の形でhtmlを書いていく。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>悲しみの真実</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"/>
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
  </head>
  <body>
    <!-- top page -->
    <div data-role="page" id="top" data-theme="c">
      <div data-role="header">
        <h1>作品です</h1>
      </div>
      <div data-role="content">
        <a href="#one" data-role="button">悲しみの真実</a>
        <a href="#two" data-role="button">僕という存在</a>
      </ul>
      </div>
      <div data-role="footer" data-theme="c">
        <h4>jQuery Mobile のテスト</h4>
      </div> 
    </div>

    <!-- page one -->
    <div data-role="page" id="one">
      <div data-role="header">
        <h1>悲しみの真実</h1>
      </div>
      <div data-role="content">
        <a href="#top" data-role="button" data-icon="home" data-inline="true">Home</a>
        <h2>真実を、見つけた。</h2>
        <p>朝起きると、僕はいつもMacBook Airを開く。両手で優しく抑えながら開く。メールを確認するためだ。あと2ch。<p>
        <p>メールを確認すると言語処理系コミュニティのMLに投稿された内容のスニペットが少々、楽天からのお知らせが少々。いつものことだ。</p>
        <p>2chを確認する。2chといえど、僕にとっての2chはニュース速報板だ。他の板はどうでもよい。ニュース速報板を開くと今朝発生した地震のスレッドがあがっている。なんてことはなかった。</p>
      </div>
      <div data-role="footer">
        <h4>後悔しても、遅い。</h4>
      </div>
    </div>

    <!-- page two -->
    <div data-role="page" id="two" data-theme="b">
      <div data-role="header" data-theme="b">
        <h1>僕という存在</h1>
      </div>
      <div data-role="content" data-theme="b">
        <a href="#top" data-role="button" data-icon="home" data-inline="true">Home</a>
        <h2>僕って、なんなのだろう</h2>
      <p>僕という存在はか弱い。資産もなければ実力もない。存在自体が無駄なのだ。</p>
      <p>しかし生きていきたい。生きるためにはお金、力が必要だ。だが無いのだ。なければお金、力は付けられない。ジレンマ。</p>
      <p>もうどうでもよくなって反社会的な行動を取ったとしても何も得しない。人に迷惑をかけたくはない。そこだけはよくできているなぁと自らを褒めたくなる。</p>
      </div>
      <div data-role="footer" data-theme="b">
        <h4>あの時はもう戻ってこない。</h4>
      </div>     
    </div>
  </body>
</html>

Mac OSX(Lion) の Sarafi上で確認


iOS 5.0 の Sarafi上で確認

f:id:syanbi:20120101205623p:plain
f:id:syanbi:20120101205629p:plain

今回は直接確認できたほうが良いと思うので

jQuery Mobileは良い。

  • スマホ向けのサイトを構築しなければいけない。タッチ前提のUIで。そしてデザインもUXをある程度考えられて・・・という用途にはぴったり
  • もちろんjQuery Mobileを使えば楽ではあるが、本当のサイトの使いやすさとはなんなのか、ってことは検証しなければいけない
  • ・・・結局適当に構築していけば使いづらいサイトができあがる。使い方はどんなものにも言えるけど大事。

Copyright (c) 2013-2017 Keiji Matsuzaki