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

	メッセージ履歴画面を表示してる時に矢印とかのキーを押したりマウスホイールを回したりすると、履歴メッセージをスクロールできるよね。
	そーだね。
	今回から、キーを押したりマウスホイールを回したり、あとスクロールバーを操作したりした時に、履歴メッセージの表示を更新する（スクロールしたり表示するページを切り替えたりするってことね）メソッドを見てくことにするね。
	はーい。
	じゃあまずどんな操作をしたらどんなふうに履歴メッセージの表示が更新されるかってのを、横書き表示の時と縦書き表示の時でそれぞれ簡単にまとめとくね。
	え、横書き表示の時と縦書き表示の時で操作のやり方が違うの？
	ん、キー操作は横書き表示の時と縦書き表示の時でちょっと違ってるよ。あと everypage が true か false かでも違ってるね。
	じゃあページ単位で履歴メッセージを表示する時と行単位で履歴メッセージを表示する時でもキー操作が違うってこと？
	うん。じゃまずは横書き表示の時から見てくね。 everypage が true の時と false の時でそれぞれこんなふうになってるよ。

操作	処理	呼び出されるメソッド
↑キー，←キー，PageUpキー	前のページを表示	prevPage
マウスホイールを奥に回転
↓キー，→キー，PageDownキー	次のページを表示	nextPage
マウスホイールを手前に回転
スクロールバー操作	指定されたページを表示	setPage

操作	処理	呼び出されるメソッド
↑キー	戻る方向にスクロール	scrollDown
マウスホイールを奥に回転
←キー，PageUpキー	前のページを表示	prevPage
↓キー	進む方向にスクロール	scrollUp
マウスホイールを手前に回転
→キー，PageDownキー	次のページを表示	nextPage
スクロールバー操作	指定された行を表示	setLine

	この表の見方なんだけど、例えば横書きで everypage が true の時に ↑キーか ←キーか PageUpキーを押すと、１つ前のページの履歴メッセージが表示されるって感じね。あとマウスホイールを奥の方に回転させても前のページの履歴メッセージが表示されるよ。
	「前のページを表示」って書いてあるとこの右側に書いてある「prevPage」ってのは？
	↑キーか ←キーか PageUpキーを押したり、マウスホイールを奥の方に回転させると、 HistoryLayer クラスの prevPage っていうメソッドが呼び出されて、１つ前のページの履歴メッセージが表示されるって意味だよ。
	えっと、じゃあ prevPage ってメソッドが１つ前のページの履歴メッセージを表示するメソッドってこと？
	ん、そういうこと。ちなみに nextPage メソッドも HistoryLayer クラスのメソッドで、１つ先のページの履歴メッセージを表示するメソッドなんだ。
	everypage が true の時に ↓キーか →キーか PageDownキーを押したり、マウスホイールを手前に回転したりした時に呼び出されるメソッドだね。
	そ。あとメッセージ履歴画面をカスタマイズしてスクロールバーを付けてるから、スクロールバーを操作した時に履歴メッセージのページを切り替えるために setPage っていうメソッドを作ってるよ。
	それって元々のメッセージ履歴レイヤのクラス（HistoryLayer クラス）にあるメソッドじゃないんだよね？
	うん。setPage メソッドはカスタマイズ用に作ったクラスだから、 HistoryLayer クラスじゃなくて ExtendedHistoryLayer クラスのメソッドだよ。
	そっか。
	じゃ everypage が false の時も簡単に見とくね。
	everypage が false の時のが操作の種類が多いんだね。
	everypage が false だと行単位で履歴メッセージをスクロール出来るし、あとページ単位で履歴メッセージを切り替えられるようにもなってるからね。
	確かに everypage が false の方にも「前のページを表示」と「次のページを表示」があるね。
	で、行単位で履歴メッセージをスクロールする処理とページ単位で履歴メッセージを切り替える処理は違ってるから、行単位で履歴メッセージをスクロールするために scrollUp メソッドと scrollDown メソッドがあるんだ。
	それって元々のメッセージ履歴レイヤクラスのメソッドなの？
	ん、どっちも HistoryLayer クラスのメソッドだよ。ちなみにスクロールバーを使って行単位で履歴メッセージをスクロールする時には setLine メソッドを使うよ。これは HistoryLayer クラスじゃなくて ExtendedHistoryLayer クラスのメソッドだよ。
	カスタマイズした方のメッセージ履歴レイヤのクラスってことだね。
	そう。で、縦書きの時の方はこんな感じね。

操作	処理	呼び出されるメソッド
↑キー，→キー，PageDownキー	前のページを表示	prevPage
マウスホイールを奥に回転
↓キー，←キー，PageUpキー	次のページを表示	nextPage
マウスホイールを手前に回転
スクロールバー操作	指定されたページを表示	setPage

操作	処理	呼び出されるメソッド
→キー，PageDownキー	戻る方向にスクロール	scrollDown
マウスホイールを奥に回転
↑キー	前のページを表示	prevPage
←キー，PageUpキー	進む方向にスクロール	scrollUp
マウスホイールを手前に回転
↓キー	次のページを表示	nextPage
スクロールバー操作	指定された行を表示	setLine

	処理の内容とか呼び出されるメソッドは横書き表示の時と同じみたいだね。前のページを表示したりするキーがちょっと違ってるのかな？
	そ。ちなみにマウス操作とスクロールバー操作は横書きの時と基本的に同じだよ。
	そーみたいだね。
	それじゃ今回は履歴メッセージのページを切り替えるメソッド、 prevPage メソッドと nextPage メソッドと setPage メソッドを見てくことにするね。
	は～い。
	まずこれが prevPage メソッドのスクリプトだよ。

function prevPage()
{
    // 前ページに移動
    if(!canScroll) return; // スクロールできない場合は何もしません
    clearActionHighlights(); // hact タグによるリンク表示を全て消去します
    if(everypage) // ページ単位で履歴メッセージを表示している場合は...
    {
        if(dispStart<1) return; // 既に先頭のページを表示している場合は何もしません
        dispStart--; // 表示するページの値を１減らします(１つ前のページを表示します)
        clearBack(); // 現在表示されている履歴メッセージを全て消去します
        drawPage(); // 表示するページの内容をメッセージ履歴レイヤに書き込みます
    }
    else // 行単位で履歴メッセージを表示している場合は...
    {
        clearBack(); // 現在表示されている履歴メッセージを全て消去します
        if(dispStart >= dispLines) // １ページ前の履歴メッセージが表示できれば...
            dispStart -= dispLines; // 表示する行の値を１ページ(dispLines行)分減らします
        else // そうでなければ...
            dispStart = 0; // 履歴メッセージを最初の行から表示します
        var i;
        for(i = 0 ; i < dispLines; i++)
            drawLine(i); // 各行の履歴メッセージをメッセージ履歴レイヤに書き込みます
    }
    updateButtonState(); // ボタンの表示状態を更新します
}

	とりあえず最初から見てくね。まず最初の if のとこで何やってるかはわかるよね？
	えっと、“!canScroll” は canScroll が false の時に真になるんだったと思うから、 canScroll が false の時、つまり履歴メッセージがスクロールできない時は return するってことかな？
	そう。canScroll は基本的に履歴メッセージが１ページ分しかない時に false になるわけだけど、履歴メッセージが１ページ分しかなかったら前のページを表示することはできないから、何もせずに return してるの。
	つまり、canScroll が false だったら何もする必要ないってことだね。
	そ。じゃ次いくね。
	clearActionHighlights ってメソッドを呼び出してるみたいだけど、これってどんなメソッドなの？
	clearActionHighlights メソッドはリンク表示を消すメソッドだよ。
	リンク表示？
	hact タグは知ってるよね？
	メッセージ履歴画面に表示されてるメッセージがクリックできるようになるタグだよね？
	ん、そう。例えば…

このスクリプトを実行して、メッセージ履歴画面を表示すると…

	こんなふうに、メッセージのとこがリンクになってクリックできるようになるよね。
	そーだね。
	ちなみに、このリンクをクリックするとどうなるかわかる？
	えっ？えーっと…どーなるんだっけ？
	hact タグで作られたリンクをクリックすると、 hact タグの exp 属性に書いてある TJS スクリプトが実行されるから…
	“System.inform('履歴メッセージのリンクがクリックされました。')” が実行されるってこと？
	そう。ってことは…？
	ってことは、「履歴メッセージのリンクがクリックされました。」って表示されるってこと？
	ん、こんな感じだね。

	で、clearActionHighlights メソッドはこのリンクの表示、つまりメッセージの下に表示されてる下線を消すメソッドなの。
	あ、そーなんだ。
	ちなみに clearActionHighlights メソッドはカスタマイズしないから、詳しいスクリプトの説明は省略させてもらうね。
	りょーかい。
	じゃ次いくね。ここからは everypage が true の時と false の時で違う処理をやってるんだけど、まずは everypage が true の時の処理から見ていくね。
	最初は dispStart が 1 より小さかったら return してるみたいだね。
	なんでだかわかる？
	dispStart って今何ページ目を表示してるかを表してるんだったよね？
	everypage が true の時はそうだね。
	じゃあ、“dispStart<1” だから、今表示してるページが１ページ目より前だったら return するってことだよね。けど、１ページ目って最初のページだから、それより前のページが表示されてることなんてないんじゃないの？
	最初のページは１ページ目じゃなくて０ページ目になるから、１ページ目より前のページが表示されることもあるよ。
	あ、そっか。０ページ目から始まるんだっけ。ってことは、１ページ目より前のページが表示されてるってのは、最初のページが表示されてることになるんだね。
	これで “dispStart<1” の時に何もせずに return する理由がわかったでしょ？
	最初のページを表示してたら、１つ前のページを表示できないもんね。
	そういうこと。じゃ次は今表示されてるページが１ページ目以降の時に実行されるスクリプトだね。
	最初に “dispStart--;” を実行してるから、 dispStart の値を１減らしてるってことかな。
	１つ前のページを表示するから dispStart の値を１減らしてるわけだね。
	なるほどね。えっと、それから clearBack メソッドを呼び出してるね。
	clearBack メソッドはどんなメソッドだったか覚えてる？
	確か、メッセージ履歴レイヤに表示してるメッセージを消すメソッドだったよね。
	ん、ここでは引数を省略して clearBack メソッドを呼び出してるから、メッセージ履歴レイヤに表示してるメッセージを全部消してるってことだね。
	※clearBack メソッドについては §10.6 参照。
	その後に drawPage メソッドを呼び出してるってことは… drawPage メソッドは dispStart に設定されてるページの履歴メッセージをメッセージ履歴レイヤに書き込むメソッドだったはずだから、 clearBack メソッドで元々表示されてた履歴メッセージを消して、それから drawPage メソッドで１つ前のページの履歴メッセージを表示してるってことかな。
	※drawPage メソッドについては §10.7 参照。
	そうそう。んじゃ次は everypage が false の時のスクリプトね。
	everypage が false の時は dispStart の値を変える前に clearBack メソッドを呼び出してるんだね。
	clearBack メソッドは dispStart の値を参照してないから、dispStart の値を変える前に clearBack メソッドを呼び出しても dispStart の値を変えた後に clearBack メソッドを呼び出しても同じ結果になるよ。
	あ、そーなんだ。
	次は dispStart の値を更新してるとこだけど、まず everypage が true の時と false の時で dispStart の意味が違ってたのは覚えてる？
	んーと…everypage が true の時は今何ページ目を表示してるかを表してて、 everypage が false の時は今何行目を表示してるかを表してるんじゃなかったかな。
	正確に言うと、everypage が false の時は「今表示してる履歴メッセージの最初の行^※が（履歴メッセージ全体から見て）何行目の履歴メッセージか」を表してるよ。
	※履歴メッセージの一番上の行（縦書き表示の場合は一番右の行）のこと。
	あ、そーだったっけ。
	じゃ if の条件になってる “dispStart >= dispLines” はどんな時に真になるかわかる？
	dispLines ってメッセージ履歴画面に表示できる履歴メッセージの行数だったっけ？
	そ。つまり dispLines は１ページ分の履歴メッセージの行数ってことにもなるね。
	そっか。じゃあ…今表示してる履歴メッセージの最初の行が１ページ分の履歴メッセージの行数以上だったら真になるってことかな。
	んー、まぁそーなんだけど、それちょっとわかりにくい表現だよね。
	う～ん、確かにそーかも…
	今表示してる履歴メッセージの最初の行より前に少なくとも１ページ分の履歴メッセージがあるってことだから、要するに、今表示してるのが１ページ目以降の時に “dispStart >= dispLines” が真になるわけだね。
	なるほどねぇ。
	まぁこれは図を見た方がわかりやすそうな気がするから、ちょっと図にしてみるね。

	この図は dispLines が 16 の時に dispStart が 16 になってる（つまり “dispStart >= dispLines” が真になってる）時の例なんだけど、 prevPage メソッドが呼び出されて “dispStart -= dispLines;” が実行されると、１ページ前の履歴メッセージが表示されてるでしょ。
	えっと、元々１ページ目が表示されてる時に prevPage メソッドが呼び出されると、１ページ前の０ページ目が表示されるってことなんだよね？
	うん、元々 16 行目～ 31 行目（１ページ目）が表示されてて、prevPage メソッドが呼び出されたことで dispStart の値が 16 (=dispLine) 減って 0 行目～ 15 行目（０ページ目）が表示されるってこと。
	ふぅん、なるほどね。
	で、こっちの図は dispStart が 14 になってる（つまり “dispStart >= dispLines” が偽になってる）時の例ね。

	これって元々０ページ目と１ページ目の履歴メッセージがどっちも表示されてるってこと？
	everypage が false の時はどこの行からでも履歴メッセージを表示できるから、こんなふうに０ページ目の最後の方のメッセージと１ページ目の最初の方のメッセージが表示されることもあるの。
	そっか、everypage が false だとページの区切りは関係ないんだね。
	そ。で、この時に prevPage メソッドを呼び出すと、 “dispStart >= dispLines” が偽だから、ここの else の方が実行されて dispStart が 0 になるわけだね。
	dispStart が 0 になるってことは、履歴メッセージの最初の部分が表示されるってことだよね。
	そういうこと。で dispStart の値が設定できたら、あとは drawLine メソッドでそれぞれの行の履歴メッセージをメッセージ履歴レイヤに書き込めば OK なわけね。
	※drawLine メソッドについては §10.8 参照。
	結局、everypage が true でも false でも、dispStart の値を更新してからメッセージ履歴レイヤにメッセージを書き込んでるんだね。
	そういうことだね。で、最後に updateButtonState メソッドを呼び出して「前ページ」と「次ページ」ボタンの表示を更新して終わりだね。
	※updateButtonState メソッドについては §10.9 参照。
	えっと、確か今回はスクロールバーを使うから「前ページ」と「次ページ」ボタンって使わないんだったよね？
	ん、だから実際には何もしないってことになるね。それじゃ次は１つ先のページを表示する nextPage メソッドを見てくね。

function nextPage()
{
    // 次ページに移動
    if(!canScroll) return; // スクロールできない場合は何もしません
    clearActionHighlights(); // hact タグによるリンク表示を全て消去します
    if(everypage) // ページ単位で履歴メッセージを表示している場合は...
    {
        if(dispStart>=dataPages-1) return; // 既に最後のページを表示している場合は何もしません
        dispStart++; // 表示するページの値を１増やします(１つ先のページを表示します)
        clearBack(); // 現在表示されている履歴メッセージを全て消去します
        drawPage(); // 表示するページの内容をメッセージ履歴レイヤに書き込みます
    }
    else // 行単位で履歴メッセージを表示している場合は...
    {
        clearBack(); // 現在表示されている履歴メッセージを全て消去します
        if(dispStart < dataLines - dispLines) // １ページ先の履歴メッセージが表示できれば...
            dispStart += dispLines; // 表示する行の値を１ページ(dispLines行)分増やします
        if(dispStart > dataLines - dispLines) // dispStart + dispLines がメッセージ履歴の終端を超えている場合は...
            dispStart = dataLines - dispLines; // 履歴メッセージの最後の部分を表示するように dispStart の値を調整します
        var i;
        for(i = 0 ; i < dispLines; i++)
            drawLine(i); // 各行の履歴メッセージをメッセージ履歴レイヤに書き込みます
    }
    updateButtonState(); // ボタンの表示状態を更新します
}

	なんか prevPage メソッドと似てるね。
	うん、やってることはほとんど同じだからね。ってワケだから、nextPage メソッドは prevPage メソッドと違うとこだけチェックしとくね。
	りょーかい。
	clearActionHighlights メソッドを呼び出すとこまでは prevPage メソッドと同じだから、ここの if ブロックの中から見てくね。ちなみにどこが prevPage メソッドと違ってるかわかる？
	最初の if の条件が “dispStart>=dataPages-1” になってるとこと、その次の行が “dispStart++;” になってるとこかな。
	ん、そうだね。じゃまずどんな時に “dispStart>=dataPages-1” が真になる？
	んー、dataPages は履歴メッセージのページ数だったはずだから、今表示してるページが dataPages-1 ページ目以降の時に真になるんじゃないかな。
	dataPages-1 ページ目は最後のページになるから、今表示してるページが dataPages-1 ページ目以降ってことは…？
	最後のページを表示してる時ってことかな？
	そういうことだね。最後のページを表示してる時は次のページがないから、何もせずに return してるわけだね。
	そっか。なるほどね。
	じゃその次の行の “dispStart++;” は？
	次のページを表示するから dispStart の値を１増やしてるんだよね。
	ん、そうそう。後の処理は prevPage メソッドの時と同じだから問題ないよね。んじゃ次は else ブロックの中身を見てくね。
	なんか if の条件が prevPage メソッドの時よりちょっと複雑になってるね。
	まぁこれも prevPage メソッドの時とやってることは似てるんだけどね。とりあえず “dispStart < dataLines - dispLines” がどんな時に真になるかわかる？
	確か dataLines って履歴メッセージ全体の行数だったよね？
	そうだよ。
	じゃあ…今表示してる履歴メッセージの最初の行が “履歴メッセージ全体の行数－１ページ分の履歴メッセージの行数”より小さいってことだから… 一番最後のページより前のページの履歴メッセージを表示してる時、ってことになるのかな？
	ん、そういうこと。つまり、一番最後以外のページを表示してる時に “dispStart += dispLines;” が実行されるわけだね。ちなみに図にするとこんな感じ。

	で、後もう一つ if があるんだけど、こっちは何やってるかわかる？
	今度は “dispStart > dataLines - dispLines” だから、今表示してる履歴メッセージの最初の行が “履歴メッセージ全体の行数－１ページ分の履歴メッセージの行数”より大きい時に “dispStart = dataLines - dispLines;” が実行されるってことだよね。
	だね。
	これって言い換えると “今表示してる履歴メッセージの最初の行と１ページ分の履歴メッセージの行数を足すと履歴メッセージ全体の行数より大きくなる（dispStart + dispLines > dataLines）” ってことだよね？でも履歴メッセージ全体の行数より大きくなることってあるの？
	そうならないようにするために、この if があるの。
	えっ、どーゆーコト？
	例えば、dispStart が 14 の時に “dispStart += dispLines;” を実行すると…

	dispStart が 30 になって “今表示してる履歴メッセージの最初の行(30)と１ページ分の履歴メッセージの行数(16)を足すと履歴メッセージ全体の行数(34)より大きくなる” から、表示するメッセージが無い部分が出来ちゃうわけね。
	うん、そーなるよね。
	そうならないように、今表示してる履歴メッセージの最初の行と１ページ分の履歴メッセージの行数を足すと履歴メッセージ全体の行数より大きくなってる時には、ここの if のとこで “dispStart = dataLines - dispLines;” を実行してるの。そうすれば…

	こんなふうに、ちゃんと履歴メッセージの最後の部分が表示されるの。
	えっと、つまり最初の if で “dispStart += dispLines;” が実行されて dispStart の値が大きくなり過ぎちゃった時は、２つ目の if で履歴メッセージの最後の部分が表示されるように dispStart の値を調整してるってことかな？
	そういうことになるね。これで dispStart にちゃんとした値が設定されたから、後は drawLine メソッドで１行ずつ履歴メッセージをメッセージ履歴レイヤに書き込んでるわけね。
	これは prevPage メソッドの時とおんなじだね。
	ん。で最後に updateButtonState メソッドでボタンの状態を更新して終わり。
	これも prevPage メソッドと同じだね。
	そ。じゃこれで nextPage メソッドは一通りチェックできたから、最後にスクロールバー用の setPage メソッドを見てくね。

	意外とシンプルだねぇ…
	まぁね。じゃ setPage メソッドがどんな処理をやってるか説明してみて。ちなみに引数の page は表示するページ番号になってるよ。
	※スクロールバーが操作されると setPage メソッドが呼び出されます。その際にスクロールバーオブジェクトによって page の値が与えられます。
	えっと、まず最初の if のとこで dispStart が page と同じ値だったら return してるね。
	なんでだかわかる？
	dispStart と page がおんなじってことは、元々 page のページが表示されてたってことだから、別にページを切り替える必要がないってことなんじゃない？
	そうそう。じゃ次いこっか。
	次は clearActionHighlights メソッドを呼び出してるね。これは prevPage メソッドとか nextPage メソッドでも呼び出してたよね。
	だね。
	次は dispStart に page を代入してるね。 dispStart に表示するページを設定した後で clearBack メソッドと drawPage メソッドを呼び出せば、設定したページの履歴メッセージが表示されるんだよね？
	ん、そういうこと。このメソッドは特に問題ないでしょ？
	うん。
	それじゃ今回はここまでにしとくね。
	は～い。
	次回はマウスホイールとかでメッセージ履歴をスクロールする時に呼び出されるメソッドを見てくことにするね。それじゃ、また次回ね！

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

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