OpenSocial ガジェットの束を実装しようとしています。これらは Facebook やその他のソーシャル ネットワークでは実行されず、社内の Apache Shindig サーバーで実行されます。(通常の ASP.NET MVC cshtml ビューで iframe を使用してこれらのガジェットを埋め込みます)
http://docs.opensocial.org/display/OSREF/OpenSocial+Tutorialによると、ガジェットの構造は次のようになります。
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Hello World!">
<Require feature="opensocial-0.8" />
</ModulePrefs>
<Content type="html">
<![CDATA[
Hello, world!
]]>
</Content>
</Module>
一方、HTML、CSS、および JS はタグ内に埋め込まれています。このようなファイルを Visual Studio で XML 形式で開発する場合、構文の強調表示、IntelliSense、IntelliTrace、および JavaScript のデバッグが不可能になります。それはあまり快適ではありません。
質問 1:これらの OpenSocial XML ガジェットのすべての機能を再度有効にする Visual Studio の使用可能な (!) 拡張機能を知っていますか?
質問 2:そうでない場合、同じことを試して、これらのハードルを回避する良い方法を見つけた人はいますか?
更新:プレーンな HTML ファイル、プレーンな JS ファイル、および XML スケルトンを受け取り、それらをガジェットにマージするビルド後のステップを使用する概念実証を行いました。デバッグ モードではプレーン ファイルを直接含めることが考えられますが、デプロイ プロセスでは、ビルド後のステップからマージされた XML ファイルを使用して Shindig を呼び出します。
if (@Html.IsDebugMode())
{
<iframe src="/Gadgets/HelloWorld.html"/>
}
else
{
<iframe src="http://example.org/shindig?url=http://example.org/Gadgets/Merged/HelloWorld.xml"/>
}
ソリューションの仕組みは次のとおりです。
- Gadgets\HelloWorld.js ファイルを追加します
- js ファイルを含む Gadgets\HelloWorld.html ファイルを追加します。
- ガジェット XML を含む Gadgets\HelloWorld.xml ファイルを追加しますが、
<Content>
タグは空です。 - デバッグ モードではプレーン HTML ファイルを含み、リリース モードではガジェットを含む iframe を持つ CSHTML ページを作成します。
- HelloWorld.html の内容を読み取り、それを XML の Content タグに貼り付ける Post Build Event を定義します。さらに、JS ファイルから JS コードを読み取り、
<script src="HelloWorld.js" />
HTML に含まれるスクリプトをインライン JavaScript<script>...</script>
でそれぞれのコードに置き換えます。
利点:
- ロジック (JS ファイル)、プレゼンテーション (HTML ファイル)、メタデータ (XML ファイル) の明確な分離。
- HTML で作業する際の Visual Studio HTML オーサリングの完全なサポート。
- JS で作業する際の完全な Javascript オーサリング サポート。
- JSLint などのツールを使用して、JavaScript スタイルを確認できます。
警告:
- デバッグ モードで Shindig を呼び出してガジェットをレンダリングすると、Visual Studio で JavaScript を開いてブレークポイントを設定する方法がありません。ただし、JS コードでエラーが発生した場合、Visual Studio は JS コードのビューを開き、エラーのある行をマークします。そのビューが開いたら、それを使用してブレーク ポイントを設定することもできます。ただし、元の JS ファイルはビルド プロセスの過程で XML にマージされるだけなので、ライブ編集はできません。
- 一方、プレーンな HTML ファイルを Shindig でレンダリングする代わりに iframe として含めると、それぞれのファイルでライブ編集とデバッグを直接行うことができます。もちろん、すべての Shindig 機能が有効というわけではありません。特に、Shindig によって自動的に追加されたすべてのスクリプトが欠落しているか、手動で含める必要があります。
理想的には、アプリケーションをデバッグ モードで実行しているときに HTML または JS ファイルを変更すると、マージされたガジェット XML ファイルがすぐに更新されるため、Shindig を使用している場合でもライフ エディットが可能になります。