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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

display:blockとdisplay: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);

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

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

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

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

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

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

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

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

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

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

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

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

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