2013/11/09開催の第7回まどべんよっかいちでWebサイトのCMSとしてOrchardを使ってみたときの与太話です。

1. .NET Frameworkで
ブログ＆CMS
～Orchard CMS編～
＠第7回まどべんよっかいち
2013/11/9
青木 宣明(@kumar0001)

2. どうしてCMSを？
Windows Phone 8の日本発売が見え
ない状況…
• アプリ開発のモチベーションが↘
• 最近はネイティブクライアントを見てきた
ので、Web技術にも触れておきたい
放置してる開発ブログ
• 時系列のブログでは書きづらいので、ノウ
ハウを貯めていくサイトを構築したい
• せっかくなのでCMSで作ろう

3. CMSの選択
• PHP
• Wordpress, Joomla!,
Drupalなど
• Python
• Plone, Zope
他にも多数のCMSがあっ
て把握しきれていません

4. ASP.NET MVCでのCMS
ASP.NET/ASP.NET MVCで構築された
CMSもあります
• .NET CMS, Umbraco CMS, N2 CMS,
DotNetNuke, Orchard CMSなど
Webサイトのカスタマイズ
• CMSを構築した言語を使う場合が多い
• PHPでも構わないけども…慣れているC#
もしくはPythonを使いたい
ASP.NET MVCで構築されたOrchard CMSを選択

5. Orchard CMSを選んだ理由(1)
Webサイトの部品化
• Webサイトの構成要素を部品化して、そ
れを組み合わせる方法
• カスタマイズがしやすそう
画面のクラス定義
• 画面構成をクラス(＝コンテンツタイプ)と
して定義
• 個々のページは定義したクラスのインスタ
ンスとして生成する
簡素で直感的な管理画面

6. Orchard CMSを選んだ理由(2)
ネット上のドキュメントが多い
• 公式ドキュメントは日本語に翻訳されてい
ないが、読みやすくとっかかりやすい
• ユーザのブログもそれなりに見つかり参考
にできる（日本語のも多い）

7. Orchard CMSの情報源
公式サイト
• http://orchardproject.net/
MIX11 Keynote Day1での紹介
 http://channel9.msdn.com/Events/MIX/MIX11
 http://www.youtube.com/watch?v=9hY00mcAlRM
• MIX11で12分ほど紹介

8. Orchard CMSの情報源
MSDN マガジン January 2012
• Orchard CMS - Orchard の拡張性
http://msdn.microsoft.com/ja-
jp/magazine/hh708754.aspx
ブログ
• ウェブマトリックスマンのブログ
• 他にも日本語情報があります

9. Orchardサイトの構造
複数のZoneに区切られる
・ZoneにはコンテンツやWidgetを
追加できる
・何もないZoneは表示されない
Layout

10. Orchardサイトの構造
特定の条件で表示されるZoneの集合
 デフォルト（常に表示）
 認証していないユーザの場合
 認証済みのユーザの場合
 ホームページの場合
 常に表示しない
Layer

11. Orchardサイトの構造
Widget
Widget
Widget
Content
Widget
Content

12. Orchardサイトの構造
ContentとParts
Shape Tracingツールで
選択箇所のShapeを表示
Title Part
Common Part
Blog Content
Blog Post Content
Comments Count
Tag
Body
@{
Layout.Title = Model.Title;
}
<h1>@Model.Title</h1>
Templateに従って
レンダリング

13. Orchardサイトの構造
ContentとParts
Blog Postコンテンツタイプの
定義画面
・複数のPartsから構成される
・他のコンテンツタイプで使
われるPartもある
・表示されないPartもある
(Publish Laterなど)

14. Orchardサイトの構造
Content Item
BlogPostコンテンツタイプの
インスタンス
・Partsごとにデータ入力
Autoroute Part
Publish Later PartCommon Part
Body Part
Tags Part
Comment Part
Title Part

15. Orchardサイトの構造
Content Field
コンテンツタイプに追加してフィールド
を定義できる
・Partsと違って再利用されない

16. Orchardサイトの構造
Content Field
FieldはBoolean/Text/Linkなど
の基本型から、メディア選択
などの拡張的なものまである
Fieldごとに詳細な設定が可能
・必須フラグ
・入力パターン
など

17. Orchardサイトの構造
Shape
Shape Tracingツールで
選択箇所のShapeを表示
Branding Shape
Title Sumary Shape
Widget, Content Part
・HTMLレンダリングの過程
でShapeの集合に変換
Shapeは表示の単位
・表示方法のカスタマイズ
を行える単位でもある

18. Orchardの他の機能
テーマ
• Look&Feelを一括して変更できる
• Templateコード, CSS, 画像などをパッ
ケージ化
Roleベースの権限管理
Workflow
ギャラリー
• モジュール・テーマを公開する
• モジュール＝Widget, Content Typeなど
の部品を公開する単位

19. OrchardでのWebサイト構築
インストー
ル
• WebMatrix, Windows Azureのギャラリーから
• ソースコードから
機能のカス
タマイズ
• Content Typeの定義、配置
• Widgetの配置
• Custom Formの定義、配置
見た目のカ
スタマイズ
• テーマの変更
• テーマの修正 (CSS, Template)

20. デモ：AP開発ブログサイト
放置してるAP開発ブログサイトのリ
ニューアル
• 開発・検証で得たノウハウの記録・公開にブ
ログ形式が向いていない場合がある
• （および単なるサボり）
開発・検証で得たノウハウの記録
• 時系列での記録 (Blog)
勉強会の参加記録
作業内容、手順
• 階層構造での記録 (Wiki)
再編成された情報
両方を扱えるCMSで
再構築する

21. デモ：AP開発ブログサイト
トップ
• Twitterの最新ツイート
開発日誌(Blog)
技術メモ(Wiki)
• Wiki記法やmarkdownで記述
アプリ紹介
• 定型的なページ⇒Content Typeとして定義
 アプリケーション名
 概要
 スクリーンショット
 ストアへのリンク
About us
• 自己紹介
• ストアアプリのプライバシーポリシーなどの規約を配置

22. デモ：AP開発ブログサイト
Blogの配置
• SPAM対策
連絡フォームの配置
• Contentタイプの定義
• ワークフローの定義
見栄えのカスタマイズ
• テーマのインストール
Responsive Web Designに対応したテーマ
• テーマのカスタマイズ
• Shape Tracing

23. デモ：AP開発ブログサイト
メモ：モバイルへの対応
• 2つの方法
User Agentに応じてファイルを切り替える
メンテナンスのコストがかかる
Responsive Web Designを取り入れる
CSS3のmedia query(@media)を使って、画面幅に
応じてコンテンツの配置を変更する
コンテンツを記述するHTMLは共通でよい
• 今回はResponsive Web Designを採用
最近のブラウザならCSS3に対応している…は
ず
非対応のブラウザは切り捨てで

24. デモ：AP開発ブログサイト
メモ：テーマのカスタマイズ
• ResponsiveThemeMachineテーマを導入
• Code Generationモジュールをenable
• Orchard.exeを起動
codegen theme MyResponsiveTheme
/BasedOn:ResponsiveThemeMachine
• 元のテーマから変更するファイルをコピー
して修正
変更しないファイルは表示の際に、派生元テー
マから自動的に取得される

25. まとめ
Content Partによる部品の再利用
• Webサイトデザインのカスタマイズを統一的に実施できる
• 既存部品の利用で新しいContent Typeを手軽に定義できる
Content Typeによるページの定義
• 決まった入力パターンがあれば、FieldやPartを使って定型化できる
• 表示のカスタマイズもできる（はず。未検証）
CMSサイトのカスタマイズ
• デザインのカスタマイズは、既存テーマからの差分の定義が手軽
• モジュールを開発して、より複雑な処理をするPart・Widgetを配置できる