スキンの作成方法【その２】－思想編－
7
3
投稿者:
2008/07/03 6:28
どんなものであれ、何かを作るには利用する環境やツールなどの設計思想を理解しておくことは重要です。特に、DotNetNukeでのスキン開発では、デザインに対する考え方の転換が必要であり、あらかじめそこを理解していないと、なかなか取っ掛かりにくいということになってしまいます。この考え方の転換は、プログラミング経験者であれば手続き型言語からオブジェクト指向言語への乗り換えをイメージしてもらうとわかると思います。プログラムなんて知らないという方には、ざっくり言えばモジュール化や部品化の考え方をデザインにも取り入れるという事で理解してください。それを導入することである程度制約が出てきたり、面倒な手順を踏んだりする必要が出てきたりしますので、そこを取り上げてダメだとかいう話になってしまうのがプログラミングやデザインに限らずどのような世界でも通例なのですが、それを補って余りある成果も手にできるので、結局はそれがスタンダードになってしまうというのもまた歴史です。それに、既にデザインの世界でもオブジェクト指向的な考えは取り入れられつつあります。スタイルシートやダイナミックテンプレートなどがその例です。
少し前のウェブ製作では、ページを構成するのに、ページは一つの塊として一体のものであって、小さな部品の組み合わせで行うという思想はほとんどなかったと思います。最近のツール等でサポートされているダイナミックテンプレート機能では、サイトの基本デザインを作っておき、各ページにそれを適用するという考え方でデザインの再利用や生産性の向上を実現しています。これは部品化の一部といえますが、ページの大枠のデザインにとどまっています。これをコンテンツ部分にまで拡大したのがDotNetNukeのスキンです。DotNetNukeのデザインではスキンとコンテナ（まとめてスキンと呼びます）から構成されており、スキンという枠（ページ）の中でコンテナという部品（コンテンツ部分）を組み合わせてページを作っていくという思想になっています。
このように、スキンのデザインとコンテナのデザインという風に別々に分けて考えますので、スキンとコンテナは別のデザインファイルとなっています。これは、一旦作ってしまえば別デザインへの展開や保守面で非常に高い生産性や再利用性を生み出す一方、デザインの制約があったり、ファイルが分離しているためツールのデザイン画面やプレビュー画面で確認しながらHTMLやCSSのコーディングを行っていくという通常のスタイルが適用しにくいので、そのあたりの工夫が必要となります。
なお、DotNetNukeのスキンといっても、要はhtmlなので、基本的には普通のホームページ作成用のツールでも作ることができますが、一部、ツール上でプレビューによる確認をしながらの編集ができないものがあります（代表的なものはメニューです）ので、そのあたりがDotNetNukeのデザインをやってみる際の一つの障壁になるかと思います。とはいえ、DotNetNukeでなくてもJavascriptでポップアップするようなメニューやプログラムで動的に生成するメニューはビジュアルに開発することは難しいので、結局のところ同じといえますし、どうしてもツール上でプレビューで確認しながら進めたいとかデザイン面で自由にやりたいというのであればDotNetNukeのメニューを使わずに固定リンクでデザインすればこれまでと同じです。
ということで、分かりにくくなってしまったので簡単にまとめます。
- DotNetNukeのページデザインはデザイン部品を組み上げることで行う。
- 部品（コンテナ）とその入れ物（スキン）のデザインを行うのがDotNetNukeのスキン製作である。
- 部品毎に完結する必要があるためデザインにはある程度の制約が伴うが、その一方で高い生産性を手にできる。
- 部品化に合わせた製作手順の工夫が必要
最初の三つは与えられた前提件なので、この連載は最後の製作手順の工夫についてのお話になります。
次回は具体的な設定周りの話からはじめたいと思います。