memo-iphone

2011-01-05T17:34:40+09:00

iPhone/iPod touchむけメモ

iPhone は、電話番号のように見える番号を自動的に検知し、ユーザーがその番号をタップして電話を掛けられるようにしています (iPod の場合、このような自動検知は行いません)。ページ上でこの機能をオフにするには、というメタタグを使用します。この機能をオフにした場合、電話番号を555-1234という形式の HTML リンクに変換することで、該当する電話番号を明示的に識別することができます。

Google Maps のページにリンクすると、Mobile Safari が終了して Google Maps アプリケーションが起動されます。同様に、YouTube ページにリンクすると YouTube アプリケーションが起動されます。

JavaScript 関数の alert、confirm、prompt は iPhone で有効に機能しますが、showModalDialog は機能しません。iUIでは、dialog という CSS クラスがダイアログの振る舞いを模倣して、画面最前面のオーバーレイとして機能します。

現時点では、Flash、Java™ アプリケーション、WML (Wireless Markup Language)、SVG (Scalable Vector Graphics)、XSLT (Extensible Stylesheet Language Transformation) はいずれも Mobile Safari ブラウザーで機能しません。ファイルのアップロードとダウンロードはサポートされていませんが、iPhone ファームウェアの 2.0 バージョンでは違ってくる可能性があります。マウスオーバー・イベント、ツールチップ、およびホバー・スタイルも同じく機能しません。

GIF (Graphics Interchange Format)、PNG (Portable Network Graphics)、TIFF (Tagged Image File Format) の画像は、デコードしたときに 2 メガピクセル以下でなければなりません。2 メガピクセルを超える JPEG 画像はサブサンプリングされて小さくなるので、最大 32 メガピクセルが限度です。個々のテキスト・ファイルやメディア・ファイルは、10 MB 未満でなければなりません。

iPhone と iPod touch ではどちらも、ユーザーが特定の Web アプリケーションを表すアイコンをホーム画面に配置することができます。アプリケーションにカスタム・アイコンを指定するには、PNG ファイルを /apple-touch-icon.png に配置します。アイコンは、角が直角の 57 x 57 ピクセルにする必要があります。ネイティブ・アイコンが使用する光沢は含めないようにしてください。iPhone または iPod-touch のオペレーティング・システムが、自動的に角を丸くして光沢エフェクトを追加します。

http://www.catswhocode.com/blog/10-useful-code-snippets-to-develop-iphone-friendly-websites

iPhoneとiPodをJavaScriptで判定

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
  if (document.cookie.indexOf("iphone_redirect=false") == -1) {
    window.location = "http://m.espn.go.com/wireless/?iphone&;i=COMR";
  }
}

Set iPhone width as the viewport
Insert an iPhone specific icon

Prevent Safari from adjusting text size on rotate

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
  -webkit-text-size-adjust:none;
}

Detect iPhone orientation

window.onload = function initialLoad() {
    updateOrientation();
}

function updateOrientation(){
    var contentType = "show_";
    switch(window.orientation){
        case 0:
	contentType += "normal";
	break;

	case -90:
	contentType += "right";
	break;

	case 90:
	contentType += "left";
	break;

	case 180:
	contentType += "flipped";
	break;
    }
    document.getElementById("page_wrapper").setAttribute("class", contentType);
}

Apply CSS styles to iPhones/iPods only

@media screen and (max-device-width: 480px){
    /* All iPhone only CSS goes here */
}

Automatically re-size images for iPhones

@media screen and (max-device-width: 480px){
    img{
        max-width:100%;
        height:auto;
    }
}

Hide toolbar by default

window.addEventListener('load', function() {
    setTimeout(scrollTo, 0, 0, 1);
}, false);

SMSリンク
```
Send me a text
```

「:hover」もどき: iPhoneはマウスないけど、こうすれば指先がリンクに乗ったら色が変わるとかできる

var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
   myLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
   myLinks[i].addEventListener('touchend', function(){this.className = "";}, false);
}

a:hover, a.hover {
    /* whatever your hover effect is */
}

上記では:hoverをエミュレートしてリンクの色を変える方法を紹介してるが、iPhoneだけを考えるなら、タップされたところをハイライトするようなCSS attributeが用意されているので、それを使ったほうがいい
```
* {
    -webkit-tap-highlight-color: rgba(160,160,160,0.70);
}
```

ホーム画面のアイコンから起動されたかどうかを検知: Google Buzzや、リニューアルしたiPhoneむけYahoo! Japanでは、Safariでアクセスしたとき「キミもこのページをアイコンとしてホーム画面に置かないかい?」という誘導がでる。もちろんこの誘導はホーム画面のアイコンから起動したときは出ない。つまりホーム画面のアイコンから起動したかどうかの検出が必要。それはこう書けばできる。ちなみにホーム画面のアイコンから起動したSafariのインスタンスはURL表示がなくなってしまう。
```
〜に以下を入れておいて、
 
```
```
   
```

iPhoneを含むWebKit系のブラウザでは CSS アニメーションがサポートされていて便利なのではあるが、iPhoneの場合は3D系のアニメーションとフォームの入力動作と相性がわるいようなので、ユーザビリティを考慮した場合利用には若干の注意が必要。具体的には、3D系アニメーションを利用するために以下のようなエントリをCSSに追加すると、このようなアトリビュートが有効になったページにあるインプットフォームへの入力は体感でわかる程度にレスポンスがわるくなる。
```
body {
    -webkit-transform-style: preserve-3d;
}
```

動的なWebサイトなど、同一URLで多様なコンテンツを提供するサイトの場合、Safariのブラウザバックで前の画面に戻ったとき、の value が前の画面のままになっていることがある。たとえば foo.cgiでで同じく foo.cgi にPOSTで遷移して、遷移先の foo.cgi にが含まれていた場合、ブラウザバックすると「投稿する」ボタンが現れるべきだが「取り消す」ボタンとして見えてしまう。
25KB以上のファイルはキャッシュされない

keitaircの仲間たち

2009-09-25T13:45:28+09:00

おもに携帯端末向けにirc web interfaceを提供するソフトウェア

mobirc

http://wiki.github.com/tokuhirom/mobirc/readmeja
keitaircをリファクタリングしてかっこよくなったもの

mobilirc

http://sourceforge.net/projects/mobilirc/
mobilircはモバイル機器のためのj2meのmidlet ircのクライアントです。MIDP-2.0を使用します。このプロジェクトはjmIrc v0.95 (juhovhにによる http://jmirc.sourceforge.net/ )に基づいています。

jmIrc

jmIrc is a J2ME MIDlet allowing ie. cell phone owners to use IRC wirelessly. It should work on any device supporting MIDP 1.0 and also supports connecting through HTTP proxy server on phones that don't support the Java socket API.
http://jmirc.sourceforge.net/

imode.plm

plum 2.33に携帯端末むけWebインタフェースを与えるプラグイン
http://mrmt.net/linux/plum/
もう昭和はおわったので、さすがにいまこれを使いはじめるのはやめましょう

いろんなkeitairc

2009-09-25T01:03:08+09:00

いろんなかたがkeitaircを改造したりパッチを作ったりしてくれてます。ここにメモってこうかなと思います。自由にいろいろ書いてくださってかまいません。

これイイな、と思った機能やコードはありがたくいただくこともあります。

その際は、こんにちは! ってことでメールでご相談することもありますし、連絡先がよくわからない場合、なんかコードやパッチが流れてきた場合は無連絡でいただくこともあります。どちらにせよ、keitaircはGPL2ベースのコードなので、その派生物をさくっといただくことには問題はありません。笑顔でだまって頂きます! ですね。

http://www.clovery.jp/dist/keitairc/

ゆきのんさん版の keitairc を多少変更したものです。
リンクURLにモバイル用に変換するためのプレフィックスを付ける機能
mod_proxy でも問題が出なさそうな utf8 の URI を送出します。
チャンネルごとにトピックやニックリストを見られます。
- 「チャネルごとのトピック」は要るかなぁ。というかこっちのほうが仕様がきれいかもしれない。
ログで見える行とは別にバッファをもっており、ページで戻ってログ読みができます。

ほかにもいろいろあるけどいずれ

rules-cvs-branch

2009-01-03T09:45:56+09:00

cvsタグ/ブランチ命名規則

とりあえず書いてみた。 (もりもと 2009/1/3)

というか時代は subversion (のもっと先) だよね本当は

branch

MAINは別として

上記tag規則に「-branch」をつけたもの。
- 「タグ名_branch」としたほうが矛盾なくていい気がする。

keitairc Wiki