読者です 読者をやめる 読者になる 読者になる

miso_soup3 Blog

主に ASP.NET 関連について書いています。

Umbraco as a Service を試した

Umbraco ASP.NET

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 を使うこともできる。

f:id:miso_soup3:20151207212444p:plain
https://our.umbraco.org/documentation/Umbraco-as-a-Service/より)

簡単に試してみて、1ページ分サイトを作ってみます。

目次

リンク

サインアップ

http://umbraco.com/cloud ここにメールアドレスを入力するところがあるので、入力します。
受け取ったメールから、パスワードを登録し、アカウントを作成します。メールアドレスとパスワードは、この後の手順で必要になるので覚えておきます。

プロジェクトの作成

https://www.s1.umbraco.io/projects 管理画面にアクセスし、プロジェクトを 1 つ作成します。
画像のように「Development」と「Live」の 2 つの環境が用意されます。

f:id:miso_soup3:20151207212646p:plain

「Live」は Production 環境のようなものです。まずは、Dev 環境で Umbraco の管理画面からサイトを構成し、それを Live 環境へ反映させ、サイトを確認してみます。

Development の Umbraco 管理画面へ

各環境には、Git Repository が用意されているので「Get clone url」からクローンできます。必須ではありませんが、ここで、Development の Git Repository を clone しておきます(サイズが大きく時間がかかるので注意)。

f:id:miso_soup3:20151207212646p:plain

次に Development の「Go to backoffice」から、Umbraco の管理画面へアクセスします。
基本認証の後、Umbraco の管理画面のログイン画面が表示されますので、先ほど登録したアカウントの情報を 2 回入力することになります。

f:id:miso_soup3:20151207213547p:plain

f:id:miso_soup3:20151207213557p:plain

f:id:miso_soup3:20151207213723p:plain
Umbraco の管理画面。

1 ページ作成してみます。例として"プロフィール" ページを作成し、そこに名前・誕生日・コメント欄の項目を用意し、管理画面で入力した値がページに表示されるようにしてみます。

手順は、1:ページにどんな項目を用意するかを定義する "Document Type" を作成し、そこに名前・誕生日・コメントの項目(=Property)を設定。2:ページをどのような Html にするか "Template" を作成。3:定義した項目に値を入力し、実際にページを用意(= "Content"を作成)、といった流れになります。

出来上がりのサイトはこんな感じ。

f:id:miso_soup3:20151207225029p:plain

1:Document Type を作成

Document Type を作成し、ページがどのような Property を持っているか等を定義します。

Dev 環境 の Umbraco 管理画面から、「Settings」->「Document Types」->「Create」で Document Type を作成します。

f:id:miso_soup3:20151207214323p:plain

下の画像のように Name 欄に Profile と入力し、Create をクリック。「Create matching template」にはチェックを入れてください。これは、同じ名前で Template も作成する、という意味です。

f:id:miso_soup3:20151207214452p:plain

作成した Document Type の編集画面が表示されます。「Generic properties」のタブをクリックし、「Click here to add new property」をクリックします。

f:id:miso_soup3:20151207214711p:plain

下の画像のように入力し、Name 項目を定義します。

f:id:miso_soup3:20151207215008p:plain

Name は人が識別するための表示名、Alias は Template などでプログラミング上で使う識別名、Type は項目の種類(Dropdown とか Checkbox とかあります)。Tab は管理画面のどのタブのページに表示させるか、Mandary は必須項目かどうか、Validation は値の検証文字列、Description は管理画面上に表示させる項目の説明文を入力します。

ここでは、Name と Alias と Type だけ指定し、他はデフォルトのままとします。

入力した後は、右上の「Save」をクリックし、1 つの項目(Property)の登録を完了します。

f:id:miso_soup3:20151207215434p:plain

同じような手順を繰り返し、次のように項目(Property)を作成します。

  • 誕生日
    • Name : Birthday
    • Alias : birthday
    • Type : Date Picker
  • ブログ URL
    • Name : BlogUrl
    • Alias : blogurl
    • Type : Textstring
  • コメント
    • Name : FreeComment
    • Alias : freecomment
    • Type : Rithtext editor

作成後、以下のように表示されているはずです。

f:id:miso_soup3:20151207215736p:plain

次に、「Structure」タブで、「Allow at root」にチェックを入れます。

f:id:miso_soup3:20151207215931p:plain

これは、サイトの Root にこの Document Type で構成されたコンテンツを配置するかどうか、という意味です。
今はプロフィールページを 1 つだけ置くので、ここにチェックを入れないとプロフィールページを用意できません。一般的にここには、「Home」や「Index」といった名前でサイトのトップページの Document Type を指定することになります。

2:Template を作成

Template を作成し、HTML を用意します。また、ここでは CSS ファイルを使うので CSS ファイルを登録します。CSS ファイルは bootstrap のものを使うことにします。

bootstrapのサイトからダウンロードし、「bootstrap.css」を準備します。

Umbraco 管理画面にて、↓下の画像のように「Settings」->「Stylesheets」->「Create」をクリックします。

f:id:miso_soup3:20151207220453p:plain

Name に 「bootstrap.css」を入力し、「Create」。

f:id:miso_soup3:20151207220748p:plain

先ほど bootstrap から取得してきた 「bootstrap.css」の中身をコピペし、右上の「Save」ボタンをクリックします。これで CSS ファイルの用意ができました。

次に、Template を作成します。だいたいのサイトは、マスターページを使うことが多いと思いますので、ここでもマスターページである「_Layout」とプロフィールページの「Profile」と 2 つの Template を作成します。

Document Type を作成した時に、Profile という Template が作成されたかと思いますが、もし作成されていない場合は次のように追加します。

「Settings」->「Templates」->「Create」をクリックします。

f:id:miso_soup3:20151207221041p:plain

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>

f:id:miso_soup3:20151207221408p:plain

同じ方法で、「_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 の参照も同じです。 )

3:Content を作成

ここまで作成した Template と Document Type を使い、実際にページを用意します(=Content を作成)。

Umbraco 管理画面から「Content」->「Content の横の…」->「Profile」をクリックします。

f:id:miso_soup3:20151207222257p:plain

Content の編集ページが開きます。一番上にある入力欄に「Profile」と入力し、後は画像の様に適当な値を入れて、「Save and publish」をクリックします。

f:id:miso_soup3:20151207222653p:plain

作成した Content のページを確認するには、Content の編集ページにある「Link to document」をクリックします。

f:id:miso_soup3:20151207222857p:plain

ブラウザから確認すると以下のように表示されます。

f:id:miso_soup3:20151207223103p:plain

Live(Production) 環境への反映

Dev 環境にてサイトが出来上がったところで、Live 環境へ反映してみます。

Umbraco as a Service の管理画面へ戻り、「Deploy * COMMITS TO LIVE」ボタンをクリックします。

f:id:miso_soup3:20151207223319p:plain

"Completed" と表示された後、Live 環境の「View Page」からサイトを確認してもプロフィールのページは用意されておりません。Live 環境に push されたのは、Document Type や Template 等のみであって、Content は作成されていないからです。

同じく Live 環境の「Go To backoffice」をクリックし、先ほどの「3:Content を作成」と同じように、Content を作成します。Dev 環境と区別するために、違う値で入力してみます。

Live 環境でも Dev 環境と同じように内容を確認することができます。

f:id:miso_soup3:20151207223956p:plain

Dev 環境の Git Repository を Clone した方は、ここで pull してみてください。作業の内容が Git commit されていることが確認できます。

f:id:miso_soup3:20151207224129p:plain
(一つ一つの操作が Git commit されていて OK かどうかは置いておいて)

Repository にあるファイルは、↓のように Umbraco CMS の構成ファイルと同じものです。

f:id:miso_soup3:20151207225849p:plain

Views ファイルに、Umbraco 管理画面で作成した Template が追加されています。

f:id:miso_soup3:20151207225937p:plain

例えば、ローカルで 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 つでできました。