clmemo@aka

Blogger のテンプレートには、PC 用のウェブ・ブラウザーで使う「普通」のテンプレートと、モバイル用のウェブ・ブラウザーで使う「モバイル」版テンプレートの二種類がある。

モバイル版テンプレートは主に iPhone を始めとしたスマートフォンのブラウザーに適用される。モバイルで見るには邪魔なサイドバーが消されたり、ブログのトップ画面ではブログ記事がスニペット表示されるなど、モバイル向けの工夫が凝らされている。

欠点と言えば、サイドバーテンプレートのカスタマイズに自由度が小さいことか。

iPad での表示

数か月前から、iPad の Safari で Blogger ブログを見ると「モバイル版」の画面が表示された。iPad は画面が広いので、モバイル版のテンプレートを適用する必要があると思わない。ぼくは自身のブログを含めいくつかの Blogger ブログを見てみたけれども、どれも「モバイル版テンプレートは逆に見づらくなっていた。

それが数日前から、iPad の Safari で見る場合でも「普通」のテンプレートが使われる様になった。つまり、元に戻った。

Blogger ブログを iPad で見るなら、やっぱり「普通」のテンプレートの方が見やすい! ありがたい。

iPhone の Safari で、時々、今見ているページのソースコードが見たくなることがある。で検索してみると、いろんな人がブックマークレット (ブックマーク) を作ってた。一つリンクを張っておく。

• iphoneのsafariでソース表示する方法iPhone / iPad｜プログラムメモ

せっかくなので、どういうソースコードなのか見てみる。

d=document;
c=d.charset%7C%7C0;
i=0;
o=d.documentElement;
d.write(%22%3Cpre%3E%22+(o.outerHTML%7C%7Co.innerHTML).replace(/&/g,%22&%22).replace(/%3C/g,%22<%22).replace(/%3E/g,%22>%22)+%22%3C/pre%3E%22);
c?d.charset=c:0;
void(document.close());

%XX 表記が読み難い。デコード! (ref. JavaScript escape vs encodeURI: lower ASCII)

d=document;
c=d.charset||0;
i=0;
o=d.documentElement;
d.write("<pre>"
          +(o.outerHTML||o.innerHTML).replace(/&/g,"&amp;")
                                     .replace(/</g,"&lt;")
                                     .replace(/>/g,"&gt;")
          +"</pre>");
c?d.charset=c:0;
void(document.close());

読みやすくなった。

変数 o に全てのドキュメント要素を入れて、それを pre 要素の中に書き出し直すようにしているわけね。その際、&, <, > といったタグの部品を読めるように置換する、と。なるほどねぇ。勉強になった。

iOS 5 になってからだと思うけど、iPad の Safari が「タブ」に対応した。それまで、バックグラウンドで開いてたページには、一旦ページ一覧画面を経由しないとアクセスできなかったものが、このタブ機能のお蔭で一手間なくなった。ページの切り替えが非常にやりやすくなって助かっている。

さて本題。

先日、なにげなくタブをドラッグしたら、タブが動いた!

PC 版の Safari や Google Chrome ではあたり前の機能だけれども、iPad でも出来るとは知らなかった。

これで、比較するページを側に寄せてページ切り替えをより簡便にしたり、よく使うページを一か所に集めたり、ということが可能になる。益々、Safari (in iPad) の使い勝手が良くなった。ありがたい。

Blogger は古いブラウザーを積極的に切るという。2011-08-01 からはモダン・ブラウザーで見ることが前提になるという (古いブラウザーでも一応は読めると思うけど)。目的は HTML5 の普及かな。

• Blogger Buzz: Update on Browser Support

サポートから外れるブラウザーは以下の通り:

• Firefox 3.5
• Internet Explorer 7
• Safari 3

これより古いブラウザーを使っている人は、アップデートの用意を!

先日、CD を探しにブックオフへ行った。iPad 3 日目なので当然持参。

残念なことに、目的の CD は見つからなかった。だけど、興味を引く CD との出会いがあった。そして iPad が活躍した。

ヴィヴァルディの四季

まず悩んだのが、バルヒェットがヴァイオリンを弾くヴィヴァルディの四季。最近ヴィヴァルディの四季にはハマっているので、ちょっと買ってみたい。だけど、バルヒェット! どこかで聞いた名前。だけど、思い出せない。HMV の大キャンペーンにのせられて、何枚か四季を買っているのだけど、そのうちの一枚にバルヒッェトはなかったか?

そこで iPad を取り出した。HMV のサイトにアクセスする。iPhone だと HMV のサイトはどうしようもなく重く、一ページ表示するのにも我慢が出来ないのだけど、iPad だとサクサクとページが表示される。快適。このスピードなら、「注文状況」にアクセスするのも苦ではない。ログインして、最近の購入履歴を見る。バルヒェットはいない! そして、この CD に辿り着いた。

• ヴィヴァルディ：四季、他　カール・ミュンヒンガー

このユーザレビューによると、カール・ミュンヒンガーという指揮者は 3 回「四季」を録音している。その時のヴァイオリン独奏者は、1951 年がバルヒェット、1958 年がクロツィンガー、1972 年がクルカ。ぼくは 2 回目の録音をちょうど注文したところだった。だから、バルヒェットの名前が記憶に残っていたんでせう。

調べてみると、バルヒェットも 3 回「四季」を録音していて、ブックオフでぼくが手に取ったものはミュンヒンガーと録音したものではなかった。ミュンヒンガーの一回目の「四季」といえば、日本ではイ・ムジチと並ぶ名盤といふ。なら、このバルヒェット盤も買いかな? というわけで買い物かごへ。

サイモン & ガーファンクル全集

もう一つ悩んだのが「サイモン & ガーファンクル」(以下 S&G と略) の全集。

S&G の CD は再結成前の分だけで 5 枚。それをボックスにして 3 枚組に収めたというしろもの。これは買いか否か? そこで iPad の再出陣。HMV で調べると、「The Columbia Studio Recordings, 1964-1970」という全集が見つかる。

ところが、ブックオフに置いてあるボックス版は見つからない。どうやら廃盤になってしまったらしい。既に廃盤なものを探すこと。それは悪魔の証明のやうなもので、とても難しい。いくつもの HMV の重いページを渡り歩いて、現行盤との価格も比較して、これはアリと結論した。

あとがき

iPad の Safari は素晴らしい。画面が大きいし、レンダリングは高速で下手なデスクトップのブラウザーに引けを取らない。今まで、iPhone でアクセスしづらいと思っていたページにも、より多くアクセスできるやうになった。

今回の 2 組の CD については、iPad を持っていなかったら安全策を取って買わずにいたことと思う。

iPad は (iPhone から比べて) ウェブの世界を広げてくれた。

Google Analytics がブラウザー・タイプとして Google Chrome を認識するやうになった。

• Google Analytics Blog: "Chrome" now showing as browser type

Google Chrome のリリースが 2008-09-03 で、上記エントリーが 2008-09-04。ほとんど間を合けずサポートした感じ。

さて、このニュースを受けて各ブログがブラウザー・シェアを報告している。お目当ては Google Chrome がどれ程のシェアを取ったか? といふところ。

各サイトのブラウザー・シェア

まずは TechCrunch。

続いて Polar Bear Blog さん。

もう一つ。Going My Way さん。

clmemo@aka のブラウザー・シェア

まずは2006-12 の調査結果。1 位 Firefox (49.48%)、2 位 IE (38.47%)、3 位 Opera (4.97%)、4 位 Safari (3.77%)。

続いて、Google Chrome リリース前の金曜日。2008-08-29 のデータ。

1 位 IE (43.16%)、2 位 Firefox (42.28%)、3 位 Safari (10.63%)、4 位 Opera (1.77%)。シェアの一位と二位に差はほとんどない。2006-12 のデータと比べると、何気に IE のシェアが増えて、Firefox のシェアが減った。このブログから技術的な話題が減ったことを暗に指しているのかしらん ^^;。Safari のシェアは倍以上に躍進。MacBook を買って Apple ネタが増えたことと無関係ではないでせう。Opera の落ち込みはひどい。

最後に、Google Chrome リリース後のデータ。データ収録日は 2008-09-05。上のデータの一週間後。曜日によるデータのばらつきは最小限になってるはず。

1 位 Firefox (42.44%)、2 位 IE (39.15%)、3 位 Chrome (8.91%)、4 位 Safari (5.33%)、5 位 Opera (2.71%)。Chrome は 9% 弱のシェアを占めて 3 位。シェアを奪われたのは IE と Safari だった。Firefox のシェアは変わらず。

あとがき

IE のシェアを Chrome が奪ったのは、他のブログさんのレポートと同じ。てっきり Firefox のシェアが落ちるものと思っていたので、意外。

忘れてなければ、一か月後と Linux/Mac 版 Chrome が出た後にもブラウザー・シェアを調べてみたい。

iPhone には、拡大表示 (ズーム・イン) する方法が 2 つ用意されている。一つは、ピンチ・アウト。つまんだ指を広げる方法。もう一つはダブル・タップ。画面を二回叩く (タップ) する方法。今回は、ダブル・タップが賢いといふお話。

iPhone 版 Safari にて

Safari でウェブ・ページを拡大したいとする。この時の適切な拡大率は、パラグラムを読むのに横スクロールしないサイズ。つまり、パラグラフが横一杯に表示されて、かつ最大のサイズ。言いかえると、パラグラフの幅に合わせて拡大して欲しい。

ピンチ・アウトを使うと、画面を大きくし過ぎて困る。拡大が足りなかったりして、やきもきする。

そこで、パラグラフに照準を合わせてダブル・タップ!

見事、パラグラフが丁度納まるように拡大してくれる。逆にパラグラフを拡大しすぎてる場合は、逆に縮小して幅を合わせてくれる。自動ズームな感じで、とてもいい。

あとがき

Safari では、ダブル・タップで「ブロック要素」単位に拡大してくれるとのこと。今回は、「段落 (パラグラフ)」を作る <p> もしくは <div> ごとに拡大している。他にも、ブロック型になってる領域があれば、ダブル・タップしてみるとよいでせう。横幅を合わせて、見易く表示してくれるはず。

ダブル・タップは基本の動作だけど、こういふ裏話を一つ知っとくと、使い勝手が増すね。

ネタ元

このネタは Android 勉強会 (第 7 回) で知った。本当のこと言うと、最初、この話を聞いた時は意味が分かってなかった。後日、自分で iPhone をいじって初めて、ようやく意味を理解した次第。話を聞くだけじゃ、これは実感できない。是非、iPhone 版 Safari をいじってお確めあれ。