Umbraco as a Service を試した
Umbraco とは、ASP.NET で作られた OSS な CMS ですが、それの SaaS 版があったので試してみました。
機能については、http://umbraco.com/cloud こちらにビデオや説明があります。
適当に挙げてみると、以下のような感じです。
- Umbraco CMS のホスト
- 14 日間無料で試せる。Standard プランは €89/month～
- Umbraco CMS の自動バージョンアップ
- ストレージ、帯域幅の制限なし
- Dev 環境、Production 環境（+ Staging 環境）が用意され、それぞれに Git Repository が付く。
- Dev 環境では Basic 認証が基本でつく。
- ローカル環境で試すことも可能。Visual Studio 使うのもできる。ローカルで編集して Git でコミットとかもできる。
- ドメイン、SSL、IP アドレス制限。
- たぶん Azure 上で動いてる。Azure SQL Dabase を使うこともできる。
（https://our.umbraco.org/documentation/Umbraco-as-a-Service/より）
簡単に試してみて、１ページ分サイトを作ってみます。
目次
リンク
サインアップ
http://umbraco.com/cloud ここにメールアドレスを入力するところがあるので、入力します。
受け取ったメールから、パスワードを登録し、アカウントを作成します。メールアドレスとパスワードは、この後の手順で必要になるので覚えておきます。
プロジェクトの作成
https://www.s1.umbraco.io/projects 管理画面にアクセスし、プロジェクトを 1 つ作成します。
画像のように「Development」と「Live」の 2 つの環境が用意されます。
「Live」は Production 環境のようなものです。まずは、Dev 環境で Umbraco の管理画面からサイトを構成し、それを Live 環境へ反映させ、サイトを確認してみます。
Development の Umbraco 管理画面へ
各環境には、Git Repository が用意されているので「Get clone url」からクローンできます。必須ではありませんが、ここで、Development の Git Repository を clone しておきます（サイズが大きく時間がかかるので注意）。
次に Development の「Go to backoffice」から、Umbraco の管理画面へアクセスします。
基本認証の後、Umbraco の管理画面のログイン画面が表示されますので、先ほど登録したアカウントの情報を 2 回入力することになります。
Umbraco の管理画面。
1 ページ作成してみます。例として"プロフィール" ページを作成し、そこに名前・誕生日・コメント欄の項目を用意し、管理画面で入力した値がページに表示されるようにしてみます。
手順は、１：ページにどんな項目を用意するかを定義する "Document Type" を作成し、そこに名前・誕生日・コメントの項目（＝Property）を設定。２：ページをどのような Html にするか "Template" を作成。３：定義した項目に値を入力し、実際にページを用意（＝ "Content"を作成）、といった流れになります。
出来上がりのサイトはこんな感じ。
１：Document Type を作成
Document Type を作成し、ページがどのような Property を持っているか等を定義します。
Dev 環境 の Umbraco 管理画面から、「Settings」->「Document Types」->「Create」で Document Type を作成します。
下の画像のように Name 欄に Profile と入力し、Create をクリック。「Create matching template」にはチェックを入れてください。これは、同じ名前で Template も作成する、という意味です。
作成した Document Type の編集画面が表示されます。「Generic properties」のタブをクリックし、「Click here to add new property」をクリックします。
下の画像のように入力し、Name 項目を定義します。
Name は人が識別するための表示名、Alias は Template などでプログラミング上で使う識別名、Type は項目の種類（Dropdown とか Checkbox とかあります）。Tab は管理画面のどのタブのページに表示させるか、Mandary は必須項目かどうか、Validation は値の検証文字列、Description は管理画面上に表示させる項目の説明文を入力します。
ここでは、Name と Alias と Type だけ指定し、他はデフォルトのままとします。
入力した後は、右上の「Save」をクリックし、1 つの項目（Property）の登録を完了します。
同じような手順を繰り返し、次のように項目（Property）を作成します。
- 誕生日
- Name : Birthday
- Alias : birthday
- Type : Date Picker
- ブログ URL
- Name : BlogUrl
- Alias : blogurl
- Type : Textstring
- コメント
- Name : FreeComment
- Alias : freecomment
- Type : Rithtext editor
作成後、以下のように表示されているはずです。
次に、「Structure」タブで、「Allow at root」にチェックを入れます。
これは、サイトの Root にこの Document Type で構成されたコンテンツを配置するかどうか、という意味です。
今はプロフィールページを 1 つだけ置くので、ここにチェックを入れないとプロフィールページを用意できません。一般的にここには、「Home」や「Index」といった名前でサイトのトップページの Document Type を指定することになります。
２：Template を作成
Template を作成し、HTML を用意します。また、ここでは CSS ファイルを使うので CSS ファイルを登録します。CSS ファイルは bootstrap のものを使うことにします。
bootstrapのサイトからダウンロードし、「bootstrap.css」を準備します。
Umbraco 管理画面にて、↓下の画像のように「Settings」->「Stylesheets」->「Create」をクリックします。
Name に 「bootstrap.css」を入力し、「Create」。
先ほど bootstrap から取得してきた 「bootstrap.css」の中身をコピペし、右上の「Save」ボタンをクリックします。これで CSS ファイルの用意ができました。
次に、Template を作成します。だいたいのサイトは、マスターページを使うことが多いと思いますので、ここでもマスターページである「_Layout」とプロフィールページの「Profile」と 2 つの Template を作成します。
Document Type を作成した時に、Profile という Template が作成されたかと思いますが、もし作成されていない場合は次のように追加します。
「Settings」->「Templates」->「Create」をクリックします。
Name は、「Profile」とします。
「Profile」の中身は、下のコードをコピーし、右上の「Save」ボタンをクリックします。
Profile：
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
Layout = "_Layout.cshtml";
}
<div class="container">
<div class="page-header">
<h1>@Umbraco.Field("name")</h1>
</div>
<p>birthday : @Umbraco.Field("birthday", formatAsDate: true)</p>
<p>blogurl : @Umbraco.Field("blogurl")</p>
<div class="lead">
@Umbraco.Field("freecomment")
</div>
</div>
同じ方法で、「_Layout」という名前の template を作成します。
_Layout:
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
@RenderBody()
</body>
</html>
右上の「Save」をクリックし保存します。
（ここで Template に書いたコードは、ASP.NET MVC の Razor と同じ記法になります。マスターページである _Layout の参照も同じです。 ）
３：Content を作成
ここまで作成した Template と Document Type を使い、実際にページを用意します（＝Content を作成）。
Umbraco 管理画面から「Content」->「Content の横の…」->「Profile」をクリックします。
Content の編集ページが開きます。一番上にある入力欄に「Profile」と入力し、後は画像の様に適当な値を入れて、「Save and publish」をクリックします。
作成した Content のページを確認するには、Content の編集ページにある「Link to document」をクリックします。
ブラウザから確認すると以下のように表示されます。
Live（Production） 環境への反映
Dev 環境にてサイトが出来上がったところで、Live 環境へ反映してみます。
Umbraco as a Service の管理画面へ戻り、「Deploy * COMMITS TO LIVE」ボタンをクリックします。
"Completed" と表示された後、Live 環境の「View Page」からサイトを確認してもプロフィールのページは用意されておりません。Live 環境に push されたのは、Document Type や Template 等のみであって、Content は作成されていないからです。
同じく Live 環境の「Go To backoffice」をクリックし、先ほどの「３：Content を作成」と同じように、Content を作成します。Dev 環境と区別するために、違う値で入力してみます。
Live 環境でも Dev 環境と同じように内容を確認することができます。
Dev 環境の Git Repository を Clone した方は、ここで pull してみてください。作業の内容が Git commit されていることが確認できます。
（一つ一つの操作が Git commit されていて OK かどうかは置いておいて）
Repository にあるファイルは、↓のように Umbraco CMS の構成ファイルと同じものです。
Views ファイルに、Umbraco 管理画面で作成した Template が追加されています。
例えば、ローカルで Visual Studio でこのプロジェクトを開いて、.cshtml を編集したり、CSS を登録したりし、commit -> Live 環境へ push、といったこともできるわけです。
ちなみにデータベースは、デフォルトでは SQL Server Compact（.sdf ファイル）になっています。
まとめ
Umbraco as a Service の 試用版を使って 1 つページを作ってみました。
Umbraco CMS を作成した際は必要になるであろう、Umbraco CMS のバージョンアップグレード、Git 管理、複数環境の用意、Dev は Basic 認証で Private に公開に～といったことが、これ 1 つでできました。
