livedoor Reader liteを使いやすくする(かもしれない)Opera Mobile用User JavaScript。
Android版Opera Mobileが出ましたね。使い勝手の良さとか、日本語表示の問題とか、良くも悪くもOperaで安心しました(笑)
で、このOpera Mobile、今までにもあったOpera Miniと違ってUser JavaScriptが動かせます。Mozilla Firefoxで言うところのGreaseMonkeyのようなものです。これが実際にOpera Mobileで動作するかのチェックと、最近ちょっとlivedoor ReaderのAPIについて調べてたので、そちらの検証も兼ねてUser JavaScriptを書いてみました。
やっていることは、
- livedoor Reader liteの表示をOpera Mobileに最適化する
- 記事の詳細を非表示にして一覧性を上げる（記事の詳細は[Detail]ボタンを押せば見られる）
- 気になった記事に[Pin]ボタンでピンを立てる（ピン情報はPC版livedoor Readerと同期します）
こんだけ。公開してるところからしてちゃんと動きました。まあlivedoor Readerの非公開APIを使ってるから、将来的に動かなくなる可能性もなくはないんですが。
一応動かし方を書いておくと、
- Opera Mobileのアドレス欄にopera:configと入力してenter
- [User Prefs]欄の[User JavaScript]と[Always Load User JavaScript]にチェック、[User JavaScript File]にUser JavaScriptを保存するフォルダを入力（僕はandroid版で"/sdcard/Opera/UserJS"にしてます）して下の[保存]で設定を保存
- [User JavaScript File]で指定したフォルダにJavaScriptファイルを保存
面倒なんでスクショはなし。Opera Mobileとlivedoor Readerを常用してる人ってほとんどいないような気がするけど(笑)、一応晒しておきます。
以下は自分用メモ。
livedoor Reader liteの表示をOpera Mobileに最適化
livedoor Reader liteはiPhone用に最適化されてるのに、Opera Mobileで表示させると微妙に画面幅に収まってない（横スクロール発生）ので、原因を調べてみた。
モバイル向けモダンブラウザの多くは最初にページ全体を縮小表示→見たいところを拡大して表示というUIになってるけど、この最初の縮小表示のときの画面サイズ（PCで言うところのウインドウサイズ）を定義するのがviewportというmetatag。iPhone用に最適化されたページでよく使われるらしい。詳細はここら辺参照。当然Opera Mobileでも対応してます。
ではlivedoor Reader liteのviewportがどうなってるかというと、
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
僕の持ってるHTC Desireの横解像度は480。width=320では合ってない。ってことでDOMを操作してここを
<meta name="viewport" content="width=device-width; user-scalable=0;"/>
に書き換えるとぴったり収まる。やったね！しかし、解像度が数字ベタ打ちというのは、さまざまな端末に対応するという観点で言えばいかがなものか。まあiPhoneだけに対応するなら種類も少ないし、そんなに問題ないのかな。
記事の詳細を非表示にして一覧性を上げる
僕自身のlivedoor Readerの使い方って、
携帯でタイトルをひたすら流し読み→気になった記事にピンを立てておく→家に帰ってPCで記事をゆっくり読む
なんで、記事の詳細とか無くて良いんだよね。むしろ流し読みの邪魔なだけ。
ということでDOMを操作して記事詳細（と更新日時）のタグに
style="display:none"
を追加してしまえば表示されなくなる。再度表示させたければ追加したstyle属性を削除してやれば良い。具体的な方法はスクリプトを参照のこと。
注意点としては、要素として空テキストが存在する場合がある。この要素は単純にページのソースを表示しても見えない。この空テキストの分だけ子要素配列の要素数が増えるので、チェックを忘れるとelement.childNodes[i]で正しく子要素を指定できない恐れがある。
つまりOpera Dragonfly万歳！って話。
気になった記事に[Pin]ボタンでピンを立てる
livedoor ReaderのAPIについてはここら辺でまとまってる。これにしたがって必要な情報をpostしてやるだけ。javascriptで画面遷移なしにpostするにはXMLHttpRequestを使えばいいらしい。具体的にはここら辺参照。つか丸コピペｗ
注意点としては、ピンを立てるのに上記APIに従うだけでは403:Forbiddenが返ってくるので、上記記事にもあるように一緒にApiKeyも送ってやる必要がある。CookieからApiKeyを取り出すのはここら辺を参考にした。というより丸コピペ(またかよ)
あとフィード単位でしか既読に出来ないlivedoor ReaderのAPI仕様からして、複数フィードを更新時間で区切って読むlivedoor Reader liteでは未既読管理をやるのが面倒な感じ。専用クライアント作るくらいの手間が必要？
つまり何が言いたいかというと、『livedoorさんもっと頑張って！』ってことです。そりゃまあiPhoneとかAndroidとかではサードパーティの専用クライアントが色々出てるから、本家が対応する必要ないかもしれないけど、せめて未既読管理とピンくらいはちゃんとできるようにして欲しいと思う。それをlivedoor Reader liteの改良という形でやるかどうかは別としても。
それと、User JavaScriptはPC版Operaでも結構使ってるけど、モバイル用途だととりあえず
- サイトごとにUser Agentを書き換えるUser JavaScript
- iPhone用サイトをOpera Mobileで正しく表示するUser JavaScript
あたりがあると便利かもね。とか思ったり。
