make a record of…: 12月 2011

2011/12/26

[Rapphae.js] オンマウス時になめからなアニメーションで枠線を表示させる

forked: Raphaelで線を作ったり何したり - jsdo.it - share JavaScript, HTML5 and CSS

JavaScriptのライブラリはmootoolsを使ったので、そのまま使うってわけにはいかないかもしれませんが…

これ、IE6,7,8でもそれなりに滑らかにアニメーションするんですよ。SVGじゃなくてなんとかいうのを使うらしいです。
IE6に関しては「もうあんなやつのこと忘れちまいなよっ」って感じですが…

IE9からSVGに対応してるみたいですし、スマートフォンも対応してそうだから今後使っていけるといいな。

上のサンプルだとsvgのアニメーションはRaphaelの機能を使ってるんだけど、jQueryとかのアニメーションでもやれるみたい。
機能が重複してるのに、両方とも読みこまないといけないのがちょっともったいない

2011/12/21

[Mootools] 要素の高さ、幅を取得する

いつも忘れてしまうのでメモ
Mootoolsで高さなどのサイズを取得する方法

view plain print ?

elem.getSize().y //高さ
elem.getSize().x //幅

elem.getSize().y //高さ
elem.getSize().x //幅

2011/12/20

[JavaScript] iPhone で alert, confirmを使うと動きが変になった

ボタンを押すと「***していいですか？」という確認ダイアログが出てきて、「OK」を押すと処理を続けて、「キャンセル」を押したら中断ってな処理を作った。
ダイアログはtouchendイベントで出てくるようにした。
どっちを押したとしても、それぞれの処理をして終わり…になる予定だったが、ダイアログが閉じた後、ボタンをタッチすると(touchstart)指を離さなくても、もう一度同じダイアログが表示されるようになった

alertでも同じようなことが一度あった。iPhoneだとalertやconfirmでダイアログが出ると、イベントが途中で止まって、もう一度触ると止まったとこから再度動き出す…ようなイメージ。

対処法：：クリックイベントの中身を全部setTimeoutで囲った。

view plain print ?

elem.addEventListner("click", function(){
setTimeout(function(){
//クリック時の処理
}, 0);
});

elem.addEventListner("click", function(){
 setTimeout(function(){
  //クリック時の処理
 }, 0);
});

2011/12/19

Rphael.js を使って SVGで四角い線を表示させてみる

SVGを使うのに便利なライブリRaphael.jsを使って枠線を表示してみる

view plain print ?

var container = $("#id");
//SVGを格納する要素を作成
var newElem = document.createElement("div");
//サイズ
var width = 100;
var height = 100;
//描画エリアを指定する要素を作成。Raphaelは全部これで始まる
//格納する要素を指定せずに作ることもできるけど、その時はbody直下に追加されるようだ
var paper = Raphael(newElem, width, height);
//path要素を作成。指定方法はちょっと面倒…。
var stroke = paper.path("M0,0L" + width + ",0L" + width + "," + height + "L0," + height + "L0,0z")
.attr({
//線の色と太さを設定
"stroke": "#ffd400",
"stroke-width": 16
});
//要素に追加
container.append(newElem);

var container = $("#id");

//SVGを格納する要素を作成
var newElem = document.createElement("div");

//サイズ
var width = 100;
var height = 100;

//描画エリアを指定する要素を作成。Raphaelは全部これで始まる
//格納する要素を指定せずに作ることもできるけど、その時はbody直下に追加されるようだ
var paper = Raphael(newElem, width, height);

//path要素を作成。指定方法はちょっと面倒…。
var stroke = paper.path("M0,0L" + width + ",0L" + width + "," + height + "L0," + height + "L0,0z")
 .attr({
  //線の色と太さを設定
  "stroke": "#ffd400",
  "stroke-width": 16
 });

//要素に追加
container.append(newElem);

参考：path要素の解説

[JMeter] Ajaxでのアクセステスト

ajaxでpostして、レコードを削除しているページがあったので、そのバリデータテストをしたかった。
サーバー側でajaxかどうかとpostされているかどうかを判定していたので、通常のアクセスだとはじかれてしまう。

対応
スレッドにHTTPヘッダーマネージャーを追加
追加するヘッダーは
名前： X-Requested-With
値： XMLHttpRequest

これを設定した後でHTTPリクエストをPOSTで行えばajaxでのアクセスもOK

2011/12/13

[WordPress] Viper's Video QuicktagsでYoutubeの動画が出なくなった場合の対応

Youtubeの埋め込み用コードが変更になったみたい。
http://www.youtube.com/watch?v=*****
が
http://youtu.be/******
になった

youtu.beってドメイン。

この新しいURLにWordPressのプラグインの「Viper's Video Quicktags」っていうYoutubeを貼り付けるクイックタグを作ってくれるプラグインが対応してなくて、エラーが出た。

プラグインのファイルをちょっと変更して対応した。
(プラグインのバージョンは2011/12/13で最新の6.3.3)

■変更するファイル
/wp-content/plugins/vipers-video-quicktags/vipers-video-quicktags.php

■変更する箇所
2866行目

view plain print ?

// Playlist URL ( http://www.youtube.com/playlist?list=PLXXXXX )
if ( false !== stristr( $content, 'playlist' ) ) {
//省略
}
// Legacy playlists ( http://www.youtube.com/view_play_list?p=XXX )
elseif ( FALSE !== stristr( $content, 'view_play_list' ) ) {
//省略
}
//ココから追加箇所
elseif ( FALSE !== stristr( $content, 'youtu.be' ) ) {
preg_match( '#http://(www.youtu|youtu|[A-Za-z]{2}.youtu)\.be/([\w-]+)(.*?)#i', $content, $matches );
if ( emptyempty($matches) || emptyempty($matches[2]) ) return $this->error( sprintf( __('Unable to parse URL, check for correct %s format', 'vipers-video-quicktags'), __('YouTube') ) );
$embedpath = 'v/' . $matches[2];
$fallbacklink = 'http://www.youtube.com/watch?v=' . $matches[2];
$fallbackcontent = '<img alt="' . __('YouTube Preview Image', 'vipers-video-quicktags') . '" src="http://img.youtube.com/vi/' . $matches[2] . '/0.jpg">';
}
//ココまで追加
// Normal video URL
else {
//省略
}

// Playlist URL ( http://www.youtube.com/playlist?list=PLXXXXX )
if ( false !== stristr( $content, 'playlist' ) ) {
 //省略
}
// Legacy playlists ( http://www.youtube.com/view_play_list?p=XXX )
elseif ( FALSE !== stristr( $content, 'view_play_list' ) ) {
 //省略
}
//ココから追加箇所
elseif ( FALSE !== stristr( $content, 'youtu.be' ) ) {
 preg_match( '#http://(www.youtu|youtu|[A-Za-z]{2}.youtu)\.be/([\w-]+)(.*?)#i', $content, $matches );
 
 if ( empty($matches) || empty($matches[2]) ) return $this->error( sprintf( __('Unable to parse URL, check for correct %s format', 'vipers-video-quicktags'), __('YouTube') ) );
 
 $embedpath = 'v/' . $matches[2];
 $fallbacklink = 'http://www.youtube.com/watch?v=' . $matches[2];
 $fallbackcontent = '';
}
//ココまで追加
// Normal video URL
else {
 //省略
}

Normal video URLってコメントを目印にして探して。

もし変更するなら、変更前の元のファイルをコピーしといて、すぐ戻せる状態にしてから試したほうがいいと思う。

2011/12/09

[CakePHP] ビューで共通に使う素材を作成する

CakePHPではメニューとか、フッターとか、共通で使う部分を1つのファイルとして作成して、共通で使いまわすエレメントってのがある。

設置場所：/app/views/elements
拡張子はctpにする。

・呼び出し方(ビュー内)

view plain print ?

$this->element('parts');

$this->element('parts');

これで/app/views/elements/parts.ctpが読み込まれる

・変数を渡して、エレメント内で使用できる

view plain print ?

//ビュー側
$this->element('parts', array(
'value' => 100,
'key' => 'お小遣い'
));

//ビュー側
$this->element('parts', array(
 'value' => 100,
 'key' => 'お小遣い'
));

view plain print ?

//エレメント側
は円です

//エレメント側
は円です

参考：
CakePHPマニュアル 3.10.3 エレメント

[php] 配列から値を取得する。ランダム・最大・最小

PHPで配列から値を取得する方法

・ランダムに取得したい場合

view plain print ?

$arr[array_rand($arr)];

$arr[array_rand($arr)];

・最大値を取得したい場合

view plain print ?

max($arr);

max($arr);

・最小値を取得したい場合

view plain print ?

min($arr);

min($arr);

2011/12/06

[JavaScript] SVGが使えるか判定する

IEでもバージョン9からSVGに対応してるらしいので、SVGをもっと使っていきたい。
けど、IE8まではSVGに対応していないので、SVGが使えるかどうかをJavaScriptで判定する。

簡単

view plain print ?

var ableSVG = (window.SVGAngle !== void 0);

var ableSVG = (window.SVGAngle !== void 0);

~~SVGColor~~SVGAngleってプロパティがあるかどうかで判定する
void 0ってのはundefinedと同じ意味なので、~~SVGColor~~SVGAngleがないってことはSVGは使えないってこと

--add[2011/12/9]

SVGColorで判断してたんだけど、そんなプロパティはfirefoxにはなかった。

参考：
SafariとChromeを判別してみる

2011/12/05

オンマウス時に出す枠をSVGでなめらかに表示＆アニメーション

SONYのヘッドフォンのサイト見ていて、オンマウス時のアニメーションがなめらかで綺麗だったので、どうやってるのか調べてみた

見たサイト↓
http://discover.store.sony.com//piiq/

水色の枠はSVGで表示している。
FLASHなんかでは良くみる表現。

ボーダーをつけたdivをオンマウス時に縮小することで、枠を表示させてもいいんじゃないのと思ったけど、firefox7ではアニメーションがコマ落ちしてガタガタだった。

で、やりかた。
線の幅をアニメーションで変更してる。
線の幅は、線の中心から両方に広がっていくので、10pxの幅の線を出したい場合は、倍の20pxに設定すると、中心から外側と内側にそれぞれ10pxの線がでる。
外枠はoverflow:hiddenにしとかないと、外側の線まで出てしまうので注意。

HTML

view plain print ?

<div class="item">
<img height="100" src="test.png" width="100">
<svg class="border" height="100" style="stroke-width: 10px;" width="100">
<path d="M0,0L100,0L100,100L0,100L0,0 z" fill="none" stroke="#ffd400"></path>
</svg>
</div>

JavaScript(jQueryを使ってます)

view plain print ?

$(".item").hover(function(){
$(this).find(".border").css("opacity", 1).animate({
"stroke-width": "10px"
});
},
function(){
$(this).find(".border").animate({
"stroke-width": "0px"
}, {
complete: function(){
//アニメーションが終わったら非表示
$(this).css("opacity ", 0);
}
});
});

$(".item").hover(function(){
 $(this).find(".border").css("opacity", 1).animate({
  "stroke-width": "10px"
 });
},
function(){
 $(this).find(".border").animate({
  "stroke-width": "0px"
 }, {
  complete: function(){
   //アニメーションが終わったら非表示
   $(this).css("opacity ", 0);
  }
 });
});

SVGがつけるかどうかをJavaScriptで判定するなら→「SVGが使えるか判定する」(Raphael使ったほうがいいと思うけど…)

参考サイト：
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/paths.html

-- add 2012/12/16
Raphael.jsを使ってやってみました
オンマウス時になめからなアニメーションで枠線を表示させる
--

2011/12/01

[CakePHP] 別のテンプレートを使いたい場合

条件によって、使用するテンプレートを切り替えたい場合などに

view plain print ?

$this->render('template_2'); //この場合はtemplate_2.ctpが読み込まれる

$this->render('template_2'); //この場合はtemplate_2.ctpが読み込まれる

参考：ビューテンプレートの変更方法

登録: 投稿 (Atom)