iPhone/iPad の Safari で www.icloud.com を利用する

タイトルままです。なんだか、誰得な事を実験するブログみたいになってきました。

通常、iPhone や iPad から icloud.com を開くと「あんたはアプリ使ってアクセスしろよ」的なページへリダイレクトされてしまうのですが、それをスクリプト（ブックマークレット）を実行することにより強引に使ってしまおうというものです。

モバイルデバイスからアクセス出来たところで特に良い事はないばかりか、サイトの構造的に使い難い事この上ないのですが、たった一つだけ iPhone/iPad 単体では出来ないことがあります。 それは、フォトストリームのリセットです。男子たるもの、フォトストリームに上がりっぱなしでは些か具合がよろしくない物の一つや二つはあると思いますが、それが PC 環境無しでリセット出来るだけでも需要はあるのかな、と思い公開しました。 iOS 5.1 で iPhone/iPad からもフォトストリームの写真削除が出来るようになりました。短い命であった。というわけで、このブックマークレットは、なにがなんでも iPhone の小さい画面で icloud.com を操作したいエクストリームタッチパネラー、または iPad 所有者向けです。 強引な手法を用いているため、icloud.com の仕様が変われば使えなくなると思います。

注意：2012-09-21現在、使用不可

なんかいつの間にか使用できなくなってましたね。iCloudのアイコンに通知バッヂが点くようになってからかな？ というわけで、もうこのブックマークレットは使えません。

（2013-01-26 追記）コメ欄で教えていただいたのですが、今でも使えるようです。 手順としては、モバイル端末用の案内ページで一度ブックマークレットを実行した後、ローディングアニメーションがぐるぐる回っている画面でもう一度ブックマークレットを実行すれば、ログイン画面が表示できます。

ブックマークレットの登録方法

以下の「iCloud for Mobile」リンクを開き、適当な名称でブックマーク登録後、URL 先頭の http://t.co/? を削除して保存してください。 慣れている方はコードを直接コピペしてお使いください。

iCloud for Mobile ver.0.1r2 - WTFPL version2
javascript:(function(d)%7B(function(e)%7Bvar%20b=!1,a=d.createElement(%22script%22);a.src=%22//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js%22;a.onload=a.onreadystatechange=function()%7Bvar%20c=this.readyState;if(!b&&(!c%7C%7C%22loaded%22==c%7C%7C%22complete%22==c))b=!0,a=a.onload=a.onreadystatechange=null,%22function%22==typeof%20jQuery&&(c=jQuery,c.noConflict(!0),c(e))%7D;d.head.appendChild(a)%7D).call(d,function(e)%7Bvar%20b=%7B%7D,a=window,c=Math.round(100*(screen.width/980))/100,f;for(f%20in%20a.navigator)b%5Bf%5D=navigator%5Bf%5D;b.appVersion=%225.0%20(Macintosh;Intel%20Mac%20OS%20X%2010_7_3)%20AppleWebKit/534.53.11%20(KHTML,like%20Gecko)%20Version/5.1.3%20Safari/534.53.10%22;b.userAgent=%22Mozilla/%22+b.appVersion;a.navigator=b;a.B&&(a.B.safari=534.53,a.B.android=a.B.iOS=a.B.iPad=a.B.iPhone=a.B.iPhone3=a.B.iPhone4=!1,a.B.mobileSafari=NaN,a.B.mac=!0,a.Browser=a.B);delete%20a.SC;e.ajax(%22/#showlogin%22).done(function(b)%7Be(d.head).contents().remove().end().html(b.match(/%3Chead%5B%5E%3E%5D*%3E(%5B%5Cs%5CS%5D*)%3C%5C/head/i)%5B1%5D);e(d.body).contents().remove().end().html(b.match(/%3Cbody%5B%5E%3E%5D*%3E(%5B%5Cs%5CS%5D*)%3C%5C/body/i)%5B1%5D);e('meta%5Bname=%22viewport%22%5D').attr(%22content%22,%22width=980,initial-scale=%22+c+%22,minimum-scale=%22+c+%22,maximum-scale=%22+c+%22,user-scalable=no%22);history.pushState(null,d.title,%22/#showlogin%22);a.scroll(0,1)%7D)%7D)%7D)(document);

ブックマークレットの使用方法

Mobile Safari にて icloud.com へアクセスすると、自動的に /iphone_welcome/ または /ipad_welcome/ へリダイレクトされますが、その状態で本ブックマークレットを実行します。しばらく待つとローディングアニメーションが表示された画面で再度ブックマークレットを実行すると、小さくて非常に使い辛いログインページが表示されるので、通常通りログインして使ってください（ブラウザのズームレベルうんからかんたら言われますが華麗にスルー）。 iPad や Retina な iPhone でないと、フォントサイズが小さすぎて読めないかもしれません。 また、ページ自体がかなり重く、何かアクションをする度にしばらく待つ必要があります。

Wow! 使い辛い！！

フォトストリームについて

• フォトストリームのリセットは、icloud.com にログイン後、トップページ右上のユーザー名をタップすると表示されるダイアログから行います
• フォトストリームをリセットしても、iCloud 上の写真が消えるだけで、直様モバイルデバイスから写真が消えるわけではありません。リセットした後、設定 » iCloud にてフォトストリームをオフ＆オンする必要があります

何をやっているか

興味のない方は読み飛ばしておｋです。このブックマークレットが何をやっているかをメモ書きします。

• まず、外部 CDN から jQuery ライブラリを読み込みます。jQuery 無しでもコーディング量はさほど変わらない気がしますが、後述する XMLHttpRequest 取得した HTML 内のスクリプトを実行する必要があったため、jQuery に頼ることにしました（当初は zepto.js を使おうとしたが、zepto.js の append や html の実装はスクリプト実行処理が組み込まれていない模様）
• /iphone_welcome/ を開いた時点でブラウザ判定用の JavaScript オブジェクトが作成されているので、そのプロパティを上書きします。強引にデスクトップ版 Safari という事にしています。ついでに window.navigator オブジェクトそのものもダミーのオブジェクトで上書きします（汚染だけど、ライフサイクルはこのセッションだけだし別に良いかなと）
• www.icloud.com/ を $.ajax で取得し、現在のページの head/body 内容を置き換えます。サーバーサイドでの User-Agent による振り分けはしていないようですね
• そのままの表示スケールでは操作不能なので、meta name="viewport" を書き換え、表示サイズを調整します
• history.pushState() を用いて URL を書き換えます