WebサイトでjQueryを使ってTwittelatorの画像表示のようなエフェクトを追加する方法


Caps

最近UIが一新され、新たなアプリケーションのインターフェイスを形にして切れた「Twittelator」。
そのインターフェースの中で自分が一番気になった画像表示のエフェクトをjQueryを使ってcdbk.net CREATIVESのshowcaseで形にしました。
使うのはjQuery.js(今回は1.4.2)とイージングのエフェクトを簡単に追加できるjQuery.easing.js(1.3)のみ。
エフェクトを施したい画像を<span class=”jumpin”></span>で囲みcssでdisplay:block,overflow:hiddenを指定。
JavaScriptはjQuery、easingを<head>内に追加したあとに下記を追記。

//初期表示設定
function jumpin_set(){
	$(".jumpin").each(function(){			//指定するクラス
		var img_w = $(this).width();		//デフォルトの画像幅取得
		var img_h = $(this).height();		//デフォルトの画像高取得
		$(this).attr({"data-h":img_h});		//デフォルトの画像高を属性として保存
		$(this).animate({opacity:0.5,"box-shadow":"0 0 2px #111",width:img_w,height:(img_h/4)},100); //画像の高さを縮小
	});
}
$(document).ready(function(){
	$(window).load(function(){
		setTimeout(function(){
		jumpin_set();
                }, 100);
	});
	$(".jumpin").hover(function(){//マウスオーバー時の動作
		var img_w = $(this).width();
		var img_h = $(this).height();
		var next_h = $(this).attr("data-h");
		if(next_h){
		$(this).animate({opacity:1,"box-shadow":"none",width:img_w,height:next_h},1000,"easeOutElastic");
		$("img",this).animate({height:img_h},100).animate({height:next_h},100);
		$(this).removeAttr("data-h");
		}
	});
	$(".jumpin").mouseout(function(){//マウスアウト時の動作
		var img_w = $(this).width();
		var img_h = $(this).height();
		$(this).attr({"data-h":img_h});
		$(this).animate({opacity:0.5,"box-shadow":"0 0 2px #111",width:img_w,height:(img_h/4)},1000,"easeOutElastic");
	});
});

サンプルスクリプト
上記でスクリプトやCSSがバッティングしていなければ動作すると思います。
続きを読む “WebサイトでjQueryを使ってTwittelatorの画像表示のようなエフェクトを追加する方法”

ブログ(+コメント)とTwitterを連携させる方法を紹介


試しに使ってみたところ、予想以上にいい感じなので紹介。
WordPress限定にはなってしまうのですが、

  1. ブログに登録するとTwitterにショートカットを投稿(WordTwit)
  2. しかもそのショートカットのアクセス数を軽く集計(bit.ly-API
  3. そして記事をReTweetできるボタンを追加してRetweetをコメントに反映(Topsy Retweet Button)

この3つを追加(bit.lyはサイト登録をしてAPI-KeyをWordTwitの管理画面で追加)することでブログ→Twitterだけでない、相互の連携をとった形でTLをいかす事ができます。

Hackintoshで音が出るようになった方法

ネットブック(HP mini1000)をハッキントッシュにしたものの、音が鳴らないままだったのですが、デバイスのエクステンションを入れ替えることで無事になるようになりました。
kext helperというツールを用意して、まずは、システム→ライブラリ内のExtensions.mkextとExtensions内のAppleHDA.kext を削除(もしくはリネームして移動)して、その後kext helperを使い、VooDooHDAをインストール。その後再起動。
するとシステム環境設定のサウンドには画像のように項目が追加されている。

入力も同じように項目が増え、選択するとちゃんと音が鳴るようになりました。
ウェーブミュージックシステム

ネットラジオのもう一つの方法「KeyHoleTV」

来月から、在京・在阪のAM/FM局で放送のネット配信が始まる。
地区での制限はあるものの、ラジオを必要としない、パソコンで聴けるラジオ放送が実現する。
それとは別に「KeyHoleTV」というソフトを介して一部のラジオやテレビを視聴することができる。
現段階ではナローバンドでの対応なので音質や画質に多少何ありだが、技術的には地デジを上回るスペックを持っているらしい。
こちらは東京にいながら京都のFMを聴いたりと行ったことができ、また著作権を侵害しない限りは自ら配信することもできる。近頃流行のUstreamのように手軽にとは行かないかもしれないが、今後新しい放送チャネルとして期待できそうな予感。
近々iPhone版が出るとかでないとか・・・
実は地デジの放送が数秒遅れて配信されていることについてここでは詳細は語らない。

iPhoneとPCでタスク/スケジュール管理をする方法

いつも持ち歩いているiPhoneやiPod touchでタスクやスケジュールの管理ができると見たいときに見れるけれど、実際、管理しようとしてもスケジュールとタスクは別々でしか見れないし、Windowsのデフォルトのツールでは同期ができない。
そこで自分が使っているタスク/スケジュール管理方法を紹介。
使っているのはPocket Informant

ToodledoというToDo管理できるサイト
おなじみのGoogle Calendar
そしてiPhone / iPod touchアプリのPocket Informant

PCで使っているツール類は基本的にWebブラウザでアクセスするので特に特別なソフトが必要になったり、特定のOSでないといけないということがありません。
はスケジュールタスク管理アプリでToodledoとGoogle Calendarとネットを介して同期することができるのでiPhoneユーザーの方は便利。
ただ、価格が手帳一冊分ぐらいしてしまうのでお試し用のPocket Informant LITEを一度使ってみて使えそうであれば買うというのが良法でしょうか。
Toodledoの画面

タスクをフォルダで分けて管理できるタスク管理ツールでPocket Informantでも同じようにフォルダ毎に管理できます。
Pocket Informant

タスクのリスト表示、1日の時系列表示、一週間、一月とさまざまな表示が可能でガントチャートで確認できるツール。もちろん検索もできるので過去の振り返りも簡単です。iPhoneやiPod touchで可能なフリックの操作で次の日への移動なども直感的にできます。
Mac ソフトのことなら act2.com

HP mini 1000をハッキントッシュに その方法メモ。


用意するもの
HP mini 1000(すべてフォーマットしてしまうのですべて消去したもの)
Mac(ちゃんと動いているもの)
OS X 10.6 (Snow Leopard)
外付けのHDDもしくはUSBメモリー(8GB以上)
※◫☆△◎(Bootできるようにするツール)
クローンコピーツール(OS X上で動くもの)
順序はMacから外付けHDDにOS Xをインストール(パーティションなどはGRID対応でシステムをインストールできるように事前にフォーマット)し、その後、そのインストールしたドライブを ※◫☆△◎ でWindows機で起動可能なものに変換処理。
その後、HP mini 1000に接続して外部ドライブからOS Xを起動、HP mini 1000のドライブをすべてフォーマットしてOS Xをインストールできるようにする。その際、8GB以上の容量がないとインストールができないことも・・・
そして、その空いたところにクローンコピーツールを使って外部HDDなどにインストールしたデータをすべてHP mini 1000にコピー、その後NetbookBootMakerをかけ、HP mini 1000を外部HDDのOSを使い、アップルマークがでている画面のローダーのゲージが減る前にボタンを押す。
起動ドライブ選択画面でHP mini 1000にインストールしたドライブをカーソルで指定、その際↓をおして「Boot Ignore Caches」を行い起動。これで完成。したはず。
インストールというよりは実行環境をネットブックに移しただけといったほうがよさそうです。
音がならない場合はこちらのエントリーを参照「Hackintoshで音が出るようになった方法
詳細知りたい人はTweetなり、メールなり、問い合わせなりにて。実際にやるのは自己責任でお願いします。
Mac ソフトのことなら act2.com

ネットブックのウインドウサイズを見た目より広くしてしまう方法


ネットブックを使ってみるとこのブログやウインドウのサイズを指定して開かれるページがあるとすごく操作しにくいところがあったので、自分は実際のスクリーンより広く使えるように設定をしてみました。そのキャプチャーを載せておきます(Windows XP)
1. .画面のプロパティを押して「設定」タブを選択
2. 「詳細設定」をクリックして出てきたウインドウの「モニタ」タブを選択
3. 「このモニタでは表示できないモードを隠す」のチェックを外し、「適用」をクリックしたあと「アダプタ」タブをクリック
4. 「モードの一覧」をクリックして出てきたウインドウで希望のウインドウサイズ、ビットレートを選択し、「OK」をクリック
5. そして、「適用」→「OK」を押す。
6. 完了。
以上でスクリーンより広い設定を行うことができます。カーソルを端に寄せるとスクロールして表示してくれるようになります。

ブログ記事の転載などを探す方法

自分のブログが誰かのブログで勝手に転載されていてもわかるようにする、探す方法。
調べようがなさそうで実は比較的簡単な方法で見つけることができる。
自分のブログ固有の文字、うちであればjugem.cdbk.netという文字をRSS対応のブログ検索サイトで検索をする。
すると検索結果が出てくるので、そのRSSを取得、RSSリーダーに登録しておくと、掲載(転載)されると検索結果のフィードとしてすぐに結果として出てくれる。当ブログの場合は、当然自分のサイトのエントリーも一覧に表示されるが、その後に続いて転載しているサイトも並んでいる・・・
どうしよう~~