[ カテゴリー » 開発日誌 ]

IE8はGoogle Chrome、Firefoxよりも高速って

category-icon

 ITmediaより。IE 8はGoogle Chrome、Firefoxよりも高速――MSが独自テストの結果を発表Link

 タイトルだけ見ると、果たしてJavaScriptの話なのか(まぁ、これはないと思うけれど)、それともレンダリングの話なのかと思ったけれど、どうやらページの読み込み速度の話みたい。ページ読み込み速度って、レンダリング速度とは別物なのだろうかと思いつつ、確かに、ローカルな環境で、主要なブラウザを使ってppBlogの動作チェックしていると、IE8のレンダリングが速くて、思わず「ほう」とうなってしまうことが多々ある。いつぞやのOperaを彷彿とさせる。でも、まだ、細かいところで、おやっと思う動作があるんだけれど。

— posted by martin at 10:38 pm   commentComment [0]  pingTrackBack [0]

コメント読み込み時にスクロール

category-icon

 ppBlogでは、コメントやトラックバックが付いている記事には、それを記事の下の方に表示するレスポンス展開ボタンが付いてます(複数記事モードのとき。単独表示では、最初からコメント類は表示されている)。ここで、ボタンをクリックすると、Ajax経由で動的にコメントを読み込むので、わざわざページをリロードさせる必要もなくスムーズにコメントなどを読むことができます。

 現行では、このボタンをクリックしてデータを読み込むと、コメントエリアにフォーカスが移っていたと思いますが(ウィンドウがスクロールする)、これが、瞬時でピクッと移るために、何となく読み手の視点が混乱するというか、一瞬、何が起こったのか分からなくなるかもしれないと思い、このフォーカス移動を止めてみました。

 すると、特にウィンドウのスクロールを伴うことなく、展開されたコメント・トラックバックがボタンの下に表示されて良い感じです。でも、ひとつ問題があって、もし、このレスポンス展開ボタンをブラウザ画面の結構下の方でクリックすると、展開されたコメント類がブラウザ画面の領域下に表示され、これはこれで、何も展開されてないように見えるので、読み手を困惑させる可能性があります。

 なので、Ajaxで読み込んだデータを展開した際に、それらがウィンドウの枠外であるときに限って、そのエリアまでスクロールさせるようにしました。かといって、単なるフォーカスの瞬間移動では、最初に述べたように、これも読み手を惑わせるかもしれないので、瞬時に移動ではなくて、スクロール制御するようにしてみました。以下のようなスクリプトでいけます。

var wscY = oParts.metrics(3); // ウインドウのスクロール量を取得
var firstComment = o("div.comment-entry", commentsDiv).item(0); // 表示エリアの最初のコメント要素を取得
var diff = firstComment.offset(1) - Number(wscY + oParts.metrics(1)); // 上記コメントを表示させるためのスクロール量を算出

if(diff > 0){
   (function(){
     var a = 30, s = arguments[0] / a; // スクロール量を適当に分割。ここでは30分割してる 
     var yy = []; // 縦移動させるスクロールポイントを入れる配列を用意
     for (var i = 0; i < a; i++) yy[i] = wscY + s * i; // 適当に移動ポイントを作成
     var i = 0, t = setInterval(function(){ window.scrollTo(0, yy[i++]); if(i >= a) clearInterval(t);}, 1);
   }).await(300)(diff + firstComment.rect(1) + 140); // データ読み込み後、300ミリ秒後に発動
  }
});

 データを読み込んでからいきなりスクロールしだすと、それで面食らうかもしれないので、.await(300) と微妙に間を持たせています。

 ここのサイトで、実際にコメントの付いた記事で試せますので、興味のある方は、あえてコメント展開ボタンをブラウザ画面ぎりぎりにセットして試して下さい。

— posted by martin at 02:45 am   commentComment [0]  pingTrackBack [0]

ChromeでもJS簡易エディタが動くように

category-icon

 こんばんは。ppBlogでの記事作成は、テキストエリアに、タグ入力支援ツールバーの助けをかりて、(ベタに)ぐいぐい書いていくやつです。以前、IEとFirefoxがサポートしていたWYSIWYGG(contentEditable/designMode)モードを採り入れようと思いましたが、IEの生成するHTMLソースがひどくて諦めたことを、どこかに書いたと思います。今は、Safariもそれをサポートしているようですが、まぁ現状の、テキストエリア方式でいいんじゃないかなと思っています。その場でプレビュー機能も付いてますし。

 で、このタグ入力支援の機能が、グーグルのChromeでうまく動かないなと前々から認識はしていたんですが、今回調べてみました。IEとの切り分けに、

if(document.getSelection){ // Firefox などIE以外のブラウザ

としていたのが駄目だったようです。Chromeはこれを無視していたようで。なので、この部分はwindow.getSelection()を使えばOKでした。でも、今や、IE以外のブラウザはみんな同じ仕様に沿ってるようですし(2-3年前はOperaが遅れていた)、IEとそれ以外という大まかな切り分けで行けば良さそうです。なので、よくある、テキストエリアのマウスカーソルのある位置に文字列を挿入するというスクリプトは以下のような感じで行けるかなと思います。ここでは汎用性のあるサンプルを載せます。ppBlog用のlib.jsには、これを若干modifyして載せます。

/* テキストエリアでカーソルで指定したポイントあるいは文字列に新たな文字列を挿入するスクリプト */

var Caret = {
 getArea : function(){ return document.getElementById("ta");}, // ID名ta(適当)というテキストエリアを用意
 selection : '', // ここに選択したテキストを収納する
 get : function(){ // テキスト選択メソッド
  var area = Caret.getArea();
  /*@cc_on@*/
  /*@if(1)
  if(!document.selection.createRange()) area.focus();
  Caret.range =  document.selection.createRange().duplicate();
  return Caret.selection = Caret.range.text;
  @else@*/
  return Caret.selection = area.value.substring(area.selectionStart, area.selectionEnd);
  /*@end@*/
 },
 set : function(string){ // 選択テキストを指定文字列に置換する
  var area = Caret.getArea();
  /*@if(1)
   if(Caret.selection.length > 0){
    Caret.range.text = string;
    Caret.range.select();
   } else {
    area.focus();
    Caret.range = document.selection.createRange().duplicate();
    Caret.range.text = string;
   }
  @else@*/
  if(Caret.selection.length >= 0 && area.selectionStart >= 0){
    var s = area.selectionStart, scrollTop = area.scrollTop;
    area.value = area.value.slice(0, s) + area.value.slice(s).replace(Caret.selection, string);
    area.setSelectionRange(eval(s + string.length), eval(s + string.length));
    area.scrollTop = scrollTop; // Firefoxでカーソルがトップに戻らないための処理
    area.focus();
  } else area.value += string;
  /*@end@*/
 }
}

 IEだけが違うと分かっているので、条件コンパイルを使って、動作の切り分けをしています。Firefox系で、指定位置に文字列を挿入した後、フォーカスが、テキストエリアのトップに戻ってしまうのを防ぐ処理を入れています。これはFirefox1.5で見られて、今はどうかなぁと思ったら相変わらずでした(--)

 →参考リンク「 Firefoxでテキストエリア内のマウスカーソルが最初に戻ってしまう件Link

 一応、簡単なデモページを挙げておきます。

  →上のスクリプトを使った、簡易JavaScriptエディタ。http://p2b.jp/demo/jseditor.htmlLink

 このデモにあるHTMLビューは悪くないなぁ。

— posted by martin at 10:00 am   commentComment [0]  pingTrackBack [0]

 

Twitterのリンク先を変更

category-icon

 昨日かおととい、ブログのエントリーをTwitterに投稿できるTwitThisLink というTwitterのサービスを知ったんで、それをソーシャルブックマークのアイコンリンクに追加したんですが、これって投稿しようとするとIDとパスワードを求められて、ログイン後、タブを閉じるとセッションが切れるのか、毎回入力画面が出てきます。なので今いちスムーズさに欠けるなぁと思っていたら、普通にTwitterに投稿できる記法があることをついさっき知ったので。
http://twitter.com/home?status=Reading:(エンコードされた文字列)

で直接投稿できるみたいです(ログイン状態を保持していれば)。なので、これに変えました。投稿時のスクリーンショットを挙げときます。キャプチャのために開いただけなので、エントリーがダブってるように見えますが。

twitter
こんな感じで、気楽に投稿できます。

 後、facebookLink へのエントリーアイコンも追加してます。こちらフランスのラボでは、多くの人がfacebookを使っていて、自分もその流れにのってアカウントを取得しました。NYやコロンビアに帰った同僚もみんなやってて、元気にしてる様子とか分かるし、便利な時代ですね。うちのボスもよく更新してます。さすがに世界最大の写真共有サイトだけのことはあるなぁと。日本ではどうなんでしょうか。

— posted by martin at 06:36 am   commentComment [0]  pingTrackBack [0]

正規表現の挙動がブラウザ間で異なる件

category-icon

 ヘッドラインモードでの表示周りを整備していて、記事ごとのスタイルシート指定が効いていなかったので、効くようにスクリプトを書き換えましたが、正規表現周りの挙動がブラウザ間で異なっていて、ちょっとはまったのでメモ。簡単な例を示します。
<script type="text/javascript">
function doRex(){
 var example = "J'adore Firefox!"; // I like Firefox!
 var RE = /Fire/g;
 var result = RE.exec(example); 
 if(result) alert("マッチ: " + result + "¥nlastIndex: " + RE.lastIndex);
       else alert("マッチしません!:" + "¥nlastIndex: " + RE.lastIndex);
}
</script>
<button onclick="doRex();"> 実 行 1 </button>

 上のdoRex()関数を実行すると、最初ボタンを押したときはちゃんとマッチしますが、2回目にボタンを押したときの結果がブラウザで異なります。Firefox3.0.7, Chrome1.0, Opera9.64では、「マッチしない」、IE6-8とSafari4 public betaでは、マッチして1回目と同じ結果です。なぜ、こういうことになるかというと、lastIndex絡みです。1回目の実行に対して、lastIndexの値が保持されているからです。2回目の実行で、マッチしないとなると、RE.lastIndexはまた0に戻るので、3回目の結果は初回と同じく「マッチ」です。

 でも、疑問なのが、doRex()という関数の中で定義したローカルな変数だから、doRex()を実行する度に、lastIndexの値はリセットされるのが正しい気もするんだけどなぁ。doRex()の中ではなく、グローバルな空間で同様のことをやれば、SafariもIEも2回目は「マッチしない」となり、これは納得できる挙動なんですが。

 では、このブラウザ間の差異をなくすにはどうするか?ひとつは、RE.exec(example) した後に、
RE.lastIndex = 0; // 値をリセット
という記述を加えて、明示的にlastIndexを元に戻す方法。もうひとつは、new演算子を使う方法です。これなら、どのブラウザでも同じ挙動、何度ボタンを押しても、「マッチ」となります。new RegExp("foo", "g")/foo/g って同じと思っていたんだけど。
<script type="text/javascript">
function doRex2(){
 var example = "J'adore Firefox!"; // I like Firefox!
 var RE2 = new RegExp("Fire", "g"); // new演算子を使用する
 var result2 = RE2.exec(example);
 if(result2) alert("マッチ: " + result2 + "¥nlastIndex: " + RE2.lastIndex);
       else alert("マッチしません!:" + "¥nlastIndex: " + RE2.lastIndex);
}
</script>
<button onclick="doRex2();"> 実 行 2 </button>

 上のコードであれば、ブラウザ間の差異がない。

 でも、Safari/IE と Firefox/Chrome/Opera、どっちが正しい挙動なんだろうな。今イチ、すっきりしないです。


— posted by martin at 08:58 am   commentComment [4]  pingTrackBack [0]

T: Y: ALL: Online:
Created in 0.0202 sec.
prev
2017.11
next
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30