図1

図2

iPhone, iOSのアイコンの特徴

• 角丸
• グロス（上半分の反射）効果がある。グロスはグラデーションが効いている。
• 上ボーダーが白(反射)
• 下ボーダーが黒(影)
• うっすらとアイコンの影が背面にある
• タップしたとき、アイコンの明るさが暗くなる(dark light効果)

CSS3でやること

下の画像をiPhone,iOS風のアイコンに近づけるために、上の各特徴を次の方法で再現していきます。

• 角丸: border-radiusを使って角丸を表現する
• グロス: span.grossをアイコン画像に重ね、border-radiusで緩やかなカーブを表現する。また、gradiantを使ってグラデーションを表現する。
• 上ボーダーが白: box-shadowを使って、上ボーダーを白くする
• 下ボーダーが黒: box-shadowを使って、下ボーダーを黒くする
• アイコン背面の影: box-shadowを使って、うっすらとした影を表現する
• タップ時のdark light: グレーで塗りつぶしたspan.dark-lightをアイコンに重ねておき、:activeのとき一定の透過率で表示する

実装方法

HTMLは次のような構成になります。

<a href="#" class="icon">
<span class="gross"></span>
<span class="shadow"></span>
<span class="dark-light"></span>
</a>

• a.icon: アイコン画像表示用
• span.gross: グロス表現用
• span.dark-light: タップ時のdark light効果用
• span.shadow: アイコン背面の影用

スタイルシートは次のようになります。

.icon {
	display: block;
	height: 89px;
	width: 89px;

	background: transparent url('1.png') no-repeat;

	-webkit-border-radius: 10px; /* Safari, Chrome */
	-moz-border-radius: 10px; /* Firefox */
	border-radius: 10px; /* CSS3 */

	-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);
	-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);
	-o-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.7);
	}

.icon:active,
.icon:focus {
	outline: none;
	-moz-outline-style: none;
	}

.icon:active .dark-light,
.icon:active .gross {
	-ms-filter: "alpha(opacity=50)";
	filter: alpha(opacity=50);
	opacity: 0.5;
	}

.dark-light {
	display: block;
	height: 89px;
	width: 89px;
	background: #000;
	cursor: pointer;

	-ms-filter: "alpha(opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;

	-webkit-border-radius: 10px; /* Safari, Chrome */
	-moz-border-radius: 10px; /* Firefox */
	border-radius: 10px; /* CSS3 */
	}

.gross {
	display: block;
	position: absolute;
	z-index: 5;
	width: 89px;
	height: 50px;
	cursor: pointer;
	
	/* Opera */
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDI1NSwyNTUsMjU1LDAuNyk7IiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6cmdiYSgyNTUsMjU1LDI1NSwwLjIpOyIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCBmaWxsPSJ1cmwoI2dyYWRpZW50KSIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIgLz48L3N2Zz4=);
	/* Safari, Chrome */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0.2)));
	/* Firefox */
	background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.2));
	/*Internet Explorer 6,7 and 8*/
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B3FFFFFF, endColorstr=#33FFFFFF, GradientType=0);
	/*Internet Explorer 8 only*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B3FFFFFF, endColorstr=#33FFFFFF, GradientType=0)";

	/* Safari, Chrome */
	-webkit-border-top-right-radius: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-right-radius: 60px 10px;
	-webkit-border-bottom-left-radius: 60px 10px;

	/* Firfox */
	-moz-border-radius-topright: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-bottomright: 60px 10px;
	-moz-border-radius-bottomleft: 60px 10px;

	/* CSS3 */
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	border-bottom-right-radius: 50px 12px;
	border-bottom-left-radius: 50px 12px;

	
	-webkit-box-shadow: inset 0px 2px 1px rgba(255, 255, 255, 0.7); /* Safari, Chrome */
	-o-box-shadow: inset 0px 2px 1px rgba(255, 255, 255, 0.7); /* Opera */
	-moz-box-shadow: inset 0px 2px 1px rgba(255, 255, 255, 0.7); /* Firefox */
	box-shadow: inset 0px 2px 1px rgba(255, 255, 255, 0.7);
	}

.shadow {
	display: block;
	position: absolute;
	z-index: 5;
	width: 89px;
	height: 89px;
	cursor: pointer;

	-webkit-border-radius: 10px; /* Safari, Chrome */
	-moz-border-radius: 10px; /* Firefox */
	border-radius: 10px; /* CSS3 */

	-moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
	
	}

デモとか

対応ブラウザとか

IEなど、CSS3に対応していないブラウザでは、一部の表現が正しく現れません。見た人は、ブラウザのバージョンと見た目を報告してもらえると助かります。

モバイル無線ルータは、バッテリーを積んだ無線ルータだ。外出先などでスイッチをONにすれば、瞬く間にあなたがアクセスポイントになる。モバイル無線ルータにはPHS300やCMR-250などがある。これらは、イーモバイルのデータカードと組み合わせて使う。なので、イーモバイルが使えるところであれば、どこでもインターネットが使えることになる。私はCMR-250を買ったので、少し紹介したい。

買うときにPHS300とCMR-2500のどちらにするか迷った。このうちCMR-250を選んだ理由は、主に次の通りバッテリー面だ。

• PHS300よりバッテリーのもちがいい
• PHS300はUSB充電できないが、CMR-250はUSB充電可能
• CMR-250は予備のバッテリー(NP-120)が手に入る

PHS300は試したことがないが、CMR-250のバッテリーのもちに関しては、実用レベルだと言える。通信を行わないアイドリング状態では、3時間以上起動した。(計測を途中で断念したので、もっと起動するかも)常に通信を行う状態でも、2時間ぐらいは使えるという印象だ。

CMR-250のパッケージは下のようである。

気になるCMR-250の大きさだが、iPod touchと比べると分かりやすい。幅は、touchより長めだが、縦はtouchと同じくらいだ。鞄にいれても荷物にならない程度だ。

USBポートは側面にある。なので、直接データカードを差し込むと、それが出っ張る。これが嫌な人は、角度を変えられるUSBコネクター(AD-3DUSBW9など)を使うといい。

こんな感じで、iPod touchがiPhoneのように、どこでもインターネットが使えるようになる。これで、外出先でtwitterしたり、メールを確認したり、touchのGPS機能をつかって現在地を調べたり、ネットラジオを聞いたり、可能性は無限大に広がると思う。

セッションが落ちるのは仕方がないとする。それでも、IDやパスワードの記憶ぐらいはしておきたい。iPhoneのキーボードでメールアドレスとパスワードを入力するのは、えらく苦痛だからだ。iPhone向けウェブアプリの開発者としては、できるだけユーザの不便を解消してやりたいはずだ。

iPhoneのsafariにはパスワードの記憶機能がない。その代替策として、パスワードなどをcookieに保存する方法が考えるかもしれない。mixiなどもこの方法だ。しかし、上で述べたが、iPhoneのcookieはよく無くなる。そこで、さらにcookieの代替策として、safariのローカルストレージを使う手がある。

ローカルストレージとは？

iPhoneのsafariにはjavascriptで使えるSQLiteが用意されている。ローカルストレージはcookieと違い、有効期限がない。つまり、勝手に消えることは永久的にない。ただし、次のような制約がある。

• データベースはドメインごと。したがって、他のドメインのデータベースを参照することはできない。(逆にできたら、セキュリティ的に怖い)
• データベースの容量は5MBまで。

ローカルストレージの詳細は、分かりやすくまとめている「Safari 3.1 に実装された「Client-side database storage (SQL API)」とは何か？ - IT戦記:」をご覧いただきたい。

では、具体的にローカルストレージを使った、ID・パスワードの記憶機能の実装を紹介する。コード量は多いが、やっていることは大して複雑ではない。

まずは、HTMLは次のように書く。

<form name="login" action="login.php" method="post" onsubmit="return emai_pass_remaind()">
<input type="text" name="email" value="" placeholder="メールアドレス" autocorrect="off" autocapitalize="off" /><br />
<input type="password" name="pass" value="" placeholder="パスワード" autocorrect="off" autocapitalize="off" /><br />
<input type="checkbox" name="save_pass" value="1" />メアドとパスワードを記憶<br />
<input type="submit" value="送信" />
</form>

つぎに、javascriptは次のように書く。

// ロード時に、データベースからメアドとパスワードを取得、フォームにセットする関数
window.onload = function() {
  var db = openDatabase('mydatabase', '1.0');

  db.transaction(
    function(tx)
    {
      tx.executeSql("SELECT email, pass FROM login WHERE id = 1", [],
        function(tx, rs)
        {
          // ロードに成功したら、フォームに値をセット
          document.login.email.value = rs.rows.item(0).email; // htmlspecialchars?
          document.login.pass.value  = rs.rows.item(0).pass;
          document.login.save_pass.checked = true;
        }
      );
    }
  );
}

// フォーム送信時に、メアドとパスワードをデータベースに保存・削除する関数
function emai_pass_remaind()
{
  // フォームから値を取得
  var email = document.login.email.value;
  var pass  = document.login.pass.value;

  /* ここらへんにvalidationの処理を入れたり... */

  var db = openDatabase('mydatabase', '1.0');

  if ( document.login.save_pass.checked == true )
  {
    db.transaction(
      function(tx) {
        // テーブルがあるかな?
        tx.executeSql("SELECT count(*) FROM login", [],
          function(tx, rs) {
            // テーブルあるよ
            if ( rs.rows.item(0) == 0 )
            {
              // テーブル初利用の場合は、追加
              tx.executeSql('INSERT INTO login VALUES(1, ?, ?)', [email, pass], // escape?
                function() {},
                function(error) {
                  alert('save failed: ' + error.message);
                }
              );
            }
            else
            {
              // テーブル初利用じゃない場合は、更新
              tx.executeSql('UPDATE login SET email = ?, pass = ? WHERE id = 1', [email, pass], // escape?
                function() {},
                function(error) {
                  alert('update failed: ' + error.message);
                }
              );
            }
          },
          function(tx, error) {
            // テーブルないよ、テーブルつくろ
            tx.executeSql('CREATE TABLE login (id INTEGER PRIMARY KEY, email TEXT, pass TEXT)', [],
              function() {
              // テーブル初利用だから、追加
                tx.executeSql('INSERT INTO login VALUES(1, ?, ?)', [email, pass], // escape?
                  function() {},
                  function(error) {
                    alert('save failed: ' + error.message);
                  }
                );
              },
              function(error) {
                alert('Database creation failed.' + error.message);
              }
            );
          }
        );
      }
    );
  }
  else
  {
    // チェックボックスにチェックがないときは、テーブル削除
    db.transaction(
      function(tx) {
        tx.executeSql('DROP TABLE login', [],
          function() {},
          function(error) {
            alert('delete failed: ' + error.message);
          }
        );
      }
    );
  }
}

これで、あなたのウェブアプリも、かなり便利になると思う。

とても単純なゲームですが、意外にはまります。ネコのイラストは、のほほんとしていて、なごめます。小さなネコの上に、大きなネコをのせると、「重い！」と言わんばかりに、「ニャー」と鳴きます。それがまた、可愛くもあります。そして、積み上げたネコが崩れるとき、ネコたちがニャーニャーと鳴きながら飛び降りていきます。まるで、「助けてー」と叫んでいるようです。

ゲームの最後には積み上げの記録が、ランキングで出ます。はじめは6メートルが限界かなと思いました。ところが、やっている内に記録が伸びてきました。今のところ、11m40cmが私の最高記録です。11m越えでも、かなりがんばったほうだと思いました。しかし、ネットで探してみると、13mまで積み上げた人もいるらしいです。世界にはもっと上手い人がいるものだと感心しました。みなさんの最高記録はどうでしょうか？

ダウンロードはこちら