自治体サイト向けCMS ZOMEKIのご紹介 · 2012年にオープンソース（GPL...

サイトブリッジ株式会社 ２０１３年９月１２日

自治体サイト向けCMS

ZOMEKIのご紹介

ZOMEKIの概要

オープンソースCMS「ZOMEKI」（ぞめき）は、市町村サイトや地域・観光ポータル構築用CMSとして開発され、２０１２年にオープンソース（GPL v3）として公開されました。 ZOMEKIは、２０１０年にオープンソースとして公開された自治体サイト向けCMS「Joruri」（ジョールリ）のプログラムを改良することによりスタートしたため、基本的な構造はJoruriと同様です。

主な改良点

・HTML5対応

・最新のRuby/Railsに対応

・プログラムソースコードをGitHubに公開

・CMSのインストーラーを装備

・JISX8341-3:2010の基準にてHTML/CSSを全面的に改善

・複数サイト（ポータル）の構築/運用向けにユーザ管理を拡張

・市町村サイトに適したグローバルナビ、カテゴリ分類の機能を装備

・記事コンテンツの分割管理を実現

・イベントカレンダー、マップの各コンテンツを大幅に機能強化

バージョン分岐、機能改善

自治体への導入実績

3

自治体公式ホームページへの導入実績 ZOMEKI 登別市、輪島市 Joruri 仁木町、栗山町、壮瞥町、美幌町、北見市、中頓別町、赤平市 田舎館村、平川市、大槌町、寒河江市、北塩原村、会津若松市、千曲市 館林市、木島平村、笠松町、瀬戸市、交野市、琴浦町、邑南町、新見市 綾川町、徳島県、牟岐町、阿波市、那賀町、海陽町、上勝町、上板町、美波町 吉野川市、勝浦町、三好市、阿南市、石井町、西予市 添田町、西海市、錦町、中津市、龍郷町 （４２自治体）

その他公式ホームページへの導入実績 ZOMEKI うらそえナビ（沖縄県浦添市）、ここから、（塩尻市地域ポータル） Joruri 中核市市長会、山口県産業技術センター、徳島県立中央病院、徳島大学、 鳴門教育大学、島根大学、高知大学、くれ子育てねっと

自治体サイトのトップページサンプル

グローバル・ナビゲーション 訪問者別のわかりやすいメニュー

アクセシビリティ・ツール 文字サイズ、背景色の変更、音声読み上

げ、ふりがな表示

広告バナー 専用の管理機能で、ランダム表示、バナーの公開開始・終了を自動化、アクセ

ス数を管理画面で確認可能

イベントカレンダー 記事のタイトルをイベントカレンダーに表示、記事ではない情報も掲載可能

FAQ FAQを記事と同じカテゴリで分類し、各カ

テゴリページに見やすく表示

新着記事のタブ表示 アクセスが多い分野をタブ切り替えで

簡単に一覧表示

ライフイベント 各種手続きの記事をライフイベントごとに

分けてわかりやすく一覧表示

分野一覧 記事を分類する分野の第1階層を

一覧表示 アクセスランキング Google AnalyticsのデータをAPIで取得して

表示

分野ページサンプル

新着情報 該当分野の新着記事を一覧表示

注目情報 該当分野の注目情報を一覧表示

手続きの記事一覧 各種手続きの記事を説明付きで一覧表示

FAQ FAQの情報を記事の分野ページで

一元的に一覧表示

記事ページサンプル

記事の日付表示 公開日と最新更新日の表示が可能

パンくずリスト 記事を登録したカテゴリ（分野）を表示

地図表示 Google Mapsを表示

分野ナビゲーション 分野一覧を表示

関連ワード クリックすると同じ関連ワードを設定した

記事の一覧を表示

問合せ先表示 記事についての問合せ先を表示

写真の貼付 写真のアップロードとリサイズが可能

添付ファイルの掲載 自動的にアイコンとファイルサイズを表示

ソーシャル連携 Twitter,Google+,Facebookとの連携

記事を分類する各種機能

記事 記事

分野 組織

トップ

分野 組織 ライフイベント カレンダー

記事

グローバルナビ

関連ワード マップ

カテゴリの項目として登録

分野（カテゴリ）を分類するしくみ

カレンダー、関連ワード、マップ（地図）の多彩な切り口から、記事を探せます。

記事ページへの多様なアクセスルートを自動的に生成し、利用者の利便性を向上します。

カテゴリは汎用的なしくみであるため、分野・組織・ライフイベント以外の分類を自由に定義できます。

記事登録の画面（記事タブ）

記事タイトルの入力 外部サイトや添付ファイルへ

の直リンクも可能

記事本文の入力 文字装飾、見だし設定、表作成などはCKEditorのボタンを

選択して実行

ファイルアップロード 添付ファイルや記事本文に貼り付ける画像をアップロー

ド

カテゴリの設定 追加により複数カテゴリの指

定も可能

関連ワードと 関連記事の指定

CKEditorのボタン

入力項目をタブで分類

各種の保存ボタン

付帯情報の入力

カテゴリ設定のプルダウン

記事登録-＜公開日＞タブ

公開画面に表示する「公開日」を任意に指定

記事の公開開始日または公開終了日を設定

記事登録-＜連絡先＞タブ

ユーザの課（グループ）を初期値として設定

室または担当は自由に入力して設定

記事登録-＜承認＞タブ

承認者を選択

必須承認者の設定、多段階承認の設定、課（ユーザグループ）ごとに異なる承認フローの設定などを開発中です。

記事公開の承認フロー

4

記事の承認フロー

記事の作成 記事の 承認操作

記事の 公開操作

承認依頼 承認完了 Webサーバにて公開

Web公開領域に転送

記事登録-＜イベント＞タブ

イベントカレンダー独自のカテゴリを設定

イベントカレンダーに記事タイトルを掲載できます。 イベントカレンダーの記事タイトルをクリックすると、記事本文が表示されるようになります。

記事登録-＜地図＞タブ

地名で地図を検索して表示します。

地名のタイトルを入力します。

マーカーを複数設定できます。

記事登録-＜携帯＞タブ

PC向けページとは異なる内容を携帯ページ向けに表示したい場合、この入力フォームから携帯向けの記事を入力します。

携帯向けの内容を入力

記事登録-＜オプション＞タブ

公開画面の記事URLのうち、ディレクトリ部分を変更できます。

PC・スマートフォン、携帯のそれぞれの記事ページを作成するかどうかを設定します。

Metaタグのパラメータを設定します。

自分が所属しているユーザグループ以外に、記事の編集権限を与えたい場合に設定します。

サイトのページ構成

トップページ 第2階層ページ 記事ページ

固定ページで自由に作成

記事コンテンツが自動的にインデックスを生成

記事コンテンツが自動的にページを生成

管理画面メニュー

コンテンツ 記事などのコンテンツへのデータの入力・編集など データ サイト内の共通データの管理 デザイン サイトを構成するHTMLやCSSの入力・編集 ディレクトリ 物理ディレクトリの作成、固定ページの作成 ツール キーワード検索、リンクチェック サイト サブサイトの作成、大規模災害対応、コンセプトの作成・管理 ユーザ CMS利用ユーザの管理、ユーザグループの管理、権限設定 設定 辞書、言語、メール動作確認

ディレクトリメニュー

ディレクトリメニューでは、物理的ディレクトリと物理ページの一覧が表示される。

ページ/ディレクトリの新規作成

固定ページの作成

ページ/自由形式を選択

ページ作成後、編集してファイル名を入力

固定ページの編集画面

レイアウトの一覧画面

レイアウトの編集画面

PC、携帯、スマートフォンのレイアウトを個別に登録

#container

header#pageHeader#pageHeaderContainer

#pageHeaderBody

nav#pageNav#pageNavContainer

#pageNavBody

#main

#wrapper

#menu #content #links#menuContainer #contentContainer #linksContainer

#menuBody #contentBody #linksBody

footer#pageFooter#pageFooterContainer

#pageFooterBody

レイアウトの構造

レイアウトとピースの関係

ピースの一覧画面

自由形式のピースはHTMLを直接記述

ピースごとに公開/非公開の設定が可能

コンセプトの設定

コンセプトに含まれるコンテンツ、レイアウト、ピース

コンセプトはコンテンツ、レイアウト、ピースなどのアイテムを格納する論理的なフォルダです。

レイアウトは記述されているピースを自己のコンセプトから探します。

自己のコンセプトに該当する名前のピースが存在しない場合、上位のコンセプトの中を探します。

このしくみにより、サイト内で共通に利用するピースなどの要素はルートのコンセプトに格納して参照することができます。

共通に利用しているピースの内容を一部のレイアウトのみ変更したい場合は、そのレイアウトが含まれるコンセプトに同じ名前のピースを配置すると、内容を差し替えることができます。

コンセプトの切り替えプルダウン

分野一覧と分野の登録画面

コンテンツによるページの自動生成

利用するコンテンツを設定

記事コンテンツ

汎用カテゴリタイプ・コンテンツ

汎用カレンダー・コンテンツ

マップ・コンテンツ

カテゴリページを生成

カテゴリページを生成

マップページを生成

記事ページを生成

記事コンテンツによる記事ページの自動生成

生成するディレクトリ ＜ドメイン名＞/docs/2013042600013/ 2013042600013は記事を最初に保存したときのタイムスタンプ 0001は日ごとの連番 最後の3はチェックコード ファイル名はindex.htmlとなる。

記事コンテンツが自動生成する内容を組み込む記述

カテゴリタイプ・コンテンツによるカテゴリページの自動生成

生成するディレクトリ ＜ドメイン名＞categories/bunya/todokede/inkan/ カテゴリのIDをディレクトリ名として生成する。 ファイル名はindex.htmlとなる。

カテゴリタイプコンテンツが自動生成する内容を組み込む記述

記事コンテンツおよびピースによる画面表示

記事コンテンツ 記事ページを生成

記事コンテンツと連動するピース

記事コンテンツが生成するコン

テンツ ［［content]]

自由形式の ピース

カテゴリタイプ・コンテンツおよびピースによる画面表示

カテゴリタイプ コンテンツ

カテゴリページを生成

カテゴリコンテンツと連動するピース

カテゴリタイプ・コンテンツが生成するコンテンツ ［［content]]

自由形式の ピース

何のカテゴリのページかにより、ピースの挙動が変わる

イベントカレンダーでの記事表示

マップコンテンツでの記事表示

地図を設定した記事を一覧表示

複数の記事コンテンツの記事を合成して一覧表示

「お知らせ」と「手続き」で記事コンテンツを別に作成

「お知らせ」の記事コンテンツ

「手続き」の記事 コンテンツ

カテゴリコンテンツ

複数の記事コンテンツをカテゴリコンテンツで集約できます。

「FAQ」の記事 コンテンツ

「お知らせ」と「手続き」で異なるカテゴリ分類を設定可能

「お知らせ」の記事登録画面 「手続き」の記事登録画面

次のような条件の登録画面を構成できます。 ・お知らせの記事：ライフイベントには登録できない。 ・手続きの記事： 注目情報には登録できない。

訪問者別のグローバル・ナビゲーション

「くらしの手引き」に含まれる分野を一覧表示

下記一覧の分野の注目情報の記事

下記一覧の分野を設定した記事

分野「税金」を複数のグローバルナビに表示

ZOMEKIではグローバルナビを分野を分類するしくみと考えました。 グローバルナビを目的別に設定し、目的にあった分野を設定します。

グローバルナビの各ページにおいては、該当する分野の記事一覧を表示します。

「グローバル・ナビ」と「記事分野」を切り離し、関連づけ

ひとつの分野を複数のグローバルナビに割り付けることができます。

グローバルナビにカテゴリを割り付ける画面

大規模災害時モード

各種サイトの事例

JISX8341-3:2010への対応方針 等級 項目 CMS CMSチェック サイト構築 記事作成 素材作成 フォーム入力 マルチメディア

7.1.1.1 A 非テキストコンテンツに関する達成基準 ◎ ○7.1.2.1 A 収録済みの音声しか含まないメディア及び収録済みの映像しか含まないメディアに関する達成基準 ◎ ●7.1.2.2 A 収録済みの音声コンテンツのキャプションに関する達成基準 ◎ ●7.1.2.3 A 収録済みの映像コンテンツの代替コンテンツ又は音声ガイドに関する達成基準 ◎ ●7.1.2.4 AA ライブの音声コンテンツのキャプションに関する達成基準 ◎ ●7.1.2.5 AA 収録済みの映像コンテンツの音声ガイドに関する達成基準 ◎ ●7.1.3.1 A 情報及び関係性に関する達成基準 ○ ○ ○ ○7.1.3.2 A 意味のある順序に関する達成基準 ○ ◎7.1.3.3 A 感覚的な特徴に関する達成基準 ○ ◎7.1.4.1 A 色の使用に関する達成基準 ○ ○ ○ ○7.1.4.2 A 音声制御に関する達成基準 ◎7.1.4.3 AA 最低限のコントラストに関する達成基準 ○ ◎ ○7.1.4.4 AA テキストのサイズ変更に関する達成基準 ◎ ○7.1.4.5 AA 画像化された文字に関する達成基準 ◎ ○7.2.1.1 A キーボード操作に関する達成基準 ○ ○7.2.1.2 A フォーカス移動に関する達成基準 ○ ○7.2.2.1 A 調整可能な制限時間に関する達成基準 ◎ ●7.2.2.2 A 一時停止，停止及び非表示に関する達成基準 ○ ○7.2.3.1 A 3回のせん（閃）光又はいき（閾）値以下に関する達成基準 ○ ○7.2.4.1 A ブロックスキップに関する達成基準 ○7.2.4.2 A ページタイトルに関する達成基準 ◎7.2.4.3 A フォーカス順序に関する達成基準 ○ ○7.2.4.4 A 文脈におけるリンクの目的に関する達成基準 ○ ○ ○ ○7.2.4.5 AA 複数の到達手段に関する達成基準 ◎ ○ ○7.2.4.6 AA 見出し及びラベルに関する達成基準 ○ ○ ○7.2.4.7 AA 視覚的に認識可能なフォーカスに関する達成基準 ○ ○7.3.1.1 A ページの言語に関する達成基準 ◎7.3.1.2 AA 部分的に用いられている言語に関する達成基準 ◎7.3.2.1 A オンフォーカスに関する達成基準 ○ ○ ●7.3.2.2 A ユーザインタフェースコンポーネントによる状況の変化に関する達成基準 ○ ○ ●7.3.2.3 AA 一貫したナビゲーションに関する達成基準 ◎ ○7.3.2.4 AA 一貫した識別性に関する達成基準 ◎ ○7.3.3.1 A 入力エラー箇所の特定に関する達成基準 ◎ ●7.3.3.2 A ラベル又は説明文に関する達成基準 ○ ○ ○7.3.3.3 AA 入力エラー修正方法の提示に関する達成基準 ◎ ○ ●7.3.3.4 AA 法的義務，金銭的取引，データ変更及び回答送信のエラー回避に関する達成基準 ◎ ○ ●7.4.1.1 A 構文解析に関する達成基準 ○ ○ ○7.4.1.2 A プログラムが解釈可能な識別名，役割及び設定可能な値に関する達成基準 ○ ○

JISX8341-3:2010の基準への準拠は、CMSが生成するHTMLタグやフォーム処理などのシステム、Webサイトを構築するHTML/CSS、職員の方が入力する記事の内容と利用する素材さらには、その内容のCMSによるチェックなど、多くの要素の総和により実現します。上記の図にてCMSの◎の項目はCMSの機能により主体的に達成する基準です。またZOMEKIには基準を満たすサイト構築のテンプレートデータがあり、基準を満たすサイト構築が容易に行えます。

今年秋頃までに、CMSで記事の内容をチェックする機能を大幅に強化する予定で、総合的な品質がかなり向上すると考えています。

今年の開発予定

サイトブリッジ株式会社概要 http://www.sitebridge.co.jp/

ZOMEKIについてのお問い合わせは、下記までお願いします。

市町村公式サイト、地域・観光ポータルの構築などを承っております。