Ruby on Railsによる徳島県ホームページ作成システムの開発と今後の展望

～徳島県CMS「Joruri（ジョールリ）」のオープンソース公開に向けて～

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

キーワード

・Ruby on Rails・徳島県ホームページ・CMS・Joruri（ジョールリ）・オープンソース公開・（株）アイ・ディ・エス

(株)アイ・ディ・エスの会社概要

事業内容　Ｗｅｂシステムの開発設立　２０００年３月２３日資本金　２，８００万円社員数　２０人

初期のＷｅｂサイト開発の状況

■個々のサイトをゼロから開発２０００年　徳島新聞社様　・就職マッチングサイト「ゴーオン（現カモンウェブ）」　・公式携帯サイト２００１年　徳島新聞社様　・ショッピングサイト「とくしまショウ」

・プログラムの共通化が困難・プログラムとデザインが混在

Webサイト開発のための共通プラットフォームが必要

徳島新聞社様就職マッチングサイト「カモンウェブ」（旧ゴーオン）

BLOGによるＷｅｂサイト開発へ

■ブログシステムの開発を受託地域ブログサイト「beトクシマ」をベースに各種ホームページを制作　　・プログラムとデザインを完全に分離　・プログラム部品を標準化　・スタイルシートにより自由度が拡大

共通プラットフォームの有用性を実感 地域ブログサイト

「beトクシマ」

徳島大学様ホームページの事例

日経BPコンサルティング全国大学サイト・ユーザビリティ調査2008/2009にて全国１位を獲得

ブログで実現できる効用を確認・記事の更新が簡単に行える　（日常の運用が円滑）・SEO効果が高い　（フルスタイルレイアウトのため）・サイトの構築を管理画面から行える　（専用ソフトウェアは不要）・全ページに同じ内容を掲載するなどの作業が容易に行える　（ユーザービリティ対策が簡単）

東京への進出と撤退

＜東京での事業活動＞２００５年３月　　受託開発の業務開拓のため、東京へ進出　（東京都墨田区）２００６年７月　　サイトブリッジ社設立　（東京都渋谷区富ヶ谷）　　　　　　　　　　サイトブリッジ・ブログのライセンス販売に注力　　　　　　　　　　　（ソフトウェア一式８０万円、ＰＨＰソースコード付き）２００６年１１月　目黒駅前に事務所を移転２００７年７月　　東京向け地域ブログサイト、「beTOKYO」を開設

２００８年３月　　目黒の事務所を閉鎖、東京から撤退

・インターネットを使った商品知名度の向上を図るべき。・ＣＭＳ購入希望者の製品知識は豊富で、製品への要求レベルは高い。・ソフトウェア単体のライセンス販売は容易ではない。

Ｗｅｂサイト制作・管理者の要求ステップ

■第一ステップ＜公開Ｗｅｂ画面＞　　・SEO効果・ユーザビリティ　　・パーマリンク、ＲＳＳ配信＜制作・保守機能＞　　・更新が簡単、サイトの修正が簡単

■第二ステップ＜大規模サイト向けの高度な運用管理機能＞　　・複数の管理者による同時作業が可能　　・制作環境と公開環境が分離されており、部分反映が可能　　・複数サイトの管理、制作データの書き出し/読み込み　　・ユーザーごとの詳細な権限管理　　・操作のロールバック、履歴管理

■第三ステップ自由度の高いデータ定義機能、ＤＢ開発ツール機能、サイト企画用プロトタイプ制作機能、ちらしなどＷｅｂページ以外の制作、マクロ機能

徳島県庁様向けＣＭＳの開発に着手

２００８年５月　徳島県庁ホームページ再構築コンペの公告・島根県CMSを元に改善・Ruby on Railsにて開発し、オープンソース化・CMSですべての業務を完結できること。・ノーツシステムのリプレース

　　　　　 ６月　　弊社ＩＤＳが再構築業務を受注

２００９年３月　　ＣＭＳを開発し納品

　　　　　　４月　新ホームページへのデータ移行業務を受注

　　　　　１０月　新ホームページに切り替え予定

　　　　　　　　　　　現在、データ移行などの切り替え準備中

現在の徳島県庁様ホームページ

＜動作環境＞・ロータスノーツ（グループウェア）でＷｅｂサイトを構築・ノーツクライアントから記事を投稿＜利点＞・グループウェアであるため、ユーザー管理や画面作成の機能が豊富＜欠点＞・システムがやや不安定・ページのＵＲＬが長く複雑・携帯連動ができない・RSS配信、Googleマップ対応が困難・画面のレイアウト変更が難しい・Ｗｅｂユーザービリティを実現しにくい

新しい徳島県庁様ホームページ

グローバル・ナビゲーション

（分野の大分類の切替）

ふりがな、読みあげコマンド

イベント・カレンダー

上部広告エリア

記事の属性一覧（一部のみ表示）

記事の分野一覧（大分類・小分類）

記事の地域一覧（エリアのみ表示）

新着記事一覧

記事の組織一覧ページへのリンク

新徳島県庁ホームページの第二階層

分野ページ

地域ページ

属性ページ

組織ページ

新徳島県庁ホームページの記事ページ

パンくずリスト組織分野属性地域

記事の連絡先

添付ファイル

本文

タイトル

新しい徳島県庁様ホームページの構成

トップページ

組織トップページ

分野トップページ

属性トップページ

地域トップページ

記事ページ

ひとつの記事を４種類の第二階層ページから閲覧

属性とは入札、採用といった記事の種類

すべての記事ページ(HTMLファイル)を

/docs/に配置

今回新しく、地域別ページを新設

簡素化された第二階層のＵＲＬ

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

■組織ページ　　＜企画総務部＞http://www.pref.tokushima.jp/soshiki/kikakusoumubu/

＜企画総務部　情報システム課＞

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

■分野ページ ＜くらし＞

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

＜くらし　子育て＞

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

■地域ページ ＜徳島市＞http://www.pref.tokushima.jp/chiiki/tokushima/

●従来のＵＲＬ（企画総務部）http://www.pref.tokushima.jp/Generaladmin.nsf/WMV/B011?opendocument

記事ページのＵＲＬ

■記事ページのＵＲＬの例

　http://www.pref.tokushima.jp/docs/2009081700012/

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

●従来の記事のＵＲＬ　＜第４回徳島県OSS勉強会の開催について＞　http://www.pref.tokushima.jp/Generaladmin.nsf/topics/201F82892A81DDDB492575FC0019EF28?opendocument

ＰＣと携帯サイトのコンテンツ連動

・現在、徳島県携帯サイトは、３キャリアの公式サイト

・ＰＣと携帯でほぼ同じコンテンツ構成

・ＰＣ向けの記事を携帯向けに加工して携帯に出力

・携帯向けのサイト構成をＰＣとは独立して作成することが可能

新ホームページの特徴

■新ホームページの特徴

　＜Ｊｏｒｕｒｉによる特徴＞　　　・各種ページのＵＲＬが簡素でわかりやすい　　・ＰＣ向けの記事を自動的に携帯サイトに掲載できる　　・フルスタイルシートによるレイアウトによりＳＥＯ効果が高い　　　（画面レイアウトにテーブルタグを使っていない）　　・組織、分野、属性、地域ごとの細かいＲＳＳ（Ａｔｏｍ）配信が可能　　＜リニューアルしたホームページの特徴＞　　・分野のグローバルナビゲーションを配置　　・トップページに大きなサイズの写真を配置　　・新着記事をタブで切り替え表示　　・イベントカレンダー機能を開発　　・文字サイズや背景色の変更、ふりがなをふる、音声読み上げ機能　　・キッズページを新設

記事投稿画面

記事のタイトル

記事の内容

添付ファイル

言語の設定

文字装飾など

リンクチェックなど

分野・属性・地域の設定注目・新着・カレンダー

表示など

地図の貼り付け

関連ワード・関連文書の設定

携帯向け記事の入力

承認者の設定

連絡先の設定

公開開始・終了日時の設定

記事投稿　［タイトルと内容の入力］

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

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

記事投稿　［ファイルアップロード］

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

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

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

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

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

関連する記事へのリンクを自動的に設定

関連ワードで類似の記事の一覧表示が可能

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

記事タイトルをイベントカレンダーに表示

記事投稿　［Googleマップの組み込み］

取得タグをクリックして、地図の位置と縮尺を取り込む

地名を検索して表示範囲を設定

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

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

記事投稿　［携帯向けの記事投稿］

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

記事投稿　［連絡先、公開日時、承認者］

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

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

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

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

記事投稿　［承認待ち一覧での表示］

記事投稿　［承認待ち詳細での承認処理］

記事投稿　［公開待ち詳細での公開処理］

記事投稿　［全庁一覧の表示］

記事投稿　［公開画面での表示］

記事投稿によるサイト運用

■基本的なサイトの運用は、記事の投稿と承認・公開　・日々更新する情報は、記事として投稿して、サイトに掲載　　＜サイトのコンテンツを記事で構成する利点＞　・記事の投稿画面には、ファイル添付、地図などの豊富な機能がある。　・承認、公開のワークフローがある。　・記事一覧の画面で、記事を一元管理できる。　・編集、削除などの操作が標準化されている。

　＜徳島県庁ホームページの記事数＞　・約６０００

ＢＬＯＧもＣＭＳも、記事といった標準的なコンテンツフォーマットを採用していることに、コンテンツ管理におけるメリットがある。

記事以外のコンテンツの編集

■文言の変更　・ＱＲコードの説明

■リンク集へのリンク項目の追加　・注目情報　・関連情報　・関連リンク

■バナー画像の変更　・広告バナー　・告知バナー

■コンテンツの位置の入れ替え　・徳島県の地図を右に移動など

■分野・属性・地域の追加　・関連する第二階層ページの作成

新ホームページのテンプレート構造

テンプレートの枠組み ■ＨＴＭＬでの記述<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:汎用ブロックレベル要素

トップページのピース配置

管理画面［デザイン-ピース］　ピース一覧

管理画面［デザイン-ピース］　自由形式

管理画面［デザイン-ピース］　リンク集

管理画面［デザイン-ピース］　リンク集編集

管理画面［デザイン-テンプレート］　編集

<div id="container"><div id="header"></div><div id="banner"></div><div id="main"><div id="wrapper"><div id="content"></div><div id="menu">[[piece/chiiki-map]]</div></div><div id="links"></div></div><div id="footer"></div></div>

Ｊｏｒｕｒｉでのサイト構造の管理

■サイト　・サブドメインの切り替え　　徳島県庁ホームページは、ＰＣサイトと携帯サイトはサブドメインが異なる。

■ディレクトリ　・ＵＲＬの階層構造と階層に存在するページ

■デザイン　・ページに対応するテンプレートと、テンプレートに配置されているピース

■コンテンツ　・記事のように複雑な構造を持つもの。単独でページを構成できる。

■データ　・テキスト、画像ファイルなど

第二ステップの要求への対応

■第一ステップ＜公開Ｗｅｂ画面＞　　・SEO効果・ユーザビリティ　　・パーマリンク、ＲＳＳ配信＜制作・保守機能＞　　・更新が簡単、サイトの修正が簡単

■第二ステップ＜大規模サイト向けの高度な運用管理機能＞　　・複数の管理者による同時作業が可能　　・制作環境と公開環境が分離されており、部分反映が可能　　・複数サイトの管理、制作データの書き出し/読み込み　　・ユーザーごとの詳細な権限管理　　・操作のロールバック、履歴管理

■第三ステップ記事のポータビリティ向上、ＤＢ開発ツール機能、サイト企画用プロトタイプ制作機能、ちらしなどＷｅｂページ以外の制作、マクロ機能

今までの説明の内容ＢＬＯＧでも、

ある程度実現が可能

ＣＭＳ独自の領域

複数の管理者による同時作業

論理的なフォルダによる作業環境の分離とコンテンツの絞り込み

制作環境と公開環境の分離

公開Web画面データ検索

外部CMS

CMS管理画面

外部公開用

内部CMS

内部作業用検索問合せ

検索結果

■徳島県庁様ホームページでは、サーバーを分離

ＨＴＭＬファイルとＤＢのレコードを同時に外部ＣＭＳにコピー

複数サイトの制作

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

統合ＣＭＳ「Joruri」

総合サイト

部門サイトＡ 部門サイト

Ｂ

目的別サイトＡ

目的別サイトＢ

制作者Ａ

制作者Ｂ

管理者Ａ

管理者Ｂ

組織内のＷｅｂコンテンツを統合的に管理

制作データの書き出し・読み込み

Linux系OS（CentOS）

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

徳島県CMS「Joruri」　（汎用CMS)

徳島県庁ホームページ　（CMSアプリケーション)

■Joruriの稼働環境

ホームページの構成データのみを独立して流通することが可能

オープンソース公開

■２０１０年３月にオープンソース（ＧＰＬ）として公開予定

オープンソースとは？　・ソフトウェアをインターネットから無料でダウンロード　・ソフトウェアのソースコードを配布　・ソースコードの解析、改変が可能　・改変したソフトウェアの配布が可能

■ＧＰＬ　・ GNU General Public License　・改変したソフトウェアもＧＰＬとなる

■収益モデル　・ソフトウェアのカスタマイズ　・導入サポート、コンサルティング　・マニュアル本、操作研修

Ｊｏｒｕｒｉの由来

Japan Originated Ruby-based RESTful and Integrated CMS（日本から生み出され、ルビーをベースにし、REST規約に従った、統合されたCMS）

Ruby-based Ruby on Rails, Rubyを利用RESTful 管理画面のＡＰＩにＲＥＳＴを採用Integrated CMS 管理画面からすべての操作が可能

jｏｒｕｒｉ.orgのサイト

Ｊｏｒｕｒｉの基本仕様

・プログラムステップ数　19,476ステップ

詳細はＪｏｒｕｒｉ情報サイトhttp://joruri.org/をご参照ください。

まとめ

弊社（株）アイ・ディ・エスは、Ｊｏｒｕｒｉを開発を通じ、ＣＭＳの技術探求を行うとともに、オープンソースコミュニティおよびRuby ,Ruby on Railsユーザーコミュニティに貢献したいと考えております。