戯術者の日記

ツイッターの公式アプリなんかでよくある「引っ張って続きを取得」するための JavaScript ライブラリにhttp://cubiq.org/iscroll-4というのがあるので、これを使ってみる。

配布サイトの「DOWNLOAD」をクリックで、zipのアーカイブがダウンロードされる。5/2時点でver4.2。
zipを展開して examples/pull-to-refresh/index.html を開けば、デモが見れる。

でもこれに、jQueryMobile を加えようとしても、jqmのヘッダやフッタがちゃんと表示されなかったり、ちゃんと動作しないのよね。

というわけで、この iScroll4 を jQueryMobile で使うためのプラグインをいくつか試してみた。

仕様なのかな？
jQueryMobileのスクリプトを読み込んでおくと、tableをheight:100%とかにしててもなぜか有効にならない(widthは有効)。

jQueryMobile未使用	jQueryMobile使用

jQueryで取得した要素の親要素・子要素を参照するには

前回([2013-02-28-1])の記述のままだと、スマートフォンのブラウザで見たときに画面サイズが残念な感じになる(下図)ので、Viewportの設定をヘッダ部分に記述する。

jQueryMobileを使うには

• jQueryのサイト(CDN)にあるjs+cssを直接参照
• ダウンロードしてローカルで保持したものを参照

のどちらかの構成。

(ついでにchalowを1.0rc6から1.0へVerUpしてxhtmlできるだけ対応して1エントリ1ページ形式へ変更、とか)

ASCII.jp : 技術系サイトに必需品！ソースコードは鮮やかに
など。
プログラミング系のブログなどでコードがハイライトされてるのをずっとカッコイイなーと思ってて、最近pukiwikiのコードハイライトをちょっとイジったときにほしい物にたどり着いたので組み込んでみた。

ちょっと使いたくなっていろいろ探してみた。
…が、でて来るのは汎用的で高機能なものが沢山で、コード例や作成のTipsみたいなのはさっぱり。(使用に関してはライセンス上は特に問題ないみたいだけど)
つーわけで作ってみた。

やりたい事は、フォームの入力において、フォーカスしている項目の説明みたいな感じ。んで、できればブラウザごとの処理振分はやりたくない(わがまま)
※ 動作確認は IE6.0(winXP) / Firefox 2.0.0.2(winXP) のみ

<form name="foobar" method="post" action="hoge.cgi">
  <input type="hidden" name="key1" value="val1">
  <input type="hidden" name="key2" value="val2">
</form>

に対して

<script language="JavaScript">
  document.foobar.submit();
</script>

でGO

今更ドキュメントシリーズ。
ちょうど1年前くらいに社内用で作成してたけど、メモってなかったので。

Proxy Auto-Config File Format

必ず定義しなければならないのは FindProxyForURL(url, host) 関数。通常のプログラムの main に相当するようなもの。
引数の url にはアクセスしようとする URL が、host にはそのアドレスが入る。
で、戻り値として "DIRECT" で直接接続、"PROXY proxy.example.org:8080" で proxy.example.org:8080 を使うようなる。
個人的に良く(という程使ってないけど)使う関数は isInNet と shExpMatch。まぁ例見るのがわかりやすいかな。shExpMatch は正規表現ではなくファイルグロブによるマッチング(っぽい)

以下、「ホスト名でのアクセス, example.org, example.net, 192.168.*.*, localhost は直接接続、example.com, 10.*.*.* は proxy に 172.24.1.1:8080 使い、それ以外は proxy.example.org:8080 で Web アクセス」

function FindProxyForURL(url, host)
{
  if (isPlainHostName(host) ||
      shExpMatch(url, "http://*example.org*") ||
      shExpMatch(url, "http://*example.net*") ||
      isInNet(host, "192.168.0.0", "255.255.0.0") ||
      isInNet(host, "127.0.0.1", "255.0.0.0")) {
    return "DIRECT";
  }
  else if (shExpMatch(url, "http://*example.com*/") ||
           isInNet(host, "10.0.0.0", "255.0.0.0")) {
    return "PROXY 172.24.1.1:8080";
  }
  else {
    return "PROXY proxy.example.org:8080";
  }
}

んで、proxy.pac という名前で、proxy 不要でアクセスできる Web サーバにおいておき、ブラウザの「自動構成スクリプトを使用する」やら「自動でプロキシを設定する」やらで設定すれば OK

で、netscape のドキュメントには、application/x-ns-proxy-autoconfig という MIME type を追加せよとあるんだけど、なくても一応動くんだよな… うーむ

高度な JavaScript 技集

作る人は作るんだね。すばらしい。