ラベル userscript の投稿を表示しています。 すべての投稿を表示
ラベル userscript の投稿を表示しています。 すべての投稿を表示

2009年11月17日火曜日

Google Chrome で HootSuite のフォントサイズを少し大きくしたい

user script のインストール

http://userstyles.org/styles/22613 の Load as user script ボタンを押してインストール。

 

HootSuite の文字が小さくて読みにくい

愛用していた pbtweet が twitter の仕様の変更のためなのか、表示が上手くされないときがあった。pbtweet 以外の twitter クライアントを色々と検討したけれど、やはり pbtweet の会話調の吹き出しに敵うものなし。敢えて別のものを使うとしたら、HootSuite 。しかし、デフォルトでは文字が小さいので読みずらい。 (+_+)

Firefox なら Stylish を使って、

.tweetContent {
    font-size:100% !important;
}

と書けば問題ない。

Chrome でも Stylish のようなものがあるのかな?と思い探したけれどわからなかった。

 

User Script

今、Chrome は開発版を使っている。 どのバージョンからか知らないけれど、XXXXX.user.js という名前のユーザスクリプトファイルを Chrome に D&D してやると簡単にインストールできる。(削除するときは、Google Chrome の設定 > 拡張機能 を開く)

Google Chrome Converts User Scripts into Extensions によると、

Now you can visit userscripts.org and any other site that links to Greasemonkey scripts and other flavors of user scripts, click on the link to a *.user.js file and install it in one click.

ということで、userscripts を書くことに。

userstyles.org のサンプルを見て、必要であろうところのみ抽出。JavaScript で head 要素に style タグを追加するだけ。

// ==UserScript==
// @name           set hootsuite fontsize
// @description    hootsuite 
// @namespace      http://jutememo.blogspot.com
// @include        http://hootsuite.com/dashboard* 
// ==/UserScript==
(function(){
    var fontsize = "100%";
    
    var css = ".tweetContent{font-size:" + fontsize + " !important;}";
    var style = document.createElement('style');
    style.type = "text/css";
    style.appendChild(document.createTextNode(css));
    document.getElementsByTagName("head")[0].appendChild(style);
})();

 

userstyles.org を利用

当初これをエディタに書いて、Chrome に D&D していた。しかし、userstyles.org でアカウントを取得してみたら、CSS を入力するだけで、後は全部自動で上記のようなコードを生成してくれた。userstyles.org のコードはよく使わせてもらっていたけれど、こんなにお手軽に user script を作れるとは今まで知らなかった。 (@_@;)

これなら表示をカスタマイズしたいサイトがあったら、

  1. userstyles.org で CSS を入力
  2. user script を生成
  3. Chrome へインストール

で簡単にできる。 ^^

http://userstyles.org/styles/new

New style | userstyles.org via kwout

2009年9月22日火曜日

Google Chrome で pbtweet – User Script を使って

1. 会話のコンテキストを表示してくれる pbtweet

Twitter のメリットが今一良くわからない。

たまにつぶやいてみるけれど、何のためにつぶやいているのかわからなくなる。 ^^; 「つぶやくこと」が目的ではなく、情報収集のためのツールとなっているかな。

 

Seesmic で検索を保存して、意外な出会い

しかし、Seesmic を使うまでは全く Twitter の意義を見出せなかった。

Seemic では、興味のある単語をいくつか検索し保存しておく。保存した検索から、思わぬ発見に出会えることがある。

例えば、自分の住んでいる地域で検索しておくと、ローカルな話題がリアルタイムに近い状態で見れておもしろい。

しかし、問題はつぶやいた人に興味を持ち、「他にどんなことをつぶやいているのだろうか?」とTwitter のページを見ても読みにくいこと。個々のつぶやきを読んでも意味不明で、どういうコンテキストで誰と何の会話をしているのかわからない。 (+_+)

 

コンテキストを表示してくれる pbtweet

これを解消してくれたのが pbtweet

会話のコンテキストを表示してくれる。チャットを読んでいるように感じる。

見しらぬ人の Twitter を見ても読みやすいし、インライン表示された部分は会話がされている。重要な情報が得らやすい。会話から人のつながりを辿って行くのもおもしろい。

追記(2009.11.21) : 現在、PBTweet+ を使うようになった。(ページがハングル文字だったので、Google 翻訳 を利用) 「Userscript + Chrome」と書かれた箇所からインストール。 これ以降の設定は必要ない。

 

2. Google Chrome は Safari の仲間だから pbtweet を利用できる

しかし、残念なことに Firefox では動作しなかった。

pbtweet - twitter拡張スクリプト - によると、

インターフェイスにはいくつかのアニメーション効果が追加されますが、これらはWebKitのCSS 3先行実装を用いています。

WebKit とは 、 WebKit – Wikipedia によると、

Mac OS X v10.3以降に搭載されているMac OS X標準のWebブラウザSafariの基礎を成している。…
Googleは、Google Chromeや携帯電話プラットフォームAndroidで採用している

なるほど、Chrome は Safari の仲間だったのか。(@_@) そこで、Twitter は Google Chrome で見ることにした。

ただし、pbtweet をブックマークレットで使う場合、別の人の twitter に飛ぶとブックマークレットの効果がなくなってしまう。 (+_+) この際、ブックマークレットを使わないですむように、Chrome で userscript が動作するようにした。

追記 (2010.3.18) : 現在は PBTweet+ を Google Chrome, Firefox の双方で使うことができる。

 

3. Google Chrome を Dev channel へ

Chrome では安定版、ベータ版、開発版のことをチャンネルという言葉で表現している。

Early Access Release Channels によると、

Google Chrome releases updates to different release channels. Subscribing to the Beta or Dev channel means you'll get more frequent (but less stable) updates and you'll get to try new features first.

Subscribing to a channel で `Dev channel’ に切り替える。 Dev channel をクリックしてインストール。

http://dev.chromium.org/getting-involved/dev-channel#TOC-Windows

追記 (2009.11.10) : Google Chrome のバージョンが 4.0.237.0 にアップデートされたら、下記の「UserScript の利用」の設定が必要なくなった。pbtweet - twitter拡張スクリプト - の userscript の pbtweet.user.js をクリックすると、

Extensions and themes can harm your computer. Are you sure you want to contine ?

と尋ねられるので、「続行」 ボタンを押してインストール。これだけで済む。

 

4. User Script の利用

User Scripts を参考に。

  • Install a recent trunk build of Chromium, or switch to the dev channel.
  • Launch chrome.exe with the --enable-user-scripts flag.
  • Create a directory called User Scripts in your user data directory.
  • Copy *.user.js files to the script directory.
  • Script edits are picked up automatically; just refresh the page to see the changes.

既に dev channel に切り替えたので、起動時のオプションを付けるところから。

  • スタートメニュー > すべてのプログラム > Google Chrome

の中の Google Chrome を右クリック > プロパティを表示。

090921-002.png 

ショートカットのリンク先に --enable-user-scripts  を追加。

090921-003.png

スクリプトを保存するための User Scripts フォルダは、User Data Directory によると、

Google Chrome: C:\Documents and Settings\<username>\Local Settings\Application Data\Google\Chrome\User Data\Default

の中に作成する。この場所を間違えないように注意。

最初、動かなくておかしいなぁと思ったら、User Data の中に間違えて作っていた。もう一つ下の Default フォルダの中に作ること。

 

5. pbtweet の userscript

pbtweet - twitter拡張スクリプト – の userscript を先ほど作成した User Scripts フォルダへ保存。

これで快適な Twitter ライフが送れそうだ。 ^^

 

参考