除夜の鐘のごとく連投しています、kijimaです。そろそろきつくなってきましたが止まりません。

さて、今回は新人Flasherがまずぶち当たるであろうポイントについて、「機能を実装するための考え方」という視点でまとめてみました。

新人Flasherを育成するにあたって、なにか参考になる部分があれば幸いです。

 

Flashコンテンツ作成にあたり、習得しなければならない考え方、汎用的ロジックが存在することについて

Flashコンテンツの特性として、デザインや演出などの見た目は違えども、多くのFlashコンテンツに共通している機能がたくさんあります。代表的なものでは、以下に挙げた機能などですね。

・プリローダーの実装
・ポップアップウィンドウの表示、非表示
・スクロールバーの操作
・フォーム送信とそのエラー処理
・ボタン操作を一時的に全無効にさせる処理
・ページャー機能

そして、上で挙げたような機能は「汎用的なロジック」、すなわち毎回ほぼ同じActionScriptの記述で実装することができます。よって、一度ロジックを理解して自らの手で実装した経験があれば、次の機会に同じ機能を実装する際には、以前実装したソースから抜粋してくるなどで素早く実装することができるはずです。

もし手元にそのような以前実装したソースコードがなかったとしても、その機能を実装するために必要な制御の仕方や考え方は頭の中にあるわけですから、ゼロの時点からどうやって実装すればいいか?といきなり悩むことはないはずです。そうやって新人Flasherは過去の経験から成長していくわけです。

 

さて、ここからは上で説明した「汎用的なロジック」とは具体的にはどんなものか?を解説していきます。今回は一番わかりやすい(解説しやすい)機能として、「ページャー機能」を例にとってご説明していきますね。

 

ページャー機能を実装するにあたって必要になってくる考え方

ページャー機能で押さえておかなければならない大事なポイントは、以下の点です。

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

たとえば本のようなデザインのFlashで"ページをめくるごとに表示する内容が変わる"複数ページを持ったFlashコンテンツを実装するとします。

 

最初の状態は当然ながら1ページ目を開いている状態となります。そのとき、Flashの裏側の処理結果に以下のようになっているはずです。

・1ページ目、すなわち先頭のページなので"前へ"ボタンを押すことができない
・最大ページ数が1以上ある場合は"次へ"ボタンが押せる
・1ページ目の内容が表示されている

ここでの解説は後回しにして、次に「"次へ"ボタンを押して次のページを表示した状態」と、「さらに"次へ"ボタンを押して最後のページが表示された状態」の処理結果について同じように見ていきましょう。

 

まず、先頭のページから一回"次へ"ボタンを押したときは、

・先頭ページではないので"前へ"ボタンを押すことができる
・最後のページでもないので"次へ"ボタンを押すことができる
・1ページ目の内容はページ変更時に削除され、2ページ目の内容が表示されている

という状態。そして、さらに"次へ"ボタンを押して最後のページにたどりついた状態では、

・先頭ページではないので"前へ"ボタンを押すことができる
・最後のページにいるので、"次へ"ボタンを押すことができない
・前のページの内容はページ変更時に削除され、最後のページの内容が表示されている

 といった状態になっているはずです。

ここでいったん、これまでに出てきた情報をまとめます。

 

実は、ページャー機能によって起こりうる"状況"というのは、上の3通りしかないわけです。

もし、これ以外の状況があるとすれば、「60ページしかない本の61ページ目が表示されている」といういわゆる"バグが起こっている状態"であるはずです。当然ながらバグが起こってしまうのは問題ありなので、バグが起こらないように、最初に挙げた大事なポイントを"制御"していきましょう。

 

「最大何ページあるのか?」と「現在何ページ目にいるのか?」

最初に挙げた大事なポイントのうち1つ目と2つ目ですが、要は「ページ数を管理する」ということです。

そして、このページ数はFlashコンテンツ内のどこからでも参照できる変数として、保持しておきます。たとえば下記のように名前をつけて、、と。

private var currentPageNum:int = 0;//現在何ページ目にいるのか?
private var maxPageNum:int = 10;//最大で何ページあるのか?

変数やメソッドの名前の付け方も、慣れてくるとだいたい自分の中で固まってきますね。最初のうちはコンテンツやキャラクターの名前を利用した変数名をつけてしまいがちですが、なるべく限定されないような呼び名をつけるようにしていきましょう。初めのうちは他人が見ても理解できる名前であれば良いと思います。

 

話しがそれてしまいましたが、これでページ数を管理することができます。

もちろん、変数の値が変化するのは「現在何ページ目にいるのか?」を表したcurrentPageNumだけです。(複雑なページャー機能になってくると最大ページ数も可変する場合もありますが、今回はナシということにしておきます)

 

"次へ"、"前へ"ボタンを押したときに起こるアクションについて

ここまで来ればお分かりになると思いますが、"前へ"ボタンを押すとcurrentPageNumが1減り、反対に"次へ"ボタンを押すとcurrentPageNumは1増えるようにします。

しかしながら、それだけではページャー機能を制御したとは言えません。"次へ"、"前へ"ボタンを押したときに必要なアクションは、以下のようにまだあるのです。

・現在いるページによって"次へ"、"前へ"ボタンを押せる状態に変更させるための判定処理
・これまでに表示されていたメイン要素を削除する処理
・遷移した先のページのメイン要素を表示する処理
・上の3つの処理が完了するまでボタン操作を無効にさせる処理

これらは、最初に挙げた大事なポイントのうち3、4つ目の「ページ変更時に"次へ"、"前へ"ボタンを制御する」「ページ変更時にメインとなる要素の表示を制御する」にあたります。

そしてこれらすべての処理は、"次へ"、"前へ"ボタンを押すたびに実行されなくてはなりません。そういう風に言ってしまうと、なんだかとてつもなく大変なことのように感じますが、これでも「共通化できる処理はひとつの処理にまかせている」、スマートな状態です。

そしてこういった実装方法に至るまでの考え方が、新人Flasherが身につけなければならない考え方であり、この考え方を昇華させたコードそのものが、汎用的なロジックになるということなのです。

 

もしも、ページ数のぶんだけ"次へ"、"前へ"ボタンを用意してしまったり、メソッドを定義してしまっているなら、それらはすべて上のロジックのよ うに"共通化"させることができます。

実際に新人Flasherは、考えられるすべてのページ数ぶんだけメソッドを定義するようなゴリ押し手法で機能を実装しようとしがちです。ただでさえ焦ってしまいがちですし、仕方ないことですが。

 

さてさて、上の4つの処理を実装していきましょう。内部処理は説明だけで割愛します。

・現在いるページによって"次へ"、"前へ"ボタンを押せる状態に変更させるための判定処理 ->「checkButtonStatus」
・これまでに表示されていたメイン要素を削除する処理 ->「removeContents」
・遷移した先のページのメイン要素を表示する処理 ->「addContents」
・上の3つの処理が完了するまでボタン操作を無効にさせる処理 ->「enabledButtons」

■ checkButtonStatusメソッドの中には、現在居るページ(currentPageNum)を参照して「先頭ページなら"前へ"ボタンを操作不可に」「最後のページなら"次へ"ボタンを操作不可に」といった処理を実装させます。ここの判定処理が間違っていると、-1ページや61/60ページ目なんてバグが発生してしまいます。

■ 次に、removeContentsメソッド内では現在表示しているメイン要素をremoveChildさせます。ページャー機能に関係なく、多くのFlashコンテンツでは「登場させたらちゃんと片付ける」考え方が重要です。

■ そうしたら次の処理、新しいものを登場させる処理に移ります。addContentsメソッド内では、これまた現在居るページ(currentPageNum)を参照して、該当するページの内容をaddChildさせステージ内に表示させます。

■ そして最後のenabledButtonsメソッドは、バグ発生防止のための重要な役割を担っています。もしも"次へ""前へ"ボタンが押された後、removeContents -> addContentsの処理が完了する前に続いて"前へ""次へ"ボタンが押されてしまうと、思わぬ挙動が発生していしまう恐れがあります。そう言ったボタンの連打防止のために、removeContents -> addContentsの処理が完全に終わるまでは、ボタン操作ができないようにしておくのがベターです。

具体的には、enabledButtonsメソッドの引数にtrueかfalseを渡すかで、ボタンの操作が可能か不可かを切り替えられるようにしておくと便利かと。ボタンが押されたらenabledButtons(false)、処理が完全に終わったらenabledButtons(true)、というような呼び方をすると良いんじゃないかと思います。

 

ここまでの解説で、基本的なページャー機能は実装できると思います。

続きましては、最初に挙げた大事なポイントの最後のひとつ、「1ページあたりに表示する要素はいくつか?」について解説していきたいと思います。

具体的には、「100枚の画像があって、1ページあたり15までしか表示できない、という仕様を実装するための考え方」なのですが、ちょっと今回記事が長くなりすぎてしまったので、次回にまわそうと思います。

 

〜つづきはこちら〜

新人に読ませたい、Flash制作で必要になってくる大事な考え方(2)

 

HTML5飯