Webアプリを創る

Umbraco と ASP.NET MVC のハイブリッド・アプリケーション

2012年10月13日

CMS を使用していてCMS に独自の機能を追加したいと思ったり、ASP.NET MVC のアプリケーションに CMS の機能を追加したいと思ったことはありませんか。それを簡単に実現できるのが、Umbraco と ASP.NET MVC のハイブリッド・アプリケーションです。ASP.NET WebForms と ASP.NET MVC は、同じ ASP.NET の上にあるフレームワークであり、あまり知られていませんが、WebForm と MVC を一つのアプリケーションで利用することができます。すなわち、One ASP.NET なのです。

そういうことなので、現行バージョンである Umbraco 4.9 でも、ハイブリッド・アプリケーションを作成することができます。詳しくは、One ASP.NET にメモをしました。Umbraco の場合にうれしいのは、Umbraco API を利用すれば、MVC 側から Umbraco のデータが利用可能だし、Umbraco 側からも MVC のビューを表示できるということです。

Umbraco 4.10 では、Umraco 自身が MVC への対応機能を持つようになります。その後も、Umbraco 4.11 では、Child Action Macrosや Partial view macros の導入、Umbraco 6.0 では、New Public API の導入が予定されています。CMS を機能拡張をしたい場合には、本当にうれしい機能です。今後、これらの情報は、Wiki の Umbraco MVC について の方に記載していきたいと思っています。誰でも編集することができますので、Umbraco に興味がある人は、協力をお願いします。

Umbraco 4.9.0 が公開されています

2012年9月14日

Umbraco 4.9.0 が公開され、CodePlex の Umbraco のダウンロードのページからダウンロードできます。バージョンアップのメインは、メディアの編集画面の強化です。今回のバージョンアップは、Umbraco 5 が開発中止になって2回目ですが、エンドユーザーが利用する編集画面の改善は本当に久しぶりのことで、Umbraco 5 の開発でアーキテクチャー中心になっていたUmbraco が昔の姿を取り戻しつつあると感じました。

バージョンアップの具体的な内容では、まず、メディアの画面で、画像やファイルのアップロードで、下の図のようにドラッグ&ドロップでファイルを操作できるようになりました。HTML 5 の機能を使っているそうで、WordPress や Picasa とほぼ同じ操作で画像をアップロードできるようになっています。

image

次に、リッチテキストエディターの編集画面に、メディアボタンが追加されました。メディアボタンをクリックすると、下の図のようなダイアログが表示されますが、Yutube や Flicker のように oEmbed に対応していれば、映像や画像の Url を入力するだけで、コンテンツに挿入することができるので便利です。Picasa も oEmbed に対応しているとなっていたのでテストしてみましたが、Preview に Not Supported と表示されてだめなようです。もちろん Picasa の場合には、メディアボタンを使わずにイメージボタンを使えばいいので問題ないです。

image

メディアボタンは、4.9をアップグレードでインストールした場合には、Rich Text Editor の datatype の設定でメディアボタンをオンにして、umbracoSettings.config で TidyEditorContent を false に設定する必要があります。Rich Text Editor の datatype の設定については、Umbraco で Web サイトを制作 その2に少し詳しくメモをしてありますので参考にしてください。なお、クリーンインストールした場合にも、Rich Text Editor の datatype の設定画面では、編集画面の幅やスタイルシートの関連づけができます。その設定をしていない場合は、Umbraco で Web サイトを制作 その2を参考にしてHTML編集画面を自分の好みの設定にするようにしてください。

メディア関係の操作をテストしていて、すぐに気がついたのは、日本語リソースファイルを修正しないといけないということでした。できればこの週末に修正をしたいと思っています。

次回のバージョンアップである Umbraco 4.10 以降、MVC のサポートや New Public API のリリースが予定されています。Umbraco をベースとしてシステムを開発する場合に役立つ機能が整備されることになるので、今後の Umbraco については期待したいと思っています。

nopCommerce を使ってみる

2012年9月7日

nopCommerce は、ロシアで開発されたオープンソースのeコマースのプログラムで、nopCommerce だけを使ったオンラインショップを立ち上げることができます。ASP.NET で作成されたソフトウェアとしては、Umbraco と並んで将来を期待されているソフトウェアで、Web ギャラリーでは、ダウンロード数は Umbraco が 465160 で4位、nopCommerce が 268177 で5位となっており、どちらも日本ではあまり知られていませんが、世界的にはよく利用されているソフトです。

日本語パッケージについては、バージョン2.0以降、公開されているので、日本語でも簡単に利用できるようになっています。このことについては、日本語パーケージを作成者である(株)デジパブ・ジャパンの大津様から教えていただきました。(株)デジパブ・ジャパンでは、nopCommerce で DDShop というショッピングサイトを運営しています。nopCommerce がどういうソフトウェアであるかを知りたい場合には、DDShop を訪問してみてください。日本語訳は、商用での利用を前提に作成されただけあってよくできていると思います。

image

nopCommerce のインストールは簡単です。上の図のように、WebMatrix の Web ギャラリーや Web Platform Installer (Web PI) を利用すれば、ワンクリックでインストールすることができます。また、nopCommerce の設定画面は、データベースとしてSQL CE を利用する場合は、下図のように管理者の設定をするだけです。

image

日本語化については、少し手間取ったので、若干の説明をしておきます。

日本語化は、nopCommerce のインストール後に行います。まず、日本語パッケージを、nopCommerce の Extensions のダウロードのページ または DDShop の フォーラムの言語のページからダウンロードします。次に、上で設定した管理者でログインして、右上の「Administration」をクリックして管理画面を表示させて、メニューで「Configration」 –> 「Languages」を選択すると、下の図のように言語の設定画面が表示されます。そこで「Add new」ボタンをクリックします。

image

すると下の図のように言語の追加画面が表示されるので、日本語を追加します。入力が終わったら「Save and Continue Edit」ボタンをクリックします。

image

下の図のような画面が表示されるので、「configuration.languages.import」ボタンをクリックします。

image

すると、下の図のようなダイアログが表示されるので、「ファイルを選択」ボタンをクリックして、ダウンロードして解凍おいた日本語パックを選択します。「configuration.languages.import」ボタンをクリックすると日本語リソースがインストールされます。

image

nopCommerce を使ってみて気に入ったら、ユーザーガイドを購入しましょう。有料の電子本ですが日本語版があるのは素晴らしいことです。

英語版 nopCommerce User Guide $19.95

日本語版 豊国永健著 入門 日本語nopCommerce Ver.2.6 $38

nopCommerce は、PayPal にも対応しているようなので、安価なものでも手軽に販売できるため、ダウンロード販売等いろいろな使い道があると思います。

DDShop には、NopCommerce日本ユーザグループ のフォーラムもあるので、nopCommerce の使い方がわからない場合等には利用してみてください。

ExpressWeb の方にも、インストールしてみました。http://pp22.net/shop/

Umbraco 4.8.0 が公開されています

2012年7月19日

Umbraco 4.8.0 が公開され、CodePlex の Umbraco のダウンロードのページからダウンロードできます。今回のバージョンアップは、uComponent のコアが Umbraco にマージされたというのが主な改善点です。Umbraco 4 で本格的な機能拡張があったのは、昨年の9月に公開された 4.7.1 以来のことです。Umbraco 5 の開発中止で、今後どうなるのかと思われた Umbraco ですが、ロードマップも公開され、Umbraco 4 をベースとして開発が進められるということが明確になりました。MVC についても v4.10 でサポートされることになっており、予定通りいけば今年の10月に公開される予定になっています。

自分が Umbraco を使う理由は、1番目が軽くてレスポンスがいいこと、2番目が機能拡張がやりやすいという点です。Visual Studio 上で動作させてデバックしてもスムーズに動作します。こういう点が、Umbraco が世界的には結構使われている理由だと思います。MVC がサポートされるようになれば、さらに機能拡張が容易になります。今後の Umbraco に期待したいと思っています。

最後になりましたが、バックオフィスの日本語リソースファイルが追加されています。「Users」セクションに移動して変更したいユーザーの「language」を Japanese に変更するだけで、バックオフィスの表示が日本語になります。リソースファイルが対応していない部分も多くて、あまり使いやすいわけではありませんが、英語ではだめという場合にも利用できるようになると思います。今後日本語で使いやすい環境を作っていきたいと思っています。

Umbraco 4 と ASP.NET MVC

2012年7月2日

2012年6月13日に Umbraco 5 の開発が中止することが公表されました。そこでの最大の疑問は、ASP.NET MVC への対応をどうするのかということでした。jQuery のような端末側で動作する UI フレームワークを利用したい場合には、Web Form では対応をしにくいという問題があります。

Umbraco コアチームからの回答は、Umbraco 4 のフロントエンドに MVC を導入するということのようです。正式の発表ではありませんが、コアチームの一員である Shannon Deminick 氏が UmbraMVCo というネイティブ MVC ルーティングを試せるパッケージを公表するとともに、氏のブログページ Shazwazza で「MVC in Umbraco V4」という投稿を行っています。Umbraco 5 の開発での成果を生かせば、Umbraco 4 のフロントエンドにネイティブの MVC を動作させることは、それほど時間がかからないようです。Umbraco 4 の MVC 対応に期待したいと思います。

UbraMVCo を実際に使ってみました。すでに Hijacking routes を使って ASP.NET MVC で機能拡張が可能になっています。Umbraco 5 の開発中止のアナウンスを聞いたときはUmbraco がどうなるかと思った人が多かったと思います。しかし、Umbraco の将来は心配ありません。Umbraco 4 は非常にレスポンスがいい優秀なソフトです。その上で、ASP.NET MVC を使って機能拡張ができるようになるので、今後も十分に期待できます。

現状では UmbraMVCo はプレビュー版なので、インストールはかなりトリッキーです。自分の場合のUmbraMVCo のインストールの手順を以下にメモしておきます。

1. WebMatrix で、「Web ギャラリーからサイトを作成する」を利用して、Umbraco をインストールする。

ギャラリーで Umbraco CMS を選択すると、現時点では Umbraco 4.7.2 がインストールされます。注意点としては、Umbraco 4.7.2 のスターターキットのMacroの一部が Umbraco 4.7.2 用に修正できていないというバグがあって、Web サイトを表示したときにエラー画面が表示されるということです。修正箇所については、Umbraco の5分間インストールのページ を参考にしてください。

2. Visual Studio 2010 又は Visual Web Developer 2010 Express で空の ASP.NET MVC 3 アプリケーションを作成する。

もし、ASP.NET MVC 3 をインストールしていない場合は、ASP.NET MVC 3 RTM Tools Update のページからダウンロードしてインストールしておきます。

・Web サーバーについては、IIS Express を使用するように設定。

・Global.asax を削除する。

3. WebMatrix で作成した Umbraco のファイルを、VS で作成した空の ASP.NET MVC 3 アプリケーションに上書きコピーする。

「デバック開始」又は「デバッグなしで開始」で開始すると、Umbraco が開始されます。ここまでの方法で、Umbraco を VS にインストールしてやると Razor のインテリセンスが効くので便利です。今回だけでなく Razor を使用する場合は、この方法を使ってみてください。

4. UmbraMVCo をインストールする。

UmbraMVCo のページからパッケージファイルをダウンロードしてインストールします。インストールが完了すると下の図のようにエラーが発生します。この画面のことを Readme.txt ではYSOD(Yellow Screen Of Death)といっています。このエラーは、Umbraco のルーティングとMVCのルーティンが競合しているため発生するようで、Web.config から umbracoRequestModule への参照を削除します。

image

5. Razor でテンプレートを作成する。

以上で管理画面には正常にアクセスできるようになります。しかし、Web サイトの方は空白で何も表示されない状態になります。ソースを見ると以下のような内容が表示されますが、WebForm のテンプレートが無効になっているためで、MVC Razor (cshtml)で新たにテンプレートを作成する必要があります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META content="text/html; charset=utf-8" http-equiv=Content-Type></HEAD>
<BODY></BODY></HTML>

現時点では、Razor のテンプレートについては管理ツールで作成することができません。しかし、VS 上にインストールしているので、VS で簡単に作成することができます。~/Viewsフォルダのすぐ下に、DocumentType のエイリアス名.cshtml でテンプレートを作成してやります。StarterKit の場合であれば、Homepage の方は umbHomepage.cshtml 、Textpage の方は umbTextpage.cshtml になります。

Razor に関しては、Umbraco のヘルパー関数、例えば @Umbraco.Field は今のところ使えないようです。各フィールドについては、@CurrentPage.bodyText のように CurrentPage.フィールド名でアクセスできます。また、Recursive に取得したい時には、@CurrentPage._siteName のようにフィールド名の前にアンダースコアをつけます。

6. Hijacking Umbraco Route について

UmbraMVCo は、現時点では、Surface Controller をサポートしていません。Surface Controller をサポートとしようと思えば、BackOffice の修正が必要なので今回は無理だったと思います。そのかわりというのではないのですが Hijacking Umbraco Route がサポートされています。Hijacking Umbraco Route の実装は結構簡単なようです。Hijacking Umbraco Route の使用方法については、詳細はHijacking Umbraco Route に説明がありますが、クラス名が変更になっています。 例えば、StarterKit の場合の Textpage に対して Hijacking Umbraco Route を行う場合には、以下のようになります。コントローラ名を Document type のエイリアス名にして作成して、RenderMvcController を承継させます。ActionResult として Index をオーバーライトすると、そのDocument type の場合には全てが Route されます。特定の テンプレートだけ Route したい場合は、Action 名を、テンプレートのエイリアス名にしてやれば動作します。

    public class umbTextpageController : RenderMvcController
    {
        public override ActionResult Index(RenderModel model)
        {
            ここに処理を書く
            return base.Index(model);
        }
    }