a-blog cmsの実務制作(2)ベースのウェブサイトを作る

a-blog cmsの実務制作の流れをまとめています。

初めての方は(1)からお読みください

まずは、ベースとなる静的コンテンツを作りましょう。

2010-10-04追記:Dreamweaverを主に使用している人へのSSIインクルードに関する説明を追加しました。

ディレクトリ構成を考える

今回制作するのは、こんなサイトです。

ニュース・会社概要などがある、オーソドックスな企業サイトです。
実はこれ、最近、CMSのテストなどするときに使っていたりします。

サイトのディレクトリ構成は、左図のように考えました。赤字は「一覧ページのレイアウト構成」です。

a-blog cmsは、サイト内のパスによって表示するテンプレートを自動で切り替えるシステム(URLコンテキスト)を採用しています。
なので、制作前からきちんとディレクトリ構成と、一覧ページのレイアウトなどを考えておくと、他のCMS以上に制作が楽になります。

「製品・サービス」のページは、カスタムフィールドなども絡みそうで初心者には激ムズです。
ここは今回は後回しにして、「時系列」と「ページ」の部分だけ説明していきます。

.htaccessでSSIを有効にする

コーディングを始める前に、以下のように書いた.htaccessをlocalhostのルートに置きます。

AddHandler server-parsed .html

a-blog cmsは、インクルードをSSIの表記で記述しますが、a-blog cms自身はSSIは使用しません。
間違えてa-blog cmsがある公開サーバーにアップしないでください。
たいへんなことになりますw

補足:Dreamweaverを使っている人へ

Dreamweaverのプレビュー画面は、コード中にSSIのインクルードがあると.htaccessがなくても自動で読み込みを行います。
localhostを使わず、Dreamweaverと公開サーバーのみで表示チェックをしている
というワークフローの方は、この項の.htaccessの設定は不要です。
また、後述するSSIインクルードの部分も「include virtual」ではなく、a-blog cmsと同じ「include file」と記述してください。Dreamweaver内ではちゃんと出てきます。

localhostでは似たような動作を再現するためにSSIを使う必要があると解釈してください。

テーマのベースとなる静的HTMLを作る

CMSベースのコンテンツを作る場合、デザイン1パターンにつき、最低二種類のHTMLが必要になります。

  • インデックスページ … index.html
  • エントリーの個別ページ … entry.html

今回作成するデザインは「時系列」と「ページ」の二種類ですから、「news」と「company」のディレクトリ以下のページを作ることにしました。
ヘッドラインを表示するためのホームもちゃんと作っておきます。

コーディングに関しては、どうということはありません。普通にHTMLやCSSを書いてください。
リンクなどのパスは、相対値でも問題ありませんが、スラッシュからはじまる絶対値がおすすめです。

共通部分をSSIインクルードにする

コーディングの途中で、複数コンテンツで共通の箇所というのが出てきます。
ヘッダやフッタ、グローバルナビゲーションなどです。

これらの部分は以下のようなSSIインクルードにします。
先ほど.htaccessの設定をしておいたのでlocalhostでちゃんと見えるはずです。

<!--#include virtual="/include/header.html"-->

パスはスラッシュからの絶対値とし、インクルードファイルは「include」ディレクトリに入れてください。

インクルードさせる部分は、HTMLの要素を分断するような分け方をしないようにした方がいいです。外側のレイアウト用divを残して中身だけインクルードの対象にしておけば、リンク切れになってもページが崩れません。

というわけで、こんなページを作成しました。(名前クリックでスクリーンショットを見られます)

ホーム /index.html ヘッドラインを表示します。
ニュース・トップページ /news/index.html エントリー一覧を時系列(降順)で表示します。
リンクをクリックすると個別ページへ移動します。
ニュース・詳細ページ /news/entry.html エントリーを表示します。ページ下部には前後リンクがあります。
会社概要・詳細ページ /company/index.html エントリー一覧を管理画面で設定した優先度順で表示します。
左メニューか、各ページの概要が書いてある枠のタイトルをクリックすると個別ページへ移動します。
会社概要・詳細ページ /company/entry.html エントリーを表示します。
左メニューをクリックすると他の個別ページへ移動します。

インクルードを書き換える

静的HTMLのベースコーディングができたら、この段階でいったんa-blog cmsに反映してみます。

サイト内のファイルを適当な名前を付けたフォルダに入れて、a-blog cms内の「themes」ディレクトリにまるっと転送するわけですが…
その前に、SSIインクルードのコマンドを修正します。

コード内の「include virtual」を「include file」に書き換えてください。
Dreamweaverのローカルサイト内一括置換を使うとサクッといけます。

a-blog cmsでは、SSIインクルードに「include file」のコマンドを使用します。ですが、localhostでは「include virtual」でなければファイルを読み込めません。なので、きちんとCSSの調整などが終わるまでは「include file」として共通部分が見えるようにしています。
localhostにa-blog cmsを設置して、themesフォルダ内で直接作業している場合は、もちろん最初から「include file」で構いません。

テーマを反映してみる

ファイルをアップしたら、a-blog cmsの管理メニューに入って、「コンフィグ」→「テーマ設定」の画面に移動します。
テーマ設定ではどのフォルダをテーマとして読み込むかなどを設定しているので、そこの名前だけ新しく追加したフォルダ名に書き換えて「保存」します。

この状態で公開ページへ移動すると、作ったサイトが反映されています。
※管理画面に戻れなくなるので別窓で開けてください

以前記事で書いた

の状態ですね 」゚口゚)」

現時点ではブログの情報は全く反映されていませんが、静的ページや画像、インクルードなどはlocalhostのときと全く同じ状態で表示されるはずです。
何度やってもワクテカする瞬間なのですが、このままでは「ニュース」と「会社概要」しか見られませんし、それ以前にエントリーを書けないので、一旦元のテーマに戻します。


基本のHTML作成はここまで。

次回はa-blog cmsの基本設定についてですー。


コーダーは、求められている要素で正解が決まる

何食わぬ顔をして二ヶ月ぶりの記事を書く訳ですが。

CSS Nite LP, Disk 9「Coder's Higher」

昨日(4/17)は東京で「CSS Nite LP, Disk 9」がありました。
WEBコーダーの最新技術にフォーカスしたイベントで、Web制作・jQuery・CSS3・HTML5とかなり幅広いテーマとなっています。

私も参加したかったのですが都合が付かなかったので、Twitterのハッシュタグ「#cssnitelp9」をお仕事しながらチェックしてました。

その中で、牧野工房の大杉さんと、ドーガの石本さんのコーディングスタイルの違いに関する呟きに興味を持ちました。
少なくとも、CSSの扱いに関しては全然違うようです。

necozeさんも参加されてたんですねー^^

牧野工房はサイト内のCSSをコンテンツ毎に分割して、importで一括管理するスタイルなので、石本さんがhttpリクエストを節約する方針で制作しているのであれば、真逆になるはずです。

これはどっちが正しいとかではなく、
「ボリュームのあるサイトを早く正確に作成する」ことを業態としている大杉さんと
「パフォーマンスの高いサイトを作成して長期的効果をアピールする」のを追求している石本さんでは
同じコーダーでも「求められている要素」が違うのだ思います。

私のようなフリーのコーダーになると、協業先の方針や案件の状況によって「今回求められている要素は何か」を判断する必要が出てきます。

制作会社との協業の場合は先述したような、早さか、正確さか、パフォーマンスかという話になってきますが、それとは別に
Webデザイナーとしての技術的なサポート」を求められることもあります。

依頼先が小規模団体や、DTPデザイナーしかいない制作会社だった場合、カンプの文字サイズ・マージン・パディングなどは適当ですし、Webページに起こすとどうなるかなどはあまり考えられていません。
その辺りの補完を制作側がまかされるわけです。

常に一定のワークフローで進められないのはけっこう大変なのですが、ポリシーがないのもポリシーですよということで、いろいろな協業先の良いところを吸収していきたいと思っています。


CSS Nite LP, Disk 9.2(reprise)

そんな私は6/5の「CSS Nite LP, Disk 9.2(reprise)」に参加予定です。
再演版ではCSS3や、HTML5にさらにフォーカスした内容になっているようです。

内地のコーダーの皆様、会場でうぇびんを見かけたときはいじめないでください。
宜しくお願いいたします。


投稿者名 うぇびん 投稿日時 2010年04月18日 | Permalink

a-blog cmsは「成長させるCMS」だと思う

acms_120

「a-blog cms」の新バージョン、1.2.0がリリースされました。
主な追加機能は以下の通りです。

  1. WYSIWYGエディタの追加
  2. 絵文字の入出力に対応
  3. ショッピングサイト機能(メール通知のみのシンプルなカートが標準搭載)
  4. ルール(使用するテーマの条件分岐)に「正規表現」が追加
  5. 出力ソースのクリーンアップ
  6. モジュールの追加

入力形式にWYSIWYGが加わったことで、一般のブログやWordに慣れている更新担当者がいる案件にも対応しやすくなったと思います。
制作する立場としては、やはりルールの正規表現対応や、モジュール追加が興味深いところです。
導入事例紹介のページもどんどん厚みを増しているので、今後が楽しみです。


前の記事にもある通り、私=WebbingStudioは、a-blog cmsのビジネスパートナーになりました。

制作会社ではなく、しかも自分からCMSを選択する機会が少ない個人事業主の私がどうしてa-blog cmsを支援することにしたのかというと、
「制作会社・クライアント双方の意識を変え、成長させる」
可能性に強い興味を持ったからです。

制作会社側の意識

MovableType・WordPress(特にWP)での小規模な構築案件を重ねると、制作者はこんな考え方に慣れてきてしまいます。

  • テンプレート化すると、もうDreamweaverなどのオーサリングソフトで編集できない
  • HTML・CSSを完全に完成させてからでないと動的部分に手をつけられない
  • コンテンツは全てCMSの管理下に置くものだ
  • 管理画面・投稿画面は配置が決まっているものだ

大規模な案件を経験するとわかってくることですが、デザイン性が高く、かつクライアントが更新する可能性がほぼないコンテンツを無理にCMSの管理下に置く必要はありません。
ぶっちゃけ、ウェブページテンプレートなんぞなくてもいいのです
むしろ今後更新依頼をもらえる余地を残しといた方が(ry

一般のブログ的なCMSは、これら静的コンテンツを動的コンテンツと切り分けるのが難しくなっていますが、a-blog cmsは特に意識しなくても、同時にオーサリングソフトで一括管理することが可能です。
(実際、私の本サイトのうち「About」と「Work」は普通の静的コンテンツです)

また、a-blog cmsは投稿画面も制作できるため、いかに更新担当者が作業しやすくするかを考えることで、「インフォメーションアーキテクト」や「アクセシビリティ」に対する意識も持つことができます。
これらは、今後のWEBデザイナー・コーダーに必須のスキルになっていくと思います。

プログラマはCMSに対する考え方が異なるので、彼らが加わるとまた事情が変わってきますが、少なくともプログラマがいない制作会社/プログラマが必要ない案件のワークフローを激変させる可能性を、a-blog cmsは持っているのです。

クライアント側の意識

私のように制作会社から協業依頼を請ける場合、はじめからMovableTypeに決まっている案件がひじょうに多いです。
クライアントが以下のような固定意識を持ってしまっているパターンも散見されます。

  • MovableType以外のCMSを知らない
  • 管理画面の配置が公開サイトと違う=CMSとはそういうものだ
  • MovableTypeとかいうのが有名だし実績も多いからとりあえずこれを採用すれば無難だ

もちろんMovableTypeは拡張性が高く安定した、良いシステムです。
管理画面の編集も可能です(a-blog cmsほど直感的でないですが)。
ですが、提案する側が「MTを前提としたディレクション」を行ってしまうのは、カスタマイズを扱う私としては、あまり良い傾向とは思えません。
更新手順が複雑になってしまっては意味がないです。

MTと同様に拡張性が高く、かつ設計思想が異なるa-blog cmsを選択肢に挙げることは、クライアントの意識を変えられる可能性もあるのです。


CSS Nite LP6に参加する前から、何らかの国産CMSをMovableType・WordPressと同様にサポートしようと検討してきましたが、私のお仕事の傾向もあって、最終的に、a-blog cmsがメインとなりました。

a-blog cmsは、制作会社とクライアントを「成長させる」CMSです。

a-blog cmsを触ってみてください。


投稿者名 うぇびん 投稿日時 2009年12月03日 | Permalink

個人利用フリーになったa-blog cmsは、現場にじわじわ効いてくる

ablogcms_one

個人の非商用に限り、a-blog cms は無料でご利用頂ける事になりました | a-blog cms

これまで30日間限定の試用までしかできなかったa-blog cmsが、個人非商用であれば自由にダウンロード・利用できるようになりました。
評判がいいらしいけど、忙しくて30日じゃ検証しきれない…と思っていた方、とりあえず趣味で使ってみたいんですが、という方は是非お試しを。

ちなみに私は、30日間の試用期間ではほとんどいじれなくて結局ライセンス取っちゃいましたwちきしょうめwww

今回のアップルップルさんの英断を、私は金銭面とは違うところでとても期待しています。
私が把握している範囲では、a-blog cmsというのは「じわじわ良さがわかってくる」CMSであるからです。

a-blog cmsは「Web制作者のためのCMS」と銘打たれています。
特にアピールされているテンプレート仕様や、投稿画面もカスタマイズできる点などを見ると、なるほどと思います。

ですが、スキルがあればなんでもありになりつつあるMovableTypeやWordPress、やたら構築方法がわかりやすいSOY CMSと比べると、「何がどういいのか」をなかなか一言で説明できない面があります。

その「じわじわくる良さ」の例をひとつ。

二人以上のチームを組んでお仕事をしている制作会社は多いと思います。
大規模なCMS構築の場合、制作を始める段階でテンプレートの構成等をきちんと書類化して、擦り合わせをしてから始めるのですが、諸々の事情で、かなりの確率で途中変更が入ります。

そのひとつ、
「特定のカテゴリーの記事を書いたときだけHTMLの構造を変えたい」
という話になり、その構造を変える範囲が広い場合。

CMSがMovable Typeの場合で、ディレクターがコーダーにどう指示を出すかを考えてみました。

個別エントリーのテンプレートに条件分岐追加して、○○のカテゴリーのとき、構成が変わるようにして。ソースが長くなりそうだったらモジュール化して。できたら再構築かけて、画像とか、ちゃんとつながってるかチェックしてね。

意味がわかんねえよという人すみません…
MovableTypeは専門用語多いんで…@@;

これが、a-blog cmsだった場合、たぶんこうなります。

「aaa.html」を元にして、同じ階層に構成の違う「bbb.html」を作って。独自タグはaaa.htmlに書いてあるの参考にしてね。putしたら教えてくれる?

どこが違っているかわかるでしょうか。

まず「条件分岐」について全く触れていません。
a-blog cmsには「ルール」という機能があり、特定の条件下で表示するテンプレートを、管理画面側でごっそり変えてしまえるのです。
(もちろん、変わる箇所が少ない場合は他のCMSと同様のテンプレート内条件分岐が使えます)
なので、コーダーにテンプレートさえアップしてもらえば、あとはディレクターが管理画面に入って
「カテゴリーが○○のとき」「bbb.htmlをテンプレートに使用する」
という設定を追加するだけなのです。

もう一点が
「画像のリンク切れについて触れていない」のと
putしてと指示している」ことです。

Dreamweaverでは、FTP等を使ってサーバーにファイルをアップすることを「PUT」と呼びます(コマンドラインと同じですね)。

「PUT」は、SOY CMSのカスタマイズ解説のときにも触れましたが、サーバーとローカルの構造を同じに保ったままファイルをアップします。
なので、実際のサイトルートとは違う箇所にテンプレートをアップしなければならない一般のCMSでは「PUT」を使うことができません。
テンプレートができたらドラッグか他のFTPソフトでアップして画像やリンクが切れてないかチェック…となるわけです。

ですが、a-blog cmsはいろいろなところで紹介されている通り、画像やJavaScriptも含め、全てのサイト構造を崩さないままテンプレート化できます。
なので、Dreamweaverのサイト設定時に
サイトのルート=a-blog cmsのテンプレートを置くディレクトリ
とすれば、あとは画像のチェックもほとんど必要なく、更新しては保存→PUT(自動化してもいいかもしれないです)でサクサク進められるのです。

私のようにひとりで作業するのであれば、自分の中でワークフローが確定していればいい訳ですが、多人数の場合は意思の疎通が大変です。
それを大幅に軽減できる可能性があるというのが、a-blog cmsのすごいところであり、なかなか他の人に説明しようとしたとき、わかってもらえないところです。

とにかく皆さん、なんか作ってみてください。
放置サイトがあるなら、それを動的化してみるだけでもいいと思います。

もう、MTでいいじゃん」というjunnamaさんの名言があります。
まあそれも確かに正論ですが、
「これでいいのか?」
「もっと良い作業の進め方があるのでは?」
「この案件には別のCMSの方が良くね?」
と考える機会を持つことが、この流れの速い業界では必要なことと思います。
いいじゃんなどと言っていいのは、junnamaさんのようにそのCMSにどっぷり浸かる覚悟がある人だけです。


ablog_manual

a-blog cmsは、「用語の統一」が徹底している点も評価できると思います。
マニュアルインデックスを見ると、ほとんどの主要な独自タグにタグ名と口語名が併記されています。

CMSの細かいところについて、人にメールや口頭で説明するのはなかなか難しいものです。
こういった地味でも重要なポイントが、今回のoneライセンス自由化でもっと評価されてほしいと思います。


投稿者名 うぇびん 投稿日時 2009年10月11日 | 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