SharePoint 2013 と併せた Dreamweaver と デザイン マネージャー の使用
原文の記事の投稿日: 2012 年 7 月 28 日 (土曜日)
SharePoint 2013 には様々な新しい機能があり、これまで以上に簡単に Web サイトの体裁を整えたり、公開したりすることができます。そのような機能の 1 つが、デザイン マネージャーです。デザイン マネージャーにより、ご自身のコンテンツを様々なチャネルに対応できるように作成するようなことが可能になります。たとえば、あるページはフル サイズ ブラウザー用ページ、もう 1 つはモバイル デバイス用ページ、そしてあと 1 つはタブレット用ページにすることなどです。異なるマスター ページをそれぞれのチャネルに関連付けることができます。そして本当に魅力的な機能の 1 つが、Dreamweaver などの標準的な HTML 編集ツールを使用してページを作成し、そのページを SharePoint にアップロードし、マスター ページとして使用できる機能です。SharePoint は自動的に .aspx ページを生成し、ユーザーの .html ファイルと同期させています。この変換が行われた後は、ユーザーはその他のツールを使用してページを編集することができます。つまりユーザーは好みの編集ツールで引き続き .html ファイルを編集することができ、ユーザーがファイルを保存するたび、SharePoint は ユーザーのマスター ページとレンダリングするために使用する .aspx ファイルを同期させます。
さらに、スニペットと呼ばれる機能が提供され、それにより SharePoint の長所をまとめて、マスター ページに組み込むことができます。検索ボックスやクイック ナビゲーションなど、必要なスニペットの種類を選択し、その機能に対応する自動生成コードをコピーし、そのコードをマスター ページに貼り付けます。これだけで完全に動作するようにはなるわけではありません。標準的な .html ページを SharePoint のマスター ページに完全に変換するために必要な、SharePoint のいくつかの特色を理解する必要があります。
この投稿では、Dreamweaver のチュートリアルで Web サイト ページを作成し (https://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html (英語)」)、その Web ページを個人用サイトの SharePoint のマスター ページやホーム ページに変換します。まず、完成時の Dreamweaver サイトの外観を次に表示します。
ページには、注目すべき SharePoint 特有の次のようなものが表示されています。
- ヘッダー、ページのメイン ビューの背景、および個々の記事に使用されているイメージ
- ページのメイン部と 3 つの記事エリアのコンテンツ
- 追加する予定の、SharePoint の追加機能。検索ボックスやナビゲーションなどが該当します。
まず、コンテンツの観点から考察します。あらかじめ用意されているコンテンツ タイプは、メイン コンテンツには指定できますが、ページ下部の 3 つの説明スニペットに対応させるためには、カスタマイズが必要です。まずその作業から開始し、カスタマイズをサポートする新しいコンテンツ タイプを作成します。イメージはもともとコンテンツにリンクされているため、テキスト用のサイトの列と一緒に、イメージ用にサイトの列を追加します。ウェルカム ページ コンテンツ タイプは、この種類のページに対応するための非常に好適な基本クラスです。そのため、ウェルカム ページに基づく新しいコンテンツ タイプを作成し、それに DW Layout と名前を付けます。レイアウトをサポートするため、次の列を追加します。
- LeftStoryImage
- LeftStoryText
- CenterStoryImage
- CenterStoryText
- RightStoryImage
- RightStoryText
イメージの列はすべて発行用イメージ (書式設定と制約付き) として定義され、テキストの列は発行用の完全な HTML コンテンツ (書式設定と制約付き) として定義されます。
これで デザイン マネージャー の最初の作業を始める準備が整いましたので、Dreamweaver の HTML ページとスタイルシートをアップロードして、マスター ページに変換します。
そして、Dreamweaver (またはお好みの HTML 編集ツール) がインストールされているコンピューターでブラウザーを開き、SharePoint サイトに移動します。[サイト操作] メニューをクリックし、[デザイン マネージャー] を選択します。左側のタスク リストの3番目 [デザイン ファイルのアップロード] をクリックします。リンクをクリックし、マスター ページとスタイル シートが保存される SharePoint フォルダーにローカル ドライブをマッピングします。SharePoint サイトのエクスプローラー ビューが開くので、ファイルを SharePoint から Dreamweaver に直接ドラッグ アンド ドロップすることができます。何らかの理由で動作しない場合は、いつでもマスター ページのライブラリに移動できるので、エクスプローラー ビューでライブラリを開いてください。
次に、index.html マスター ページをローカル ドライブからエクスプローラー ビューで開いている SharePoint ライブラリにコピーします。Dreamweaver のチュートリアルでは、スタイル シートは styles という名前のサブフォルダーにあることになっているので、そのフォルダーを作成し、スタイル シートをそのフォルダーの中にコピーしてください。
ブラウザーで、デザイン マネージャーのタスク リストの 4 番目 [マスター ページの編集] をクリックします。[HTML ファイルを SharePoint マスター ページに変換] というリンクをクリックします。SharePoint ファイルのブラウザー形式ダイアログが開き、index.html ファイルがマスター ページ ギャラリーにコピーされているのを確認できます。index.html をクリックして選択し、[挿入] ボタンをクリックします。変換が完了し、デザイン マネージャー ページには、マスター ページのリスト内のファイルと、変換が成功したというメッセージが表示されます。この時にマスター ページ ライブラリのエクスプローラー ビューを更新すると、index.master という名前の新しいファイルが表示されます。これは、サイトにアップロードした index.html の "ペア" になるファイルです。これ以降、SharePoint がこのマスター ファイルを更新し、ユーザーは HTML ファイルで作業します。
ここで新しいマスター ページを見てみることで、ユーザーが何を行う必要があるのかを確認できるのではないかと思います。新しいマスター ページを見るには、デザイン マネージャー内の index.html リンクをクリックします。プレビュー モードでページが開き、マスター ページの外観を確認することができます。始めの一歩で、興味深いと思います。以下は、変換が最初に行われたときに表示されるページの外観です。
注目する点は、次のとおりです。
- スタイル シートが動作しているように見えます。スタイル シートから必要なフォントと書式設定を取得します。
- イメージが表示されていないため、表示されるように修正する必要があります。ただし、イメージの中にはコンテンツであったり、実際のマスター ページの一部となってたりするものもあるため、マスター ページの修正を続けるときにそのことを考慮に入れる必要があります。
- 表示されるテキストはマスター ページの一部ではないため、テキストを取得して、コンテンツとしてホームページに組み込む必要があります。
まず何を修正する必要があるかを見ていきましょう。メインの本文セクションの背景に使用するイメージをアップロードし、そのイメージに対するマスター ページ内のリンクを修正する必要があります。そして、マスター ページ下部にあるその他すべてのイメージを削除する必要があります。それに加え、マスター ページ上のすべてのテキストを削除する必要があります。すべてのコンテンツはマスター ページではなく、個々のページに関連付けられる必要があるからです。この作業を行うには、HTML と CSS ファイルを SharePoint のマスター ページ ギャラリーのエクスプローラー ビューからドラッグし、Dreamweaver にドロップします。急に、HTML ページに多くの SharePoint の "未知の要素" が表示されます。それに慣れてください。ご自分の HTML エディター を使用できていたとしても、HTML を生き生きとさせるため、SharePoint のコントロールとタグを使う必要があります。
HTML をスクロールすると、マスター ページにあるはずの、表示されていないイメージに気づきます。それは banner.gif (HTML より取得) および main.jpg (スタイル シートから取得し、main_imave DIV タグの背景にセットする) で、それらをまず修正します。
ブラウザーに戻り、[サイト操作] メニューをクリックし、[サイト コンテンツの表示] メニューをクリックします。[サイト コレクションのイメージ] リンクをクリックし、ドキュメント ライブラリを開きます。2 つのイメージをライブラリにアップロードします。ライブラリの URL は /sitecollectionimages で、Dreamweaver を使用して、両イメージのパスがライブラリを指すように変更します。プレビュー ページを更新すると次のように表示され、作業が進行しているのが分かります。
前の画像では表示されていなかった、ページ下部に沿った黄色の部分が表示されていることにお気づきになると思います。実際には最初の画像にも表示されていたのですが、ブラウザーが大きすぎるサイズに調整されていたため、表示することができませんでした。黄色の部分に関して重要なことは、それが変換処理中に SharePoint によって配置され、そこにメイン ページのコンテンツのプレースホルダーが含まれているということです。次に行うことは、マスター ページではなくコンテンツ ページの一部にするために、コンテンツを抜き取ることです。そのため、メイン セクションからテキストを取り除き、レンダリングしていないイメージと、その下にあるテキストを削除します。またプレースホルダーの DIV タグ (黄色の部分を除いたもの) をページのメイン セクションに移動します。それに加え、イメージとテキストがある3 つのエリアに対してプレースホルダー コントロールを追加します。レイアウト ページを作成するときに、それらを結びつけます。
出来上がった HTML にはコメントの組み合わせ、特殊な SharePoint 処理のタグ、コンテンツを設置する場所のプレースホルダーがあります。各セクションは次のようになります。
メイン本文:
左の列:
中央の列:
右の列:
次のように、ページ自体は空のように見えますが、それで OK です。これがマスター ページに必要なものです。
ここまでの処理で、マスター ページが完成に近づきました。いくつかのメニューと検索ボックスを追加しますが、それは後で行います。次に、レイアウト ページを作成します。レイアウト ページは、ページ上のデータ フィールドとレイアウトを "結びつける" ページです。これを行うために、[サイトの設定]、[マスター ページとページ レイアウト] の順に移動します。リボンの [新規作成] ボタンをクリックし、[ページ レイアウト] を選択します。[新しいページ レイアウト] 画面が表示されたら、このページ レイアウトに関連付けるコンテンツ タイプを選択します。この投稿の前の方で説明した、カスタムのコンテンツ タイプを作成してそれを DW Layout と名前を付けたことを思い出してください。"関連付けるコンテンツ タイプ" フィールドでは、自分の DW Layout のコンテンツ タイプを選択します。URL、タイトル、説明を入力します。それで自分のレイアウト ページを作成することができます。今回は、ページの URL は DWLayoutPage.aspx とし、タイトルは Dreamweaver Layout Page で、説明には Layout page based on Dreamweaver tutorial site を追加します。
レイアウト ページが作成されましたが、まだ何のコントロールも配置されていません。ページにコントロールを追加し、前に説明した LeftStoryImage、LeftStoryText などのコンテンツ タイプのカスタム フィールドにコントロールをバインドします。さらに、マスター ページに追加したプレースホルダーのコンテナーに対応するための、ASP.NET プレースホルダー コントロールを追加する必要もあります。この方法により、各フィールドのデータはコンテナーに関連付けられ、そのコンテナーがマスター ページ上の対応するコンテナー プレースホルダーに出力されます。これがデータをマスター ページの正しい場所にレンダリングする方法です。
マスター ページから上の詳細を見たとき、PlaceHolderMain、PlaceHolderLeft、PlaceHolderCenter、PlaceHolderRight という 4 つのコンテンツ プレースホルダーが追加されていることがわかります。これらのプレースホルダーをレイアウト ページに追加し、適切なコンテンツ タイプのフィールドを各プレースホルダーに配置します。この処理を行うため、マスター ページ ギャラリーのエクスプローラー ビューから新しいレイアウト ページ DWLayoutPage.aspx をドラッグし、Dreamweaver にドロップします。既定では、レイアウト ページにはすでに PlaceHolderMain というプレースホルダー コントロールが 1 つあるため、プレースホルダー コントロールを追加する必要はありません。ですがここでは、標準の ASP.NET コントロールのマークアップを使用する、以下のプレースホルダーを追加します。
<asp:Content ContentPlaceholderID="PlaceHolderLeft" runat="server">
</asp:Content>
おわかりのように、プレースホルダーの ID に PlaceHolderLeft を指定します。あと 2 つ、ID に PlaceHolderCenter と PlaceHolderRight を指定したプレースホルダーを追加します。
レイアウト ページで必要な実際のフィールドという意味では、それほど多くのフィールドは必要ありません。メインのコンテンツ フィールドがありますが、それはカスタム コンテンツ タイプが継承した基本クラスにより提供されます。そのフィールドを PublishingPageContent と呼びます。フィールドをページのメインの本文に配置し、そのための発行コントロールを PlaceHolderMain セクションに追加すると、そのセクションは次のようになります。
<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">
<PublishingWebControls:RichHtmlField id="PageContent" FieldName="PublishingPageContent" DisableInputFieldLabel="true" runat="server"/>
</asp:Content>
その他の 3 つの各プレースホルダーには、イメージ フィールドおよびリッチ テキスト フィールドの 2 つのフィールドが必要です。そのため、その 2 つのフィールドを追加し、コンテンツ タイプのフィールド名をマークアップの FieldName 属性に使用します。次に示すのは、PlaceHolderLeft コントロールがどのようになるかの例です。PlaceHolderCenter コントロールと PlaceHolderRight コントロールも当然、これと非常に似たものです。
<asp:Content ContentPlaceholderID="PlaceHolderLeft" runat="server">
<PublishingWebControls:RichImageField FieldName="LeftStoryImage" runat="server"/>
<PublishingWebControls:RichHtmlField id="LeftTextContent" FieldName="LeftStoryText" DisableInputFieldLabel="true" runat="server"/>
</asp:Content>
この時点で、マスター ページとレイアウトページの全体像が理解できたと思います (上述したメニューと検索ボックス以外)。そこで、新しいページを作成し、そのページに新しいページ レイアウトを使用するように指定したいと思います。
それを行うため、ページ ライブラリに移動します。リボンの [新規作成] をクリックし、DW Layout を選択します。DW Layout は、ウェルカム ページのコンテンツ タイプから継承されたコンテンツ タイプを基にしているため、新規メニューに表示されます。
必要なプロパティを次のように入力します。
それでは試してみましょう。まず、マスター ページ ギャラリーに戻り、マスター ページ (index.html) を発行します。発行するまでは、そのページをサイトのマスター ページとして選択できません。次に [サイトの設定] に戻り、マスター ページの設定で自分のマスター ページを [サイト マスター ページ] のマスター ページとして選択します。すべてが正常に動作することを確認するまで、システム マスター ページとして自分のマスター ページを設定しないでください。マスター ページが壊れていて、それを [システム マスター ページ] に割り当てた場合、元には戻せないほどのやっかいな問題が起きます。
完了したら、ページ ライブラリに戻り、作成したばかりの dwhome.aspx をクリックします。.aspx がブラウザーに表示され、編集することができます。見てのとおり、とてもいい感じに調和してきました。
作業を先に進め、オリジナルの Dreamweaver サイトのデータを組み込みます。全てのテキスト フィールドはリッチな HTML なので、生の HTML 行をその Dreamweaver ページからコピーし、フィールドに HTML モードで貼り付けます。
画像はより興味深いです。まず、画像をローカル ドライブから SharePoint の [イメージ] フォルダーにアップロードします。画像をアップロードしたら、SharePoint 2013 のもう 1 つの新しい発行機能である、イメージ表示という機能を使用することができます。この機能を使うと、イメージを適切に表示するためのカスタムのサイズを作成できます。今回のケースでは、Dreamweaver のチュートリアル サイトのイメージはすべて同じサイズで、幅が 316 ピクセルで、高さが 130 ピクセルです。これと同じことをするため、[サイトの設定]、[イメージ表示] ([外観] セクションの下) の順に移動します。初めから用意されている 3 つの表示があります。リンクをクリックして新しい項目を追加し、上述した寸法の Column Image という名前の表示を作成します。ページにイメージを追加したら、どのイメージ表示を使ってページにイメージを表示するかを選択することができます。Column Image 表示を選択すると、Dreamweaver のサイトで表示するのとまったく同じ構成を表示することができます。
最終的には、オリジナルの Dreamweaver サイトと非常によく似たページになります。次にオリジナルの画像と、そのすぐ下に SharePoint バージョンの画像を表示します。
Dreamweaver サイト:
SharePoint サイト:
とてもよくできています。主に目立った相違点は、色と H2 や H3 のような組み込みのタグのフォントだけです。これらの領域については、スタイル シートを調整して修正します。1 回限りのスタイル シートを指定するか、それとも全ての H2 や H3 などのタグに対してスタイル シートを変更するかを決めることができます。
これらの CSS の微調整を行ったあとは、オリジナルの Dreamweaver サイトに基本的にはそっくりなページが出来上がります。この時点で dwhome.aspx ページをチェックし、サイトのホーム ページに設定します。最後に、先に言及した SharePoint の機能であるトップ ナビゲーションと検索ボックスをマスター ページに追加します。
まず、エクスプローラー ビューからマスター ページをドラッグし、Dreamweaver にドロップします。ブラウザーで、[サイトの操作] メニューから [デザイン マネージャー] を選択します。4 番目のオプション [マスター ページの編集] をクリックし、この演習のマスター ページである index.html をクリックします。プレビューを再度確認し、上部右隅の [スニペット] メニューをクリックします。スニペットは、トップ ナビゲーションや縦型ナビゲーション、サイトのタイトルとロゴ、検索ボックス、Web パーツなどの様々な標準の SharePoint ページの要素を選択できる、素晴らしい新機能です。このシナリオを視覚的にもっと "魅力的" にするため、Products と Careers という新しいページをサイトに追加し、それらにナビゲーション リンクを作成します。
マスター ページに戻り、ナビゲーションと検索ボックスを配置する、新しい DIV 要素を追加します。そして [スニペット] ページに移動し、トップ ナビゲーションと検索ボックス用のコードをコピーし、適切な DIV 要素に貼り付けます。マスター ページ は次のようになります (スニペットのコードは省略しました。ご自分のスニペット ページからコードをコピーして貼り付けてください)。
<div id="menu_div" style="width: 335px; position: relative; top: -4px;">
<!-- The Menus Go Here -->
<div>
<!-- Top Menu Snippet Here -->
</div>
</div>
<div id="searchbox_div" style="float: left; width: 245px; position: relative; top: -32px; left: 730px;">
<!-- search box goes here -->
<div>
<!-- Search Box Snippet Here -->
</div>
</div>
これが完成した作品です。SharePoint のメニューと検索ボックスが表示されています。
これまで完了したことで、注目すべき点がいくつかあります。まず、これはマスター ページとしてのあまり良い例ではありません。なぜでしょうか。レイアウトはホーム ページとしてとても優れていますが、ページのコンテンツのほとんどは、利用するにあたっての十分な柔軟性がありません。この投稿のポイントは、Dreamweaver の一般的な例を紹介し、それを Dreamweaver のツールと SharePoint 2013 の新しいデザイン マネージャー機能を使用して、SharePoint で動作させることにあります。その意味では、非常によい実習になりました。理想としては、マスター ページ内のものをより多く、レイアウト ページに配置することです。例えば、このマスター ページをシステム マスター ページに指定すると、それに満足できないことになるでしょう。指定した場合にフォームと設定ページがどのように表示されるか、その 1 つの例を紹介します (これは [サイトの設定] ページです)。
さて困りました。マスター ページを UI で元に戻すことは、この時点ではほとんど不可能です。幸いなことに次のような小型の PowerShell スニペットを実行し、変更を加える前のマスター ページに戻すことができます。
$w = Get-SPWeb https://yourWebApp
$w.MasterUrl = "/_catalogs/masterpage/v15.master"
$w.Update()
2 番目のポイントは視点を変えて、別のマスター ページに切り替えてみることです。以下のサンプルの Contoso マスター ページを見てみましょう。
よくできていませんか。飾り気はありませんが、サイトの基本的要素は含まれています。それでは次のようなシステム マスター ページを作成し、リストやライブラリの設定をします。
何かがないことに気付きませんか。通常は [リスト情報] セクションの上部にあり、クリックするとリストのコンテンツに戻ることができる、階層リンクがありません。その理由は [スニペット] ページに移動するとわかりますが、スニペットに階層リンクに使用できるコードがないからです。[スニペット] ページには多くの優れたコードがありますが、ありとあらゆる状況に対応するためのコントロールが、すべて網羅されているわけではありません。それではどのように修正すればよいでしょうか。[スニペット] ページに必要なものがないときは、v15.master ファイルをパチンと開き、コード スニペットを探す必要があります。次に示すのは、この階層リンクに対応する v15.master 内で表示されるコードです。
<SharePoint:AjaxDelta id="DeltaPlaceHolderPageTitleInTitleArea" runat="server">
<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server">
<SharePoint:SPTitleBreadcrumb
runat="server"
RenderCurrentNodeAsLink="true"
SiteMapProvider="SPContentMapProvider"
CentralAdminSiteMapProvider="SPXmlAdminContentMapProvider">
<PATHSEPARATORTEMPLATE>
<span class="ms-pageTitle-separatorSpan">
<SharePoint:ThemedForegroundImage ThemeKey="spcommon" ImageUrl="/_layouts/15/images/spcommon.png" CssClass="ms-pageTitle-separatorImg" runat="server" />
</span>
</PATHSEPARATORTEMPLATE>
</SharePoint:SPTitleBreadcrumb>
</asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>
このコードをコピーしてご自分の HTML マスター ページに貼り付けても、このままでは動作しません。このコードには ASP.NET のマークアップが含まれており、私たちは HTML ページで作業しているのが理由です。SharePoint 2013 は特殊なタグを使用し、ASP.NET のタグを "ラップ" することができます。そのため SharePoint は、SharePoint が生成した、ご自分の HTML ページと "ペア" のページを更新することができます。これを行うには、ASP.NET マークアップをコメント タグに配置します。開始タグは "MS:" で始め、終了タグは "ME:" で始めます。次に示すのは、上記と同じコードがラッパーで囲まれている、自分の HTML マスター ページに貼り付けるコードです。
<!--MS:<SharePoint:AjaxDelta id="DeltaPlaceHolderPageTitleInTitleArea" runat="server">-->
<!--MS:<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server">-->
<!--MS:<SharePoint:SPTitleBreadcrumb runat="server" WelcomePageUsesWebTitle="false" DefaultParentLevelsDisplayed="3" ParentLevelsDisplayedInFolder="3" RenderCurrentNodeAsLink="true" SiteMapProvider="SPContentMapProvider" CentralAdminSiteMapProvider="SPXmlAdminContentMapProvider">-->
<PATHSEPARATORTEMPLATE>
<span class="ms-pageTitle-separatorSpan">
<!--MS:<SharePoint:ThemedForegroundImage ThemeKey="spcommon" ImageUrl="/_layouts/15/images/spcommon.png" CssClass="ms-pageTitle-separatorImg" runat="server" />-->
</span>
</PATHSEPARATORTEMPLATE>
<!--ME:</SharePoint:SPTitleBreadcrumb>-->
<!--ME:</asp:ContentPlaceHolder>-->
<!--ME:</SharePoint:AjaxDelta>-->
これをマスター ページに貼り付けます。リスト設定のページに階層リンクがどのように表示されるかを次に示します。
これで私のとても長い投稿は終わりです。SharePoint 2013 の新しいデザイン マネージャー機能を使用し、お好みの HTML エディターを使用して日々のコンテンツ管理タスクを行う方法をご覧いただけたと思います。Dreamweaver を使用して SharePoint 2013 で Dreamweaver チュートリアル サイトを再構築することができました。これは以前のバージョンの SharePoint から大きく前進したことです。またスニペット ギャラリーのような機能を使用して SharePoint の機能をマスター ページに追加する方法や、スニペットでは見つからない機能が必要なときの手段を説明しました。さらに、お好みの HTML エディターを使用するのと同様の手法を、表示テンプレートという SharePoint 2013 の別の重要な機能に使用することができます。表示テンプレートは主に検索結果とともに使用され、また検索がこのバージョンの SharePoint に非常にうまく統合されているため、表示テンプレートを様々な用途に使用することができます。クエリ ルールや結果の種類を使用したソリューションの構築を総合的にリハーサルするため、このブログ サイトを参考にしてください。
この投稿の添付ファイルには、この投稿を正確に書式化した Word 版と、Dreamweaver のチュートリアル サイトの最終版 SharePoint の作成に使用したソースの要素が含まれています。
これはローカライズされたブログ投稿です。原文の記事は、「Using Dreamweaver and Design Manager with SharePoint 2013」をご覧ください。