オンラインでCSSを編集するツール [オンライン・サイト編集]
オンラインのサイト編集ツールの作成について、いろいろとアイデア、あるいは要望を書いているが、たまたまネットサーフィンしていたら、非常におもしろそうなツールを見つけた。
『Web Developer 0.9.3 日本語版』である。これは、FirefoxあるいはMozillaにインストールして、CSSをオンラインで編集できるようにするツールで、（現在のところ）無償で提供されている。
Firefoxは、一家に一台インストールしておくのが吉なブラウザーである。特にXMLやJavascriptを動かすには、IEよりもよくできている。プラグインでいろいろと拡張することもできるらしく、このWeb Developerも、Javascriptで動くプラグインである。
これを組み込むと、Firefox上でCSSの編集ができる。まだ見つけたばかりなので、詳しくみていないが、ホームページによると、他にもWeb制作を支援する様々な機能があるらしい。
オンラインでサイトを編集するためのツールとしていろいろ使いこなしてみたいツールである。
オンライン・サイト編集におけるテンプレート [オンライン・サイト編集]
昼間、このテーマで書いて投稿したのに、エラーがあったのか、消えてしまっていた。残念。思い出しながら、もう一度書かねば。
ある程度のページ数のWebサイトを作っていく際、毎回ゼロからHTMLを書いていくのが大変なのは誰でも察しがつくだろう。あまり組織的ではない個人のサイトでは、他の同じようなページをコピーし、その内容だけを書き換える、という姑息な手段を使うことが多いだろう。たとえ、HTMLを直接書かず、DreamweaverとかGoliveとかの編集ソフトを使う場合でも、コピーをして中身を書き換えるという作り方をしている人が多いのではないだろうか。
しかし、それは組織的な作り方ではない。結局少しずつ違った形式のHTMLがたくさん出来てしまう。全体を一気に直そうとしたときにも、こういうその場しのぎのページでは、一括した変更は難しい。
したがって、できるだけ組織的なテンプレートを作って、内容とそのテンプレートを分離して管理しておくのが一番いいだろう。実際、Wikiとか、ブログとかはそういう作りになっている。ただ違うのは、そのテンプレートが一般ユーザーが気軽に編集できないものなのに対し、全てユーザーにオープンにしておく、ということだ。
後から変更しやすいということに関して言えば、HTMLはXHTMLにして、デザイン的な要素（や構造化のための仕組みもだが、XHTMLにおける構造化については、日を改めて述べよう。）はCSSに分離しておき、大部分の変更はCSSないしはXSTLでできるようにしておく。前に述べたことがあるが、XHTMLを一歩進めて、XMLにしておいて、ページはXSLTで動的に作成するという方法も検討の余地がある。
この場合、テンプレートとして、基本的なXHTMLの定型的な記述以外に、CSSのテンプレートも作っておくのがいいだろう。特にCSSは基本的なタグ全部について予めテンプレートを作っておくと、編集が楽である。
これは最初の段階だが、試行錯誤してサイト全体の統一的なデザインと構造が出来てきたところで、それをテンプレート化することができるようにしたい。具体的などうするかは、まだ考えなければいけないが、これはそれぞれのサイトに個別的なテンプレートなので、基本的にはユーザーが作るしかない。問題は、それを利用するための仕組みをツールとして提供しておくということだ。
この場合も、内容とデザインおよび構造を分離する、という考え方が有効である。内容がなければ、サイト全体のコンセプトやデザインを試行錯誤して試してみることはできない。ある程度内容が蓄積された段階で、それらを整理するための構造とデザインが考えられる。しかし、それまででも、その内容を表現するためのタグは必要で、それが既にXHTMLの文書として書かれてしまっている。それを一括変更できるようにするには、一番いいのは、XHTMLではないXMLにしておくことである。それなら、プログラム的に一括変更するのは容易だし、必要ならば、XSLTを書けば、デザインを動的に変更することもできる。
だが、ユーザーに直接XMLを書け、というのは、無理だし、また内容がないのにXMLの設計もできないだろう。そこで、XHTMLを使って、それを構造化するという程度に妥協しておく方が現実的なような気がする。
それでは、XHTMLで構造化をするにはどうしたらいいか、という点については、また後日。
ローカルでのサイト編集とサーバーの更新 [オンライン・サイト編集]
オンラインでサイトを作成するツールについてのアイデアに少し追加をしたい。
こういうツールを思いついたのは、Wikiやブログが、オンラインで編集できるのが便利だったからだ。どこでもブラウザーがあればアクセスできるし、編集できる点は、これらのツールの機能で十分だが、問題は、普通のWebサイトを作るわけではなく、かなり制限されたものしかできないところに不満があった。
それを解消するためのオンラインWebサイト作成ツールということなのだ。基本的にはPHPのサーバーサイドスクリプトで、ファイルやディレクトリをサーバー側に直接作る、という方針で、それができれば、後はサイトの管理に便利な機能を、どれだけ自然に増やせるか、ということに中心が移ることになるはずだ。
ところが、一般のプロバイダーではPHPは使えないことが多いので、レンタルサーバーを借りているような場合を除いて、使い道がかなり限られてしまうことになる。それでも、少なくとも僕自身の利用に差し支えはないのだが、折角作るのだから、多くの人に使ってもらえるような作りにしておいた方がいいに決まっている。
そこで、これをローカルで動かしてローカルのサーバー上にWebサイトを作っておき、あとはftpでプロバイダーのサーバーにミラーリングする（つまりローカルのサイトをそのままプロバイダーの自分のWebサイトの領域にコピーする）ようにすれば、このftpによる更新という一手間が余分にはなり、また特定のコンピュータ上で作業する必要が出てくるが、それでも、何もないところで作るよりはずっと気軽にサイトを作れるように思う。
もちろん、そのためにはローカルにApacheサーバーとPHPとをインストールしておく必要があるが、これだけであれば、ハードディスクの容量さえあれば、インストールは簡単にできる。まあ、ApacheとPHPを動かすには、それなりのCPUパワーやメモリ容量も必要になるが。
その場合、ftpでプロバイダのサーバーに更新ファイルを転送するプログラムが別途必要になる。これをPHPで作れるのか、それとも別にPerlやPythonで作った方がいいのかは調査しないといけないが、更新元ファイルをローカル上で保存しておくようにすれば、サーバーには更新ファイルを無条件に上書きコピーしてしまっていいので、プログラム自体は非常に単純なものでいいだろう。
また、ローカルでWebサイトを管理し、出来上がったらftpで更新するとなると、GoliveやDreamweaverやホームページ・ビルダーなどのWebサイト作成ツールと同じようなコンセプトになってしまうであろう。そこで、次にこれら既存の作成ソフトの仕様を調査し、それとどのように差別化するか、ということも考えていく必要がある。まあ、これらのソフトはやはり余計な処理をしているし、生成されるコードも、それほどきれいなものではない（コード生成については、ビジュアルな編集がメインで、HTMLコードを直接書くことは余りない）。それに対して、HTMLないしはXHTML、CSSなどの編集をメインにする僕らのツールとは使う人の層が違うことは明らかなのだが、いずれにせよ、その違いを明文化する必要はある。Webサイトの更新情報を自動化したり、RSSを自動作成したり、といった部分は、GoliveやDreamweaverなどには存在しない機能なので、その点でも差別化になるだろう。
いろいろ考えていると、夢が膨らむし、アイデアさえあれば、実現性は決して低くないので、これが出来上がるのが楽しみだ。
オンラインWebサイト構築ツールの企画・追伸 [オンライン・サイト編集]
もう一つ付け加えておきたい。
ページを変更したとき、過去のページのバックアップを取れるようにしておきたい。いつでも以前のものに戻せるように。
バックアップするタイミングは、ファイルの編集を終了して保存するときだろう。たとえ同じファイルを何回か修正したとしても、その都度、旧ファイルは保存するようにしたらいいと思う。もちろん、圧縮できれば圧縮した方がよく、また、全体の構造の中のどこのファイルかも直ぐ分かるようにしておく必要がある。
オンラインで編集していると、少しでも間違えたことをやると、復旧が難しい。ローカルで編集したものをサーバーにアップロードするときには、ローカルにオリジナルファイルが残っているので、サーバー上で間違ったことをしても、直ぐ復旧できるが、オンラインだと唯一のファイルをいじることになるので、ミスやサーバーの故障があったときの被害が大きい。十分に対策を取らなければならない。
オンラインWebサイト構築ツールの企画 [オンライン・サイト編集]
Webページを、オンラインで編集できるようにするツールを開発するコンセプトについて、以前に書いたことがある。その仕様について、少し考えてみよう。といっても、仕様を決めるためではなく、どういうことを考えなければならないか、どういう可能性を考える必要があるか、を確認するためだ。
当初のアイデアでは、オンラインでHTMLをそのまま書けるようにすることだった。Wikiやブログもオンラインで記事を編集できるが、必ずしもHTMLが全部書けるわけではない。Wikiは独特の書き方を覚えなければならず、しかも、その表現力はかなり低い。
ブログは、いくつかのHTMLは使えるが、それも構造そのものではなく、どちらかというと、テキストの修飾に関するような使い方に限られる。
いずれも、手軽に定型的な記事をアップデートするには十分かもしれないが、一つのWebサイトを統一的に構築しようとするには、全く不十分だ。
だから、余計な制約なしに、HTMLがフルで書けて、かつオンラインで編集できれば、ブラウザーだけで更新や作成ができるので、効率がいいと思うのだ。
しかし、全くゼロの状態からHTMLでページを作っていくのは、それはそれで大変だし、それにサイト全体を構成する多くのページをHTMLでゼロから書いていくのは大変であるのも事実だ。そこで、もう少し楽になる方法を考えたい。
一つは、ひな形を作って、それを登録しておけるようにすることだ。最初によく考えたひな形を作っておいて、新規ページをつくるときに、それのいずれかを呼び出して作れば、そのサイト全体で統一的なデザインのページを作ることができるのではないだろうか。
しかし、この考え方の問題点は、デザインは途中で変えたくなる、ないしは最初から決まっているものではなく、ある程度進行してから徐々に固まってくるものであり、そうなると、どの時点でひな形を作成するかが難しくなる。もちろん、最初は単にHTMLの決まり切ったヘッダなどの部分のみをひな形にしておき、ある程度HTMLでページを作った段階で、そこから統一的なひな形を作っていく、というように段階的に作ることもできる。
オンラインでHTMLを自由に書けるという方針からすれば、ひな形作りも、どの段階でどの程度のものを作るかを使う人の自由に任せることができる。
しかし、実際には、後からサイト全体のデザインを変更したいような場合が出てくるのではないだろうか。一度ひな形に基づいてサイトをある程度作っていったとしても、しばらく作っていくと、もう少し全体のデザインをこうしたい、という希望が出てくることは経験があるだろう。
ビジュアルなデザインに関しては、CSSを使うことで、あるいはCSSを書き換えることで、かなり変更をすることができる。CSSが可能なデザインというのは、ある意味では、変更可能なデザインのひな形と考えることができる。CSSを入れ替えることも、あるいは複数を使い分けることも可能である。
しかし、ページの構造については、CSSでは対処ができない。XMLの考え方でいけば、デザインと構造を分離し、デザインはCSSに任せ、構造そのものをXMLの文書（この場合にはHTMLないしはXHTMLのページ）に書いておくということになる。その構造の変更は、やはり一度書いてしまうと容易ではない。
それを可能にするには、XMLで元々のデータを作っておくことではないだろうか。XMLで構造化したデータを作り、それをXSLTでCSSを使ったXHTMLに書き換えることで、表示させる。そのXSLTをうまく作れば、XHTMLの構造そのものを変更することができるようになる。
もちろん、その場合でも、XMLによるデータの構造化は、最初に決めておく必要がある。あるいは少なくとも、ある段階では決定しておく必要がある。したがって、サイト全体の構造をどうするかは、作り始める前に、ある程度企画を練っておいてから、作り始めなければならない。それは必ずしもマイナス要因ではなく、きちんとしたサイトを作るための、必須の準備作業だと考えることができる。
また、XMLで書いてあれば、それをある段階に別の構造にプログラムで変更することも、可能である。つまり、プログラムで一括処理できるだけの規則性がXMLにはあると期待することができる。
HTMLでかく、CSSを使う、ひな形を作っていく、XMLで書き、XSLTで変換する、XMLそのものをバージョンアップする、これら様々な段階の作業をみなこなせるようなツールが出来ればいいのではないかと思う。
ZopeやXoopsの機能を調べる [オンライン・サイト編集]
オンラインでHTMLを編集するツールで、かつコンテンツ・マネジメント・システムとしての機能も含むということになると、既存ねツールでZopeやXoopsが頭に浮かんでくる。
Zopeを使った感じでは、確かに便利な側面はあるが、仕組みが大げさであり、かつ、特別な言語DTMLを覚える必要がある。これがもっとシンプルだったら使えるのだが。
使ったことはないが、サイトをみると、むしろXoopsの方が簡単そうだ。PHPとMySQLがインストールされていれば動くというのも使いやすいかもしれない。しかし、実際のサイトを見ると、かなり複雑なサイトになってしまうようだ。
そこで、まず、ZopeやXoopsでは、どのようなことができるのか、その機能を調べて箇条書きにしてみよう。そのうち、取り入れた方がいい、ないしは参考になる機能を、ピックアップし、自前で実現してみよう。
メニューと更新履歴の自動生成 [オンライン・サイト編集]
オンラインでCSSやHTMLを作成・編集できるだけではなく、さらに、サイト管理の面倒な点である、更新情報とトップメニューへの登録とを自動化できると、非常に便利である。
実際、Wikiでもブログでも、更新情報は自動的にサイドバーに表示される。これに加えてメニューへの登録もできるといい。
さらに、サイトの更新情報をRSSの形で書き出せるようにしてほしい。
これらを実現するためには、最初からページを編集するときに、必要な情報を一定の形式で書き込むようにしておく必要がある。
- メニューに登録するページのタイトル
- 更新情報には、そのタイトル以外に、簡単な概要も載せたいので、そのようなページの概要
さらにメニューの階層を自動生成するための情報−−それをどのように組み込むかは考えないといけないが−−も書き込めるようにして、保存すると同時に、それらが自動更新されるようになるといい。
サイトのファイル一覧 [オンライン・サイト編集]
CSSをオンラインで編集するときにも、Webページを編集するにも、どこのディレクトリのファイルを編集するかを一覧から選択できるといい。どちらの場合も仕組みは同じで、ただ、表示するときの拡張子が違うだけだ。
全体はディレクトリとファイルの一覧表示からなる。ディレクトリは ul の li で、ファイルは、ol の li で表示し、それぞれにリンクを貼っておく。ただし、単にファイルへのリンクではなく、PHPスクリプトを、そのファイル名ないしはディレクトリ名で呼び出す。
ディレクトリ名で呼び出されたときには、新規のCSSないしはHTMLファイルを作ることになるので、表示されるページには、まず、ファイル名を入力するtextフィールドを表示される。
HTMLもCSSも既定値として、標準的なコードを予め書いたものを用意しておき、それをtextareaに表示する。このデフォルトのファイルは、ユーザーが予め編集しておくこともできるようにする。ただし、それをオンラインで編集する機能は提供しない。
編集機能を最小限にして、あとはただ、HTMLなりCSSなりをユーザーに書かせるとすれば、ファイルの登録や更新などの処理を作れば、一通り使えるものができる。
CSSをオンラインで編集するために必要なこと [オンライン・サイト編集]
CSSをオンラインで編集するための支援機能を考えてみよう。
- 第一段階として、別にCSSのヘルプページを作っておく。これなら支援としては簡単にできる。属性や値を覚えておかなくても、見ながら書ける。
- さらに、それをJavascriptで記述して、クリックすることで自動的に編集ページに書き込むようにする。こうなると、属性や値のテキストにJavascriptを設定する必要が出てくるので、手でそのスクリプトを書いていると大変だ。そのため、たとえば、Excelのようなもので属性と値の組を書いておいて、そこからテキストに書き出し、それを自動的にJavascriptのスクリプトに変換するPythonスクリプトを書いておく。プログラムを作るプログラムを作っておくのである。これはユーザーのためのプログラムではなく、プログラムを作る人(つまり自分)のためのプログラムである。
- CSSは複数作ってもよく、またどこに置いてもいいことになっている。そこで、そのサイトのディレクトリ構造と、そのサイトに存在するCSSの場所とを一覧出来る機能があるといい。そして、そのCSSのリンクをクリックすると、既存のものを編集できるし、またディレクトリをクリックすると、そのディレクトリに新規のCSSを作るようにする。
- これは、必要不可欠ではないが、将来的にあると便利かも知れないのは、そのサイト内で使われている全てのCSSファイルのタグの索引機能である。索引であるから、アルファベット順にならび、それがどのファイルにあるかがページ数代わりである。そのリンクをクリックすると、そのCSSを編集することが出来るようにする。その索引は、呼び出したときに、その場で作成するようにする。テキストを読み込んで整理するだけだから、時間はかからない。
こんなところかな。これをどういうスクリプトファイルにどういう機能を書き、それらがどのように連携するかを、紙の上でシミュレートしてみるといい。
CSSファイルを作成するPHPスクリプト [オンライン・サイト編集]
前に「ブログとWikiの間で」で書いたことの一つに、CSSをオンラインで編集できたら、というのがあった。
これはこれで一つの独立した機能として考えられるので、まず、この辺りから作り始めたらどうだろうか。
HTMLの要素や属性、値などは、メニューから選択できるといいかもしれないが、かなりの手間をかけても、大して省力化にはならないような気がするので、このブログのように、単純に大きなテキストエリアを作っておいて、そこに全部手動で書き込み、送信ボタンを押すと、それがサーバーに送られて、適切な場所に登録されるようにする。
CSSは、サイトのトップばかりではなく、サブディレクトリにも作成できるので、そのCSSをどこに保存するか、トップからの相対URLを入力するフィールドも作っておく。
また、一度アップロードしたものも、再度読み込んで修正できるようにしておく。そのためには、CSSを編集する前のメニューページが必要で、そこで、新規に作るか、既に登録されているものを編集するかを選択する。いずれの場合も相対URLを指定する必要がある。
そのメニューから呼び出されるCGIファイルは同一だが、新規の場合と再編集の場合で、処理を切り替える。新規の場合は、テキストエリアは白紙のままで、表示し、再編集の場合は、そのURLのところにあるファイルを読み込み、それをテキストエリアに入れて編集フィールドを表示する。
そうして、新規作成あるいは編集が終わったら、送信ボタンを押す。
