Travellers Tales

iPhone/iPod touch 専用の簡易フィードリーダー reader.mac.com

iPod touch/iPhone で RSS/Atom フィードを開くとリダイレクトされる reader.mac.com は、シンプルなフィードリーダーです。

フィードを表示するためだけのリーダー（ビューアの方が近い？）であって、アグリゲータ (aggregate = 集める) のように登録されたフィードを購読したり管理する機能はありません。リンク等からアクセスしたフィードを見やすいように整形して表示するのみの、その場限りのものです。その際の URL は以下のようになります。

• http://reader.mac.com/mobile/v1/(Feed URL)

例えば、当ブログのフィード

• http://feeds.travel-lab.info/travellers

にアクセスすると、`

• http://reader.mac.com/mobile/v1/http%3A%2F%2Ffeeds.travel-lab.info%2Ftravellers

に飛ばされて、フィードの内容が表示されます。（右の画像は表示例）

以下、reader.mac.com の表示設定をもう少し詳しく見てみます。Apple 自身による iPhone/iPod touch 用アプリケーションなので、参考になることがあると思います。 #### User Agent を変更して reader.mac.com のソースを確認

reader.mac.com はユーザエージェントを見ているので、過去記事で説明した user-agent を変更する方法を参考に、iPhone・iPod touch を名乗ります。

HTML ソースの head 要素部分を見ると、もはやおなじみの(?) viewport の設定があります。iPhone/iPod touch 専用インターフェイスを作る際には、デバイスの表示領域に合わせて width を 320px にするのは常套手段です。ここでは、横幅の他にも、文字の最大拡大率が 1.6倍までに設定されています。

<meta name = "Viewport" content = "maximum-scale=1.6,width=320" > 

その他に、外部 JavaScript や CSS が設定されています。

• http://reader.mac.com/mobile/_staticwrz/scripts/reader.js
• http://reader.mac.com/mobile/_staticwrz/styles/reader.css

reader.mac.com のスタイルシート

以下がフィードの各アイテムの HTML を簡略化して抜粋したものです。

<div class="item">
    <div class="itemTitle">
        <a href="javascript:updateLayout(true);displayItem(1,true);">フィードのタイトル</a>
        </div>
    <div class="itemSubheading"><div class="itemDate">Today, 10:10 PM</div></div>
    <div class="textTop">内容1行目</div><div class="textBottom">内容2行目</div>
</div><center><div class="hr_div"></div></center>

reader.css の中で、#title や .itemSubheading、.textBottom 等には

text-overflow:ellipsis;

が設定されています。

text-overflow が overflow になっているので、テキストが領域に収まらない場合、三点リーダ「…」が表示されます。（text-overflow は FIrefox 等 Mozilla 系ではサポートしておらず、IE ではサポートされていますが、Safari 3 系でもサポートされたようです。）

img {
    max-width: 280px !important;
    display : block;
}

画像がインラインではなくブロック要素として表示されるように指定されています。また、最大の横幅を 280px までに制限しています。iPod touch/iPhone の小さな画面（320×480）を考慮した結果なのでしょう。

WebKit 独自の CSS プロパティ

WebKit 特有（もしくは先取り実装）のプロパティがいくつか見られます。

.itemSubheading

display: -webkit-box;
-webkit-box-align:baseline;
-webkit-box-orient:horizontal;
-webkit-user-select:ignore;

.itemSource

-webkit-box-flex:20;

各プロパティについては、このあたりが参考になるでしょうか。

以下は XUL についての解説ですが、こちらも参考になるのでは。

複数の子要素を含むコンテナ要素。 box の orient 属性が horizontal にセットされていると、子要素はbox内で左から右の順に配置される。 orient が vertical だと、子要素は上から下の順に配置される。 子要素が重なることはない。 デフォルトの配置方向は horizontal。

align

型: one of the values below

align属性は、boxのサイズが中の合計サイズより大きいときのboxの子要素の並び方を定義します。 boxが水平のとき、子がどのように垂直に並ぶのかを定義します。boxが垂直のときは、子がどのように垂直に並ぶかを指定するために使われます。 The pack attribute is related ot the alignment but is used to specify the position in the opposite direction. You can also specify the value of align using the style property -moz-box-align.

orient

型: 下記の要素のうちひとつ

ある要素の子要素が縦方向なのか、横方向なのを判別するのに使われる。デフォルト値はその要素に依存する。-moz-box-orientというCSSの属性も同じように使えます。

• horizontal:ある要素の子要素が、XULのソースの中で、お互いが横に並んでいる。
• vertical:ある要素の子要素が、XULのソースの中で、お互いが縦に並んでいる。