Jedit X で ZenCoding

愛用のテキストエディタJedit X」でZen Codingができないものかと探ってみました。

ライブラリ探し

Jedit Xのマクロは AppleScriptでつくることができるのですが、さすがにAppleScript実装のZenCodingというものは無さそう。でも、AppleScriptは「do shell script」でコマンドを実行できるので、Perl やら Rubyで実装されたものがあれば、なんとかなるか、と思って見つけたのが以下です。

Zen Coding の Perl 実装書きました – OTCHY.NET

全ての機能に対応している訳ではないそうですが、よく使う記述には対応しているので、これで十分に満足できそうです。使わせていただきます。

実装してみる

上記サイトから SSSCoding.pm をダウンロードして、Perlのライブラリディレクトリ(Snow Leopardだと、/Library/perl/5.10.0/SSSCoding.pm 辺り)に保存します。で、以下のようにAppleScriptを書いてみました。

tell document 1 of application "Jedit X"
     set range to selected paragraph range
     set startP to loc of range
     set endP to startP + (len of range) - 1
     repeat with i from startP to endP
          set str to paragraph i
          set res to do shell script "perl -MSSSCoding -e 'chomp($ARGV[0]);print SSSCoding::expand($ARGV[0]);'" & " " & quoted form of str
          set paragraph i to res & (ASCII character 10)
     end repeat
end tell

#なんだか改行の処理がややこしくて美しくないですが・・・。

これをスクリプトファイル(.scpt)で保存して、Jedit Xの「スクリプトウィンドウ」に放りこめば完成です。好きなショートカットを割り振っておくと、より便利です。

iPhone/Android/PCのブラウザ対応、フリック操作をシンプルに実装できるjQueryプラグイン

自作のjQueryプラグインjQuery.flickSimpleを公開します。

これは、iPhoneの特徴的なインタフェースであるフリック操作を、Webサイト上で実現するための jQueryプラグインです。某サイトのiPhone版のためにだいぶ前に書いたもので、当時はiPhone専用だったのですが、Android対応の依頼を受けたのをきっかけに、PCのブラウザにも対応しようと、大幅に作り直したものです。

フリック動作を実現するjQueryプラグインは既にいくつかあります。機能としても実装としても、私が作ったものより優れているものもあると思いますが、まずは公開することに意義がある、ということで。

ちなみに、このスクリプトは以下のようなコンセプトで作りました。

  • フリック動作のみを実装する
  • 見た目に関連する部分は、なるべく自由にできるようにする
  • その代わりに、拡張しやすいようにする
    • 内部のパラメータに簡単にアクセスできるようにする
    • コールバック関数を用意する
  • iPhoneAndroidだけでなく、PCのブラウザ上でも動作させたい
    • IE6でも動いた
    • iPhoneSafari等、CSSアニメーションが使えるものは使う
  • iPhoneAndroidの縦持ち・横持ちに対応する
  • 子要素の中にアンカーや画像があっても大丈夫
    • Macの場合、画像がドラッグされてしまわないように対処
  • 同ページ内に複数設置できるようにする

指定しただけでは、ナビゲーションやインジケータは表示されませんので、JavaScriptの初心者向けではありませんが、いろいろと機能を加えたい、JavaScriptCSSを自分で組める方には、便利に使っていただけるのではないかと思っています。

つっこみ、添削、機能追加要望など、ありましたらお寄せいただけると、喜ぶと思います。

フリック動作を実現するjQueryプラグイン

上記のモノ以外で、同じようにフリック動作を実現するjQueryプラグインを調べてみました。いくつかは、上記のjQuery.flickSimpleを制作する際の参考にさせていただきました。

追記(2011/08/02)

ダウンロードファイルをgithubに移行しました。

追記(2011/08/20)

「フリック動作を実現するjQueryプラグイン」に「flipsnap.js」を追加してみました。ちゃんと検証してませんが、私が欲しかったものに一番近い気がします。ソースコード読んで勉強させていただきます。

Windows Server の「.htaccess」と 550 FTPエラー

Windows Server 2003Apache / MySQL をインストールしてWebサイトを構築していたところ、このサーバに置いた「.htaccess」が他の端末からFTPで取得できない、という症状に出会してハマったのでメモ。

FTPのファイルリストからは「.htaccess」が見えるのだが、GETしようとすると以下のエラーがでて失敗してしまう。ちなみに、FTPサーバはIISで構成している。

550 .htaccess: The system cannot find the file specified.

FTPクライアントソフトを変えてみたり、FTPコマンドで試してみたりしてもダメ。Webで検索すると「権限がない」らしいということがわかったのだが、Windowsのファイル権限はFTPでは変更できないので、次回そのサーバを直接触れる機会までひとまずおあずけ。

実機を見て、一目でその原因がわかった。「.htaccess」が「隠しファイル」になっていた。ファイルのプロパティから「隠しファイル」のチェックを外したところ、問題なくFTPでGETできるようになった。

一般的に「.」から始まるファイルはシステムが使うファイルだったりするので、CD-ROMからコンテンツをコピーした際に、どうやらそのようになってしまったらしい。

という訳で、上記のようなエラーが出た際は「隠しファイル」になっていないかどうか、確認いただくといいと思います。

Android 2.2の不具合

スマートフォン対応サイトにて、Galaxyで<input>にfocusをあてると、ウィンドウが変にスクロールしてしまうという問題が報告された。

いろいろ調べてみると、Android 2.2 では対応していないCSS3 Animationの指定をすると誤動作する、ということらしい。

jQTouchの場合

http://code.google.com/p/jqtouch/issues/detail?id=398

下記のようにCSSをデフォルト値で上書きすると症状がおさまる。ただし、iOSや2.2以外のAndroidにも影響を与えてしまう(画面遷移の際に点滅したりする)ので、UAで判定をかけてAndroid 2.2の場合だけ以下の指定になるように改造する必要がありそうだ。

  body { -webkit-perspective: none;
   -webkit-transform-style: flat;
  }

  body>*{
    -webkit-backface-visibility: visible;
    -webkit-transform: none;
  }

jQuery Mobileの場合

https://github.com/jquery/jquery-mobile/issues/issue/292

  -webkit-backface-visibility

参考)
http://stackoverflow.com/questions/4270208/css3-animation-flicker-on-android-2-2-webkit-transformtranslate-scale-a

以上、情報を提供してくれた佐藤さんに感謝。日本語の情報がなかなか見つからなかったので、書いてみました。

スマートフォン向けサイトをつくっていると、つくずくAndroidは発展途上のOSなんだな、と感じてしまう。iOSはそろそろ成熟してきたところなんだろうけどね。

Android と基本認証

ちょっと前からスマートフォン対応のサイトを作る機会がよくありまして。

iPhone/iPod Touchはいいのですが、Androidは日本語の情報が少なくて困りますね。実機を持っていないので、検証も主にAndroid SDKでやっているのですが、これが非常に遅くてまた困り物。

ところで、Androidって、基本認証(Basic認証)をかけたサイトをブラウザで閲覧すると、JavaScriptが実行されなかったりしませんでしょうか。単純に document.writeしているものでも、文字化けしてしまっておかしなことになります。

いくつかエミュレータをつくって試してみたのですが、Android 2.1以前では、同様の症状が起こるようです。Sony Ericsson のサイトから落とせる Android SDK用のXperiaエミュレータでも同様でした。

Web屋としては、これは非常に不便です。お客様プレビュー用のテストサイトは、ほぼ全て基本認証をかけているのですが、それが使えないとなると、IPアドレスで制限をかけるよりほかありません。おかげで Apacheの Satisfy Any が大活躍状態になってます。

検索してもあまり出てこないのですが、みなさん、困ってないのでしょうかねぇ。

Cache::FileCache の purge と Purge

Cache::FileCache を使っていて、期限切れキャッシュのファイルが削除されなくてはまりました。

この記事 を参考にして Purge() していたのですが、どうやら Cache::FileCache には purge と Purge があるようなのです。上の記事のコメントを見て知りました。

で、この二つはどう違うのか、ソースをざっくりと見てみたのですが、

Purge() は、呼び出し元のオブジェクトの指定に関わりなく、引数に指定したディレクトリ以下のすべてのファイルについて、期限切れファイルを削除するようです。なので、$cache->Purge( '/path/to/cache_root' ); あるいは、Cache::FileCache::Purge( '/path/to/cache_root' ); という風に実行する必要があるのですね。

purge() は、呼び出し元のオブジェクトに指定したディレクトリ・namespace の期限切れファイルを削除してくれます。

ので、上の記事ではやはり、purge() を使うのが正しそうですね。

それにしても、このインタフェースはどうかと思いますね・・・。Cache::CacheのPOD にある説明もどうかと・・・。

疑問:mod_perl と 後置 if と my

#!/usr/bin/perl
use strict;
use warnings;
{
  my $flg;
  {
    my $cnt = 1 if ( $flg );
    $cnt++;
    print "Content-type: text/plain\n\n";
    print join( ', ', $cnt, $$, \$cnt );
  }
}
1;

上記のような CGImod_perl(ModPerl::Registry)上で動かすと、Apacheのプロセス毎に $cnt がカウントアップされます。

なぜでしょう??? 誰か教えてください。

$cnt はレキシカルスコープなはずですよね。スコープが外れた {} の後で $cnt を使うと怒られます。なのに、なぜかグローバル変数のように共有されてしまいます。

そもそも、my $cnt = 1 if ( $flg ); はどのように動作するのでしょうか。$flg は undef なので、my $cnt = 1; にはなりません。my $cnt; も実行されないとすれば、$cnt はレキシカルスコープにならず、use strict; でエラーになりそうなものですが、そうはなりません。かといって、初期化(undefがセット)もされない状態になるみたいです。

最後の print のところで、$cnt のリファレンスをscalarとして評価していますが、これを見ると同じメモリアドレスを参照していることが分かります。ということは、このメモリアドレスが初期化されずに、残っている値を参照してしまっているということなのでしょうか。

う〜ん、分かりません。誰か教えてください。

ちなみに、Perl 5.8.8+mod_perl 2.0.2、Perl 5.8.0+mod_perl 2.0.4(+両方ともApache 2.2.11)のいずれで実行しても、同じ結果でした。

#以下追記(2009/08/29)
この記事と同様のことが質問されてました。
http://q.hatena.ne.jp/1251400485

私の記事では mod_perl上での動作についてですが、同じプロセス上であれば同じことが起こるということですね。

確かに、(危険ですが)Hackとして使えないこともないですね(笑)。
http://d.hatena.ne.jp/tokuhirom/20090828/1251448289