myFacebookStyle に「一番上に戻る」ボタンを追加しました

Facebook って、スクロールしていって過去の post を見ていると、一番上に戻るのにめんどくさい場合があるので、myFacebookStyle（Chrome/Safari 拡張）に「一番上に戻る」ボタンを追加しました。

ふと思ってサクっと実装したので、もしかしたら変な挙動をするかもしれませんが、ちょっとめんどくさいのから解放されます。



myFacebookStyle（Chrome 拡張）
myFacebookStyle（Safari 拡張）

現在開いているタブのスクリーンショットを撮る [Chrome Extensions を作ってみる：第十一回]

Chrome 拡張には、現在開いているタブのスクリーンショットを撮れる api があるってつい昨日、chrome.tabs - Google Chrome を眺めてて知りました...。

使い方はとても簡単。

chrome.windows.getCurrent(function(w) {
  chrome.tabs.captureVisibleTab(w.id, {format: 'png'}, function(url) {
    console.log(url);
  });
});

「format」のところは jpeg か png を選べ、「url」には、dataUrl として値が返ってきます。

なんてステキなんでしょう！

captureVisibleTab | chrome.tabs - Google Chrome

myPageCollexion をリリースしました。

新規タブページでお気に入りのウェブサイトに素早くアクセスできる Chrome の機能拡張をリリースしました。
ブックマーク、履歴、アプリ、訪問中のウェブページ、エクスポートからコレクションを登録することができます。ウェブページにより、サムネイルを複数種類から選ぶこともできます。また、日本語で使うと、46種類のウェブサービスの検索結果ページへジャンプできます。

Chrome ウェブストア - myPageCollexion

インストール後、新規タブを開くと、以下のような画面が表示されます。


「ブックマークから追加」ボタンを押すと、ブックマークを読み込んだ画面が表示されるので、コレクションに追加したいウェブページを選んで「登録」ボタンを押してください。


なお、登録しようとしたウェブページが何らかの理由で削除されている場合、ブックマークからも削除できます。


「最近閉じたタブから追加」ボタンを押すと、本拡張をインストールした後に閉じたタブがある場合に一覧で表示されます。


「履歴から追加」ボタンを押すと、履歴を読み込んだ画面が表示されます。


「アプリから追加」ボタンを押すと、有効化がされており、訪問先のウェブページが登録されているアプリを読み込んだ画面が表示されます。


また、各画面で各コレクションにマウスを重ねると表示されるボタンを押すことで、新規タブでそのウェブページにジャンプできます。


なお、上記の各画面では、既にコレクションに登録されているウェブページは黒く表示され、マウスを重ねると表示されるゴミ箱ボタンを押すことによりコレクションから削除できます。



加えて、現在開いているウェブページを追加したい場合は、オムニバー横に表示されるアイコンを押すことで追加画面を表示できます。既にコレクションに追加されている場合は、削除をすることができます。



この場合は、現在開いているタブのスクリーンショットをサムネイルとして使用することもできます。


各コレクションにマウスを重ねると表示されるボタンを押すことにより、別タブで開くことができます。


4/6/8/10列に変更することができます。


「レイアウト」ボタンを押すと、レイアウト変更画面に切り替わります。この画面では、ドラッグ&ドロップで任意の位置に各コレクションを移動できます。「+」の部分にドラッグすると、その列の一番下に移動します。


「入れ替え」モードでは、ドラッグ元のコレクションとドラッグ先のコレクションを入れ替えます。「差し込み」モードでは、ドラッグ先に差し込みます。


コレクションにマウスを重ねると表示される鉛筆ボタンを押すことで、タイトルやサムネイルを変更することができます。変更するには、「編集」ボタンを押したあと、「保存」ボタンを押してください。



レイアウト変更画面では、各コレクションにチェックをつけることにより一括で削除できます。削除するには、一度ダイアログで「了解」ボタンを押したあと、「保存」ボタンを押すことにより実行されます。



日本語モードの場合は、46種類のウェブサービスの検索結果にジャンプできる検索ボックスが表示されます。「駅探乗り換え検索」では「乗車駅 下車駅」、「食べログ検索」では「エリア キーワード」のようにスペースを入れて指定します。なお、ジャンプ先のウェブサービスの文字コードがUTF-8以外の場合、本拡張内で入力語句の文字コード変換ができないため、一度当方のサーバにジャンプし、変換後にリダイレクトしています。入力された語句の保持などは一切行っておりません。


「エクスポート/インポート」ボタンを押すと、共有用の画面が表示されます。エクスポートは、ボタンを押すことによりファイルをダウンロードできます。インポートは、エクスポートで生成したファイルを選択し、ボタンを押すと、現在のコレクションに追加されます。


Chrome ウェブストア - myPageCollexion

iOS6 で input type=file を使えるようになった

先日書いたエントリー で使えるだろうとは思ってたけど、実際に使えました。



input type=file を使って post した tweet がこちら。
Twitter / WINGS1685: ついに iOS で input type=file ...

退職してました

実は、退職してました。

と言っても 4 年前のことなので、今更なにやってたとか今後どうしたいとかは書いても仕方ないので書きませんが、ぼくの退職に関わる出来事がもしかしたら役に立つのではないかと思ったので書きます。

この時は普通の退職ではなく、結果的に言えば倒産による離職でした。会社からもらった離職票には「自己都合」とバッチリ書かれてましたが、後日これが「会社都合」に逆転し、失業保険の受給開始を早めることができました。

まずは離職への経緯から。
会社は約 10 名ほどの零細企業でした。しかしとある金曜日、社長から「外でお昼を食べてきてくれないか」と言われました。構成としてはやや変なんですが、役職付きの社員が約 7 割で、平社員はデザイナーの女の子 2 人とぼくの 3 人だけでした。その役職付きが全員、会議用机に呼び出されていました。そんな中、ぼくらは外での食事に行きました。

予想はついてました。それまでの数か月間、毎月の定例会議で社長が「業績がやばい」っていつも言ってたので、「遂に来たか」って思いました。会社に戻ってしばらくすると、予想通り、ぼくら 3 人が順番に呼び出されました。そして、聞かされたのです。

「役職付き全員を解雇する。君たちはどうする？残るか、辞めるかだ」

えっと...えっと...それって回らないですよね？会社として。いくらなんでも平社員だけで回すなんて無理があり過ぎる。ぼくは即刻「辞めます」って言いたかったんですが、考えたっていうフリをしたかったので「週明けに回答します」と答えました。その夜、緊急にデザイナー 2 人に呼びかけ、緊急会議を兼ねて食事に行きました。若いピチピチの女の子 2 人と食事に行きました。どうやら 2 人も辞める腹みたいなので、週明けに一緒に回答しようということにしました。そして、週明け、辞める回答をしましたが、その後に退職の手続きとして、「こちらは選択肢を与えたんだから、これは自己都合だね」っていうことになりました。

さて、職安にとりあえず行かないといけないのですが、そこで応対をしてくれた人に、離職の経緯を話しました。どうしても「自己都合」が納得行かなかったので、職安としての意見を聞きたかったのです。すると、なにやら分厚い本を取り出し確認した上でぼくに告げました。

「これは...倒産状態になりますね。是非この抗議書に書いてください」

そこで抗議書に記述し、あとは職安に任せます。そこから 2 週間後、職安から電話がかかってきたのですが、「相手方が全く応答しないため、処理が遅れてます」とのことでした。どうやら会社側がゴネてるようです。さらに 2 週間後に電話がかかってきて、「いけました。会社都合に変わりました」と告げられました。やりましたね。

これで 3 か月の待機期間を経ずに受けられました。

同じような境遇になりそうな方がいたら、是非職安に相談してみてはいかがでしょうか。担当によるのかもしれませんが、力になってくれますよ。

myFacebookStyle の爆速化

myFacebookStyle をリニューアルしましたで「爆速化」って書きましたが、どうやってスピードを高めるかに苦心しました。

元々は、それぞれの定義で適用させる class と、適用させるスタイルを content_script 内の JS にそれぞれ書いておいて、実際に適用させる場面では、それらを組み合わせて style を body 内に記述する、という形式を採っていました。しかし Facecbook 側の度重なる仕様変更によって、適用させる class が膨大になってきており、その影響でスピードが落ちていたというのが原因でした。

これを改善すべく、以下の手法に変更しました。

1. 適用させる class を別途の css へ「/* BG background-color: $BG$;BG */」のように記述する
2. その css は外部ファイルとして manifest.json に定義する
3. 適用させる場面で、その css を JS で読み込む
4. BG を適用させる場合は、「/* BG」と「BG */」を外し、「$BG$」にユーザが定義した色指定を突っ込む
5. css を読み込むのは最初の一度だけで、変数に入れてデフォルトの内容を保持し、以降はそれを使い回す

これでかなり爆速化ができました。

拡張内に入れた画像などのファイルを読み込む [Chrome Extensions を作ってみる：第十回]

例えば Chrome 拡張を作っているとき、画像などのファイルを使いたいっていう場合があると思います。しかし他のサーバのを読み込むよりも、拡張内に格納したファイルを読み込んだ方が当然速いので、こっちを使いたいところですね。

まず、manifest.json 内で記述します。

★manifest.json

"web_accessible_resources": [
"img/sample.png"
]

次に、読み込むファイル側で定義します。ここでは css で定義してみます。

★background_page 内の Javascript

#sample {
background: url(chrome-extension://xxxxxx/img/sample.png);
}

※「xxxxxx」の部分には拡張の ID を入れます。
同じように JavaScript 内でも読み込ませることができます。

Formats: Manifest Files - Google Chrome