HTML+Ajax←→PHPなWebアプリを効率よく組むにはどうすれば良い？ : つねづね思ふこと

«« 今だからこそアナログテレビを復刻して、平成初期っぽさを満喫するには | 「心が叫びたがっているんだ。」は、冒頭に主人公の父親がきちんと謝っておけばもっと話はすっきりしていた？(ネタバレ) »»

HTML+Ajax←→PHPなWebアプリを効率よく組むにはどうすれば良い？

2015年9月12日

デザイナが作成したHTMLファイルをそのまんま使ってApacheのhttpdocs/httpsdocs上に配置して動作するWebアプリを組みたいが、試行錯誤中。

PHPは、HTML内へ直接プログラムが記載でき、設定によっては実行したらすぐブラウザー上にエラーが表示されるのが好き！

最初に自分が触れたウェブサーバー上で動くスクリプト言語はPerl。
でも、(大昔の話で、今では頓珍漢な話ならすみません)Perlはブラウザーから動作させてみた時に、エラーの出そうなところに print "Content-type: text/html"; とか書かないと、無愛想なCGIエラーが発生して何のことやらサッパリわからない。
当時そんな面倒くさい仕組みにウンザリしていた自分の心をバッチリ捉えました。

CGIスクリプトをデバッグするには？ via kwout

しかしーHTML内にPHPのソースコードを直接入れる作り方というのは、プログラマがデザイナーが上げたデザインを受け取った後、その都度サーバーと連動するコードを差し込んだりとかカスタマイズする必要があるわけで。
プログラマはそうなるとどこからがシステム部分で、どこからがデザイン部分なのか？という作業も含めて格闘することになり、ボトルネックとなって作業量が飛躍的に増加します。

このようなシステムの例として具体的には、(ファンの人すみません) OSCommerce などが挙げられますでしょうか。
※このブログを書くにあたって久々にソースコードを落としてきましたが、2015年9月現在もHTMLとPHPが混在しているのは相変わらずのようでー関係者に合掌。

やっぱソースコードとシステムは分離しせにゃならんよね。
ということで、ウェブアプリを組む際、PHP+Smartyでテンプレートを組み、一部に動的な部分をJavaScript(jQueryを多分に含む)で構築するやり方があります。

PHP Template Engine | Smarty via kwout

しかし自分は、これまた組んでいてしっくり来ない。
これってPerlにHTML::Templateモジュールを組み込んで構築するのとーエラー表示をさせるのに print "Content-type: text/html"; とか書かないで良いだけマシですが、なんか時代が巻き戻ったような？

そう！Smartyがないと、テンプレートだけでHTMLが表示できないのが気に入らない！
しかも動作するにはテンプレートフォルダーに入れる必要があるため、パスが変わってしまうのがイラッとする。
ですので、Smartyがない状態でページを作っていた場合、毎回Smartyのテンプレートとして使えるようパスを書き直すのが嫌だった。
あとSmartyも条件分岐を書きまくると、テンプレートの拡張子をhtmlに直して、単体としてブラウザーから見た時も、ソースがわけわからんようになって結局プログラマがメンテナンスすることになるのも無様で嫌だった。

ですので、Smartyは止め、デザイナが作成したHTMLファイルをそのまんま使ってApacheのhttpdocs/httpsdocs上に配置したい。
制御類は、その上で表面上は全部JavaScriptで制御させて、データベースなどとアクセスする必要がある時はjQueryでいうところの $.ajax() を活用して表示を直す仕組みにしたい！

ということで空き時間を使って、そういう仕組みなウェブアプリの作り方を試行錯誤しています。
しかし、どうもこんな書き方しかできない自分が物足りない。

例えば、自分的に今までのテンプレートシステムを塗り替えそう？で有力株だったAngularJSなんですが、自分の勉強が不足しているせいでうまく使いこなせない。