和田憲幸のブログ

今回はめんどくさいからQuickTimeXで録画したものをそのままアップしてみました。キャプションを付けるよりナレーションを付けたほうがわかりやすいかもしれませんね。

TabClip機能

前回ご紹介したような気がするTabClipですが少し調整しました。TabClipクラスでラップした要素を抜き出して別タブとして表示させる機能ですが、まず要素にオーバーレイするボタン的なオブジェクトを自動追加します。また、別タブで開かれた要素は指定のCSSまたは既定のCSSを読み込むように調整しました。タブを閉じるボタンも自動的に追加されます。これはスマートフォンでtableを処理する際の解決策としてはベストアンサーに近いんじゃないかなと自負しております。

mscale機能

これも実用度かなり高いと思うのですが、スマホで表示する際に画像のスケールを指定することで自動縮小できる機能ですね。CSS側である程度一括の指定はできるのですが、細かく画像を配置しているページなどはスマホ用にCSSを起こすのが面倒じゃないすか。なんでclass指定で50％だとか25％にしちゃうって感じで。当初はimgタグで指定されたwidthやheightを基準にスケール調整しようと思っていたのですがクソMSIEがDOMツリー適用後にうまくwidthとheightを拾ってくれなかったため画像の原寸を拾ってからそこにスケール調整をかけています。一応、今年はWindowsPhoneも出るからね。

と、いうことで新機能の紹介でした。現在、synck.comのリニューアル作業をやっているのですが、やはり実際にサイトのテコ入れをするにあたり「こんな機能があれば」「あんな機能がほしい」とやや収集が付かなくなってきている感があります。さっさと公開してぇ。

画面収録環境

参考までに今回の動画の撮影環境のご紹介。画面収録はMacOS標準のQuickTime Xというソフトで行なっています。マウスカーソルの部分にスポットライトを当てるのはAppStoreで85円で打ってるmouselightというアプリを使っています。コマンド＋ESCでスイッチできるので便利ですねこれ。あとはiPhoneの画面が表示されているのはMacでAirPlayを実現するReflectorというアプリを使っています。QuickTime X＋Reflectorのコンボはスゴイ使いやすい！本当にMacは便利ですねぇ。