※妄想なので、新技術についての情報とかはありません。ご了承ください。
※執筆者はJSPやJekyll、Assemble、PHPの存在を知っています。
前書き
ファイルをやり取りする上での共通言語として作り上げられたHTML。
これが果たした役割は非常に大きい。
ブラウザで閲覧できるのは基本的にHTMLだけである。
いろんなプログラミング言語が存在するが、そういったもので作られたサイトも、
最終的にHTMLタグを使ったデータが出力されるようになっていて、
それをブラウザが解釈して、我々が認識できる画面として表示される。
（JavaとかFlashとかもあるけどひとまず置いておく）
HTMLの仕様は時代に合わせて新しいものが追加され、最近ではHTML5が勧告された。
しかし、いろんなウェブサイトを見て、そして実際にサイト作りをしながら思ったこと。
このHTMLって言語は、そもそもWEB製作者にとって本当に使いやすいものなのか？ ということである。
一般的なHTMLの使いやすさ
HTMLを使ったサイトは作りやすい。なにせWindowsのメモ帳1つで作れてしまう。
そういう意味では「使いやすい」し、「作りやすい」言語と言える。
初学者にとって、非常にとっつきやすい。環境構築の手間を考える必要がないのだから。
一方でC言語を学ぼうと思ったらコンパイル環境が、専用ソフトが…と何だか調べてる内に放り出したくなる。
本を片手にちょっと手軽に書いてみて確認、ということがしにくい。
そういう意味では、WEBブラウザとメモ帳さえ使えれば制作・確認ができるHTMLって素敵だと思う。
ちょっと要領がわかれば、子供でも作れてしまうのだから。
製作者にとってのHTML
一般的な使いやすさは分かった。
が、実際にサイトを作ろうとすると、ある面倒なことに気付く。
ファイル1つ＝1ページなのである。
各ページにそれぞれのページヘのナビゲーションを配置すると、各ページへスムーズにアクセスできて便利である。
WEBサイトの作り方を勉強していれば、その辺のことはすぐ理解できる。
そして、そのナビゲーション自体もデザインが全く同じものを使えば、サイト全体の統一感が出るし、
ページごとに考える手間が省けるということもすぐに分かる。
で、問題はその共通ナビゲーションを追加する方法である。
やり方はどうあれ、各ファイルにそのナビゲーションタグを埋め込まなければならない。
10ファイルあれば、10ファイルに、100ファイルあれば100ファイルに、
そのナビゲーションタグそのもの、PHP等を利用する場合でも、何らかの呼び出し命令が記述されている必要がある。
どう頑張っても、1ページ＝1ファイルという区分けでしか作れないHTMLの限界がそこにある。
SPAは開き直って、「じゃあコンテンツを1ページに全部収めてしまえばいいじゃん」というものであるが、このルールでこれからも抜け道や方法を考えながら頑張っていく必要はあるのだろうか？
僕はそうは思わない。
理想のウェブサイト構築言事は、1ページ＝1ファイルという縛りからは抜け出す必要があると思う。
共通パーツの利用
そもそも、HTMLには「共通パーツ」という概念が存在しない。
複数のページに、製作者が人為的に同じタグを埋め込み、あたかもサイト共通のパーツとして機能しているように見せているだけである。
言語的に想定されていないものを、ページ閲覧者の利便性を考慮して配置しているに過ぎない。
理想のウェブサイト構築言語には、標準仕様として共通パーツのような概念が必要だと思う。
理想のウェブサイト構築言語とは
以上を踏まえて、理想のウェブサイト構築言語についてまとめて行きたい。
とりあえず、「理想のウェブサイト構築言語」の表記が長いので、「IDeal Website Language」の頭文字を取って「IDWL」とでもしておく。HTMLっぽく4文字で。
- 1ページ1ページに埋め込むことなく、サイト単位・グループ単位等で共通パーツとして利用できる。
- 「ページ単位に限定されない」複数のファイル群によって、1つのWEBサイト・コンテンツを作り上げることが出来る。
…と考えていくと、結局はWindows標準のインターフェースのような感じだったり、
テレビゲーム1作品のような単位に落ち着くと思う。
要するに、1つのウェブサイト＝HTMLファイル × n っていうのが時代に合わなくなってきている事が言いたい。
今我々製作者が主に作りたいのはある1つのサービスであって、1枚1枚のWEBページではないのだ。
もちろん、1枚1枚のWEBページを作ることが全くの無意味だとは思わない。
が、その流儀ではもはや合わない事例が多すぎると思う。
HTMLの発想にとらわれない理想の言語、IDWL。
立ちはだかる障害は大きいが、そういう言語がこれから作られていくべきだなと思い、
考えをまとめるためにも投稿する。
この記事を見ていろんな観点から理想的な仕様について、ご意見がいただければ幸いです。
みんなで理想的なWEB言語を作ろうぜ！的な叩き台になれば面白いと思いますので。
あくまで理想なので実現可能性等は完全度外視で構いません。
寄せられたご意見を元に、この記事を更新し、良い考えがまとまればなと思っています。
具体的な仕様案
- Scalable Web langage（拡張可能なWEB言語）
- Reusable code（再利用できるコード）
従来のHTMLファイルのように1ページ1ファイル形式での記述が可能。
1ページに使われる全てのデータが1ファイルに収まっている。そういう記述も出来る。
小規模なサイト向きの作り方が可能である。
1ページ複数ファイル形式での記述も可能。
大規模なサイト向けに、1ページを構成するソースが複数と言う形式でも作れる。
使用するあらゆるモジュール郡を外部読み込みして持ってくるイメージ。
View（表示）とData（テキスト）の分離。
HTMLとCSSは「構造とデザイン」を分離させていた。
が、それでは再利用性に乏しい。
なので、表示とデータを分離させる。
また、表示とデータを結びつける役割を担う関数を設定できる。
View について
構造・デザイン・レイアウトといった、画面表示に関わる部分。
フレームやディスプレイといった感じのもの。
CSSが担っていた部分は全部ここに集約されるイメージ。
スコープの設定
開発者の任意でスコープを設定できる。
スコープの設定は必須。
スコープを設定しないで書いたらグローバル扱い、みたいなことをしない。
パーツ単位でメディアクエリーみたいなことできたら、制御楽じゃないですか。
- グローバル（従来のCSSのように全てに適用される）
- パーツ単位（任意のパーツにだけ適用される。複数選択可能）
レイヤー
任意の枚数が重なったレイヤー構造になっており、
各レイヤーには名前をつけることができ、重なる順番も自由に設定できる。
これを利用して、
- ベースレイヤー
- ナビゲーションレイヤー
- モーダル表示レイヤー
のような区分を独自に作成し、パーツ同士の干渉を防いだり、位置関係を用意に制御できる。
z-indexの不毛な区分からの開放。
Data について
簡単に言うとテキスト。数値や文字列、あるいは真偽値だったり配列、リスト等。
サイト上の内容となるもの。
サイトで取り扱う情報は全てデータ。
画像や動画もデータ。
関数について
データに基づいてViewを変化させるための設定。
シンプルな例で言うと、エクセルの条件付書式のように「値が0の場合は背景を青にする」「値が100の場合は背景を赤くする」のような処理を行う。