blog@longkey1.net

このブログソースコードが以下の点で凄く見難かった。

１．phpのnl2br関数を使っているので、preタグの中でも改行されてしまう。
２．全て同じ色

で、素直にはてな日記とかで書こうかなと思ったんだけど、そういうのを解決していくのが勉強かなと思い留まり、頑張って実装してみた。

まずは、１つめの改行問題について。
smartyで独自の修飾子で解決できないかなと考え、いろんなところからソース探してきてこんなものが出来た。
参考サイト：No Such Blog or Diary - Nucleus の改行をちょっと頭よくする

function smarty_modifier_mynl2br($value)
{
    $i=0;
    $v2="";
    $n=mb_strlen($value);
    while($i<$n){
        $p=mb_strpos($value,"&lt;pre",$i);
        if($p==FALSE){
            $v2.=nl2br(mb_substr($value, $i));
            break;
        }
        $v2.=nl2br(mb_substr($value, $i,$p-$i));
        $i=$p;
        $p=mb_strpos($value,"&lt;/pre&gt;",$i);

        // 1つも無い場合
        if($p==FALSE){
            $v2.=mb_substr($value, $i);
            break;
        }

        $v2.=mb_substr($value, $i,$p-$i);
        $i=$p;
    }
    return $v2;
}

これで一応preタグ間はbrタグ入らないようになった。

続いて2の問題については、いろいろ探したらjavascriptで色つけれる奴があるみたいだった。
一番簡単そうなのが、Javascript code prettifierって奴だったので、以下のサイトを参考に実装。
参考サイト：コードをプリティに整形するjavascript「code prettifier」 : skuare.net

で、DBに格納しているデータそのものにprettifierってclass名をつけるのがなんだか嫌だったので、これまたsmartyの修飾子を作成。

function smarty_modifier_prettyprint($value)
{
    $result = str_replace('<pre', '<pre class="prettyprint"', $value);
    return $result;
}

んで、smartyのテンプレートで2つとも呼んでやればOKってことにした。
キレイキレイ。

これ何度もはまる。

hoge = $$('div .hoge');

とかやったら

alert(hoge);

じゃ表示されない。

alert(hoge[0]);

じゃないと！

$()関数ばかり使っていて、たまにclassとかで指定しなくちゃって時にはまりやすいので注意。
$$() 関数は配列を返すのだ！

Javascriptで、Gifアニメを切り替えようとすると、ブラウザによって、またタイミングによって挙動が違うみたいです。
Firefoxは一度読み上げた画像は、最初からアニメーションしてくれないし（リロードしても）、IEもたまにアニメーションにならない場合もあるし、何よりアニメーションの動き（速さ）が全然違いました。
で、そこだけFlashでやるかというと、なんか本末転倒の様な気もする。（それなら最初からFlashオンリーでやれば良い訳で）

ってことで、アニメーションもJavascriptで制御してしまった方が、安定するような気がしたので、今後は迷わずそうして行きたいと思いました。
なんでもJavascriptでやるのはなんか嫌なんですけどね。

JavascriptのJsonを定義する時に、最後にカンマがあるとIEだとうまく動かない。
エラーにもならないので、対応に困った。
一個一個コメント化していったら、見つけられた。
きをつけよー。

悪い例

hoge = {
1 : 'hoge',
2 : 'hoge',
3 : 'hoge',
}

良い例

hoge = {
1 : 'hoge',
2 : 'hoge',
3 : 'hoge'
}

たまらんですわー。

仕事でドラック＆ドロップを実装しなくちゃいけなくFlashかJavascriptで迷ってます。
一先ずJavascriptでどこまで出来るか検証中なのですが、これを気にある程度Javascriptが読めるようになりたいなと思ってます。

で、本当にJavascript初心者なので、ここにメモを残しておこうかなと。
久しぶりに泣きそうになりながら、一行一行解析してます。

参考サイト:
Drag & Drop - script.aculo.us 版

非常に綺麗なソースなのですが、まったくもってわけがわかりませんでした。
ま、解説無いですからね。

var correct = { opt0: "ans1", opt1: "ans2", opt2: "ans0" } //正解のデータを配列で用意
var mark = function(event) {
var points = 0;
var max = 0;
for (key in correct) {
    var answer = <a href="http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html#DollarFunction">$(key)</a>.<a href="http://javascriptist.net/ref/element.parentnode.html">parentNode</a>.id;
    points += (correct[key] == answer) ? 1: 0; //if文の省略形。
    ++max;
}
var score = Math.floor(points / max * 100); //パーセントの計算
var judge = (score >= 70) ? "合格": "不合格"; //70点以上で合格不合格
    $("result").<a href="http://javascriptist.net/ref_prototype/element.update.html">update</a>(judge + "：" + score + "%");
}

// ドラッグ終了時のエフェクト処理（貼り付け処理だと思う）
var posfix = function(draggable) {
    draggable.<a href="http://javascriptist.net/ref_prototype/element.setstyle.html">setStyle</a>({ left: "0px", top: "0px" });
}

// Droppables.addのオプションを設定（オーバーライト）
var optDropzone = {
    hoverclass: "dragenter", //hoverした時のCSSクラス名
    onDrop: function(draggable, dropzone) {
        if (dropzone.<a href="http://javascriptist.net/ref/element.childnodes.html">childNodes</a>.length == 0) { //子のエレメントが空なら
            dropzone.<a href="http://javascriptist.net/ref/element.appendchild.html">appendChild</a>(draggable); //子のエレメントに追加
        }
    }
}

// Draggableのオプションを設定（オーバーライト）
var optDraggable = {
    revert: true, //元の位置に戻る
    reverteffect: function() { /* NOP */ },
    starteffect: function(draggable) {
        draggable.<a href="http://jsgt.org/js/books/dhtml2/part3/cross/setopacity.htm">setOpacity</a>(0.5);
    },
    endeffect: function(draggable) {
        draggable.setOpacity(1.0);
        posfix(draggable);
    }
}

// ページロード時に、それぞれにセットしているメイン処理
window.onload = function() {
    <a href="http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html#Dollar_Dollar_Function">$$(".dropzone")</a>.<a href="http://javascriptist.net/ref_prototype/enumerable.each.html">each</a>(
        function(dropzone) {
            Droppables.add(dropzone.<a href="http://javascriptist.net/ref_prototype/Element.cleanWhitespace.html">cleanWhitespace</a>(), optDropzone);        }
    );
    $$(".draggable").each(
        function(draggable) {
            new Draggable(draggable, optDraggable);
        }
    );
    $("submit").<a href="http://javascriptist.net/ref_prototype/form.element.observer.html">observe</a>("click", mark);
}</pre>



先長いなあ・・・。