More Related Content
Similar to Plone4を利用した熊本大学公式Web/教職員Webサイトの再構築 (20)
More from Shigeo Honda (9)
Plone4を利用した熊本大学公式Web/教職員Webサイトの再構築
- 1. Plone Educational Symposium in Tokyo
2013
Plone4を利用した熊本大学
公式Web/教職員Webサイトの
再構築
永井孝幸1)、坂本瑞穂2)、伊澤睦2)、松葉龍一2)
1)熊本大学総合情報基盤センター
2)熊本大学 eラーニング推進機構
2013年2月22日
明星大学 - Open Source Conference 2013 Tokyo/Spring
- 2. Web技術を用いたサービス提供
の
ニーズは増加している
• 研究成果の公開
• オンライン学習環境の提供 • 大学の持つ資産(知的、物
(eラーニング) 的)
の提供
• 研究成果の教育への 研究
素早いフィードバック • 広い意味での学びの場の提供
• 情報交換と共有
教育 社会貢献
• 情報資産量の増加
• 情報改訂速度の増大
• 組織的な情報管理の重要性
• 組織、職員間での情報共有
• 必要情報の素早い取得
Copyright©KumamotoUniversity 2
- 5. 学内製?
• 以前、ほぼ同じ意図で業者製CMSを導入してい
た(2008年~)
• 学内業務とすり合わせがうまくいかず、想定
したようには機能(運用)できなかった。
• 結果、発信者ベースの情報提供は普及せず。
(研修会もしましたが・・・)
Copyright©KumamotoUniversity 5
- 7. することは、…いっぱい
要望は、3つ…でも、システム条件に落とすと16個!
堅牢システムの構築
モジュールのカスタマイズは必要
セキュリティ対策も必須
システム連携
Webデザインも大変
3タイプのユーザ(公式、教職員サイトの閲覧者、情報提供者
)
部署、業務(提供情報)は多岐にわたっている
閲覧者ごとに、Webサイト利用のニーズが違う
情報提供者のITスキルが…
汎用ブラウザも、いっぱいある
あれこれと学内調整
Copyright©KumamotoUniversity 7
- 8. 三者間での同時並行・協同作業
Webデザイン
http://plone.org/
組織内調整 システム構築
CMSカスタマイズ
運用体制整備
システム連携
Copyright©KumamotoUniversity 8
- 9. Webデザイン
Webデザイン
Plone 機能を使った CSSによる
カスタマイズ カスタマイズ
Copyright©KumamotoUniversity 9
- 10. Webデザイン システム構築 組織内調整
改修にあたってのポイント
ウェブアクセシビリティ・ユーザビリ
ティ向上
公式サイトデザインを教職員サイトが踏
襲
メニューの配置等は公式サイト閲覧者の
利便性を優先
大学Webサイト格付け調査の総合ポイン
トをUPさせる Copyright©KumamotoUniversity 10
- 11. Webデザイン システム構築 組織内調整
Webデザイナー視点で
要 足りない機能のアドオンインス
望 トール
に コラージュ、フォーム、CKEditor 、Quick Upload・・・
対
応 熊大スキンの作成
一覧に日付やタグを出す、コンテンツタイプ・表示形式の追
加
エディタのカスタマイズ
コンテンツツリー再設計(アドバイス)
提
案 入力テンプレートの作成
メニュー項目をテキストに
Copyright©KumamotoUniversity 11
- 12. Webデザイン システム構築 組織内調整
コンテンツツリーを再設計す
る
コンテンツツリーの再設計サイト設計の基本!
【目的】情報の整理・所有者を明確にする
とはいえ
クライアント(事務組織)でなけれ
ば 大学Webサイトの特異点
わからないことが多い
コンテンツツリーの作成はクライアント側(広
報U)
デザイナーとしてアドバイス
時間かかった!Copyright©KumamotoUniversity 12
- 13. Webデザイン システム構築 組織内調整
主に活用しているPloneの機能
Ploneのコレクションはデータベースにおけるレポートや
検索クエリと同じように働きます。コレクションを使用す
コレクション ることで、コンテンツを動的にソートしたり表示したりで
きます。 Plone Users Group Japan「Plone4ユーザーマニュアル」より引用
タグによるコンテンツの分類を行いたい
場合に使用します。ここで追加したタグ
タグ はコンテンツの下部に表示され、各タグ
をクリックするとそのタグを持つコンテ
ンツが検索されて一覧表示されます。
「Plone 4 Book」より引用
Topページなどで、ニュース一覧と静的情報など複数の内
コラージュ 容を、1ページに表示したい時の対応方法
Plone Users Group Japan「ノウハウ集」より引用
Copyright©KumamotoUniversity 13
- 14. Webデザイン システム構築 組織内調整
情報を集約する
お知らせ・イベント、教職員サイト
コレクション
タ
グ
コラージュ
クリック • ページに内容にあったタグをつける
• タグや作成日などで検索してコンテンツ
最新情報
を集めてコレクションする を簡単に
閲覧・発
信
閲覧者:決まったページを見るだ
け
作成者:タグをつけるだけ
• タグはデフォルトでは一覧に出てこない
ので見えるようカスタマイズ
→公式サイト用と教職員サイト用を準備
コレクションのペー
タグ • 日付の書式もカスタマイズ
ジ
Copyright©KumamotoUniversity 14
- 15. Webデザイン システム構築 組織内調整
情報を集約する
タ
ポータル コレクション
グ
コラージュ
1ページ内に複数のコンテンツ
を表示できるコラージュ機能
を追加
• トップページ、部局トップペー
ジ、教職員サイトトップページ
など、ポータルになるような
ページに使用
• コラージュ機能は多用させない
ように管理者権限でしか追加で
きない
Copyright©KumamotoUniversity 15
- 16. Webデザイン システム構築 組織内調整
運用効率をアップする
作業状況一括管理 コレクション
タ
グ
コラージュ
サイト管理や業務の効率化
を図るために、サイト内の
ページ状態を一覧表示
• 承認中のまま公開されてい
ないなどの管理がしやすい
• 更新の行われていないペー
ジも見つけやすく、更新を
情報の鮮度がUP! 促しやすい
Copyright©KumamotoUniversity 16
- 17. Webデザイン システム構築 組織内調整
各部署用のフォームを設置
今までは管理部署のメールアドレスを書
いてあったが、どんなメールがどれくら
いきているのかサイト管理者は把握でき
なかった
問い合わせフォームを設
専門のサポート部門があるわけで
置
はないので各部署に飛ぶ必要があ
る
1. ページ管理部署とサイト管理者を入れたMLを
作成
2. ページ管理部署分のフォームを作成(62個)
3. 各ページごとにそれぞれのフォームを設置
Copyright©KumamotoUniversity 17
- 18. Webデザイン システム構築 組織内調整
移行作業は手動ですよ
残念ながら旧サイトからのコンテンツ移行は自動化できま
せん ・・・よね?
手動移行
作業人数:12~13人
ページ数:約1600ページ
期間:約600時間(移行のみ、確認含ま
ず) ちなみに
テンプレートを作成し、それに沿って移行するよう指
約1900ページ
示 2013年1月現在
移行→確認→確認(ダブルチェック)
Copyright©KumamotoUniversity 18
- 19. Webデザイン システム構築 組織内調整
Webデザイン
Webデザイン
Plone 機能を使った CSSによる
カスタマイズ カスタマイズ
Copyright©KumamotoUniversity 19
- 20. Webデザイン システム構築 組織内調整
入力をカンタンに!
ITスキルがばらばら
部署 • メールができる
• Wordが触れる
up up up
部署 広報 作成~up 程度のスキルに合わせ
部署 部署 部署
る
HTMLがわからなくてもOK
改修前 改修後
各部署が広報へ依頼 各部署の担当者が
ページ作成、UP 作成からUPまで
Copyright©KumamotoUniversity 20
- 21. Webデザイン システム構築 組織内調整
エディタ整備:CKEditor
• ツールバーのカスタマイズ(ツールは最小限)
※CKEditor3.6.1
• プルダウンメニューの表示とプレビュー画
面内の表示を同様に(CSSで上書き)
プレビュー画面
変更前 変更後
Copyright©KumamotoUniversity 21
- 22. Webデザイン システム構築 組織内調整
ページテンプレート
4種類のページテンプレート準備
標準ページ 目次ページ
お知らせペー イベントペー
ジ
Copyright©KumamotoUniversity
ジ
22
- 23. Webデザイン システム構築 組織内調整
スタイルの統一
デザインの統一のため使えるスタイルを絞る
見出し・リスト・ボッ
文字装飾 テーブル
クス 業者に発注して80万円/年
キラキラ画像デコレーション&トッピング防止
→上層部は不満らしいけど
ファイルへリンクを張ると
自動でアイコンが付く
教職員サイト
でも視認性UP
Copyright©KumamotoUniversity 23
- 24. Webデザイン システム構築 組織内調整
状態別スタイル
編集画面
編集ワークフ
ロー
に基いて変化
変更前
変更後
Copyright©KumamotoUniversity 24
- 25. Webデザイン システム構築 組織内調整
熊大スキンを作る
• 旧サイトのデザインを踏襲
要 • 左側からヘッダ部分に固定
望
• 訪問者別目メニューもヘッダ位置に移動
• バナーはシンプル&減らす
Schools Skin • Viewlet調整
• 3つのCSS
• base_properties(plone機能)活用
Copyright©KumamotoUniversity 25
- 26. Webデザイン システム構築 組織内調整
メニュー項目はテキスト&
CSS
• 音声読み上げにも対応(チェック済)
• 変更の度に画像を作らなくていいので更新が楽
見出しページタイト
ル
Copyright©KumamotoUniversity 26
- 27. Webデザイン システム構築 組織内調整
ナビゲーション
旧サイト 新サイト
• ページによってデザインが違
う?!
• 自分がどこにいるのかわからな
Copyright©KumamotoUniversity 27
- 28. 三者間での同時並行・協同作業
Webデザイン
http://plone.org/
組織内調整 システム構築
CMSカスタマイズ
運用体制整備
システム連携
Copyright©KumamotoUniversity 28
- 29. Webデザイン システム構築 組織内調整
CMS選定基準
• 前提条件
– オープンソースのCMSで内製
– 教職員数:約2,000人,担当部署:約40
• 要求事項
– ページ毎に編集・閲覧権限を指定可
– 編集ワークフローに対応
– CAS認証、LDAP連携が可能
– 10,000アクセス/分に対応可能
– コンテンツの時限公開開始に対応
– 等々
Copyright©KumamotoUniversity 29
- 30. Webデザイン システム構築 組織内調整
先生、セキュリティはどうしま
す?
• 2005/4/15 熊大Web • 望ましいCMS
– 脆弱性が尐ない
– アクセス制御が強固
– 保守が容易
– 長期サポート
Joomla? Drupal? Plone?
2011年3月決定 (Plone 4.0.3)
(後、Plone 4.0.5に更新)
Copyright©KumamotoUniversity 30
- 31. Webデザイン システム構築 組織内調整
内製って言いますけど
• 私(永井) ←達観
– 基本、情報屋(CS系)さんです
– 以前に新設大学の情報インフラ構築・運用経験
– RFC読んで、パケット眺めて、ソース読む
• 学内の状況 ←怖い物知らず
止める大人はいなかった
– 「インストールすれば動く」程度の理解
• postfix,samba,Apacheぐらいは触ってるけど...
\(^ ^)/
• 「動かないコンピュータ」のリスクを知らない
– 「先生、サーバー発注しときました!」
• 「システム構成決めてませんけど?(゜Д゜) 」
Copyright©KumamotoUniversity 31
- 32. Webデザイン システム構築 組織内調整
大学Webシステム構成
物理サーバ3
学外閲覧
「読み取り専用状
リバースプロキ
シ 学内閲覧 態」
(Varnish)
でも動くように改造
物理サーバ2
Ploneスレーブ
(Plone4+Apache) 閲覧用Plone
• 読み取り専用状態で動作
MySQLスレーブ
(read only運用)
LDAPスレーブ
(OpenLDAP)
• 編集用Plone停止中も動作
物理サーバ1
編集用Plone
LDAPマスター
MySQLマスター
(OpenLDAP) • 閲覧用Ploneへコンテンツをコピー
• RelStorageを利用
Ploneマスター
(Plone4+Apache) 学内編集
Copyright©KumamotoUniversity 32
- 33. Webデザイン システム構築 組織内調整
編集ワークフロー
• 学外公開用のワークフローを自作
差戻し
承認依頼 公開依頼
差戻し
制作者 承認者 総合管理者
• 新規原稿作成 • 最終原稿確認 • 学外公開承認 or 差戻し
• 既存ページ編集 • 学外公開依頼 or 差戻し • 文面の軽微な修正
• ワークフローの動作テスト用に各役割別のGmailアカウントを作
• 本当の業務用アドレスに送ると迷惑なので
Copyright©KumamotoUniversity 33
- 34. Webデザイン システム構築 組織内調整
コンテンツの時間指定公開
• 自明な言葉ほど要注意
– 「時間指定で公開するコンテンツって何?」
– 「入試の合格速報です」
– 「どれくらい正確な時刻に公開できればよい?
」
– 「フライングは絶対駄目。遅れるのは可」
• Ploneの標準機能でしょ?ーところが
– URIを知っていれば公開期間前でも閲覧できる
– 現状とても予想しやすいURIです orz
– ex. http://www.kumamoto-
Copyright©KumamotoUniversity 34
u.ac.jp/nyuushi/sokuhou/H25igakugoukaku4.pdf
- 35. Webデザイン システム構築 組織内調整
時間指定公開改良版
• 「公開待ち状態」を追加
– 公開時間がくるまで「管理者のみ閲覧可」
差戻し
承認依頼 公開依頼
private draft review
差戻し
即時公開
時間指定あり
状態はcronで自動更新
公開期間終了 公開期間開始
hidden published wait
公開終了 一般公開 公開時間待ち
Copyright©KumamotoUniversity 35
- 36. Webデザイン システム構築 組織内調整
Varnish連携
• 目的:入試合格発表の一斉アクセスに対応
• plone.app.caching
– コンテンツを「変更する」とVarnishにPURGEを要求
– コンテンツの「状態変更」は考慮していない
• 「公開時間が来ても古いキャッシュのまま」
• 「手作業で非公開にしてもキャッシュはそのまま」
– purge.pyのafterTransitionメソッドを修正
• 公開状態に変化があったらPURGEを要求
– 保険:30分毎に全キャッシュを破棄
Copyright©KumamotoUniversity 36
- 37. Webデザイン システム構築 組織内調整
遭遇した地雷
• 何これ???
– CSSが反映されない、無関係な画像が出る
– 他のユーザのセッションと入れ替わる
Copyright©KumamotoUniversity 37
- 38. Webデザイン システム構築 組織内調整
Ploneやめる?どうする?
• Plone 4.0.3固有の問題?
– Plone 4.0.9, Plone 4.1.2でも症状を確認
– ConflictErrorが多いと出やすい
• 深刻なバグなのにレポート出てないの?
– Does Plone/Zope deliver wrong content?(2011)
– crazy things happening to my graphics(2009)
影響を受けるのはPloneだが
• Zope側では把握していた 直すのはZope側
– dm.zopepatches.fix_responsewrite_conflict
1.0(2011)
– “Response.write is inherently unsafe in the face
of ConflictError. Copyright©KumamotoUniversity fix is not to use it38
The only reliable
- 39. Webデザイン システム構築 組織内調整
その他色々致命傷をデバッグ
• 特定日本語ファイルだけアップロード不可
– Pythonプロセスが異常終了
– unicodedata.normalize(Python本体)の不具合
– 該当処理をPyICUライブラリに置換
• 日本語添付ファイルが検索できない
– インデックス作成プロセスと通信できていない
– c2.transform.msoffice-1.0b3-py2.6.eggの修正
• Ploneの送信メールヘッダ不具合
– MIME-Versionが重複(postfixでエラーになる)
Copyright©KumamotoUniversity 39
- 40. Webデザイン システム構築 組織内調整
システム構築まとめ
• 全学Webでは各種ミドルウェア統合が必須
– CMSの知識(Python/Zope/Plone)では足りない
– KVM,OpenLDAP,MySQL,Apache,Varnish,postfix,
CAS,AppArmor,HTTrack,OpenVAS,etc.
• 構築・運用レベルの資料が無い
– 既存プラグインの正確な動作が不明
– 「あってはならない動作」の早期把握
• なんだかんだで700時間
– 会議、調査、構築、デバッグ、記録
Copyright©KumamotoUniversity 40
- 41. 三者間での同時並行・協同作業
Webデザイン
http://plone.org/
組織内調整
組織内調整 システム構築
CMSカスタマイズ
運用体制整備
運用体制整備
システム連携
Copyright©KumamotoUniversity 41
- 42. Webデザイン システム構築 組織内調整
情報(コンテンツ)所有者の明確化
ウェブによる情報発
信
を
通常業務化
Copyright©KumamotoUniversity 42
- 43. Webデザイン システム構築 組織内調整
マニュアル、ガイドライン、規約の整
備
マニュアルの整備、研修用eラーニングコンテンツも作成
マニュアル、規約なんて、どうせ誰も読まない!
オンラインマニュアル
=研修会コンテンツにしてしまおう!
Copyright©KumamotoUniversity 43
- 44. Webデザイン システム構築 組織内調整
ウェブサイトシステム利用研修
会
• 職員異動等による情報発信の遅延
• 担当者の欠如による情報公開の不整備
研修会を年数回開催
延べ190名
全事務職員の3分の2が受講済
みんな「翻訳」ボタンが大好き→非表
示に
Copyright©KumamotoUniversity 44
- 45. Webデザイン システム構築 組織内調整
運用チームへ
運用では
• 長期間に渡り常時の
システム監視、
• 安定的にユーザ・サポー
ト
に徹する組織運営
が必須
事務組織主導による事務・技術職員
を中心にスタッフ編成
Copyright©KumamotoUniversity 45