10.11 メッセージ履歴のカスタマイズ 〜基本編〜(その8)

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

scrollUp メソッド(HistoryLayer.tjs より抜粋)>

function scrollUp()
{
    if(dispStart < dataLines - dispLines) // 1行先の履歴メッセージが表示できる場合は...
    {
        clearActionHighlights(); // hact タグによるリンク表示を全て消去します
        // 最初の行以外の履歴メッセージを1行分上(縦書き表示の場合は右)に移動します
        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++; // 表示する行の値を1行分増やします
        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 メソッドのコピー元の四角形の左上の座標と幅と高さがどんな値になるか確認しとくね。
はーい。
で、それぞれどんな値になる?
えっ? あ、えーっと…確か第4引数が左端の座標で、第5引数が上端の座標で、 あと幅と高さはそれぞれ第6引数と第7引数だったはずだから…

scrollUp メソッドでの縦書き表示時のコピー元四角形の左上の座標、幅、高さ>

コピー元四角形の左端の座標width - marginR - lineHeight * (dispLines)
コピー元四角形の上端の座標controlHeight
コピー元四角形の幅lineHeight * (dispLines - 1)
コピー元四角形の高さheight - controlHeight
※コピー元四角形の左端の座標は “width - marginR - lineHeight * dispLines” と同じ意味です。

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

scrollUp メソッドでの縦書き表示時のコピー元領域>

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

scrollUp メソッドでの縦書き表示時のコピー先四角形の左上の座標、幅、高さ>

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

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

scrollUp メソッドでの縦書き表示時のコピー先領域>

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

scrollUp メソッドでの copyRect メソッド実行後の状態>

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

scrollUp メソッドでの clearBack メソッド実行後の状態>

こういう状態になるわけね。
あ、2つあった13行目の履歴メッセージの1つが消えたね。
じゃまた scrollUp メソッドのスクリプトの方に戻るね。
次はdispStart の値を1増やしてるね。
これって scrollUp メソッドを呼び出すと1行先の履歴メッセージが表示されるから、 値を1増やしてるんだよね。
そうそう。
で、その次に 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 - 114 になるよね。
うん。
ってことは、14行目の履歴メッセージが一番左の行に書き込まれるってことになるんだよね?
ん、そうなるね。
だから、“drawLine(dispLines - 1);” を実行すると…

scrollUp メソッドでの drawLine メソッド実行後の状態>

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

scrollUp メソッドでの横書き表示時のコピー元四角形の左上の座標、幅、高さ>

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

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

scrollUp メソッドでの横書き表示時のコピー元領域>

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

scrollUp メソッドでの横書き表示時のコピー先四角形の左上の座標、幅、高さ>

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

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

scrollUp メソッドでの横書き表示時のコピー先領域>

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

scrollUp メソッドでの copyRect メソッド実行後の状態>

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

scrollUp メソッドでの clearBack メソッド実行後の状態>

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

scrollUp メソッドでの drawLine メソッド実行後の状態>

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

scrollDown メソッド(HistoryLayer.tjs より抜粋)>

function scrollDown()
{
    if(dispStart!=0) // 1行前の履歴メッセージが表示できる場合は...
    {
        clearActionHighlights(); // hact タグによるリンク表示を全て消去します
        // 最後の行以外の履歴メッセージを1行分下(縦書き表示の場合は左)に移動します
        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--; // 表示する行の値を1行分減らします
        drawLine(0); // スクロールすることで新しく出現した行の履歴メッセージを最初の行に書き込みます
        updateButtonState(); // ボタンの表示状態を更新します
    }
}
※コメントを追加しています。

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

scrollDown メソッドでの縦書き表示時のコピー元四角形の左上の座標、幅、高さ>

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

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

scrollDown メソッドでの縦書き表示時のコピー元領域>

scrollUp メソッドの時と同様に、画面に表示できる履歴メッセージの行数(dispLines)を 14 とした時の例を示しています。

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

scrollDown メソッドでの縦書き表示時のコピー先四角形の左上の座標、幅、高さ>

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

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

scrollDown メソッドでの縦書き表示時のコピー先領域>

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

scrollDown メソッドでの copyRect, clearBack, drawLine メソッド実行後の状態>

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

scrollDown メソッドでの横書き表示時のコピー元四角形の左上の座標、幅、高さ>

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

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

scrollDown メソッドでの横書き表示時のコピー元領域>

scrollUp メソッドの時と同様に、画面に表示できる履歴メッセージの行数(dispLines)を 10 とした時の例を示しています。

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

scrollDown メソッドでの横書き表示時のコピー先四角形の左上の座標、幅、高さ>

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

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

scrollDown メソッドでの横書き表示時のコピー先領域>

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

scrollDown メソッドでの copyRect, clearBack, drawLine メソッド実行後の状態>

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


前へ | TOP | 次へ