公開サイトにどのCMSが使われているか見分ける方法

フリーになってからご無沙汰していたので、久しぶりに前の勤め先にご挨拶をしてきました。
そのときに、私の後任の制作の人にこんな質問をされました。

「公開されてるサイトにどんなCMSが使われてるか、一発で見やぶる方法ないすか?」

実務でやっていると、使用されているCMSを調べたいという場面はけっこうあります。
CMSベースと思われるのに精密なデザインのサイトに出会ったときとか、新規案件の相談を受けたものの、現状サイトにどのCMSが使われているのか聞かされていない場合などです。

私が扱ったことがある、MovableType・WordPress・XOOPS・a-blog cms・SOY CMSに絞ってまとめてみます。


投稿者名 うぇびん 投稿日時 2010年12月25日 | Permalink

大きな画像をCMSにアップしたときのことを、考えたことはあるかい

ネットをしているとよくある経験。

美しい写真がたくさん掲載されているブログを見に行って、何気なく記事中のサムネイルをクリックしたら、ものすごく大きな原寸写真が表示された…

最近の光回線に慣れっこで、ネットの経験が浅い人は「大きな画像をアップすると読み込みに時間がかかる」ことを理解できません。

これまで多くのCMSサイトを扱ってきましたが、
更新担当者がデジカメ写真を原寸サイズでアップしてしまう
という問題は、なかなか解決できないでいます。

その場合はWebサービスや画像縮小ソフトの存在を教えるのですが、CMSの操作の他に覚えなければならないことが増えると、やっぱりストレスになるようです。

私が扱っているCMSに高解像度画像をアップした場合、どうなるかを調べてみました。

MovableType

クリック後の画像は、原寸ママで表示されます。
表題の件で相談を受けたのは、MTの案件なので当然ですな… (´ー` 三

ですが「LightBoxプラグイン」を入れると、クリック後の限界値も指定可能になるらしいです。

LightBoxプラグイン(改良版)。 – Junnama Online

次回の案件から標準で入れようと心に誓う私でした。

尚、カスタムフィールドにすれば、最大サイズをmt:AssetThumbnailURLタグで固定してしまうことができます。

大規模案件などでこのような問題を出したくない場合は、本文に自由に画像を貼らせるのでなく、カスタムフィールドでの計画的な構築を検討した方が良いでしょう。

WordPress

WordPressも原寸ママです。↓↓↓↓クリック注意

まだ調べていませんが、シェアの高いCMSですから、限界値を管理するプラグインが出ていそうです。

a-blog cms

私がa-blog cmsをプッシュしている理由のひとつに、ユーザーのことを考えた細かい投稿画面設定ができる点があります。

a-blog cmsはクリック後の限界値をデフォルトで管理でき、PC用・携帯用で別途設定可能です。
また、モーダルポップアップも自動で行われます。

SOY CMS

初期バージョンでは画像の自動縮小ができなかったSOY CMS。
正直これが私にとって最大のネックだったのですが、バージョン2ベータでは、アップロード後に大・中・小の3サイズのサムネイルを作成するようになりました。

クリック後の画像へのリンクはやっぱり原寸サイズなのですが、開発元が私のTwitterのつぶやきを聞いて対応を検討してくれるそうなので、次のバージョンでは限界値が実装されるかもしれません。

Joomla!

最近改めて勉強をはじめた、中0大規模案件向けのCMSです。
海外でシェアが大きいので期待していたのですが…

Joomla!は初期状態では画像の自動縮小もできません。
本文欄に巨大な写真がそのまんま貼り付けられてしまいました。

TinyMCEをエディタに採用してる時点でだめだろJK…

どうもJoomla!は、有志のプラグインを組み合わせることで真価を発揮するタイプらしく、いくつか公開されている画像管理プラグインを試す必要がありそうです。
WordPressと同様に、バージョンアップ後の不具合の可能性などを視野に入れなければいけないのは悩ましいところです。

Jimdo

無料で開設でき、直感的なUIで更新できるレンタルCMSです。
機能的には他のCMSと比べるとシンプルですが、画像をアップしたときの限界値がちゃんと指定されています。
クリック後の画像サイズは1024ピクセル×786ピクセルとなります。

実際に↓↓↓↓このページでやっているので参考にしてください。

デジカメの超巨大画像をアップしたらどうなるのか


そんなこんなで、開発元のみなさんには重箱の隅を突くような話で申し訳ないのですが。

クライアントはCMSに関して、特に画像を絡めたレイアウトに期待を持っているようなので、レンタルブログからは一歩進んだ機能を期待したいところです。

補足:a-blog cmsのおまけ

地味なことですが、a-blog cmsは画像を「中央寄せ」にしたときに画像の左右までリンク範囲が広がってしまったりもしません。

MovableType・ WordPressの場合は制作側が中央寄せの場合のCSSを指定するのですが、自動出力されるタグの関係で、画像幅にぴったり添った状態で中央に寄せることができないのです。
(display:inline-blockでもだめでした…CSSでできる方法知ってる人がいたら教えてくださいorz)

a-blog cmsの場合、インラインスタイルで画像幅が入るので、制作側が特に何もしなくてもその問題を回避してくれます。


投稿者名 うぇびん 投稿日時 2010年11月14日 | Permalink

エックスサーバーにSOY CMSをインストールする:1.2.6版

X SERVERのみなさま!SOY CMSがエックスサーバーでも使えるようになったソイ!

「WebSite expert」26号でも巻頭特集が組まれ、
イメージキャラ「まめ蔵」も舌好調(夜はツンデレ属性に変化する)のSOY CMSですが、私が本サイトを置いているエックスサーバーは動作環境を満たしていませんでした。

会社に要望を出しても、個別対応は承っておりません、のつれない返事。
それなら無理やり設置してやる!と
エックスサーバーにSOY CMSをインストールする」という検証記事を書いたのが数か月前。
インストールまでは成功したのですが、管理画面の不具合が直らず断念していました。

そんなSOY CMSが、先月の1.2.6へのバージョンアップで、ついにエックスサーバーでも正常に動作するようになりました!
インストーラーなし・SQLite版で基本的な動作を確認しています。
開発の皆様、ありがとうございます。


設置手順は以前書いた記事と変わりませんが、不具合を回避する作業がひとつ増えます。
SOY CMSフォーラムのスレッドを更新していますので、詳細はこちらをご参照ください。

エックスサーバー(X20)にインストールする方法について

また、正常に動くようになったとはいえ「動作環境を満たしていないサーバーに強引に設置している」という状況は変わりません。
設置する場合は、使用予定の機能・プラグインをチェックしなおしてくださいね。


投稿者名 うぇびん 投稿日時 2009年10月22日 | Permalink

SOY CMSのカスタムフィールドを使った条件分岐(1)

SOY CMSは、静的コンテンツの動的化に適したシステムですが、サイトの新着情報には下の画像のように「特定の記事にだけアイコンを付ける」というものがよくあります。

soycustom_1

これをSOY CMSで構築するには、カスタムフィールドとPHPのif文を利用します。
アイコンまわりのカスタマイズは、SOY CMSの良さを残したまま割と簡単にできるので、試してみてください。

※サンプルコードには、読みやすいように改行やインデントを入れています。実際に出力されるコードが冗長になるので、動作を確認したら改行を詰めるなどした方が良いと思います。

元になるHTML

下記のようなHTMLソースに、SOY CMSを組み込みます。
<h3>要素内に更新日付と、「重要な記事」を知らせるアイコンが入っています。

SOY CMS側の設定

SOY CMSの管理画面に入り、「カスタムフィールドプラグイン」を有効にします。

記事を書いている時点(1.25a)以前のバージョンの場合は、「テンプレート内でPHPスクリプトを有効にする」ための環境ファイル書き換えも必要ですが、旧バージョンにはセキュリティホールがあるため、最新版にアップグレードしてください。

カスタムフィールドの設定

カスタムフィールドで「チェックボックス」を新規作成します。
下の画面の通り、「高度な設定」の全ての項目を空にします。「ニュース」の記事を書くときだけ指定できるように、ラベルの関連付けもしておきます。

soycustom_2

設定が終わったら、記事を書いてみます。下の画像のようにチェックボックスが出てくればOKです。
チェックを入れている記事と、入れていない記事を書いてください。

soycustom_3

独自タグを書く

記事部分をSOY CMSのブロックタグで囲み、日付を出すタグを書き込みます。
ブロックタグ、エントリータグについては、公式サイトのマニュアル「よく使う項目」を参考にしてください。
日付を出す「cms:id="create_date"」は、アイコンも含めてまるっと囲みます。

ここで注意が必要なのは、SOY CMSの標準である「属性値に書く方法」を利用しないことです。
例えば、下のような書き方も同じ意味を持ちますが、この書き方だと<h3>要素の中身をそっくり置き換える動作になるので、あとで<h3>の中にPHPを書いた時にエラーになってしまいます。

代替として用意されている、コメントで囲む方法を選んでください。

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文はシングルクォーテーションで囲んでください。

保存してページを確認すると、「重要なお知らせ」にチェックを入れた記事にだけアイコンが出るようになります。


SOY CMSの利点は、「オーサリングツールで崩れず編集できる使いやすさ」です。このため、HTMLの表示に影響が出る条件分岐などは、PHPで対応することになります。

それを踏まえて、カスタマイズするときも本来のHTMLを生かす方向でできるだけシンプルにした方がいいし、条件分岐が予想される場合は納品後の改修作業も視野に入れた方が良いと思います。

今回のサンプルは、ローカル環境でのブラウザプレビューではアイコンの部分のコードが見えてしまいますが、PHP構文を解釈できるDreamweaverなら問題なく表示できます。
ローカルで確認したいときは、<?php ~ ?>を一時的にコメントアウトしてください。

条件分岐を行う場所が、記事タイトルだったりすると、もう少し難しくなります。
それについてはまた後日記事にします。


投稿者名 うぇびん 投稿日時 2009年09月05日 | Permalink

SOY CMSのDreamweaverを使ったカスタマイズ解説

omame2

私がSOY CMSの検証用に作って公開しているサイトには、「取扱商品一覧」というページがあります。

http://webbing.s41.coreserver.jp/omame/ccc/index.html

SOY CMSは、このようなテーブルや、リストを使ったコンテンツの構築にとても適しています。

SOY CMSを触っていない方は、Dreamweaverとの親和性が高いといわれてもピンと来ないと思います。
Dreamweaverを使ったやや複雑なカスタマイズ手順について詳しく解説します。

※あくまでカスタマイズの一例です。基本的な手順として参考にしてください。

1. 準備

まず、SOY CMS側で「サイト」を作り、Dreamweaver側でも「サイトの設定」で公開ページのルートへ接続できるようにしておかなければいけません。
どちらも基本的な操作なので、ここでは割愛します。

さらに、SOY CMS側では「カスタムフィールドプラグイン」「テンプレート同期プラグイン」を有効にしておきます。どちらも基本パックに同梱されていて、サイト管理画面からすぐ有効にできます。

2. 静的ページを作る

items1

Dreamweaverで普通の制作と同様に、商品一覧のページを作ります。
既存ページを改造する場合はそのまま使っても問題ありませんが、インデントだけでもきちんと整形した方が、あとの独自タグ入れ込みが楽です。

テーブルを見ながら

  • どこをラベルとして扱うか
  • どこを記事タイトル・本文として扱うか
  • どこをカスタムフィールドとして扱うか

の三点を考えます。
これはこの段階までに決めておかなければいけません…というより、実務の構築では作業を始める前からちゃんと考えますw

「ラベル」は、MT・WP的に言うとカテゴリーやタグのことです。
例の場合は、商品種別(煮豆/豆腐…)をラベルとして扱い、
商品名が記事タイトル、
説明文が本文、金額と容量がカスタムフィールドになります。

慣れてくれば、この段階でいきなり8.の独自タグを書く作業をしてしまって問題ありません。
実際、私は先に独自タグを書いてから、書き込んだIDを元にカスタムフィールドを作っています。

3. ラベルの設定をする

items4

静的ページの準備ができて、構成が固まったら、SOY CMSの管理画面の設定をしていきます。

SOY CMSでいちばん最初に作成しなければならないのは、「ラベル」です。
これがないと、今後の設定がスムーズにできません。
さっき決めた通りのラベルを作っていきます。

MovableTypeのカテゴリー等とは異なり、ベースネームの設定は必要ありません。日本語で大丈夫です。
ただし、後で混乱しないよう、「商品:」という共通の接頭語は付けておきます。
(例のサイトの場合は、「新着情報」が既にある状態です)

4. カスタムフィールドの設定をする

次に、「カスタムフィールドプラグイン」の画面に移動し、追加の入力項目を作ります。
タイプは、文字を入力するだけなので「一行テキスト」としています。

ここは投稿画面で表示する「フィールド名」の他に、テンプレートに絡む「ID」の入力が必要です。IDに日本語が使えるかどうかはわかりませんが、フィールド名との差別化もあるし、英数字でいいと思います。
IDは後で使うので、全部メモしておきます

items5

左の写真は完成した状態の一覧なのですが、「煮豆」や「豆腐」で別々のカスタムフィールドを作っているため、項目2×ラベル4=8つもあります。
何故こんな細かいことをするのかというと、
記事投稿時に特定のラベルを選択したときだけ、この項目を表示する
というオプションを利用するためです。

先述したように、例のサイトには商品一覧とは別に「新着情報」のラベルがあります。新着情報を書くときにも価格や容量の欄が出てきてしまうと、更新担当者が混乱してしまいます。
なので、煮豆のときは煮豆の、豆腐のときは豆腐の項目をあらかじめ用意するのです。

items6

このオプションは、表右端の「高度な設定」をクリックし、「ラベルとの関連付け」で有効にします。
「高度な設定」では、項目の初期値・空のときの値も入れておけます。せっかくなので「オープン価格」などと設定しておきます。

ラベルの複数選択ができれば、作るカスタムフィールドは2つで済むんですよね…
バージョンアップに期待したいところです。

補足:
MT・WPはブログベースなので、現時点ではカテゴリーごとにカスタムフィールドを切り替える機能はありません。プラグインがあるかもしれませんが、実務では安定性を重視するため、有志に頼るプラグインは多用できないのです。

5. 動作確認用の記事を書く

items7

5.と6.は、順不同で構いません。

ここまでの段階で、投稿画面が完成したので記事をいくつか書きます。
この例ではひとつしか書いていませんが、カスタマイズに慣れていない方は各ラベル2~3個くらい書くと間違いがありません。

各ラベルにチェックを入れたときだけカスタムフィールドが出てくるか、一応確認してください。

6. 新規ページを作る

items8

商品一覧用のページを作ります。ここの例では、ファイル名を「ccc/index.html」にしています。

ページの種類には「標準ページ」と「ブログページ」があり、一度作ると変更ができないため、悩むところです。
判断基準としては、

  • 時系列でアーカイブする必要があるコンテンツ
  • 更新担当者に自由にカテゴリー追加・削除をさせたいコンテンツ
  • 本文と追記を分割したいコンテンツ
  • コメント・トラックバックが必要なコンテンツ

であれば、ブログページでなければいけません。
新着情報であれば、ブログページが良いです。
ぶっちゃけ全部ブログページでも問題ないぽいですが。

この例では、記事分類がラベルに依存しており、1ページしか必要ないため、標準ページとして作ります。

items9

制作中のサイトであれば、いきなり「公開」にしてしまっていいと思います。
title要素の設定だけ、忘れがちなので気を付けてください。

7. テンプレートをエクスポートする

items10

ページを作成したら、「テンプレート同期プラグイン」の画面に入って、テンプレートを静的ファイルとして書き出します。

テンプレートは、サイトルート内の「export」フォルダに
5_ccc_index_html.html
などというファイル名が付いて書き出されます。

items11

このファイル名をDreamweaverで接続して確認したら、
2.で作った静的ページを「複製」して、「書き出されたテンプレートと同じ名前」を付けます。
これに独自タグを書き込んでいきます。

ここでは念のため元のHTMLを残していますが、慣れてきたらファイルを複製せずindex.htmlに独自タグを埋め込んでいってもいいと思います。この場合は、9.でアップロードしてからサーバー上でファイル名を変更します。
独自タグを書き込んでも、Dreamweaverへの表示の影響はありません。

8. 独自タグを書き込む

items2

ここでやっと、HTMLに独自タグを書き込みます。

独自タグの書き方についてはここでは特に説明しませんが、スクリーンショットを見ていただければわかると思います。
表の最初の一列のみブロックタグ・属性を書き込んで、あとは非表示タグでまるっと囲んでおきます。
タグの種類は少ないので、スニペットを登録しておくといいんじゃないでしょうか。

items3

さらに、今回の例の場合は「商品種別ごとに整理して表示する」構造なので、
ブロックタグをコピー・ペーストで増やして、種別ごとに合計4ブロック作ります。
もちろん、ブロックIDはそれぞれ変えなければいけません。
カスタムフィールドのIDも、さっきメモしたものをそれぞれ書き込みます。

9. 独自タグを書き込んだHTMLをアップロード

items11_2

できたファイルを、さっきの「export」フォルダに投げ込んで上書きします。

アップロードは「PUT」ではありません。PUTだと「ccc」フォルダができてしまいます。
左の写真のように、exportフォルダにカーソルが接するように、直接ドラッグしてください。

items12

「テンプレート同期プラグイン」の画面で、テンプレートを読み込んだら…

items13

「ccc/index.html」にアクセスして、ページがちゃんと表示されているか確認します。

ローカルとサーバーのファイル構造が同じであれば画像やCSSのリンクは切れないはずですが、階層が変わる場合はフルパスで書いた方が無難かもしれません。

10. ブロックの設定をする

items14

さっきのページを見てみると、全ていちばん最初の記事しか表示されていません。
しかもラベルごとに分類されていません。
この設定は、管理画面の「ページのブロック設定」で行います。

ブロックタグに間違いがなければ、テンプレート編集画面の「ブロック」タブを切り替えたときに一覧ができているはずなので、それぞれのブロックとラベルを関連付けます。
これについては、公式のマニュアルを参照してください。

MT・WPに慣れている人は、記事絞り込みのトリガーをテンプレート側で設定しないことに違和感を感じるかもしれません。
MovableTypeだったらこう書けばいいんじゃね?と思うはずです。

<mt:Entries category="煮豆" limit="999"> ~  </mt:Entries>

この辺りは一長一短ですが、トリガーを管理画面側で制御することで、HTMLの方に書き込む独自タグがシンプルになり、他のサイトにコピペで使い回しやすくなるという利点があると思います。
a-blog cmsもこれに近い仕様になっているようです。

11. 記事を追加しながら調整する

あとは、残りの記事を追加しながら実際の公開ページの表示をチェックしていきます。
テーブルのセル幅が足りなくて改行されていないかとか、ラベルの関連付けが間違っていないかなど。

items17

ここで、記事の順番が「逆順」になっていることに気付きました。
商品一覧の場合は任意で順番を変えるか、昇順の方がいいはずです。

items18

SOY CMSはバージョン1.2.5aの段階では並び順を昇順にすることはできないようなので、記事一覧の画面で手動で順番を変えることにしました。

実際のCMSカスタマイズでは、昇順並び替えはよく使います。できれば、10. のブロック設定のところでできるようになって欲しいところです。


Dreamweaverを使ったSOY CMSのカスタマイズの流れはこんなところです。
細かく手順を書いているので長そうに見えますが、カスタムフィールドの設定が割と楽なので、慣れればMovableTypeよりやや短い作業量というところです。

何より、後からテンプレートをDreamweaverで編集しても崩れないので
「とりあえず現状サイトで動的にして、検索エンジンに情報が行き渡ってから細かいデザイン改修を行う」
という二段階の改修が容易になります。

「カスタムフィールドの内容によってHTMLの出力を切り替える」などの、いわゆる「if文」は現状ではPHPで対応しなければいけませんが、うまく利用すれば予算や案件に合わせた、柔軟な構築が可能になると思います。


投稿者名 うぇびん 投稿日時 2009年08月04日 | Permalink