徳島県と共同開発したRailsベースのCMS「Ｊｏｒｕｒｉ」のご紹介

２０１０年３月１３日

株式会社アイ・ディ・エス 貴田秀資

徳島県の場所

徳島県徳島市

自己紹介

貴田秀資（きだひでし）

株式会社 アイ・ディ・エス設立 ２０００年３月２３日社員数 ２６名 （サイトブリッジ（株）を含む）

ホームページ制作が大好きなWebシステムの開発会社

アジェンダ

１．Joruri開発の経緯

２．徳島県ホームページの構成

３．記事登録

４．サイト制作

５．今後の方向性など

２００９年１０月２６日リニューアル公開

本年３月２３日オープンソース公開予定

Joruri開発の経緯

２００８年５月 徳島県ホームページ再構築コンペ公告・島根県CMSを元に機能拡張・Ruby on Railsにて開発し、オープンソース化・CMSですべての業務を完結できること。・ノーツシステムのリプレースを行うこと。６月 再構築業務を弊社IDSが受注

・結果的に、すべてゼロから開発

２００９年３月 ＣＭＳを開発し納品４月 新ホームページへのデータ移行開始１０月 新ホームページに切り替え

２０１０年３月２３日 オープンソース公開予定

徳島県ホームページトップ

記事タイトル

地域ページ

組織ページ

分野ページ

４つの種別で記事を分類

トップページ

分野ページ

組織ページ

属性ページ

地域ページ

記事ページ

４つの種別で記事を分類

Joruriのコア機能として実装

各第二階層ページ

トップページ（上部）

グローバルナビゲーション（分野大分類の選択）

記事タイトルの一覧（タブで分野・属性を選択）

地域エリアの選択

地域一覧へ組織一覧へ

トップページ（下部）

分野一覧（大分類／小分類）

属性の選択

属性によるコーナー分け

組織 企画総務部のページ

分野/組織/属性/地域ページ

地域属性

組織 分野

記事ページの構成

■パンくずリスト

■添付ファイル （ファイル種別とサイズの表示）

■Googleマップ

記事ページのＵＲＬ

■記事ページのURLは数字１３桁のディレクトリ表記

＜記事ページのＵＲＬの例＞

「にし阿波観光案内人」養成講座についてhttp://www.pref.tokushima.jp/docs/2010010800161/

徳島県のドメイン 記事を保存したディレクトリ

２０１０年０１月０８日００１６番目の記事

ＹＹＹＹＭＭＤＤＳＳＳＳＭ西暦，月，日，日ごとの連番（４桁），最後ひと桁は、チェックデジット（モジュラス10 ウェイト3・1（M10W31））

第二階層ページのＵＲＬ

■トップページ http://www.pref.tokushima.jp/

■分野ページ ＜くらし＞

http://www.pref.tokushima.jp/bunya/kurashi/

＜くらし 子育て＞

http://www.pref.tokushima.jp/bunya/kosodate/

■組織ページ ＜企画総務部＞

http://www.pref.tokushima.jp/soshiki/kikakusoumubu/

■属性ページ ＜入札・調達・売却・契約＞

http://www.pref.tokushima.jp/zokusei/nyuusatsu/

■地域ページ ＜徳島市＞

http://www.pref.tokushima.jp/chiiki/tokushima/

イベントカレンダー

記事の属性を表示

Joruri CMSによる一元管理

Joruriの管理範囲

外国語サイト（英・中・独・韓） 議会ホームページ

コールセンターFAQ

ホームページ主要部分

申請処分情報DB

「行政手続きの手引き」のDB検索

データベース検索のシステムも構築可能

コールセンターFAQの検索画面

ＰＣと携帯サイトのコンテンツ共通化

携帯サイトの構成携帯トップページ 記事ページ分野ページ （観光・物産）

Joruri CMSログイン画面

ユーザーIDは職員番号LDAPで認証

サポート情報へのリンク

今回の管理画面の説明は、徳島県バージョンで行います。オープンソース版は少し画面が異なります。

記事一覧画面

記事登録画面

■タイトルと内容の入力

■ファイルアップロード

■分野・属性・地域，その他設定

■Google マップの組み込み

■携帯向けの記事登録

■連絡先、公開日時、承認者

記事登録 ［タイトルと内容の入力］

貼り付けた写真はドラックしてサイズの変更が可能

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

記事登録 ［ファイルアップロード］

参照ボタンをクリックして、ファイル選択ダイアログを開く

アップロードしたファイルは、ファイルマネージャに一覧表示

写真ファイルは添付と貼り付けが可能

記事登録 ［分野・属性・地域，その他設定］

指定した市町村のページに記事を表示

関連記事の設定

関連ワードの設定

分野は最大３つまで指定可能

イベントカレンダーへの表示

記事登録 ［Googleマップの組み込み］

地図を取り込む地名を検索して位置と縮尺を設定

取得タグをクリックして、マーカーの位置を取り込む

マーカーの位置をマウスでクリック

記事登録 ［携帯向けの記事登録］

内容を入力しなければ、PC用記事をそのまま携帯ページに表示

記事登録 ［連絡先、公開日時、承認者］

記事内容についての連絡先を設定

下書き保存と公開向けの保存の選択が可能

承認者を最大５名まで指定

公開開始・終了日時を１５分単位で指定

記事登録 ［承認待ち詳細での承認処理］

詳細画面で記事内容の確認して承認

承認依頼されたユーザーの画面には、承認ボタンを表示

記事登録 ［承認待ち一覧での表示］

同一課内であれば、他の人の「承認待ち」の記事一覧を閲覧可能

■承認待ちの記事一覧

記事登録 ［公開待ち詳細での公開処理］

■公開ボタン

承認後、記事登録者が公開ボタンを押して記事を公開

記事登録 ［全庁一覧の表示］

公開されているすべての記事を表示

登録した記事

記事登録 ［公開画面での表示］

記事に設定した組織、分野、属性、地域によりパンくずリストを自動生成

記事以外のコンテンツの更新

日常の運用では記事登録のみでOK

左隅のコーナーの更新

このコーナーを変更する場合

徳島県ホームページのテンプレート構造

■ＨＴＭＬでの記述<div id="container"><div id="header"></div><div id="banner"></div><div id="main"><div id="wrapper"><div id="content"></div><div id="menu"></div></div><div id="links"></div></div><div id="footer"></div></div>

div:汎用ブロックレベル要素

ブログでは一般的なHTML構造

テンプレート内部のピース配置

ピースを配置してコーナーを制作

管理画面 コンセプト選択機能

Webページを選択（コンセプト選択）

Webサイトを選択

管理画面 ピース一覧

このピースが編集対象のコーナーに該当

管理画面 ピース編集

管理画面 ピース編集 画像アップ

ピース編集画面でのファイルアップロード

管理画面 テンプレート編集 CSS編集

スタイルシートを記述

企画総務部のテンプレート編集画面

管理画面の特徴

■サイトの階層構造を管理

組織－部局－課分野－大分類－小分類

階層の上下構造をCMSが理解し、課のページで見つからないデータは、部局のページを探す。

■複数の記事形式を定義可能記事として登録するデータ形式を複数定義できる。

複数サイトの管理への対応

■サイト専用の管理ツールから脱却複数サイトを管理する自治体、大学、制作会社などの条件に適合

統合ＣＭＳ「Joruri」

総合サイト

部門サイトＡ 部門サイト

Ｂ

目的別サイトＡ

目的別サイトＢ

制作者Ａ

制作者Ｂ

管理者Ａ

管理者Ｂ

組織内のＷｅｂサイトを統合的に管理

Webサイト構成データをCMSから分離

Linux系OS（CentOS）

Ruby／Ruby on Rails (言語／フレームワーク）

Joruri CMS （汎用CMS)

徳島県

ホームページ（Joruri構成データ)

徳島県庁

グループウェア（ Joruri構成データ)

■ホームページ構成データHTMLテンプレート、スタイルシート、アイコン画像、分野・属性などの定義、ページ内説明テキスト

Joruri 情報サイト

http://joruri.org/

3月２３日、このサイト

にオープンソースとして、Joruriを公開予定

Joruriグループウェア