SharePoint 2013 と既知の Web テクノロジを組み合わせて、自分のオンライン ブランドを作成する
原文の記事の投稿日: 2013 年 2 月 25 日 (月曜日)
この投稿では、もっとも使いやすいと感じる Web デザイン ツールと並行してデザイン マネージャーを使用し、強力なコンテンツ管理機能システムである SharePoint 2013 を使って、会社のオンライン ブランドを定義できる簡単な方法を紹介します。
SharePoint 2013 を使用するなら、既知の Web テクノロジ、好みのツール、必要なデバイスを使って SharePoint 発行サイトのブランドを作成することができるので、SharePoint のデザイナーや開発者として第一歩を踏み出すことがかつてなく容易になりました。現在、SharePoint プロフェッショナルとして活動しておられる方にとっても、SharePoint を習得するためにこれまで行った取り組みは引き続き適用性が高く、SharePoint 発行ページのモデルに関する知識は依然非常に有用です。
この投稿では、もっとも使いやすいと感じる Web デザイン ツールと並行して SharePoint 2013 のデザイン マネージャーとデバイス チャネルを使用し、会社のオンライン ブランドを定義する簡単な方法について概説します。同じページ レンダリング インフラストラクチャを維持しつつ、SharePoint 発行サイトのブランドを作成する方法に対し 3 つの主な機能強化が行われました。
既知の Web テクノロジを使用する
SharePoint は依然として ASP.NET でのマスター ページやページ レイアウトを維持していますが、さらに、SharePoint コントロールの HTML スニペットを使用することも含め、HTML でマスター ページやページ レイアウトを設計することもできるようになりました。SharePoint により、SharePoint が必要とするもののユーザーは無視することになる、HTML ファイルに対応する ASP.NET ファイルがバックグラウンドで作成されます。
以前は CSS や JavaScript を使用してサイトのスタイルを作成しましたが、現在ではそれらが SharePoint Web 開発機能に完全に統合されています。HTML プレビューを使用した作業は多く行われているため、サーバーを使用して HTML を表示させる必要はなく、直接 HTML のスタイルを作れます。サーバーでプレビューを表示する場合、任意の SharePoint ページのコンテキストで表示できます。
既知の Web テクノロジで作業しても、ページ レイアウト レベルで作業が止まることはありません。XSLT で設計する必要のある、コンテンツのクエリ Web ページが出回っていますが、SharePoint 2013 で検索型エクスペリエンスを作成するには、新しいコンテンツ検索 Web パーツが重要な文書パーツとなります。参考にできる貴重なデザイナー エクスペリエンスがあったことは非常に重要なことであり、新しいコンテンツ検索 Web パーツが JavaScript、HTML、CSS でカスタマイズ可能であるのはこのおかげです。
ユーザーに SharePoint に関する知識がないことが想定されており、発行サイトのブランド作成を一から支援するデザイン マネージャーが用意されています。このデザイン マネージャーはウィザードのようなエクスペリエンスを提供し、きめ細かい SharePoint 開発ガイダンスや、デザイン ファイルを表示したり、その作業をしたりするためのエントリ ポイントが準備されています。MSDN には、それぞれのステップを説明した独自のドキュメント記事もあります。
好みのツールを使用して SharePoint をカスタマイズする
サイトのデザインをカスタマイズすることには、単に HTML を ASP.NET へ変換する以上のことが関係します。サイトの作成を成功させるのに役立つ基本的なプレースホルダーが準備されており、コンテンツに使用することができます。ページ レイアウトについては、選択するコンテンツの種類に固有なページ フィールドがすべて挿入されており、これにより、SharePoint デザイン ファイルの作成は、作成というよりむしろ編集や調整のようになります。
スニペット ギャラリーは、サイトへ SharePoint 機能を追加する良い起点となります。以前のバージョンの SharePoint を使い慣れているユーザーは、スニペット ギャラリーを SharePoint デザイナーからのアクセスを得るコントロール セットと考えることができます (ただし、単にそれだけではありません)。スニペット ギャラリーは、共通コンポーネント セット (Web パーツ ギャラリーからの Web パーツを含む) の HTML バージョン (多くの場合、ファイルを編集している間にその作業状況を表示する、Dreamweaver の分割ビューのようなスタティック プレビューを含む) を提供します。それぞれのスニペットについて必要なことは、その属性を調整し、それを HTML のマスター ページかページ レイアウトへコピーするだけです。SharePoint により、それが SharePoint の必要とする ASP.NET コントロールへバックグランドで変換されます。
図 1. スニペット ギャラリーのページの一番上には、すべてのスニペットのリボンがあります。ページの本体には、スニペットの説明、属性、HTML コードと、リアルタイムのプレビューが表示されます。マスター ページにはすべて同様のスニペット ギャラリーがあり、その内容はページ レイアウトのスニペット ギャラリーによって少しずつ異なります。また、ページ レイアウトのスニペット ギャラリーはそのコンテンツ タイプによって異なります (ページ フィールドが変化するため)。
すべてのデバイスにおける SharePoint のエクスペリエンス
Web サイトにアクセスする人が、すべてデスクトップやラップトップでマウスを使ってアクセスするとは限らなくなりました。タブレット、携帯電話、Surface など、マルチデバイスの世界になっているからです。では、さまざまなユーザーのスクリーン サイズをもっとも広く使用されるものとするために、どのようにエクスペリエンスを作成すればよいでしょうか。タッチ操作のデバイスに最適化すればよいでしょうか。SharePoint 2013 では、デバイス チャネルにより、ビジターが閲覧に使用しているデバイスに最適な方法でサイトを表示できます。デザイナーは、サイトのどのエクスペリエンスを、それぞれ異なるフォーム ファクターに依存させ、最大 10 の異なるチャネルへ割り当てられるユーザー エージェント部分文字列によって区別する必要があるのか考える必要があります。
それぞれのチャネルは複数のデバイスを対象にできます。たとえば、画面サイズが同じ Windows Phone と iPhone に 1 つのチャネルを、iPad には別のチャネルを割り当てられます。チャネルごとに異なるマスター ページと CSS を使用することができますし、まったく同じ URL でありながらコンテンツの対象を特定のチャネルへ設定することもできます (これはユーザビリティや検索エンジンの最適化に非常に有効です)。
デバイス チャネルのインフラストラクチャを使用することにより、コンテンツの対象設定に非常に有効な資産であるデバイス チャネル パネルを使用できるようになります。これらのパネルのうち 1 つの内部へ置かれたコンテンツは、ユーザーが指定するチャネルでのみ、サーバー側のロジックに基づいてレンダリングされます。これは、ページの読み込み時間やネット上で送信されるバイト数を減少させます。これらのパネルを反応が良好な CSS デザインと組み合わせることにより、ユーザー エクスペリエンスがより速く、より合理化されたものとなります。先述の例にあるように画面サイズに基づいてチャネルを分けるのではなく、iPad、iPhone、iPad mini をキャプチャする "iOS" の部分文字列に基づいたチャネルを設定し、デバイスの画面解像度に基づいて異なる CSS を読み込む単一のマスター ページを送信できます。たとえば、Windows Phone のチームである場合、iOS デバイスを対象として、Windows Phone を宣伝するパネルを作成できます。
図 2. と図 3. 反応が良好な CSS、デバイス チャネル パネル、およびデバイス チャネルに基づいてコンテンツ検索 Web パーツの結果の外観を変化させる表示テンプレートを使用して、クロスサイト コレクション発行機能に基づいて作成した新しいサイトを、ブラウザーとモバイル エクスペリエンスで表示して並べたデザイン モックアップ
この投稿は、もっとも使いやすいと感じるツールと SharePoint 2013 の強力なコンテンツ管理システムを使用して、会社のオンライン ブランドを定義する簡単な方法を紹介しました。詳細については、MSDN でドキュメント著者が書いたコンテンツすべてをご覧ください。「SharePoint 2013 サイトの構築」、「SharePoint 2013 のデザイン マネージャーの概要」、および「SharePoint 2013 のサイト デザインの開発」といった記事は、非常に良い出発点となります。設計のお役に立てば幸いです。
--Alyssa Levitz、SharePoint プログラム マネージャー
これはローカライズされたブログ投稿です。原文の記事は、「Create your online brand with a combination of SharePoint 2013 and the web technologies you already know」をご覧ください。