JavaScript

[javascript]jQueryPlugin:tinyTips

これは便利ですね。ちょっと使おうと思ったので調べました。
ロールオーバーすると吹き出しを出してくれるjQueryPlugin。
tinyTipsサンプル

使用方法

1)
Mike Merritt – jQuery Plugin: TinyTips 1.1からjsをダウンロードする。

2)
jsファイルを読み込む。

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.tinyTips.js"></script>

3)
htmlのbodyにはこのようなコードを書く。

<a title="見つけにくいものですか?" href="#">探し物はなんですか?</a>
<a title="http://www.yahoo.co.jp/" href="http://www.yahoo.co.jp/">Yahoo!JAPAN</a>
<a title="白い結晶が浮遊・沈殿することがありますが、これは天然のミネラル成分が結晶したものですので、品質に問題はありません。" href="http://www.google.co.jp/">Google</a>

4)
次のjsを記述する。

$(document).ready(init);
function init(){
 $('a.tTip1').tinyTips('light', 'title');
 $('a.tTip2').tinyTips('light', '<img src="image/sc01.jpg" border="0" alt="" />http://www.yahoo.co.jp/');
 $('a.tTip3').tinyTips('light', '<img src="image/sc02.jpg" border="0" alt="" />http://www.google.co.jp/');
}

参考にしたサイト

Mike Merritt – jQuery Plugin: TinyTips 1.1
http://www.mikemerritt.me/blog/jquery-plugin-tinytips-1-1/

[Facebook]shareボタン

新年明けましておめでとうございます。
2011年一発目は小ネタです。
Facebookのshareボタンを押したときに表示される
サイトの情報を指定する方法とサンプル。
参考にしたサイトに全部書いてあります。

1)htmlタグの属性を追加する

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

2)metaタグを追加する

<meta property="og:title" content="FacebookShareテスト frasio report タイトルタグ" />
<meta property="og:type" content="article" />
<meta property="og:url" content="/facebook/02/" />
<meta property="og:image" content="/facebook/02/image/facebookshare.jpg" />
<meta property="og:description" content="白い結晶が浮遊・沈殿することがありますが、
これは天然のミネラル成分が結晶したものですので、品質に問題はありません。" />

3)サムネイル画像を用意する

サンプル

参考にしたサイト

Open Graph protocol – Facebook開発者
http://developers.facebook.com/docs/opengraph

[facebook]newsfeed reader

とりあえず小手調べです。
認証通してnewsfeedを表示するまでです。
Facebookは機能が多くてアプリを作るのに
かなり時間がかかりそうです。

newsfeed reader

参考にしたサイト

Facebook開発者 参考資料
http://developers.facebook.com/docs/

コーヒーサーバは香炉である – [Facebook]Facebook アプリ作ろうぜ (その1 準備編)
http://www.madin.jp/diary/?date=20101016

「そん」の気ままなLOG – facebookで携帯認証確認する方法-2
http://sonkunt.blog26.fc2.com/blog-entry-473.html

[Google Analytics]EventTracking And Data Export API

また地味なAJAXでGoogle Analytics
Google Analyticsでログを取って、Data Export APIでログを取得するテストです。
ページビューなどはログとして反映されるまでに24時間かかるようですが
「ボタンを押した」などのイベントは10~30分で反映されるようです。
よって即時反映させる必要が無い、予算も無いというときに使えるかもしれません。
PHPはこちらのサイトのクラスを使っています。
Google Analytics API class for PHP
http://www.askaboutphp.com/63/google-analytics-api-class-for-php.html

Google Analytics EventTracking And Data Export API

参考にしたサイト
Google Analytics トラッキング コード
http://code.google.com/intl/ja/apis/analytics/docs/tracking/home.html

Data Export API
http://code.google.com/intl/ja/apis/analytics/docs/gdata/home.html

Google Analytics API class for PHP
http://www.askaboutphp.com/63/google-analytics-api-class-for-php.html

[twitter]指定のURLが含まれているツイートの数を調べる

また地味なネタです。
公式Tweetボタンで使われているっぽいです。

指定のURLが含まれているツイートの数を調べる。

使い方

var head=document.getElementsByTagName('head')[0];
var script=document.createElement('script');
script.src=get_jsp('http://www.yahoo.co.jp/', 'when_get_result');
head.appendChild(script);

function get_jsp(url, callback){
	var str='';
	str+='http://urls.api.twitter.com/1/urls/count.json';
	str+='?url='+encodeURIComponent(url);
	str+='&callback='+callback;
	return str;
}
function when_get_result(data){
	alert(data.url+" "+data.count);
}

気付いたこと、確認したこと。
・TwitterAPIの仕様書には載っていないようです。
・つぶやいてから反映されるまで5秒~30秒ほどかかるようです。
・つぶやきを削除してもカウント数は減らないようです。
・使い所はよくわからない。

[JavaScript]JS like flash #02

ajaxでどこまでflashっぽくできるのか第2弾。
今回モデルにしたのは「なにかにキクぜ。グラソー ビタミンウォーター」です。
第1弾はこちら ajax like flash #01

CSS3を使っているのでブラウザによって動作が異なります。
GoogleChrome6.0.472.55(完璧に動作)
SRWareIron4.0.280(完璧に動作)
Safari4.0.5(完璧に動作)
Firefox3.6.2(3D回転無し)
IE8(2D回転3D回転無し)

ajax like flash #02

[javascript]Photoshopの自動化

[javascript]Photoshopの自動化

前提としてjavascriptに精通していること。

1)
C:\Program Files\Adobe\Adobe Photoshop CS4\Scripting\Utilities\ScriptListener.8li
↑を↓へコピー
C:\Program Files\Adobe\Adobe Photoshop CS4\Plug-ins\Automate

2)
Photoshop上でスクリプト化したい操作をする

3)
デスクトップに出来たScriptingListenerJS.logを開いて
処理の該当部分をコピー

4)
3)でコピーしたものをペーストして※1を参照しながら
必要なコードをガリガリ書く

5)
拡張子jsx、文字コードUTF-8で保存

6)
ファイル>スクリプト>参照>出来たjsxファイル
で実行できます。

jsxファイルを下記フォルダへ入れておけばPhotoshop再起動後に
ファイル>スクリプトのメニューに表示されるようになります。
C:\Program Files\Adobe\Adobe Photoshop CS4\Presets\Scripts

※1 Photoshop CS自動化作戦
http://www.openspc2.org/book/PhotoshopCS/