2011年1月31日月曜日

iPhoneアプリケーション開発ガイド ―HTML+CSS+JavaScript による開発手法



会社の本棚に置いてあり、「HTML+CSS+javascriptでiphoneアプリが作れる」という帯が目に入ったので、おもしろそうだったので読んでみました。
ちなみに自分はiphoneは持ってません。触ったこともありません。

ひとまずiphoneアプリを作る予定はないので、ソースコードや詳細な解説などは適宜読み飛ばしましたが、iphoneアプリケーション、HTML5、Mobile Safari、jqtouchなどの概要を知ることができ、いろいろと得るものがありました。

特にHTML5の具体的な使用方法が分かったのは収穫でした。

簡単に言うと、HTML5ではローカルでのデータ操作にSQLが使えるようになったり、さらにそうした機能のほとんどはjavascriptでコントロールできる、ということみたいです。

今すぐHTML5をバリバリ使う、というわけではないですが、今後のウェブの進化の方向性をいろいろと考えさせられる内容でした。

2011年1月30日日曜日

Youtubeにアップした動画が勝手に短縮され、早送りのようになる

aviutlでエンコードした動画(H264,MP4)をYoutubeにアップすると、再生時間がおかしくなるという問題に遭遇しました。

具体的には、45秒の動画を投稿したのに、Youtubeに上がると12秒に短縮(?)され、再生してみると早送りのような状態になります。

ちなみに毎回発生するわけではなく、動画によって問題が起こったり起こらなかったりです。

他の人も同じような問題に直面してるようです。こちらのフォーラムを見つけました。

http://www.google.com/support/forum/p/youtube/thread?tid=3f2a52e55413b6a9&hl=ja

どうやらYoutubeがフレームレートをきちんと認識してくれないのが原因らしいです。

ベストアンサーを読みましたが、パラメータを見ても正直よくわからなかったです。そこでGUIのパラメータを見ながら色々試してみたところ、↓の画像の「ピラミッド参照化」を「none」にすることでうまくいくことがわかりました。



ひとまずこれで解決。
動画の編集やエンコードについてもしっかり勉強したいのですが、いかんせん時間がなく、場当たり対応ばかりです。

2011年1月29日土曜日

jquery.flatheights.jsでブロック要素の高さを揃える

cssでブロック要素の高さを揃えるやり方は知っていたんですが、改めて調べてみたところ、jqueryプラグインがあるのを知りました。

http://www.akatsukinishisu.net/itazuragaki/js/i20070801.html

こちらの記事は2007年と非常に古いですが、プラグインファイルの更新は「2010-09-15」となっており、定期的にメンテナンスされているようです。
ためしにjquery1.4.4で使ってみましたが、ちゃんと動作しました。

使い方も簡単ですし、jqueryを使っているサイトで高さを揃える要件があれば使ってみるといいと思います。

2011年1月27日木曜日

jqueryでvisibilityを切り替えるプラグインを作る

こちらのフォームを改良している際、要素のvisibility:visiblevisibility:hiddenの切り替えが必要になりました。

display:blockdisplay:noneの切り替えならshow()hide()が使えますが、visibilityの場合はそれがありません。
もちろんcss()メソッドを使えば切り替え可能ですが、いちいち書くのが面倒ですし、見た目もあまりきれいじゃありません。

というわけで、ちょうど良い機会だと思って、visibilityを切り替えるjqueryプラグインを作ってみました。

jquery.vtoggle.js

(function($){
$.fn.vtoggle = function(config){
var $this = $(this);

switch ($this.css("visibility")){
case "visible":
$this.css("visibility","hidden");
break;
case "hidden":
$this.css("visibility","visible");
break;
default:
//何もしない
break;
}

return $this; //メソッドチェーン用にreturn
};
})(jQuery);


見ての通り、本当に単純な関数です。

それでも、自分が作ったプラグインがメソッドチェーンの輪のひとつとして動いているのを見ると、ちょっと嬉しくなりますね。

まあ初めてのプラグインとしてはこのくらいでちょうど良かったと思います。

2011年1月26日水曜日

jqueryでformタグのonsubmit属性を削除する

Pear::HTML_QuickFormで出力したフォームには

<form action="/path/to/somewhere" method="post" name="testForm" id="testForm" onsubmit="try { var myValidator = validate_testForm; } catch(e) { return true; } return myValidator(this);">

という具合に、もれなくonsubmit属性がついてきます。

今回はこのonsubmitを消すという処理をしました。

$('#test_form').attr("onsubmit");

でさくっと消せるかな~、と思ってたのですが、消えません。

ググってみたところ、

$('#test_form').removeAttr("onsubmit");

で消せることが分かりました。

http://joshuaclayton.github.com/code/2009/06/08/handling-jquery-and-onsubmit.html


ちなみにonsubmitより利用頻度の高いonclickで検索すると、やはり属性が削除できず困っているというページが何件かヒットしました。

参考:onclick属性の操作
http://d.hatena.ne.jp/ftsh/20100729/1280396560
http://stackoverflow.com/questions/249074/how-to-change-onclick-handler-dynamically


それからこちらは「nameやidに"submit"という名前を付けるとjqueryの動作が怪しくなる」という件について。
属性の削除とは別の問題ですが、今回同様の問題に遭遇して、解決の糸口になりました。
http://www.takenoshin.com/web/blog/page/6.html

2011年1月24日月曜日

jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践



ざっと立ち読みしてなかなか良さそうだったので、買って読んでみました。

いちおうセレクタとかイベントの解説もありますが、あくまで気持ち程度。
「初級から上級まで」と銘打ってはいますが、それなりにjqueryの知識と経験があったほうが良いと思います。

ほとんどの項は1~2ページと短く簡潔にまとめられています。深く理解したい人にはもの足りないと思いますが、jqueryを使ってどんなことができるのかを広く浅く知るにはちょうど良いです。

あと自分用メモとして、サンプルのURL貼っておきます。
http://home.impress.co.jp/books/2961/

Web制作の現場で使う jQueryデザイン入門



会社の本棚に置いてあったので読んでみました。

セレクタやイベントなど、基本部分の解説がわかりやすいのが良かったです。
自分の場合、セレクタの使い方の復習として参考になりました。

とりあえずjqueryをはじめてみたい、という人向け。入門にピッタリの一冊だと思います。

2011年1月20日木曜日

jqueryで、inputフィールドにデフォルト値を入れておいてfocusしたら消す

というのをやりました。

こんな感じになります。

サンプル:jqueryでinputフィールドにデフォルト値を入れておいてfocusしたら消す

あとで知りましたが、こういうのをプレースホルダーと言うようです。ググるときはこのキーワードを使うといいと思います。

なお今回特に勉強になったのはdefaultValueの存在。

DOMで定義されている属性で、

$(this).attr('defaultValue')

という感じで取得できます。
フォームにアクセスした時にvalueがあると、この属性に値が保持されています。

参考:http://txqz.net/blog/2009/05/16/2312

2011年1月19日水曜日

jqueryで、要素をゆっくりhide()してからremove()する

というのをやるために、このようなコードを書きました。

$target.hide("slow").remove();

が、hideが終わる前にremoveされてしまうので、アニメーションの意味がなくなってしまいました。

少し悩んで、このページを見て解決しました。

http://stackoverflow.com/questions/1807187/how-to-remove-an-element-slowly-with-jquery

コールバック関数でremoveすればいいんですね。なるほど。

というわけで、コードをこのように修正してうまく動きました。

$target.hide('slow', function(){ $target.remove(); });

2011年1月18日火曜日

jqueryで指定要素"以外"のクリックイベントを実装するouterClickプラグイン

指定要素"以外"のクリックで発動するイベントを実装することになりました。
具体的には、特定のaタグをクリックすると小窓が開き、その小窓以外の、ページ内のどこかをクリックしたら小窓を閉じる、という処理です。

サンプル:outerClick

最初は.notなどのセレクタを使って実装しようと思ったのですが、小窓の中に子要素があるとうまく動作しなかったのですが、ググっていたらプラグインを見つけたのでこちらを使うことにしました。

プラグインページ
http://plugins.jquery.com/project/outerClick

デモページ
http://littleroom.se/playground/outerClick/

使い方も簡単で、

$('div#hoge').outerClick(function (event) { ... });

という具合に普通のイベントと同様に使えます。

2011年1月15日土曜日

ie8でjqueryのtoggle()が使えない

という状況に遭遇しました。

調べてみたところ、同じ問題で困っている人がけっこういるようでした。
http://okwave.jp/qa/q6169954.html

is(':hidden')も使えないようです。
この方はjqueryのソースコードの中まで見て調べています。
http://d.hatena.ne.jp/hiro_nemu/20090821/1250837131

ie8をie7互換モードで動かすという解決策もあるようです。
http://d.hatena.ne.jp/hide1080/20081116/1226833590

ie8でも環境によっては使えることもあるようで、正直よくわからないですね。
なんにしても迷惑な話です。

2011年1月14日金曜日

photoshopで「保存されるファイルの中に、ラテン文字以外の文字が含まれてい ます...」の警告メッセージ

たまにphotoshopを使うんですが、ファイルを保存するときにいつも「保存されるファイルの中に、ラテン文字以外の文字が含まれています。これらのファイル名と互換性のない Web ブラウザやサーバがあります。」というアラート(?)メッセージが表示されます。

特に不具合もないので無視してましたが、ちょっと気になったのでググってみました。

答えはadobeのサイトに載っていました。

http://kb2.adobe.com/jp/cps/223/223753.html

ファイル名やフォルダ名、つまり保存するパスに2バイト文字が含まれているとこのエラーが出るようです。
ほぼ毎回エラーが出る理由が分かりました。


そして解決策は、

上記の警告メッセージを表示しないで保存するには、「ファイル名」、「保存先のフォルダ名」、「保存先のフォルダのパス名」に 2 バイト文字を含まないようにします。


とのこと。
設定などでは回避できないようです。。

かなりウザいですが、いまさらPC内のフォルダ名を変更するのも難しいので、ガマンするしかないようです。

2011年1月13日木曜日

jquery+Pear::HTML_QuickFormでメールフォーム

を作ってみました。

フォームの送信はjqueryのajaxメソッドで、Pear::HTML_QuickFormはエラーチェックに使っています。
エラーがある場合はphpからjsonでエラーフラグとエラーメッセージを出力し、jqueryでエラーを受け取って処理します。

jqueryでエラーチェックのロジックを書いてもいいと思いますが、HTML_QuickFormのエラーチェックは使い慣れているので、この組み合わせでメールフォームを作ってみました。

こちらがそのフォームです。メールは飛ばないので、好きなだけ送信ボタンを押して大丈夫です。

サンプルメールフォーム

html,css,javascript,phpを完全に分離しているので、このようにブログ記事、ページ内にフォームを設置できます。(linkタグをdiv内に入れるな、という警告が出てしまいますが)


ソースはこちら。

mail_form.css
mail_form.js

phpはこんな感じです。


<?php

require('HTML/QuickForm.php');
require('HTML/QuickForm/Rule.php');
$form = new HTML_QuickForm('mailForm');

$form->addElement('text','contact_name','contact_name',array());
$form->addRule('contact_name', 'お名前を入力してください', 'required', '', 'server');
$form->addElement('text','contact_email','contact_email',array());
$form->addRule('contact_email', 'メールアドレスを入力してください', 'required', '', 'server');
$form->addRule('contact_email', 'メールアドレスを正しく入力してください', 'email', '', 'server');
$form->addElement('text','contact_title','contact_title',array());
$form->addRule('contact_title', '件名を入力してください', 'required', '', 'server');
$form->addElement('text','contact_description','contact_title',array());
$form->addRule('contact_description', '内容を入力してください', 'required', '', 'server');

$result = array();
$result["error"] = 0;

if($form->validate()){ $form->process("send_emails",FALSE); }
else{
$result["error"] = 1;
$result["error_msgs"] = $form->_errors;
}

echo json_encode($result);
exit;


function send_emails($v){
//メール送信
}
?>


昨年後半から少しずつjqueryの勉強をしていますが、こうやって実用的なアプリケーションが作れるようになってくるとコーディングも楽しくなってきますね。

今年はさらにjqueryの知識や経験を深めていきたいと思います。


※2011/01/24追記
display:noneの要素(送信中表示やサンキューメッセージ)からはouterWidth()等のメソッドで要素のサイズを取得できないことがわかったので、display:noneではなくvisibility:hiddenを使うようにソースを修正しました。

2011年1月12日水曜日

「Dust-Me Selectors」で使っていないCSSを整理する

サイトを長く運営していると、使っていないCSS、いわゆるゴミがどんどん増えてきます。

パフォーマンスに影響が出るほどのゴミではないのですが、編集作業の邪魔になったりすることはよくあります。

というわけでCSSの掃除をしようと思ってググってみると、まず「CSS Redundancy Checker」というウェブサービスが見つかりました。

が、サイトにアクセスしてもエラーが出るだけ。どうも閉鎖してしまったようです。

というわけで他の方法がないか探してみると、「Dust-Me Selectors」というfirefoxのアドオンがありました。

https://addons.mozilla.org/en-US/firefox/addon/5392/

さっそくインストールして使ってみます。

ステータスバーに箒のアイコンが出てくるので、これをクリックすると箒が動き出し、開いているページのチェックが始まります。



チェックが終わると使われていないセレクタの一覧が出力されます。
このkawama.jpだと、wp-calendarのセレクタなどが検出されました。



サイトマップなどを指定すると、サイトの全ページをまわってチェックしてくれます。

cssの掃除って面倒なのでサボりがちになってしまうので、こういうツールがあると助かります。

2011年1月7日金曜日

フォントをemで指定(bodyでfont-size:62.5%)

ユーザビリティの点で、フォントはpxでなくemで指定するのがベター

というのが少し前から言われています。

ただ、ずっとpxを使い続けている自分としては、実際にemを使うとなると戸惑いがあります。

が、最近、bodyに対してfont-size:62.5%を指定するという手法を知りました。

こんな感じで62.5%指定します。

body {
font-size: 62.5%;
}


これだけですが、詳しく説明しますとそのページの標準状態の文字サイズの大きさが10pxであれば、12pxの大きさは1.2emとなります。20pxであれば2emとなります。

body要素に対して"font-size: 10px;"としてしまうと、IEのメニューから文字サイズを変更できなくなります。そこでパーセント単位で指定するために、62.5%(10px÷16px)を指定しています。


http://css-style.jp/notebook/xhtml_css/font02.html

とりあえず一度使ってみましたが、なかなか使い勝手がいいです。px指定から卒業できそうな気がします。

2011年1月6日木曜日

jqueryで年齢認証っぽいダイアログを表示する

amazonなどで見かける「あなたは18歳以上ですか?」の警告、いわゆる年齢認証"っぽいもの"をjqueryで作ってみました。

参考:amazonの警告画面

amazonはサーバー側で認証してますが、javascriptだとクライアント側での認証です。
なので本質的に違うものになりますが、jqueryなら簡単に作れそうだと思ったので、とりあえず同じようなものを作ってみました。

流れとしては

0.クッキーを確認。認証が済んでいなければ1へ
1.ページにアクセスしたら画面全体を黒くし、認証ダイアログを表示
2.「いいえ」をクリックしたらYahooに飛ばす。「はい」をクリックしたらそのままページを表示
3.「はい」をクリックした場合、認証OKのクッキーを食わせて、再訪してもダイアログは出さないようにする

という具合になります。


クッキー制御にはjquery.cookie.jsを使いました。
http://plugins.jquery.com/project/cookie

認証ダイアログはSimpleModalというプラグインを選択。似たようなライブラリはいくつかありましたが、調べた中では最終更新が一番新しかったのでこれを選びました。
http://www.ericmmartin.com/projects/simplemodal/


サンプル:jqueryで年齢認証っぽいダイアログを表示


所詮はクライアントサイドなので限界はあると思いますが、先にcssでbodyをdisplay:noneにしておくとか、いろいろ工夫することでサーバーサイドの認証に近づけられると思います。

2011年1月5日水曜日

Yandexボットからのアクセス

正月休み中のログを見ていたら、Yandexというクローラーからアクセスが目につきました。

このYandexというのは、ロシアの検索エンジンだそうです。日本語には非対応ですが、コンテンツの収集をしているようです。

robots.txtを読んでるし、ちゃんとUserAgentで身元も明かしているのでそれほどお行儀の悪いボットではないようです。
またクロールされているのはAmazon PAAPIとは関係ないコンテンツサイトなので、アクセスが多くてもそれほど被害はありません。

というわけで、しばらくは様子を見てみようと思います。