jQuery UI の effect と hover を組み合わせて使う時のコツ

1月 30th, 2014

こんにちは、なかわけです。

jQuery UI の effect の shake (または bounce)とhover (または mouseover)を組み合わせて使う時のコツです。

要素をマウスオーバーした時に、その要素をプルプル震わせる時の表現として使えます(あんまり使う時ないと思いますが)。

出来上がったものは以下です。

普通にhover とeffect shake を使用するとFirefox でずっとプルプル動いてしまいます。おそらくFirefox のバグです。震えているときにマウスオーバーした要素をラップする要素が生成されるのですが、Firefox がその瞬間をマウスアウトしたと勘違いしているようです。しかし、マウスは実際には最初にマウスオーバーした要素の上にあるので、再度マウスオーバーのイベントが発生する。すると、またラップ要素が生成されて・・・と繰り返されてずっとプルプル震えてしまうみたいです。

コツとしては、マウスオーバーした時にshake アニメーションをしているかどうかを判別するためのクラス animated を追加してあげれば解決できます。マウスオーバーした要素に対して hasClass(‘animated’) で判定してあげて、false であれば animated を追加してshake エフェクトを再生、true であれば何も処理しないという分岐です。

この hasClass(‘animated’) は今回に限らず、そのほかにも応用が利くので便利に使えますね。

Twitter の認証を解除する方法ってAPIからはできないみたい?

12月 6th, 2013

こんにちは、なかわけです。

今日はTwitter API の OAuth 認証の話。

よくOAuth 認証の方法は紹介されているけど、認証したWebアプリを解除する方法が語られていないので、自分なりに調べてみました。

結論から言うと、Webアプリ側(Webサービス側)から認証を解除する方法はないみたいです。

例えばWebサービス側のページで「認証を解除」という処理はWebサービス側のDBからユーザのOAuth Tokenを削除するだけの処理なので、Twitter のapps ページにはWebアプリが登録されたままです。

逆に、Twitter のappsページから 「Revoke access(許可を取り消す)」をクリックするとTwitter 側から認証は解除されるけど、Webサービス側のDBにはユーザのOAuth Token のレコードは残ったままです(当たり前だけど)。

この状態でAPIを使用しようとすると以下の様なエラーが戻ってきます。

エラーのvar_dump出力

[errors] => Array(
[0] => stdClass Object(
[message] => Invalid or expired token
[code] => 89
)
)

一応、Webサービス側のDBのToken を削除した状態でも、Twitter のApps ページから Revoke した状態でも、認証接続は切れている状態なのでWebアプリからはユーザのアカウントにアクセスできないようにはなります。

あんまりいい方法がないようですが、ユーザが任意でTwitter の Apps ページから Revoke した場合は、WebサービスのページでToken の有効性を確認して無効だったら、DBに残っている古いToken を削除して新たに認証を促す表示をした方がいいようですね。

Flash のクリックを Google Analytics で追跡する方法

2月 28th, 2013

こんにちは。なかわけです。

Google Analytics でクリックを解析する方法があるんですね。今回初めて知りました。設定の方法は以下のサイトに分かりやすくまとめてあったので詳しくは以下のページを参考にしてください。

Google Analyticsで外部リンク先のクリック数を追跡する方法(2012年1月時点)

で、今回はコレをFlashに適応したいという話。具体的には以下の部分をFlashに適応したいわけです。

<a href="リンク先URL" onclick="javascript:_gaq.push(&#91;'_trackPageview', '仮想URL'&#93;);" target="_blank">テキストリンク</a>

たぶんこんな感じだろうなと思って実装してみたら実際動いて、でももうちょっと確信がほしかったので調べてみたら、Googleグループの英語ページにもありました。
ボタンを押したあとの処理内容に以下のコードを追加すればトラックされます。

ExternalInterface.call("_gaq.push", ['_trackPageview', '仮想URL']);

この件について日本語のページが見当たらなかったので、メモしました。

Clearfix を使わずにメニューをキレイに作る方法

2月 26th, 2013

こんにちは、なかわけです。

もうちょっと更新を頻繁にしたいところですが、今日はClearfixを使わずにメニューをキレイに作る方法です。まず、出来上がったものはコチラになります!

clearfixを使わないでfloatを解除する方法 – Rewish

終了・・・。

・・・だとちょっと味気ないので、ちょっとコメント。
昨日、仕事でバイトちゃんが作ったソースを見てClearfix相当のスタイルがないのにul要素でメニューが作られていて驚きました。そのソースコードを調べてみた結果、overflow:hidden; がキモだったことが分かりました。

これが初見だったので、びっくりしてちょいと記事にまとめてみようかと思ったんだけど、ググってみたらやはり既にキレイにまとめてらしゃる方がいらっしゃった・・・という感じです。記事を投稿されてる方は「clearfixの方が意味的には正しい」とおっしゃってますけど、ボク的にはclearfixも所詮ハックの一種だし余計なコードはないに越した事はないので、個人的には今回のHiddenハック(コレ名前あるんですかね?)がいいんじゃないかなと思います。

wp_get_attachment_image_srcの挙動

8月 28th, 2012

こんにちは、なかわけです。
今日はWordpressのwp_get_attachement_image_srcの話。
マニュアルでは第1引数に画像ID(attachment ID)を与えると画像のhtmlソースが取得できると書いてあります。
残念、マニュアルが英語しかない。がんばって読んでちょ)
しかし、マルチサイトの場合現在のサイトと画像が一致していないと取得できません。
たとえばAサイトにa画像があって、Bサイトにb画像がある場合、Aサイトでwp_get_attachement_image_src(b画像の画像ID);とやっても表示されません。この場合以下のような処理が必要です。

switch_to_blog(BサイトのサイトID);
wp_get_attachement_image_src(b画像の画像ID);
//画像を表示する処理など
restore_current_blog();

どこにも書いてないからハマるよね(´・ω・`)・・・

Lightbox2 の画像サイズの制限をしてみた

6月 29th, 2012

こんにちは。なかわけです。

みんな大好きLightboxの画像の大きさを制限するカスタマイズをしてみました。標準ではないんですね、この機能。
jsとちょこっとcssを変更します。縮小画像を生成する方法ではなく、width, height を指定して表示上縮小する方法です。
今回仕様したバージョンはLightbox v2.51です。元々のコードはこんな感じでした。

    Lightbox.prototype.changeImage = function(imageNumber) {
      var $image, $lightbox, preloader,
        _this = this;
      this.disableKeyboardNav();
      $lightbox = $('#lightbox');
      $image = $lightbox.find('.lb-image');
      this.sizeOverlay();
      $('#lightboxOverlay').fadeIn(this.options.fadeDuration);
      $('.loader').fadeIn('slow');
      $lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
      $lightbox.find('.lb-outerContainer').addClass('animating');
      preloader = new Image;
      preloader.onload = function() {
        $image.attr('src', _this.album[imageNumber].link);
        $image.width = preloader.width;
        $image.height = preloader.height;
        return _this.sizeContainer(preloader.width, preloader.height);
      };
      preloader.src = this.album[imageNumber].link;
      this.currentImageIndex = imageNumber;
    };

これを以下のように変更しました。


Lightbox.prototype.changeImage = function(imageNumber) {
var $image, $lightbox, preloader,
_this = this;
var widthRetio, heightRetio, retio;
var maxWidth = 800, maxHeight = 800;
this.disableKeyboardNav();
$lightbox = $(‘#lightbox’);
$image = $lightbox.find(‘.lb-image’);
this.sizeOverlay();
$(‘#lightboxOverlay’).fadeIn(this.options.fadeDuration);
$(‘.loader’).fadeIn(‘slow’);
$lightbox.find(‘.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption’).hide();
$lightbox.find(‘.lb-outerContainer’).addClass(‘animating’);
preloader = new Image;
preloader.onload = function() {
$image.attr(‘src’, _this.album[imageNumber].link);
if(preloader.width > maxWidth){
widthRetio = maxWidth / preloader.width;
}else {
widthRetio = 1;
}
if(preloader.height > maxHeight){
heightRetio = maxHeight / preloader.height;
}else {
heightRetio = 1;
}
if(widthRetio > heightRetio){
retio = heightRetio;
}else{
retio = widthRetio;
}
$image.width = Math.round(preloader.width * retio);
$image.height = Math.round(preloader.height * retio);
if(retio < 1){ $(‘.lb-image’).attr(‘width’, $image.width); $(‘.lb-image’).attr(‘height’, $image.height); }else{ $(‘.lb-image’).removeAttr(‘width’); $(‘.lb-image’).removeAttr(‘height’); } return _this.sizeContainer($image.width, $image.height); }; preloader.src = this.album[imageNumber].link; this.currentImageIndex = imageNumber; };[/javascript] ざっくり説明すると、194行目で制限する大きさを設定しています。幅800px, 高さ800pxに。ここの数字を変えれば好きな大きさに変更できます。 206から220行目までで縮小する比率を求める処理をしています。 221,222行目で画像を縮小しています。 223から229行目では縮小する場合はwidth, height属性を追加して、縮小しない場合はwidth, height属性を削除する処理をしています。 あと、cssも少し変更しました。 [css num=24 highlight_lines="26,27"] /* line 24, ../sass/lightbox.sass */ #lightbox img { /*width: auto;*/ /*height: auto;*/ } [/css] 26,27行目をコメントアウトするだけ。 大抵はこれだけで事足りるんじゃないでしょうか。

寄付して!じゃなくて

5月 30th, 2012

こんにちは、なかわけです。
アプリやプラグインの寄付を求めるときに「寄付してください」というよりこっちの方がライトで取っ付き安いですね。

「ドリンク買って!」
なんかかわいい。

Live Commerce 配送プラグインの土日対応の方法

2月 16th, 2012

こんにちはなかわけです。

Live Commerce の標準配送プラグインはデフォルトでは土日がスキップされて表示されてしまいます。なんか1.0から土日を配送日から外す仕様に変更したそうです。ふーん。

で、配送日に土日も含める方法をググったけど、該当する記事があまりなく自分で調べました。意外と簡単でした。以下のファイルを1行コメントアウトするだけ。

/公開ディレクトリ/resources/plugin/DP/shipping/catalog/main/shipping.php

//$i += c::isHoliday($date);

めでたしめでたし。

今のところのcssで縦書き

2月 13th, 2012

こんにちは、なかわけです。
cssで縦書きにする件について調べてみました。
結論から言うと、Firefoxが全く対応してないです。
Webkit(Chrome, Safari)やIEやなんかで見ると以下のように見れます。

個人的にはIEが対応しているのにびっくりでした。

以下が主なcssです。

-webkit-writing-mode: vertical-rl;
font-family:"@MS P明朝", "@MS PMincho", "@ヒラギノ明朝 Pro W3", "@Hiragino Mincho Pro", serif;
writing-mode: tb-rl;
direction:ltr;

1行目はプレフィックスからも分かるようにwebkit用の設定です。
2行目はフォントの指定ですが、ポイントは@アットマークです。このアットマークがないとWindowsのChromeで文字が横向きになった縦書きになってしまいます。

3行目はIE用の設定です。
4行目は念のための設定で、文字のどっち向きに方向に読むかという設定です。デフォルトはltr(左から右に)なので特に設定しなくても大丈夫です。アラビア語とかはrtlになります。

htmlのサンプルも用意したので参考にしてください。

で、今回仕事ではFirefoxにも対応させたいということだったので、竹取jsさんのjsを使わせていただきました。

今回webで縦書きを取り組んでみて、webで縦書きはwebの文化に反している様な気がして個人的にはweb縦書きは不要だと思いました。縦書きする言語はかなり少数ですし、webでは横書きの方が慣れてるかし。でも研究としては大変面白かったです。また本の話は別ですしね。epub系はこれからどうなるんでしょうね。がんばってください!

 

pg_lo_exportをしたら画像ファイルに不要データが追加されちゃった

8月 11th, 2011

こんにちは、なかわけです。
今日はPostgresのpg_lo_exportの話です。

仕事で大量のラージオブジェクトLarge Objectをファイルに書き出す処理をしました。大量にあったので全部できるか心配だったのですが、無事全部書き出すことができました。めでたしめでたし。

・・・ではありませでした。
(さらに…)