現在、かも日記では、ブックマーク追加ボタンの作成支援Webサービス「
AddClip 」を使わせていただいており、これがなかなか便利なのですが、
indexページなどの場合に、何度も表示されるたびに、AddClipsWindowという関数を、何度でもロードしてしまうので、1回こっきり(
べきとう ?)になるように、抑制してみました。
<script type="text/javascript" src="http://www.addclips.org/addclips.js"></script>
これを↓ こう修正
<script type="text/javascript">
if(typeof AddClipsWindow!='function')
document.write('<scr'+'ipt type="text/javascript" src="http://www.addclips.org/addclips.js"></scr'+'ipt>');
</script>
あとGoogoleも同様なんですけれど、こっちは現在iframeで読み込まれているのと、コードの変更が認められていないので、ちょっと手を出ししにくい、、、。うーん。でも、、、。
Calendar Plugin for jQuery 1.2.1 (nightly)
http://jsgt.org/lib/jquery/plugin/calendar/nightly.htm
まぁ、移植といってもほぼ全部書き直しです(笑)。
旧版の機能は、まだ、全部入れてませんが、それ以上に追加機能が増えそうです。
最初、エンジンはjQueryに依存せずYUIなどでも切り替えて使えるようにカレンダーコアだけ書くつもりだったのですが、書いているうちに、勉強も兼ねつつあちこちにjQueryを使いたくなって結局、とりあえずjQuery専用ですf^^;。
でも、動作は旧版の方がjQuery版よりもきびきび動きますね。( jQueryは、汎用ですから無駄もありますし、 あるいは、jQuery のあの魔法＾＾；のせいかなぁ )＜作り方のせいかも(^^;
旧版日付入力用カレンダー
http://game.gr.jp/js-ml/samples/199912/calendar/cal1.htm
うーん、旧版のスコープとか名前を整理するだけにして、まるまんま、放り込んだほうが良いかもf^^;、、、。汎用ライブラリの魅力は簡単に書けることですが、速度は眼をつぶるようかなぁ。。。
あ、でも、追加機能はやっぱりjQueryでないと増やす気にならないので、やっぱりjQueryですね。
2007-11-16-1 日付フォーマットの指定用属性を datetmp="YYYY/MM/DD"にしてみる
Calendar Plugin for jQuery 1.2.1 (2007-11-16-1) http://jsgt.org/lib/jquery/plugin/calendar/20071116-1.htm
<input class="jquery-calendear" type="text" datetmp="YYYY/MM/DD" />
<input class="jquery-calendear" type="text" />
<input class="jquery-calendear" type="text" datetmp="YYYY年M月のD日はW曜日" style="width:180px" />
<input class="jquery-calendear" type="text" datetmp="YYYY-MM-DD【W】" />
追記 とりあえず (3) でnightly
Calendar Plugin for jQuery 1.2.1 (nightly) http://jsgt.org/lib/jquery/plugin/calendar/nightly.htm
2007-11-14-1-1 日付フォーマットの指定方法 コードの書き方候補(3) attributeで datetype="YYYY/MM/DD"
Calendar Plugin for jQuery 1.2.1 (2007-11-14-1-1) http://jsgt.org/lib/jquery/plugin/calendar/20071114-1-1.htm
(1) は、仕様を気にする必要が少なそうですが、圧縮をかけたときに、あっさり削除される危険があります(^^;ので、 (2) か、この(3)のどちらかかなぁ。こういう時HTML実装は自由で良いなぁ(笑)。しかも、これは多くのブラウザ（たぶん）で使えます。つまり、多くの利用者を排除せず、便宜を提供します。うんうん。＜JavaScriptな時点で、、、＜手入力を排除してないということで。
<input class="jquery-calendear" type="text" datetype="YYYY/MM/DD">
<input class="jquery-calendear" type="text">
<input class="jquery-calendear" type="text" datetype="YY年MM月DD日">
<input class="jquery-calendear" type="text" datetype="YYYY-MM-DD(W)">
取得方法はこれです。
$(INPUT要素).attr("datetype");
追記 2007-11-14-1-0 日付フォーマットの指定方法 コードの書き方候補(2) <hoge value="日付フォーマット">
Calendar Plugin for jQuery 1.2.1 (2007-11-14-1-0) http://jsgt.org/lib/jquery/plugin/calendar/20071114-1-0.htm
<input class="jquery-calendear" type="text"><jquery value="YYYY/MM/DD" />
<input class="jquery-calendear" type="text">
<input class="jquery-calendear" type="text"><jquery value="YY年MM月DD日" />
<input class="jquery-calendear" type="text"><jquery value="YYYY-MM-DD(W)" />
取得方法です。
$(INPUT要素).nextSibling.getAttribute("value")
追記 2007-11-14-1 日付フォーマットの指定方法 コードの書き方候補(1)
Calendar Plugin for jQuery 1.2.1 (2007-11-14-1) http://jsgt.org/lib/jquery/plugin/calendar/20071114-1.htm
2007-11-12-1 日付フォーマットの指定方法
に引き続き、実際のコードの書き方を考えてみました。旧版 はINPUT要素のインラインにonclickイベントを書いてそこに書いた関数の引数で渡しましたが、今度は（できればJSとHTMLを切り離したいので）インラインのonclickイベントをなるべく使いたくありません。
<input class="jquery-calendear" type="text"><!--YYYY/MM/DD-->
<input class="jquery-calendear" type="text">
<input class="jquery-calendear" type="text"><!--YY年MM月DD日-->
<input class="jquery-calendear" type="text"><!--YYYY-MM-DD(W)-->
ポイントは、INPUT要素の直後にスペースも改行も入れずに、たとえば、<!--YYYY/MM/DD-->と書きます。クオート「"」や「'」も使いません。
あと、これはHTMLコメント部ですので、&と<と>は、実体参照& (&)、 < (<)、> (>) で書く必要があるのが少し面倒ですが、、、まぁ、いっか。日付ですし。
コメントが続かなければ、デフォルトのYYYY-MM-DDでフォーマットされます。
ちなみにこのコメントデータをどうやって取得しているかというと、jQueryの.next()メソッドは使えなかったので、普通にDOMのnextSiblingを使いました。一応、nodeTypeを調べてチェックしていますが、もう少し厳密に取得すべきか、少しだけ迷っています。
$(INPUT要素).nextSibling.nodeValue
追記 2007-11-13-1 オブジェクトの階層を整理
var ex= jQuery.extend({calendar:{date:{...でコピーした分がすべてjQueryオブジェクト直下に露出して行儀が悪いのでとりあえず
jQuery.extend($.fn.calendar,{date:{...でfn.calendar 配下へ放り込んでおきました。$.fn内に露出していた分iniとdrawも整理。
Calendar Plugin for jQuery 1.2.1 (2007-11-13-1)http://jsgt.org/lib/jquery/plugin/calendar/20071113-1.htm
こうなりました。
簡単にいうと、
jQuery.extend({test:1}) //$.test or jQuery.test
と書くと、プロパティ test は、jQueryオブジェクトまたは$ショートカット直下にコピーされて
$.test または jQuery.test となります。ただ、これでは、$直下が散らかるので、
jQuery.extend($.fn.calendar,{test:1}) //$.calendar.fｎ.test or jQuery.fn.calendar.test
という風に$.fn.calendarへコピーすることでcalendarの下にすべてのメンバをまとめてみたということです。とはいえ、calendarという名前は一般的すぎないか？という点は、時間があれば、、、。
追記 2007-11-12-e 時点でのオブジェクト構造
ああ、var ex= jQuery.extend({calendar:{date:{...でコピーした分がやはり、行儀が悪いかなぁ、、、。すべて fnへ閉じ込めるべき？
追記 2007-11-12-3 インラインモードとドラッグモード
カレンダー出力用のBOX DIVである
<div id='jquery-calendar-box'></div>は、デフォルトでは自動出力されてドラッグモードになります。
でもこれを、
もし、あえて、HTML内の好きな場所に置くと、自動的にインラインモードとなり、ドラッグできなくなります。
また、クリック後にもカレンダーは消えません。
定位置にカレンダーを配置しておきたいケース用です。
入力したいターゲットINPUT要素へ一度カーソルを入れてからカレンダーをクリックすると、その要素へ日付が出力されます。
nightly も更新しました。
Calendar Plugin for jQuery 1.2.1 (2007-11-12-2-e)http://jsgt.org/lib/jquery/plugin/calendar/20071112-e.htm
<input class="jquery-calendear" type="text">
<input class="jquery-calendear" type="text">
<div id='jquery-calendar-box'></div>
追記 2007.10.12 19:54
# 2007-11-12-2 今日class="today" と今月 class="curr-m" を追加
# 2007-11-12-1 日付フォーマットの指定方法
Calendar Plugin for jQuery 1.2.1 (2007-11-12-2)http://jsgt.org/lib/jquery/plugin/calendar/20071112-2.htm
追記 2007.10.12 00:38 nightlyをアップデートしました
Calendar Plugin for jQuery 1.2.1 (nightly)
http://jsgt.org/lib/jquery/plugin/calendar/nightly.htm
同じもの
http://jsgt.org/lib/jquery/plugin/calendar/20071111-1.htm
まだ、起動メソッドの書式などを決めていませんがf^^;、とりあえず、デフォルト設定で良ければ、クラス指定 <input class="jquery-calendear" type="text"> だけで、jsに触らずに使えるようにしてみました。
<style> .testclass2 { color:red } </style>
<input class="jquery-calendear" type="text">
<input class="jquery-calendear" type="text">
<input class="jquery-calendear testclass2" type="text">
追記 2007.10.11 01:19 nightlyをアップデートしました
Calendar Plugin for jQuery 1.2.1 (nightly)
http://jsgt.org/lib/jquery/plugin/calendar/nightly.htm
同じもの
http://jsgt.org/lib/jquery/plugin/calendar/20071110-4.htm
一応、構築部のテキスト処理化率を上げて高速化と、IE用focusバグ対応と、CSSはjQueryではなく素直に（誰もが使える）CSSで指定するようにして少し軽く&デザイナーと分業などを考慮しました。
追記 2007.10.10 19:11
また、少し問題発生f^^;。月送りのボタンをカレンダー内へ入れたら、Win IEで見たときに、どうにもクリックがもどかしいので、原因を切り出すために、ちょっと怪しい気がするドラッグとボタンだけの単純なサンプルを作ってみました。
http://jsgt.org/lib/jquery/plugin/calendar/20071110-3jqbug.htm
やはり、連続クリックができません。
ドラッグ対象のElement内のボタンは、Win IEでは、続けてクリックができなくなっているわけです。
うーん、なんか、あれっぽいなぁ、ということで、、、
↓ 修正
http://jsgt.org/lib/jquery/plugin/calendar/20071110-3jqbug2.htm
めでたく、解決しました。でも、まだ、納得はいきません。。。。うーむ。jQueryといえども完全を期待するのは無理。でも、許す。(＜って、許す権限ないだろ)
追記 2007.11.10
あまりに重たいので、カレンダーテーブルの構築部分からjQueryを順番にはずしてみました。その結果最終的に、テーブルはすべて<tableや<tr><td>といった要素の文字列だけで作成し、構築部では最後にちょっとだけjQueryを使う、というところまで削って、許せるスピードを回復しました(^^;。それでも、構築部以外でjQueryを使うメリットはあります(^^。
http://jsgt.org/lib/jquery/plugin/calendar/20071110-2.htm
↓ チューニング後
http://jsgt.org/lib/jquery/plugin/calendar/20071110-2tun.htm
効率の良いCSSの適用方法を考えないと、、、。
古籏一浩 ( 2007年11月10日 23:42 )
とりあえずカレンダープラグインがあるので中身を見てみるといいかも。
http://jquery.com/plugins/project/calendar-jquery
高橋 ( 2007年11月11日 01:16 )
あ、この人、たぶん、英語外の人ですね。私と同じで、navigator.language.substr(0,2)とnavigator.userLanguage;を最初に検査してます(^^;
でも、同じカレンダーでも作る人によって立ち位置も力点も違って面白いです。
名前の件でみると、Elementをあえて(?)グローバルに置いているのが少し気になります。これだとせっかくjQueryでprototypeとのコンフリクトを回避してもこれが衝突してしまうような。なんとなく、もったいない。
ところで、この言語分岐が、
久しぶりにコードにどっぷり浸ってるので少し幸せな今日この頃です(^^
先日、
これを書いていて 、アンカー手書きはめんどくさいなぁ、、、と思ったので、HTMLから自動的にアンカー目次を作成してくれるスクリプトを書いてみました。
と、いっても、
Query 開発者向けメモ さんのページの目次の方がscrollToしたりH要素を分岐してインデントしたりと、良くできています。
ま、なにはともあれf^^;
とりあえず、今日は、HTMLを書いておくと、アンカーラベルや
そこへ飛ばすリンクリストをjQueryが自動で生成してくれるという簡単なサンプルです。
で、まず、HTMLです。
<div id="myanchor1792" >
<h3>コンテンツ1</h3>
コンテンツ1の内容
<h3>コンテンツ2</h3>
コンテンツ2の内容
<h3>コンテンツ3</h3>
コンテンツ3の内容
</div>
種も仕掛けもないです。＜うそ
これにjQueryの魔法の粉？をまぶして、目次リンクと、アンカーラベルを各見出しへ勝手に挿入してくれるようにします。
HTMLの
太字 の部分がポイント(仕掛け)になります。
一応、ページ内に他のアンカーグループがあるといけないので、
ID名をつけたブロック(ここでは#myanchor1792のDIV)を作り 、検索や出力等すべてのDOM処理をそこに限定します。
そして、
そのブロックの中へH要素(H1,H2,H3,H4....)で囲んだ見出しを作っています。 ここでは、H3やH1などの区別は手を抜いておきましたので、逆にH要素なら何を使ってもOKです(^^;。
今回のスクリプトは、HTML内のこの2点を調べて、アンカーを自動生成するようになっています。
念のために、この段階でブラウザ内でHTMLがどう解釈されているのかをFireBugで確認しておきます。
普通ですね。
次にスクリプトを追加します。まず、HTMLの前に、次のスクリプトを置きます。
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$.fn.AnchorMaker=function(){
var id = this.get(0).id, //対象ブロックのID名
ulid = id+"_ul" //リスト出力用ULのID名作成
//リスト出力用ULをブロックに挿入
$("<ul></ul>")
.attr("id",ulid)
.prependTo(this);
//ブロック内のH要素を検索して順次リンクとアンカー作成出力
$(":header",this).each(function(n){
//リンクリスト
$("<li></li>")
.append("<a href='#_"+n+"'>"+ $(this).text()+"</a>") 下記に変更
.appendTo("#"+ulid);
//アンカー
$("<a></a>")
.attr("id","_"+n)
.insertBefore(this);
});
return $(this) ;//メソッドチェーン連結
}
</script>
そして、HTMLの後ろへ次の起動スクリプト。
<script type="text/javascript">
$("#myanchor1792").AnchorMaker();
</script>
なぜ、2つに分けているのかというと、イベントを使ったページ全体の構築待ちをするよりも、この目的のHTMLの直後に起動コードを書いた方が早い、というだけの理由です。こうしなければならないわけではありません。
$("#myanchor1792")で、対象ブロックを指定し、.AnchorMaker() で処理を開始します。
していることは、ソースに書いてあるとおりです(^^;。
その結果のHTMLがどうなったか、またFireBugで見てみます。
こうなりました。
まず、<div id="myanchor1792">ブロックの先頭へ、<ul id="myanchor1792_ul">を作って挿入しています。
そのUL要素の中へ<h3>内の見出し文字列から生成した<li><a href="#_0">コンテンツ1...といったリンクリストを作り、各見出し<h3>の前へは、<a id="_0">といったアンカーラベルを付けていきます。
というわけで、これ↓が出来上がり。変化がわかるように、ボタンで処理を開始します。
目次作ります
コンテンツ1
コンテンツ1の内容
コンテンツ2
コンテンツ2の内容
コンテンツ3
コンテンツ3の内容
#アンカーをクリックするたびにIEが異様に重くなるのは、このページのせいかなf^^;;.....。FFはそうでもないですね。うーん、アンカーを使わずに、scriptで移動するように変えたほうが良いかなぁ。
//リンクリスト
$("<li></li>")
.appendTo("#"+ulid)
.append(
$("<a></a>").attr("href","javascript:void(0)")
.text($(this).text())
.click(function(){
scrollTo(0,$("#_"+n).offset().top);
//location.hash="#_"+n;
return false;
})
)
*ちなみにこのoffetメソッドは、もともと、Brandon Aaronという人がjQueryプラグインとして書いたDimensions の一部をjQuery本体へ組み込んだもの(参照→offset )のようですね。
#あ、今気づいたんですけど、このHTML構造ってそのまま
TAB にも使えるなぁ、ページのスキン切り替えに簡単に応用できそうですね。
最近、かも日記が重たい理由はいろいろあって、ツリーとかいろいろなテストをチューニングせずにどんどん放り込んでいるというのもありますが、ふと、ISDN+Firebugで眺めていたらこんなのもありました。
あれれ？getlatlon44.htmへ行ったきり帰ってきていない。。。と、ソースを見たら、がーん、こんななってました。
<img
src="http://jsgt.org/ajax/newmon/samples/chapter03/03-31/getlatlon44.htm"
border="0" height="12">
それは無理f^^;。
で、ふと、他の読み込みを見たら、今日は、はてなが重いです。
鈍足ISDNだからこそのボトルネック強調能力発揮(^^?。
少し出遅れ観もありますが、夕べから当サーバーのレスポンスヘッダは、Content-Encoding: gzipを吐き出しています。
あまりにも詰め込みすぎなのと(^^;、iTouchでアクセスされている方がいらっしゃったのとで、やるべ、という気になりました。
まぁ、あまり実感はないんですけれど、パケット見ると確かに縮んでる感じもします。昔、AjaSQLでAjax用データだけzip圧縮して、JavaScriptで解凍した時の方がもっと強い体感があった気がするんですけど、どの辺が違うのかなぁ、、、Ajaxだったからかなぁ？圧縮率かなぁ？
Otchy ( 2007年10月12日 13:37 )
毎日同じくらいの時間に同じ環境で読ませてもらっていますが、体感速度は上がった感じがしますよ。
「気のせいじゃない？」と言われれば、「う〜ん、気のせいかも」というくらいですけれど。
Firefox 2.0.0.7
高橋 ( 2007年10月12日 18:39 )
そうですかー(^^)。多少でも改善できれば幸いです。
FirefoxですとFirebugが使えるので、いろいろ見れて良いですね。現在のこのブログのネックは外部ドメインから読み込んでいる画像やファイル類で、今見たら、AUのフラッシュとNewGameWebのスコアランキングが、全体の待ち時間の半分を占めています。
NewGameWebは、どうしようかなぁ。古いスクリプトなのでいじれば速くなるのは間違いないとは思うんですけど、、、今は、触りに行けないです。
高橋 ( 2007年10月12日 20:04 )
いま思いついたんですが、こういう時間のかかる外部ドメインのブログパーツの場合は、先にダイナミックロード関数( http://game.gr.jp/mag2p/2/loadjs/loadjs.htm )などだけを読み込んでおいて、ページ構築の邪魔をせず、その後逆にブログ側からコールバックすると良いかも。
高橋 ( 2007年10月13日 12:28 )
まだ風邪でクラクラした状態ですが、、、パケットをボーっと眺めていたら、これって、キャッシュの効いてる間は当然ですが、役に立ちませんねf^^;。
新しい記事がたった時など初めて開いた時の「HTTP/1.1 304 Not Modified」ではない、ファイルの転送速度に影響がでるわけですので、最初私が体感をあまり実感できなかったのそのせいの可能性があります(^^;;;
高橋 ( 2007年10月13日 12:41 )
で、そう推測すると、AjaSQLの時の体感速度が感じられたのは、「AjaSQLがキャッシュを無効にしているから」と考えるとそっちの理由もつじつまが合う気もします。
コメントを書ける場所についての覚書 で、XHRのリクエストヘッダでRangeを使って、ファイルの先頭に書いたコメントを読むという検討をしましたが、このテクニックは、実際に、どの程度有効なのか？を押さえておきます。
http://jsgt.org/lib/ajax/051/test/test_setHeader_range_bench.htm
約2Mのファイルを、Rangeをセットして200バイトのみAjax読み込みする場合と、0バイト目以降を全部読み込む場合、そして、普通にファイル全部を読み込む場合の三通りで処理時間を計測しました。
ちなみに、LAN接続＋Win XP IE6+Pentium4 2.6G+2GRAM では、下記の結果でしたので充分に効果はあるといえると思います。
200バイト分のみをAjax読み込みする場合-->15/1000秒 ←超早い0バイト目以降を全部Ajaxで読み込む場合-->208/1000秒 普通にファイル全部をAjaxで読み込む場合-->218/1000秒 追記:2006.12.7 phpでは、効果が逆転していることが要注意 です。(p.s. PHPの設定は、チューンナップをしていません)
perlからデータを受け取る場合
200バイト分のみをAjax読み込みする場合-->62/1000秒 ←早い0バイト目以降を全部Ajaxで読み込む場合-->281/1000秒 ←遅い普通にファイル全部をAjaxで読み込む場合-->281/1000秒 phpからデータを受け取る場合
200バイト分のみをAjax読み込みする場合-->421/1000秒 ←遅い0バイト目以降を全部Ajaxで読み込む場合-->640/1000秒 ←超遅い普通にファイル全部をAjaxで読み込む場合-->235/1000秒 #しかし、.txtで15/1000秒に対して、.phpで421/1000秒という違いは大きいですね。。。やはり、まめに静的ファイル化すると幸せがくる？かなぁ。
#とりあえず今日の結論::リクエストヘッダにRangeを使用した、データの部分取得では、.txtや.htmlなどの静的ファイルを対象とすると、取得データ量に見合った、パフォーマンスアップを期待できる。PHPやPerlなどを介するケースでは、逆に、遅くなるケースもあるので要注意。
JavaMan ( 2006年12月07日 22:09 )
右のBBSのスパムがひどいですね。http://blog.drecom.jp/naito/archive/319#comments
た ( 2006年12月07日 22:57 )
JavaManさんおひさしぶりです。スパムはきりが無いので、多少対策した後、放ってあったのですが、このBBSでの放置は、やはり、気になりますか、、、f^^;。
ページ全体の読み込み完了まで少々お待ちください...
【最近の記事】
