GAEpでiPhone向けWebアプリを作る (2)iPhoneっぽくなるスタイルシートを書く

前回の続きです。

iPhoneっぽくなるスタイルシートを書く

ネイティブアプリのように見せる部品ごとのスタイルシートを書いていきます。

以下を説明します。

NavigationBar のように見せる部品スタイル設定
BarButtonItem のように見せる部品スタイル設定
TableView のように見せる部品スタイル設定

テスト用 html を用意する

今回、最終的に作りたい画面はこんな感じです。

特徴は以下です。

ナビゲーションバーがある（最上部のタイトルを表示した領域）
- iOS SDK での UINavigationBar に対応
ナビゲーションバーにはボタンが配置できる
- これはiOS SDK での UIBarButtonItem に対応
ナビゲーションバーには"戻る"ボタンも配置できる。
一覧をリスト状に表示できる
- これはiOS SDK での UITableView (style は UITableViewStyleGrouped ライク)に対応。

テスト用に以下のような html ファイルを作成します。

test.html

<html >
  <head>
    <title>ToDo list</title>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="viewport" content="user-scalable=no, width=device-width" />
    <link rel="stylesheet" href="css/iphone.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/todo.css" type="text/css" media="screen" />
  </head>
  <body >
    <div id="list" >
      <div class="navBar">
        <h1 ><a href="#">Here is title</a></h1>
        <a class="barButton right" href="#">Next</a>
        <a class="barButton back" href="#">Back</a>
      </div>

      <ul  >
        <li >
          <a href="#">List item 1</a>
        </li>
        <li >
          <a href="#">List item 2</a>
        </li>
        <li >
          <a href="#">List item 3</a>
        </li>
      </ul>
    </div>
  
  </body>
</html>

css ファイルにはなにも書いていません。
これを iPhone で見ると次のようになります。

paddingとmarginをゼロに

paddingとmarginはどうせ各部品で細かく調整設定します。なのではじめからゼロにしておきます。
ついでに全体のフォントは設定しておきます。

iphone.css内の最上部

 * {
  margin: 0;
  padding: 0;
}

body {
  font-family: Helavetica;
  font-size: 14px;
}

iPhone で見ると次のようになります。

NavigationBar のように見せる部品スタイル設定

次にナビゲーションバーのスタイルを設定します。test.html 内の navBar クラスを指定した div タグへのスタイル指定です。

iphone.css内

.navBar {
  background-color: #ccc;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
  border-color: #666
  border-style: solid;
  border-width: 0 0 1px 0;
}

.navBar h1, h1 a{
  color: #222;
  font-size: 20px;
  font-weight: bold
  margin: 0 auto;
  padding: 10px 0;
  text-align: center;
  text-shadow: 0px 1px 0px #fff;
}

ポイントは、以下といったところです。

.navBar で background-image にてグラデーション指定
.navBar h1 にて
- font-weight でボールド
- text-align でセンター寄せ
- text-shadow で白色影

iPhone で見ると次のようになります。

BarButtonItem のように見せる部品スタイル設定

続いて、ナビゲーションバー上の BarButtonItem 状の部品のスタイル指定を行います。test.html 内の barButton クラスを指定した a タグへのスタイル指定です。

barButton では、ふたつのクラスを指定することでボタンを表現します。

a class="barButton right" : ナビゲーションバー上の右端ボタン
a class="barButton left" : ナビゲーションバー上の左端ボタン
a class="barButton back" : ナビゲーションバー上の左端戻るボタン

iphone.css内

.navBar .barButton {
  position: absolute;
  top: 7px;
  max-width: 64px;
  overflow: hidden;
  text-align: center;
  line-height: 28px;
  text-overflow: ellipsis;
  text-decoration: none;
  border-width: 0 5px;
  padding: 0 3px;

  color: #fff;
  text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
  -webkit-border-image: url(../img/button.png) 0 5 0 5;
}

.navBar .barButton.back {
  border-width: 0 8px 0 14px;

  -webkit-border-image: url(../img/back_button.png) 0 8 0 14;
}

主な注意点は以下。

position は absolute
max-width と text-overflow でテキストが入り切らなかったときの対策
webkit-border-image で別途用意したボタンの画像と戻るボタンの画像を指定
- 戻るボタンの場合、左右の幅指定を別にしていることに注意

続いて、ボタンを左右に指定する補助クラスを定義しておきます。

iphone.css内

.right {
  right: 6px;
}

.left {
  left: 6px;
}

.back {
  left: 6px;
}

これで iPhone で見ると次のようになります。

TableView のように見せる部品スタイル設定

続いて、UITableView のように見せる部品スタイルを設定していきます。
UITableView には、UITableViewStylePlain と UITableViewStyleGrouped のふたつのスタイルがありますが、今回設定するのは UITableViewStyleGrouped の方にします。

まずは、ul タグを以下のように設定します。ul のアイテムの項目マークをなしにし、margin を指定しておきます。

iphone.css内

ul {
  list-style: none;
  margin: 10px;
  padding: 0;
}

次にリスト項目の設定です。

iphone.css内

ul li a {
  background-color: #ffffff;
  border: 1px solid #999999;
  color: #222222;
  display: block;
  font-size: 17px;
  font-weight: bold;
  margin-bottom: -1px;
  padding: 12px 10px;
  text-decoration: none;
}

ここで注意すべき内容は、以下です。

display: block; でブロック表示指定
text-decoration: none; でリンク下線は消しておく

また、UITableViewStyleGrouped の場合、リスト項目の1番目の項目の左上と右上の角、および、リスト項目の最後の項目の左下と右下の角、が丸くなっています。これを以下のように指定します。

iphone.css内

ul li:first-child a {
  -webkit-border-top-left-radius: 8px;
  -webkit-border-top-right-radius: 8px;
}

ul li:last-child a{
  -webkit-border-bottom-left-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
}