公開サイトにどのCMSが使われているか見分ける方法ablogcmsMovableTypeSOYCMSWordPressフリーになってからご無沙汰していたので、久しぶりに前の勤め先にご挨拶をしてきました。そのときに、私の後任の制作の人にこんな質問をされました。実務でやっていると、使用されているCMSを調べたいという場面はけっこうあります。CMSベースと思われるのに精密なデザインのサイトに出会ったときとか、新規案件の相談を受けたものの、現状サイトにどのCMSが使われているのか聞かされていない場合などです。CMSに絞ってまとめてみます。大きな画像をCMSにアップしたときのことを、考えたことはあるかいablogcmsMovableType写真SOYCMSWordPressネットをしているとよくある経験。美しい写真がたくさん掲載されているブログを見に行って、何気なく記事中のサムネイルをクリックしたら、ものすごく大きな原寸写真が表示された...最近の光回線に慣れっこで、ネットの経験が浅い人は「大きな画像をアップすると読み込みに時間がかかる」ことを理解できません。「更新担当者がデジカメ写真を原寸サイズでアップしてしまう」という問題は、なかなか解決できないでいます。その場合はWebサービスや画像縮小ソフトの存在を教えるのですが、CMSの操作の他に覚えなければならないことが増えると、やっぱりストレスになるようです。私が扱っているCMSに高解像度画像をアップした場合、どうなるかを調べてみました。MovableTypeクリック後の画像は、原寸ママで表示されます。三ですが「LightBoxプラグイン」を入れると、クリック後の限界値も指定可能になるらしいです。LightBoxプラグイン(改良版)。Online次回の案件から標準で入れようと心に誓う私でした。カスタムフィールドにすれば、最大サイズをmt:AssetThumbnailURLタグで固定してしまうことができます。大規模案件などでこのような問題を出したくない場合は、本文に自由に画像を貼らせるのでなく、カスタムフィールドでの計画的な構築を検討した方が良いでしょう。WordPressWordPressも原寸ママです。↓↓↓↓クリック注意まだ調べていませんが、シェアの高いCMSですから、限界値を管理するプラグインが出ていそうです。cmsをプッシュしている理由のひとつに、ユーザーのことを考えた細かい投稿画面設定ができる点があります。cmsはクリック後の限界値をデフォルトで管理でき、PC用・携帯用で別途設定可能です。モーダルポップアップも自動で行われます。これが私にとって最大のネックだったのですが、バージョン2ベータでは、アップロード後に大・中・小の3サイズのサムネイルを作成するようになりました。クリック後の画像へのリンクはやっぱり原寸サイズなのですが、開発元が私のTwitterのつぶやきを聞いて対応を検討してくれるそうなので、次のバージョンでは限界値が実装されるかもしれません。Joomla!最近改めて勉強をはじめた、中0大規模案件向けのCMSです。海外でシェアが大きいので期待していたのですが...Joomla!は初期状態では画像の自動縮小もできません。本文欄に巨大な写真がそのまんま貼り付けられてしまいました。TinyMCEをエディタに採用してる時点でだめだろJK...どうもJoomla!は、有志のプラグインを組み合わせることで真価を発揮するタイプらしく、いくつか公開されている画像管理プラグインを試す必要がありそうです。WordPressと同様に、バージョンアップ後の不具合の可能性などを視野に入れなければいけないのは悩ましいところです。Jimdo無料で開設でき、直感的なUIで更新できるレンタルCMSです。機能的には他のCMSと比べるとシンプルですが、画像をアップしたときの限界値がちゃんと指定されています。クリック後の画像サイズは1024ピクセル×786ピクセルとなります。実際に↓↓↓↓このページでやっているので参考にしてください。デジカメの超巨大画像をアップしたらどうなるのかそんなこんなで、開発元のみなさんには重箱の隅を突くような話で申し訳ないのですが。クライアントはCMSに関して、特に画像を絡めたレイアウトに期待を持っているようなので、レンタルブログからは一歩進んだ機能を期待したいところです。cmsは画像を「中央寄せ」にしたときに画像の左右までリンク範囲が広がってしまったりもしません。WordPressの場合は制作側が中央寄せの場合のCSSを指定するのですが、自動出力されるタグの関係で、画像幅にぴったり添った状態で中央に寄せることができないのです。cmsの場合、インラインスタイルで画像幅が入るので、制作側が特に何もしなくてもその問題を回避してくれます。CMSですが、私が本サイトを置いているエックスサーバーは動作環境を満たしていませんでした。会社に要望を出しても、個別対応は承っておりません、のつれない返事。CMSをインストールする」という検証記事を書いたのが数か月前。インストールまでは成功したのですが、管理画面の不具合が直らず断念していました。CMSが、先月の1.2.6へのバージョンアップで、ついにエックスサーバーでも正常に動作するようになりました!インストーラーなし・SQLite版で基本的な動作を確認しています。開発の皆様、ありがとうございます。設置手順は以前書いた記事と変わりませんが、不具合を回避する作業がひとつ増えます。CMSフォーラムのスレッドを更新していますので、詳細はこちらをご参照ください。エックスサーバー(X20)にインストールする方法についてまた、正常に動くようになったとはいえ「動作環境を満たしていないサーバーに強引に設置している」という状況は変わりません。設置する場合は、使用予定の機能・プラグインをチェックしなおしてくださいね。CMSは、静的コンテンツの動的化に適したシステムですが、サイトの新着情報には下の画像のように「特定の記事にだけアイコンを付ける」というものがよくあります。CMSで構築するには、カスタムフィールドとPHPのif文を利用します。CMSの良さを残したまま割と簡単にできるので、試してみてください。※サンプルコードには、読みやすいように改行やインデントを入れています。実際に出力されるコードが冗長になるので、動作を確認したら改行を詰めるなどした方が良いと思います。CMSを組み込みます。<h3>要素内に更新日付と、「重要な記事」を知らせるアイコンが入っています。CMSの管理画面に入り、「カスタムフィールドプラグイン」を有効にします。記事を書いている時点(1.25a)以前のバージョンの場合は、「テンプレート内でPHPスクリプトを有効にする」ための環境ファイル書き換えも必要ですが、旧バージョンにはセキュリティホールがあるため、最新版にアップグレードしてください。カスタムフィールドの設定カスタムフィールドで「チェックボックス」を新規作成します。下の画面の通り、「高度な設定」の全ての項目を空にします。「ニュース」の記事を書くときだけ指定できるように、ラベルの関連付けもしておきます。設定が終わったら、記事を書いてみます。下の画像のようにチェックボックスが出てくればOKです。チェックを入れている記事と、入れていない記事を書いてください。CMSのブロックタグで囲み、日付を出すタグを書き込みます。ブロックタグ、エントリータグについては、公式サイトのマニュアル「よく使う項目」を参考にしてください。日付を出す「cms:id="create_date"」は、アイコンも含めてまるっと囲みます。CMSの標準である「属性値に書く方法」を利用しないことです。下のような書き方も同じ意味を持ちますが、この書き方だと<h3>要素の中身をそっくり置き換える動作になるので、あとで<h3>の中にPHPを書いた時にエラーになってしまいます。2009年8月20日(記事本文がつづく)代替として用意されている、コメントで囲む方法を選んでください。PHPで記事情報を取得するには記事を表示する「block:id」「b_block:id」の内部では、「$[idに指定した名前]」という連想配列に、cms:idをキーとした全ての記事データが格納されています。以下のように書くと記事ごとに配列の内容がずららっと出てきます。「block:id="news"」内のカスタムフィールド「important」をPHPの変数$hogeに入れるには、以下のようにスクリプトを書きます。カスタムフィールドのチェックボックスの場合は、チェックを入れたときは「フィールド名」がそのまま入り、入れなかった場合は空になります。先程の例の場合だと、チェックを入れていれば$hogeは「重要なお知らせ」になるはずです。PHPの条件分岐を加えるここまでわかったところで、</h3>の前に条件分岐を追加してみましょう。「$news[important]」が空ではないことを条件に、echoでアイコンを出します。functionを使用するとエラーになるので、PHPの平文で書いてください。HTMLでダブルクォーテーションを使用している場合、echo文はシングルクォーテーションで囲んでください。保存してページを確認すると、「重要なお知らせ」にチェックを入れた記事にだけアイコンが出るようになります。CMSの利点は、「オーサリングツールで崩れず編集できる使いやすさ」です。このため、HTMLの表示に影響が出る条件分岐などは、PHPで対応することになります。それを踏まえて、カスタマイズするときも本来のHTMLを生かす方向でできるだけシンプルにした方がいいし、条件分岐が予想される場合は納品後の改修作業も視野に入れた方が良いと思います。今回のサンプルは、ローカル環境でのブラウザプレビューではアイコンの部分のコードが見えてしまいますが、PHP構文を解釈できるDreamweaverなら問題なく表示できます。?>を一時的にコメントアウトしてください。条件分岐を行う場所が、記事タイトルだったりすると、もう少し難しくなります。それについてはまた後日記事にします。いうページがあります。CMSは、このようなテーブルや、リストを使ったコンテンツの構築にとても適しています。CMSを触っていない方は、Dreamweaverとの親和性が高いといわれてもピンと来ないと思います。Dreamweaverを使ったやや複雑なカスタマイズ手順について詳しく解説します。※あくまでカスタマイズの一例です。基本的な手順として参考にしてください。CMS側で「サイト」を作り、Dreamweaver側でも「サイトの設定」で公開ページのルートへ接続できるようにしておかなければいけません。どちらも基本的な操作なので、ここでは割愛します。CMS側では「カスタムフィールドプラグイン」「テンプレート同期プラグイン」を有効にしておきます。どちらも基本パックに同梱されていて、サイト管理画面からすぐ有効にできます。静的ページを作るDreamweaverで普通の制作と同様に、商品一覧のページを作ります。既存ページを改造する場合はそのまま使っても問題ありませんが、インデントだけでもきちんと整形した方が、あとの独自タグ入れ込みが楽です。テーブルを見ながらどこをラベルとして扱うかどこを記事タイトル・本文として扱うかどこをカスタムフィールドとして扱うかの三点を考えます。これはこの段階までに決めておかなければいけません...というより、実務の構築では作業を始める前からちゃんと考えますw「ラベル」は、MT・WP的に言うとカテゴリーやタグのことです。説明文が本文、金額と容量がカスタムフィールドになります。慣れてくれば、この段階でいきなり8.の独自タグを書く作業をしてしまって問題ありません。実際、私は先に独自タグを書いてから、書き込んだIDを元にカスタムフィールドを作っています。CMSの管理画面の設定をしていきます。CMSでいちばん最初に作成しなければならないのは、「ラベル」です。これがないと、今後の設定がスムーズにできません。さっき決めた通りのラベルを作っていきます。MovableTypeのカテゴリー等とは異なり、ベースネームの設定は必要ありません。後で混乱しないよう、「商品:」という共通の接頭語は付けておきます。カスタムフィールドの設定をする次に、「カスタムフィールドプラグイン」の画面に移動し、追加の入力項目を作ります。タイプは、文字を入力するだけなので「一行テキスト」としています。ここは投稿画面で表示する「フィールド名」の他に、テンプレートに絡む「ID」の入力が必要です。IDに日本語が使えるかどうかはわかりませんが、フィールド名との差別化もあるし、英数字でいいと思います。IDは後で使うので、全部メモしておきます。左の写真は完成した状態の一覧なのですが、「煮豆」や「豆腐」で別々のカスタムフィールドを作っているため、項目2×ラベル4=8つもあります。「記事投稿時に特定のラベルを選択したときだけ、この項目を表示する」というオプションを利用するためです。先述したように、例のサイトには商品一覧とは別に「新着情報」のラベルがあります。新着情報を書くときにも価格や容量の欄が出てきてしまうと、更新担当者が混乱してしまいます。煮豆のときは煮豆の、豆腐のときは豆腐の項目をあらかじめ用意するのです。このオプションは、表右端の「高度な設定」をクリックし、「ラベルとの関連付け」で有効にします。「高度な設定」では、項目の初期値・空のときの値も入れておけます。「オープン価格」などと設定しておきます。ラベルの複数選択ができれば、作るカスタムフィールドは2つで済むんですよね...バージョンアップに期待したいところです。補足:MT・WPはブログベースなので、現時点ではカテゴリーごとにカスタムフィールドを切り替える機能はありません。プラグインがあるかもしれませんが、実務では安定性を重視するため、有志に頼るプラグインは多用できないのです。動作確認用の記事を書く5.と6.は、順不同で構いません。ここまでの段階で、投稿画面が完成したので記事をいくつか書きます。この例ではひとつしか書いていませんが、カスタマイズに慣れていない方は各ラベル2~3個くらい書くと間違いがありません。各ラベルにチェックを入れたときだけカスタムフィールドが出てくるか、一応確認してください。新規ページを作る商品一覧用のページを作ります。ここの例では、ファイル名を「ccc/index.html」にしています。ページの種類には「標準ページ」と「ブログページ」があり、一度作ると変更ができないため、悩むところです。時系列でアーカイブする必要があるコンテンツ更新担当者に自由にカテゴリー追加・削除をさせたいコンテンツ本文と追記を分割したいコンテンツコメント・トラックバックが必要なコンテンツであれば、ブログページでなければいけません。新着情報であれば、ブログページが良いです。ぶっちゃけ全部ブログページでも問題ないぽいですが。この例では、記事分類がラベルに依存しており、1ページしか必要ないため、標準ページとして作ります。制作中のサイトであれば、いきなり「公開」にしてしまっていいと思います。title要素の設定だけ、忘れがちなので気を付けてください。テンプレートをエクスポートするページを作成したら、「テンプレート同期プラグイン」の画面に入って、テンプレートを静的ファイルとして書き出します。テンプレートは、サイトルート内の「export」フォルダに「5_ccc_index_html.html」などというファイル名が付いて書き出されます。このファイル名をDreamweaverで接続して確認したら、2.で作った静的ページを「複製」して、「書き出されたテンプレートと同じ名前」を付けます。これに独自タグを書き込んでいきます。ここでは念のため元のHTMLを残していますが、慣れてきたらファイルを複製せずindex.htmlに独自タグを埋め込んでいってもいいと思います。この場合は、9.でアップロードしてからサーバー上でファイル名を変更します。独自タグを書き込んでも、Dreamweaverへの表示の影響はありません。独自タグを書き込むここでやっと、HTMLに独自タグを書き込みます。独自タグの書き方についてはここでは特に説明しませんが、スクリーンショットを見ていただければわかると思います。表の最初の一列のみブロックタグ・属性を書き込んで、あとは非表示タグでまるっと囲んでおきます。タグの種類は少ないので、スニペットを登録しておくといいんじゃないでしょうか。今回の例の場合は「商品種別ごとに整理して表示する」構造なので、ブロックタグをコピー・ペーストで増やして、種別ごとに合計4ブロック作ります。ブロックIDはそれぞれ変えなければいけません。カスタムフィールドのIDも、さっきメモしたものをそれぞれ書き込みます。独自タグを書き込んだHTMLをアップロードできたファイルを、さっきの「export」フォルダに投げ込んで上書きします。アップロードは「PUT」ではありません。PUTだと「ccc」フォルダができてしまいます。左の写真のように、exportフォルダにカーソルが接するように、直接ドラッグしてください。「テンプレート同期プラグイン」の画面で、テンプレートを読み込んだら...「ccc/index.html」にアクセスして、ページがちゃんと表示されているか確認します。ローカルとサーバーのファイル構造が同じであれば画像やCSSのリンクは切れないはずですが、階層が変わる場合はフルパスで書いた方が無難かもしれません。ブロックの設定をするさっきのページを見てみると、全ていちばん最初の記事しか表示されていません。ラベルごとに分類されていません。この設定は、管理画面の「ページのブロック設定」で行います。ブロックタグに間違いがなければ、テンプレート編集画面の「ブロック」タブを切り替えたときに一覧ができているはずなので、それぞれのブロックとラベルを関連付けます。これについては、公式のマニュアルを参照してください。MT・WPに慣れている人は、記事絞り込みのトリガーをテンプレート側で設定しないことに違和感を感じるかもしれません。MovableTypeだったらこう書けばいいんじゃね?と思うはずです。</mt:Entries>この辺りは一長一短ですが、トリガーを管理画面側で制御することで、HTMLの方に書き込む独自タグがシンプルになり、他のサイトにコピペで使い回しやすくなるという利点があると思います。cmsもこれに近い仕様になっているようです。記事を追加しながら調整するあとは、残りの記事を追加しながら実際の公開ページの表示をチェックしていきます。テーブルのセル幅が足りなくて改行されていないかとか、ラベルの関連付けが間違っていないかなど。ここで、記事の順番が「逆順」になっていることに気付きました。商品一覧の場合は任意で順番を変えるか、昇順の方がいいはずです。CMSはバージョン1.2.5aの段階では並び順を昇順にすることはできないようなので、記事一覧の画面で手動で順番を変えることにしました。実際のCMSカスタマイズでは、昇順並び替えはよく使います。ブロック設定のところでできるようになって欲しいところです。CMSのカスタマイズの流れはこんなところです。細かく手順を書いているので長そうに見えますが、カスタムフィールドの設定が割と楽なので、慣れればMovableTypeよりやや短い作業量というところです。何より、後からテンプレートをDreamweaverで編集しても崩れないので「とりあえず現状サイトで動的にして、検索エンジンに情報が行き渡ってから細かいデザイン改修を行う」という二段階の改修が容易になります。「カスタムフィールドの内容によってHTMLの出力を切り替える」などの、いわゆる「if文」は現状ではPHPで対応しなければいけませんが、うまく利用すれば予算や案件に合わせた、柔軟な構築が可能になると思います。結婚のご報告とお知らせ。