スパイスラボ神部です。

OpenSocialアプリで開発中は外部ファイルのキャッシュを聞かせたくないので、次のような記述をするときがあります。

<script langage="javascript">document.write('<link rel="stylesheet" href="http://example.com/css/test.css?rand=' + Math.random() + '" type="text/css" />');</script>

これはこれでしっかり動作します。次にこれを

<script langage="javascript">document.write('<script language="javascript" src="http://example.com/js/test.js?rand=' + Math.random() + '" type="text/javascript" />');</script>

といったかたちで外部JavaScriptを指定しても同様にキャッシュされずに読み込んでくれます。

しかし不思議なことにこれらの行を二行続けて書くと最初に読み込まれた行しか評価されません。

Firefox, IE8ではそのような挙動で、Google Chrome では両方が読み込まれます。これは何故なんでしょう。

ちなみに

こんな方法もある

-JavaScriptメモ：javascript(.jsファイル)をキャッシュさせない２ - KUMA TYPE

と書かれているのですが、タグ中にインラインで記載された JavaScript ファイルが SSI ライクに実行されるはずもなく、アクセスログを見てみると example.js?+(new Date().getTime()) というファイルを取りに来ているだけでした。

解決

Twitterでブログエントリをつぶやいたところ、なかじまんさんからのアドバイスで解決しました！

-閉じ要素 '</script>' がないからだと思います。また、そのとき、そのままだと評価されないと思うので、'</scr'+'ipt>' とかしてごまかす必要もあります。

現在は下記のサンプルで動作を確認出来ます。

-外部ファイルのキャッシュ抑制

※JavaScriptを先に書いた場合

-外部ファイルのキャッシュ抑制その２

※CSSを先に書いた場合

IE, Firefox, Google Chrome すべてで動作しました。

追記

-2009-11-04 - おもしろWEBサービス開発日記

によると、さらにスマートな方法が提示されました。document.writeをHTMLコメントタグで囲むといいらしいです。こちらもやってみたいと思います！

（さらに追記）

こちらにサンプルを作ってみましたが、IEとChromeでは動作したものの、Firefox ではなぜかソースコードが表示される状態になってしまうようでした。

スパイスラボ神部です。

OpenSocial アプリの開発を効率化するために、jOpenSocial か opensocial-jquery のどちらかを使いたいのですが、そのためにはまず jQuery について学ばないといけないようなので、jQuery についてざっと調べてみました。

-AJAXが好きだ！ - Favorites!

Write less, Do more

-jQuery: The Write Less, Do More, JavaScript Library

まずは公式。

リファレンス

-jQuery 1.3.2 日本語リファレンス

参考になりそうなリソース

いろんな記事を見ると、とりあえずは jQuery を使うと、構造化された状態でリッチアプリケーションが組めるという部分が強調されている記事が多いような気がします。「jQuery + AJAX で RIA な UI が作れる」ってことでよいのでしょうか。

-jQueryサンプル集 | DesignWalker

いろいろな UI が紹介されていますね。

-jQueryの魔法 - ［JavaScript］All About

どうやら「メソッドチェーン」というのがキモみたいです。

-はじめてのjQuery

デザイナ向け「はじめてのjQuery」 - あと味 より。なごんだ。

-jQuery を使って Ajax 開発を単純化する

-【レビュー】カユいところに手がとどく - 軽量・高速「jQuery」 (1) jQueryとは | エンタープライズ | マイコミジャーナル

ちょっと古いですが。

DreamWeaver で jQuery とか AJAX とか

-AIR チュートリアル Dreamweaver 第４回 オープンソースを使ってみよう！～ jQueryを利用する～ | デベロッパーセンター

こちらも面白そう->AIRチュートリアル Dreamweaver 第３回　リッチなUIを作ってみよう！～ Spryエフェクトと入力チェックを利用する～ | デベロッパーセンター

コードサンプル・チュートリアル

-jQuery Tutorials for Designers

-jQuery: jQuery実践サンプル

各種サンプルのライブデモ＆コードを見ることが出来ます。

jQuery + JavaScript 実践リファレンス も同じ？

-一晩で覚えるjQueryの逆引き基礎サンプル7つ*ホームページを作る人のネタ帳

こっちは一晩だったｗ

-jQueryでクールなくるくるウィジェットを作ろう

-jQuery 開発者向けメモ - 基本・サンプル

-よくある質問っぽいののjQueryを使ったサンプル｜CSS HappyLife

-jQuery 開発者向けメモ - リファレンス

-jQuery入門（その1）：CodeZine

-jQuery 関連記事まとめ - Cyokodog::Diary

超充実リンク集。

-心は十五歳の少年漂流記 » jQueryをはじめよう

とりあえず

雛形に慣れ、メソッドチェーンを使うと言うのをやってみたいと思います。

スパイスラボ神部です。

たとえばソーシャルブックマークのような仕組みを作るとき、Bookmarklet である URL をブックマークしたとしたとします。そのとき URL はまだしも、そのページに見出しにあたるタイトルを文字化けなく取得するのは結構難しい気がします。日本語は SJIS、EUC に加え、UTF-8 でも既述ができ、たまに JIS であがっちゃっているサイトなんかも含めると、よっぽど精査しない限りタイトルが化けてしまいます。

この混乱した悲惨な状況を回避するために、いくつかのサンプルブックマークレットと、受け側での対処方法についてじっくり考えてみたいと思います。また、一年以上ぶりに人力検索でも質問をあげてみました。はてな人力検索は技術に強いのでは？という期待を込めて、あえて無料の Yahoo! 知恵袋や OKWave を使わずにコミットしてみたいとおもいます。

有用なコメントをくださる方は人力検索で回答くださればこちらにコメントをお寄せいただくよりもポイントを差し上げられます。ご活用ください。

人力検索の質問

-日本語サイトのタイトルを、ブックマークレット経由で文字化けを起こさず取得する方法について悩んでいます。 - 人力検索はてな

おことわり

このエントリは公開しながら編集していきます。お見苦しいところもあるかお思いますが、問題解決の過程も出来ればオープンにしていければと思ってのことですので、どうぞご了承ください。

-文字化け対策が好きだ！ - Favorites!

まずは取り込むためのブックマークレットを作成する

現状では、ブックマークレットから PHP のプレビュー画面に渡る際に、すでに文字化けしています。

まず最初に、各引数のエンコードの状態を見渡してみました。

タイトル、URL、それから選択部分に関して GET を通じて受け渡しを行っているのですが、選択部分に関して encodeURL コンポーネントをかましていない変数を発見。こちらを修正することで文字化け率がかなり下がりました。

ブックマークレットでは、JavaScript の変数として

タイトル：document.title

URL：document.href

選択部分；（ブラウザによって異なる選択方法）

によりそれらを取得することが出来ます。当然ですがこれらは（もし行うなら）どれも同じエンコード処理を行うことが望ましいので、今回私のしたような漏れがないことは確認すべきですね。

Web サイトの文字コードの見分け方の究極は？

人力検索でおこなった質問 に早くも回答がつきました。

これまでは、元サイトの文字コードを判別する方法として、HTTPヘッダ、HTMLヘッダなどを解析して二次的に取得・判別する方法を考えていましたが、こちらの回答で示されているやりかたなら、ブックマークレット自体が文字コードを自己申告することになり、よりスマートな対応が出来るかもしれません。

どうしても対処できないもののために、手動で修正可能にしておく必要も？

どうしてもブックマークレット側では自動的な処理が難しいようなら、はてなブックマークのタイトル編集のように、人間が手動で修正できるようなUIも用意すべきかもしれません。

けっこう整備されていない「アプリ間でのマルチバイト受け渡し」

そういえば Firefox から Outlook で「URLを送信」するさいも文字化けしますよね。このあたり、意外と見過ごされてるのかも。

参考リンク

-選択範囲の取得について調べた - daily dayflower

-Safari や Google Chrome でもはてなスターで選択範囲を引用できるようにする Bookmarklet - IT戦記

開発環境

-Firebug :: Firefox Add-ons

所感

人力検索とブログエントリの組み合わせは結構相性がいいかも？

人力検索をオープンする際に、コメントとトラックバックを受け付けるしくみにしておくと、ブログエントリからの参照をトラックバックとしてリストしてくれるようだ。これは結構相性としてはいいかも。ポイントはいらないけど、問題解決に興味があるからということで自分のブログに書いてくれる人もいるかもしれないですし。

スパイスラボ神部です。

単刀直入に言うと、JavaScript で入力済みフォームにフォーカスをあてるときのブラウザ間の挙動の差異に困っています。

-JavaScriptが好きだ！ - Favorites!

とりあえず Win 版 Firefox と IE で

textarea に入力済みのフォーム部品があったとします。このウィジェットに focus でカーソルを移動させると、それぞれ下記のようにフォーカスがあたる（カーソルが移動）します。

IE の場合・・・テキストエリアの先頭に

Firefox の場合・・・テキストエリアの末尾（入力済みテキストの最後に）

これを解決するにあたり、なにかいい方法はないものでしょうか。

ちょっとヒントになりそうなもの

-教えて！北京五輪「みんなにＱ＆Ａ」 テキストエリアへセットフォーカス

ついでに気になる情報

[JavaScript] focus()するならblur()してから | FXB | 株式会社エフエックスビイ

うまく行く方法があれば、追記したいと思います。

もうひとつ知りたいこと

もしかしたらなにかの拡張機能でできるのかもしれませんが、

「自分が現在フォーカスをあてているフォーム部品」

への JavaScript 的なパス document.[formid].[widgetid] みたいなのを一発取得してクリップボードにコピーできるようなものありませんかね！

追記：setSelectionRange でいってみよう

textbox.setSelectionRange(0, 0); によると、

[PathToTheelement].textbox.setSelectionRange(0,0)

とかでいけるみたいです。

手元でもばっちり確認できました。

関数の名前からすると、もともとは範囲選択をするためのもののようですね。

テキストボックス内でカーソル位置を移動する方法 - Enjoy*Study

追記２：動作確認出来たブラウザ

Sleipnir、Google Chrome の原稿最新バージョンでも動作確認出来ました。