Google ReaderのUIをMacアプリ風に

「Pure Reader」はGoogle Readerのスキンを変更するChrome拡張機能です。

ReederというMacのクライアントソフトがあるのですが、 このアプリのWeb版のようなインターフェイスになっています。

※Reederについてはこちらの記事に詳しく紹介されています。
Googleリーダーを読みやすくするアプリ『Reeder』のMac対応のドラフト版が出ました！ : ライフハッカー［日本版］

見やすいアイテム表示

エントリの表示画面はとても見やすい画面で、各リンクは上部に配置されているため操作性もとても良くなっています。

基本はWeb版のGoogle Readerなので、ショートカットなども今まで通りに使えます。

Safari・FIrefox版もあります

Safariでも同じ拡張機能を使用できるようになっています。
お好みのブラウザでできますね！

Safri版はリンク先のダウンロードボタンから、その他のブラウザはFor Other Browsersにダウンロードリンクがあります。

RSSリーダーにGoogle Readerを使っている方は使ってみてはいかがでしょうか。

Safari5になって拡張機能に対応するようになりましたが、先日AppleからSafari機能拡張を紹介するギャラリーサイトが公開されました。

本日は拡張機能の設定の仕方を詳しく紹介します。

まず始めにメニューから環境設定を開きます。
詳細タブでメニューバーに”開発”メニューを表示にチェックを入れます。

メニューバーに開発メニューが表示されるようになりますので、
開発→機能拡張を有効にするにチェックを入れます。

これで拡張機能がインストールできるようになりました。

拡張機能をインストールする方法ですが、サイトからファイルをダウンロードして実行する事でインストールダイアログが表示されるようになります。

例えばですが、メニューバーにリロードボタンを表示するReload Button Extensionをインストールしてみます。

まずはサイトにアクセスし、ファイルをダウンロードします。

ダウンロードされました。

ファイルをダブルクリックすると、確認のダイアログが表示されるのでインストールを選択します。

これでインストールされました。

公式ギャラリーからダウンロードする場合には Safari 5.0.1が必要になりますので注意してください。
（Mac OS X 10.6 が必要です）

他にも便利そうな拡張がたくさんあります。興味のある方はぜひ使ってみてください。

「10+ useful code snippets to develop iPhone friendly websites」というエントリーよりiPhone/iPod touch用サイトを作成する際の10のTipsのご紹介。

サーバーサイドでの振り分け処理や、画面の向きの取得方法などなど、いつか使うかもしれないのでメモ的にエントリーです。

詳しくは以下

JavaScriptでリダイレクト

iPhone/iPod touchの場合に専用のページにリダイレクトさせます。サーバーサイドのスクリプトを使用できない場合に。

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";
    }
}

PHPでリダイレクト

リダイレクトさせるのは上記と同じですが、こちらはPHPを使用しています。

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
    header('Location: http://yoursite.com/iphone');
    exit();
}

viewportで画面サイズを指定する

head 要素にタグを入れるだけで、横幅を最適化する事ができます。
viewportについての説明は@ITに詳しく載っています。

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

独自アイコンの指定

以下のコードをヘッドに入れる事で、ブックマークされた際にホーム画面にアイコンを表示させる事ができます。
サイズは 57x 57pxでpng形式で保存する必要があります。

<rel="apple-touch-icon" href="images/template/engage.png"/>

自動でフォントサイズが調整されるのを防ぐ

画面の向きを変えた際に勝手にフォントサイズが調整されます。結構小さくなりすぎる場合などがあるため、変更されないようCSSで指定します。

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

iPhoneの向きを取得

iPhoneの画面の向きを取得します。
このサンプルでは、画面の向きによってCSSを切り替えます。

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);
}

iPhone/iPod touchにだけ適用するCSS

メディアタイプを指定する事でiPhone/iPod touchにだけCSSを適用させる事ができます。

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

画像をiPhone用に最適化する

iPhone/iPod touchの画面は最大で480pxまで表示する事が可能です。480pxより大きい画像の場合、それ以上大きくならないようにします。

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

デフォルトでツールバーを隠す

少しでも画面を大きく使えるよう、初期状態でツールバーを非表示にします。

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

特殊なリンクの指定方法

電話やSMSを起動させる事ができます。

<a href="tel:12345678900">Call me</a>
<a href="sms:12345678900">Send me a text</a>

hoverを適用させる

マウスオーバーという概念が無いので、JavaScriptで指の位置を取得します。

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);
}

上記のコードを追加する事で、CSSのhover属性が使用できます。

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