では実際に編集を行なおう。コンテンツを左クリックしてコンテクストメニューを表示し、この中の「Edit」を選ぶと編集画面が表示される。実際の編集内容はコンテンツの種類によって変わり、編集単位は赤い点線で囲まれた部分(ブロック)単位になる。なお、コンテクストメニュー内の「Copy to Scrapbook」を選ぶと、「Concrete5」専用のクリップボード内にデータがコピーされる。これはブロック単位でコピーされるので、別の場所に貼り付ける時に便利だ。また、「Move」を選ぶとブロック単位での移動モードになる。移動はメインコンテンツ、サイドバー、ヘッダそれぞれにオーバーラップして行なえる。

画面7 コンテクストメニュー。編集や移動、Scrapbookへのコピーができる

編集はユーザ画面のまま行なえる。コンテンツを追加する場合は、ヘッダ/コンテンツ/サイドバーそれぞれの下部にある「Add to ～」と書かれているリンクをクリックする。そこで追加するブロックを選択するのだが、標準で用意されているのは以下の通りだ(画面8)。

画面8 多彩なブロックが揃っている。自作することもできる

画面9 画面下にあるのがメインコンテンツを追加する「Add To Main」。ほかにHeader Nav、Header、Sidebarがある

標準ブロック一覧

  • Content(HTML)
  • Auto-Nav(ナビゲーション)
  • External Form(外部のファイル定義したフォームを読み込む)
  • Page List(ページの一覧を作成)
  • Form(項目を設定するフォーム)
  • File(ファイルダウンロード)
  • Image(画像表示)
  • Flash Content(Flashファイル表示)
  • Guestbook(コメント欄)
  • Slideshow(スライドショー)
  • Search(検索機能)
  • Google Map(地図貼付け)
  • Video Player(ビデオファイルを再生する)
  • RSS Displayer(RSSフィードを取得して一覧表示する)
  • Youtube Video(Youtubeの動画を表示する)
  • Survey(投票フォームを表示する)

各コンテンツの編集内容は異なるが、「Image」(画像表示)であればFlash UIを使った複数ファイルのアップロード(画面11)、パスワード制限をかけたファイルダウンロードなど機能が多い。「Google Map」も住所を指定してマーカーを立てることができる。

画面10 フォームの編集画面。投稿内容は確認画面で閲覧できる

画面11 ファイル管理ツール画面。複数ファイルの一括アップロードも可能

なお、日本語のRSSフィードを取り込むと文字化けが発生する(画面12)。この場合「(インストールディレクトリ)/concrete/themes/greensalad/elements/header.php」と「(インストールディレクトリ) /concrete/themes/default/elements/header.php」のcontent-typeをUTF-8に修正することで文字化けが回避できるようになるはずだ(画面13、RSSフィードがUTF-8以外の場合は文字化けが起こると思われる)。また、全般的にcontent-typeがiso-8859-1になっているようなので、必要に応じて修正してほしい(画面14)。

画面12 content-typeの修正前。日本語のフィードを取り込むと文字化けてしまっている

画面13 metaタグのcontent-typeを修正する

画面14 文字化けが解消する。content-typeはテーマごとに設定されているので注意

編集した結果はそのまま表示されている画面に反映されるが、保存はされていない。編集が終わったら「Exit Edit Mode」をクリックする。するとコメント入力欄が表示されるので、編集内容についての説明などを入力して「Publish My Edits」をクリックすれば編集内容が公開される(画面15)。「Preview My Edits」はプレビュー表示で、「Discard My Edits」をクリックすれば変更内容は破棄される。

画面15 編集確認画面。コメントは後で見返した時に分かりやすいようなメッセージを入れる

変更した内容はバージョン管理システムに登録される。それを確認できるのがVersionsだ。これをクリックすると修正履歴の一覧が表示される。各修正項目にはチェックボックスが用意され、ふたつの項目をチェックして「Compare」をクリックすると、その間における修正差分を表示してくれる。差分表示を行なう際には「(インストールディレクトリ)/concrete/libraries/3rdparty/htmldiff.py」というファイルに対して実行権限(chmod +xのような)を与える必要がある。そして差分は次のように色分けして表示される(画面16・17)。

画面16 修正履歴一覧。太字のバージョンが現在公開されているものになる

画面17 差分表示。画面上部の赤いラインがなくなった部分、緑のラインが追加された部分

なお、修正一覧で項目をひとつ選んだ場合は、「Approve」ボタンを利用できる。これは公開するバージョンを選ぶ機能。サイトの修正中は古いバージョンを表示しておき、整った段階で最新版に切り替えるといった使い方ができる。なお、太字で表示されている項目が現在公開中のバージョンだ。一般的なバージョン管理のように古いバージョンの編集はできないので注意してほしい。