ppBlog official

　こんばんは。ppBlogでの記事作成は、テキストエリアに、タグ入力支援ツールバーの助けをかりて、(ベタに)ぐいぐい書いていくやつです。以前、IEとFirefoxがサポートしていたWYSIWYG^G(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でテキストエリア内のマウスカーソルが最初に戻ってしまう件」

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

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

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

　昨日かおととい、ブログのエントリーをTwitterに投稿できるTwitThis

というTwitterのサービスを知ったんで、それをソーシャルブックマークのアイコンリンクに追加したんですが、これって投稿しようとするとIDとパスワードを求められて、ログイン後、タブを閉じるとセッションが切れるのか、毎回入力画面が出てきます。なので今いちスムーズさに欠けるなぁと思っていたら、普通にTwitterに投稿できる記法があることをついさっき知ったので。

http://twitter.com/home?status=Reading:(エンコードされた文字列)

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

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

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