効率化の意味は
連載第8回目となる今回は、「コーディング」をテーマにお話していきたいと思います。特に今回は、フルフラッシュサイトの制作におけるコーディングの効率化に焦点を当ててお話ししていきます。
当然のことながらクライアントワークには納期がありますから、企画、デザイン、コーディングといったWebサイト制作上のどの工程にも時間的な制約が存在します。ただ、そのなかでもフルフラッシュサイト制作におけるコーディングの時間的制約については特に注意を払う必要があると、著者は考えています。
フルフラッシュサイトの制作ではFlashの機能向上に伴い、ときに汎用アプリケーションに迫るほどの複雑かつ大規模なプログラミングが必要になる場合が出てきました。しかし汎用アプリケーションの開発には数ヶ月、場合によっては一年以上の期間が設けられるのに対し、Webサイト制作では早ければ1週間でコーディングを要求されるような状況も珍しくありません。機能は高度になる一方でも納期は変わらないのですから、コーディングはさらに厳しいスケジュールで作業しなければならない局面が増えてきたのではないでしょうか。そのような限られた状況でも企画の意図やクライアントの要望を確実に捉えたWebサイトを実現するために、コーディングの効率化は欠かせない要素になると考えています。
本格的プログラムには設計がつきもの
フルフラッシュサイトとhtmlベースのWebサイトでは、ひと口にコーディングと言っても作業を進めるうえで基本となる考え方に大きな違いがあると、著者は考えています。htmlのようなマークアップ言語を用いたコーディングでは、基本的にはサイトマップに従ってコードを記述していくことで、概ね目に見える形でページが姿を現していきます。
しかし「Action Script（以下、AS）」を用いたFlashのコーディングでは、より"プログラミング然"としたコードの記述が行われます。サイトによってはページの概念が希薄ということもあり、記述自体が複雑というだけでなく、画面上で見えるページに対して裏で動く記述がまったく別の場所に格納されていることも珍しくありません。このため、特にフルフラッシュサイトのコーディングではそれぞれの記述を機能ごとに分け、Webサイトとして成立させるために各機能の関係を把握し、整理する「設計」が非常に大切になります。
フルフラッシュサイトのコーディングを行うにあたっては、走り書き程度であっても機能ごとにWebサイト全体を俯瞰できる構成図を書き起こすことが必要だと思います。具体的にはプログラムを機能ごとに「クラス」（注1）に分け、「メインクラス」を起点に、「ローディングクラス」、「ナビゲーションクラス」、「サウンドクラス」など、役割を明確化して整理する作業のことです。プログラム開発の世界では「UML（Unified Modeling Language）」と呼ばれるプログラム設計の統一表記法がありますが、それに近いものと言えるでしょう。
この作業は頭の中を整理するために行うものであって、必ずしも詳細な書面に残す必要はありません。ただ、現在ではJAVAをはじめとする高度なプログラミング言語に近い機能を持ってきたASです。複雑なコーディングであればあるほど、今後ますますプログラムを行うにあたって設計という考え方が、後述する効率化のためにも大切になってくるのではないかと考えています。
コーディングに「ルール」や「スタイル」を
フルフラッシュサイトのコーディングを行うとき、前述のようなクラスごとに整理した設計図は結果的にどのWebサイトをコーディングしても似たような構成になるときがあります。これは特定のコーディング・ルール、またはスタイルが存在していることの裏返しでもあります。今回のテーマに繋がってきますが、それが個人のものであれチームのものであれ、コーディングに一定のルールを設けることは効率化に欠かせない要素ではないでしょうか。
たとえば、自分があるWebサイトのコーディングを行っている期間は、当該Webサイト向けに記述されたプログラムのどこに何のロジックが存在するかということは比較的容易に分かります。自身が担当しているのですから当然ですね。しかし、ひとたび納品を終えて公開したWebサイトについてはいかがでしょうか。公開して数ヶ月経過したあと、クライアントの要望で何らかの修正または変更点が発生するといったケースはしばしば存在します。そんなとき、記述者本人ですら統一した記述ルールやスタイルが存在していなければ、ちょっとした変更ひとつにも仕様を思い出すのに無駄な時間を費やしてまったり、さらにはあらぬ不具合の原因になってしまう可能性があります。
そのような状態に陥らないためにも、クラス分けのルールをはじめ、変数や関数を宣言するときの命名規則など、コーディングに関して自分なり、あるいはチームなりのルールやスタイルを明確にしておくことが効率化に向けた第一歩になると考えています。
OOPで効率化
これに加えて、コーディングの効率化を図ろうとするときに大きな役割を果たす手法が「オブジェクト指向プログラミング（OOP）」（注2）です。もともとアニメーション作成ツールであったFlashですが、数々のバージョンアップを経て、最新のスクリプト「Action Script3（以下、AS3）」はJAVAやC++といったOOP言語にもそれほど劣らない高度な機能を実装するに到りました。現在のAS3は本格的なOOPを十分可能にするレベルになっていると言っても差し支えないでしょう。
もともと効率的なプログラミングに最適とされているOOPの利点はさまざまな面におよびます。まず、頻繁に利用されるロジックなどを「ライブラリ」（注3）にして再利用でき、改造、変更、拡張を容易に行える点がOOPの大きなメリットです。十分に検証されたライブラリをあらかじめ用意しておけば、ゼロから作るプログラムに比べてバグ発生の可能性は格段に低くなります。そして、デバッグも簡単に行えますから開発・メンテナンスの両段階で作業効率があがり、結果としてコーディングの生産性は高まるでしょう。
個別の機能パーツを前述したようにクラス化できるので、チーム開発でも大きなメリットを創出します。以前は特定のフレームだけに延々とソースコードを記述したは良いものの、修正ひとつとっても膨大な記述から所望の箇所を探し出す必要があり、記述者自身はおろか他者にとって大変困難な作業になるときがありました。この点でもOOPでプログラムを構築したのち、ライブラリ化した特定のクラスを呼び出して所定の記述を見つければ、記述者以外の開発者でも比較的容易に修正が行えるというわけです。
オープンソースやデザインパターンも活用
また、OOPではオープンソースのライブラリを活用できるというメリットも見逃せません。頻繁に使用される汎用性の高いプログラムであればあるほど、どこかで誰かが同じものを作成しているものです。ASでも同様に「ASライブラリ」として世界中のWebサイトなどで公開、配布されていますから、その都度自分でロジックを組まなくても便利な機能を簡単に取り込むことができます。下に著者の知る範囲で、主なオープンソースのASライブラリが公開されているWebサイトを記してみました。これらはもちろん他者の作成したプログラムですから、どんなバグがあっても自身で責任を取る必要があります。利用するのであれば、信頼性の高い情報ソースであることを確認するのはもとより、その記述内容を使用者もある程度理解できていることが望ましいと言えます。実際に使用するにあたっては、権利関係の確認をしておく必要があります。
このほか、コーディング作業の効率化を図るという点では、Adobeシステムズ社が提供するFlashオーサリング環境用のAPIである「JSFL」を活用するのもお勧めです。定型的な作業を自動化するコマンドを自分で作ることができるので、特に手作業であれば数時間かかっていたような作業も数秒で行えるというメリットがあります。
また、過去の膨大なプログラム設計のノウハウをカタログ化した「デザインパターン」（注4）を理解するのも、今後は有効になっていくのではないでしょうか。まだFlashコーディングに取り入れている開発者はそれほど目にしませんが、JAVAなどでは広く普及している概念であり、ASでもデザインパターンを活用できると思います。チーム開発での効率化だけでなくプログラミングの議論やコミュニケーションを円滑に図ることができるのも、デザインパターンのメリットになるでしょう。
効率化の意味をもう一度考える
今回は効率化に焦点を当ててお話してきましたが、これらを単にタイトなスケジュールを乗り切るための時間短縮の手段というだけで終わらせては意味がありません。
完成したWebサイトが企画の意図通りに機能する、あるいはバグが発生しないというのは最低限の前提です。重要なのは、その前提に加えていかにWebサイト全体のクオリティアップを実現できているかになります。ですからコーディングの効率化も、最終的にはクオリティに繋がっていかなければ意味を成さないと、著者は考えています。
コーディング効率化の真の目的は、Webサイトを最低限のレベル（機能する、バグがない）に構築していくまでの時間をまず短縮することです。それによって、デザインやモーションといった細かい演出のブラッシュアップにも時間を費やすことが可能になるためです。
そして、そのようにしてディテールを作り込んでいく時間がWebサイト全体のクオリティ向上、ひいてはWebサイト本来の目的達成により近づけることができると考えています。
