.NET Framework でブログ＆ CMS

～ Orchard CMS 編～

＠第 7 回まどべんよっかいち2013/11/9青木 宣明 (@kumar0001)

どうして CMS を？

Windows Phone 8 の日本発売が見えない状況…• アプリ開発のモチベーションが↘• 最近はネイティブクライアントを見てき

たので、 Web 技術にも触れておきたい放置してる開発ブログ• 時系列のブログでは書きづらいので、ノ

ウハウを貯めていくサイトを構築したい• せっかくなので CMS で作ろう

CMS の選択• PHP• Wordpress, Joomla!,

Drupal など• Python• Plone, Zope

他にも多数の CMS があって把握しきれていません

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 を選択

Orchard CMS を選んだ理由 (1)

Web サイトの部品化• Web サイトの構成要素を部品化して、そ

れを組み合わせる方法• カスタマイズがしやすそう

画面のクラス定義• 画面構成をクラス ( ＝コンテンツタイプ )

として定義• 個々のページは定義したクラスのインス

タンスとして生成する簡素で直感的な管理画面

Orchard CMS を選んだ理由 (2)

ネット上のドキュメントが多い• 公式ドキュメントは日本語に翻訳されて

いないが、読みやすくとっかかりやすい• ユーザのブログもそれなりに見つかり参

考にできる（日本語のも多い）

Orchard CMS の情報源

公式サイト• http://orchardproject.net/

MIX11 Keynote Day1 での紹介 http://channel9.msdn.com/Events/MIX/MIX11 http://www.youtube.com/watch?v=9hY00mcAlRM

• MIX11 で 12 分ほど紹介

Orchard CMS の情報源

MSDN マガジン January 2012• Orchard CMS - Orchard の拡張性

http://msdn.microsoft.com/ja-jp/magazine/hh708754.aspx

ブログ• ウェブマトリックスマンのブログ• 他にも日本語情報があります

Orchard サイトの構造

複数の Zone に区切られる・ Zone にはコンテンツや Widgetを追加できる・何もない Zone は表示されない

Layout

Orchard サイトの構造

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

Layer

Orchard サイトの構造Widget

Widget

Widget

Content

Widget

Content

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 に従ってレンダリング

Orchard サイトの構造Content と Parts

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

Orchard サイトの構造Content Item

BlogPost コンテンツタイプのインスタンス・ Parts ごとにデータ入力

Autoroute Part

Publish Later PartCommon Part

Body PartTags Part

Comment Part

Title Part

Orchard サイトの構造Content Field

コンテンツタイプに追加してフィールドを定義できる・ Parts と違って再利用されない

Orchard サイトの構造Content Field

Field は Boolean/Text/Link などの基本型から、メディア選択などの拡張的なものまである

Field ごとに詳細な設定が可能・必須フラグ・入力パターンなど

Orchard サイトの構造Shape

Shape Tracing ツールで選択箇所の Shape を表示

Branding Shape

Title Sumary Shape

Widget, Content Part・ HTML レンダリングの過程で Shape の集合に変換

Shape は表示の単位・表示方法のカスタマイズを行える単位でもある

Orchard の他の機能

テーマ• Look&Feel を一括して変更できる• Template コード , CSS, 画像などをパッ

ケージ化Role ベースの権限管理Workflowギャラリー• モジュール・テーマを公開する• モジュール＝ Widget, Content Type など

の部品を公開する単位

Orchard での Web サイト構築

インストール• WebMatrix, Windows Azure のギャラリーから• ソースコードから

機能のカスタマイズ• Content Type の定義、配置• Widget の配置• Custom Form の定義、配置

見た目のカスタマイズ• テーマの変更• テーマの修正 (CSS, Template)

デモ： AP 開発ブログサイト放置してる AP 開発ブログサイトのリ

ニューアル• 開発・検証で得たノウハウの記録・公開にブ

ログ形式が向いていない場合がある• （および単なるサボり）

開発・検証で得たノウハウの記録• 時系列での記録 (Blog)

勉強会の参加記録作業内容、手順

• 階層構造での記録 (Wiki)再編成された情報

両方を扱える CMSで再構築する

デモ： AP 開発ブログサイトトップ• Twitter の最新ツイート

開発日誌 (Blog)技術メモ (Wiki)• Wiki 記法や markdown で記述

アプリ紹介• 定型的なページ⇒ Content Type として定義

アプリケーション名 概要 スクリーンショット ストアへのリンク

About us• 自己紹介• ストアアプリのプライバシーポリシーなどの規約を配置

デモ： AP 開発ブログサイト

Blog の配置• SPAM 対策

連絡フォームの配置• Content タイプの定義• ワークフローの定義

見栄えのカスタマイズ• テーマのインストール

Responsive Web Design に対応したテーマ• テーマのカスタマイズ• Shape Tracing

デモ： AP 開発ブログサイト

メモ：モバイルへの対応• 2 つの方法

User Agent に応じてファイルを切り替えるメンテナンスのコストがかかる

Responsive Web Design を取り入れるCSS3 の media query(@media) を使って、画面幅に

応じてコンテンツの配置を変更するコンテンツを記述する HTML は共通でよい

• 今回は Responsive Web Design を採用最近のブラウザなら CSS3 に対応している…は

ず非対応のブラウザは切り捨てで

デモ： AP 開発ブログサイト

メモ：テーマのカスタマイズ• ResponsiveThemeMachine テーマを導

入• Code Generation モジュールを enable• Orchard.exe を起動

codegen theme MyResponsiveTheme /BasedOn:ResponsiveThemeMachine

• 元のテーマから変更するファイルをコピーして修正変更しないファイルは表示の際に、派生元テー

マから自動的に取得される

まとめ

Content Part による部品の再利用

• Web サイトデザインのカスタマイズを統一的に実施できる• 既存部品の利用で新しい Content Type を手軽に定義できる

Content Type によるページの定義

• 決まった入力パターンがあれば、 Field や Part を使って定型化できる• 表示のカスタマイズもできる（はず。未検証）

CMS サイトのカスタマイズ

• デザインのカスタマイズは、既存テーマからの差分の定義が手軽• モジュールを開発して、より複雑な処理をする Part ・ Widget を配置できる