CamCam

CAT | Tips

高機能なWeb版のTwitterクライアントHootSuiteのデザインを
↓こんな風にするSafari機能拡張を作ってみました。

サンプル
screenshot_04.jpg

前やったFluid版をSafariに移植しただけですが…

HootSuite View ダウンロード



****インストール方法

ダウンロードしたHootSuite View.safariextz
ダブルクリックするだけ。

Safariがインストールするか聞いてくるのでポチッとインストール。

HootSuiteのテーマは、Blue SteelかClassicでの利用をおすすめします。
※左上のフクロウアイコンから、設定→テーマ で変更出来ます。

*********
Safari機能拡張は、ver5.0.1以降が必要です。
また、環境設定/機能拡張 で機能拡張を「入」にして下さい。

Facebookのニュースフィードをゆったりさせる
Safari機能拡張を作ってみました。

Facebook Feed View ダウンロード


窮屈なFacebookニュースフィードのフォントとマージンを大きくします。

そ、そんだけです。

そんだけですが、Facebookライフに軽く余裕をもたらす、はず。
イマイチだったらとっととアンインストールして下さいませ…

****インストール方法

ダウンロードしたFacebook Feed View.safariextz
ダブルクリックするだけ。

Safariがインストールするか聞いてくるのでポチッとインストール。

*********

機能拡張を使うには
Safari機能拡張は、ver5.0.1以降が必要です。
また、環境設定/機能拡張 で機能拡張を「入」にして下さい。
詳しくはこちらあたりで

不具合、ご要望などありましたらコメントでどうぞ!



そんなわけで、Facebookの環境を整えるのでございます。

Safariユーザなので、やはりエクステンションを使ってみたい。
いや、使わなければならない。

まずはエクステンションギャラリーの3つを試してみる。

Better Facebook!

screenshot_01.jpg
こんな風にタブでニュースフィードを仕分けしてくれたりめちゃ高機能。
余分なボタンが邪魔だったので、OptionのDisplay設定は全部チェック外した。
機能が多すぎて把握しきれていないが、レンホー級の仕分けが便利。

Facebook Cleaner
広告表示を消してくれてサイトがとても見やすくなるんだけど
イベントの参加者エリアも消してくれやがったので、一旦オフ。

Facebook Photo Zoom
画像をマウスオーバーで拡大してくれる機能拡張。
鬱陶しかったので速攻でオフ。


慣れてきたらSafariでもいいような気がしてきつつも
ここはまたFluidでカスタマイズしてみるか。


Mac&iPhoneアプリなどは次回で。

この間の日曜日にTwitterが長時間メンテでダウンしていたので
mixiのようなものかなと、登録から1年以上経ってたけど
ずっと放置してたFacebookをあれこれ使ってみた。

(Twitter難民と化し、せっかくの日曜日なのに家庭を顧みず
Facebookに手を出すオトコCamCam)

Facebookは、アクセス数がGoogleを上回る人気サービスなので
人を惹きつける何か大きな魅力があるに違いない!
一度しっかり使ってみたい!と思ってたのでいい機会でした。

Facebook、Google抜き米国でアクセス数1位に – ITmedia News


SNSなのでmixiのようなものという先入観で使ってみたら、さにあらず。
超高機能なTwitterでしたよ。

ニュースフィードという、Twitterのタイムラインと似た機能を中心に展開して
このニュースフィードが、1つのフィードにスレッドで「気楽に」コメントが付けられ、Twitterとは少し違いますが、やり取りがスッキリ見られて何ともいい感じです。

いろいろと揉め事の種になるmixi日記とは全く別ものです。(笑)

かなり高機能ですが、基本ニュースフィードで何かやってればいいだけです。
感覚的にはTwitterにかなり近いですかね。
人気がある理由が分かった気がします。

もちろん、SNSなのでお友達にならないと交流できませんけどね。

こうなるとTwitterとの使い分けが難しくなってきますが
両方のいいとこ取りでうまく活用する流れでしょう。

iPhoneアプリや、ブラウザのアドオンもいろいろあるので、
自分の環境を早く整えたいです。この辺りはまた。


jQueryの非同期通信で、

$.ajax()がIEで通信結果をうまく拾えない問題に出くわしたので
対処の覚え書き。

$.ajax({
          	type: "GET",
          	cache: false,
          	data:"data=1",
        	url: "http://****",
		success: function(data){
          	  alert("data");
 		},
 		error:function(data){
          	  alert("error");
   		}
});

3行目、cache: falseを追加して
通信結果をキャッシュしないようにする。

高機能なWeb版のTwitterクライアント、HootSuiteを最近使い始めました。

Web版なのでSafariやFirefoxでユーザスタイルを使えば
CSSで自分の好きなデザインに変えられるわけです。
エクストラもいろいろ出てます。

早い話、HootSuiteのテーマがイマイチなので変えたくなるわけです。
変えられるとなったら変えるのがオトコでございます。はい。

で、今回はブラウザのユーザスタイルではなく
配布されているFluid版(Macのみ)でやってみました。

デスクトップではTweetieのMac版のデザインが気に入っていたので
BlueSteelテーマをベースになるべく近づける方向で。

今回Macのみターゲットなので、Webkitベースの独自CSS使い放題でうれしすぎ。

結果はこれ。
screenshot_06.jpg

だいぶ見やすくなった…と思う。


せっかくなので設定ファイルを配布します。

HootSuite – CamCam



ファイルの使い方は以下のようにするだけ。たったの3ステップ!w

HootSuiteを使ってない方はまずはユーザ登録してね。
でもってここでHootSuite Desktop (Fluid)をゲットします。

HootSuite – Apps and Plugins



1.Fluid版HootSuiteを立ち上げログインしたら、テーマをBlueSteelに変更。
 ※左上のフクロウアイコンから、設定→テーマ で出来ます。

2.設定ファイルをダウンロード

3.ダウンロードした、Userstyles.plistを
ユーザ/ライブラリ/Application Support/
Fluid/SSB/HootSuite/Userstyles

に入れたらFluid版HootSuiteを再起動

以上です。

設定変更は、preference/Userstyles で。
CSSなので後はお好きなように。

今日みたいな大雨の日はjQueryリファレンスを読んで、
画像の表示をなんとかしたくなりますよね。
(ならないですかそうですか)


ということでjQueryで
画像サイズを取得して特定のエリアにぴったりはめ込んでしまうという
(リサイズ&クロップする)サンプル。

画像の縦横比率、ピクセルサイズ関係なし。
指定エリアにめいっぱい収めて、
はみ出るところはクロップしてセンタリングします。

ブログやシステムでユーザがアップした
どうやったらそんな画像になるんだみたいな
斜め上から来たトンでも画像でも、スッキリ一覧に。

せっかくなので、フェイドインとローディングも付けてみた。

CamCam サンプル



CSSもjQueryで割り当ててるので、Javascriptを使わない環境用に
別途CSSは用意した方がいいかも。(一応書いてはある


でまあこういうのをプラグイン化したらいいんだよな。
っていう話しは次回あたりで。


****
Windows IE 6でもOK.
Firefox Chrome Safariで確認。


Older posts >>