こんばんは、紅白見ながら書いてます。kijimaです。

前回の記事ではページャー機能を例に、同じような処理は共通化→汎用化する考え方の大切さについて解説しました。

ちょっと今回は前回の記事ではみ出てしまった部分の解説のみなので、表題のような考え方というよりは具体的な実装方法の説明だけになってしまうんですが、続きであることは間違いないのでシリーズ化させておきます。前回の記事と合わせて読んで頂ければ光栄です。

 

100枚の画像を15枚ずつ、複数ページにわたって表示させる場合の実装方法

まずはじめに、ページャー機能で押さえておかなければならない大事なポイントのおさらいです。

・最大何ページあるのか？
・現在何ページ目にいるのか？
・ページ変更時に"次へ"、"前へ"ボタンを制御する
・ページ変更時にメインとなる要素の表示を制御する
・1ページあたりに表示する要素はいくつか？

今回の記事では、最後の「1ページあたりに表示する要素はいくつか？」というポイントに絞って解説していきます。

具体的には、「100枚の画像があって、1ページあたり15枚までしか表示できない。よって複数ページが必要になってくる、という仕様を実装するための考え方」です。

おそらく、一度でもページャー機能を実装した方には当たり前の考え方だと思います。

けれども、Flashを初めて間もない人にとっては実際にどうやって100枚の画像を15枚ずつに分けて表示させるか、ソースコードでその仕組みを実装するのは少々難易度の高いことになってくるかと思います。

ですが、ActionScriptのお作法どうこうよりは、数学の計算方法を理解すればそんなに難しいことをするわけではありません。

それでは早速、具体的な実装方法の解説に入っていきます。

 

100枚の画像をすべて表示するためには何ページ必要か？

1ページあたり15枚画像を表示できる仕様の場合、100枚の画像をすべて表示するためには何ページ必要でしょうか？

答えは単純な計算、100を15で割ればいいのです。ということは、100/15 = 6.666....。ということは、7ページあれば100枚すべてを表示することができます。

 

ここで、前回の記事でも大事なポイントとして登場した「最大何ページあるのか？」という点が実際の値で埋めることができます。ただ、実際の計算では1ページ目＝0としてカウントしたほうが都合がよいため、最後のページの値は少数以下は切り捨てて6とます。計算式にすると下のようになります。

maxPageNum:int = Math.floor(100 / 15);// -> 6

 

次に、前回の記事で解説した「ページ変更時にメインとなる要素の表示を制御する」処理（addContentsメソッド）の中身に入っていくわけですが、前回の記事では単純に表示する要素をremoveChild,addChildするだけしか説明していませんでした。

ですが、表示可能な画像は100枚ありつつも、1ページ内に一気に表示させることはできないので「1ページあたり15枚」まで表示させ、続きは次のページに遷移して表示させる、という実装が必要になってきます。

 

addContentsメソッド内で必要なのは、「現在のページ数からはじまる15枚の画像を表示させる」という処理。 実際にaddContentsメソッドを書いていってみましょう。

		private var currentPageNum:int = 0;//現在のページ
		
		private function addContents():void {
			
			//現在何ページ目にいるかによって、100枚中何枚目から表示を開始するかを決める
			var startNum:int = currentPageNum * 15;
			
			//現在何ページ目にいるかによって、1ページ内に何枚画像を表示させるか決める
			//当然、最後のページの時以外は15を返す
			var endNum:int = ( (100 - startNum) < 15)? 100 : startNum + 15;
			
			for (var i:int = startNum; i < endNum; i++) {
				trace( i + "番目の画像を表示する" );
			}
		}

やはり現在何ページ目にいるかというのが最も重要な値になっています。上のソースコードではmaxPageNumは直接使いませんでしたが、ボタン押下時の制御に必要になってきます。

ページ遷移したときに表示する画像は、for文の中のiの値となりますが、最後のページでは、下のような結果になるはずです。（以下、for文内のtrace出力結果）

90番目の画像を表示する
91番目の画像を表示する
92番目の画像を表示する
93番目の画像を表示する
94番目の画像を表示する
95番目の画像を表示する
96番目の画像を表示する
97番目の画像を表示する
98番目の画像を表示する
99番目の画像を表示する

99番目イコール、100枚目になるため、ちゃんと最後のページでは15枚ではなく、91〜100枚目までの10枚を表示することができるのです。

 

この、最後のページに関する制御をしていないと、100枚しか画像がないのに、最後のページでは105枚目まで画像を表示しようとしてしまいます。当然結果は、エラーとなるはずです。

以上が、ページャー機能を実装する上で必要な考え方になります。これは本当によく使う考え方なので、覚えておいて損はないと思います。