ECWorks Blog » テンプレート

【WP】明日のために学習中

MASA-P — Thu, 28 May 2009 07:12:57 +0000

超久しぶりにWordPressの話なんかを。

会社作るとかもう言ってしまったので後に引けないのですが、その業務の中で、WordPressを使った構築サービスなんかもやっていこうと考えています。
で、テーマなんかパリパリっと作れるようになっていないといけないわけで、本当に今頃なんですけど、再び学習しております。

その中で非常に困っていること…
いや、ぶっちゃけですね、皆さん本当にどうやってデザインをしてるんですかね。

例えばですね、WP標準のテーマをDreamweaverでいじるとします。色を変えたいとか、画像を変えたいとかは、チョロチョロっと修正することは出来るかもしれませんが、メニューの形をごっそり変えるとか、そういったのをDreamweaver上で視覚的には修正できないんですよね。テンプレート内はPHPタグで動的にリンクを作っていますから、スタイルシートの読み込みなんかこけるわけです。タグ打ちはテキストエディタで大丈夫ですけど、スタイルシートの編集と確認はやっぱりツール使わないと。皆さんいちいちリンクをPHPで置き換えたりしているんでしょうか？　それとも、一度サーバに上げて、実際にWPを動かして確認…　てな感じなのでしょうか？

自分のサイトとか、普通に公開するようなテーマでしたら、一度作ってしまえばおしまいなので、そんなことをあまり考えなくても良いかもしれませんが、今回やろうとしているのは、ある程度作ったベースをお客様向けに部分的にカスタマイズして納品する形をとろうとしているため、いちいち置き換えなどやっていられないのですよね。こういったやり方はそんなに特別ではないと思うのですが、それに対する、例えば有効なツールなど無いのが逆に不思議でして…

もしあるのでしたらそれを是非使いたいのですが、無いならちょっと放置気味の「Tplcutter」のバージョンアップを優先しないといけないのかも…　現在のバージョンでも加工は出来なくはないのですが、パスの置き換えだったりとかそういうのは出来ないので、結局自動化は出来ないんですよね。
かといってKtai Libraryを放置することも出来ないので、なかなか困っています。

それから、これは上記とは全く関係ない話なのですが、WordPressはPDOを使うことでSQLiteが使えるのですね！　wordpress.orgからプラグインをダウンロードしてみましたが、同じようにPostgreSQL化がもしかしたら出来るのかも。
軽～くソースを眺めてみたのですが、基本的にはスキーマのパッチとPDOのラッピングで、ソース量もそれほどではないのでそんなに難易度は高くないのかも。添付ドキュメントにも、他のDBをサポートしかけているところがありますが、まあ実体はないためにこいつを拡張していくしかないけど…でも、作者側で対応してくれるのが一番いいなーみたいな。まあこっちは余力が合ったらチャレンジしてみたいなとは思いますが、ちょっと時間取れそうにもないです。

なんか「wordpress-pg」とかいう、wpの改造版が公開されているみたいですが、これはかなり古いものっぽいですね。

話を戻しますと、国内シェア的にはMTからWPに流れてきているのは確かに実感しますが、実践的な、特にデザイン製作に関してのドキュメントや書籍はまだまだ少ないですね。この辺がWPの今後の課題なのかなぁ…

【SmartyView】DB内のTplを読み込みSmartyに適用する方法を紹介されています

MASA-P — Thu, 30 Apr 2009 03:44:54 +0000

下記ブログで、SmartyViewをベースに、DB中にあらかじめ格納したTplを読み込んでSmartyに適用する手法を紹介されています。

▼kaz_29@はてな：CakePHPでテンプレートにDBを使用する方法
http://d.hatena.ne.jp/kaz_29/20090428/1240929093

このアイデアは面白いですね！
例えば規模の大きなブログサービスとかを構築する場合、WEBサーバを複数台で並列させる場合を想定しなければならないと思いますが、DBで管理することで簡単にスケール変更が出来たりします。また、DBに任せてしまうことでファイル管理が不要になるので、プログラム側でのデータ管理は楽になりますね。
逆に、DBに置くことでアクセスが遅くなるデメリットは考えられますので、キャッシュの仕組みは必須かも。それさえ解決できれば、メリットは大きいのではないでしょうか？

私も今後、少し大きな規模の案件に着手しそうですので、大変に参考になりました。

【Ktai】PCやiPhoneで携帯のレイアウトを模倣するTips

MASA-P — Thu, 16 Apr 2009 02:54:23 +0000

携帯サイトをiPhoneに対応させたり、デバッグ等で簡易的にPCで携帯サイトを確認したい…　そのような用途はあると思います。今回は、そんな方向けの、Ktai Libraryを用いたTipsをご紹介。

携帯向けサイトをそのままPCやiPhoneで表示すると、大抵はレイアウトが異なって表示されてしまいます。特にiPhoneはひどいもので、場合によっては文字が数pixel位の、もの凄～く見にくい画面になってしまいます。まあ、PCやiPhoneは携帯と比べて高解像度なわけで、仕方のないことなんですけど、これをなんとかしたい…　そんなことを思われている方もいらっしゃると思います。
単純に、divでスクリーンサイズを(width=240で)固定してしまうのも一つのアイデアですが、それですと今度は高解像度な(SB)携帯で見にくいものとなってしまい、うまくありません。

ちなみに、iPhoneの場合は、コンテンツの横幅をオートで検出して、内容の少ないものは拡大されるのですが、そうでないものは最大980pixelとのことなので、長文が含まれているコンテンツは980pixel目一杯縮小されてしまいます。divで囲う方法で一見解決しそうな感じですが、縦方向に長い場合も縮小されるようで、確実な方法ではありません。
ただ、この件については解決する方法があり、metaタグで横方向のサイズを決めることが出来ます。

というわけで、上記を加味した上で、各端末に対応するための手法をご紹介。
ビューテンプレート(layout)はおおむねこんな感じです。
基本はこの方法でカバーできるかと思います。





is_iphone()){
?>
<?php $title_for_layout; ?>


is_ktai()){
?>




ここに内容を書きます。




is_ktai()){
?>

宣伝を兼ねて、Tplcutter形式で公開してみたり(笑)。
上記例では、iPhone用メタタグの数値が260となっているのですが、240だとうまくいかなくて、いろいろ調整しての数値です。
多少レガシーなhtmlタグが混じっていますが、これはcssに置き換えてもよろしいかと。

まあこんな感じで、携帯サイト製作の参考になれば。

【SmartyView】SmartyView1.2.1.8004公開！

MASA-P — Wed, 25 Feb 2009 05:37:46 +0000

お待たせいたしました！
CakePHP1.2 Stableに対応した、SmartyViewを公開いたします。

今回から、SmartyViewについては専用ページにてご案内することにしました。
詳細はこちらにてご確認ください。

【Tplcutter】開発経過報告(その１)

MASA-P — Sat, 17 Jan 2009 22:00:41 +0000

Tplcutterは、とりあえず開発が進んでおります。
一応経過報告など。

開発バージョンは、繰り返しになりますが「革命」とありますように、機能的に大きな変更をしております。最初は従来バージョンをベースに開発していたのですが、せっかくなので「一から」作り直すことにしました。ソースコードははっきり言って別物になっていて、いくつかの技術は転用しますが、たとえばパース部分は新しいアルゴリズムで動いております。

そんなわけで、現在はメインシステムのコードはまだほとんど組み上がっていない状態で、主要技術のテストコード状態なのですが、パースについては動くものができあがりつつあります。現状仕様を満たしたタグをきっちり抜き出せるようになり、オプションパラメータも良好に得られるようになりました。
一番心配していた部分がうまく動くようになったので、とりあえず今回の目玉については満たせそうですが、次の課題は「抜き出したオプションを利用して加工する」部分になります。

コードを書いていく上で、いくつかさらに新機能を盛り込むことにしました。
まずは、値を定義できる「define」コマンドがあるのですが、これに「スコープ」を付けることにしました。現バージョンも「ピース」機能でdefineに相当する事が出来るのですが、ピースで定義したものは同app内ですべてのファイルに対して有効になっていて、局所的な指定が出来ませんでした。なので、スコープを付けてほかに影響しないような設定が出来るようにすれば、より解りやすいテンプレートが作れるのではないかと思います。現時点では「public(app内ですべてに有効)」「protected(ファイル内で有効)」「private(contentなどのブロック内で有効)」の３種類にしようかと考えています。app外オプションはちょっと危険だと思いますので、現在は考えないようにしていますが、技術的には出来ないことはないと思います。
それから「include」で外部ファイルの読み込みに対応。PHPコマンドを使っても同様の動きは出来ますが、こちらは「ファイル加工時に組み込みしてしまう」ため、生成物の実行時に無駄な処理ステップがなくなるメリットがある点、そして「デザイナ側でPHPを意識しないテンプレートが組める」当初のコンセプトに沿える点があります。
さらに、PHP変数挿入コマンドも追加します。これはSmartyの「{$hoge}」に相当するコマンドです。ぶっちゃけPHPタグで書けば全く不要なコマンドなのですが、これもデザイナー向けであることと可視化できることにメリットがあります。ボックス指定が可能で、ボックス内にダミー値を入れておくことで編集中のテストを容易にします。なお、Smartyのように条件分岐とか繰り返しとか欲しくなるかもしれませんが、今のところはそれ以上のPHPエイリアス系のコマンドは設けないつもりです(defineで工夫することで似たようなことは出来ると思います)。

最後に、これは別の意味で重要かもしれませんが、本バージョンを正式な「1.00」バージョンにしようかと考えています。あまりにも機能が変わってしまったため、既にマイナーチェンジの域を超えてしまったからです。そして、以前から思っていた「CakePHPだけでなく、あらゆるプラットホームでも使える」柔軟な設定が、本バージョンで満たせそうだからです。0.2.0でそれに近づいてはいましたが、現にWordPressでは「ヘッダ・フッタ」が切り出せないために使えなかったですし、まだまだ汎用ではありませんでした。まあ、まだ「システム固有の動作」に対応できる仕組みになっているか、検証が出来ていませんが、出来ていなかった場合を想定していくつかの対応も考えていますので、たぶん大丈夫だと思います。

そんなわけで、夢もふくらみつつあるTplcutterですが、開発自体は進んでいますので、気長にお待ちいただけると。公開は２月中をめどにしていますが、正直自信はないです。
また、今回は完成間近になりましたらβバージョンを公開して、正式リリース前に、皆さんに若干テストしていただきたいと思っています。その際には是非ご協力いただけますと幸いです。

【Tplcutter】ライバル出現！

MASA-P — Wed, 31 Dec 2008 06:17:00 +0000

やはり海外から出てしまいましたか…

Tplcutterと似たようなコンセプトのテンプレート加工ツールとして、「Query Templates」というものが出たようです。そして、それを利用したCakePHPのTipsがBakeryに公開されたようです。

▼テンプレート加工ツール: QueryTemplates
http://cakephp.jp/modules/newbb/viewtopic.php?topic_id=1665&forum=3&post_id=3883#forumpost3883

まあ私がボサッとしていたからだとは思うし、だいたいアイデアというものは自分が思いついたら同時に何人もの人が思いつくそうなので、ごく自然な事だとは思うのですが。

ただ、やはりQueryTemplatesはプログラマー寄りというのか、理解するのは難しそうですね。駆動スクリプトを自作しないとならないみたいですし。
Tplcutterのコンセプトは「コマンド一発」「PHPを知らないデザイナが理解できる」「編集にツールを選ばない」点ですので、その点ではTplcutterは十分に優位に立っていると思いたい。

思いたい(大汗)。

バージョンアップを急ぐことは勿論なのですが、やはり「国際化」してBakeryに上げた方が良さそうですね。頑張らないと。

【Tplcutter】タグ仕様を決定！

MASA-P — Sat, 20 Dec 2008 19:39:58 +0000

先ほど某所にある「びっくりドンキー」にて、チーズバーグディッシュ300gを食いながらTplcutterのタグ仕様を決定してきました。

簡単に、今回搭載する機能概要を挙げますと…

レイアウトの定義(ファイルへ書き出し/メモリ記憶/破棄。各ビューにコピー)
レイアウトの呼び出し(メモリ記憶から/ファイルから。各ビューにコピー。新機能！)
ヘッダ/フッタの定義(レイアウトを分離したい場合に使用。各ビューにコピー。新機能！)
ヘッダ・フッタの呼び出し(メモリ記憶から/ファイルから。各ビューにコピー。新機能！)
ビューの定義
エレメントの定義
ピースの定義(範囲指定をメモリに記憶。0.2.0からの機能)
文字列の定義(defineライクなメモリ記憶。新機能！)
メモリ記憶から書き出し(タグを置換/範囲指定を置換)
領域消去（新機能！）

の機能を(タグ機能として)実装します。

更に、今まで放置状態だったCSSファイルやjsファイルに関しても今回メスを入れます。
今まではCSSやjsはTplcutterの処理対象外でしたが、0.3.0からは一部タグ機能(ピースなどのコピー置換機能など)についての処理を行います。また、Tplcutterタグは基本的にHTMLのコメントタグを利用したもののため、CSS/js内では使用不可能でしたが、該当タグについては「/* ～ */」や「//」も使えるようになります。これによって、CSS/jsファイル内で可変したかった値や、htmlのインライン内、PHPスクリプト内での置換をデザインツールで編集を損なうことなく表現することが出来るようになります。

今回の目玉は、何と言っても「コピー・置換機能」を「CSSやjs内でも使用できる」点ですかね。
「可変したい部分だけど編集用にダミー値を持たせたい」場合に本機能が大活躍します。
以前の記事でも書きましたが、今回のバージョンのテーマは「革命」です。
名ばかりでない「超便利!!」なツールを提供できるよう、頑張りたいと思います。

ちなみに、設定関連についてはこれから練るのですが、おそらく若干の変更はあるものの、こちらについては現状とあまり変わらないものになるかと思います。

【Tplcutter】Tplcutter0.2.0公開いたします

MASA-P — Wed, 17 Sep 2008 16:51:40 +0000

新バージョンのTplcutter バージョン0.2.0を公開いたします。

先日指摘しましたelement関連の不具合の修正と、新機能である「ピース」機能の実装をいたしました。

「ピース」機能を簡単に説明いたしますと、エレメントは「繰り返し流用したい部分をあらかじめファイルに書き出しておき、それを呼び出す」機能であるのに対し、「繰り返し流用したい部分をあらかじめメモリに蓄積しておき、加工時に指定の場所にコピーする」機能を提供します。こうすることで、実際の表示の際に余分な処理を抑えることが出来、展開速度の向上を見込むことが出来ます。

なお、ピースは同一アプリケーション内であれば、テンプレート内のどの場所に記述しても有効に働きます。つまり、指定した領域のあるテンプレートファイルと異なったテンプレートファイル内でも呼び出すことが出来ます。

使用例はサンプルファイル内にありますので、そちらをご覧いただけますと幸いです。

とりあえず使えるツールになったっぽいので、よほどのバグがない限り、しばらくバージョンアップは控えることにします。まだいくつかやりたい機能はありますが、それは現在構築している新企画サイトの作成が終わってからにしたいと思います。

*************************************************
テンプレート加工ツール「Tplcutter」簡易説明書
Copyright (C) 2008 ECWorks ( http://ecw.seesaa.net/ )
*************************************************
　設置方法など詳細につきましては、アーカイブ内のドキュメントをお読みください。

————————————————–
■はじめに
————————————————–

　現在主流になりつつある、フレームワークを用いたWEBアプリ開発では、HTMLファイルやPHPファイルを直接表示する手法は少なくなり、Viewシステムを介してテンプレートファイルを読み込み、それを加工した後に表示する手法が一般的となりました。
　ところが、テンプレートファイルは通常外部から見えない領域に格納されるため、デザイン編集作業の際にテンプレートファイル内に記述する画像など表示物等のリンクが実際のリンクと異なってしまうため、編集が困難になるという問題が発生します。

　そこで、デザイン時では普通のHTMLを編集するような感覚でデータを作成し、それらテンプレートとその他ファイルを適切な位置に配置できるようなツールが実現できないかと考え、本ツール「Tplcutter」を開発しました。
　デザイナー側から見ますと、サイト制作ツール等で編集可能なディレクトリ構造のまま作業し、それをそのままプログラマー側に受け渡せます。また、テンプレートは読み込んで加工したものを別のディレクトリに作成し、その他表示物はコピーしますので現在稼働しているサイトのデザインを崩すことなく直接編集することも可能です。
　そして、最大のメリットとしては、コマンド一発で全てのテンプレートを更新することにあります。デザイナーによって制作されたテンプレートを適用するためには、これらファイルを加工したり、異なるディレクトリに配置したりする必要がありました。デザインが変更されるたびにこの作業を行わなければならないため、無駄な手間が発生します。本ツールはこれら作業を自動化しますので、時間の節約や更新間違い等による不具合の発生を極力防ぐことが出来ます。
　本ツールは、もともとCakePHPフレームワークにて利用できるように開発したのですが、SmartyやSynfony等、ほかのフレームワーク・テンプレートシステムでも利用できるように、PHPコマンドラインでも利用できるよう拡張いたしました。ini形式ファイルにて細かな設定が出来ますので、幅広いシステムで使用することができます。

————————————————–
■動作環境
————————————————–

　本ツールは、CakePHP1.2.xのCakeコンソール、もしくはPHP4/5のコマンドラインで使用することが出来ます。

　CakePHPにてテンプレートを利用する場合は、Cakeコンソールで使用することで、ほぼ無設定でCakePHP向けのテンプレート加工をします。
　同様に、PHPのコマンドラインから利用する場合は、ほぼ無設定でPHP向けのテンプレート加工をします。

　どちらの方法でも、ini形式ファイルにて設定することで、異なるテンプレートシステム向けの加工をすることも可能です。

————————————————–
■ご利用条件
————————————————–

　本ツール一式は使用もしくは再配布について、無料でご利用いただけます。
　本ツールおよびアーカイブ内に含まれる全ての著作物に対する権利はECWorksが保有しており、GNU一般公衆利用許諾契約に基づいて配布しております。再配布・改変等は契約の範囲内で自由に行うことが出来ます。詳しくは、添付のGNU一般公衆利用許諾契約書をお読みください。
　なお、本ツールは一般的な利用において動作を確認しておりますが、ご利用の環境や状況、設定もしくはプログラム上の不具合等により期待と異なる動作をする場合が考えられます。本ツールの利用に対する効果は無保証であり、あらゆる不利益や損害等について、当方は一切の責任をいたしかねますので、ご了承いただきますようお願い申し上げます。

▼ダウンロードはこちら
tplcutter-0.2.0.zip