JSDeferredでjavascriptの非同期処理の問題を解決

javascriptは非同期処理が基本です。
プログラムを上から下に順番に記述しても、それが必ず順番通りに実行されるわけではありません。

簡単な処理を作るときには問題になりませんが、Aを実行した結果によってBまたはCを実行する、みたいな処理がある場合、Aの実行が終わるまで待ったずに条件分岐を行ってしまう、というようなことがよく起こります。

これを解消するためにコールバックを使うのですが、扱いがけっこう面倒です。

そこでJSDeferredが登場します。

http://cho45.stfuawsc.com/jsdeferred/doc/intro.html

Deferを辞書で調べたところ、読みは「ディファー」、意味は「延期された; 繰延べ扱いの; 据え置きの」と出ました。

これは公式サイトのサンプルコード。

next(function () {
alert("Hello!");
return wait(5);
}).
next(function () {
alert("World!");
});

こう書くことで「Hello!(5秒停止)Worlds!」という実装ができます。すばらしい！

javascriptはめざましい進化を遂げて活躍の場も増えており、コードの量も増え、処理も複雑化してきているので、こういうライブラリはコーディングする者にとって本当にありがたいです。

console.log()を外し忘れてもieでエラーを吐かないようにする

console.log()。
firefox+firebugで使えるjavascriptのログ出力機能です。javascriptのコーディングでは常に利用してます。

非常に便利な機能ですが、ieでは使うことができません。console.log()を残したままでieでページを開くとjavascriptエラーが出てしまいます。当然リリース時などにはconsole.log()はすべて外しますが、開発途中でieでの動作チェックをする際などはいちいち消すのも面倒です。

そこで何か良い解決方法はないかと探していたら、こちらのページを見つけました。

http://manjiro.net/javascript/113_javascript_ie_consolelog

なるほど、シンプルな解決策です。
他にもいろんな方法でログ出力の改良をしてる方がいるようですが、とりあえずこの形から入ってみようと思い、自分の開発環境に導入してます。

jqueryでinputフォームの現在のカーソル位置(キャレット)を取得

したいんだけど、プラグインとかないかな～、と思って探していたら、ありました。

http://d.hatena.ne.jp/tubureteru/20110101/p1

さっそく使ってみましたが、いい感じです。

さらに別のプラグインも発見。

http://d.hatena.ne.jp/ja9/20100917/1284146159

こちらは選択範囲を取得して処理するプラグインですが、getCaretPos()というメソッドを使うことでキャレットだけ取得することも可能。


ちなみに文字の入力位置のことをキャレットと言うそうです。
ググるときに役に立ちました。

jqueryでドラッグ可能なダイアログを作る(ipop_multi.js)

を用意することになりました。

最初jquery uiのDraggableを使おうかと思ったのですが、単純に小窓を開いてグリグリ動かせれば良かったので、こちらのプラグインを使わせていただくことにしました。

ipop.js

が、途中で仕様変更があり、同時に複数ダイアログを開くことが必要になりました。

仕方ないのでipop.jsに少し手を加えさせていただき、複数ダイアログに対応させてみました。ipop_multi.jsと名付けました。

せっかくなのでサンプルとソースを置いておきます。良かったらお使いください。

サンプル：ipop_multi.js

ipop_multi.jsソース

JavaScriptオブジェクト≠JSON

phpのjson_decode関数でJSONデータを配列に変換しようとしたがうまくいかず、nullが返されてしまうということがありました。

json_last_errorというので調べてみたところ、「JSON の形式が無効、あるいは壊れています」と言われます。

デコードしようとしたJSONデータはこんな感じです。

{hoge:123, uho:"iiotoko"}

もしかしたら、、と思ってキーの文字列をダブルクオートで囲んだら、ちゃんとデコードされることがわかりました。

実はjson_decodeのマニュアルにこの事に関する記述があって、「json_decode()でのありがちな間違い」として具体例が出ています。こんな感じです。

○　$bad_json = '{ "bar": "baz" }';
×　$bad_json = "{ 'bar': 'baz' }";
×　$bad_json = '{ bar: "baz" }';
×　$bad_json = '{ bar: "baz", }';

そのくらい大目に見てくれよ、、、という感じもしますけど、とにかくこの形式じゃないとダメということです。

jqueryで要素のindexを取得する

こんなリストがあって、

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>

何番目の要素をクリックしたかindex番号を取得したい時はこうします。

$("ul li").click(function(){
console.log($("ul li").index(this));
});

jqueryのhoverイベントをunbindする

jqueryを使っていて、hoverイベントをunbindすることがありました。

が、hoverは他のイベントと違って

$('#hoge').unbind('hover');

のようにはできません。

さてどうしたものか、、、と思ってググると以下のページを見つけました。

http://d.hatena.ne.jp/tilfin/20080615/1213608859

先に答えだけ書いてしまうと、

$("#hoge").unbind("mouseenter").unbind("mouseleave");

このようにすることで目的は達成できます。

それよりもこの記事自体、マウスイベントについてかなり深く掘り下げているので勉強になりました。

こちらの公式のデモも参考になります。
http://api.jquery.com/mouseover#example-0

php5.3でDeprecatedエラーに遭遇

xamppをアップグレードしたらphpが最新の5.3になっており、その環境でもともとあったアプリケーションを動かしたところ以下の警告が出ました。

Deprecated: Assigning the return value of new by reference is deprecated in C:\xampp\php\PEAR\HTML\QuickForm.php on line ***

このDeprecatedのメッセージは、将来のバージョンで動作しなくなる可能性があるコードがあると出るアラートメッセージだそうです。

Pear::DBとかPear::HTML_QuickFormみたいな古いライブラリは要注意ですね。それぞれ新しいバージョンが出てるので早めに移行しておいたほうが良さそうです。

とりあえず毎回アラートが表示されても困るので、php.iniのerror_reportingを以下のように変更しました。

error_reporting = E_ALL & ~E_NOTICE & ~E_DEPRECATED

MySQL5.5で文字化け(character-set-serverで解消)

クライアントマシンのmysql(xamppでインストールしたやつ)が、最近非常に調子が悪く、まともにinsertやupdateもできないような状態になってしまったので、xamppを入れ直すことにしました。

xamppの設定をするのは何年ぶりでしょうか。2年以上は間が空いてると思います。

とりあえずapacheやphpは大きな問題もなく移行が完了。
mysqlも普通に動いてる、、、と思いきや、phpからinsertをしたデータが文字化け起こしてました。

というわけで、my.cnfにお約束の文字化け回避設定をします。

[mysqld]
default-character-set = utf8
skip-character-set-client-handshake

が、mysqlが起動しなくなってしまいました。なぜ。。。

ググってみたところ、バージョン5.5以降では[mysqld]セクションのdefault-character-setが廃止され、代わりにcharacter-set-serverが追加されたそうです。

[mysqld]
character-set-server = utf8
skip-character-set-client-handshake

これで無事文字化け解消できました。ひとまず安心。

mysql5.5ではこの他にもいろいろ変更や新機能があるっぽいです。
今はまだローカルのテスト環境ですが、サーバー環境で使うとなると色々問題出てきそうですね。

table-layout:fixedでテーブルの列幅を固定する

ie7で、テーブルのセル幅指定が無視され、レイアウトが崩れてしまうという問題が起こりました。
どうやらie特有のバグみたいです。いつもながらieには本当に困らされます。

色々調べてみたところ、cssのtable-layout:fixedが使えそうなことが分かり、試してみました。

サンプル：table-layout:fixedでテーブルのセル幅を固定

table-layout:fixedを指定すると、最初の一行目でテーブルの列幅を固定するという働きをしてくれます。

さらに２行目以降のセルを描画する際に再計算をしなくなるので、ページの読み込みも早くなるようです。
ieのバグ回避以外でも使えそうだし、覚えておくとあとあと役に立ちそうなプロパティだと思います。

jqueryでアコーディオンメニューを自作する

司馬遼太郎を読むというサイトを運営してるんですが、各ページのコンテンツが非常に多く、縦に長いページになってしまっているので、アコーディオンメニューを導入してみました。

javascriptのアコーディオンメニューは探せばいくらでもあると思いますが、今回も勉強のために自作します。
というか、簡単なものであれば自作したほうが後々のメンテナンスが楽だと思います。

とりあえずググってこちらのページを見つけました。参考にさせていただきました。

http://coder.blog.uhuru.co.jp/js/easy_accordion

$('.accordion_head').click(function() {
$(this).next().slideToggle();
}).next().hide();

ソースはこんな感じ↑。非常にシンプルです。


これをベースに少し改良を加えてみました。

$('.accordion_head').click(function() {
$(this).siblings('.accordion_body:not(:animated)').slideToggle("normal",function(){ $(this).siblings('.accordion_head').toggleClass('accordion_head_opened'); });
}).siblings('.accordion_body').hide();

修正点は

・DOMの構造が違ったので、自分のサイト用にセレクタを修正
・アコーディオンが開いている時と閉じている時でそれぞれマイナスアイコンとプラスアイコンを表示
・アニメーションが終わったタイミングでマイナス/プラスアイコンの表示を切り替え
・「:not(:animated)」を加えることで多重アニメーション防止

といったところです。

実際に動いているものはこちらのページ等で確認できます。
http://shiba-ryo.net/contents/144/%E7%87%83%E3%81%88%E3%82%88%E5%89%A3

ちなみにこのページ、ブログパーツ等の読み込みに時間がかかります。
「$(document).ready(...」の中に処理を記述すると読み込みがすべて完了するまでアコーディオンが動かないので、コンテンツのすぐ後にスクリプトを設置しました。

サムネイル画像作成についてのメモ

ウェブサイト制作の仕事をしてると、サムネイルを扱うことがよくあります。
画像のサイズが全部揃っていれば問題ないのですが、縦長だったり横長だったり、様々なパターンがあるということがほとんどです。

基本的にはimgタグのwidth、heightや、cssを使って調整するのですが、きれいに見せるのはなかなか手間がかかります。

で、今回たまたまamazonを見ているときに気がついたのですが、amazonは全部縦揃え、つまりサムネイルの高さを揃えてるんですね。



まあ考えてみれば当たり前なんですが、高さが揃っていると全体的にすっきりまとまった印象を受けます。
ちなみにこれは画像を横並べにした場合です。

じゃあ縦並べの場合は、逆に横、幅を揃えてやればいいのかな、と思いますが、



画像サイズがわかりやすいように選択状態でスクリーンショットを取っています。
こちらも高さで揃えてますが、左右に余白を入れて画像サイズを揃え、中央寄せにしています。なるほど。

では楽天ではどうなのか。



細長い商品のサムネがどうなってるのか見たかったので、ラケットで検索してみました。
長辺を96pxにして縮小しているようです。

サイトの構成によって最適なサムネイルサイズは変ってくると思いますが、縦揃え・横揃え、余白ありなど、あらかじめ何種類か作っておけば完璧だと思いますが、とりあえず最低でも高さを揃えたものは作っておいたほうが良さそうな気がします。

WinSCPで特定のファイル、フォルダをアップロードから除外する

TortoiseSVNを使うと、バージョン管理しているフォルダにはもれなく「.svn」という隠しフォルダが作成され、中にはさまざまなファイル・フォルダ(バージョン管理情報でしょう)が入っています。

サーバーにファイルやフォルダをアップする際、いちいちこの.svnを避けてアップロードするのは非常に面倒です。困りました。

自分はファイル転送はWinSCPを使ってるのですが、自動で.svnフォルダをアップロードから除外できる方法はないかな～と思って探したら、設定画面でそれっぽい項目がありました。



↑のように、「除外する」「.svn/」にすれば、.svnフォルダ以下はすべてアップロードから除外されます。

あっさり悩みが解決。これでTortoiseSVNの利用がさらに進みそうです。

TortoiseSVNで個人のWindowsPCでもバージョン管理を導入

バージョン管理といえば、サーバーだとCVSとか、クライアントだとeclipseなどが定番で、自分も少しですが使用経験があります。

が、自分の場合、趣味でも仕事でもチーム開発というものをあまりしないので、基本的にバージョン管理はしていません。

が、個人レベルの開発でも「3日前に戻したい」とか「あの時に書いたソースって、もう上書きしちゃったよな。。」みたいなことがチラホラあるので、バージョン管理はできれば導入したいと思っていました。

が、いちいちサーバーの設定してクライアントも設定して、、、というのは面倒なので、結局何もしていませんでした。


今回、気まぐれで「バージョン管理 Windows 個人」みたいなキーワードでググっていたところ、こちらのページを見つけました。

TortoiseSVN でバージョン管理

なんだかよさげなので、インストールしてみました。

TortoiseSVNは、操作のほとんど(ほぼすべて？)はWindowsの右クリックメニューからできます。eclipseみたいに起動に時間がかかることもなく、快適です。

リポジトリの登録やコミットなど、基本的な操作は前述のページを参考にしつつ試してみましたが、なかなか良い感じ。これなら継続して使えそうな気がします。

まだ使い始めたばかりでわからないことだらけですが、使いながら徐々に覚えていこうと思います。