10.11　メッセージ履歴のカスタマイズ～基本編～（その８）

	今回は everypage が false の時にマウスホイールを回したりして履歴メッセージをスクロールする時に呼び出されるメソッドを見ていくね。
	それってつまり行単位で履歴メッセージをスクロールする時に呼び出されるメソッドってことだよね。
	ん、そうだよ。じゃまずはマウスホイールを手前に回したりした時に呼び出される scrollUp メソッドから見てくね。
	※どのような操作をした時に scrollUp メソッドが呼び出されるかについては §10.10 参照。
	じゃあ scrollUp メソッドは先の履歴メッセージを表示する時に呼び出されるんだね。
	そ。正確に言うと１行先の履歴メッセージを表示するメソッドだよ。で、これが scrollUp メソッドのスクリプト。

function scrollUp()
{
    if(dispStart < dataLines - dispLines) // １行先の履歴メッセージが表示できる場合は...
    {
        clearActionHighlights(); // hact タグによるリンク表示を全て消去します
        // 最初の行以外の履歴メッセージを１行分上(縦書き表示の場合は右)に移動します
        if(verticalView)
            copyRect(width - marginR - lineHeight *(dispLines - 1), controlHeight, this,
            width - marginR - lineHeight *(dispLines), controlHeight,
                    lineHeight * (dispLines-1), height - controlHeight);
        else
            copyRect(0, controlHeight + marginT, this,
                0, controlHeight + lineHeight + marginT, width, lineHeight*(dispLines-1));
        clearBack(dispLines - 1); // 最後の行のメッセージを消去します
        dispStart++; // 表示する行の値を１行分増やします
        drawLine(dispLines - 1); // スクロールすることで新しく出現した行の履歴メッセージを最後の行に書き込みます
        updateButtonState(); // ボタンの表示状態を更新します
    }
}

	まず最初の if の “dispStart < dataLines - dispLines” って条件だけど、これは前回の nextPage メソッドにも出て来た「履歴メッセージの最後の部分以外を表示してたらに真になる」って条件だったよね。
	scrollUp メソッドって、その条件が真にならなかったら何にもしないんだね？
	“dispStart < dataLines - dispLines” が偽になってたら、履歴メッセージの最後の部分を表示してるってことだから、それ以上先のメッセージは表示できないよね。
	そっか。だから何もする必要ないんだね。
	じゃ次は if ブロックの中身を見てくね。最初に呼び出してる clearActionHighlights メソッドは前回も出て来たから OK だよね？
	hact タグで表示されるリンクを消すメソッドだったよね。
	そ。んじゃ次はもう一つの if のとこね。
	“if(verticalView)” だから、縦書き表示の時は if の次の copyRect メソッドが呼び出されて、横書き表示の時は else の次の copyRect メソッドが呼び出されるってのはわかるんだけど、この copyRect メソッドって何をコピーしてるの？
	※copyRect メソッドについては §4.4 参照。
	どっちの copyRect メソッドも、スクロールしても画面外に出ない部分の履歴メッセージをコピーしてるんだけど、スクリプトだけ見てもちょっとわかりにくいかもね。
	かなりわかりにくいと思うんだけど…なんか引数もすごい複雑っぽいし。
	まぁこれは図で見た方が良さそうだね。でもその前に、まず縦書き表示の時に呼び出される copyRect メソッドのコピー元の四角形の左上の座標と幅と高さがどんな値になるか確認しとくね。
	はーい。
	で、それぞれどんな値になる？
	えっ？　あ、えーっと…確か第４引数が左端の座標で、第５引数が上端の座標で、あと幅と高さはそれぞれ第６引数と第７引数だったはずだから…

	こうだよね。
	ん、そうなるね。で、コピー元のレイヤ（第３引数）は this、つまりメッセージ履歴レイヤ自身だから、コピー元を図にすると…

	こんなふうになるの。ちなみにこの図はメッセージ履歴画面に１４行履歴メッセージが表示できる時（つまり dispLines が 14 の時）の例で、黄色い四角形の部分がコピー元領域ね。
	０行目以外の履歴メッセージの部分がコピー元になってるみたいだね。履歴メッセージ以外の部分も入ってるみたいだけど。それで、何でこの部分がコピー元になってるの？
	まぁそれはもうちょっと先を見ていけばわかると思うよ。
	ふーん、そーなんだ。
	じゃ次はコピー先の四角形の左上の座標と幅と高さを確認するね。
	コピー先の四角形の左端と上端の座標は第１引数と第２引数で、四角形の幅と高さはコピー元とおんなじだから…

	こうなるよね。
	ん。で、これを図にすると…

	こうなるの。
	コピー先は１３行目以外の部分なんだね。
	そ。コピー元が一番右の行以外の部分で、コピー先が一番左の行以外の部分になるの。で、copyRect メソッドを実行すると、コピー元の部分がコピー先にコピーされるから…

	こうなるわけね。
	１３行目のメッセージが２つ出来ちゃってるけど…これでいいの？
	まだこれで終わりじゃないからね。じゃ一旦 scrollUp メソッドのスクリプトに戻って… 横書き表示の時（else のとこね）は後で確認するとして、 copyRect メソッドを呼び出した後には clearBack メソッドが呼び出されてるよね。
	clearBack メソッドって履歴メッセージを消すメソッドだよね。
	※clearBack メソッドについては §10.6 参照。
	ん。ただ、引数が “dispLines - 1” だから、右から dispLines - 1 行目の履歴メッセージだけを消してるの。
	右から dispLines - 1 行目ってことは… 一番左の行になるんだっけ？
	そうそう。だから、“clearBack(dispLines - 1);” を実行すると、一番左の行の履歴メッセージが消えて…

	こういう状態になるわけね。
	あ、２つあった１３行目の履歴メッセージの１つが消えたね。
	じゃまた scrollUp メソッドのスクリプトの方に戻るね。
	次はdispStart の値を１増やしてるね。これって scrollUp メソッドを呼び出すと１行先の履歴メッセージが表示されるから、値を１増やしてるんだよね。
	そうそう。で、その次に drawLine メソッドを呼び出してるでしょ。
	※drawLine メソッドについては §10.8 参照。
	“drawLine(dispLines - 1);” だから… dispLines - 1 行目の履歴メッセージをメッセージ履歴レイヤに書き込んでるんだね。
	んーん、そーじゃなかったよね？
	あれっ、そーだっけ？
	ここがちょっと間違えやすいとこなんだけど、“drawLine(dispLines - 1);” を実行すると、dispLines - 1 行目じゃなくて “dispStart + dispLines - 1 行目”の履歴メッセージが、右から dispLines - 1 行目、つまり一番左の行に書き込まれるの。
	あ、そーなんだ。えっと…じゃあ dispStart はさっき 1 増えて 1 になってるはずだから、 dispStart + dispLines - 1 行目は 1 + 14 - 1 で 14 になるよね。
	うん。
	ってことは、１４行目の履歴メッセージが一番左の行に書き込まれるってことになるんだよね？
	ん、そうなるね。だから、“drawLine(dispLines - 1);” を実行すると…

	こうなって、ちゃんと１行先の履歴メッセージが表示されてるでしょ。
	ホントだ。最初は０～１３行目の履歴メッセージが表示されてたけど、 drawLine メソッドを呼び出した後は１～１４行目の履歴メッセージが表示されてるね。
	で、最後に updateButtonState メソッドを呼び出してボタンの状態を更新したら終わりね。大体どんな感じで履歴メッセージをスクロール表示してるかわかった？
	※updateButtonState メソッドについては §10.9 参照。
	うん、大体はね。
	じゃ次は横書き表示の時のスクロール処理の方を見てくね。
	else の方の copyRect メソッドのとこからだね。
	これもスクリプトだけ見るとちょっとわかりにくいから、縦書き表示の時と同じように図にしてみるね。
	はーい。
	でもその前に、横書き表示の時の copyRect メソッドのコピー元四角形の左上の座標と幅と高さはどうなってる？
	えっとね…

	こうなってるね。
	ん、そうだね。で、これを図にすると…

	こうなるわけね。ちなみにこの図はメッセージ履歴画面に１０行履歴メッセージが表示できる時（つまり dispLines が 10 の時）の例だよ。
	横書き表示の時も０行目以外の履歴メッセージの部分がコピー元になるんだね。
	まぁ縦書きか横書きかっていう違いはあるけど、やってることは基本的におんなじだからね。
	そっか。それもそーだね。
	それじゃコピー先の四角形の左上の座標と幅と高さは？
	コピー先はね…

	こーなるよね。
	ん。で、それを図にするとこうなるわけね。

	横書き表示の時は、コピー元が一番上の行以外の部分で、コピー先が一番下の行以外の部分になるんだね。
	じゃ copyRect メソッドを呼び出した後どんなふうになるかわかる？
	ん～、縦書き表示の時と同じように考えると…

	こうなるんじゃないかな。
	ん、そのとーり。それじゃ clearBack メソッドを呼び出した後は？
	“clearBack(dispLines - 1);” を実行すると、横書き表示だと上から dispLines - 1 行目の履歴メッセージが消えるんだよね。つまり、一番下の行の履歴メッセージが消えるってことだから…

	こんなふうになるんじゃないかな。
	そうそう。んじゃ dispStart の値を１増やして、 drawLine メソッドを呼び出すと…？
	“drawLine(dispLines - 1);” を実行すると、メッセージ履歴画面の上から dispLines - 1 行目（つまり一番下の行ってことだよね）に dispStart + dispLines - 1 行目の履歴メッセージが書き込まれるから、 dispStart + dispLines - 1 = 1 + 10 - 1 = 10 で、１０行目の履歴メッセージが一番下の行に書き込まれるってことになるよね。
	うんうん。
	ってことは…

	こーなるのかな。
	これでちゃんと１行先にスクロールできてるでしょ。
	だね。
	scrollUp メソッドは大体こんな感じだね。それじゃ次は scrollDown メソッドを見てくね。
	scrollDown メソッドって scrollUp メソッドと逆で、履歴メッセージを１行前にスクロールするメソッドなんだよね？
	そうだよ。マウスホイールを奥に回したりした時に呼び出されるメソッドだね。で、これが scrollDown メソッドのスクリプトね。

function scrollDown()
{
    if(dispStart!=0) // １行前の履歴メッセージが表示できる場合は...
    {
        clearActionHighlights(); // hact タグによるリンク表示を全て消去します
        // 最後の行以外の履歴メッセージを１行分下(縦書き表示の場合は左)に移動します
        if(verticalView)
            copyRect(width - marginR - lineHeight *(dispLines), controlHeight, this,
                width - marginR - lineHeight *(dispLines-1),
                controlHeight, lineHeight * (dispLines-1), height - controlHeight);
        else
            copyRect(0, controlHeight + lineHeight + marginT, this,
                0, controlHeight + marginT, width, lineHeight*(dispLines-1));
        clearBack(0); // 最初の行のメッセージを消去します
        dispStart--; // 表示する行の値を１行分減らします
        drawLine(0); // スクロールすることで新しく出現した行の履歴メッセージを最初の行に書き込みます
        updateButtonState(); // ボタンの表示状態を更新します
    }
}

	やっぱり scrollDown メソッドって scrollUp メソッドと似てるんだね。
	履歴メッセージをコピーしたり新しく書き込んだりしてる位置とかは違うけど、やってることはほとんど同じだね。
	確かにそーみたいだね。
	ま、一応最初の if ブロックから見てくね。
	“if(dispStart!=0)” だから、 dispStart が 0 じゃなかったら if ブロックの中が実行されるんだね。
	言い換えると、dispStart が 0 だったら何もしないってことだね。
	えっと、dispStart が 0 ってことは、履歴メッセージの最初の部分を表示してるってことだから、履歴メッセージの最初の部分を表示してたら何もしないってことだよね。
	まぁ scrollDown メソッドは１行前の履歴メッセージが表示されるようにスクロールするわけだからね。
	履歴メッセージの最初の部分を表示してたら、それ以上前のメッセージは表示できないもんね。
	ん。じゃ if ブロックの中を見てこっか。まず clearActionHighlights メソッドを呼び出すとこは scrollUp メソッドと同じだから、その次の copyRect メソッドを呼び出してるとこからね。
	ん～…見た目は scrollUp メソッドで copyRect メソッドを呼び出してるとこと似てるんだけど、スクリプトを見ただけじゃどこをコピーしてるのかよくわかんないね…
	じゃこれも図にしてみよっか。まず、縦書き表示の時の copyRect メソッドのコピー元四角形の左上の座標と幅と高さは？
	えっと…

	こうだね。
	ん。で、これを図にするとこうなるの。

	scrollDown メソッドだと一番左の行以外の履歴メッセージがコピー元になるんだね。
	scrollUp メソッドの時とは逆になってるよね。じゃコピー先の四角形の左上の座標と幅と高さは？

	こうだよ。
	これを図にするとこうなるね。

	コピー先も scrollUp メソッドの時と逆なんだね。
	まぁ scrollUp メソッドと scrollDown メソッドは逆の動作をするわけだから、当然って言えば当然だけどね。
	あ、そっか。そー言われればそーだね。
	で、この後 scrollUp メソッドの時と同じように clearBack メソッドを呼び出すんだけど…
	scrollDown メソッドで clearBack メソッドを呼び出す時は引数が 0 になってるね。
	引数が 0 ってことは…？
	一番右の行の履歴メッセージを消すってことかな？
	そう。で、その次は dispStart の値を１減らして…
	これって履歴メッセージを１行前にスクロールするから１減らしてるんだよね。
	そだよ。それから drawLine メソッドで、１行前にスクロールすることで新しく出てくる履歴メッセージを１行書き込んでるわけね。
	“drawLine(0);” だから、一番右の行に書き込むってことだよね。
	つまり、さっき clearBack メソッドでメッセージを消したとこに書き込むってことだね。
	だね。
	copyRect メソッドを呼び出すとこから drawLine メソッドを呼び出すとこまでの流れをまとめるとこんな感じだね。

	確かに履歴メッセージが１行前にスクロールしてるね。
	で、後は scrollUp メソッドの時と同じように、最後に updateButtonState メソッドを呼び出して完了だね。 scrollDown メソッドでやってることは scrollUp メソッドでやってることと似てるから、特に問題ないよね？
	うん、おっけー。
	あと横書き表示の時の処理もあるから、一応確認しとこっか。
	はーい。まず横書き表示の時の copyRect メソッドのコピー元四角形の左上の座標と幅と高さはこうなるよね。

これを図にするとこうなるね。

	横書き表示の時も scrollUp メソッドのコピー元と逆で、一番下の行以外がコピー元になってるね。
	うん。
	それから、コピー先の四角形の左上の座標と幅と高さはこうなるから…

これを図にするとこうなるよね。

	さすがにここまで来るとパターンが読めてきたみたいだね。
	うん。コピー先も scrollUp メソッドのコピー先と逆になってるしね。
	じゃその後もわかるかな？
	えっとね、ここの clearBack メソッドで一番上の行の履歴メッセージを消して、その後 dispStart の値を１減らして、それからここの drawLine メソッドで、スクロールした時に新しく出てくる履歴メッセージ（つまり０行目の履歴メッセージだね）を一番上の行に書き込んでるんだよね。
	ん、そうそう。
	だから、copyRect メソッドを呼び出すとこから drawLine メソッドを呼び出すとこまでの流れをまとめると、こーなるんだよね。

コピー元四角形の左端の座標	width - marginR - lineHeight * (dispLines)
コピー元四角形の上端の座標	controlHeight
コピー元四角形の幅	lineHeight * (dispLines - 1)
コピー元四角形の高さ	height - controlHeight

コピー先四角形の左端の座標	width - marginR - lineHeight * (dispLines - 1)
コピー先四角形の上端の座標	controlHeight
コピー先四角形の幅	lineHeight * (dispLines - 1)
コピー先四角形の高さ	height - controlHeight

コピー元四角形の左端の座標	0
コピー元四角形の上端の座標	controlHeight + lineHeight + marginT
コピー元四角形の幅	width
コピー元四角形の高さ	lineHeight * (dispLines - 1)

コピー先四角形の左端の座標	0
コピー先四角形の上端の座標	controlHeight + marginT
コピー先四角形の幅	width
コピー先四角形の高さ	lineHeight * (dispLines - 1)

コピー元四角形の左端の座標	width - marginR - lineHeight * (dispLines - 1)
コピー元四角形の上端の座標	controlHeight
コピー元四角形の幅	lineHeight * (dispLines - 1)
コピー元四角形の高さ	height - controlHeight

	ん、そのとーり。じゃこれで scrollUp メソッドと scrollDown メソッドの処理はわかったかな。
	うんっ。
	それじゃ、今回はここまでにしとくね。次回はスクロールバー用に新しく作った setLine メソッドとかを見てくね。
	は～い。
	それじゃ、また次回ね！

10.11 メッセージ履歴のカスタマイズ ～基本編～（その８）

10.11　メッセージ履歴のカスタマイズ～基本編～（その８）