前回の記事で書いた通り、地図を追加する機能を標準で持っていないMovableTypeに、それを実装しようとすると、この記事を書いた時点では有力なプラグインがなく、面倒なカスタマイズが必要になります。

あんな長いチュートリアルを書いておいてなんですが、どうしてもMovableTypeを使わなければならない案件でないなら、標準で実装しているCMSを提案した方が、予算・工数の面からも確実というものです。

私が把握している、投稿画面に地図追加機能を実装しているCMSは下記の通りです。

1. a-blog cms
2. concrete5
3. bingo!CMS
4. Jimdo

このうち、bingo!CMSはYahoo!マップ、それ以外はGoogleMapsのAPI Keyを取得する必要があります。

地図の目的地を検索し、中心に持ってきて吹き出しのコメントを入力する、という操作感はどれもほぼ同じです。
尚、冒頭のスクリーンショットはa-blog cmsの画面です（私の本サイトの投稿画面なので、デフォルトとはカラーリングが異なります）。

ただし、四つのCMSは設計思想が微妙に異なっています。
a-blog cmsはMovableType・WordPressと同様に、カテゴリーや時系列のアーカイブでコンテンツを出力する更新方法が基本設計ですが、残りの三つは実際に表示されているコンテンツ内をクリックして、ホームページビルダーやDreamweaverのように、直感的に編集させる更新方法が基本になっています。

コンテンツが少なく、各ページの構成が異なるサイトであれば下の三つの方が構築しやすいですし、前の記事のような、入力フォーマットがが決まっているコンテンツを大量に生成するサイトであれば、a-blog cmsが適していると考えられます。

個人的には、MovableType・WordPressの代替として選択するのであれば、管理画面のカスタマイズのしやすさの点からも、機能面の近さからもa-blog cmsをお勧めしたいところです。

Twitterで記事を紹介して下さい（-人-）

「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を触ってみてください。

Twitterで記事を紹介して下さい（-人-）

住所など変わったので、新しい名刺を発注することにしました。
8月に発注した名刺が90枚近く余ってしまいました。どんまい私。

肩書きが、２つ増えています。

「カスタマイズアドバイザー」「a-blog cmsビジネスパートナー」。

a-blog cmsの方はそのまんまです。正式登録したら改めて記事を書きますね。
今回は、カスタマイズアドバイザーってなんやねんという突っ込みの話です。

今回、ふとこれまでの名刺を見返して、調子に乗っているような気がしてこれまで避けてきた「カスタマイズ専門業としての独自の肩書き」を、名刺やメールフッターに敢えて載せようと決めました。

FC2ブログでCMS的なテンプレートの配布を始めた頃から、私は「カスタマイズ職人」を標榜していました。
それは私の屋号「WebbingStudio≒思考する工房」から来るもので、性格的にも職人がふさわしかったのです。

私が意識していた「カスタマイズ職人」を英語にすると「Customize Artisan（カスタマイズアルティザン）」になります。
響きはかっこいいですがなんだか解りませんし、Artisanには「芸術性の少ない職人」という否定的な表現もあります。
何か違う表現はないかと考え直しました。

趣味を仕事にするようになり、協業先からMovableType・WordPressに関する技術的なご相談を請けることが多くなりました。
「○○のときだけ△△をすることはできますか？」
「MovableTypeでこんなの作ったらどのくらい手数かかります？」
「特に理由もなくWordPressを希望されてるんだけど、いいのでしょうか」
といったものです。

実際に私に発注が来ることもありますが、私の話を元に内製になったり、フルスクラッチCMSで作られた案件もあったりします。
ちょっと凹みますが制作会社だって話聞き出すのもビジネスの一環ですし、検証してお返事をすることで、私はカスタマイズのtipsを増やしてきました。
TwitterのタイムラインでMTやWPで詰まっている人にReplyを返すことも多くなりました。

アドバイスをすること。
それはお取引先と向き合うことであり、職人より開放的な印象があります。

そんなわけで「カスタマイズアドバイザー」としました。
名前負けしないようにこれからも勉強しなくちゃ、ですね。

Twitterで記事を紹介して下さい（-人-）

WebbingStudioのメインサイトを、MovableType4からa-blog cmsにベースを変えてリニューアルしました。

商用ブログ ホームページ作成 CMSデザイン 札幌のWebデザイナー | WebbingStudio

a-blog cmsは、Dreamweaverを使ってスムーズな構築ができるのと、管理画面とカスタムフィールドを一括してカスタマイズできる点に惹かれて選びました。
既存のテーマファイルは流用せず、いったん静的コンテンツで作成してからCMS化する、実務的な手順で構築しています。

今後、a-blog cmsのデモサイトとして、カスタマイズした投稿画面、テーマファイル内のコード・モジュール設定の公開などを行っていく予定です。
もちろん私自身もまだわからないことが多いので完璧な内容ではないですが、a-blog cmsを勉強中の方の参考になれば幸いです。

追記以降はデザインの話など。

6月頃に、「これまでの自分がやらなかったデザインに挑戦してみよう」と思ってデザインをリニューアルしたものの、やっぱりそれは本来の私のテイストではないわけで、納得が行きませんでした。
なので今回は、素材配布やFC2の共有テンプレートを作っていた頃の原点に戻り、ベクターグラフィックを多用し、背景素材・イラスト以外を全てモノクロでまとめた、シンプルなサイトにしました。

また、画風が固まってきたのでイラストの案件も受けられるようにと、サイト内にイラストを多用しました。
これまできちんと公開してこなかった自分の顔も、イラストでかなり近いものを載せています。

背景画像はコンテンツごとに異なっているのですが、一部はFC2の共有テンプレートで配布していた素材をリメイクしたものです。

• About　・・・　beads
• Work　・・・　lace
• Information　・・・　cycle

Informationの背景画像(cycle)は、他のコンテンツと雰囲気が異なっています。
子供っぽさを感じる方もいるかもしれません。

これは私が好きな北海道のマジックアワーをイメージして描いたもので、趣味でサイトを運営していたころから繰り返しリメイクしています。
思い入れの強いモチーフなので、敢えて加えました。

最後に、このブログを見に来ている方は気付かなかったと思いますが、IE6非対応となりました。
暇な方はIE6でアクセスしてみてください。閲覧はできますが専用のメッセージが出てひどいことになります。
どこに透過PNGを使用しているかわかって面白いかもです。

最近は、IE7以降へアップグレードする人も増えてきました。
私のメインクライアントは「制作会社」か「ネットリテラシーの高い個人」なので、自分のサイトでは切り捨てる決断をしました。
もちろんお仕事では忌々しいと思いつつも、もうしばらく対応していきますけどね…

相変わらず長い記事を、ここまで読んでいただいた方、ありがとうございます v_v
これからも少しずつ、WEB制作者として精進していきたいと思います。

Twitterで記事を紹介して下さい（-人-）

私の本サイトでは、トップページ下部にTwitterとはてなブックマークの新着を掲載していました。
a-blog cmsに移行する新サイトでも引き継ぐ予定です。

a-blog cmsはテーマファイル内にPHPスクリプトを直接書くことはできませんが、外部のRSSを整形して表示できる「Feed_ExList」モジュールがあります。
これを使えばすぐ移行できる…と思ったのですが、うまく表示できません。

TwitterのRSSは本文が全てURLエンコードされているため、デコードされずそのまま出力されてしまいます。
はてなブックマークはRSS1.0(rdf)形式なので、Feed_ExListモジュールのサポート外です。

2009.11.10追記：
開発元様に、[urldecode]という校正オプションを教えていただきました！
Twitterに関しては、{description}[urldecode] と記述すればFeed_ExListモジュールが使用できます。
リファレンスに追加されていますので、こちらも参考にしてください。

もしかしたら解決方法があるかもしれませんが、今回のところはビルトインモジュールを使うのを断念し、これまで使っていたPHPスクリプトをそのまま自作モジュールに変換する方法を取りました。

追記以降で配布しますので、とりあえずTwitterやはてブの新着を掲載したい方、モジュール作成について勉強したい方はご利用ください。

Getdataモジュールについて

このセットは、下記の外部コンテンツをリストアップするモジュールを追加します。

1. 【Contents】　任意URLのファイル内容全て
2. 【Twitter】　任意IDのTwitter新着
3. 【HatenaB】　任意IDのはてなブックマーク新着（コメントを含む）

「Getdata」モジュールは、こちらからダウンロードできます。
http://webbingstudio.com/souvenir/acms_module/Getdata.zip

モジュールの作成方法は、開発元のコンテンツを参考にしました。

• a-blog cmsのモジュール | 拡張機能の開発 | a-blog cms
• a-blog cmsのモジュールの書き方 その1 － kazumich.log

使用方法

解凍直後の状態では動作しません。
フォルダを、php > ACMS > GET > Getdata　と開いていき、最下層に入っている 「Contents.php」「Twitter.php」「HatenaB.php」の必要な箇所を編集してください。

1. Contents.php・・・読み込み先のURLを指定
2. Twitter.php・・・TwitterIDを書き換える（注意：二ヶ所あります）
3. HatenaB.php・・・はてなIDを書き換える

編集したら「php」フォルダごと、a-blog cmsを設置したディレクトリに転送してください。

テーマファイルへの記述

下記のように記述するだけで動作します。
Contentsは読み込み元がそのまま、Twitter・HatenaBはリンク付きのul要素で出力されます。

<!-- BEGIN_MODULE Getdata_Contents -->
<!-- END_MODULE Getdata_Contents -->

<!-- BEGIN_MODULE Getdata_Twitter -->
<!-- END_MODULE Getdata_Twitter -->

<!-- BEGIN_MODULE Getdata_HatenaB -->
<!-- END_MODULE Getdata_HatenaB -->

注意

※下記の関数が有効になっているサーバーでなければ動作しません。
Contents・・・file_get_contents関数
Twitter / HatenaB・・・file_get_contents関数・SimpleXML関数

※Getdata_Contentsモジュールは、対象のHTMLファイルの内容全てを「そのまま」出力します。エンコード・サニタイズも一切行いません。対象URLの内容を確認のうえ、慎重にご利用ください。

※このモジュールは試作品です。今後のa-blog cmsのバージョンアップで、不要となる可能性があります。
商用・非商用を問わず、自由にご利用ください。

注意に書いてある通り、PHPのfile_get_contents関数は便利ですが、有効にする際は慎重に取り扱わなければいけません。
もしも悪意ある第三者にPHPファイルを改ざんされてしまった場合、サーバー内の重要データを持っていかれてしまう可能性もあるからです。

ですが、a-blog cmsは一般に公開されているコンテンツにPHPスクリプトを記述せず、深い階層で一括管理を行うので、WordPress等のテーマに直接PHPを書けるCMSよりもやや学習コストがかかる分、安全と言えます。

開発元のブログや私のモジュールを見ればわかりますが、単に出力するだけならとても簡単に作れます。
（テキストをランダムに出力するとか）
皆さんも挑戦してみてください。

Twitterで記事を紹介して下さい（-人-）

個人の非商用に限り、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だった場合、たぶんこうなります。

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

まず「条件分岐」について全く触れていません。
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にどっぷり浸かる覚悟がある人だけです。

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

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

Twitterで記事を紹介して下さい（-人-）

MovableTypeで運営している本サイトを、a-blogcmsに切り替えたいと思っているので、移行の練習も兼ねて、本サイトを今回の実験台としてみます。

テーマファイルの設定

まずは現状の本サイトの主要ページ（トップページ・個別ページ・404等）を、静的HTMLに変換したものを用意しました。
普通のXHTMLベースのコンテンツです。

このセットが入ったフォルダに「webbing0908」と適当な名前を付け、
[a-blogcmsの設置ディレクトリ]/themes/
以下に放り込みます。

既に「system」「plain」「company1」というディレクトリができていますが、これらはa-blogcmsの基本テーマです。消さないで置いておきます。

それから管理メニューに入り（サイトと同じデザインでない内部ページです）、
「コンフィグ一覧」→「テーマ設定」で…

• どのフォルダを表示用テンプレートとするのか
• フォルダ内のどのファイルを
  • トップページにするか
  • アーカイブページにするか
  • 個別ページにするか

を、ファイル名を入力して指定していきます。
このうち、「管理ページ」「ログインページ」は、初期設定のままにしておくと「system」テーマに入っている基本のデザインがオーバーライドされるので（webbing0908に同名のファイルがないと自動的にsysytemから探す）、特に変更の必要はないと思います。
また、「エントリー編集ページ」は「詳細ページ」と同じ方が楽です。

ここまでやってブログトップへ戻ると

」ﾟ口ﾟ)」　あらもう反映されてますわよ奥様。

「webbing0908」フォルダのサイト構成が、そのままブログトップを起点に反映されます。
現時点ではブログと連動していないので、静的ページのサイトをアップしているのと全く変わりません。とりあえずこの時点で静的サイトとしてアップしておいて、段階的にa-blog cmsと連動することも可能です。

※今回は相対パスで動作を確認しています。スラッシュからの絶対パスでうまくいくかどうかは未検証ですが、たぶん対応しているんじゃないかと思います。

a-blog cmsとの関連付け

私のサイトと、a-blog cmsのデフォルトサイトで同じ役割を持っているのは「Information」と、下の「参加予定のイベント（正方形のバナー）」です。
なので、これらを「webbing0908」テーマに結び付けてみます。

「company1」テーマの「index.html」から、それらしい記事表示部分のコードをかっぱらってきて、「webbing0908」テーマの「index.html」の該当個所に埋め込んでいきます。

※現状サイトでは、バナー部分はHTMLを手入力しています。MovableTypeで動的にするのがめんどくさかったのです＾＾；

HTMLのコメントを使った独自タグは、宣言用のブロックタグが多くてちょっと鬱陶しい印象。MTと同じくらいのボリュームかな。Dreamweaverのスニペット併用は必須かと思います。

個別ページに関しては、どこから手を付けていいかわからないくらい独自タグが書かれているので、「company1」テーマの「main.html」の本文枠をガサッと突っ込みます。

これで「index.html」を上書きアップロードすればOK…と思ったのですがうまくいきません。
HTMLはきちんと動的になったのですが、「ログイン中のメニューボタン」や「記事の投稿・編集フォーム」が崩れてしまいます。

いろいろソースコードを調べて、「システム用のCSSとJSを追加しなければならない」ことがわかりました。

記事投稿画面のデザイン調整

※ここから先の手順は、もっと確実な方法があるのかもしれません。その場合は後日訂正します。

「webbing0908」テーマの<head>の最後に「ログインしているときだけ管理画面用のCSS・JSを読み込ませる」コードを追加します。
「plain」か「company1」テーマからそのまま持ってきます。

これだけでもいいのですが、まだ崩れが出たり、グレーベースの投稿画面がサイトに合わない場合はCSSの上書きが必要になります。

「system」テーマに入っている、以下の３つのCSSを自分のテーマディレクトリの同じ階層（css）にコピーすると、テーマ専用に記事中のタグ・投稿画面のスタイルを指定することができます。

style.css

フォーム枠のクリアフィックス、本文枠のデザイン全般のスタイルが書かれています。ディレクトリに入れるだけではなく他のCSSと一緒に読み込みます。

adminBtn.css

ログイン・ログアウトのボタンセット用CSSです。ボタンを横一列に揃えたりするスタイルが書かれています。ディレクトリに入れるだけで反映されます。

entryForm.css

記事投稿・編集時のフォームのスタイルが書かれています。ディレクトリに入れるだけで反映されます。

あとは、各CSSの説明を参考に、該当する部分を探してスタイルの調整をしていきます。
私はせっかくなので、グレーベースだった投稿フォームを自分のサイトに合わせてみました。
テーマファイルにないものをデフォルトのテーマから反映しようとする挙動（オーバーライド）は、WordPressに似ている印象です。

投稿フォームをブラウザで表示させながら微調整していった方が早いので、Firefoxのプラグイン「FireBug」か「Webdeveloper」があると楽です。
これが使えない場合は、ログイン状態のHTMLをローカルに落として、Dreamweaverで調整することになります。

いずれにしても、「オリジナルデザインのサイトに複雑なフォームを突っ込む」という作業は、カスタマイズの経験がないと難しいです。
また、フォームや段落ののマージン・パディングをリセットしていることを前提にCSSが組まれているので、元のHTMLが後方互換モードだったり、リセットCSSが入っていないと、手数が増えることが予想されます。

そういう意味では、a-blog cmsは最初のテーマ導入は非常に楽ですが、その後の工程はやや熟練者向けと言えます。
これは、ウェブサイトのデザインをそのまま編集画面にできるCMSが抱えている、共通の弱点でもありますね。

そんなこんなで、a-blog cmsのデータを、本サイトのデザインに反映することができました。

バナーの差し替えなんかもしてみたり。ちゃんと管理画面の「バナーの設定」で管理できるようになりました。

もちろん、私のサイトは新着情報以外にもコンテンツがありますし、このブログとデータを共有している個所もあるので、まだまだ作業はあります。
カスタムフィールドの追加や、カテゴリーごとにデザインを変更する「ルール設定」も必要になります。

配布サイトにはマニュアルもありますし、だいたい勝手がわかってきたので、またいろいろいじってみます。

Twitterで記事を紹介して下さい（-人-）

a-blog cms – Web制作者のためのCMS

人の良さそうな青年が「プログラムとかよくわかんないんだけど…」って言ってます。
バッケロウ！CMS使うならPHP書けないと食っていけないぜ。

とりあえずインストールと、記事投稿のことをざっと書きます。

設置ディレクトリについて

インストールは、久しぶりにすんなりできました。
ファイルを全てアップロードして、設定ファイルのパーミッションと.htaccessのファイル名を変えたら、ディレクトリへアクセスするだけです。

※XServerはパーミッションのグループ権限を6以上にできません。646・757等にしておけばいいと思います。

MovableTypeに慣れている人は「本体の設置場所」に注意が必要です。
a-blogcmsは公開画面と管理画面が連動している関係上、初期状態で「公開用のディレクトリ」にCMS本体をインストールすることを前提としています。
つまり、WordPressやXoops Cubeのように、サイトルートで公開する場合は、そこにa-blogcms一式を置いた方が作業的には楽ということです。

ログインページのURLは
[インストールしたディレクトリ]/login/
となります。

私はCMSやブログをインストールするときは、本体ディレクトリと公開ディレクトリを別にしているので、公開URLが変なことになって戸惑っているところです。たぶん変えられると思うのでマニュアルを調べます。

ionCubeローダー

a-blogcmsの設置には、本体の他に「ionCubeローダー」という暗号化ツールが必要になります。

暗号化ソフト – ionCube PHP Encoder | アシアル株式会社

これがOSのプラットフォームにより何種類もあるので一瞬迷いましたが、XServerのサーバーパネルの「サーバー情報」からOSを調べて、CPU名でGoogle検索したらわかりました。
XServerの方は、Linux (x86)用を利用してください。

インストールウィザード

インストール画面は丁寧なウィザード形式なので、上のステップや説明を見ながら進めていけばほぼ問題ないです。

途中でMySQLと、アカウント作成のパスワードが丸見えになります。
注意書きもありますが、背後に来たやつは0.2秒で撃つくらいのゴルゴ的緊張感で作業してください。
（個人的には、何故見せるのか気になります）

途中で初期テーマを選択しますが、「ブログ」を選んでしまうと追加されないパッケージがあるのか、あとで作業が増えるようです。
サイト構築に使うのですから、ここは素直に普通のウェブサイトを選びます。

初期のサンプルサイト

インストール後、サンプルサイトが表示されます。
ブログ・CMSカスタマイズでありがちなサイト構成が「全部盛り」になっているので、これを検証すると大体のことがわかりそうです。

MovableType・WordPressの場合、いわゆる「グローバルナビ」「サイト全体の新着情報」「バナーリスト」などは<mt:Entries>タグなどを組み合わせるかHTMLを直接書いて自作しますが、a-blog cmsではどのサイトにもあるようなパーツは、管理画面で記事とは別に設定できるようになっています。
レンタルブログの「サイドメニュー」や「プラグイン」のような印象です。

※WordPressは、過去のバージョンではバナー付きのリンクリストを管理画面で作れましたが、現在はテキストリンクのみとなっているようです。

記事の投稿

通常の記事の追加については、管理画面ではなく公開画面から直接行います。
ログインしていると、サイト内のあちこちに編集ボタンが出てきます。

一般的なブログ・CMSの場合、

• タイトルを書く
• 本文を書く
  • 画像を貼る
  • HTMLで見出しなど書く
  • インラインスタイルか前もってCSSに書いておいたclassで段組みをする
• 公開ボタンを押す

という、本文枠に全てが依存する構造なのですが、a-blog cmsの場合は

• タイトルを書く
• 文章・画像・動画などの「カラム（レイアウト枠のセット）」から選んで追加する
  • 文章なら平文・見出し・リストなどの体裁を決める
  • 画像ならアップする画像やサイズ、左右配置を決める
• 任意でカラムの並び順を変える
• 公開ボタンを押す

という、前もって用意したバラバラのカスタムフィールドを、パズルのように組み上げる構成になっています。

このため、タイトルと本文だけのシンプルな記事なら初期画面のまま適当に入力して投稿すればいいし、複雑な段組の記事を書くなら枠をいろいろ追加して組み合わせればいいのです。
これは、最近のCMSでよく見かけるようになったタイプです。

a-blog cmsの記事投稿の仕様は、うまく説明するのが難しいです。
初期テーマのデモサイトが公開されているので、実際に何か書いてみた方が良いです。

http://demo.a-blogcms.jp/

カスタマイズをする側の視点で考えると、自由度がある反面
「左／右に回り込んだ場合」「見出しより画像が前／後に来ている場合」
などいろいろな状況・レイアウトパーツを用意しなければならないので、ちょっと大変です。
また、ブログに慣れている管理者の場合、かえって説明が大変です。

管理画面もデザイナー側でカスタマイズできるので、選択肢を減らしたり、従来のように入力内容を縛ることもできるようです。

インストールと投稿についてはこんな感じです。
次回のa-blog cmsの記事では、もっと細かいところ、詳細な管理画面について書きます。

他のことも書きたいし、週末はお仕事なのでまたいつになるかわからんですが…

Twitterで記事を紹介して下さい（-人-）

このところ文章がますます散漫ですがご容赦ください。

で、WebbingStudioはどうするの

今後最優先で対応したいCMSは、SOY CMSとa-blog CMSです。

SOY CMSに関しては、春頃から検証しているので一般的な構成の企業サイトならもう作れます。
既存の静的HTMLへの導入がしやすく、私が単純に「面白い」と思っているCMSなので、これからも記事や情報などアップして応援していこうかなと思ってます。

a-blog cmsの方は、「カスタマイズの仕事を通してCMSに求めていること」に合致したからです。
まだ時間が取れずインストールはしていませんが、Dreamweaverとの親和性は大きな魅力ですし、管理画面の完成度が高いです。
LP6の表向きのテーマだった「MovableTypeの後継となるのは？」にマジレスしたら、a-blog cmsだと思ってます。

これに余裕が出てきたら、CMS Desinerやbingo!CMSも、と思いますが、MovableType5も出ますし、海外CMSもひとつくらい対応したいので（MODxかJoomla!かでずっと悩んでますが）、このくらいが限界ですね。

運営元の苦労

CSS Niteは株式会社スイッチさんが運営しているわけですが、今回は規模が大きかったので大変だったようです。

開催後のフォローアップメールには、
セッションのレジュメがギリギリまで揃いませんでしたとか、
懇親会のドタキャンが12名出て12名×5,000円=65,000円立て替えましたとか書いてあります。

鷹野さんが札幌のCSSNiteでお会いしたときよりキリキリした印象だったのは、無理もないかなぁと思ったりしました。

スイッチさんはセミナーを開くことで、開発元から協賛費をもらいます。
参加者からはトラックバックによる宣伝や参加費をもらいます。
それがお仕事です。

だからといってセミナーに参加できるのは当たり前ではないです。

懇親会の件は、メールを見て慌てて支払った人が何人かいたようですが、飛行機とホテルを取って北海道から来た者としては、そんなテキトーにキャンセルできるんだなー、東京では毎週やってますからねーと毒吐いてしまいます。

最近は札幌でも、セミナーや勉強会が多くなりました。
機会を与えてもらっていることを忘れてはいけないと、改めて思います。

鷹野さん、懇親会でSOY CMSの古荘さんを探してまごまごしていたところ、連れてきてくださってありがとうございます（´д｀n

参加した人たちの流れ

あくまで私がtwitterでfollowしたり、参加した人のブログ記事を読んでの情報ですが

• （LP6に参加したCMSのどれか）に対応しようかなと思ってる
• 業務で取り入れることはないな…てゆか海外CMSやMTでいいじゃん

の２パターンに分かれます。
学習コストもありますし、私のように複数考えている人は稀なようです。

前者の方では、私と同じようにa-blog cms・SOY CMSに興味を持っている人が多いようですが、自分が受けている案件の傾向を考えて、他のCMSを検討している人もいます。

結局はMTだと不満が出そうな案件のサポート的存在なのは変わらないわけですが…
それでも、LP6より前と比べると、
「ツールの仕様にWEBデザイナーと案件が併せる」状況から
「WEBデザイナーが案件に合った仕様を持つツールを選ぶ」
という流れが確実にできつつあるように思います。
それは、私のカスタマイズ職人としての理想だったりもします。

WEBデザイナーなら、CMSがなくてもサイトは作れます。
本当に「誰でもサイトが作れるCMS」ができてしまったら、WEBデザイナーはごはんが食べられません。
（実際にはサイト構成・文言などアドバイスするのはプロのお仕事なので、そんなことにはならないですが）

それだけに、自分の立ち位置、CMSをはじめとしたツールとの関わり方を模索していかなければいけないのです。

Twitterで記事を紹介して下さい（-人-）

2009年6月27日に開催された、CSS Nite LP, Disk 6 「CMSリベンジ編」の参加レポートです。

17:45～

「a-blog cms」
ベンダー：
アップルップル

【使用経験なし】

正式公開になりました

a-blog 2004年～　有料ライセンス契約2000件以上

→CMSへのニーズの変化に対応するためパワーアップ

本当は「a-blog」自体が「CMS」を名乗るはずだったが諸々の事情で「ブログ」となった経緯がある
（つまりはじめからCMSとして開発されたもの）

WEB制作会社が作るCMS

いつも制作をしているから「欲しい機能」をすぐ反映できる

使う機能ははじめから！

• フォーム機能
• ユーザー権限別の管理
• カスタムフィールド
• SEOとLPO
• キャッシュ機能
• モバイル対応

＋オプション

公式オプション機能の充実：開発情報を公開し自主制作が可能

テンプレートのしくみ

システム内の「themes」フォルダに静的サイトをそのまま投げ込む

テンプレートの設定画面で

1. 「使用するテーマ名」を投げ込んだフォルダの名前にする
2. 「トップページにするHTMLファイル名」を指定する（任意）
3. 「アーカイブとして扱うHTMLファイル名」を指定する（任意）

…といきなり静的サイトが反映される（らしい）

サイトに含まれている画像ファイルの相対パスも自動で補正されるため、事前の修正作業がいらない

独自タグはSSIを使用

例）サイト内にログインフォームを作りたい場合は表示したい箇所にSSIのincludeを記述

DreamweaverはSSIに対応しているためローカルで構築作業が可能

管理画面もDreamweaverでデザインできる

入力項目＋hidden要素で必須項目等の設定をする
（WebbingStudio追記：CGIのメールフォーム等と同じ形式？）

例）ジェイプロジェクト硬式野球部の試合結果：スコアボード部分は実際の表示画面に限りなく近くなっている

記事表示フォーマットはいろいろモジュール化されているのでHTMLには開始/終了タグを書けば出力される

カスタムフィールドの内容はメタデータで登録されているので、簡単な絞り込み検索等はすぐ作れる

a-blogから進化した更新画面

WYSIWYGではなく、カスタムフィールドのオプション項目でレイアウトなどを指示する

フォームオプション

文字種・文字数制限だけではなく自動修正も行う（全角数字を半角数字に変換など）
メール取得のほか、CSVによるログ取得
入力ステップの分割→モバイル用に複数ページの管理画面も作れる

ルール機能

条件分岐トリガーも色々あります

ユーザーID / カテゴリーID / エントリーID / ユーザーコード
カテゴリーコード / エントリーコード
ユーザーエージェント（PC・モバイル等）

まとめ

• がんばるWEB制作者のためのCMS
  クライアントのために使いやすい管理画面を作れる
• a-blog cmsひとつでシステム構築いろんなモジュールが付いている
• HTML/CSSという現在の知識で使える
  Dreamweaver等のツールでそのまま作成

リリース記念パック（8月末まで）
基本ライセンスパック　52500円　→オプションパックも付いてくる！

感想

今回のLP6で、いちばん（いい意味で）予想を裏切られたのがこの「a-blog cms」でした。ブログシステムとしての実績もあり、デモサイトを見た感じでは管理画面のUI・構築システムもかなりわかりやすいです。
参加前にざっと各CMSの公式サイトを見てはいたのですが、やはり細かい機能はきちんと話を聞かないとわからないものですね。

デザイナーの視点として注目したのが

1. 管理画面フォームもデザインできる
   （他のCMSもできますが、プレゼンテクでしょうか）
2. Dreamweaverとの連携
3. 文字種・文字数制限だけではなく自動修正も行う
4. テンプレート側でエントリー内の画像サイズを制御できる
   （MTも難しいですができます）
5. 安価なサーバーでもほとんど設置できる

という点で、特に三つ目の「表記ゆれ」への対応は、CMS構築後にデザイナーが頭を悩ませる問題のひとつなのでかなり興味を持ちました。

Dreamweaverでのデモンストレーション画面で、独自タグを「スニペット」として登録しているのが気になったので、懇親会で代表のやまもとさんに聞いてみたところ
「モジュールのスニペットを公開しているので使ってください＾＾」
とのことです。

むー、WEBデザイナー・コーダーのかゆいところに手が届いてます。

結果として「乗り換えたいCMS」のアンケートでは一位に選ばれました。私も同感です。
（ちなみに、仕事で使えそう！はSOY CMSが一位だそうです）

というわけで、SOY CMSと並んで、今後の対応を予定しているのです。
うわーまずは設置しなくちゃ…

欠点をあげるとすれば、毎度細かいですが

<meta name="generator" content="a-blog cms v1.0.1" />

がヘッダに著作権表記として入るところです。
外せるかどうかは今の時点ではわかりませんが、ダウンロードページで警告しているところを見ると強制ぽいです。
何のツールを使っているか徹底的に隠したい方はご注意ください。

Twitterで記事を紹介して下さい（-人-）