FirefoxでTwitterサイトを改造 その1
前にChromeでTwitterサイトの見栄えを改造してみたりしたが、今回はFirefoxでTwitterサイトをどのような感じに改造しているか見てみよう。
これを使って見栄えを改造している
PBTweet+ for Greasemonkey
このツールはFirefoxのアドオンであるGreasemonkeyで使えるユーザスクリプトだ。インストールの仕方はそちらを参照してみてもらいたい。
このツールインストールするとTwitterサイトの見え方がこのような感じになる。
![$macsimのブログ-PBT+001](https://stat.ameba.jp/user_images/20100515/17/macsim/02/13/j/t02200211_0800076810542707682.jpg?caw=800)
まず、呟くためのテキストエリアがなく、各Tweetの右になにか画像が引っかかっているものもある。そして、Tweet自体が矩形で囲まれているTweet欄があったりする。
順に見ていこう。
上部のテキストボックスがなくなってるせいで、画面上に見えるTLが少し増えている。下にスクロールしてみよう。
![$macsimのブログ-PBT+002](https://stat.ameba.jp/user_images/20100515/17/macsim/ae/60/j/t02200211_0800076810542707683.jpg?caw=800)
どんどんスクロールできる。次ページの読み込みが自動で行われている。これは以前に紹介したAutoPagerizeの機能ではなく、このPBTweet+の機能でスクロールでの自動読み込みが行われている。(気付いてる人もいると思うがTwitterの通常TLではAutoPagerizeは正常に動作しないことが多い)
そして、TL左側の上に星のついたパーツがスクロールしてもついてきているのがわかるだろうか?
星の部分にマウスを乗せるとメニューが開く。
![$macsimのブログ-PBT+003](https://stat.ameba.jp/user_images/20100515/17/macsim/a4/b3/j/t02200211_0800076810542707684.jpg?caw=800)
これはStarMenuと言って何処からでもTweetしたり、ホームに戻ったり出来るようになっているメニューだ。スクロールしてホーム等のリンクが見えない状態でもここから操作が出来るようになっている。また、星のパーツの上下にもアイコンがある。▲でページトップへ、▼でページ最下部へ(実際は最下部まで飛ぶとその下に自動読み込みで次ページが読み込まれる)移動する。
つづいて各Tweetを見てみよう。
それぞれのTweetにマウスをのせるとTweetの背景色が多少グレイになり、右下にメニューが、右側にアイコンが2つ表示される。
![$macsimのブログ-PBT+004](https://stat.ameba.jp/user_images/20100515/17/macsim/29/90/j/t02200028_0620008010542707691.jpg?caw=800)
メニューは
JA:日本語への翻訳。翻訳する言語はオプション画面で設定する。日本語への変換なのでJAと表示されてる。
Retweet:公式RT
RT:コメントを入れられる旧タイプのRT
Via:あんまり見かけないかもしれないが、引用付のリプライの形式の一つ
DM:ダイレクトメール
Reply:返信
ReplyAll:そのツイートにあるユーザ全員にリプライ
![$macsimのブログ-PBT+005](https://stat.ameba.jp/user_images/20100515/17/macsim/86/04/j/t02200045_0620012610542707692.jpg?caw=800)
これは翻訳をした時の画像。おお、scalziも俺と同じタイミングでシャトルの打ち上げ見てたのかw。
右側のアイコンの上はfav。
その下のアイコンはちょっと変わった機能を提供してくれる。
![$macsimのブログ-PBT+006](https://stat.ameba.jp/user_images/20100515/17/macsim/d2/0a/j/t02200211_0800076810542709590.jpg?caw=800)
この画像の部分のTweetは文字もプロフ画も表示されていない。そして右のアイコンの形が少し異なっているのがわかるだろうか?人型の左にある文字が「+」になっている。
このアイコンはいわゆるミュートボタンだ。一時的にTL上からそのユーザのTweetを見えなくすることが出来る。(一時的と言っても、解除するまではブラウザ再起動でもPC再起動でも表示されることはない)
解除すれば当然表示されるようになる。
Tweetの右側に画像が引っかかっているように表示されている場合がある。マウスを乗せると斜めの画像がちゃんとなる。
これはTweet内にTwitpicやFlickr等の投稿された画像やyoutubeのリンクがあるとサムネイルが表示される。
クリックすると写真の場合は実際の画像が、youtubeの場合は対象の動画がlightbox表示される。
youtubeはそのまま再生可能だ。またlightbox表示時の「Original Link」ボタンから元のページに飛ぶことが出来る。(当然Tweet中のリンクを踏んで直接飛ぶこともできる)
![$macsimのブログ-PBT+007](https://stat.ameba.jp/user_images/20100515/17/macsim/68/b9/j/t02200211_0800076810542709589.jpg?caw=800)
![$macsimのブログ-PBT+008](https://stat.ameba.jp/user_images/20100515/17/macsim/85/f4/j/t02200211_0800076810542709591.jpg?caw=800)
![$macsimのブログ-PBT+009](https://stat.ameba.jp/user_images/20100515/17/macsim/ad/74/j/t02200211_0800076810542709595.jpg?caw=800)
そして、ちょっと違う感じのTweet表示を見てみよう。Tweet部分が矩形に囲まれている。マウスを乗せてみると、すぐ上のTweetにもメニューが表示される。
![$macsimのブログ-PBT+010](https://stat.ameba.jp/user_images/20100515/17/macsim/6f/ee/j/t02200081_0620022810542709593.jpg?caw=800)
このTweetはすぐ上のリプライTweetの元になったTweetが表示されているのだ。
このようなTweetをなんどもやり取りしている様な場合は、特定の回数を超えていると「more」ボタンが表示される。このボタンを押すとTweetのやり取りが全て表示される。
![$macsimのブログ-PBT+011](https://stat.ameba.jp/user_images/20100515/17/macsim/55/45/j/t02200087_0620024510542710463.jpg?caw=800)
![$macsimのブログ-PBT+012](https://stat.ameba.jp/user_images/20100515/17/macsim/a2/4f/j/t02200123_0620034610542710462.jpg?caw=800)
また、bit.ly等の有名な短縮urlであれば、マウスを乗せるとポップアップで実際のurlが表示される。
![$macsimのブログ-PBT+013](https://stat.ameba.jp/user_images/20100515/17/macsim/f7/fb/j/t02200031_0620008810542710461.jpg?caw=800)
Tweetするときは上部にある「New Tweet」のボタンを押すとテキストボックスが出現する。また右側のサイドメニューのNew TweetやスターメニューのNew Tweetからでもテキストボックスが出現する。
![$macsimのブログ-PBT+014](https://stat.ameba.jp/user_images/20100515/17/macsim/22/ae/j/t02200211_0800076810542710465.jpg?caw=800)
![$macsimのブログ-PBT+015](https://stat.ameba.jp/user_images/20100515/17/macsim/26/92/j/t02200211_0800076810542710466.jpg?caw=800)
テキストを入力すると「ツイート」ボタンが押せるようになる。
![$macsimのブログ-PBT+016](https://stat.ameba.jp/user_images/20100515/17/macsim/9b/1d/j/t02200071_0570018310542711009.jpg?caw=800)
少し黄色っぽくなっている部分が色々な機能だ。
Clear:入力内容の消去
Close After Tweet:クリックでon/offが切り替えられる。「ツイート」ボタンを押してツイートした後にテキストボックスを消すかどうかを指定
Get Original Link:RT等で短縮urlが文中に挿入されている際にそれを復号してくれる
Shorten URL:テキスト中の普通のurlをbit.lyで短縮urlに変換
「ツイート」ボタンの左に直前のTweetが表示される。
また、前回Tweetをテキスト入力済みの状態で中止(右上の×ボタンで終了)した場合、1件だけだがDraft(下書き)として保存してあり表示される。
![$macsimのブログ-PBT+017](https://stat.ameba.jp/user_images/20100515/17/macsim/62/29/j/t02200083_0570021510542711008.jpg?caw=800)
チェックの部分をクリックすると、テキストボックスに反映される。
RTやvia、Reply等は、クリックするとサブウィンドウが表示された時に、テキストボックス内にテキストが挿入されている。
![$macsimのブログ-PBT+018](https://stat.ameba.jp/user_images/20100515/17/macsim/29/74/j/t02200131_0570034010542711010.jpg?caw=800)
さてと長くなったので、他の機能の紹介は次回にしよう。
【今日のおすすめ動画のコーナー】
今回紹介する踊ってみたはみぃりさん。
スタイルも踊りもとっても素敵なみぃりさんは先月の4月14日が投稿一周年記念だったようだ。
今回の動画は約1ヶ月遅れの記念動画だが、待った甲斐がある仕上がりだ。
ボカロ曲のウタカタ永焔鳥にオリジナルの振り付けをして踊ってくれている。
一周年おめでとう!
( ^-^)ノ∠※PON!。.:*:・'°☆。.:*:・'°★°'・:*congratulation
素敵な踊ってみた動画をありがとうです(⌒▽⌒)
これを使って見栄えを改造している
PBTweet+ for Greasemonkey
このツールはFirefoxのアドオンであるGreasemonkeyで使えるユーザスクリプトだ。インストールの仕方はそちらを参照してみてもらいたい。
このツールインストールするとTwitterサイトの見え方がこのような感じになる。
![$macsimのブログ-PBT+001](https://stat.ameba.jp/user_images/20100515/17/macsim/02/13/j/t02200211_0800076810542707682.jpg?caw=800)
まず、呟くためのテキストエリアがなく、各Tweetの右になにか画像が引っかかっているものもある。そして、Tweet自体が矩形で囲まれているTweet欄があったりする。
順に見ていこう。
上部のテキストボックスがなくなってるせいで、画面上に見えるTLが少し増えている。下にスクロールしてみよう。
![$macsimのブログ-PBT+002](https://stat.ameba.jp/user_images/20100515/17/macsim/ae/60/j/t02200211_0800076810542707683.jpg?caw=800)
どんどんスクロールできる。次ページの読み込みが自動で行われている。これは以前に紹介したAutoPagerizeの機能ではなく、このPBTweet+の機能でスクロールでの自動読み込みが行われている。(気付いてる人もいると思うがTwitterの通常TLではAutoPagerizeは正常に動作しないことが多い)
そして、TL左側の上に星のついたパーツがスクロールしてもついてきているのがわかるだろうか?
星の部分にマウスを乗せるとメニューが開く。
![$macsimのブログ-PBT+003](https://stat.ameba.jp/user_images/20100515/17/macsim/a4/b3/j/t02200211_0800076810542707684.jpg?caw=800)
これはStarMenuと言って何処からでもTweetしたり、ホームに戻ったり出来るようになっているメニューだ。スクロールしてホーム等のリンクが見えない状態でもここから操作が出来るようになっている。また、星のパーツの上下にもアイコンがある。▲でページトップへ、▼でページ最下部へ(実際は最下部まで飛ぶとその下に自動読み込みで次ページが読み込まれる)移動する。
つづいて各Tweetを見てみよう。
それぞれのTweetにマウスをのせるとTweetの背景色が多少グレイになり、右下にメニューが、右側にアイコンが2つ表示される。
![$macsimのブログ-PBT+004](https://stat.ameba.jp/user_images/20100515/17/macsim/29/90/j/t02200028_0620008010542707691.jpg?caw=800)
メニューは
JA:日本語への翻訳。翻訳する言語はオプション画面で設定する。日本語への変換なのでJAと表示されてる。
Retweet:公式RT
RT:コメントを入れられる旧タイプのRT
Via:あんまり見かけないかもしれないが、引用付のリプライの形式の一つ
DM:ダイレクトメール
Reply:返信
ReplyAll:そのツイートにあるユーザ全員にリプライ
![$macsimのブログ-PBT+005](https://stat.ameba.jp/user_images/20100515/17/macsim/86/04/j/t02200045_0620012610542707692.jpg?caw=800)
これは翻訳をした時の画像。おお、scalziも俺と同じタイミングでシャトルの打ち上げ見てたのかw。
右側のアイコンの上はfav。
その下のアイコンはちょっと変わった機能を提供してくれる。
![$macsimのブログ-PBT+006](https://stat.ameba.jp/user_images/20100515/17/macsim/d2/0a/j/t02200211_0800076810542709590.jpg?caw=800)
この画像の部分のTweetは文字もプロフ画も表示されていない。そして右のアイコンの形が少し異なっているのがわかるだろうか?人型の左にある文字が「+」になっている。
このアイコンはいわゆるミュートボタンだ。一時的にTL上からそのユーザのTweetを見えなくすることが出来る。(一時的と言っても、解除するまではブラウザ再起動でもPC再起動でも表示されることはない)
解除すれば当然表示されるようになる。
Tweetの右側に画像が引っかかっているように表示されている場合がある。マウスを乗せると斜めの画像がちゃんとなる。
これはTweet内にTwitpicやFlickr等の投稿された画像やyoutubeのリンクがあるとサムネイルが表示される。
クリックすると写真の場合は実際の画像が、youtubeの場合は対象の動画がlightbox表示される。
youtubeはそのまま再生可能だ。またlightbox表示時の「Original Link」ボタンから元のページに飛ぶことが出来る。(当然Tweet中のリンクを踏んで直接飛ぶこともできる)
![$macsimのブログ-PBT+007](https://stat.ameba.jp/user_images/20100515/17/macsim/68/b9/j/t02200211_0800076810542709589.jpg?caw=800)
![$macsimのブログ-PBT+008](https://stat.ameba.jp/user_images/20100515/17/macsim/85/f4/j/t02200211_0800076810542709591.jpg?caw=800)
![$macsimのブログ-PBT+009](https://stat.ameba.jp/user_images/20100515/17/macsim/ad/74/j/t02200211_0800076810542709595.jpg?caw=800)
そして、ちょっと違う感じのTweet表示を見てみよう。Tweet部分が矩形に囲まれている。マウスを乗せてみると、すぐ上のTweetにもメニューが表示される。
![$macsimのブログ-PBT+010](https://stat.ameba.jp/user_images/20100515/17/macsim/6f/ee/j/t02200081_0620022810542709593.jpg?caw=800)
このTweetはすぐ上のリプライTweetの元になったTweetが表示されているのだ。
このようなTweetをなんどもやり取りしている様な場合は、特定の回数を超えていると「more」ボタンが表示される。このボタンを押すとTweetのやり取りが全て表示される。
![$macsimのブログ-PBT+011](https://stat.ameba.jp/user_images/20100515/17/macsim/55/45/j/t02200087_0620024510542710463.jpg?caw=800)
![$macsimのブログ-PBT+012](https://stat.ameba.jp/user_images/20100515/17/macsim/a2/4f/j/t02200123_0620034610542710462.jpg?caw=800)
また、bit.ly等の有名な短縮urlであれば、マウスを乗せるとポップアップで実際のurlが表示される。
![$macsimのブログ-PBT+013](https://stat.ameba.jp/user_images/20100515/17/macsim/f7/fb/j/t02200031_0620008810542710461.jpg?caw=800)
Tweetするときは上部にある「New Tweet」のボタンを押すとテキストボックスが出現する。また右側のサイドメニューのNew TweetやスターメニューのNew Tweetからでもテキストボックスが出現する。
![$macsimのブログ-PBT+014](https://stat.ameba.jp/user_images/20100515/17/macsim/22/ae/j/t02200211_0800076810542710465.jpg?caw=800)
![$macsimのブログ-PBT+015](https://stat.ameba.jp/user_images/20100515/17/macsim/26/92/j/t02200211_0800076810542710466.jpg?caw=800)
テキストを入力すると「ツイート」ボタンが押せるようになる。
![$macsimのブログ-PBT+016](https://stat.ameba.jp/user_images/20100515/17/macsim/9b/1d/j/t02200071_0570018310542711009.jpg?caw=800)
少し黄色っぽくなっている部分が色々な機能だ。
Clear:入力内容の消去
Close After Tweet:クリックでon/offが切り替えられる。「ツイート」ボタンを押してツイートした後にテキストボックスを消すかどうかを指定
Get Original Link:RT等で短縮urlが文中に挿入されている際にそれを復号してくれる
Shorten URL:テキスト中の普通のurlをbit.lyで短縮urlに変換
「ツイート」ボタンの左に直前のTweetが表示される。
また、前回Tweetをテキスト入力済みの状態で中止(右上の×ボタンで終了)した場合、1件だけだがDraft(下書き)として保存してあり表示される。
![$macsimのブログ-PBT+017](https://stat.ameba.jp/user_images/20100515/17/macsim/62/29/j/t02200083_0570021510542711008.jpg?caw=800)
チェックの部分をクリックすると、テキストボックスに反映される。
RTやvia、Reply等は、クリックするとサブウィンドウが表示された時に、テキストボックス内にテキストが挿入されている。
![$macsimのブログ-PBT+018](https://stat.ameba.jp/user_images/20100515/17/macsim/29/74/j/t02200131_0570034010542711010.jpg?caw=800)
さてと長くなったので、他の機能の紹介は次回にしよう。
【今日のおすすめ動画のコーナー】
今回紹介する踊ってみたはみぃりさん。
スタイルも踊りもとっても素敵なみぃりさんは先月の4月14日が投稿一周年記念だったようだ。
今回の動画は約1ヶ月遅れの記念動画だが、待った甲斐がある仕上がりだ。
ボカロ曲のウタカタ永焔鳥にオリジナルの振り付けをして踊ってくれている。
一周年おめでとう!
( ^-^)ノ∠※PON!。.:*:・'°☆。.:*:・'°★°'・:*congratulation
素敵な踊ってみた動画をありがとうです(⌒▽⌒)