著 作 権 このドキュメントに 記 載 されている 情 報 (URL 等 のインターネット Web サイトに 関 する 情 報 を 含 む) は 将 来 予 告 なしに 変 更 することがあります 別 途 記 載 されていない 場 合 このソフトウェアおよび 関 連 するドキュメントで 使 用 して

Microsoft SharePoint Server 2013 サイトのデザイン 編 集 自 習 書

著 作 権 このドキュメントに 記 載 されている 情 報 (URL 等 のインターネット Web サイトに 関 する 情 報 を 含 む) は 将 来 予 告 なしに 変 更 することがあります 別 途 記 載 されていない 場 合 このソフトウェアおよび 関 連 するドキュメントで 使 用 している 会 社 組 織 製 品 ドメイン 名 電 子 メール アドレス ロゴ 人 物 場 所 出 来 事 などの 名 称 は 架 空 の ものです 実 在 する 名 称 とは 一 切 関 係 ありません お 客 様 ご 自 身 の 責 任 において 適 用 されるすべての 著 作 権 関 連 法 規 に 従 ったご 使 用 を 願 います マイクロソフトは このドキュメントに 記 載 されている 内 容 に 関 し 特 許 特 許 申 請 商 標 著 作 権 またはその 他 の 無 体 財 産 権 を 有 する 場 合 があります 別 途 マイクロソフトのライセンス 契 約 上 に 明 示 の 規 定 のない 限 り このドキュメントはこれらの 特 許 商 標 著 作 権 またはその 他 の 無 体 財 産 権 に 関 する 権 利 をお 客 様 に 許 諾 するものではありません 2013 Microsoft Corporation. All rights reserved. SharePoint Internet Explorer は 米 国 Microsoft Corporation の 米 国 およびその 他 の 国 における 登 録 商 標 または 商 標 です 記 載 されている 会 社 名 製 品 名 には 各 社 の 商 標 のものもあります

目 次 はじめに... 2 変 更 履 歴... 3 1. SharePoint サイト デザイン 基 礎... 4 1.1 SharePoint サイトの 既 定 デザイン... 5 1.2 共 通 メニュー 内 容 とマスター ページ... 8 標 準 のマスター ページ...10 マスター ページの 変 更 方 法...11 [ 参 考 ] マスター ページの 設 定 メニューと 発 行 機 能...14 マスター ページ ギャラリー...17 2. ブラウザーでの 設 定 で 行 えるデザイン 変 更... 19 2.1 ロゴの 変 更...19 2.2 外 観 の 変 更...22 3. HTML エディターを 利 用 したマスター ページの 編 集... 30 3.1 HTML デザインの 用 意...31 3.2 マスター ページ ギャラリーをネットワーク ドライブとして 設 定...40 3.3 マスター ページ ギャラリーに HTML ファイルをアップロード...46 3.4 HTML ファイルをマスター ページに 変 換...49 3.5 SharePoint デザインに 必 要 な 内 容 の 追 加...53 スニペット 画 面 を 開 く...55 HTML エディター (Dreamweaver) で HTML ファイルを 開 く...56 サイト 名...58 サイトのロゴ...61 グローバル ナビゲーション...65 検 索 ボックス...72 コンテンツ エリア...76 セキュリティによるトリミング...82 3.6 マスター ページとして 設 定...90 各 リソースファイルをメジャーバージョンに 発 行...90 サイトのマスター ページを 設 定 変 更...93 4. モバイル 対 応 について... 95 4.1 サポートされているモバイル デバイス ブラウザー...96 4.2 モバイル ブラウザー ビューを 利 用 するために...97 [モバイル ブラウザー ビュー] サイト 機 能 のアクティブ 化 方 法...98

5. モバイル 対 応 デザインとデバイス チャネル... 99 5.1 デバイス チャネルの 作 成... 100 5.2 モバイル ブラウザー 専 用 デザインの 作 成... 105 HTML デザインの 用 意... 105 マスター ページ ギャラリーに HTML ファイルをアップロード... 112 HTML ファイルをマスター ページに 変 換... 115 SharePoint デザインに 必 要 な 内 容 の 追 加... 119 デバイス チャネル パネルの 利 用... 129 各 リソースファイルをメジャーバージョンに 発 行... 133 5.3 マスター ページの 設 定... 135 [モバイル ブラウザー ビュー] サイト 機 能 の 非 アクティブ 化 方 法... 135 デバイス チャネルごとのマスター ページ 設 定... 136

はじめに 本 ドキュメントは Microsoft SharePoint Server 2013 ( 以 下 SharePoint 2013) また SharePoint Online (SharePoint 2013 ベース) サイトのデザイン 編 集 を 行 うために 必 要 な 知 識 を 習 得 いただき デザイン 編 集 作 業 を 行 っていただくための 参 考 手 順 書 です SharePoint 2013 ではサイトのデザイン 編 集 を 行 うための 機 能 が 大 きく 強 化 されており 以 前 のバ ージョンよりもデザイン 編 集 が 行 いやすくなっています 本 ドキュメントではブラウザーベースの 設 定 のみで 行 うデザイン 変 更 から HTML エディターを 利 用 して 行 うデザイン 編 集 また SharePoint 2013 で 機 能 強 化 されたモバイル ビューについて ステップ バイ ステップの 手 順 をベースに 解 説 します 2

変 更 履 歴 バージョン リリース 時 期 変 更 内 容 Version 1.0 2013 年 3 月 初 版 3

1. SharePoint サイト デザイン 基 礎 SharePoint サイトの 既 定 デザインは 次 図 のような 内 容 です 既 定 のデザインのまま 利 用 することも もちろん 可 能 ですが デザイン 変 更 はカスタマイズにおける 大 きなニーズのひとつといえます サイトのデザインはブラウザー ベースでの 設 定 により サイトの 色 合 いや 背 景 文 字 スタイル 等 の 一 部 を 変 更 することが 可 能 です また 大 幅 なデザイン 変 更 を 行 いたい 際 には SharePoint 2013 では SharePoint Designer 2013 だけではなく 各 種 HTML エディターを 利 用 したデザイン 編 集 が 行 えるよう 新 機 能 が 搭 載 されています この 章 ではこれらのデザイン 編 集 を 行 う 際 に 理 解 するべき SharePoint サイト デザインの 基 本 的 な しくみについて 解 説 します チームサイト テンプレートを 利 用 した 場 合 の 画 面 4

1.1 SharePoint サイトの 既 定 デザイン SharePoint サイト 内 にはトップページをはじめとする 複 数 の Web ページ (aspx ファイル) が 含 まれています SharePoint サイト 内 にあるページ 例 サイトのトップページ Web パーツページや 発 行 ページ Wiki ページなどサイト 内 に 作 成 したページ リスト ライブラリ 内 のビュー フォーム サイトの 設 定 画 面 リストの 設 定 画 面 などの 各 種 設 定 画 面 サイトのデザインは 大 きく 2 種 類 のエリアに 分 けられ サイト 内 の 全 ページは 下 図 のように 共 通 メニ ュー 部 分 ( 上 部 のサイト タイトルやリボンなどを 含 む 領 域 と 左 部 のサイド リンク バー 領 域 ) とページご とのコンテンツが 表 示 されるコンテンツ エリアが 含 まれています 共 通 メニュー 部 分 サイト 内 のすべてのページで 同 じ 内 容 が 表 示 される 共 有 メニュー エリアです サイト 内 で 各 操 作 を 行 うためのリボン メニューや 各 ソーシャル 機 能 へのリンク トップ リンク バー サイド リン ク バーが 含 まれます (SharePoint Server 2013 と SharePoint Online で 一 部 内 容 が 異 なります) コンテンツ エリア 各 ページ 内 のコンテンツが 表 示 されるエリアで ページによって 内 容 が 異 なります 5

[ 参 考 ] 共 通 メニュー 内 の 主 な 内 容 リボン SharePoint 2010 と 同 様 に 主 な 操 作 メニューはリボン 内 に 用 意 されています トップ リンク バー [ 参 照 ] タブ 内 に 表 示 される 横 に 並 べてリンクを 表 示 できるエリアです 同 じサイト コレク ション 内 にある 他 のサイトへのリンクを 自 動 的 に 表 示 するよう 設 定 が 可 能 であり サイト 管 理 者 は 任 意 に 編 集 も 行 えます またサイトの 管 理 者 権 限 を 持 つユーザーには [リンクの 編 集 ] メニューが 表 示 され クリック することで 設 定 画 面 にアクセスしなくても 直 接 リンク 内 容 の 編 集 が 行 えるようになっていま す 6

サイド リンク バー 左 サイドに 縦 に 並 べてリンクを 表 示 できるエリアです サイト 内 のコンテンツ (リスト ライブラ リ ページなど) へのリンクを 配 置 することが 主 な 用 途 ですが サイト 管 理 者 は 任 意 に 内 容 編 集 が 行 えます またサイトの 管 理 者 権 限 を 持 つユーザーには [リンクの 編 集 ] メニューが 表 示 され クリック することで 設 定 画 面 にアクセスしなくても 直 接 リンク 内 容 の 編 集 が 行 えるようになっていま す コンテンツにフォーカス クリックすることで リボン 領 域 とサイド リンク バーが 非 表 示 となり コンテンツ エリア 内 の 内 容 をより 見 やすく 表 示 できます 再 度 クリックすると もとの 表 示 に 戻 ります 7

1.2 共 通 メニュー 内 容 とマスター ページ [1.1 SharePoint サイトの 既 定 デザイン] で 確 認 したように サイト 内 の 全 ページには 共 通 デザイン としてメニュー 部 分 ( 上 部 のリボン 等 を 含 む 領 域 と 左 部 のサイド リンク バー 領 域 など) が 表 示 されま す 全 ページで 共 通 のデザインは 各 ページ ファイル (.aspx) 内 にその 内 容 (HTML などのソースコー ド) が 含 まれているわけではなく マスター ページというデザインのテンプレート 内 に 定 義 されています サ イト 内 の 全 ページはマスター ページを 参 照 することで 共 通 デザインを 表 示 しています また 各 ページで 内 容 が 異 なるエリアを コンテンツ エリア といい コンテンツ エリア 内 には Web パ ーツや HTML などの Web コンテンツを 含 められます ([ページの 編 集 ] メニューから 編 集 モードに 切 り 替 えて 内 容 編 集 が 行 える 領 域 がコンテンツ エリアです) コンテンツ エリア 内 の 内 容 は 各 ページの aspx ファイルに 保 存 されます 8

マスター ページは SharePoint のプラットフォームである ASP.NET の 機 能 であり 複 数 ページで 同 じデザインを 共 有 するためのしくみです 共 通 して 表 示 したいデザインはマスター ページ (*.master) に 定 義 します またマスター ページを 参 照 して 動 作 する Web ページをコンテンツ ページといいます SharePoint サイトでは 全 ページが 基 本 的 にマスター ページを 参 照 しているため すべてのページはコ ンテンツ ページといえます コンテンツ ページにアクセスすると コンテンツ ページと 参 照 しているマスター ページを 合 わせた 結 果 が 画 面 として 表 示 されます 次 図 のように SharePoint の 各 ページは マスター ページ (*.master) と 各 ページ (*.aspx) が 組 み 合 わさり ひとつのページが 表 示 されるしくみとなっています 9

標 準 のマスター ページ SharePoint 2013 標 準 では seattle.master と oslo.master が 搭 載 されており 既 定 のデ ザインは seattle.master です SharePoint 2013 では 下 位 互 換 のために SharePoint 2010 モードのサイトをホストで きる 機 能 があります SharePoint 2010 モードでデザインを 表 示 するため v4.master (SharePoint 2010 のマスター ページ) も 標 準 搭 載 されています 参 考 :TechNet SharePoint 2013 でサイト コレクションのアップグレードを 計 画 する http://technet.microsoft.com/ja-jp/library/ff191199.aspx#sitemodes 10

マスター ページの 変 更 方 法 SharePoint サイトのデザイン テンプレートであるマスター ページは 各 サイトで 発 行 機 能 をアクティブ 化 することにより 設 定 変 更 が 可 能 となります 既 定 のマスター ページである seattle.master から 標 準 搭 載 の oslo.master や 独 自 で 作 成 したマスター ページへの 変 更 を 行 うことで サイト 全 体 のデザ インを 変 更 できます マスター ページの 設 定 変 更 手 順 1. [ 設 定 ] [サイトの 設 定 ] をクリックします 2. 外 観 カテゴリーの [マスター ページ] をクリックします 11

3. [サイト マスター ページの 設 定 ] で 次 の 項 目 を 設 定 変 更 できます 設 定 項 目 説 明 標 準 の 設 定 オプション サイト マスター ページ サイト 内 の 発 行 ページが 参 照 する マスター ページを 指 定 できます 親 サイトの 設 定 を 継 承 seattle oslo システム マスター ページ サイト 内 の 管 理 ページ リスト ラ イブラリ ビュー ( 発 行 ページ 以 外 のページ) が 参 照 するマスター ペ ージを 指 定 できます 親 サイトの 設 定 を 継 承 seattle oslo 12

マスター ページの 設 定 はサイト マスター ページとシステム マスター ページの2つに 分 けられており それぞれ 違 うマスター ページを 指 定 することで 1 つのサイト 内 に 2 パターンのデザインを 混 在 させること も 可 能 です この 設 定 はインターネット 公 開 用 のパブリック サイトなどにおいて 一 般 ユーザーに 公 開 する 発 行 ページに 対 してはカスタマイズしたデザインを 採 用 する 一 方 管 理 者 用 の 設 定 コンテンツ 投 稿 画 面 では 標 準 的 なデザインのままとするなどの 用 途 で 活 用 できます 一 般 的 な 社 内 ポータル サイトやチー ム サイトでは 1 つのサイト 内 で 複 数 デザインを 持 たせることは 一 貫 性 を 欠 いてしまいユーザー 操 作 に 混 乱 をきたすことも 想 定 されるため 明 確 な 理 由 がない 限 りはサイト マスター ページとシステム マスター ページは 同 じ 設 定 を 基 本 とする ( 同 じマスター ページを 選 択 する) ことをおすすめします またサブ サイトでは [このサイトの 親 からマスター ページを 継 承 する] オプションを 利 用 することで 親 サイトと 同 じデザインを 適 用 できます サイト コレクション 内 の 全 サイトで 同 じデザインを 適 用 する 際 には 次 図 のようにトップ レベル サイトは 適 切 なマスター ページを 選 択 し サブ サイトは 親 サイトを 継 承 する 設 定 が 便 利 です このような 構 成 とすることで サイト コレクション 内 の 全 サイトでマスター ページを 変 更 したい 場 合 には トップ レベル サイトでマスター ページを 設 定 変 更 するだけですみ 各 サブ サイトで 同 じ 設 定 を 繰 り 返 す 必 要 がなくなります 13

[ 参 考 ] マスター ページの 設 定 メニューと 発 行 機 能 前 述 のとおりサイトの 設 定 画 面 の [マスター ページ] メニューを 利 用 してマスター ページを 設 定 変 更 するためには 発 行 機 能 が 必 要 です [マスター ページ] メニューはサイト 機 能 である 発 行 機 能 がアクティ ブ 化 されていないサイトでは 表 示 されず ブラウザー 上 では 設 定 変 更 が 行 えません 他 のマスター ページ を 利 用 するように 設 定 変 更 を 行 いたい 際 は まず 発 行 機 能 のアクティブ 化 を 行 う 必 要 があります 上 画 面 は [ 発 行 機 能 ] がアクティブ 化 されていないサイトの 設 定 画 面 です 14

発 行 機 能 をアクティブ 化 するための 手 順 各 サイトにて 発 行 機 能 をアクティブ 化 するためには そのサイト コレクション 設 定 で 発 行 インフラストラク チャがアクティブ 化 されていることが 前 提 となります サイト コレクションの [ 発 行 インフラストラクチャ] をアクティブ 化 1. サイト コレクションのトップ レベル サイトで [ 設 定 ] [サイトの 設 定 ] をクリックし サイトの 設 定 画 面 を 開 きます 2. [サイト コレクションの 管 理 ] セクション 内 の [サイト コレクションの 機 能 ] をクリックします 3. [SharePoint Server 発 行 インフラストラクチャ] をアクティブ 化 します 15

各 サイトの [ 発 行 機 能 ] をアクティブ 化 する 1. 2. 各 サイトで [ 設 定 ] [サイトの 設 定 ] をクリックし サイトの 設 定 画 面 を 開 きます [サイトの 操 作 ] セクション 内 の [サイト 機 能 の 管 理 ] をクリックします 3. [SharePoint Server 発 行 機 能 ] をアクティブ 化 します 16

マスター ページ ギャラリー マスター ページは 各 サイト 単 位 で 設 定 が 行 えます 設 定 を 行 う 際 に 選 択 できる 各 マスター ページ フ ァイル (*.master) の 格 納 場 所 はマスター ページ ギャラリーです マスター ページ ギャラリーは 各 サ イト コレクションごとに 1 つずつあるため 独 自 マスター ページを 作 成 し それを 複 数 のサイト コレクシ ョン 内 サイトで 利 用 したい 場 合 には 各 サイト コレクションごとに 展 開 する 必 要 があります マスター ページ ギャラリーの 場 所 http://トップ レベル サイトの URL/_catalogs/masterpage/ トップ レベル サイトにて サイトの 設 定 画 面 [マスター ページとページレイアウト] からアク セス 可 能 17

標 準 で 搭 載 するマスター ページである seattle.master や oslo.master もマスター ページ ギ ャラリーにファイルが 保 存 されています マスター ページ ギャラリーに 保 存 した *.master ファイルは 各 サイトのマスター ページ 設 定 画 面 で 選 択 肢 一 覧 として 表 示 され 選 択 が 行 えるようになります またマスター ページ ギャラリーのベースはライブラリです ライブラリのバージョン 管 理 機 能 を 利 用 するこ とでデザイン テンプレートであるマスター ページの 管 理 を 行 うしくみとなっています 既 定 でマイナー/メジ ャー バージョン 管 理 が 有 効 になっており メジャーバージョンに 発 行 するまではそのマスター ページは 一 般 ユーザーからは 利 用 できません 18

2. ブラウザーでの 設 定 で 行 えるデザイン 変 更 前 章 では SharePoint サイト デザインのしくみとして デザイン テンプレートであるマスター ページ について 解 説 しました この 章 ではブラウザーでの 設 定 ベースで 行 えるデザイン 変 更 方 法 について 解 説 し ます SharePoint 2013 ではデザイン 変 更 を 行 うための 設 定 が2つあります これらの 設 定 について 手 順 とその 内 容 を 解 説 します ロゴの 変 更 外 観 の 変 更 2.1 ロゴの 変 更 サイトの 左 上 に 表 示 され るロ ゴ 画 像 は 各 サ イトごとに 設 定 変 更 が 可 能 です ロ ゴ の 変 更 は SharePoint 2010 でも 同 様 に 行 えましたが SharePoint 2013 ではロゴ 画 像 を 選 択 する 際 に 一 度 ライブラリに 保 存 する 作 業 を 行 わなくても 設 定 画 面 からロゴ 画 像 の 保 存 も 同 時 に 行 えるようになっ ています 1. ロゴ 画 像 として 表 示 したい 画 像 ファイルを 用 意 します SharePoint の 機 能 により ロゴ 画 像 の 領 域 に 合 うようにリサイズして 表 示 されますが 既 定 のロゴ 画 像 のサイズは 180 64 ピクセルですのでこのサイズを 参 考 に 用 意 することをおすすめします 19

2. [ 設 定 ] [サイトの 設 定 ] をクリックします 3. 外 観 カテゴリーの [タイトル 説 明 ロゴ] をクリックします 4. [ロゴの 挿 入 ] の 下 にある [コンピューターから] をクリックします 20

5. [ドキュメントの 追 加 ] ダイアログが 表 示 されます [ 参 照 ] をクリックし ローカルにあるロゴ 画 像 を 選 択 し [OK] をクリックします 6. 指 定 した 画 像 がロゴとして 設 定 されます 指 定 した 画 像 は [サイトのリソース ファイル] ライブラリに 保 存 され ロゴの URL は 自 動 で 挿 入 さ れます また 設 定 画 面 にて サイトのロゴがプレビューされるため 結 果 の 確 認 も 以 前 のバージョンよりも 行 いやすくなっています 7. 8. [OK] をクリックします サイトのロゴが 変 更 されます 21

2.2 外 観 の 変 更 [ 外 観 の 変 更 ] はサイトのテーマを 設 定 するためのメニューで テーマはサイトのデザインをブラウザーベ ースで 設 定 変 更 するための 機 能 です 以 前 のバージョンにもテーマ 機 能 は 搭 載 されていましたが 機 能 が 大 幅 に 進 化 し SharePoint 2013 ではテーマにより ブラウザー 設 定 ベースで 以 前 のバージョンより も 柔 軟 なデザイン 変 更 が 行 えるようになっています SharePoint 2010 のテーマ 機 能 では サイトの 色 合 い (リボンやサイド リンク バーなど 共 通 デザイ ン 部 分 の 色 合 い 既 定 のフォント 色 ) が 変 更 可 能 でしたが SharePoint 2013 では 22 種 類 のベ ース デザイン (テーマ) から 任 意 の 表 示 項 目 内 容 を 選 択 しさらに 下 記 のデザイン 変 更 が 行 えます 任 意 の 背 景 画 像 を 指 定 色 合 いの 選 択 サイトのレイアウト (マスター ページ) の 選 択 フォントの 種 類 選 択 サイトの 色 合 いや 背 景 を 組 織 や 会 社 のブランド カラーに 合 わせて ブラウザーベースの 簡 単 な 設 定 に より 手 軽 に 変 更 が 可 能 な 便 利 な 機 能 として 活 用 いただけます 1. 背 景 画 像 として 利 用 する 画 像 を 用 意 します PNG もしくは GIF 画 像 で サイズは 150 KB 以 内 のものを 用 意 します 形 式 が 違 う 場 合 やサイ ズをオーバーしている 場 合 エラーとなり 設 定 が 行 えません [ 参 考 ] Office.com 画 像 検 索 (サンプル 画 像 のダウンロードができるサイトです) http://office.microsoft.com/ja-jp/images/?ctt=97 22

2. [ 設 定 ] [サイトの 設 定 ] をクリックします 3. 外 観 カテゴリーの [ 外 観 の 変 更 ] をクリックします 23

4. 外 観 の 変 更 画 面 が 開 き 22 種 類 のベース デザインが 表 示 されます 任 意 のデザインをクリックし て 選 択 します (この 手 順 書 では [スケッチ] を 選 択 します ) 5. 選 択 したデザインをベースに 下 記 を 設 定 変 更 する 画 面 が 表 示 されます 背 景 画 像 色 サイトのレイアウト フォント 24

6. 背 景 をカスタマイズします ここで 選 択 した [スケッチ] デザインは 背 景 画 像 が 既 定 で 設 定 されており コンテンツ エリアの 背 景 として 利 用 されていることが 画 面 右 側 のプレビュー 画 面 で 確 認 できます 選 択 したベース デザインによって 背 景 画 像 が 適 用 される 箇 所 は 異 なります 設 定 変 更 メニューの 画 像 をアップロードする 箇 所 へ ローカルからドラッグ アンド ドロップで 画 像 を 指 定 します 7. 右 側 のプレビューで 指 定 した 画 像 が 背 景 として 表 示 されていることが 確 認 できます 25

8. 続 いて 色 をカスタマイズします ベース デザインとして 指 定 した [スケッチ] デザインではピンクと 黒 をベースとした 色 合 いが 既 定 で 設 定 されています 任 意 の 色 合 いに 変 更 します リボンの 背 景 色 や コンテンツ エリアの 背 景 色 また 文 字 の 既 定 の 色 などを 一 覧 から 色 合 いを 選 択 することで 設 定 変 更 できます 9. 右 側 のプレビューで 選 択 した 色 が 適 用 されたデザインを 確 認 できます 26

10. 続 いて サイトのレイアウトについて 確 認 します サイトのレイアウトではマスター ページを 選 択 できるようになっており 標 準 搭 載 のマスター ページで ある seattle もしくは oslo が 選 択 できます 特 徴 として seattle を 選 択 するとサイド リンク バ ー 領 域 が 表 示 され oslo を 選 択 した 場 合 はサイド リンク バー 領 域 が 非 表 示 となりコンテンツ エリ アが 中 央 固 定 となる 点 があげられます (1 章 で 解 説 ) ベース デザインとして 指 定 した [スケッチ] デザインでは [oslo] が 選 択 されています ここではその まま 変 更 せずに oslo を 利 用 します 27

11. 続 いて フォントの 設 定 変 更 について 確 認 します フォントは 2 種 類 から (Meiryo UI とメイリオ) から 選 択 できるようになっています メイリオを 選 択 したほうが 文 字 の 表 示 イメージは 大 き 目 に 感 じられます ベース デザインとして 指 定 した [スケッチ] デザインでは [Meiryo UI] が 選 択 されています ここで はそのまま 変 更 せずに Meiryo UI を 利 用 します 12. ここまでの 手 順 でベースデザインの 選 択 背 景 画 像 色 サイトのレイアウト フォント 指 定 を 行 いました 設 定 によるデザイン 編 集 が 完 成 したら [プレビュー] をクリックします 13. 処 理 が 終 了 するまで 待 ちます 28

14. 次 図 のように 設 定 したテーマ 内 容 をサイトのトップページに 適 用 したプレビューが 表 示 されます 実 際 のコンテンツと 合 わせてプレビューが 可 能 です 内 容 を 確 認 し [はい 確 定 します] をクリックします 15. サイトのデザインが 変 更 されたことが 確 認 できます 手 順 と 同 様 の 操 作 を 行 っていただいた 場 合 は 既 定 のデザインから 下 記 変 更 を 確 認 いただけます 29

3. HTML エディターを 利 用 したマスター ページの 編 集 SharePoint サイトのデザインはマスター ページがスタイルを 参 照 することにより 構 成 されています SharePoint 2013 ではテーマの 機 能 が 拡 張 され 背 景 画 像 の 指 定 や 色 合 いの 調 整 等 の 個 別 のデ ザイン 変 更 作 業 を ブラウザー ベースの 設 定 で 簡 単 に また 柔 軟 に 行 えるようになりました また 以 前 の バージョンと 同 様 にテーマで 設 定 変 更 できる 内 容 以 上 のデザイン カスタマイズを 行 う 際 には マスター ペ ージの 作 成 またはカスタマイズが 必 要 です SharePoint 2013 では [デザイン マネージャー] という 新 機 能 により HTML を SharePoint のデザインであるマスター ページ (*.master) に 変 換 する 機 能 が 追 加 されました HTML ファイルを マスター ページに 変 換 できることから サイトのデザイン 編 集 を 行 う 際 にどのような Web デザイナー ツ ールで も 利 用 い た だ け ま す (SharePoint 2013 で は サ イ ト の デ ザ イ ン 編 集 に 必 ず し も SharePoint Designer を 使 う 必 要 はありません 引 き 続 き SharePoint Designer 2013 でペー ジ レイアウトやマスター ページの 編 集 は 行 えますが プレビュー 表 示 機 能 は 削 除 されており 今 後 は 本 自 習 書 で 紹 介 する Dreamweaver のように 一 般 的 な Web 編 集 ツールでの Web デザインが 主 流 となります ) またこの 機 能 により Web デザイナーと Web 開 発 者 とを 分 離 できるメリットがあり ます Web デザイナーは HTML ファイルをマスター ページに 変 換 する 際 に SharePoint によって 挿 入 されたコメント (SharePoint コントロール 等 をマスター ページ 内 に 挿 入 するためのタグをコメントとし て 挿 入 されます) を 削 除 しなければ その 後 のデザイン 保 守 や 変 更 も HTML ファイルを 編 集 することに より 行 えるようになります この 章 では Web 編 集 ツールとして Dreamweaver を 利 用 し SharePoint サイトのデザイン 編 集 を 行 うための 方 法 やその 手 順 を 解 説 します 手 順 では Dreamweaver を 利 用 しますが 前 述 のと おり HTML 編 集 が 行 えるどの Web 編 集 ツールでも 同 様 のことを 行 っていただけます HTML エディターを 利 用 したマスター ページの 編 集 を 行 う 際 のステップは 次 のとおりです 1 2 3 4 5 6 HTML デザインの 用 意 マスター ページ ギャラリーをネットワーク ドライブとして 設 定 マスター ページ ギャラリーに HTML ファイルをアップロード HTML ファイルをマスター ページに 変 換 SharePoint デザインに 必 要 な 内 容 の 追 加 マスター ページとして 設 定 30

3.1 HTML デザインの 用 意 サイトのデザインのベースとなる HTML ファイルを 用 意 します 任 意 に 用 意 いただいた HTML ファイ ル (CSS ファイル 画 像 ファイル 等 のリソース ファイルを 含 む) を 利 用 してください この 自 習 書 では 次 のような HTML デザインを 利 用 します 同 じデザインを 利 用 して 手 順 を 試 された い 場 合 には HTML ファイルを 用 意 する 事 前 準 備 として 下 記 手 順 を 行 ってください ( 任 意 に 用 意 いただ いた HTML ファイルを 利 用 される 際 には 3.1 の 手 順 は 必 要 ありません) フォルダーの 作 成 1. デスクトップに 新 しいフォルダーを 作 成 し フォルダー 名 を MyDesign とします 31

リソース 画 像 ファイルの 用 意 1. 2. 背 景 画 像 を 用 意 します Office.com 画 像 検 索 http://office.microsoft.com/ja-jp/images/?ctt=97 にアク セスします 雲 で 検 索 し 下 記 画 像 を 探 す もしくは MP900400017 で 検 索 し 次 の 画 像 をダウンロード します ( 任 意 の 画 像 でもかまいません) 3. 4. ダウンロードした 画 像 ファイルを 事 前 に 作 成 した [MyDesign] フォルダー 内 に 保 存 し ファイル 名 を Cloud.jpg とリネームします 下 記 画 像 を 右 クリック [ 図 として 保 存 ] します ファイル 名 は Logo.jpg としてください ま た Logo.jpg ファイルは [MyDesign] フォルダーに 保 存 します ( 下 記 ロゴ 画 像 はなくても これ 以 降 の 手 順 で 問 題 はありません また 任 意 の 画 像 を 利 用 いただい てもかまいません) 32

CSS ファイルの 作 成 1. 任 意 のテキスト エディターで 下 記 ソース コードをコピーします /* 全 体 のフォントスタイルを 指 定 */ body { font-family:meiryo UI; /* 全 体 のフォントスタイルを 指 定 */ font-size:12px;} /* ロゴ 画 像 を 表 示 する div タグに 適 用 するスタイル マージン( 左 ) 枠 線 */.logo { float:left; margin-left: 10px; border-style:solid; border-width:2px; border-color:#c4ddd6;} /* 検 索 ボックスを 表 示 する div タグに 適 用 するスタイル マージン フォントサイズ 余 白 ( 右 )*/.search-box { float:right; margin: 10 px; padding-right:10px; font-size:14px;} /* サイト 名 を 表 示 する div タグに 適 用 するスタイル 余 白 ( 左 上 ) マージン( 右 ) フォント 色 サイ ズ*/.site-description { padding-left:180px; margin-right:10px; padding-top:0px; color:#248166; font-size:22px; } /* コンテンツ 内 容 の 背 景 となる div タグに 適 用 するスタイル 横 幅 マージン 余 白 背 景 画 像 */ #site_content{ width: 867px; overflow: hidden; 33

margin: 0 auto 0 auto; padding: 20px 24px 20px 37px; background:url(cloud.jpg); } /* グローバル ナビゲーションを 表 示 する div タグに 適 用 するスタイル 余 白 ( 左 下 ) フォントサイズ */ #nav{ padding-left:160px; padding-bottom:5px; font-size:14px;} /* コンテンツ 内 容 の div タグに 適 用 するスタイル 背 景 色 余 白 */ #main{ background:#ffffff; padding:10px;} /* タイトルエリア(サイト 名 やグローバル ナビゲーションを 含 むエリア) div タグに 適 用 するスタイル マージン( 左 右 ) 横 幅 縦 幅 背 景 色 */.titlearea{ margin-left: auto; margin-right: auto; display: block; width:867px; height:auto; background-color:#def7fe;} /* フッターエリア div タグに 適 用 するスタイル 余 白 */.footer{ float:left; padding:5px 0px 5px 0px;} /* ハイパーリンクに 適 用 するスタイル アウトラインなし 下 線 文 字 色 */ a, a:hover{ outline: none; text-decoration: underline; color: #248166;} 34

/* ハイパーリンクホバー 時 に 適 用 するスタイル 下 線 なし */ a:hover{ text-decoration: none;} 2. [MyDesign] フォルダー 内 に mycss.css として 保 存 します 35

HTML ファイルの 作 成 1. 任 意 のテキスト エディターで 下 記 ソース コードをコピーします <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="content-type" /> <title>contoso Home</title> <link rel="stylesheet" type="text/css" href="mycss.css" /> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.7.1.js" type="text/javascript"></script> </head> <body> <div id="s4-workspace"> <div id="s4-bodycontainer" > <div id="site_content"> <div class="titlearea"> <div class="logo"> <a href="http://sv01/"> <img src="logo.jpg" height="64px" /> </a> </div> <div class="site-description">{サイト 名 }</div> <div class="search-box">{ 検 索 ボックス}</div> 36

<div id="nav">{グローバル ナビゲーション}</div> </div> <!--end titlearea--> <div id="main"> <table style="border:0px;border-collapse:collapse;width:100%"> <tr> <td style="height:16px"></td> </tr> <tr> <td style="vertical-align:top;height:15px"> <table style="border:0px;border-collapse:collapse;width:100%"> <tr> <td style="width:8px;height:21px;background:#ff8400"> </td> <td style="height:21px;padding-left:10px"> <b><font color="#ff8400"> <h1> SharePoint 2013</h1></font></b></td> </tr> </table> </td> </tr> <tr> <td style="vertical-align:top"> <p> SharePoint 2013 の 特 徴 とビジネス 価 値 新 しい SharePoint 2013 は エンタープライズ ソーシャルをはじめとした 先 進 の 機 能 を 大 幅 に 拡 張 し さまざま 37

なワークスタイルやビジネス ニーズに 対 応 する 情 報 プラットフォームへと 進 化 しました SharePoint をご 利 用 いただくことで 何 が 実 現 できるのか お 客 様 が 現 在 抱 えるニ ーズにどのように 対 応 できるのかを 以 下 でご 確 認 ください SharePoint 2013 は ドキュメントやメッセージだけでなく データやビジネス プロセス 人 のスキルやネットワークにいたるまで ビジネスに 必 要 なあらゆる 情 報 を 適 切 に 管 理 し 活 用 するための 統 合 ビジネス プラットフォームです ドキュメントやアイデア 情 報 や 人 のつながりを 共 有 整 理 し いつでもどこからでも 利 用 可 能 にすることで スピーデ ィで 効 率 的 なビジネスとイノベーションを 生 み 出 します また 複 雑 に 変 化 するビジネ ス ニーズに 対 応 するためにアプリケーションをカスタマイズし 安 全 で 統 制 のとれたプ ラットフォーム 上 で 利 用 することもできます これらの 利 点 の 具 体 的 なイメージや 詳 細 は こちらのページ でご 確 認 ください </p> </td> </tr> </table> </div> <!--end main--> <div class="titlearea footer"> <div style="padding-left:10px"> <a href="http://sv01">about Us</a> </div> </div> </div> <!--end site content--> </div><!--end s4-bodycontainer--> </div><!--end s4-workspace--> </body> </html> 2. [MyDesign] フォルダー 内 に ContosoDesign.html として 保 存 します 38

内 容 の 確 認 1. ここまでの 手 順 で [MyDesign] フォルダーの 内 容 は 次 図 のようになります 2. ContosoDesign.html をダブル クリックしてブラウザーで 開 き 次 図 のように 表 示 されることを 確 認 します 39

3.2 マスター ページ ギャラリーをネットワーク ドライブとして 設 定 マスター ページ ギャラリーはサイト コレクションに1つずつ 用 意 されるマスター ページの 展 開 場 所 で す HTML をマスター ページに 変 換 する 際 には まず 用 意 した HTML (CSS js ファイル 画 像 ファ イルを 含 む) ファイルをマスター ページ ギャラリーにアップロードしてから 変 換 を 行 います また HTML からマスター ページへ 変 換 した 後 も ベースの HTML ファイルと 変 換 機 能 により 作 成 したマスター ペー ジ ファイル (*.master) とは 同 期 されるため デザイン 編 集 は HTML ファイルを 編 集 することにより 行 えます マスター ページ ギャラリーへのファイル アップロードやマスター ページ ギャラリー 内 の HTML ファイル を Web 編 集 ツールで 開 く 作 業 を 行 いやすくするために マスター ページ ギャラリーはネットワーク ドラ イブとして 設 定 しておくことがおすすめです ここではマスター ページ ギャラリーをデザイン 編 集 環 境 のネットワーク ドライブとして 登 録 するための 手 順 を 確 認 します 1. トップ レベル サイトで [ 設 定 ] [デザイン マネージャー] をクリックします 40

2. デザイン マネージャーが 開 きます サイド リンク バーから [3. デザイン ファイルのアップロード] をクリックし 表 示 される URL (マスタ ー ページ ギャラリーの URL) をコピーします 3. ネットワーク ドライブの 設 定 を 行 う 環 境 (マスター ページのデザインを 行 う 環 境 ) で Windows エクスプローラーを 開 きます [コンピューター] を 開 きます 41

4. [コンピューター] タブの [ネットワークの 場 所 の 追 加 ] をクリックします 5. [ネットワークの 場 所 の 追 加 ] ダイアログ ボックスが 表 示 されます [ 次 へ] をクリックします 42

6. [カスタムのネットワークの 場 所 を 選 択 ] をクリックします 7. コピーしておいたマスター ページ ギャラリーの URL をコピーします [ 次 へ] をクリックします 43

8. ショートカットの 名 前 を 編 集 し [ 次 へ] をクリックします 9. [ 完 了 ] をクリックします 44

10. デザイン 編 集 を 行 う 環 境 で マスター ページ ギャラリーに 対 してネットワーク ドライブの 設 定 を 行 い ました Windows エクスプローラーを 利 用 したファイルのアップロードや 各 種 HTML 編 集 ツール からの 編 集 作 業 を 行 いやすくするためです デザイン 編 集 を 行 う サイト コレクションのマスター ページ ギャラリー 内 の 内 容 が 表 示 されます ここでの 手 順 は Windows 8 をベースとしています それ 以 外 の Windows OS の 場 合 には 操 作 に 若 干 違 いがあります ご 利 用 の Windows OS のバージョンに 合 わせてネットワ ーク ドライブの 割 り 当 てを 行 ってください [ 参 考 ] MSDN SharePoint 2013 マスター ページ ギャラリーへのネットワーク ドライブの 割 り 当 て http://msdn.microsoft.com/ja-jp/library/jj733519.aspx 45

3.3 マスター ページ ギャラリーに HTML ファイルをアップロード マスター ページ ギャラリーにあらかじめ 用 意 したデザインである HTML ファイルをアップロードします HTML ファイルから 参 照 するリソース ファイル (CSS ファイルや js ファイル 画 像 リソース ファイルな ど) がある 場 合 は HTML ファイルと 同 様 にアップロードします またアップロード 作 業 は 3.2 で 作 成 したネットワーク ドライブを 利 用 して 行 いますが ブラウザーでマ スター ページ ギャラリーを 開 いてアップロードすることももちろん 可 能 です 7 手 順 は [6 HTML デザインの 用 意 ] により 作 成 した HTML ファイルをマスター ページ ギャラリーにアップロード していますが 任 意 の HTML ファイルを 利 用 する 場 合 はそれらのファイルをマスター ページ ギャラリーに アップロードしてください 1. Windows エクスプローラーで 前 の 手 順 で 用 意 したショートカットよりマスター ページ ギャラリーを 開 きます 46

2. ローカルから Windows エクスプローラー 上 へドラッグ アンド ドロップ 操 作 で MyDesign フォル ダーごとマスター ページ ギャラリーにアップロードします 3. ブラウザーでマスター ページ ギャラリーを 開 き Windows エクスプローラーでアップロードしたファイ ルを 確 認 します ブラウザーでサイトを 開 き [ 設 定 ] [サイトの 設 定 ] をクリックします 4. Web デザイナー ギャラリーカテゴリーの [マスター ページとページ レイアウト] をクリックします 47

5. マスター ページ ギャラリーがブラウザーで 開 きます アップロードした 内 容 が 存 在 することを 確 認 します 48

3.4 HTML ファイルをマスター ページに 変 換 HTML ファイルをマスター ページに 変 換 する 機 能 を 利 用 し 前 の 手 順 でマスター ページ ギャラリー にアップロードした HTML ファイルをマスター ページに 変 換 します 1. トップ レベル サイトで [ 設 定 ] [デザイン マネージャー] をクリックします 2. デザイン マネージャーが 開 きます サイド リンク バーから [4. マスター ページの 編 集 ] をクリックします 49

3. [HTML ファイルを SharePoint マスター ページに 変 換 ] をクリックします 4. [メディアの 選 択 ] ダイアログが 表 示 されます マスター ページ ギャラリー 内 の 内 容 が 表 示 されるので [MyDesign] / ContosoDesign.html を 選 択 し [ 挿 入 ] をクリックします 任 意 の HTML ファイルを 利 用 する 場 合 は そちらを 選 択 してください 50

5. [デザイン マネージャー:マスター ページの 編 集 ] 画 面 内 の 一 覧 に ContosoDesign (or 任 意 のファイル 名 ) が 表 示 されます また 状 態 が 正 常 に 変 換 されました となっていることを 確 認 します 6. ハイパーリンクとなっている 正 常 に 変 換 されました をクリックします 51

7. マスター ページに 変 換 された 内 容 のプレビューが 開 きます 52

3.5 SharePoint デザインに 必 要 な 内 容 の 追 加 こ こ ま で の 手 順 で Web 標 準 技 術 であ る HTML CSS を 利 用 し て 用 意 し た デ ザ イ ン を SharePoint のマスター ページに 変 換 する 手 順 を 確 認 しました SharePoint 2013 では HTML ファイルをマスター ページに 変 換 する 新 機 能 を 活 用 することで これまでよりも 容 易 に SharePoint の デザイン 編 集 が 可 能 となりました し か し こ こ ま での 内 容 で は まだ SharePoint サ イ ト の デ ザ イ ン と して 十 分 と は いえ ま せ ん SharePoint ページの 特 徴 である 各 コントロールやコンテンツ エリアを 含 まないためです HTML で 用 意 したデザインを SharePoint 2013 のデザイン マネージャーを 利 用 してマスター ページに 変 換 する と 上 部 のリボン 領 域 は 自 動 で 組 み 込 まれますが その 他 の 特 徴 的 な SharePoint コントロール (サイ ト ロゴ グローバル ナビゲーション サイド リンク バー 検 索 ボックス 等 ) は 自 動 では 組 み 込 まれません HTML をマスター ページに 変 換 した 後 はこれらの SharePoint コントロールの 埋 め 込 みが 必 要 です またサイト 内 の 各 種 ページを 開 いてプレビューすることで デザインの 微 調 整 が 必 要 となることもあるでしょ う SharePoint 2013 ではこのような 作 業 も SharePoint Designer といった SharePoint 独 自 ツールではなく HTML 編 集 機 能 がある 一 般 的 な Web 編 集 ツールを 利 用 して 行 えます マスター ページ ギャラリー 内 に 保 存 した HTML ファイルを 上 書 き 編 集 するとマスター ページの 内 容 も 常 に 変 更 されます マスター ページに 変 換 後 も HTML ファイルを 更 新 することで 編 集 したデザインはマスター ページに 反 映 されますが マスター ページを 直 接 編 集 した 場 合 には HTML ファイルにはその 変 更 は 反 映 されません HTML ファイルには [ 関 連 付 けられているファイル] プロパティがあり 既 定 で はい に 設 定 されています このプロパティを いいえ と 変 更 し HTML ファイルとマスター ページの 関 連 付 け を 解 除 しない 限 り マスター ページに 直 接 編 集 した 内 容 は 失 われます またこのプロパティを いいえ と 変 更 した 後 は HTML ファイルに 対 して 行 った 編 集 はマスター ページに 反 映 されなくなります またグローバル ナビゲーション 等 の SharePoint コントロールを HTML ファイル 内 に 埋 め 込 むため には [スニペット] 機 能 が 利 用 できます スニペットは SharePoint 2013 のデザイン 編 集 を 強 力 にサ ポートする 新 機 能 である [デザイン マネージャー] に 含 まれる 機 能 のひとつです ここではスニペット 機 能 を 利 用 して SharePoint デザインに 必 要 な 各 種 コントロール (サイトのタイト ル サ イ ト の ロ ゴ グ ロ ー バ ル ナ ビ ゲ ー シ ョ ン 検 索 ボ ッ ク ス コ ン テ ン ツ エ リ ア ) を ContosoDesign.html に 追 加 する 方 法 を 確 認 します ContosoDesign.html ファイルの 編 集 作 業 に は 一 般 的 な Web 編 集 ツ ー ル の 例 と し て Dreamweaver を 利 用 し ま す ま た ContosoDesign.html を 編 集 した 内 容 は ContosoDesign.master の 内 容 にも 反 映 されること を 確 認 します 53

この 自 習 書 の 手 順 では HTML 編 集 ツールとして Dreamweaver を 利 用 しますが その 他 の Web 編 集 ツールを 利 用 することも 可 能 です また Web 編 集 ツールを 用 意 できない 場 合 にはテキスト エディターを 利 用 いただいてもかまいません 54

スニペット 画 面 を 開 く SharePoint の 各 コントロールを HTML ファイル 内 に 組 み 込 むための 機 能 がスニペットです スニペ ット 機 能 を 利 用 するために まずはスニペット 作 成 画 面 であるスニペット ギャラリーを 開 きます 1. プレビュー 画 面 で 右 上 にある [スニペット] をクリックします 2. 別 タブ (もしくは 別 ウィンドウ) でスニペット ギャラリーが 開 きます 55

HTML エディター (Dreamweaver) で HTML ファイルを 開 く ベースの HTML ファイルと それを 変 換 することで 作 成 したマスター ページ ファイルは 同 期 状 態 にあ ります HTML ファイルを 作 成 した 任 意 の Web 編 集 ツールを 利 用 して 編 集 作 業 が 可 能 です ここでは Dreamweaver を 利 用 してマスター ページ ギャラリーに 保 存 したベースの HTML ファイ ルを 開 きます 1. Windows エクスプローラーで 3.2 で 用 意 したショートカットよりマスター ページ ギャラリーを 開 き ます 2. Windows エ ク ス プ ロ ー ラ ー で 開 い た マ ス タ ー ペ ー ジ ギ ャ ラ リ ー か ら HTML フ ァ イ ル (ContosoDesign.html or 任 意 で 用 意 した HTML ファイル) を 任 意 の Web 編 集 ツールで 開 きます (ここでは Dreamweaver を 利 用 します) 56

3. HTML ファイルにはコメント アウトされた 行 が 複 数 行 追 加 されていることが 確 認 できます マスター ページに 変 換 した 際 に HTML ファイル 内 にはリボン メニューの 定 義 など SharePoint デ ザインとして 必 要 なソース コードが 自 動 的 にコメントとして 追 加 されます コメントとして 追 加 される 理 由 はマスター ページに 変 換 した 後 も SharePoint 独 自 のタグを 含 まない HTML ファイルとして 任 意 の Web 編 集 ツールで 開 けるようにするためです コメントとして 追 加 された 各 ソース コードを SharePoint はマスター ページとして 利 用 する 際 に 必 要 なソース コード (SharePoint や ASP.NET のコード) に 変 換 して 利 用 しています 4. SharePoint や ASP.NET のタグを 含 まない HTML ファイルとして 開 けるため プレビュー 表 示 も 可 能 です 57

サイト 名 どのサイトでこのデザインが 利 用 されていも 問 題 なく 利 用 できるように サイト 名 を 表 示 するコントロール を 埋 め 込 みます 1. 2. ブラウザーで 開 いておいたスニペット ギャラリーを 開 きます リボンから [サイト タイトル] をクリックします プレビューに 現 在 開 いているサイトの 名 前 が 表 示 されていることが 確 認 できます 58

3. プレビューの 下 にある HTML スニペットに 表 示 されているソース コードをコピーします 4. 5. HTML 編 集 ツール (ここでは Dreamweaver) に 戻 ります サイト 名 を 表 示 したい 箇 所 に スニペット ギャラリーからコピーしたソース コードを 貼 り 付 けます 手 順 で 用 意 した HTML ファイルを 利 用 している 場 合 は {サイト 名 } の 箇 所 を 上 書 きしてくださ い ここで 利 用 したスニペット ギャラリーにより 提 供 されるコードは マスター ページに 変 換 される 際 に SharePoint のサイト 名 が 表 示 されるコントロールに 置 き 換 えられます < 元 のソース> <div class="site-description">{サイト 名 }</div> < 貼 り 付 けた 後 のソース> <div class="site-description"> <div data-name="sitetitle"><!--cs: サイト タイトル スニペットの 開 始 --><!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--><!--MS:<SharePoint:AjaxD elta runat="server">--><!--ps: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 しな いでください)--><!--PE: 読 み 取 り 専 用 プレビューの 終 了 59

--><!--MS:<SharePoint:SPLinkButton runat="server" NavigateUrl="~site/">--><!--PS: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 し ないでください)--><!--PE: 読 み 取 り 専 用 プレビューの 終 了 --><!--MS:<SharePoint:ProjectProperty Property="Title" runat="server">--><!--ps: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 しないでく ださい)-->test<!--PE: 読 み 取 り 専 用 プレビューの 終 了 --><!--ME:</SharePoint:ProjectProperty>--><!--PS: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 しないでください)--><!--PE: 読 み 取 り 専 用 プレビューの 終 了 --><!--ME:</SharePoint:SPLinkButton>--><!--PS: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 しないでください)--><!--PE: 読 み 取 り 専 用 プレビューの 終 了 --><!--ME:</SharePoint:AjaxDelta>--><!--CE: サイト タイトル ス ニペットの 終 了 --></div> </div> 6. HTML ファイルを 上 書 き 保 存 します 7. 8. ブラウザーで 開 いておいたプレビュー 画 面 に 戻 ります F5 などで 画 面 を 更 新 すると プレビュー 内 でサイト 名 を 表 示 する 内 容 に 変 わったことが 確 認 できま す 60

サイトのロゴ SharePoint では 設 定 ベースでサイト ロゴを 変 更 できる 機 能 があります ([2.1 ロゴの 変 更 ] で 解 説 ) ロゴ 変 更 機 能 を 利 用 するためにはマスター ページに 対 して あらかじめロゴ 画 像 を 表 示 したい 箇 所 にサイトの 設 定 画 面 から 指 定 されたロゴ 画 像 を 表 示 するためのコントロールが 必 要 です ここではロゴの 変 更 機 能 に 対 応 したデザインにするため サイトのロゴを 表 示 するコントロールを 埋 め 込 みます 61

1. 2. ブラウザーで 開 いておいたスニペット ギャラリーを 開 きます リボンから [サイト ロゴ] をクリックします プレビューにサイトのロゴが 表 示 されていることが 確 認 できます 3. プレビューの 下 にある HTML スニペットに 表 示 されているソース コードをコピーします 4. HTML 編 集 ツール (ここでは Dreamweaver) に 戻 ります 62

5. サイトのロゴを 表 示 したい 箇 所 に スニペット ギャラリーからコピーしたソース コードを 貼 り 付 けます 手 順 で 用 意 した HTML ファイルを 利 用 している 場 合 は <div class= logo > 内 の <a> タグを 置 き 換 えます ここで 利 用 したスニペット ギャラリーにより 提 供 されるコードは マスター ページに 変 換 される 際 に SharePoint のサイト ロゴを 表 示 するためのコントロールに 置 き 換 えられます < 元 のソース> <div class="logo"> <a href="http://sv01/"> <img src="logo.jpg" height="64px" /> </a> </div> < 貼 り 付 けた 後 のソース> <div class="logo"> <div data-name="sitelogo"><!--cs: サイト ロゴ スニペットの 開 始 --><!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--><!--MS:<SharePoint:AjaxD elta BlockElement="true" runat="server">--><!--ps: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 しないでください)--><!--PE: 読 み 取 り 専 用 プレビューの 終 了 --><!--MS:<SharePoint:SPSimpleSiteLink CssClass="ms-siteicon-a" runat="server" ID="x5c0c16845ee04eeaa17823c43f59e55b">--><!--PS: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 しないでください)--><!--PE: 読 み 取 り 専 用 プレビューの 終 了 --><!--MS:<SharePoint:SiteLogoImage CssClass="ms-siteicon-img" name="onetidheadbnnr0" ID="x99d4ca9632b448b4b9b949be9ea5198b" LogoImageUrl="/_layouts/15/images/siteIcon.png" runat="server">--><!--ps: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 しないでく ださい)--><img id="ctl00_x99d4ca9632b448b4b9b949be9ea5198b" class="ms-siteicon-img" name="onetidheadbnnr0" Src="/_layouts/15/images/siteIcon.png?rev=23" alt="test" 63

/><!--PE: 読 み 取 り 専 用 プレビューの 終 了 --><!--ME:</SharePoint:SiteLogoImage>--><!--PS: 読 み 取 り 専 用 プレ ビューの 開 始 ( 変 更 しないでください)--><!--PE: 読 み 取 り 専 用 プレビューの 終 了 --><!--ME:</SharePoint:SPSimpleSiteLink>--><!--PS: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 しないでください)--><!--PE: 読 み 取 り 専 用 プレビューの 終 了 --><!--ME:</SharePoint:AjaxDelta>--><!--CE: サイト ロゴ スニペ ットの 終 了 --></div> </div> 6. HTML ファイルを 上 書 き 保 存 します 7. 8. ブラウザーで 開 いておいたプレビュー 画 面 に 戻 ります F5 などで 画 面 を 更 新 すると プレビュー 内 でサイトのロゴを 表 示 する 内 容 に 変 わったことが 確 認 で きます 64

グローバル ナビゲーション グローバル ナビゲーションをデザイン内に埋め込みます 1. 2. ブラウザーで開いておいたスニペット ギャラリーを開きます リボンから [トップ ナビゲーション] をクリックします プレビューにグローバル ナビゲーションの内容が表示されていることが確認できます 65

3. ナビゲーションの 表 示 設 定 をカスタマイズします 既 定 で 1 階 層 表 示 し マウス オーバーでさらにもう 一 階 層 下 の2 階 層 目 を 表 示 するよう 設 定 し ます 右 側 にあるプロパティ 編 集 メニューより [カスタマイズ トップ ナビゲーション (AspMenu)] の [Important] [StaticDisplayLevels] を 1 に 変 更 します 4. 続 い て [ カ ス タ マ イ ズ ト ッ プ ナ ビ ゲ ー シ ョ ン (AspMenu)] の [ 動 作 ] [MaximumDynamicDisplayLevels] を 1 に 変 更 します 66

5. プロパティ 変 更 画 面 の 上 にある [ 更 新 ] をクリックします 6. 7. プレビュー 内 容 が 更 新 されます ( 作 業 中 のサイトにサブ サイトがある 場 合 グローバル ナビゲーシ ョンに 表 示 されます) プレビューの 下 にある HTML スニペットに 表 示 されているソース コードをコピーします 8. HTML 編 集 ツール (ここでは Dreamweaver) に 戻 ります 67

9. グローバル ナビゲーションを 表 示 したい 箇 所 に スニペット ギャラリーからコピーしたソース コードを 貼 り 付 けます 手 順 で 用 意 した HTML ファイルを 利 用 している 場 合 は {グローバル ナビゲーション} の 箇 所 を 上 書 きしてください ここで 利 用 したスニペット ギャラリーにより 提 供 されるコードは マスター ページに 変 換 される 際 に グローバル ナビゲーションが 表 示 されるコントロールに 置 き 換 えられます < 元 のソース> <div id="nav">{グローバル ナビゲーション}</div> < 貼 り 付 けた 後 のソース> <div id="nav"> <div data-name="topnavigationnoflyoutwithstartnode"><!--cs: ト ップ ナビゲーション スニペットの 開 始 --><!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--><!--MS:<SharePoint:AjaxD elta runat="server" CssClass="ms-displayInline ms-core-navigation ms-dialoghidden" BlockElement="True" ID="DeltaTopNavigation">--><!--PS: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 しないでください)--><!--PE: 読 み 取 り 専 用 プレビューの 終 了 --><!--MS:<SharePoint:DelegateControl runat="server" Id="topNavigationDelegate" ControlId="TopNavigationDataSource">--><!--PS: 読 み 取 り 専 用 プレ ビューの 開 始 ( 変 更 しないでください)--><span style="display:none"><table cellpadding="4" cellspacing="0" style="font:messagebox;color:buttontext;background-color:butt onface;border: solid 1px;border-top-color:buttonhighlight;border-left-color:button highlight;border-bottom-color:buttonshadow;border-right-color :buttonshadow"><tr><td nowrap="nowrap"><span style="font-weight:bold">portalsitemapdatasource</span> - topsitemap</td></tr><tr><td></td></tr></table></span><!--pe: 読 み 取 り 専 用 プレビューの 終 了 68

--><!--MS:<Template_Controls>--><!--MS:<asp:SiteMapDataSource ShowStartingNode="True" SiteMapProvider="SPNavigationProvider" ID="topSiteMap" runat="server" StartingNodeUrl="sid:1002">--><!--ME:</asp:SiteMapDataSource> --><!--ME:</Template_Controls>--><!--ME:</SharePoint:Delegate Control>--><a name="startnavigation"></a><!--ms:<asp:contentplaceholder ID="PlaceHolderTopNavBar" runat="server">--><!--ms:<sharepoint:aspmenu runat="server" UseSeparateCss="false" AdjustForShowStartingNode="False" StaticDisplayLevels="1" ID="TopNavigationMenu" DataSourceID="topSiteMap" AccessKey="1" SkipLinkText="" Orientation="Horizontal" EnableViewState="False" MaximumDynamicDisplayLevels="1" UseSimpleRendering="True">--><!--PS: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 しないでください)--><link rel="stylesheet" type="text/css" href="/_layouts/15/1041/styles/menu-21.css" /><div id="zz7_topnavigationmenu" class=" noindex ms-core-listmenu-horizontalbox"><ul id="zz9_rootaspmenu" class="root ms-core-listmenu-root static"><li class="static"><a class="static menu-item ms-core-listmenu-item ms-displayinline ms-navedit-linknode" tabindex="0" href="/sites/test/sitepages/ホーム.aspx" accesskey="1"><span class="additional-background ms-navedit-flyoutarrow"><span class="menu-item-text">test</span></span></a><ul class="static"><li class="static"><a class="static menu-item ms-core-listmenu-item ms-displayinline ms-navedit-linknode" tabindex="0" href="/sites/test/sub/sitepages/ホー ム.aspx"><span class="additional-background ms-navedit-flyoutarrow"><span class="menu-item-text">sub</span></span></a></li></ul></li><l i class="static ms-verticalaligntop ms-listmenu-editlink ms-navedit-editarea"><span class="ms-navedit-editspan" id="zz7_topnavigationmenu_navmenu_edit"><a 69

id="zz7_topnavigationmenu_navmenu_editlinks" class="ms-navedit-editlinkstext" href="#" onclick="g_quicklaunchmenu = null; EnsureScriptParams('quicklaunch.js', 'QuickLaunchInitEditMode', 'zz7_topnavigationmenu', 1, 2, 0, ' u002fsites u002ftest'); canceldefault(event); return false;"><span class="ms-displayinlineblock"><span class="ms-navedit-editlinksiconwrapper ms-verticalalignmiddle"><img class="ms-navedit-editlinksicon" src="/_layouts/15/images/spcommon.png?rev=23" /></span><span class="ms-metadata ms-verticalalignmiddle">リンクの 編 集 </span></span></a><span id="zz7_topnavigationmenu_navmenu_loading" class="ms-navedit-menuloading ms-hide"><a id="zz7_topnavigationmenu_navmenu_gearslink" href="#" onclick="hidegears(); return false;" title="このアニメーションは 処 理 が 実 行 中 であることを 示 します このアニメーション 画 像 を 削 除 するには ここをク リックします "><img id="zz7_topnavigationmenu_navmenu_gearsimage" src="/_layouts/15/images/loadingcirclests16.gif?rev=23" /></a></span><div id="zz7_topnavigationmenu_navmenu_errormsg" class="ms-navedit-errormsg"></div></span></li></ul></div><!-- PE: 読 み 取 り 専 用 プレビューの 終 了 --><!--ME:</SharePoint:AspMenu>--><!--ME:</asp:ContentPlaceHo lder>--><!--ps: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 しないでくださ い)--><!--PE: 読 み 取 り 専 用 プレビューの 終 了 --><!--ME:</SharePoint:AjaxDelta>--><!--CE: トップ ナビゲーション スニペットの 終 了 --></div> </div> 70

10. HTML ファイルを 上 書 き 保 存 します 11. 12. ブラウザーで 開 いておいたプレビュー 画 面 に 戻 ります F5 などで 画 面 を 更 新 すると プレビュー 内 でグローバル ナビゲーションが 表 示 されていることが 確 認 できます 71

検 索 ボックス 検 索 ボックスをデザイン 内 に 埋 め 込 みます 1. 2. ブラウザーで 開 いておいたスニペット ギャラリーを 開 きます リボンから [ 検 索 ボックス] をクリックします プレビューに 検 索 ボックスが 表 示 されていることが 確 認 できます 72

3. プレビューの 下 にある HTML スニペットに 表 示 されているソース コードをコピーします 4. 5. HTML 編 集 ツール (ここでは Dreamweaver) に 戻 ります 検 索 ボックスを 表 示 したい 箇 所 に スニペット ギャラリーからコピーしたソース コードを 貼 り 付 けます 手 順 で 用 意 した HTML ファイルを 利 用 している 場 合 は { 検 索 ボックス} の 箇 所 を 上 書 きしてく ださい ここで 利 用 したスニペット ギャラリーにより 提 供 されるコードは マスター ページに 変 換 される 際 に 検 索 ボックス コントロールに 置 き 換 えられます < 元 のソース> <div class="search-box">{ 検 索 ボックス}</div> < 貼 り 付 けた 後 のソース> <div class="search-box"> <div data-name="searchbox"><!--cs: 検 索 ボックス スニペットの 開 始 --><!--SPM:<%@Register Tagprefix="SearchWC" Namespace="Microsoft.Office.Server.Search.WebControls" Assembly="Microsoft.Office.Server.Search, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--><!--MS:<SearchWC:SearchB oxscriptwebpart UseSiteCollectionSettings="true" EmitStyleReference="false" ShowQuerySuggestions="false" ChromeType="None" UseSharedSettings="true" 73

TryInplaceQuery="false" ServerInitialRender="true" runat="server">--><!--ps: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 しないでく ださい)--><div class="ms-webpart-chrome ms-webpart-chrome-fullwidth "><div WebPartID="00000000-0000-0000-0000-000000000000" HasPers="true" id="webpart" width="100%" class="ms-wpbody noindex " OnlyForMePart="true" allowdelete="false" style=""><div componentid="ctl00_ctl03_csr" id="ctl00_ctl03_csr"><div id="searchbox" name="control"><div class="ms-srch-sb ms-srch-sb-border" id="ctl00_ctl03_csr_sboxdiv"><input type="text" value=" 検 索..." maxlength="2048" accesskey="s" title=" 検 索..." id="ctl00_ctl03_csr_sbox" autocomplete="off" autocorrect="off" onkeypress="ensurescriptfunc('search.clientcontrols.js', 'Srch.U', function() {if (Srch.U.isEnterKey(String.fromCharCode(event.keyCode))) {$find('ctl00_ctl03_csr').search($get('ctl00_ctl03_csr_sbox').value);return Srch.U.cancelEvent(event);}})" onkeydown="ensurescriptfunc('search.clientcontrols.js', 'Srch.U', function() {var ctl = $find('ctl00_ctl03_csr');ctl.activatedefaultquerysuggestionbe havior();})" onfocus="ensurescriptfunc('search.clientcontrols.js', 'Srch.U', function() {var ctl = $find('ctl00_ctl03_csr');ctl.hideprompt();ctl.setborder(true) ;})" onblur="ensurescriptfunc('search.clientcontrols.js', 'Srch.U', function() {var ctl = $find('ctl00_ctl03_csr'); if (ctl){ ctl.showprompt(); ctl.setborder(false);}})" class="ms-textsmall ms-srch-sb-prompt ms-helpertext" /><a title=" 検 索 " class="ms-srch-sb-searchlink" id="ctl00_ctl03_csr_searchlink" onclick="ensurescriptfunc('search.clientcontrols.js', 'Srch.U', function() {$find('ctl00_ctl03_csr').search($get('ctl00_ctl03_csr_sbox').value);})" href="javascript: {}"><img src="/_layouts/15/images/searchresultui.png?rev=23" 74

class="ms-srch-sb-searchimg" id="searchimg" alt=" 検 索 " /></a></div></div></div><noscript><div id="ctl00_ctl03_noscript">ブラウザーで JavaScript が 有 効 になってい ません JavaScript を 有 効 にして やり 直 してください </div></noscript><div id="ctl00_ctl03"></div><div class="ms-clear"></div></div></div><!--pe: 読 み 取 り 専 用 プレビュー の 終 了 --><!--ME:</SearchWC:SearchBoxScriptWebPart>--><!--CE: 検 索 ボックス スニペットの 終 了 --></div> </div> 6. HTML ファイルを 上 書 き 保 存 します 7. 8. ブラウザーで 開 いておいたプレビュー 画 面 に 戻 ります F5 などで 画 面 を 更 新 すると プレビュー 内 で 検 索 ボックスが 表 示 されていることが 確 認 できます 75

コンテンツ エリア 各 ページごとの 内 容 を 表 示 するためのエリアであるコンテンツ エリアをデザイン 内 に 配 置 します HTML ファイルをマスター ページに 変 換 すると 画 面 下 部 に 明 るい 黄 色 で 表 示 される div タグがペ ージ 内 に 自 動 的 に 配 置 されます この div タグ 内 にコンテンツ エリアとして 動 作 するためのソース コー ドがコメントとして 埋 め 込 まれています デザイン 内 のコンテンツ エリアとして 利 用 したい 箇 所 に div タグを 移 動 し 編 集 を 行 います 76

1. 2. HTML 編 集 ツールで 編 集 中 の HTML ファイルを 開 きます プレビュー 画 面 などで 画 面 下 部 に 配 置 されている 明 るい 黄 色 の 領 域 (div タグ) を 見 つけます 3. 対 応 するソース コードを 切 り 取 ります 下 記 が 対 応 するソース コードです <div data-name="contentplaceholdermain"> <!--CS: PlaceHolderMain スニペットの 開 始 --> <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--> <!--MS:<SharePoint:AjaxDelta ID="DeltaPlaceHolderMain" IsMainContent="true" runat="server">--> <!--MS:<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">--> <div class="defaultcontentblock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;"> この div は 削 除 する 必 要 がありますが ページ レイアウトやページが 表 示 さ れるコンテンツ 領 域 を 表 しています このコンテンツ プレースホルダーを 囲 むマスター ページをデザインしてください </div> 77

<!--ME:</asp:ContentPlaceHolder>--> <!--ME:</SharePoint:AjaxDelta>--> <!--CE: PlaceHolderMain スニペットの 終 了 --> </div> 4. 切 り 取 ったソース コードをコンテンツ エリアとして 表 示 させたい 箇 所 に 貼 り 付 けます 手 順 で 用 意 した HTML ファイルを 利 用 している 場 合 は <div id="main"> タグ 内 に 挿 入 し てください 既 存 のテーブル タグと 置 きかえます <div id="main"> タグ 内 の 内 容 は 下 記 のようになります <div id="main"> <div data-name="contentplaceholdermain"> <!--CS: PlaceHolderMain スニペットの 開 始 --> <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--> <!--MS:<SharePoint:AjaxDelta ID="DeltaPlaceHolderMain" IsMainContent="true" runat="server">--> <!--MS:<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">--> <div class="defaultcontentblock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;"> この div は 削 除 する 必 要 がありますが ページ レイアウトやページが 表 示 されるコ ンテンツ 領 域 を 表 しています このコンテンツ プレースホルダーを 囲 むマスター ページ をデザインしてください </div> <!--ME:</asp:ContentPlaceHolder>--> <!--ME:</SharePoint:AjaxDelta>--> <!--CE: PlaceHolderMain スニペットの 終 了 --> </div> </div> 78

5. プレビュー 画 面 を 確 認 すると コンテンツ エリアとなる 内 容 が 表 示 されていることが 確 認 できますが 明 るい 黄 色 の 領 域 はそのままです ソース コードより 明 るい 黄 色 領 域 である div タグを 削 除 します 削 除 するのは 下 記 ソース コードです <div class="defaultcontentblock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;"> この div は 削 除 する 必 要 がありますが ページ レイアウトやページが 表 示 されるコンテンツ 領 域 を 表 しています このコンテンツ プレースホルダーを 囲 むマスター ページをデザ インしてください </div> 6. HTML ファイルを 上 書 き 保 存 します 7. 8. ブラウザーで 開 いておいたプレビュー 画 面 に 戻 ります F5 などで 画 面 を 更 新 すると プレビュー 内 容 が 更 新 されます 手 順 でデザインしたように コンテンツ エリアが 画 面 中 央 に 配 置 されたことを 確 認 したいのですが プ レビュー 画 面 ではコンテンツ 内 容 が 空 白 のため コンテンツ エリアの 確 認 は 困 難 です 79

9. プレビュー 画 面 左 上 にある [プレビュー ページの 変 更 ] 機 能 を 利 用 すると 既 存 の 発 行 ページを 指 定 し コンテンツ エリアの 内 容 を 含 めたプレビューが 行 えます またサイト 内 でプレビューに 利 用 できる 発 行 ページがない 場 合 は このメニューより 新 規 作 成 も 可 能 です ここでは [プレビュー ページの 変 更 ] から 新 しく 発 行 ページを 作 成 し コンテンツ エリアのプレビュー を 行 います [プレビュー ページの 変 更 ] [ 新 規 作 成 ] をクリックします 10. [ページの 追 加 ] ダイアログが 表 示 されます 任 意 のページ 名 をつけて [ 作 成 ] をクリックします 80

11. 作 成 した 発 行 ページを 利 用 したプレビュー 内 容 を 確 認 できます コンテンツ エリアが 画 面 中 央 に 配 置 されていることが 確 認 できるようになりました 81

セキュリティによるトリミング セキュリティ トリム コントロールを 利 用 すると サイトにアクセスする 権 限 に 応 じて 表 示 / 非 表 示 となる デザインを 提 供 できます ここでは 前 の 手 順 で 配 置 した 検 索 ボックスについて 投 稿 権 限 以 上 を 持 つユ ーザーにのみ 表 示 するように ( 閲 覧 権 限 では 検 索 ボックスを 非 表 示 ) 編 集 を 行 います 1. 2. ブラウザーで 開 いておいたスニペット ギャラリーを 開 きます リボンから [セキュリティによるトリミング] をクリックします プレビューに 内 容 が 表 示 されていることが 確 認 できます 82

3. 既 定 ではデザイン 権 限 を 持 つユーザーに 対 するセキュリティ トリム コントロールの HTML スニペットが 生 成 されます 次 図 のように [セキュリティによるトリミング] メニューを 展 開 すると [ 作 成 者 に 表 示 ] [ 認 証 されたユーザーに 表 示 ] [ 管 理 者 に 表 示 ] と 選 択 可 能 ですが 今 回 行 いたい 投 稿 権 限 以 上 のユーザーに 表 示 するためのメニューは 用 意 されていません メニューに 用 意 されていないセキュリティ を 利 用 してデザイン 表 示 / 非 表 示 を 行 いたい 際 にはセキュリティ トリム コントロールのプロパティを 変 更 することにより 実 現 可 能 です ここではセキュリティ トリム コントロールのプロパティ 設 定 を 行 います 右 側 にあるプロパティ 編 集 メニュ ーより [Important]/[Permissions] を [AddListItems] に 変 更 します セキュリティ トリム コントロールの Permissions 設 定 については 下 記 URL が 参 考 になります [msdn] SPBasePermissions 列 挙 http://msdn.microsoft.com/ja-jp/library/microsoft.sharepoint.spba sepermissions(v=office.12).aspx 83

4. [ 更 新 ] をクリックします 5. プレビューの 下 にある HTML スニペットに 表 示 されているソース コードをコピーします 6. コピーしたコードをいったんメモ 帳 などのテキスト エディターに 貼 り 付 け 内 容 を 確 認 します コード 内 に 含 まれる <div class="defaultcontentblock" タグ ( 赤 字 部 分 ) がセキュリティに よりトリムされる 内 容 となります この 部 分 に 今 回 は 検 索 ボックスを 挿 入 したいと 考 えています <div data-name="securitytrimmedauthors"> <!--CS: セキュリティ トリム スニペットの 開 始 --> <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" 84

Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--> <!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" Permissions="AddListItems">--> <!--PS: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 しないでください)--><span><!--PE: 読 み 取 り 専 用 プレビューの 終 了 --> <div class="defaultcontentblock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;"> この div を 自 分 のセキュリティ トリム プロパティに 基 づいてレンダリングしたコン テンツで 書 き 換 えてください </div> <!--PS: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 しないでくださ い)--></span><!--PE: 読 み 取 り 専 用 プレビューの 終 了 --> <!--ME:</SharePoint:SPSecurityTrimmedControl>--> <!--CE: セキュリティ トリム スニペットの 終 了 --> </div> 7. 8. HTML 編 集 ツール (ここでは Dreamweaver) に 戻 ります 前 の 手 順 で 検 索 ボックス HTML スニペットを 挿 入 した 箇 所 ( 赤 字 部 分 ) を 探 します <div class="search-box"> <div data-name="searchbox"><!--cs: 検 索 ボックス スニペットの 開 始 --><!--SPM:<%@Register Tagprefix="SearchWC" Namespace="Microsoft.Office.Server.Search.WebControls" Assembly="Microsoft.Office.Server.Search, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--><!--MS:<SearchWC:SearchB oxscriptwebpart UseSiteCollectionSettings="true" EmitStyleReference="false" ShowQuerySuggestions="false" ChromeType="None" UseSharedSettings="true" TryInplaceQuery="false" ServerInitialRender="true" runat="server">--><!--ps: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 しないでく 85

ださい)--><div class="ms-webpart-chrome ms-webpart-chrome-fullwidth "><div WebPartID="00000000-0000-0000-0000-000000000000" HasPers="true" id="webpart" width="100%" class="ms-wpbody noindex " OnlyForMePart="true" allowdelete="false" style=""><div componentid="ctl00_ctl03_csr" id="ctl00_ctl03_csr"><div id="searchbox" name="control"><div class="ms-srch-sb ms-srch-sb-border" id="ctl00_ctl03_csr_sboxdiv"><input type="text" value=" 検 索..." maxlength="2048" accesskey="s" title=" 検 索..." id="ctl00_ctl03_csr_sbox" autocomplete="off" autocorrect="off" onkeypress="ensurescriptfunc('search.clientcontrols.js', 'Srch.U', function() {if (Srch.U.isEnterKey(String.fromCharCode(event.keyCode))) {$find('ctl00_ctl03_csr').search($get('ctl00_ctl03_csr_sbox').value);return Srch.U.cancelEvent(event);}})" onkeydown="ensurescriptfunc('search.clientcontrols.js', 'Srch.U', function() {var ctl = $find('ctl00_ctl03_csr');ctl.activatedefaultquerysuggestionbe havior();})" onfocus="ensurescriptfunc('search.clientcontrols.js', 'Srch.U', function() {var ctl = $find('ctl00_ctl03_csr');ctl.hideprompt();ctl.setborder(true) ;})" onblur="ensurescriptfunc('search.clientcontrols.js', 'Srch.U', function() {var ctl = $find('ctl00_ctl03_csr'); if (ctl){ ctl.showprompt(); ctl.setborder(false);}})" class="ms-textsmall ms-srch-sb-prompt ms-helpertext" /><a title=" 検 索 " class="ms-srch-sb-searchlink" id="ctl00_ctl03_csr_searchlink" onclick="ensurescriptfunc('search.clientcontrols.js', 'Srch.U', function() {$find('ctl00_ctl03_csr').search($get('ctl00_ctl03_csr_sbox').value);})" href="javascript: {}"><img src="/_layouts/15/images/searchresultui.png?rev=23" class="ms-srch-sb-searchimg" id="searchimg" alt=" 検 索 " /></a></div></div></div><noscript><div 86

id="ctl00_ctl03_noscript">ブラウザーで JavaScript が 有 効 になってい ません JavaScript を 有 効 にして やり 直 してください </div></noscript><div id="ctl00_ctl03"></div><div class="ms-clear"></div></div></div><!--pe: 読 み 取 り 専 用 プレビュー の 終 了 --><!--ME:</SearchWC:SearchBoxScriptWebPart>--><!--CE: 検 索 ボックス スニペットの 終 了 --></div> </div> 9. 検 索 ボックス HTML スニペットの 前 後 にセキュリティ トリム HTML スニペットの 開 始 タグ 部 分 ( 赤 字 部 分 ) と 終 了 タグ 部 分 ( 赤 字 部 分 ) を 貼 り 付 けます <div class="search-box"> <div data-name="securitytrimmedauthors"> <!--CS: セキュリティ トリム スニペットの 開 始 --> <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--> <!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" Permissions="AddListItems">--> <!--PS: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 しないでください)--><span><!--PE: 読 み 取 り 専 用 プレビューの 終 了 --> <div data-name="searchbox"><!--cs: 検 索 ボックス スニペットの 開 始 --><!--SPM:<%@Register Tagprefix="SearchWC" Namespace="Microsoft.Office.Server.Search.WebControls" Assembly="Microsoft.Office.Server.Search, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--><!--MS:<SearchWC:SearchB oxscriptwebpart UseSiteCollectionSettings="true" EmitStyleReference="false" ShowQuerySuggestions="false" ChromeType="None" UseSharedSettings="true" TryInplaceQuery="false" ServerInitialRender="true" runat="server">--><!--ps: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 しないでく 87

ださい)--><div class="ms-webpart-chrome ms-webpart-chrome-fullwidth "><div WebPartID="00000000-0000-0000-0000-000000000000" HasPers="true" id="webpart" width="100%" class="ms-wpbody noindex " OnlyForMePart="true" allowdelete="false" style=""><div componentid="ctl00_ctl03_csr" id="ctl00_ctl03_csr"><div id="searchbox" name="control"><div class="ms-srch-sb ms-srch-sb-border" id="ctl00_ctl03_csr_sboxdiv"><input type="text" value=" 検 索..." maxlength="2048" accesskey="s" title=" 検 索..." id="ctl00_ctl03_csr_sbox" autocomplete="off" autocorrect="off" onkeypress="ensurescriptfunc('search.clientcontrols.js', 'Srch.U', function() {if (Srch.U.isEnterKey(String.fromCharCode(event.keyCode))) {$find('ctl00_ctl03_csr').search($get('ctl00_ctl03_csr_sbox').value);return Srch.U.cancelEvent(event);}})" onkeydown="ensurescriptfunc('search.clientcontrols.js', 'Srch.U', function() {var ctl = $find('ctl00_ctl03_csr');ctl.activatedefaultquerysuggestionbe havior();})" onfocus="ensurescriptfunc('search.clientcontrols.js', 'Srch.U', function() {var ctl = $find('ctl00_ctl03_csr');ctl.hideprompt();ctl.setborder(true) ;})" onblur="ensurescriptfunc('search.clientcontrols.js', 'Srch.U', function() {var ctl = $find('ctl00_ctl03_csr'); if (ctl){ ctl.showprompt(); ctl.setborder(false);}})" class="ms-textsmall ms-srch-sb-prompt ms-helpertext" /><a title=" 検 索 " class="ms-srch-sb-searchlink" id="ctl00_ctl03_csr_searchlink" onclick="ensurescriptfunc('search.clientcontrols.js', 'Srch.U', function() {$find('ctl00_ctl03_csr').search($get('ctl00_ctl03_csr_sbox').value);})" href="javascript: {}"><img src="/_layouts/15/images/searchresultui.png?rev=23" class="ms-srch-sb-searchimg" id="searchimg" alt=" 検 索 " /></a></div></div></div><noscript><div 88

id="ctl00_ctl03_noscript">ブラウザーで JavaScript が 有 効 になってい ません JavaScript を 有 効 にして やり 直 してください </div></noscript><div id="ctl00_ctl03"></div><div class="ms-clear"></div></div></div><!--pe: 読 み 取 り 専 用 プレビュー の 終 了 --><!--ME:</SearchWC:SearchBoxScriptWebPart>--><!--CE: 検 索 ボックス スニペットの 終 了 --></div> <!--PS: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 しないでください)--></span><!--PE: 読 み 取 り 専 用 プレビューの 終 了 --> <!--ME:</SharePoint:SPSecurityTrimmedControl>--> <!--CE: セキュリティ トリム スニペットの 終 了 --> </div> </div> 10. HTML ファイルを 上 書 き 保 存 します 89

3.6 マスター ページとして 設 定 HTML ファイルをマスター ページに 変 換 する 機 能 や SharePoint デザインに 含 めるべき 各 コントロ ールを HTML ファイルに 含 めるためのスニペット ギャラリーを 利 用 して ここまでマスター ページのデザイ ンを 行 ってきました デザイン 完 成 後 は 必 要 に 応 じてサイトのマスター ページとして 設 定 を 行 います 各 リソースファイルをメジャーバージョンに 発 行 HTML ファイルやそこから 参 照 する CSS ファイル 画 像 ファイルはマスター ページ ギャラリーにアップ ロードしました これらのファイルや HTML ファイルを 変 換 して 作 成 されたマスター ページ ファイルは 既 定 ではマイナー バージョンとしてマスター ページ ギャラリーに 保 存 されています (マスター ページ ギャラ リーは 既 定 で メジャー/マイナー バージョン 管 理 が 有 効 となっています) サイトのマスター ページとして 設 定 し ユーザーに 作 成 したデザインを 展 開 するためにはまずこれらのフ ァイルをメジャーバージョンに 発 行 する 必 要 があります 1. [ 設 定 ] [サイトの 設 定 ] をクリックします 2. Web デザイナー ギャラリーカテゴリーの [マスター ページとページ レイアウト] をクリックします 90

3. マスター ページ ギャラリーが 開 きます 4. マスター ページ ギャラリーに 保 存 した HTML ファイルや CSS ファイル 画 像 ファイルが 格 納 され ているフォルダーを 開 きます 手 順 で 用 意 した HTML ファイルを 利 用 している 場 合 は MyDesign フォルダーとなります HTML ファイル CSS ファイル 画 像 ファイルのほかに 変 換 されて 作 成 されたマスター ページ フ ァイルが 確 認 できます 91

5. すべてのファイルをメジャーバージョンに 発 行 します ファイルを 選 択 し [ファイル] タブの [ 発 行 ] をクリックします この 作 業 を 全 ファイルに 行 います (HTML ファイルを 発 行 すると master ファイルは 合 わせて 発 行 されます) 92

サイトのマスター ページを 設 定 変 更 続 いて 作 成 したデザインを 適 用 させたいサイトで マスター ページの 設 定 変 更 を 行 います 1. [ 設 定 ] [サイトの 設 定 ] をクリックします 2. 外 観 カテゴリーの [マスター ページ] をクリックします 93

3. サイト マスター ページの 設 定 画 面 が 開 きます [サイト マスター ページ] [システム マスター ページ] ともに [MyDesign/ContosoDesign] を 選 択 し [OK] をクリックします 4. サイトのマスター ページが 変 更 され 作 成 したデザインが 適 用 されます このように HTML ベースで 用 意 したデザインに リボン サイト ロゴ サイト 名 グローバル ナビゲー ション 検 索 ボックス ( 閲 覧 権 限 ユーザーには 非 表 示 ) コンテンツ エリアなどの SharePoint ペー ジに 必 要 なコントロールを 備 えたデザインを 適 用 できます 94

4. モバイル 対 応 について SharePoint 2013 ではモバイル 対 応 機 能 が 大 きく 強 化 されています 以 前 のバージョンである SharePoint 2010 でもモバイル ビュー 機 能 はありましたが SharePoint 2013 ではスマート フォ ンでの 利 用 を 考 慮 して 用 意 されたコンテンポラリー 表 示 や 全 画 面 UI 表 示 機 能 が 追 加 されています モバイル デバイスで Web を 参 照 することが 一 般 的 になってきた 昨 今 のニーズに 合 わせるための 新 機 能 であり コンテンポラリー 表 示 を 利 用 することで スマートフォンやタブレットなどのモバイル デバイスでの 表 示 に 最 適 化 された SharePoint 画 面 をユーザーに 提 供 できます モバイルからのアクセスを 行 う 際 はモバイル ブラウザーに 応 じて 次 の 表 示 オプションが 用 意 されていま す クラシック 表 示 SharePoint 2010 のモバイル ビューと 同 様 の 機 能 です HTML 形 式 での 表 示 を 行 い 新 機 能 であるコンテンポラリー 表 示 を 利 用 できないモバイル ブラウザー 用 です コンテンポラリー 表 示 SharePoint 2013 のモバイル 新 機 能 です HTML 5 で 表 示 されるこの 形 式 は 最 適 化 されたモ バイル ブラウザー 操 作 をユーザーに 提 供 します Windows Phone 7.5 の Mobile Internet Explorer バージョン 9.0 以 降 iphone ios 5.0 の Safari バージョン 4.0 以 降 Android 4.0 以 降 の Android ブラウザーで 使 用 できます 全 画 面 UI 表 示 スマートフォン デバイスで SharePoint サイトを 全 画 面 表 示 する 機 能 が 追 加 されています 95

4.1 サポートされているモバイル デバイス ブラウザー モバイル デバイスの OS OS のバージョン ブラウザー スマートフォン デバイス スレート/ タブレット デバイス Windows Windows Phone 7.5 Internet Explorer サポート 該 当 なし Phone 以 降 のバージョン Mobile Windows Windows 7 Internet Explorer 該 当 なし サポート 以 降 のバージョン ios 5.0 以 降 の バ ー ジ ョ ン ( 1) Safari サポート サポート ( 2) Android 4.0 以 降 の バ ー ジ ョ ン Android ブラウザー サポート サポート ( 3) 1:ビデオの 再 生 には ios 6.0 以 降 のバージョンが 必 要 です 2:iOS 6.0 以 降 のバージョンを 使 用 する ipad バージョン 2 および 3 では Office Web Apps のすべての 機 能 がサポートされます ios バージョン 5. 1 を 使 用 する ipad バージョン 1 2 3 でも 制 限 付 きの 表 示 と 編 集 機 能 がサポートされます 3:ビデオの 再 生 には Android 4.1 以 降 のバージョンが 必 要 です [ 参 考 ] TechNet サポートされているモバイル デバイス ブラウザー (SharePoint 2013) http://technet.microsoft.com/ja-jp/library/fp161353.aspx [ 参 考 ] TechNet SharePoint Server 2013 でモバイル ビューを 計 画 する http://technet.microsoft.com/ja-jp/library/jj673030.aspx 96

4.2 モバイル ブラウザー ビューを 利 用 するために スマートフォン 端 末 等 のモバイル ブラウザーで SharePoint サイトにアクセスするためには [モバイル ブラウザー ビュー] サイト 機 能 を 対 象 のサイトでアクティブ 化 する 必 要 があります このサイト 機 能 をアク ティブ 化 すると そのサイトにモバイル ブラウザーでアクセスした 際 にまずそのブラウザーが HTML 5 を 処 理 できるかどうかの 確 認 が 行 われます モバイル ブラウザーが HTML 5 をサポートしている 場 合 コン テンポラリー 表 示 で 画 面 が 表 示 され メニュー 操 作 により 全 画 面 UI 表 示 への 切 り 替 えも 可 能 です モ バイル ブラウザーが HTML 5 をサポートしていない 場 合 は クラシック 表 示 が 利 用 されます [モバイル ブラウザー ビュー] サイト 機 能 は 下 記 サイト テンプレートを 利 用 して 作 成 されたサイトで は 既 定 でアクティブ 化 されています それ 以 外 のサイト テンプレートを 利 用 して 作 成 されたサイトでは 明 示 的 にアクティブ 化 が 必 要 です チーム サイト 空 のサイト ドキュメント ワークスペース ドキュメント センター プロジェクト サイト 97

[モバイル ブラウザー ビュー] サイト 機 能 のアクティブ 化 方 法 1. ブラウザーでサイトを 開 き [ 設 定 ] [サイトの 設 定 ] をクリックし サイトの 設 定 画 面 を 開 きます 2. サイトの 操 作 カテゴリーの [サイト 機 能 の 管 理 ] をクリックします 3. [モバイル ブラウザー ビュー] をアクティブ 化 します 98

5. モバイル 対 応 デザインとデバイス チャネル SharePoint 2013 では 前 述 のとおりモバイル ブラウザー 対 応 が 強 化 されています 4 章 で 解 説 し たとおり 標 準 で [クラシック 表 示 ] [コンテンポラリー 表 示 ] [ 全 画 面 UI 表 示 ] と 利 用 しているモバイ ル デバイスに 応 じたモバイル ビューを 提 供 する 機 能 が 搭 載 されています 標 準 で 搭 載 しているモバイル ビューを 利 用 することで リストやライブラリ 内 のデータなど SharePoint のさまざまな 機 能 をモバイル 端 末 経 由 で 利 用 できるようになっています また 発 行 ページで 構 成 される 情 報 ポータル サイトでは モバイル 専 用 デザインのカスタマイズも 可 能 です モバイル 専 用 デザインのカスタ マイズについても SharePoint 2013 では 行 いやすくなっています HTML ファイルをマスター ページ に 変 換 する 機 能 はもちろん 新 機 能 のひとつであるデバイス チャネルを 活 用 します デバイス チャネルはユーザーが SharePoint サイトを 表 示 しているデバイスやブラウザーの 種 類 に 応 じて 同 じ Web ページを 異 なるデザインで 表 示 するための 機 能 です ユーザーが Web ページにアクセスした 際 そのサイトをホストしているサーバーに 対 して ブラウザーか ら 使 用 されているブラウザー バージョン OS 情 報 などを 含 むユーザー エージェント 文 字 列 が 送 信 され ます デバイス チャネルはユーザー エージェント 文 字 列 に 基 づき さまざまなデバイスに 対 してそれぞれに 最 適 な 異 なるデザインを 提 供 するよう 設 定 が 行 えます この 章 ではモバイル ブラウザー 専 用 のデザイン (マスターページ) を 作 成 し デバイス チャネルによっ てデザインを 切 り 替 える 方 法 を 解 説 します 99

5.1 デバイス チャネルの 作 成 SharePoint サイトを 表 示 しているデバイスやブラウザーの 種 類 に 応 じて 同 じ Web ページを 異 な るデザインで 表 示 するためデバイス チャネルを 作 成 します ここでは Windows Phone 用 と iphone 用 と 2 つデバイス チャネルを 作 成 します 1. [ 設 定 ] [デザイン マネージャー] をクリックします 2. デザイン マネージャーが 開 きます サイド リンク バーから [2. デバイス チャネルの 管 理 ] をクリックします 3. デバイス チャネルの 管 理 画 面 で [チャネルの 作 成 ] をクリックします 100

4. 入 力 フォームがダイアログで 表 示 されます Windows Phone 用 のデバイス チャネルを 作 成 するため 次 のように 入 力 し [ 保 存 ] をクリックします 名 前 :Windows Phone エイリアス:WindowsPhone 説 明 :Windows Phone 用 のデバイス チャネルです デバイス 判 定 ルール: Windows Phone OS アクティブ:チェック オン 101

5. 次 図 のようにデバイス チャネルが 作 成 されます 6. 続 いて 2 つ 目 のデバイス チャネルを 作 成 します [チャネルの 作 成 ] をクリックします 102

7. 入 力 フォームがダイアログで 表 示 されます iphone 用 のデバイス チャネルを 作 成 するため 次 のように 入 力 し [ 保 存 ] をクリックします 名 前 :iphone エイリアス:iPhone 説 明 :iphone 用 のデバイス チャネルです デバイス 判 定 ルール: iphone アクティブ:チェック オン 8. 次 図 のようにデバイス チャネルが 作 成 されます 103

各 デバイス チャネルには そのデバイス チャネルが 適 用 されるブラウザーやデバイスを 指 定 するための デバイス 判 定 ルールを 定 義 できます 既 定 で 用 意 されている [Default] チャネルはすべてのユーザー エージェント 文 字 列 に 対 応 します 例 えば 次 のような 判 定 ルールをデバイス チャネルで 作 成 したとします 1. Windows Phone OS 7.5 2. Windows Phone OS 3. 既 定 Windows Phone OS 7.5 を 利 用 した 場 合 1 番 目 のデバイス チャネルによってデザインが 提 供 さ れます Windows Phone OS 7 を 利 用 した 場 合 は 2 番 目 のデバイス チャネルが 適 用 され それ 以 外 の 場 合 (デスクトップ ブラウザーなど) は 既 定 のデバイス チャネルが 適 用 されます またデバイス 判 定 ルールではモバイル デバイスについて 次 のような 設 定 が 可 能 です デバイス ユーザー エージェント 文 字 列 (デバイス 判 定 ルールの 設 定 ) Windows Phone Windows Phone OS 7.5 Windows Phone OS (すべての Windows Phone) iphone iphone ipad Android ipad Android 104

5.2 モバイル ブラウザー 専 用 デザインの 作 成 モバイル ブラウザー 専 用 として 提 供 するためのデザインを 作 成 します [3.HTML エディターを 利 用 したマスター ページの 編 集 ] で 解 説 した 内 容 と 同 様 に HTML ファイルで 用 意 したデザインをマスタ ーページに 変 換 する 機 能 を 利 用 します HTML デザインの 用 意 デザインのベースとなる HTML ファイルを 用 意 します 任 意 に 用 意 いただいた HTML ファイル (CSS ファイル 画 像 ファイル 等 のリソース ファイルを 含 む) を 利 用 してください この 自 習 書 では 次 のような HTML デザインを 利 用 します 同 じデザインを 利 用 して 手 順 を 試 された い 場 合 には HTML ファイルを 用 意 する 事 前 準 備 として 下 記 手 順 を 行 ってください ( 任 意 に 用 意 いただ いた HTML ファイルを 利 用 される 際 にはこの 手 順 は 必 要 ありません) フォルダーの 作 成 1. デスクトップに 新 しいフォルダーを 作 成 し フォルダー 名 を MyMobileDesign とします 105

CSS ファイルの 作 成 1. 任 意 のテキスト エディターで 下 記 ソース コードをコピーします /* 全 体 のフォントスタイル マージンを 指 定 */ html, body { font-family:meiryo UI; font-size:12pt; margin:1px;} /* ハイパーリンクのスタイルを 指 定 テキスト 装 飾 なし 文 字 色 */ a, a:link, a:active, a:visited { text-decoration:none; color: white;} /* ハイパーリンクホバー 時 のスタイルを 指 定 下 線 なし */ a:hover { text-decoration:underline;} /* 改 行 タグのスタイルを 指 定 回 り 込 みなし */.clear { clear:both;} /* サイトタイトルを 表 示 する div タグに 適 用 するスタイル フォントサイズ 色 余 白 背 景 色 */.sitetitle { font-size:20pt; padding:0px 4px 4px 4px; background-color:#3366cc; color:white;} /* 検 索 ボックスを 表 示 する div タグに 適 用 するスタイル 回 り 込 みなし マージン 余 白 ( 下 ) */ #searchbox { clear:both; margin:4px 0px; padding-bottom:4px;} 106

/* 検 索 ボックスのサイズ */ #searchbox input { width: 220px;} /* 検 索 ボックスを div タグ 内 で 左 寄 せ */.searchboxsmall { float:left;}.searchlinkbg { float:left; width:22px; height:20px;} /* メニューが 含 まれる div タグのスタイル 枠 線 ( 上 ) 横 幅 */ #bodycontainer { border-top: 1px #666666 solid; clear:both; width:100%;} /* メニュー 内 UL タグ マージン( 左 ) 余 白 ( 左 ) */ #menuwrapper ul { margin-left:0px; padding-left:0px;} /* メニュー 内 LI タグ リストスタイル 余 白 マージン( 上 ) */ #menuwrapper li { list-style:none; padding: 2px; margin-top: 1px;} /* メニュー 内 UL>LI タグ 余 白 ( 左 ) マージン( 左 ) 背 景 色 */ #menuwrapper > ul > li { padding-left:24px; margin:2px 0; background-color:silver;} 107

/* メニュー 内 LI>LI タグ 背 景 色 マージン( 左 ) 余 白 ( 左 ) */ #menuwrapper li li { background-color:#dedede; margin-left:-22px; padding-left:32px; background-image:none;} /* div タグに 指 定 フォントサイズ 余 白 背 景 色 文 字 色 */.ms-webpart-titletext,.ms-webpart-titletext > a { font-size:large; padding: 4px; background-color:#6f92db; color:white;} /* div タグに 指 定 文 字 色 余 白 */.mh1 { color:#3366cc; padding:4px;} /* div タグに 指 定 余 白 */.ms-wpbody { padding:4px 2px;} 2. [MyMobileDesign] フォルダー 内 に mobilecss.css として 保 存 します 108

HTML ファイルの 作 成 1. 任 意 のテキスト エディターで 下 記 ソース コードをコピーします <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="content-type"> <meta name="handheldfriendly" content="true"> <title>mobile Design</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <link rel="stylesheet" href="mobilecss.css"> <!--メニュー 内 の LI タグをクリック slidedown/slideup するように 動 作 する script--> <script type="text/javascript"> $(document).ready(function() { $('#menuwrapper > ul > li').addclass('ulexpand'); $("#menuwrapper ul li:not(:has(li.current))").find("ul").hide().end().click(function(e) { if (this == e.target) { $(this).children('ul').slidetoggle('fast'); $(this).toggleclass('ulcollapse'); } });}); </script> </head> <body> <div class="sitetitle">タイトル</div> <div id="searchbox"> <div class="searchboxsmall"> 検 索 <input title=" 検 索.." ></div> <div class="searchlinkbg"> </div> 109

<br class="clear"> </div> <div id="bodycontainer"> <div id="menuwrapper"> <ul> <li><a href="mobile2.html">category A</a> <ul> <li><a href="mobile2.html">excel</a></li> <li><a href="mobile2.html">word</a></li> <li><a href="mobile2.html">powerpoint</a></li> <li><a href="mobile2.html">outlook</a></li> <li><a href="mobile2.html">onenote</a></li> </ul> </li> <li><a href="mobile2.html">category B</a> <ul> <li><a href="mobile2.html">infopath</a></li> <li><a href="mobile2.html">access</a></li> </ul> </li> </ul> </div> </div> <div class="clear" style="height:1px; margin:2px 0"></div> <div class="mwebpart"> <div class="ms-webpart-titletext">web パーツタイトル</div> <div class="mh1">てすと</div> <div class="ms-wpbody"> SharPoint 2013</div> </div> </body> </html> 2. [MyDesign] フォルダー 内 に MobileContoso.html として 保 存 します 110

内 容 の 確 認 1. ここまでの 手 順 で [MyMobileDesign] フォルダーの 内 容 は 次 図 のようになります 2. MobileContoso.html をダブル クリックしてブラウザーで 開 き 次 図 のように 表 示 されることを 確 認 します (HTML 内 の javascript による 動 作 です) 各 カテゴリーの 前 をクリックすると カテゴリー 内 の 内 容 を 展 開 できるよう javascript コードが 含 まれていますが jquery.min.js ファイルへの 参 照 が 含 まれるためインターネットに 接 続 できる 環 境 でのみカテゴリーの 展 開 機 能 が 利 用 できます 111

マスター ページ ギャラリーに HTML ファイルをアップロード マスター ページ ギャラリーに 用 意 した HTML ファイルをアップロードします HTML ファイルから 参 照 するリソース ファイル (CSS ファイルや js ファイル 画 像 リソース ファイルなど) がある 場 合 は HTML ファイルと 同 様 にアップロードします またアップロード 作 業 は [3.2 マスター ページ ギャラリーをネットワーク ドライブとして 設 定 ] で 作 成 したネットワーク ドライブを 利 用 して 行 います 3.2 の 手 順 を 行 っていない 場 合 は まずそちらを 行 ってく ださい 手 順 は 前 のステップ (HTML デザインの 用 意 ) により 作 成 した HTML ファイルをマスター ページ ギ ャラリーにアップロードしていますが 任 意 の HTML ファイルを 利 用 する 場 合 はそれらのファイルをマスター ページ ギャラリーにアップロードしてください 1. Windows エクスプローラーで あらかじめ 用 意 したショートカットよりマスター ページ ギャラリーを 開 きます 112

2. ロ ー カ ル か ら Windows エ ク ス プ ロ ー ラ ー 上 へ ド ラ ッ グ ア ン ド ド ロ ッ プ 操 作 で MyMobileDesign フォルダーごとマスター ページ ギャラリーにアップロードします 3. ブラウザーでマスター ページ ギャラリーを 開 き Windows エクスプローラーでアップロードしたファイ ルを 確 認 します ブラウザーでサイトを 開 き [ 設 定 ] [サイトの 設 定 ] をクリックします 113

4. Web デザイナー ギャラリーカテゴリーの [マスター ページとページ レイアウト] をクリックします 5. マスター ページ ギャラリーがブラウザーで 開 きます アップロードした 内 容 が 存 在 することを 確 認 します 114

HTML ファイルをマスター ページに 変 換 HTML ファイルをマスター ページに 変 換 する 機 能 を 利 用 し 前 の 手 順 でマスター ページ ギャラリー にアップロードした HTML ファイルをマスター ページに 変 換 します 1. トップ レベル サイトで [ 設 定 ] [デザイン マネージャー] をクリックします 2. デザイン マネージャーが 開 きます サイド リンク バーから [4. マスター ページの 編 集 ] をクリックします 115

3. [HTML ファイルを SharePoint マスター ページに 変 換 ] をクリックします 4. [メディアの 選 択 ] ダイアログが 表 示 されます マスター ページ ギャラリー 内 の 内 容 が 表 示 されるので [MyMobileDesign] / MobileContoso.html を 選 択 し [ 挿 入 ] をクリックします 任 意 の HTML ファイルを 利 用 する 場 合 は そちらを 選 択 してください 116

5. [デザイン マネージャー:マスター ページの 編 集 ] 画 面 内 の 一 覧 に MobileContoso (or 任 意 のファイル 名 ) が 表 示 されます また 状 態 が 正 常 に 変 換 されました となっていることを 確 認 します 6. ハイパーリンクとなっている 正 常 に 変 換 されました をクリックします 117

7. マスター ページに 変 換 された 内 容 のプレビューが 開 きます 118

SharePoint デザインに 必 要 な 内 容 の 追 加 スニペット ギャラリーを 利 用 し SharePoint デザインに 必 要 な 各 種 コントロール (サイトのタイトル 検 索 ボックス コンテンツ エリア) を MobileContoso.html に 追 加 します HTML ファイルの 編 集 作 業 には 一 般 的 な Web 編 集 ツールの 例 として Dreamweaver を 利 用 します この 自 習 書 の 手 順 では HTML 編 集 ツールとして Dreamweaver を 利 用 しますが その 他 の Web 編 集 ツールを 利 用 することも 可 能 です また Web 編 集 ツールを 用 意 できない 場 合 にはテキスト エディターを 利 用 いただいてもかまいません 1. プレビュー 画 面 で 右 上 にある [スニペット] をクリックします 2. 別 タブ (もしくは 別 ウィンドウ) でスニペット ギャラリーが 開 きます 119

3. Windows エクスプローラーで ショートカットよりマスター ページ ギャラリーを 開 きます 4. Windows エクスプローラーで 開 いたマスター ページ ギャラリーから HTML ファイル (MobileContoso.html or 任 意 で 用 意 した HTML ファイル) を 任 意 の Web 編 集 ツールで 開 きます (ここでは Dreamweaver を 利 用 します) 120

5. 6. 7. HTML ファイルが 開 き リボン メニューの 定 義 など SharePoint デザインとして 必 要 なソース コ ードが 自 動 的 にコメントとして 追 加 されていることが 確 認 できます まずはサイト 名 を 表 示 するためのコントロールを 配 置 します ブラウザーで 開 いておいたスニペット ギャラリーを 開 きます リボンから [サイト タイトル] をクリックします プレビューに 現 在 開 いているサイトの 名 前 が 表 示 されていることが 確 認 できます 8. プレビューの 下 にある HTML スニペットに 表 示 されているソース コードをコピーします 121

9. 10. HTML 編 集 ツール (ここでは Dreamweaver) に 戻 ります サイト 名 を 表 示 したい 箇 所 に スニペット ギャラリーからコピーしたソース コードを 貼 り 付 けます 手 順 で 用 意 した HTML ファイルを 利 用 している 場 合 は タイトル の 箇 所 を 上 書 きしてください < 元 のソース> <div class="sitetitle">タイトル</div> < 貼 り 付 けた 後 のソース> <div class="sitetitle"> <div data-name="sitetitle"><!--cs: サイト タイトル スニペットの 開 始 --><!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--><!--MS:<SharePoint:AjaxD elta runat="server">--><!--ps: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 しな いでください)--><!--PE: 読 み 取 り 専 用 プレビューの 終 了 --><!--MS:<SharePoint:SPLinkButton runat="server" NavigateUrl="~site/">--><!--PS: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 し ないでください)--><!--PE: 読 み 取 り 専 用 プレビューの 終 了 --><!--MS:<SharePoint:ProjectProperty Property="Title" runat="server">--><!--ps: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 しないでく ださい)-->test<!--PE: 読 み 取 り 専 用 プレビューの 終 了 --><!--ME:</SharePoint:ProjectProperty>--><!--PS: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 しないでください)--><!--PE: 読 み 取 り 専 用 プレビューの 終 了 --><!--ME:</SharePoint:SPLinkButton>--><!--PS: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 しないでください)--><!--PE: 読 み 取 り 専 用 プレビューの 終 了 --><!--ME:</SharePoint:AjaxDelta>--><!--CE: サイト タイトル ス ニペットの 終 了 --></div> </div> 11. 続 いて 検 索 ボックスを 配 置 します ブラウザーで 開 いておいたスニペット ギャラリーを 開 きます 122

12. リボンから [ 検 索 ボックス] をクリックします プレビューに 検 索 ボックスが 表 示 されていることが 確 認 できます 13. プレビューの 下 にある HTML スニペットに 表 示 されているソース コードをコピーします 14. HTML 編 集 ツール (ここでは Dreamweaver) に 戻 ります 123

15. 検 索 ボックスを 表 示 したい 箇 所 に スニペット ギャラリーからコピーしたソース コードを 貼 り 付 けます 手 順 で 用 意 した HTML ファイルを 利 用 している 場 合 は 検 索 の 箇 所 を 上 書 きしてください < 元 のソース> <div class="searchboxsmall"> 検 索 <input title=" 検 索..." /></div> < 貼 り 付 けた 後 のソース> <div class="searchboxsmall"> <div data-name="searchbox"><!--cs: 検 索 ボックス スニペットの 開 始 --><!--SPM:<%@Register Tagprefix="SearchWC" Namespace="Microsoft.Office.Server.Search.WebControls" Assembly="Microsoft.Office.Server.Search, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--><!--MS:<SearchWC:SearchB oxscriptwebpart UseSiteCollectionSettings="true" EmitStyleReference="false" ShowQuerySuggestions="false" ChromeType="None" UseSharedSettings="true" TryInplaceQuery="false" ServerInitialRender="true" runat="server">--><!--ps: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 しないでく ださい)--><div class="ms-webpart-chrome ms-webpart-chrome-fullwidth "><div WebPartID="00000000-0000-0000-0000-000000000000" HasPers="true" id="webpart" width="100%" class="ms-wpbody noindex " OnlyForMePart="true" allowdelete="false" style=""><div componentid="ctl00_ctl03_csr" id="ctl00_ctl03_csr"><div id="searchbox" name="control"><div class="ms-srch-sb ms-srch-sb-border" id="ctl00_ctl03_csr_sboxdiv"><input type="text" value=" 検 索..." maxlength="2048" accesskey="s" title=" 検 索..." id="ctl00_ctl03_csr_sbox" autocomplete="off" autocorrect="off" onkeypress="ensurescriptfunc('search.clientcontrols.js', 'Srch.U', function() {if (Srch.U.isEnterKey(String.fromCharCode(event.keyCode))) {$find('ctl00_ctl03_csr').search($get('ctl00_ctl03_csr_sbox').value);return Srch.U.cancelEvent(event);}})" onkeydown="ensurescriptfunc('search.clientcontrols.js', 124

'Srch.U', function() {var ctl = $find('ctl00_ctl03_csr');ctl.activatedefaultquerysuggestionbe havior();})" onfocus="ensurescriptfunc('search.clientcontrols.js', 'Srch.U', function() {var ctl = $find('ctl00_ctl03_csr');ctl.hideprompt();ctl.setborder(true) ;})" onblur="ensurescriptfunc('search.clientcontrols.js', 'Srch.U', function() {var ctl = $find('ctl00_ctl03_csr'); if (ctl){ ctl.showprompt(); ctl.setborder(false);}})" class="ms-textsmall ms-srch-sb-prompt ms-helpertext" /><a title=" 検 索 " class="ms-srch-sb-searchlink" id="ctl00_ctl03_csr_searchlink" onclick="ensurescriptfunc('search.clientcontrols.js', 'Srch.U', function() {$find('ctl00_ctl03_csr').search($get('ctl00_ctl03_csr_sbox').value);})" href="javascript: {}"><img src="/_layouts/15/images/searchresultui.png?rev=23" class="ms-srch-sb-searchimg" id="searchimg" alt=" 検 索 " /></a></div></div></div><noscript><div id="ctl00_ctl03_noscript">ブラウザーで JavaScript が 有 効 になってい ません JavaScript を 有 効 にして やり 直 してください </div></noscript><div id="ctl00_ctl03"></div><div class="ms-clear"></div></div></div><!--pe: 読 み 取 り 専 用 プレビュー の 終 了 --><!--ME:</SearchWC:SearchBoxScriptWebPart>--><!--CE: 検 索 ボックス スニペットの 終 了 --></div> </div> 125

16. 17. 18. つづいてコンテンツ エリアを 編 集 します HTML 編 集 ツールで 編 集 中 の HTML ファイルを 開 きます プレビュー 画 面 などで 画 面 下 部 に 配 置 されている 明 るい 黄 色 の 領 域 (DIV タグ) を 見 つけます 19. 対 応 するソース コードを 切 り 取 ります 下 記 が 対 応 するソース コードです <div data-name="contentplaceholdermain"> <!--CS: PlaceHolderMain スニペットの 開 始 --> <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--> <!--MS:<SharePoint:AjaxDelta ID="DeltaPlaceHolderMain" IsMainContent="true" runat="server">--> <!--MS:<asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">--> <div class="defaultcontentblock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;"> この div は 削 除 する 必 要 がありますが ページ レイアウトやページが 表 示 さ れるコンテンツ 領 域 を 表 しています このコンテンツ プレースホルダーを 囲 むマスター ページをデザインしてください </div> 126

<!--ME:</asp:ContentPlaceHolder>--> <!--ME:</SharePoint:AjaxDelta>--> <!--CE: PlaceHolderMain スニペットの 終 了 --> </div> 20. 21. 切 り 取 ったソース コードをコンテンツ エリアとして 表 示 させたい 箇 所 に 貼 り 付 けます 手 順 で 用 意 した HTML ファイルを 利 用 している 場 合 は <div class="mwebpart">の 次 行 内 に 挿 入 してください ソース コードより 明 るい 黄 色 領 域 である div タグを 削 除 します 削 除 するのは 下 記 ソース コードです <div class="defaultcontentblock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;"> この div は 削 除 する 必 要 がありますが ページ レイアウトやページが 表 示 されるコンテンツ 領 域 を 表 しています このコンテンツ プレースホルダーを 囲 むマスター ページをデザ インしてください </div> 22. HTML ファイルを 上 書 き 保 存 します 23. ブラウザーで 開 いておいたプレビュー 画 面 に 戻 ります 127

24. F5 などで 画 面 を 更 新 すると プレビュー 内 容 が 更 新 されます 128

デバイス チャネル パネルの 利 用 スニペット ギャラリーから 提 供 されるデバイス チャネル パネルを 利 用 すると デバイス チャネルに 応 じ てレンダリングされるコンテンツを 制 御 できます ここではデバイス チャネル パネルを 利 用 して 特 定 のデバ イス チャネル (iphone) でのみリボン メニューを 非 表 示 にする javascript をレンダリングするように 編 集 します 1. スニペット ギャラリーでリボンより [デバイス チャネル パネル] をクリックします 2. 右 側 に 表 示 されるプロパティ 編 集 メニューで [IncludedChannels] プロパティに 5.1 で 作 成 し たデバイス チャネルのエイリアスである [iphone] を 指 定 します 3. [ 更 新 ] をクリックします 129

4. プレビューの 下 にある HTML スニペットに 表 示 されているソース コードをコピーします 5. コピーしたコードをいったんメモ 帳 などのテキスト エディターに 貼 り 付 け 内 容 を 確 認 します コード 内 に 含 まれる <div class="defaultcontentblock" タグ ( 赤 字 部 分 ) がデバイス チャ ネルによってレンダリングが 制 御 される 内 容 となります この 部 分 に 今 回 はリボンを 非 表 示 とする CSS を 挿 入 したいと 考 えています <div data-name="devicechannelpanel"> <!--CS: デバイス チャネル パネル スニペットの 開 始 --> <!--SPM:<%@Register Tagprefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--> <!--MS:<Publishing:DeviceChannelPanel runat="server" IncludedChannels="iPhone">--> <!--PS: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 しないでください)--><!--PE: 読 み 取 り 専 用 プレビューの 終 了 --> <div class="defaultcontentblock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;"> この div を デバイス チャネル パネルのプロパティに 基 づいて 表 示 されるコンテン ツに 書 き 換 えてください </div> 130

<!--PS: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 しないでください)--><!--PE: 読 み 取 り 専 用 プレビューの 終 了 --> <!--ME:</Publishing:DeviceChannelPanel>--> <!--CE: デバイス チャネル パネル スニペットの 終 了 --> </div> 6. 7. HTML 編 集 ツール (ここでは Dreamweaver) に 戻 ります HTML 内 の <body> タグ 内 (</body> タグのすぐ 上 ) にデバイス チャネル パネル HTML スニペット (コピーしたコード) を 貼 り 付 けます <div data-name="devicechannelpanel"> <!--CS: デバイス チャネル パネル スニペットの 開 始 --> <!--SPM:<%@Register Tagprefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--> <!--MS:<Publishing:DeviceChannelPanel runat="server" IncludedChannels="iPhone">--> <!--PS: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 しないでください)--><!--PE: 読 み 取 り 専 用 プレビューの 終 了 --> <div class="defaultcontentblock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;"> この div を デバイス チャネル パネルのプロパティに 基 づいて 表 示 されるコンテン ツに 書 き 換 えてください </div> <!--PS: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 しないでください)--><!--PE: 読 み 取 り 専 用 プレビューの 終 了 --> <!--ME:</Publishing:DeviceChannelPanel>--> <!--CE: デバイス チャネル パネル スニペットの 終 了 --> 131

</div> </body> 8. 貼 り 付 けたコードの 内 容 を 編 集 します 次 のように<div class="defaultcontentblock" タグを リボン メニューを 非 表 示 とする javascript と 置 き 換 えます <div data-name="devicechannelpanel"> <!--CS: デバイス チャネル パネル スニペットの 開 始 --> <!--SPM:<%@Register Tagprefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>--> <!--MS:<Publishing:DeviceChannelPanel runat="server" IncludedChannels="iPhone">--> <!--PS: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 しないでください)--><!--PE: 読 み 取 り 専 用 プレビューの 終 了 --> <!--MS:<style type="text/css">--> <!-- #ms-designer-ribbon{display:none}--> <!--ME:</style>--> <!--PS: 読 み 取 り 専 用 プレビューの 開 始 ( 変 更 しないでください)--><!--PE: 読 み 取 り 専 用 プレビューの 終 了 --> <!--ME:</Publishing:DeviceChannelPanel>--> <!--CE: デバイス チャネル パネル スニペットの 終 了 --> </div> デバイス チャネル パネルを 利 用 し 特 定 のデバイス チャネル (iphone) でのみリボン メニューを 非 表 示 に 上 書 きする CSS を 組 み 込 む 例 をご 紹 介 しましたが 一 般 的 には サーバーがレンダリングしたコンテンツをクライアント サイドで 非 表 示 にするなど 標 準 のメ ニューを 書 き 換 えるカスタマイズは 予 期 せぬ 結 果 を 引 き 起 こす 可 能 性 がありますので 十 分 にテストの 上 自 己 責 任 で 適 用 いただきますよう ご 留 意 下 さい 9. 上 書 き 保 存 します 132

各 リソースファイルをメジャーバージョンに 発 行 マスターページ ギャラリー 内 の 各 ファイルをメジャーバージョンに 発 行 します 1. [ 設 定 ] [サイトの 設 定 ] をクリックします 2. Web デザイナー ギャラリーカテゴリーの [マスター ページとページ レイアウト] をクリックします 3. マスター ページ ギャラリーが 開 きます 133

4. マスター ページ ギャラリーに 保 存 した HTML ファイルや CSS ファイル 画 像 ファイルが 格 納 され ているフォルダーを 開 きます 手 順 で 用 意 した HTML ファイルを 利 用 している 場 合 は MyMobileDesign フォルダーとなりま す HTML ファイル CSS ファイル 変 換 されて 作 成 されたマスター ページ ファイルが 確 認 できます 5. すべてのファイルをメジャーバージョンに 発 行 します ファイルを 選 択 し [ファイル] タブの [ 発 行 ] をクリックします この 作 業 を 全 ファイルに 行 います (HTML ファイルを 発 行 すると master ファイルは 合 わせて 発 行 されます) 134

5.3 マスター ページの 設 定 作 成 したモバイル 用 のマスター ページをデバイス チャネルに 応 じて 表 示 するように 設 定 を 行 います デ バイス チャネルを 利 用 してデバイスごとのマスター ページを 指 定 する 際 には 標 準 で 搭 載 しているモバイ ル ビューは 利 用 しません [モバイル ブラウザー ビュー] サイト 機 能 がアクティブ 化 されている 場 合 は 非 アクティブ 化 が 必 要 です [モバイル ブラウザー ビュー] サイト 機 能 の 非 アクティブ 化 方 法 1. ブラウザーでサイトを 開 き [ 設 定 ] [サイトの 設 定 ] をクリックし サイトの 設 定 画 面 を 開 きます 2. サイトの 操 作 カテゴリーの [サイト 機 能 の 管 理 ] をクリックします 3. [モバイル ブラウザー ビュー] を 非 アクティブ 化 します 135

デバイス チャネルごとのマスター ページ 設 定 1. [ 設 定 ] [サイトの 設 定 ] をクリックします 2. 外 観 カテゴリーの [マスター ページ] をクリックします 136

3. 発 行 ページのマスター ページを 指 定 する [サイト マスター ページ] に デバイス チャネルが 表 示 さ れていることが 確 認 できます [Windows Phone] デバイス チャネルと [iphone]デバイス チャネル 両 方 に [MyMobileDesign/MobileContoso] を 設 定 し [OK] をクリックします 137

対 応 するモバイル デバイスでアクセスすると モバイル 専 用 に 作 成 したマスター ページによりデザインが 構 成 されていることが 確 認 できます ( 発 行 ページを 開 いて 確 認 ) ブラウザーで 表 示 モバイル デバイスで 表 示 ブラウザーで 動 作 確 認 する 際 は http:// ペ ー ジ URL/?DeviceChannel=WindowsPhone もし く は http:// ペ ー ジ URL/?DeviceChannel=iPhone と 指 定 します (クエリ 文 字 列 Device Channel にデ バイス チャネル エイリアスを 指 定 ) 138