タイトルだけだと何のことやら分からないと思いますが、ppBlogの「テーマ管理」では、テンプレートのHTMLやスタイルシートを修正した際に、どういう風に変更が反映されるか、実際にプレビューボタンで確認することが出来ます。そのプレビュー画面では、以下のように「戻る」のリンクでもとの編集画面に戻ります。

　従来だと、この戻るリンクで戻ると、マウスのカーソルは長々しいテキストエリアの先頭に戻っているので、再度編集部位を探しつつ、そこまでスクロールする必要がありました(Ctrl+Fで検索するのが常套手段ですが)。スタイルシートの編集では、テキスト量が多い傾向にあり、直前の編集部位を探し出すのは大変です。

　なのでその辺を改善してみました。やりたいのは以下のことです。

　テキストエリアのスクロールバーの位置はJavaScriptから制御することが出来ます。具体的には、scrollTop を使います。流れとしては、プレビューボタンを押したタイミングで、スクロール量を取得(scrollTopで可能)、プレビューから戻ったときに、取得した値を指定すれば良いわけです(指定もscrollTopです)。実際には、テキストエリアだけではなく、ブラウザのスクロールバーもscrollTopで制御できるので、この２つのスクロール量を保持するようにしています。

　やってみると意外と簡単に実装できました。もっと早くやっておけば良かったです。試されたい方は、以下のutils.phpとmodules/theme.inc.phpでどうぞ。

　こんばんは。前回の書き庫 で、localStorageに空の値を入れるとIE8がクラッシュすると書きました。なので、空の値が入らないようなチェックを入れれば良いのですが、それだけだとナンなので、症状をもう少し追ってみました。

　もう一度、(IE8が)クラッシュするコードを書いておきます。

function addItem(){
 var key = document.getElementById("key").value;
 var value = document.getElementById("value").value;
 window.localStorage[key] = value; // valueが空白だとクラッシュ！
}

　以下のように、直接空の値を入れる分には大丈夫でした。

function addItem(){
 var key = document.getElementById("key").value;
 var value = document.getElementById("value").value; // これは使用しない
 window.localStorage[key] = ""; // 直接、空の値を入れる → これは大丈夫。
}

　ほうほう。で、クラッシュするデモページのHTMLソースをよく見てみると、input[type=text]でvalueの値を指定していないですね。もしかしてこのせいかなぁ、と

<input type="text" id="value" value="" />

value=""を追加しましたが、やっぱりクラッシュします。input[type=text]の値がないときでも、 document.getElementById("value").value はちゃんと文字列として解釈されます(typeof value == "string")。デモページは、input[type=text]のvalue値を取得していますが、これはTEXTAREA要素であっても、やはり内容が空っぽの場合、IE8ではクラッシュを引き起こしました。

　何でですかねぇ。試しに、強引に文字列ではないオブジェクトを入れてもクラッシュしません。

window.localStorage[key] = document.getElementById("value"); // これは [object] という文字列に変換される

　確かに、文字列のstringだとブラウザが解釈しているのに、それが空っぽだとクラッシュするわけです。じゃ、以下はどうだろうか。

var empty = ""; // 空っぽの変数を用意する。
window.localStorage[key] = empty; // これはセーフ。クラッシュしない。

さすがにこれはオッケーです。じゃ以下はどうだろうか？

 var val = document.getElementById("val").value; // これが空っぽとする
 var empty = "";              // val もempty も空っぽの場合
 alert(empty === val); // 厳密等価演算子は true を返す
 window.localStorage[key] = val; // なのに、val だとクラッシュ！

　とりあえず string と認識しているはずなのに、代入する段階以降で、別のクラッシュを引き起こす「何か」と解釈されるらしい。というわけで、とりあえず以下のようにすれば、IE8でのクラッシュを回避できることが分かった。でも、ナンだかすっきりしないですね

function addItem(){
 var _key = document.getElementById("key").value;
 var _val = document.getElementById("val").value;
 window.localStorage[_key] = new String(_val); // new String()で明示してあげる
 alert("localStorage."+_key+" の値は「"+localStorage[_key]+"」です。");
}

new String()でちゃんと文字列オブジェクトとして再評価してあげると良いらしい。というわけで、IE8でもクラッシュしないlocalStorageのデモページをリンクしておきます。

　→http://p2b.jp/demo/localStorage2.html

　ちなみに、上のコードでalert(typeof new String(_val)) は何となるでしょうか？ これは、 もはやstring ではなくobjectとなります。文字列オブジェクトです。

DOM storage  

　こんにちは。そろそろppBlogにもlocalStorage^Gに対応したスクリプトを組み込もうかと思っていますが、IE8で空(から)の値を入れるとブラウザがクラッシュして終了する現象に遭いました。MacBook Pro上のVMware Fusionに入れたWindows7 RC版IE8で発生します。正規版だとOKなのかなぁ。

　簡単なデモを用意しました(IE８ならクラッシュしても良い状態でアクセス)。→http://p2b.jp/demo/localStorage.html

　Firefox3.5では値が空でもエラーも何も起きませんが、IE8では即座にクラッシュです。そのスクリーンショットをば。適当なキーを設定して(例えば「foo」)、値を何も設定せずに「追加」ボタンを押すと発生。

上記ページのスクリプトはごくシンプルなもの。

if(typeof localStorage != "object"){
 if(typeof globalStorage == "object"){ // Firefox2 possible
  localStorage = globalStorage[location.hostname];
 } else alert("お使いのブラウザはこのスクリプトに対応していません。");
}

function addItem(){
 var key = document.getElementById("key").value;
 var value = document.getElementById("value").value;
 window.localStorage[key] = value;
}

　空の値かどうかチェックすれば済む話ですが。

関連エントリー(解決編？)

　　■http://p2b.jp/200912-localStorage-crashes-IE8-with-empty-value-part2

DOM storage  

---

　こんばんは、martinです。前回のエントリーで述べていたように、次期バージョン(v1.9.0)では、画像ファイルのアップロードの際に、複数の画像をまとめてアップロードできる仕組みを提供予定です。

　現状では、複数の画像を一度にアップロードするには、FlashかJavaを使うしかありません。JavaもFlashも素人ですが、とっつきやすいのはFlashですし、ファイルアップロードに関しては、色んなサイトでソースコード付きのFlash/Flexのデモサイトがあったので、Flexを用いたインターフェイスを作ってみました。

→実際に試すことが出来るデモサイト

　実際には、Coding Cowboys というサイトにあったプログラムをベースに、好みのインターフェイスになるよういじっただけです。

　ローカルのフォルダからは基本的に任意のファイルを選べるのですが、画像ファイル(*.jpg, *.png, *.gif)のみに絞っています。また、Flexの練習もかねて、デモページのFlashではアップロードした画像を見ることが出来るように、右下に画像ギャラリーへのリンクボタンを付けてます。

→画像ギャラリーへのリンク

　ちなみに、このリンク先の画像ギャラリーは、Flashとは関係なしに、単にPHPでページを生成しています。CSSのみを用いたシンプルなものです。IE向けのハックは使ってませんが、IE6でもそう表示が崩れることはないかなと期待。アップロードされた画像ファイルの内、最新のJPEG画像を5枚表示するようにしてます。

　今後、いじるとすれば、ファイルサイズ上限を指定したりとかですかね。とりあえず。

Flex   PHP   CSS  

---

　こんばんは。先週、A型インフルエンザのワクチンを接種しました。ラボのみんなが行く際に「マーチンも行く？」「うん。」で。3-4日ほど痛かったなぁ。

　さて、v1.8.8のリリースに向けて、アクセス解析をいじってます。現行の最新版(v1.8.7)では、記事のアクセスランキングを記録する機能がついていますが、タイミングによっては集計されたランキングがリセットされる現象もあるようで、その辺りはバックアップファイルを作るようにしたりして、せっかくの集計がリセットされないような手段を講じています。

　で、前々から記事のアクセスランキングは、アクセス解析でも見られるようにするのが良いなと思っていたんで、そうしてみました。

　それ以外にも、見栄えの修正やら、動作を少し変えたりしています。例えば、「検索ワード」などにおいて、データ量が多いと表示するテーブルが縦長になり、ページスクロールするのにもたつきを感じるようになります(少なくとも、MacBookProユニボディーの中のVMwareで動いているWindows7ではそうです)。なので、こういうのは、テーブル要素を含んでいるDIV要素の下端をブラウザの下端ぐらいまでにとどめて、DIV要素にスクロールバーが表示されるようにしています。これで、動作もスムーズにまりました。上のスクリーンショットでも、スクロールバーがDIV要素に表示されているのを確認できると思います。

　ある程度以上のバージョン(v1.6以上ぐらい？)であれば、記事アクセスランキングの集計がなくても問題なく動くと思うので、先に試されたい方はどうぞ。フィードバックなど大歓迎です。基本的には、statディレクトリのview.phpとstat.cssの上書きです。後、ランキング表示用のアイコンが2つです。これはstat/iconディレクトリにアップロードします。

---