Twitter閲覧用のごくシンプルなユーザスタイルシート

Twitterのタイムライン表示をカスタマイズしたいと思い、ユーザースタイルシートを作った。

CSS適用前


CSS適用後
サイドバーを消して幅可変にして、その他要素を詰めた。※クリックで拡大


何を思ってこんなことをしたかというと、ブラウザのウィンドウを切り離して、↓こういう風にメッセンジャーチックに見られるようにしたかった。

表示を確認している環境

• Windows XPでChrome 6 betaを使用（Macでも問題ないと思う）
• ユーザ定義CSSの指定は拡張機能のStylishを使用

CSS

/* 外枠の調整 */
#container {margin: 4px auto;width:100%;}
.wrapper {padding:5px 0px;}
ol.statuses span.status-body {width:auto;}

/* content 領域の調整 */
#content {margin:4px auto;width:100%;
border-top-right-radius:5px 5px;border-bottom-right-radius: 5px 5px;}
.columns {margin-bottom:0px;}

/* header 調整 */
.content-bubble-arrow {display:none;} 
#header {text-align:left;letter-spacing:-2.5px;}
#header .top-navigation {white-space:normal;background-color: transparent;}
#header .top-navigation li a {font-size:xx-small;padding:0;}

/* twitterロゴの消去 */
#header img {display:none;} 

/* サイドバーの消去 */
#side_base {display:none;} 

/* いまどうしてる？の削除 */
.bar .doing {display:none;}

/* 自分の最新ツイートの消去 */
#update_notifications {display:none;} 

/* テキスト入力エリアの調整 */
.status-update-form .info {padding:0 10px;}
#status_update_box .info textarea {width:100%;padding:0;height:4em;}
fieldset.common-form {margin:0;}

/* テキスト入力エリアの削除（実行する場合は有効化する） */
/* #status_update_box {display:none;} */

/* 入力ボタンの位置と文字サイズ */
#tweeting_controls {padding:0;}
#tweeting_button {padding:2px;text-align:center;font-size:10px;}

/* 文字カウントの位置 */
#status_update_box {position:relative;}
#status-field-char-counter {font-size:medium;
  position:absolute;top:55px;right:75px;}

/* 新しいツイートが...告知 調整 */
a#results_update {margin:0;}
#new_results_notification .minor-notification 
  {padding:1px;text-align:center;font-size:10px;border-color:#FFFFFF;}

/* ホーム文字消去 */
#heading {display:none;}

/* Timeline 文字調整 */
#timeline, #timeline .meta, #timeline .actions-hover {font-size: 10px;}
ol.statuses li {padding: 2px;}
ol.statuses li.status, ol.statuses li.direct_message {line-height: 14px;}

/* Timeline 改行・折返しの解除 */
#timeline {word-break:break-all;}
#timeline .meta {display:inline;}

/* Timeline ユーザアイコン調整 */
ol.statuses .thumb img {height:23px;width:23px;}
ol.statuses span.status-body {margin-left:28px;min-height:25px;}

/* Timeline ユーザアイコンを消去する場合は有効化  */
/* ol.statuses .thumb img {display:none;}
ol.statuses span.status-body {margin-left:0px;min-height:1em;} */

/* もっと読む 調整 */
#more {padding:1px;font-size:10px;font-weight:normal;height:16px;}
#content div.section > div {margin:0;}

/* フッタ 調整 */
#footer {background-color:transparent;text-align:left;
  white-space:normal;line-height:1.4;margin-top:0;}

/* ユーザーページ */
#content h2.thumb {font-size:10px;line-height:1em;}
#content h2.thumb img {height:23px;width:23px;}
.profile-user h2 div {margin-left:28px;}
body#profile #content h2.thumb, body#profile_favorites h2.thumb {padding-bottom:3px;}
.profile-controls .is-relationship {font-size:10px;}
.profile-controls {padding:0px 5px;margin-bottom:0;}

適用方法

• 1.Chromeに拡張機能のStylishを導入。[拡張機能]からStylishのオプションを選択し、[Add new style]で編集へ
• 2.編集画面の[Code]に上のCSSを流し込む
• 3.[Applies to]で[URLs on this domain]を選んで、ボックスに「twitter.com」を指定し[Save]して完了。

おまけ

Chromeのアプリケーションショートカット機能を使うと、メニューなどが消えてブラウザが枠だけになる。普通のアプリケーションっぽく使えるので、なお一層いい感じ。

So-netブログにツイートボタンを設置する方法

Twitterから「ツイートボタン」がリリースされた。

概要 → http://gigazine.net/index.php?/news/comments/20100813_tweet_button/
ツイートボタンのページ → http://twitter.com/goodies/tweetbutton

ここで出力されたコードを記事本文に挿入してあげれば、So-netブログにも簡単にボタンが設置できる。

ただ、このコードで取得されるURLやタイトル、カウントなどの情報は、表示されているページのものになる。なのでSo-netブログではこのコードをそのまま、HTMLの編集で記事（article）のフッタなどに挿入してしまうと、記事ページを表示した場合以外では期待したような動作にならない。

例えばトップページを表示した場合、ブログのルートURLに基づいた情報が取得され、各記事ごとのツイート数ではなくルートURLのカウントが並んでしまうといった残念な感じになる。

ということで、こりゃダメだあと思っていたら、DevページのTwitter Buttonのドキュメントにカスタマイズの方法が載っていて、URLパラメーターをいじる方向で試してみたらうまくいった。

<a href="http://twitter.com/share?url=<% article.page_url | html %>&amp;text=<% article.subject %>" class="twitter-share-button" data-count="horizontal">Tweet </a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

リンクURL（http://twitter.com/share）に続けて、シェアするURLに〝ボタンが設置されてる記事のURL〟、本文に〝その記事タイトル〟が反映されるよう、So-netブログの変数を明示する。今回の具体的な追加部分は下記。

• url=<% article.page_url | html %>
• text=<% article.subject %>

これならトップページを表示した場合でも、各記事ごとにデータを取得してくれます。

このコードを、 [デザイン] > [ レイアウト] > [記事カラム] > [コンテンツHTML編集] で、好きなトコロに挿入すればOK。自分は共通テーマの下に入れてみた。

より詳しいカスタマイズは → http://dev.twitter.com/pages/tweet_button

所変われば品変わる

Goolge画像検索の検索結果ページで表示されるサムネイルは、base64でエンコードされてDOMに埋め込まれているようですよ、という話を目にした。

googleの画像検索の結果がdataスキームに変更：一般システムエンジニアの刻苦勉励：ITmedia オルタナティブ・ブログ

googleの画像検索の結果がdataスキームに変更：一般システムエンジニアの刻苦勉励：ITmedia オルタナティブ・ブログ via kwout

これにより、画像ファイルごとのリクエストで発生するオーバーヘッド分を節約できる、ということなのだけど、、、ねぇ。

こういうテクニックを、ノウハウとして知ってる人はたくさんいるんだろうけど、そんな数ミリsecばかりの、ちょっとした誤差で吹き飛んでしまうような改善に、手をつけるところまで来てしまっているということにあらためてため息が出た。

スケールがスケールなので、Googleがやる分には実際、相当数のリクエストが節約できることになって非常に合理的な施策なのだろうけど、同じテクニックでも、自分でやったら非合理的もいいところだなぁと思って世界の違いを感じた次第。

ChromeでiPhoneのブラウザUser-Agentを設定するの覚え書き

WindowsXPの場合、Chromeのショートカットの「リンク先」欄に以下の文字列をそのまま設定。

iPhone3GS iOS4の場合：

"C:\Documents and Settings\**ユーザ名入る**\Local Settings\Application Data\Google\Chrome\Application\chrome.exe" --user-agent="Mozilla/5.0 (iPhone Simulator; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7"

User-Agentの文字列は、こちらを参考にさせていただいた。
http://blog.elearning.co.jp/?p=6859

Amazon.com のMP3 Downloadを使うメモ。

米国Amazon.comのMP3 Downloadを使ってみた。とりあえず、価格・品揃え・仕様面で、洋楽はもうこれでいいやと思えるサービス。一度使ってしまうと、日本のサービスが歯がゆい。。

Amazon.comのMP3 Downloadについて

• フォーマット：DRMフリーのMP3
• ビットレート：自分が買ったのは256kbps前後（VBR）だが、モノによって異なる
• アルバム単価：$5〜$9がボリュームゾーンで
• 品揃え：程度は不明だけど、かなり揃ってる感じ
• 制限：買えるのはアメリカ国内からのみ

洋楽の膨大な品揃えや、聴きたい時にすぐ買える点を思えば、TSUTAYAなどのレンタルと比べても、その価格差以上にじゅうぶん価値があると思えるプライシングです。同じダウンロードでもiTunesの価格（1,500円〜）だと、バックアップの意味で輸入盤CDを買おうかと迷うことがありますが、Amazon.comは日本円で500〜800円程度なので、そこは割り切ってサックリ買えるレベル。

ただし、アメリカ国内のみ提供のサービスで、日本からは普通には買えないのが難点。購入しようとすると弾かれます。

日本から買う場合の障壁

そもそも米国内向けのサービスなので、障壁とかいうのもヘンなのですが、、、サービス仕様としてコントロールされていると確認できた点が以下。

• 障壁１：MP3の決済は、日本のクレジットカードだと弾かれる
• 障壁２：ダウンロードは、アクセス元がアメリカじゃないと弾かれる

障壁１：ギフトカードを使って回避する

日本のクレジットカードでも、Amazon.comでは普通に買い物ができます。ただし、MP3の決済では弾かれました。自分は海外のクレカは持ってないので、ギフトカードを活用してみたらイケました。

Step１．Amazon.comでアカウントをふたつ（AとB）を用意する※
Aのアカウントにはクレジットカードを登録し、Bのアカウントには登録しません。Bにアメリカの住所（配送先）登録が必要かどうかは未確認です。自分はアメリカの住所（転送サービスで使った住所）を入れっぱなしです。

Step２．Aのアカウントでgift cardを購入して、Bのアカウントに送る
E-mailで送るgift cardだと数分後に届きます。まずは少額で試すことをオススメします。

Step３．BのアカウントでMP3を購入し、gift cardで決済
これでMP3の決済まで行けますが、Bのアカウントに日本のクレカなど他の決済方法が登録してあると失敗するようです。

※この時点では、決済までは通りますが、障壁2の理由でダウンロードは失敗します。

障壁２：無料VPNサービスを使って回避

日本からアクセスしてMP3を購入しようとすると、〝The sale of MP3 Downloads is currently available only to US customers〜〟と拒絶されてしまいますが、アメリカ国内に接続する無料のVPNサービスを経由することで回避できました。

自分が使ったのはHotspot Shield というサービス。（参考）

無料で利用できるプロキシサーバなどと比べて、通信が安定していてダウンロードもけっこう余裕です。見てるページに無理矢理広告バナーを入れられたり、たまに宣伝ページが自動で開かれたりして鬱陶しい面もありますが、その辺はまあ妥協ということで。。（なお通信を経由していることになるので、この辺は一定の判断を）

上記の設定で、MP3 Downloadが利用できました。今なら為替レートも有利なので非常におトクです。

余談：AndroidにプリインストールされてるAmazon MP3 Downloadアプリはうまくいかない

そもそもAmazon MP3 Downloadを試してみようと思ったのは、nexus one（Android2.1〜）に、Amazon MP3 Downloadのアプリがプリインストールされていたのがきっかけ。試しに使ってみようと思ったが、使えなかったので少し意地に。

このアプリは、Androidを日本語のロケールで使用してる状態だと〝そのロケールはサポートしてない〟と蹴られてしまうが、ロケールを英語に変えると普通に購入ができるようになります。ただし、できるのは代金の〝支払い〟までで、肝心のダウンロードが出来ません。（米国外からなので弾かれているのだと思います）

上記の方法と同様に、プロキシサーバなどを経由すれば可能かもしれませんが、そうでもない限りはAndroidのMP3 Downloadは試さない方がよさげかもです。。。

GoogleのReaderでフォルダのリネームが可能になった

GoogleのReaderでフォルダのリネームが可能になった。

これまでは、もしフォルダ名を変えたかったら、新しいフォルダを作成してから、登録しているFeedをすべて移し替えるという、非常に面倒な手間のかかる作業が必要だった。

こういう痒いところに手の届く的な小さい積み重ねは、依存しきってる人間にとって非常にはありがたやありがたや。依存度がより高まる。

Google Font APIつかってみた

Google Font API を使ってみた。いわゆるWebフォント。

デバイスにインストールされたフォントではなく、Webからダウンロードしたフォントを使うしくみ。このAPIではまだ日本語のフォントは無いので、日本語には使えないのだけど、英語用だと以下のような感じ。

I want to go home. (IM Fell DW Pica)

I want to go home. (Josefin Sans Std Light)

I want to go home. (Reenie Beanie)

I want to go home. (Tangerine)

これけっこういい！

商用でWebフォトンを見かけるようになったけど、デザインを気にする企業サイトが使うものかと思っていた。が、案外普通のブログでもいい感じがする。現在のフォントの種類はこんな感じだけど、使いやすい日本語のフォントが増えれば楽しそう。

Google Font APIは使うのもカンタン。使いたいフォントを選んでリンクして、CSSで指定するだけ。So-netブログでも、HTMLの編集で<head>に入れてあげればすぐに使えます。

<link rel="stylesheet" type="text/css" 
href="http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light">

詳しい使い方は、Google Font API にあります。

ヽ(´▽`)ノおおっ

ヽ(´ρ｀)ﾉ たのしーぃ。

(´･A･`)

(´･ω･`)


(ﾉД`)　飽きた。

一行AAでやると少し微妙かな。。

iPhoneのSafariからブログ投稿を試してみたら

iPhoneのブラウザ（Safari）からSo-netブログの投稿を試してみたのだけど、案外普通に使えるということがわかった。

PC用の管理画面なので、iPhone用に最適化されたインタフェースではなく使いにくいのは当然なのだけど、フルブラウザということもあり表示は問題ないし、入力もできない訳でもないので、まあ使える。投稿アプリと比べたら、表示や入力のしやすさでハンデはあるが、致命的に劣ってるという感じでもない。

アプリと比べてよろしくないのは、Safariで記事を入力するテキストエリアにフォーカスした際に、自動的にSafariの画面がズームインして拡大幅が固定されるのだけど、それでやや見づらくなるのと、Safariからだと画像のアップロードが出来ないという点ぐらいかも。ソフトウェアキーボードは同じものを使うので、タグのうちにくさとかは一緒。

なので、端末の画面解像度が高くなって画面が広くなる、もしくはページ側の仕様を少し改善すれば、充分使えるレベルかも。とりあえず、アプリである必然性はない気がした。

ただまあ実際、iPhoneではめんど臭くて長文を書く気にはならない。ツイッターくらいが最適かな。。

※このエントリはiPhoneから投稿しています。画像のみあとからPCで追加。

So-netブログでWindows Live Writer を使ってみる

MicrosoftのWindows Liveの「Writer」という、ブログ用のエディタソフトを使ってみた。かなり便利かも。ただ、So-netブログで使う場合、設定で少し難があったので、設定方法について以下メモ。

Windows Live Writer のざっくり特徴

• オフラインで記事の編集や投稿ができる、ブログ専用のエディタアプリケーション（Windows専用）。
• 無料。メッセンジャみたいにうるさい広告とかも出てこない。有料版とかもない。
• 編集モードとしては、いわゆるリッチエディタとソース直接編集の2タイプある。
• APP（Atom Publishing Protocol）やXML-RPCで投稿する。
• マルチアカウントに対応。カテゴリやping、TBもサポートしていて、とりあえず不足は無い、気がする。

Windows Live Writer にブログを登録する主なステップ

1.ダウンロードとインストール
MicrosoftのWindows Liveのページからダウンロードしたら、普通にインストールするだけです。

2.ブログアカウントの登録

インストールが終わるとブログ設定を行います。ここでは、AtomAPI／XML-RPC専用のIDとPWを登録します。So-netブログで使っているIDとPWではないので注意です。

なお、AtomAPI／XML-RPC用のID/PWは、ブログ管理画面の[設定] - [AtomAPI／XML-RPC] で、「パスワードを発行する」から発行できます（管理ページへ）。

3.ブログ種類の選択

アカウントを登録したら、この画面で、ブログの種類とSo-netブログのエンドポイントを登録します。

• 使用するブログの種類 → WordPress
• ブログのリモート投稿URL → http://blog.so-net.ne.jp/_rpc

ドロップダウンリストの選択肢には「So-netブログ」は無いので、普通なら「Atom Publishing Protocol」を選択しそうですが、それだとエラーが出て失敗しました。ナゼかよくわかりませんが、WordPressでうまくいきました。

「ブログのリモート投稿URL」にはSo-netブログのエンドポイントを入力しますが、この情報はマニュアルの「他のツールからの投稿(XML-RPC)」にあります。

以上で基本的な設定は完了。

良い点・悪い点 個人的な感想

良かった点

便利と感じたのは、ローカルでプレビュー出来る点。

Writerにブログを登録すると、スタイルなどのテンプレート情報をローカルにダウンロードして、プレビューの際に適用してくれる。なので、ブログを書きながらすぐ見栄えが確認できて、Web上でプレビューする時のようなストレスがまったく無い。これがいい。自分はHTMLで直接入力したいので、専用エディタの類は不要かと思っていたけど、プレビューを頻繁に行うので、このプレビューのためだけでも使う価値はあるかなと思った。

同じようなことは、Dreamweaverなどでもできるのかもしれないし、できるならタグの補完などもあるので絶対そっちの方が便利なハズだけど、とりあえず環境構築するような手間が無いのでWriterは楽。ちなみにHTMLレンダリングは、IEのコンポーネントを使っている様子。

あと、余計な機能が無いせいか、動作が軽いのもいい。Microsoftの中でもあまり重要視されていないプロダクトゆえ、重厚長大にならず余計な機能が付加されてない、というだけなのかもしれないけど。

気になった点

少し嫌だったのが、「ソース」で直接編集したあとに、リッチエディタライクの「編集モード」タブに切り替えて、再度「ソース」に戻ると、HTMLのソースコードに余計な改行が入れられたりする点。まあ「編集モード」タブを使わなければいいだけなのでたいした問題ではない。

ということで、このエントリーは、Windows Live Writerを使って書いてみました。これはしばらく使い続ける気がする。

追記

下書きで投稿しても、公開されてしまう。

携帯電話キャリア別 User-Agent 一覧

• 作ろうiモードコンテンツ：ユーザエージェント | サービス・機能 | NTTドコモ
• ユーザエージェント一覧（ソフトバンク）
• KDDI au: そのほかの技術情報 > ユーザーエージェント

参考：ChromeでUser-Agentを変更する