その１で作成したコントロールは、英語から日本語にしか翻訳ができまませんでしたが、ここでは、プロパティを利用して、翻訳元と翻訳先の言語をコンテンツの作成画面で自由に変更できるようにします。作成したWebページは、日本語→英語の翻訳のページです。

１．まず、BingApi.ascx.cs のコードを以下のように変更（赤字部分が変更したところ）します。なお、下のプロパティの表記はVS2008用の「プロパティの自動実装」機能による記述です。VS2005の場合は修正が必要です。
コードの修正が終わったら、その１の手順で発行までおこないます。
BingApi.ascx.cs

２．マクロの作成をし左上のFDのマークをクリックしてデータを保存するところまでは同じです。マクロを保存すると、or .NET Control の選択したコントロールの下に、「Browse properties」というボタンが新たに表示されています。そのボタンをクリックします。

３．ユーザーコントロールの１で設定した公開プロパティが自動的に読み込まれています。「Save Propertis」ボタンをクリックします。

４．以下のようなダイアログが表示されたマクロのパラメータが追加されたことが表示されます。

５．ダイアログを閉じて、「Parameters」タブをクリックすると以下のようにパラメータが保存できているのが確認できます。「Name」の項目は自由に設定することができ、日本語名で例えば翻訳元言語と翻訳先言語というようにすることもできます。設定が終了するとFDマークをクリックして設定を保存します。

６．コンテンツセクションに戻って、コンテンツでMacro（黄色の波線で囲われている部分）を選択してから、umbracoMacroボタンをクリックすると以下のようにパラメータを入力する画面が表示されます。日本語から英語に翻訳したいのであれば以下の図のように入力します。

７．以上で、コンテンツのパラメータの入力画面で自分の翻訳したい言語を選択できるようになりました。Umbraco は、こういうことがユーザーインターフェースを使って容易にできるということが大きな特徴です。

その１で作成したユーザーコントロールをUmbracoにインストールします。言葉で書くと複雑なようですが、実際にしてみると難しいところはないと思います。作成したWebページは、英語→日本語の翻訳のページです。Bing の翻訳サービスと同じ翻訳をします。これだけだと実際には使い物にはなりませんがUmbracoで簡単にユーザーコントロールをインストールできるということが実感できると思います。

1. その１で発行したフォルダーで、BingApiフォルダにあるBingApi.ascxとbinフォルダーのUmbracoModules.dllを使用します。BingApi.ascxファイルをUmbracoのインストールフォルダーのusercontrolsフォルダーにUmbracoModulesフォルダーを作成してコピーします。UmbracoModules.dllは、binフォルダーにコピーします。
2. Umbracoの管理画面を立ち上げて、Developer Section を選択します。「Macros」を右クリックして、「Create」を選択します。名前を入力する画面が表示されるので適当な名前を入力（ここではBingApi）して「Create」ボタンをクリックします。すると下の画面が表示されるので、「or .NET User Control」の「Browse user controls on server…」をクリックすると「/usercontrols/UmbracoModulesBingApi.ascx」がリストの中に表示されるのでそれを選択します。「Use in editor」で「Yes」にチェックマークをつけ、「Cache By Page」の「Yes」のチェックマークを除きます。左上のFDのマークをクリックしてデータを保存します。これで、ユーザーコントロールがマクロに登録できました。
   
3. 管理画面で、「Content」Sectionを選択します。「Create」ボタンをクリックして新規のコンテンツを作成します。コンテンツの編集画面でumbracoMacroボタンをクリックして、「Select Macro」で「BingApi」がリストに表示されるので選択して「OK」ボタンをクリックします。以上でユーザーコントロールWebページで表示されるようになります。

Umbracoを実際に使ってみて、熱狂的なファンが多いという理由がわかってきました。他の有名なCMSのほとんどが、機能が多くで使いやすいCMSを目指しているのに対して、Umbraco は、デザイナーが作ったテンプレートを容易にインストールすることができ、開発者が作成したUserControl を容易に組み込むことができる自由度の高いCMSです。

Umbraco は、ユーザーコントロールを容易に組み込むことができるというので、Microsoft のBing API を使ってユーザーコントロールを作成して、umbraco に組み込んでみました。作成したページは、英語→日本語の翻訳のページと日本語→英語の翻訳のページです。作成の手順は、まずユーザーコントロールを作成して、それをUmbracoにインストールします。

1. AppIDの発行画面 でAppIDを発行してもらいます。もし、Windows live ID アカウントを持っていなければ、アカウントを作成します。
2. Visual Stidio でASP.NET Web アプリケーションの新規プロジェクト（ここでは、UmbracoModulesとした）を作成します。
3. Bing API は、JSON、SOAP、XMLの３種類のプロトコルを選択することができます。VSではWeb参照の追加をするだけでSOAPを利用できるようになるのでSOAPを選択することにします。
4. 「プロジェクト」メニューの「Web 参照の追加」メニューを選択して、URLの欄にBing APIのWSDLのURLを http://api.search.live.net/search.wsdl?version=2.2というように入力して「移動」ボタンをクリックします。versionについては通常は省略しますが、今回はTranslationを利用したいので2.2を指定しました。「サービスが見つかりました」と表示されれば成功で「参照の追加」ボタンをクリックします。「Web参照名」は変更する理由がなかったのでそのままにしました。
   
5. ソリューションエクスプローラのWeb Referencesに net.live.search.api が表示され、Webサービスを利用するクラスがUmbracoModules.net.live.search.api以下に作られています。
   
6. ユーザーコントロールを作成します。フォルダーを作成し（ここではBingApi）、そこに「新しい項目の追加」で「Web ユーザー コントロール」を選択して追加（ここではBingApi.ascx）します。
7. ここでは、最近追加された翻訳のAPIを使うコードを書いてみます。まず、テキストボックスに英語を入力して、翻訳ボタンをクリックすると、日本語の翻訳が表示されます。Bing API については、日本語の資料としては、Live Search API のものを参考にしてください。Live Search API入門、 使ってみよう！ Windows Live SDK/API
   BingApi.ascx

   <%@ Control Language=”C#” AutoEventWireup=”true” CodeBehind=”BingApi.ascx.cs” Inherits=”UmbracoModules.BingApi” %> <asp:TextBox ID=”TextBox1″ runat=”server” Height=”234px” TextMode=”MultiLine” Width=”585px”></asp:TextBox> <br /> <asp:Button ID=”Button1″ runat=”server” Text=”翻訳” onclick=”Button1_Click” /> <br /> <br /> <asp:TextBox ID=”TextBox2″ runat=”server” BorderStyle=”None” Height=”179px” ReadOnly=”True” TextMode=”MultiLine” Width=”581px”></asp:TextBox>

   BingApi.ascx.cs

   using System; using UmbracoModules.net.live.search.api; namespace UmbracoModules { public partial class BingApi : System.Web.UI.UserControl { const string AppId = “XXXXX”;  //1で取得したAppID protected void Page_Load(object sender, EventArgs e) { } protected void Button1_Click(object sender, EventArgs e) { // LiveSearchServiceオブジェクトの生成 using (LiveSearchService service = new LiveSearchService()) { try { SearchRequest request = BuildRequest(); // リクエストの送信及び表示 SearchResponse response = service.Search(request); DisplayResponse(response); } catch (Exception e1) { } } } private SearchRequest BuildRequest() { SearchRequest request = new SearchRequest(); // requestフィールドの設定 request.AppId = AppId; request.Query = TextBox1.Text; request.Sources = new SourceType[] { SourceType.Translation }; // 翻訳元及び先の言語の設定 request.Translation = new TranslationRequest(); request.Translation.SourceLanguage = “en”; request.Translation.TargetLanguage = “ja”; //Translation は、バージョン2.2からサポートされている。 request.Version = “2.2″; return request; } private void DisplayResponse(SearchResponse response) { // 翻訳結果をTextBoxに表示 TextBox2.Text = “”; foreach (TranslationResult result in response.Translation.Results) { TextBox2.Text += result.TranslatedTerm; } } } }

8. Default.aspx のデザイン画面で、BingApi.ascx をドラッグ・ドロップして、正常に動作するかどうか確認します。動作が確認できたら、「ビルド」メニューの「発行」をクリックして適当な場所に発行しておきます。
   コードを記述したcsファイルをそのままUmbracoのapp_codeディレクトリにアップロードする方法もあるのですが、今回はweb参照を利用しているので、その関連のファイルもアップロードする必要があり、作業が複雑になります。

Umbracoの4.0.2がリリースされ日本語の扱いにも問題がなくなったので、Umbracoを本格的に触ってみようと思ってサイトの作成をしてみました。Umbracoのテンプレートは、標準では非常に質素なRunwayしかなく、ネットで探しても殆ど見つからないので、最初はどうやってサイトのデザインをするのか疑問でした。しかし、Umbracoでは、テンプレートは自分で作成するものだというがわかってきました。そこで、Artisteerを使って、HTML と CSS を作成して、それを元に Umbraco のテンプレートを作成し、Umbraco で作成したサイトの変更をしました。

Artisteerは、HTMLやCSSの知識がなくても、見栄えのするウェブページのデザインができ、WordPress、Joomla、Drupalのテンプレートやテーマを自動的に作成してくれるソフトです。操作は簡単で、短時間でWordPress、Joomla、Drupalのテーマが作れる便利なソフトです。Artisteerは有償ですが、使用期間は無期限のトライアル版があり制限は書き出すとtrialという文字が画像に入いります。また、ホームエディションは、WordPressのテーマとHTMLのテンプレートの書き出ししかできませんが、49.95$とそれほど高価というわけではないので、トライアル版を含めて手軽に試して見ることができると思います。

Artisteerを使ってUmbracoのテンプレートを作成する場合、HTMLテンプレートの作成を選択します。デザイン終了後、エクスポートしたHTML及びCSSを使用して、Umbracoのテンプレートを作成していきます。

Umbracoでのテンプレートの作成の手順の概要は、以下のようになります。Umbracoでのサイトの作成では、Document Types 及びマスターページの作成が中心になるということがよくわかりました。詳しい作成手順は、Umbracoのページに書きたいと思っています。

1. Document Typesの作成
   Runway Homepage と Runway Textpage を参考にして作成しました。まずTabを作成します。このTabはコンテンツの作成・修正画面でタブに表示されます。その後、プロパティの設定を行います。ここで設定したフィールドをテンプレートに挿入し、コンテンツの作成・修正画面で入力をして表示させるようになります。
   
2. Stylesheetsの作成
   Stylesheetsは、手間を省くためArtisteerを使って作成したものをそのまま使いました。
3. マスターページの作成
   マスターページの作成後、Artisteerを使って作成したHTMLから不要なものを削除してasp:Contentタグの中に貼り付けます。適当な場所にフィールドを挿入して、入力した項目を表示できるようにします。メニューは、XSLTを使用しますが、XSLTは使ったことがないので面食らいました。Runwayのサンプルがあるのでそれを修正してみました。
   
4. テンプレートの作成
   マスターページ以外のテンプレートを作成します。
5. コンテンツの作成
   作成したテンプレートを利用して、コンテンツを作成します。

Umbracoの今回のリリースは、バグフィックス版で、47のバグがフィックスされたそうです。日本語で使う場合には、エンコーディングのバグが解消されたので、文字化けを心配しないで使用できるようになったと思います。