ktyr report

[javascript]ソーシャルボタンの押された回数を取得する

2012-02-21

タイトル通り

Get SNS Count

[javascript]jQueryPlugin:frasiobox

2012-01-19

不親切なjQueryPluginを作りました。
lightboxやfancyboxと同じような画像ビューワーです。
これらと違うところはuiが無い点です。
uiは自分で作りたい時に良いかと
使い方はサンプルを見て下さい。

下記ブラウザで動作を確認しました。
Windows7 Firefox7.0.1
Windows7 GoogleChrome 16.0.912.75 m
Windows7 Safari 5.1
WindowsXP IE6

frasiobox sample
js filejquery.frasiobox.js

Sample0(普通)
Sample1(重い画像ファイル)
Sample2(スタート番号指定)

正規表現

正規表現

2012-01-01

半角文字(スペース含む)

[\x20-\x7E]+

半角文字(スペース含まず)

[\x21-\x7E]+

HTMLタグ

<("[^"]*"|'[^']*'|[^'">])*>

HTML imgタグ

<img("[^"]*"|'[^']*'|[^'">])*>

画像ファイルパス

[\x21\x23-\x7E]+\.jpeg|jpg|png|gif|bmp

画像ファイルパス(記号指定)

[a-zA-Z0-9%&+\-\./:=\?_]+\.jpeg|jpg|png|gif|bmp

URL

^(https?|ftp)(:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+)$

数字を1文字以上含む文字列

.*[0-9]+.*

Twitterハッシュタグ

#[^\s　#]+

[Facebook]いいね!、シェアのサムネイルを動的に変える

2011-12-09

タイトル通り
phpでmetaタグを書き変えてるだけ

サンプルfacebook TEST

こんな感じ

<meta property="og:type" content="article" />
<?php
$a="/facebook/03/";
$b=$_GET['num'];
echo '<meta property="og:title" content="FacebookTEST 0'.$b.'" />';
echo '<meta property="og:url" content="'.$a.'index.php?num='.$b.'" />';
echo '<meta property="og:image" content="'.$a.'image/a_0'. $b .'.png" />';
echo '<meta property="og:description" content="説明文 0'.$b.'" />';
?>

サムネイルが出ないとき、投稿時は出てるけどウォールで出ないときがある。
・この現象は原因がわからない。
・上記サンプルでは10回に1回くらいの確率で発生している。
・og:imageで指定する画像をpngからjpgにしたら直る? サンプルfacebook TEST S jpg
・もし固定URLならfacebookのサーバにサムネイルがキャッシュされているので
下記参考サイトでURLを入れてデバッグをクリックすればキャッシュをクリア出来る。
・metaタグをphpで書き出しても、htmlファイルに書いてあってもこの現象には関係無さそう。
・画像のサイズを大きくしてもあまり関係無さそう。
むしろ画像が大きいほうが失敗する確率が高いような気がする。　サンプルfacebook TEST L
・ただ単にfacebookのサーバの調子が悪いだけ？

参考にしたサイト
Debugger – Facebook開発者
http://developers.facebook.com/tools/debug

[javascript]canvasで円グラフ piechart on canvas

2011-12-08

js canvasで円グラフ
IE6,Firefox,Chrome,Safari,iPhoneで見れます

サンプルjs piechart

参考にしたサイト
ExplorerCanvas
http://excanvas.sourceforge.net/

[CSS3]iPhoneのホーム画面の動きをCSS3+jsで

2011-12-02

iPhoneのホーム画面の動きを２つの方法で制作しました。
CSS3のanimationで動かす方法と
CSS3のtransformの値をjQueryのanimateで変化させる方法。
iPhoneで閲覧した場合
前者は動的にanimationの設定をしているので
トゥイーンが始まる時にちょっと動作が止まってしまいます。
後者は滑らかです。
Firefox,Chrome,Safari,iPhoneで動きます。

サンプルCSS3 animation

サンプルCSS3 jQuery.animate of translate

[CSS3]animationの動的生成

2011-11-28

タイトル通り
四角がクリックした座標へCSS3のanimationを使って移動します。
Firefox,Chrome,Safari,iPhoneで動きます
jQueryプラグインで既にあるようですが後学のために。
CSS3のtransitionでアニメーションするjQueryプラグイン「jQuery transition Animate」[to-R]

サンプルdynamic_css3

参考にしたサイト
CSS3リファレンス

[javascript]audio.js

JavaScript

2011-10-21

音を出すためのjs
HTML5ではなく小さなflashを利用しているので
ほとんどのブラウザで大丈夫です。
しかし、iPhone,iPadではエラーが起きるので
下記コードみたいに条件判定するとよい。
見た目を変えたいときはaudio.jsの中にCSSの記述があるので
これを書き換える。
※追記ソースコードをよく見たら、ブラウザによってはHTML5を使っているようです

サンプルaudio.js

var isTouch = ('ontouchstart' in window);
init_audio();
function init_audio(){
	audiojs.events.ready(function() {
		if(isTouch)return;
		audiolist=audiojs.createAll();
	});
}

参考にしたサイト
audio.js