むｋメモ@Dev

しがない開発者が何か作るときの作業メモとか Readmine : Read It Later用Google Chrome拡張

[mukdev]

Readmine2.1公開

GoogleReader統合できたよー!!

ショートカットはオプション画面の設定に悩んでて見送った。

あと、Readmineからページを開いたら、邪魔にならない程度のツールバー的なのがフローティングしてて、既読にしたりタグつけたりってのができるような機能を試験実装中。この機能はオンリーワンな気がするぞ。

[mukdev]

課題メモ

・GoogleReader統合の話 前回、GoogleReader統合大変だよー(だからめんどい)って書いたけど、要望多めだし、自分でも使うことになるからと思って、ちょっと前向きに検討中。 自分はGoogleReaderPlusで同等の機能使ってるんだけど、なぜかアイコンがInstapaperになってるし(InstaとRILのアイコンが反対になってる)、Readmine側でキャッシュ同期待たなくてもいいしね。 で、GoogleReaderのDOM解析したけどまぁこれがまためんどくさいというか…わかってたから大変だーって書いたわけなんだけど…

・登録のショートカットキー対応 アドレスバーから一発登録はできないにしても、コンテキストメニューから選ぶのめんどくさいならショートカットキー使えるようにすればいいんじゃん？ってひらめいた(今更) これも盛り込みたい。

・ReadingList同期間隔 特に何も考えずに1分間隔で取得してるんですが、複数台PCで使用してるとたまにAPIリクエスト数オーバーして403食らうことが発覚!! これはマズイ!! というわけで、デフォ5分くらい+オプションで調整可能にします。

じわじわとユーザも増えて、しかも高評価いただいているようで嬉しいですね!!

[mukdev]

Readmine2.0公開

前々から言ってたReadingListのキャッシュ実装版を公開。 裏にずっとリスト持ってるのでポップアップの表示がほぼノータイムになった。

それに伴い追加事項：

手動更新ボタン追加(使わなくても1分ごとに更新されるけど)

検索ダイアログ追加(Ctrl+Fでも出てくるよ)

タグのとこをアイコンにしてみた(気分の問題)

他にも外人さんから色々要望がきててヤバイ 嬉しいけどヤバイ  「これすげぇイイんだけど、こうなると完璧なんだよなー」みたいな言い方してくるからヤバイ できるだけ頑張りたい

一応挙がってる要望をメモっとく

 GoogleReaderに追加ボタン統合してよ(えーこれ大変だよー)

アドレスバーに追加ボタン作ってよ(拡張の仕様上、ブラウザアクションとページアクションが両立できなくて無理なんだなー)

開き直したときにスクロール位置復元してよ

選択した複数のリンクを一気に追加できるようにしてよ

MarkAsReadチェック→まとめてドーンじゃなくて1個1個既読にできるようにしてよ

既読→未読に戻せるようにしてよ(これはやりたい)

既読→削除できるようにしてよ(次のAPIバージョンでできるみたいだから、それから)

テキストモードで開けるようにしてよ(これはやりたい)

オフラインモード(マジ無理)

[mukdev]

Readmine1.3.0公開

レビューに外人さんから

「ヘイ!! 右クリックからページ追加したときに、そのままタグ編集したいんだけどどうにかならん？ 他の探してみたけど、これできるのないんだよね。実装されたらマジ世界変わるんだけどなー(ﾁﾗｯ ﾁﾗｯ」

とか書かれてしまったので

や り ま し ょ う

そして

で き ま し た

どういうインターフェースにしようかなーって割と悩んだけど、追加したらデデーンと入力欄が出てくるのもダサいっていうかウザいので、さりげなーく通知をポップアップさせて「追加ﾃﾞｷﾀﾖｰ …あ、タグ入力したいならついでにできるよ…興味ないならほっといてね…ほなｻｲﾅﾗ」みたいな挙動をさせようとした結果がコレです。

ポップアップ表示時間も頑張って調整したけど、せっかくならオプションで表示時間設定できるようにしても良かったかな。気が向いたら。

あと、細かいけどFavicon取ってくるときにドメインのルートに/favicon.ico決め打ちで見に行ってるんだけど、時々そこに置いてくれてないサイトがあるのね。ASCII.jpとかASCII.jpとかASCII.jpとか。で、chromeってchrome://favicon/[URL]でキャッシュされてるFaviconを取れるようなので、エラーだった場合にそこから取得するように変更。これで地球マークが減るね!!

前の記事で書いたReadingListをキャッシュする実装がいい感じになってきて絶賛テスト中。 今はポップアップ開いてから取得→2秒くらいして表示、なのがポップアップ開いた瞬間リストが表示されててマジ快適。キャッシュを更新するタイミングについていろいろ悩んだけど、Readmineから追加/更新があった直後、そして他アプリから更新された場合に対応するように、バックグラウンドで数分間ずつクロールって形に落ち着いてます。手動更新ボタンも考えたけど、ボタン配置考えるのがめんどくｓ

多分今月中にはリリースできるかと。

[mukdev]

Readmine1.2.1公開

別に昨日のリリースをミスったとかじゃないんだからねっ!!

ちょっとダサめのコードがあったのを改善したのと、Mac版Chromeで表示したらちょっと表示が崩れていたのを修正。 ええー同じWebKitなのにWinとMacでCSSの解釈が違うのかー!?と思ったけど、よく見たらpx単位で指定すべきところをem単位で扱っていたので、そりゃおかしくなるよね。

あと既読チェックマークの表示方法を変更。 今まで未チェックを背景画像にした領域にチェック済画像を重ねて、画像の表示/非表示で表現してたんだけど、未チェック画像とチェック済画像を1枚に繋げて、background-positionの指定で切り替えをするように。IMGエレメント1個削減。こういう小技をちょいちょいと覚えていきたいですね。

ちょっと大幅な実装変更ってことで、起動時にReadingList全取得→BackgroundPageにキャッシュしておいて、Add/Updateがあったら差分だけ取得って方式を試験実装中。 自分のReadingListが今未読既読合わせて1500件くらいあって、取得自体はそれほど重くないんだけど、一気に表示すると30秒くらい帰ってこなくなり… そこはページングするしかないのかな。 この実装方式だと、ソートが割と融通効くのと、全件の中から検索ができるように。 現状だと取得してる範囲をフィルタリングしてるだけだからなー。その分サクサクだけど。 納得できる形になったら2.0にして公開かな。 

[mukdev]

Readmine1.2.0公開

更新ー

目立った新機能はないけど、ちょこちょこと使い勝手を良くした感じ。

日本語対応(設定画面だけ)

ドメインの表示/非表示を切り替えられるように

タグの表示方法を変更、表示/非表示を切り替えられるように(タグ編集時にニュッと出てくる)

ページ開くときに、左クリック/中央クリックの振る舞いとして バックグラウンドタブ開く/フォアグラウンドタブで開く/(バックグラウンドタブで)開いて既読チェックする を選択できるように

細かいとこだと、わかりやすいようにアイテムの間に罫線引いてみたりとか。 現状、タグってフィルタ入力の対象としてしか機能してないけど、タグを一覧から選択できるようにしようかなとか。ただ、どこに一覧を配置しようかねぇ…

あと、実装したくてもAPI仕様的に難しいので何とかして欲しいこと

get時にソート順指定させてくれ

textで日本の一部のサイト見ようとするとサーバエラーになるのなんとかしてくれ→してくれないとInstapaper使っちゃうゾ

既読アイテムを削除するAPIを用意してくれ(公式ページ/iPhone公式アプリではできるのに…)

[mukdev]

HTML5とjQueryの話

DOMに何か値持たせたいー!!ってことあるよね 勝手に変な属性作って

<div id="value1" hoge="fuga" /> 

みたいにできないこともないけど、HTMLとしてどうなのってところがあって、特に公開するものでこんなことするのは恥ずかしい…

と思ってたら、HTML5では "data-" をプレフィックスとすることで、独自データ属性を作っていい事になったらしい!! これは凄い!! つまり

<div id="value1" data-hoge="fuga" />

って書けば恥ずかしいことなど何もない!! で、これを使って 

var hoge = $("#value1").attr("data-hoge");

みたいなことして悦に入ってたら、さらに驚愕の事実が!!

jQueryにこの仕組みを使ったdataメソッドなんてのが用意されていて、

var hoge = $("#value1").data("hoge");

と書けるようだ!! これはわかりやすい…!! あと、参考にしてたjQueryリファレンスが1.4準拠？だったせいで知らなかったのがDeferred Object。 これもマジで凄い。  もう非同期処理も怖くない。 

何が言いたいかというと、HTML5+CSS3+JS(jQuery)の可能性にWeb開発浦島状態だった自分は感動せざるを得なかったってこと

[mukdev]

Readmine1.1.0公開

更新しました!!

新機能は次の通り

タグ編集モード([Edit Tags]をクリックするとタグ入力用のテキストボックスが出てくる) #あっ Validation入れてない…

リンクを右クリックで、リンク先を登録 #コメントで要望されたのを実装。というかこの機能は普通に必要だよね。仕事中、アレな感じのタイトルのリンク見つけたけど、踏めない…だけど帰ったら忘れずに読みたい…というケース 

下部のボタンが有効なときハイライトされるようになった

タグ編集はどっかでバグってそうで怖い…

ちなみにタイトルのReadmineって何よ、って疑問にお答え!!(別に聞かれてないけど) 最初、mkReadItLaterってタイトルつけてたんですが、リリース直前でよくよくAPIの約束事の欄を見ると

公式だと誤解されないように、「Read It Later」って名前に入れないでネ!!

Read It Laterのアイコン(黒地に黄色の > )をそのまま使わないでね!!

なん…だと…？アイコンもそのままではないにしろ、アイコンを組み合わせてそのまま使ってました。 アウトー!! ということでアイコンに関しては、配色のみ使わせてもらって作り直し。 名前はどうしようかな…とりあえずRead～～みたいな感じにしたいな…Read me Later？長いからRead me？何か昔のメルマガサービスみたいだな…ってか絶対被るよね検索性も悪いし→me…mine…Readmine？実は発音は[ríːd]じゃなくて[réd]なんだよ、って裏設定作れば、某プロジェクト管理ソフトっぽくてよくね？

→大　決　定

[mukdev]

Readmine1.0.0公開

外出先からiPhoneでネタ拾ってRead it Later(以下RIL)にぶち込む→自宅で一通り読む というルーチンワークをより快適にするため、Chrome向けのRIL拡張をいっちょ作るかー

→作ったので公開

とりあえず現時点で盛り込んだ機能は

RILの未読リスト/既読リストを表示

大量にリストがあると重いけどページングは嫌なので、Autopagerっぽい動きをさせる

タイトル/タグでフィルタリング

チェックを付ける→Mark as Readボタンで既読

アイコンに未読アイテム数表示

ページ内のコンテキストメニューから新規URL追加

タイトル未設定の場合は拾ってくる(RIL連携でTitle入れないアプリ使ってる場合にいいかな)

現在実装中/実装予定の機能は

タグ編集モード →タグ編集ボタン押すと各アイテムにtextboxがくっついて、編集した後一気に更新するイメージ

テキスト表示モード →RILのtextAPIの動きがあやしいので、InstapaperのAPIを使おうか…競合サービスの使っちゃうってどうなんだろう？ →一応Readabilityを使ったバージョンも試験実装してみたけど、こっちはURLサクっと渡して～って感じにはいかなくて、一度開いてonloadでBookmarkletを実行させるという微妙な実装になってしまい、こっちも公開に踏み切れない

アンカーを右クリックして対象のURLを追加 →要望があったので…っていうか普通に必要だと思った

URLホイールクリックの挙動 →今は一律バックグラウンドタブで開くけど、左クリックとホイールクリックで挙動変えて、新規タブにフォーカスを当てる/当てない、開くと同時に既読に あたり設定可能にするとか

ソート順変更 →一度に全部拾わない仕様なので、どういう動きにすればいいやら… 

以下余談：

昔、Googleの検索結果にサイドバーがついて、あまりのウザさに適当に拾ったUserScriptをChrome拡張化、「Google Hidari Uzai」として公開してみたところ、一部サイトに紹介されてしまい、微妙にユーザ数も増えて複雑な気持ちになってたり。

ちなみにサイドバーは慣れてしまったので、作者は使っていません:-p