net frameworkで.ブログ&cms~orchard cms編~
DESCRIPTION
2013/11/09開催の第7回まどべんよっかいちでWebサイトのCMSとしてOrchardを使ってみたときの与太話です。TRANSCRIPT
![Page 1: NET Frameworkで.ブログ&CMS~Orchard CMS編~](https://reader035.vdocuments.mx/reader035/viewer/2022062419/558bccafd8b42aa10b8b45cc/html5/thumbnails/1.jpg)
.NET Framework でブログ& CMS
~ Orchard CMS 編~
@第 7 回まどべんよっかいち2013/11/9青木 宣明 (@kumar0001)
![Page 2: NET Frameworkで.ブログ&CMS~Orchard CMS編~](https://reader035.vdocuments.mx/reader035/viewer/2022062419/558bccafd8b42aa10b8b45cc/html5/thumbnails/2.jpg)
どうして CMS を?
Windows Phone 8 の日本発売が見えない状況…• アプリ開発のモチベーションが↘• 最近はネイティブクライアントを見てき
たので、 Web 技術にも触れておきたい放置してる開発ブログ• 時系列のブログでは書きづらいので、ノ
ウハウを貯めていくサイトを構築したい• せっかくなので CMS で作ろう
![Page 3: NET Frameworkで.ブログ&CMS~Orchard CMS編~](https://reader035.vdocuments.mx/reader035/viewer/2022062419/558bccafd8b42aa10b8b45cc/html5/thumbnails/3.jpg)
CMS の選択• PHP• Wordpress, Joomla!,
Drupal など• Python• Plone, Zope
他にも多数の CMS があって把握しきれていません
![Page 4: NET Frameworkで.ブログ&CMS~Orchard CMS編~](https://reader035.vdocuments.mx/reader035/viewer/2022062419/558bccafd8b42aa10b8b45cc/html5/thumbnails/4.jpg)
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 を選択
![Page 5: NET Frameworkで.ブログ&CMS~Orchard CMS編~](https://reader035.vdocuments.mx/reader035/viewer/2022062419/558bccafd8b42aa10b8b45cc/html5/thumbnails/5.jpg)
Orchard CMS を選んだ理由 (1)
Web サイトの部品化• Web サイトの構成要素を部品化して、そ
れを組み合わせる方法• カスタマイズがしやすそう
画面のクラス定義• 画面構成をクラス ( =コンテンツタイプ )
として定義• 個々のページは定義したクラスのインス
タンスとして生成する簡素で直感的な管理画面
![Page 6: NET Frameworkで.ブログ&CMS~Orchard CMS編~](https://reader035.vdocuments.mx/reader035/viewer/2022062419/558bccafd8b42aa10b8b45cc/html5/thumbnails/6.jpg)
Orchard CMS を選んだ理由 (2)
ネット上のドキュメントが多い• 公式ドキュメントは日本語に翻訳されて
いないが、読みやすくとっかかりやすい• ユーザのブログもそれなりに見つかり参
考にできる(日本語のも多い)
![Page 7: NET Frameworkで.ブログ&CMS~Orchard CMS編~](https://reader035.vdocuments.mx/reader035/viewer/2022062419/558bccafd8b42aa10b8b45cc/html5/thumbnails/7.jpg)
Orchard CMS の情報源
公式サイト• http://orchardproject.net/
MIX11 Keynote Day1 での紹介 http://channel9.msdn.com/Events/MIX/MIX11 http://www.youtube.com/watch?v=9hY00mcAlRM
• MIX11 で 12 分ほど紹介
![Page 8: NET Frameworkで.ブログ&CMS~Orchard CMS編~](https://reader035.vdocuments.mx/reader035/viewer/2022062419/558bccafd8b42aa10b8b45cc/html5/thumbnails/8.jpg)
Orchard CMS の情報源
MSDN マガジン January 2012• Orchard CMS - Orchard の拡張性
http://msdn.microsoft.com/ja-jp/magazine/hh708754.aspx
ブログ• ウェブマトリックスマンのブログ• 他にも日本語情報があります
![Page 9: NET Frameworkで.ブログ&CMS~Orchard CMS編~](https://reader035.vdocuments.mx/reader035/viewer/2022062419/558bccafd8b42aa10b8b45cc/html5/thumbnails/9.jpg)
Orchard サイトの構造
複数の Zone に区切られる・ Zone にはコンテンツや Widgetを追加できる・何もない Zone は表示されない
Layout
![Page 10: NET Frameworkで.ブログ&CMS~Orchard CMS編~](https://reader035.vdocuments.mx/reader035/viewer/2022062419/558bccafd8b42aa10b8b45cc/html5/thumbnails/10.jpg)
Orchard サイトの構造
特定の条件で表示される Zone の集合 デフォルト(常に表示) 認証していないユーザの場合 認証済みのユーザの場合 ホームページの場合 常に表示しない
Layer
![Page 11: NET Frameworkで.ブログ&CMS~Orchard CMS編~](https://reader035.vdocuments.mx/reader035/viewer/2022062419/558bccafd8b42aa10b8b45cc/html5/thumbnails/11.jpg)
Orchard サイトの構造Widget
Widget
Widget
Content
Widget
Content
![Page 12: NET Frameworkで.ブログ&CMS~Orchard CMS編~](https://reader035.vdocuments.mx/reader035/viewer/2022062419/558bccafd8b42aa10b8b45cc/html5/thumbnails/12.jpg)
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 に従ってレンダリング
![Page 13: NET Frameworkで.ブログ&CMS~Orchard CMS編~](https://reader035.vdocuments.mx/reader035/viewer/2022062419/558bccafd8b42aa10b8b45cc/html5/thumbnails/13.jpg)
Orchard サイトの構造Content と Parts
Blog Post コンテンツタイプの定義画面・複数の Parts から構成される・他のコンテンツタイプで使われる Part もある・表示されない Part もある (Publish Later など )
![Page 14: NET Frameworkで.ブログ&CMS~Orchard CMS編~](https://reader035.vdocuments.mx/reader035/viewer/2022062419/558bccafd8b42aa10b8b45cc/html5/thumbnails/14.jpg)
Orchard サイトの構造Content Item
BlogPost コンテンツタイプのインスタンス・ Parts ごとにデータ入力
Autoroute Part
Publish Later PartCommon Part
Body PartTags Part
Comment Part
Title Part
![Page 15: NET Frameworkで.ブログ&CMS~Orchard CMS編~](https://reader035.vdocuments.mx/reader035/viewer/2022062419/558bccafd8b42aa10b8b45cc/html5/thumbnails/15.jpg)
Orchard サイトの構造Content Field
コンテンツタイプに追加してフィールドを定義できる・ Parts と違って再利用されない
![Page 16: NET Frameworkで.ブログ&CMS~Orchard CMS編~](https://reader035.vdocuments.mx/reader035/viewer/2022062419/558bccafd8b42aa10b8b45cc/html5/thumbnails/16.jpg)
Orchard サイトの構造Content Field
Field は Boolean/Text/Link などの基本型から、メディア選択などの拡張的なものまである
Field ごとに詳細な設定が可能・必須フラグ・入力パターンなど
![Page 17: NET Frameworkで.ブログ&CMS~Orchard CMS編~](https://reader035.vdocuments.mx/reader035/viewer/2022062419/558bccafd8b42aa10b8b45cc/html5/thumbnails/17.jpg)
Orchard サイトの構造Shape
Shape Tracing ツールで選択箇所の Shape を表示
Branding Shape
Title Sumary Shape
Widget, Content Part・ HTML レンダリングの過程で Shape の集合に変換
Shape は表示の単位・表示方法のカスタマイズを行える単位でもある
![Page 18: NET Frameworkで.ブログ&CMS~Orchard CMS編~](https://reader035.vdocuments.mx/reader035/viewer/2022062419/558bccafd8b42aa10b8b45cc/html5/thumbnails/18.jpg)
Orchard の他の機能
テーマ• Look&Feel を一括して変更できる• Template コード , CSS, 画像などをパッ
ケージ化Role ベースの権限管理Workflowギャラリー• モジュール・テーマを公開する• モジュール= Widget, Content Type など
の部品を公開する単位
![Page 19: NET Frameworkで.ブログ&CMS~Orchard CMS編~](https://reader035.vdocuments.mx/reader035/viewer/2022062419/558bccafd8b42aa10b8b45cc/html5/thumbnails/19.jpg)
Orchard での Web サイト構築
インストール• WebMatrix, Windows Azure のギャラリーから• ソースコードから
機能のカスタマイズ• Content Type の定義、配置• Widget の配置• Custom Form の定義、配置
見た目のカスタマイズ• テーマの変更• テーマの修正 (CSS, Template)
![Page 20: NET Frameworkで.ブログ&CMS~Orchard CMS編~](https://reader035.vdocuments.mx/reader035/viewer/2022062419/558bccafd8b42aa10b8b45cc/html5/thumbnails/20.jpg)
デモ: AP 開発ブログサイト放置してる AP 開発ブログサイトのリ
ニューアル• 開発・検証で得たノウハウの記録・公開にブ
ログ形式が向いていない場合がある• (および単なるサボり)
開発・検証で得たノウハウの記録• 時系列での記録 (Blog)
勉強会の参加記録作業内容、手順
• 階層構造での記録 (Wiki)再編成された情報
両方を扱える CMSで再構築する
![Page 21: NET Frameworkで.ブログ&CMS~Orchard CMS編~](https://reader035.vdocuments.mx/reader035/viewer/2022062419/558bccafd8b42aa10b8b45cc/html5/thumbnails/21.jpg)
デモ: AP 開発ブログサイトトップ• Twitter の最新ツイート
開発日誌 (Blog)技術メモ (Wiki)• Wiki 記法や markdown で記述
アプリ紹介• 定型的なページ⇒ Content Type として定義
アプリケーション名 概要 スクリーンショット ストアへのリンク
About us• 自己紹介• ストアアプリのプライバシーポリシーなどの規約を配置
![Page 22: NET Frameworkで.ブログ&CMS~Orchard CMS編~](https://reader035.vdocuments.mx/reader035/viewer/2022062419/558bccafd8b42aa10b8b45cc/html5/thumbnails/22.jpg)
デモ: AP 開発ブログサイト
Blog の配置• SPAM 対策
連絡フォームの配置• Content タイプの定義• ワークフローの定義
見栄えのカスタマイズ• テーマのインストール
Responsive Web Design に対応したテーマ• テーマのカスタマイズ• Shape Tracing
![Page 23: NET Frameworkで.ブログ&CMS~Orchard CMS編~](https://reader035.vdocuments.mx/reader035/viewer/2022062419/558bccafd8b42aa10b8b45cc/html5/thumbnails/23.jpg)
デモ: AP 開発ブログサイト
メモ:モバイルへの対応• 2 つの方法
User Agent に応じてファイルを切り替えるメンテナンスのコストがかかる
Responsive Web Design を取り入れるCSS3 の media query(@media) を使って、画面幅に
応じてコンテンツの配置を変更するコンテンツを記述する HTML は共通でよい
• 今回は Responsive Web Design を採用最近のブラウザなら CSS3 に対応している…は
ず非対応のブラウザは切り捨てで
![Page 24: NET Frameworkで.ブログ&CMS~Orchard CMS編~](https://reader035.vdocuments.mx/reader035/viewer/2022062419/558bccafd8b42aa10b8b45cc/html5/thumbnails/24.jpg)
デモ: AP 開発ブログサイト
メモ:テーマのカスタマイズ• ResponsiveThemeMachine テーマを導
入• Code Generation モジュールを enable• Orchard.exe を起動
codegen theme MyResponsiveTheme /BasedOn:ResponsiveThemeMachine
• 元のテーマから変更するファイルをコピーして修正変更しないファイルは表示の際に、派生元テー
マから自動的に取得される
![Page 25: NET Frameworkで.ブログ&CMS~Orchard CMS編~](https://reader035.vdocuments.mx/reader035/viewer/2022062419/558bccafd8b42aa10b8b45cc/html5/thumbnails/25.jpg)
まとめ
Content Part による部品の再利用
• Web サイトデザインのカスタマイズを統一的に実施できる• 既存部品の利用で新しい Content Type を手軽に定義できる
Content Type によるページの定義
• 決まった入力パターンがあれば、 Field や Part を使って定型化できる• 表示のカスタマイズもできる(はず。未検証)
CMS サイトのカスタマイズ
• デザインのカスタマイズは、既存テーマからの差分の定義が手軽• モジュールを開発して、より複雑な処理をする Part ・ Widget を配置できる