SharePoint : サイトの開発・カスタマイズ用ファイルを「サイトのリソース ファイル」ライブラリに保管するのは微妙かも

開発・カスタマイズに利用する画像・CSS・JSファイルなどの格納先を「サイトのリソース ファイル」ライブラリに指定される事がよくあります。このライブラリはサイトを作成すると自動で作成されているのですが、「リソース」とは日本語で「資源・資産」なんて訳せると思うので、サイトのカスタマイズに利用する資源の格納先に選んでしまいがちでしょうか。

しかし、過去にも少し取り上げましたが、「サイトのリソース ファイル」ライブラリのそもそもの利用方法があり、それを考えるとカスタマイズファイルの格納先には向いていないのでは?と思います。

SharePoint 複数行テキスト列で画像・ビデオ・ファイルを挿入する際の「宛先ライブラリ」の初期値変更

「サイトのリソース ファイル」ライブラリとは、概ねページやアイテムに画像などを表示させる際のアップロード先と思って頂いて良いと思います。

SharePoint 2007 の頃はアイテムの複数行テキスト列に画像を表示したい場合は、先にどこかのライブラリに画像をアップロードし、URLを控えて、それを複数行テキスト列に指定して表示させていました。SharePoint 2010 からこの手間が楽になり、複数行テキスト列のリッチテキストエディタ内で、画像をアップロードしつつ表示させる事ができるようになりました。このアップロード先はサイト内のライブラリを指定できるのですが、その初期値で指定されているライブラリが「サイトのリソース ファイル」です。同じくビデオを表示させる際のアップロード先もそうです。

▼複数行テキスト列でコンピューターから画像を挿入すると

▼宛先ライブラリの初期値が「サイトのリソース ファイル」になっています。

▼新しい表示(モダンUI)のニュースページのヘッダー画像の追加も

▼アップロードする先は「サイトのリソース ファイル」になっています。

※しかも、新しい表示(モダンUI)のニュースページでは、宛先ライブラリの指定はできず「サイトのリソース ファイル」で固定のようです。

つまり、ここに開発・カスタマイズファイルを格納してしまうと、サイト運営開始してから上述のような方法で利用される画像・ビデオファイルと混在してしまいます。

「別に混在してもいいよ」って場合も、更に注意点としてアクセス権限があります。「サイトのリソース ファイル」ライブラリはデフォルトでは親となるサイトの権限を継承しています。つまりサイトに投稿権限以上あれば、ライブラリ内のフォルダーやファイルは編集・削除も可能です。それがなぜ注意点かというと…サイトの開発・カスタマイズに利用しているファイルを、特定多数の人達が編集・削除できてしまうという事です。

もちろんアクセス権限はフォルダー単位でも独立させて設定できますが、そこまでしてもサイトの開発・カスタマイズに利用しているファイルを「サイトのリソース ファイル」ライブラリに格納しなければいけない理由って逆にないと思います。

だとしたら、ゴチャゴチャしていなく権限も安全なライブラリに格納した方が良いのかなと思います。

  • 専用のライブラリを作成する
  • マスターページギャラリーやスタイルライブラリに格納する
  • 専用のサイト(コレクション)を作成する
  • 別のサーバーに格納する

などなど。それぞれの環境に合わせたやり方は色々ありますね。

もちろん、その上で「サイトのリソース ファイル」ライブラリを利用したい場合は、それもまた不正解ではなく正解なんだと思います。

SharePoint : スクリプト エディター Webパーツ の空白の幅を詰めたい

スクリプト エディター Webパーツは閲覧モード時には非表示とする使い方も多いかと思います。例えばJavaScriptやCSSを直接記述したり、各種ファイルのリンクを埋め込んだり。

しかし、非表示のWebパーツでも縦幅はしっかり取られているので、デザイン・レイアウト的に邪魔な場合があるかと思います。(上の画像のように)

スクリプト エディター Webパーツを最下部に配置すれば解決しますが、中には最下部には置けない場合もあるのかなぁと思います。

■現象の確認

テキストのレイアウトを「2段組」にして左右にWebパーツを配置してみます。

▼当然ですが左右のWebパーツの高さは同じです。

▼左に スクリプト エディター Webパーツを配置します。

▼すると左のWebパーツは スクリプト エディター Webパーツの影響で落ちてしまいます。(段差がわかるように赤い線を引いています。)

これがスクリプト エディター Webパーツが空白でも縦幅をとるという事です。デザイン・レイアウトをあまり気にしないチームサイトなどは良いですが、社内ポータルサイトなどでは気になる場合もあるかと思います。

■解決策検討

単純にdisplay:none;でスクリプト エディター Webパーツを消してみます。

▼ソースでスクリプト エディター Webパーツの外枠に固有のclassを振ります。

【参考】
SharePoint のページにオリジナルのCSSを適用させる方法について

※ちなみにWebパーツのソース自体のdivのclassに固有のclassを追加せずに、わざわざ外枠にdivを追加しているのは、単に僕の好みです。

▼次に、以下のCSSを記述します。(適用のさせ方も上述の【参考】を)

 

▼無事解決。左右で高さが一緒になりました。(わかりやすいように赤い線を引いています。)

■しかし…

これで解決したかと思ったのですが、よく考えればわかることですが、このままだと編集モードにしてもスクリプト エディター Webパーツは表示されません。

隠してしまったスクリプト エディター Webパーツが一度設定したら二度と編集する事がない場合は問題ないですが、あまり管理面でもよくないのかなと思います。また、編集したくなったらCSSを解除すれば良いのですが、解除をしたらその間はユーザーがページを表示すると高さがおかしくなるので厳密には良くないです。

理想は閲覧モードの際にはスクリプト エディター Webパーツ分の高さは消え、編集モードの際にはスクリプト エディター Webパーツが表示されたら良いです。

■解決

これも解決できます。編集モードの際のソースを調べると、編集モード時に固有のclassがあります。

▼閲覧モード時の該当箇所

▼編集モード時の該当箇所

編集モード時の該当箇所のclassで、編集モード固有のクラスは、
.ms-rte-layoutszone-inner-editable
.ms-rtestate-write
の2つあり、editableとかwriteとか、いかにも編集っぽいワードで、どちらでも良いと思います。

▼これを利用します。(今回は.ms-rte-layoutszone-inner-editableを利用)

 

これで閲覧モード時ではスクリプト エディター Webパーツの縦幅が消えて左右のWebパーツの高さは一緒になり、編集モード時にはスクリプト エディター Webパーツは表示されます。

▼閲覧モード

▼編集モード

SharePoint 「注目リンク」リストをCSSでイイカンジにカスタマイズ

「注目リンク」リストは SharePoint 2013 から登場しましたが、それまでのリンクリストよりもデザイン性も良く、新しいタブ表示などにも対応できて、重宝されている人は多いのではと思います。

しかし、

  • タイルが大きすぎる!(150px × 150px)
  • 1列でしか表示できない!(カルーセルUIっぽくなるけど)

ここら辺が弱点となり、利用に躊躇されているケースもあるのではと思います。

例えば、社内ポータルのトップページに、従業員が毎日利用する社内システムへのリンクを、見栄えも良くクリックしやすいタイルのリンク集を作りたい場合など。注目リンクを使うと大きくて社内ポータルのトップページに配置すると、他の重要なコンテンツの邪魔になったり、目立ちすぎて逆に困ったり。また、9個くらいリンクを置きたいのに全部配置しきれなく、カルーセルUIのようになるけど、矢印アイコンをクリックしないと表示されないリンクが出てきて、アクセシビリティが良くないなど。

とはいえ、注目リンクをやめて、コンテンツ エディター WebパーツなどでHTMLで組むとメンテナンス性が悪い。(リンクの作成・編集・削除はリストで行いたい。)

では、CSSでライトにカスタマイズして実現しちゃえ!

※ SharePoint Online 環境でカスタマイズしています。
※ IE11/Chorome最新/Firefox最新 のみ確認しました。
※タイルは100px × 100pxにしました。
※このサイズで3列で折り返しし、複数行表示されます。

▼こんな感じ。

これはビューにCSSを当てた感じですが、もちろんページにこれを表示させたい場合は、注目リンクリストをアプリパーツとして配置した後に、ページにCSSを当てればOKですね。そこまではここでは紹介しませんので、以下の過去記事を参照ください。

SharePoint のページにオリジナルのCSSを適用させる方法について

では、特に出し惜しみするものでもないので、CSSのソースも紹介しちゃいます。基本的には大きさの調整です。面倒なので全て!importantを付けています。強いて言えば、マウスホバー時の挙動に関して若干考えたくらいです。

※念のため。ご利用の際は、自己責任でお願いします。

あとは、好みの大きさに調整してみてください。

▼背景画像にアイコンを配置し、CSSの位置を調整すれば、こんな感じもいけちゃいます。(これ、実際に注目リンクです。)

SharePoint 2013 以降/ SharePoint Online で SharePoint 2010 のパンくずリストを復活させる方法

以前、「ポータルサイト接続」機能の設定は、設定しただけでは意味がない話をしました。

SharePoint の「ポータルサイト接続」とは?

ポータルサイト接続はパンくずリストに表示させる設定で、そのパンくずリストが SharePoint 2013 からは非表示にされてしまったので、設定しただけでは意味がないと書きました。

つまり、パンくずリストを復活さえすればポータルサイト接続も利用できるのですが、それにはマスターページをイジらなければいけなく、マスターページをイジらない主義の僕としては別の方法を考えてくださいと書きました。

しかし、それから機会あってとりあえず動作検証してみたので、やり方だけ残しておきます。

※seattle.masterを適用しているとします。
※もしこの記事を参考に試みる場合は、マスターページのカスタマイズはサイトコレクションがおかしくなる場合もあるので、バックアップをとるなどをし、あくまでも自己責任でお願いします。

▼ SharePoint Designer でマスターページを開き、「bread」で検索すると表示されるここらへんのソースが対象です。

▼classが「ms-breadcrumb-dropdownBox」のdiv内「style=”display:none;”」を削除。

▼Visible=”false”のfalseをtrueに変更。

これで保存し、場合によっては発行して完了です。別のマスターページとして保存した場合は関連付けを忘れずに。

▼作業が終わると、トップリンクバーの左に見慣れぬアイコンが現れます。

ただ、これ…わかります??右のリンクのリンクアイコンのようにも見えます。しかも一般的な別タブ表示リンクのアイコンっぽいです。少なくとも知らないユーザーが直感的にパンくずリストがあると気がつく確率は限りなく低いように思えます。(なんかゴミみたいなのがある?くらいの印象ですよね。)

▼この小さなアイコンをクリックすると SharePoint 2010 のように展開されます。

そもそも SharePoint 2010 でも「これパンくずリスト?」って感じでなかなか気がつかず、クリックしないと展開しないので使い辛い。おそらくこんな感じだから SharePoint 2013 からなくなったんだろうなぁと思います。


パンくずリストが表示されたところで、ポータルサイト接続を設定してみます。

▼サイトコレクションの設定内に「ポータルサイト接続」があるので設定します。

▼パンくずリストを展開するとさっきまで無かった最上位に設定したリンク先が表示されます。

SharePoint 2007 の頃のポータルサイト接続はページ左上に常時表示されていて使い勝手が良かったのですが、やはりこれでは用途としては微妙で、わざわざマスターページをイジってまで復元させる機能ではないかなと思います。いつ消えてしまうかわからないし。

ということで、遊んでみたので記事にしてみました。

【参照】

What does “Portal Site Connection” do?

SharePoint のページにオリジナルのCSSを適用させる方法について


↑このくらいならCSSできる人なら30分~1時間程度でCSSのみでカスタマイズできます。

※サイト全体に適用するのではなく、ページに適用させる方法。
※クラシックUIの場合。
※発行機能が非アクティブの場合。

基本的にはCSSはCSSファイルに記述し、HTMLにはhead内にCSSファイルのリンクを記述します。もちろん SharePoint もそういう仕組みになっていますが、それは SharePoint 側が持っている既定のCSSファイルです。

CSSでオリジナルのカスタマイズを加える際に、マスターページを加工するなどすればhead内にオリジナルのCSSファイルのリンクを加える事は可能かもしれませんが、やはり極力マスターページに手を加えたくはありません。(そもそもマスターページに手を加えるとサイト全体に適用されます。)

■CSSファイルのリンクの記述を追加する方法

では気軽にCSSファイルのリンクを追加する方法は?というと、 SharePoint では昔から「コンテンツ エディター Webパーツ」を利用する方法があります。これは簡単に言えばHTMLを埋め込めるWebパーツです。今なら「スクリプト エディター Webパーツ」の方が主流なのかな。どちらにでもCSSファイルのリンクを記述すれば適用されます。

▼コンテンツ エディターWebパーツとスクリプト エディターWebパーツを挿入したところ
(もちろん実際はどちらか1つでOKです。)

▼コンテンツ エディターWebパーツのソースを記述するダイアログ

▼スクリプト エディターWebパーツのソースを記述するダイアログ

ただ、これは非常に気持ち悪い方法なんですよね。本来はhead内に記述すべき内容をbody内に記述する事になるので。

▼body内にlinkタグが入る感じになります。

しかし、気軽に適用させる方法としてはこれしかありません。そもそも SharePoint がValidなHTMLから程遠い(それでも SharePoint 2007 に比べれば遥かに良くなったけど。)ので、この際無視してください。本職のコーダーさんあたりは非常に気持ち悪いとは思いますが我慢です。

■CSSの記述方法

基本的には SharePoint が既定で持っているCSSを上書きする記述となります。なので!importantは結構使う機会があると思います。そしてHTMLはさわれないと思ってください。なので、まずは SharePoint の標準機能の範囲内でアプリ・Webパーツをページに適切に配置します。その状態で開発者ツールなどでソースを確認し、適用させたい要素・またはその周辺にユニークなidやclassがあるかどうかを調査し、そこに対して適用させるCSSを記述する感じです。
しかし、そのidやclassがどこでどのくらい利用されているかを把握する事はなかなか難しく、実際に適用させて(開発者ツール上でもOKですね。)目視で確認し、試行錯誤していく感じになります。また、ユニークなidやclassがない場合はセレクタを駆使してなんとかなる場合もありますし、諦めるのも大事な選択肢です。無茶して適用したところで管理面で難があったりすると良くないですからね。

■指定したWebパーツのみ適用させたい場合

Webパーツの構造は全てほぼ一緒なので、Webパーツ内のスタイルを変更した場合は基本的にはページ内の全てのWebパーツで適用されると大げさに思って良いかと思います(厳密には違いますが)。ただ、中には指定したWebパーツのみスタイルを適用させたい場合もあると思います。
調べてみるとわかりますが、ページ内でWebパーツごとにユニークなidが存在します。例えば「WebPartWPQ6」。この数字部分(←の場合は6)に関しては、Webパーツが増えていくごとに数字が増えていきます。つまりWebパーツごとにあるユニークなidなのですが、ただこのidの使用はあまりオススメできないんです。
というのも、Webパーツが今後増減しない確約がある場合は良いのですが、特にWebパーツを削除する事がある場合は、削除するとページ内の全てのWebパーツのidの数字がゴソッと入れ替わってしまうので、このidを利用したCSSの全て数字を変更しなければいけないからです。

▼このように番号が若いパーツほど削除すると影響度が高いです

ではどうしたら良いか?というと、ページの作り込みで工夫が必要です。ページではWebパーツ領域内にHTMLを記述する事が可能です。それを利用して、例えばユニークなidかclassでdivを記述し、そのdiv内にWebパーツを配置します。囲んでしまえばユニークなidかclassを利用してそのWebパーツのみ適用させる事が可能となります。

▼Webパーツ領域にカーソルを置き、ソースの編集を

▼例えばユニークなclassをつけたdivを2個ほど置きます

▼それぞれのdiv内にWebパーツを追加します
(この操作もコツがいたりします。)

▼再度ソースの編集を見ると、このようになります。
(思い通りのソースになっていない場合はここで修正)

▼ここまでできれば、指定のパーツのみにスタイルを適用させられます。
(例:list001のみ枠線を付けました。)

■CSSファイルのリンクの配置場所

あまり気にしなくても良いのかもしれませんが…。CSSファイルのリンクを記述したコンテンツ エディター Webパーツやスクリプト エディター Webパーツは、隠しWebパーツである事からも表示上は見えないので気にしなくても良く、ただページを編集モードにした際には邪魔なので、極力ページ下部に配置したいところです。
しかし、以前この方法をとったところ、表示に重いWebパーツがあると、カスタマイズしたスタイルが当たるのにタイムラグが発生しました。つまり例えば1秒程度、標準状態のデザインになった後にカスタマイズされた状態になる感じです。これは、HTMLが上から読み込む構造上、CSSファイルのリンクの記述が読み込まれる前に、表示が重い部分があるのが原因と推測し、CSSファイルのリンクが記述されたWebパーツを極力上部に配置すると、この問題が解消されました。
つまり、HTML的には極力ソースの上部にCSSファイルのリンクを記述された方がよく、SharePoint 的には極力CSSファイルのリンクを記述したWebパーツを、コンテンツ領域の左上に配置するのが良いかと思います。ただ、通常は後ろの方にあってもタイムラグが発生するケースはあまりないので、あまり気にしなくても良いのかなと思います。

■CSSファイルの保管場所

どこでも良いっちゃ良いんですけどね。極端な話、リンクができれば良いので、 SharePoint じゃなくてもどこかのWebサーバーに置いても良いくらいです。とはいえ、まぁ SharePoint のライブラリ内に保管するのが良いとは思いますが、ここで気をつけるべきはアクセス権限です。
サイトのアクセス権限よりも権限を絞ったライブラリに保管をすれば、もしかしたら中にはライブラリには閲覧権限がないけどページには閲覧権限がある可能性もあり、この場合はそのユーザーはCSSファイルに権限がないので、結果としてカスタマイズが適用されない状態でページが表示されます。逆に管理者以外に多くのユーザーが投稿権限以上が付与されているライブラリに保管をすれば、勝手にCSSファイルを編集したり削除する事も可能になってしまうので良くないですね。このような点に気をつけたライブラリであるならどこでも良いかと思います。スタイルだからスタイルライブラリに保管しなければいけないというわけでもないと思っています。

以上です。
他にも語ることは色々あるかもしれませんが思いついた時にまた記事にします。また、あくまでも僕の自己流なので参考程度にしてください。他にもっと良い方法があればむしろ教えてください。

【 SharePoint Online 限定】 サイドリンクバーで「ごみ箱」や「最近使った項目」をCSSで非表示にする方法

※オンプレのSharePoint 2013 では通用しません。現在のSharePoint Online が対象です。ご利用環境に応じて参考にしてみてください。

SharePoint のサイドリンクバーで「消したい!」と良く言われるリンクが、「サイト コンテンツ」「ごみ箱」「最近使った項目」の3点セットかと思います。

■「サイト コンテンツ」を非表示にしたい背景

SharePoint 2007 の頃から「サイト コンテンツ」ページは閲覧・投稿者にあまり表示されたくないというニーズは良くありました。サイト管理者側からすると、例えば「サイトのリソース ファイル」や「スタイル ライブラリ」や配下のサブサイト一覧などは見られたくもないからです。SharePoint 2007 は、サイドリンクバーの最上部に「すべてのサイト コンテンツの表示」と2行に渡るリンクが存在し、削除できない仕様だったんですよね。なつかしい。

解決方法としては、CSSでこのリンクを非表示にしていました。固有のclassがあったので割と楽に非表示にできました。
SharePoint 2013 からは、標準機能で削除できるようになったのでカスタマイズは不要ですね。

■「ごみ箱」を非表示にしたい背景

SharePoint 2007 の頃からサイドリンクバーの最下部に「ごみ箱」へのリンクがありました。

たしかSharePoint 2013 からはサイドリンクバーから「ごみ箱」リンクが消えました。

が!どうやらSharePoint Online では今は復活してきているようです。×ボタンがないので削除できません。

さて、SharePoint 2007 の頃からこのごみ箱へのリンクを非表示にして欲しいというニーズが良くありました。というのもSharePoint にあまり詳しくないサイトのキーマンや管理者が、「他人が捨てたモノを見られたり復元されては困る。」と言うからです。大体それらの該当者は高いアクセス権限を付与されているケースが多いので気がつかないんですが、そもそもこのごみ箱リンクは投稿権限以上でないと表示されないし、ごみ箱の中身は通常自分が捨てたアイテムしか表示されないし、権限がなければもちろん復元する事もできないわけで、しっかり説明をすればニーズはなくなりました。

■「最近使った項目」を非表示にしたい背景


これはいつからでしたっけね?SharePoint 2010 からでしたかね。一定の条件でリスト・ライブラリを作成すると勝手に出てくるリンク。消す事もできるけど、リスト・ライブラリを作成する度に復活してしまうんですよね。なのでここを非表示にして欲しいというニーズもかなり多いです。


以上の背景やそれぞれの関係者のニーズを把握した上で、非表示(削除)したい場合、標準機能で削除できない、もしくは削除できるけど復活してしまうなどの場合は、何らかのカスタマイズをする事になると思います。
ググると色々なアプローチで非表示を試みている先人達がいました。特にナビゲーションの対象ユーザーを利用するのは基本機能のみだしアイデアだなと思いましたが、残念ながら発行機能が非アクティブのサイトでは実現できません。他にも今の僕には全く理解のできない難しい方法や、JavaScriptなどで実装している方々もいましたが、僕の場合はやはりCSSで検討してみました。

CSSでカスタマイズをするキモは、適用したい箇所に固有のidかclassが存在するかどうかなのですが、残念ながらサイドリンクバーの各リンクを構成する要素には固有のidやclassはないんです。
※現在のSharePoint Onlineにはliタグに固有そうなidがありますが、仕様が良く分からないのでないものとして、別のアプローチを試みます。

なので、苦肉の策として「:nth-child()疑似クラス」などchild系擬似クラスを利用して、リンクの上から何番目とか下から何番目を非表示にするなんて方法もありますが、これではリンクの場所を変えたりするとおかしくなっちゃいますよね。
僕が目をつけたのはリンクをリストにしているliタグではなく、その下のaタグです。ここを良く見るとtitle属性に必ずリンク名が入っているんです。

CSS3から追加された属性セレクタのうち、今回利用したのは「 E[foo=”bar”] 」です。これを適用させると、「 a[title=”ごみ箱”] 」なら、titleに「ごみ箱」と指定されているaタグに適用されます。「最近使った項目」はaタグではなくspanタグなのでちょっと変わります。
例えば、「ごみ箱」「サイト コンテンツ」「最近使った項目」全てを非表示にしたい場合は、

これで非表示になりました。

非表示にするだけなので、リンクの編集をすると透明のまま存在はするんですけどね。そこは仕方ないです。

で、「最近使った項目」に関してはこれでは不十分です。追加されたリスト・ライブラリのリンクはこれでは非表示にならないからです。(上のスクリーンショットでは「list005」「list004」です。)
調べると、「最近使った項目」は見出しで、その見出し配下に追加されたリスト・ライブラリがリンクになります。HTML的には「最近使った項目」のspanタグと並列でulタグがあり、その中にli > aでリンクが配置されます。

ここで更に利用したのはこれまたCSS3から追加された「間接セレクタ(E ~ F)」です。これは親要素が同じになる兄弟関係の弟に適用されるセレクタです。つまりこの条件に合致するわけです。
加えるとこんなソースになります。

title属性に「最近使った項目」が入っているspanタグの後にあるulタグに適用、という事になります。

SharePoint Online で色々イジった後にSharePoint 2013 のソースを確認したら、全く違っていたので結果的にOnline のみの対応となってしまいましたが、CSSでサイドリンクバーから特定のリンクを非表示にするというより、CSSのセレクタも色々増えてきて各種ブラウザも対応されてきたので、CSSによるカスタマイズの幅が広がってきているんだなぁというところを体感してもらえたら良いかなと思います。CSSであればググればたくさん情報がありますからね。意外と色々とできます。

 

 

 

SharePoint ビューの「既定」スタイルをCSSで網掛けにする

前回の記事では、クラシック表示のビューのスタイルを「既定」以外にすると、ビューのフィルターで複数の値でフィルターをかける事ができないという事を書きました。

SharePoint ビューのスタイルを変更すると機能落ちする

ところで「既定」スタイルのビュー、つまりリストやライブラリを作成したデフォルトのビューでは、マウスホバー時にはその行の背景色が変わるので1行を読みやすいですが、マウスホバーをしないとテキストばかりになってしまい、読みにくいです。そういう意味もあって網掛けにしたい要望は少なくはありません。

それではビューの機能落ちなく網掛けにするには?CSSでカンタンに解決します。既定スタイルのビューでは、上から偶数行のtrに「.ms-alternating」というclassがあります。ビューで「ページの編集」をし、スクリプト エディター Webパーツなどに以下を記載すれば網掛けになります。(色は好きな色で。)

 

▼こうなります。

ただし、実はこれも一点デメリットが。
これはSharePoint 2010 からの問題なのですが、ビューを編集するとリボンタブが「参照」以外表示されなくなるんですよね。

▼本来なら「参照」の右に「アイテム」「リスト」タブが表示されるハズが。

ビュー内のアイテムなどをクリックするとすぐ復活するのでユーザーに周知されれば大きな問題ではないのですが、これは未だに直っていない問題です。

さて、このデメリットも回避しつつ網掛けにする方法もあるにはあります。
ビューに直接CSSを記述するのではなく、CSSファイルに記述し、代替CSSでそのCSSファイルを設定する方法です。これならビューを編集せずにCSSを適用させられるので、リボンタブが消えてしまう問題は解消されます。
ただし!そうです…これにも一点デメリットが。代替CSSで設定すると影響範囲はサイト全体です。つまり他のビューや他のリスト・ライブラリも網掛けになってしまいます。

代替CSSでも適用させたいリストを特定させる方法もなくはないのですが、色々面倒なのでないと言ったほうが良いかもしれないです。

結果として、標準機能とCSSカスタマイズではデメリットのない方法は見つからないのですが、網掛けをするのに標準機能の設定では1パターンしかなかったのが、CSSにより3パターンにまで増えました。それぞれのデメリットを考慮し、別にデメリットには感じないものがあったとしたら、そのパターンで実装すれば良いと思います。

  1. ビューの設定のスタイル「網掛け」を適用
    →デメリット:ビューのフィルター機能で複数の値でフィルターできない。
  2. ビューのページの編集でCSSを直接記述
    →デメリット:ビューのリボンタブが表示されない。(アイテムあたりをクリックすると表示される。)
  3. 代替CSSでCSSを記述したファイルを適用
    →デメリット:サイト全体で適用されてしまう。

以上です。複数の値でフィルターをかけられなくても良いのなら【1】で問題ないし、リボンタブをユーザーが利用しない、もしくは解決方法を周知させられるのなら【2】で問題ないし、サイト全体のビューが網掛けになってしまうのはむしろ大歓迎の場合は【3】で問題ないし、そもそも網掛けを諦めるというカードもありますよね。

要望が実現できないと業務に多大な影響があるかどうか?影響がないなら要望を諦める選択肢も十分あって良いと思います。

本当ならデメリットが一つもない方法を提示できればスッキリしたんですけどね。もちろんもっと他の方法でカスタマイズすれば良いのですが、CSS程度のライトカスタマイズにこだわりました。

SharePoint ページ右上の歯車メニューが権限レベルに応じて表示・非表示をCSSで実現する方法

SharePoint2007からよくあるサイト管理者からの要望に、「『サイト コンテンツ』を閲覧者や投稿者に見られたくない。」があります。

SharePoint2013ではサイドリンクバーの「サイト コンテンツ」へのリンクは削除できるようになりました。ただし、ページ右上の歯車アイコンをクリックすると、権限がフルコントロールだろうが閲覧だろうが表示されるメニュー内には依然として「サイト コンテンツ」は表示されています。

ここを非表示にするためだけに、マスターページをカスタマイズするのは嫌ですよね。僕は嫌です。そこでCSSを用いて非表示にします。SharePointをCSSでカスタマイズする際におそらく最も利用されるであろうdisplay:none;の登場です。

これをCSSファイルにして、対象ページにスクリプトエディターWebパーツなどを配置してCSSファイルのリンクを記述するか、対象がサイトであれば代替CSSで設定すればOKです。(発行機能が非アクティブ状態で代替CSSファイルを設定したい場合は、ググると情報が出てきます。)

これでサイト コンテンツへのリンクは非表示になったので、直接URLを叩かない限りは見られる事はなくなります。

と、ここまでは他にも紹介しているブログなどはあります。しかし、この方法には弱点があります。閲覧者や投稿者だけでなく、フルコントロール権限であっても非表示になってしまうので、サイト管理者がサイトの設定を行う導線まで奪ってしまうのです。

では、閲覧者や投稿者は非表示にし、フルコントロールは表示させる方法が、CSSと標準機能のみで実現できるでしょうか?
答えは「できます!」
ヒントは「全員非表示、フルコン復活」です。

■方法

CSSファイルを置くライブラリの権限を設定すれば可能です。

【1】まずは全員非表示
これはすでに上で紹介した方法で非表示にします。ここまでは同じです。

【2】フルコンのみ表示復活
・新規に表示復活用ライブラリを作成
・権限の継承を中止
・フルコン以外の権限設定を削除
・ライブラリに以下の内容のCSSファイルをアップ。

【3-1】適用(対象がページの場合)
対象ページにスクリプトエディターWebパーツなどを追加し、2個のCSSファイルのリンクを記述。
※この場合、【2】でアップしたCSSファイルのリンクを必ず【1】のCSSファイルのリンクよりも下に記述してください。(!importantでもOKですが、ムダに使いたくないので。)

【3-2】適用(対象がサイトの場合)
代替CSSの設定は1ファイルのみなので@importを使い2個のCSSファイルのインポートを記述した3個目のCSSファイルを作成し、【1】の時にアップしたライブラリにアップし、代替CSSの設定で適用。
※同じく、@importの記述では記述の順番に気をつけてください。

以上です。
若干複雑ですが、マスターページをイジるよりはマシかと思います。また、この方法を使えば、歯車メニューのみならず、様々な場所で「閲覧・投稿ユーザーのみ表示させたくない」が実現できます。もちろん「閲覧のみ表示させたくない」などのバリエーションも可能ですね。

このようにSharePointを利活用する場合、基本機能ではかゆいところに手が届かない場面が多々ありますが、その際に難しい開発やカスタマイズを行いリスクが伴うよりは、このように基本機能とリスクや難易度が低い方法の組み合わせをパズルのように考える事で、実現できてしまうケースもあり、ここがまたSharePointの楽しいところでもあるのかなと思います。

SharePoint の左上の製品テキストをCSSで変更する

SharePointの画面左上にオンプレなら「SharePoint」、SharePoint Onlineなら「Office 365」というテキストが表示されていると思います。ここを変更する方法としてPowerShellを使う方法がありますが、PowerShellを使いたくない、使えないという環境だったりする場合は、CSSで変更できます。CSSでも色々なアプローチがありますが、今回はcontentプロパティを使います。代替CSSに設定したCSSファイルに記述するなり、マスターページに記述するなり、ページ内にWebパーツとして記述するなり、ニーズや環境に合った方法で適用してください。

■追加する場合

変更ではなく、今の製品テキストを残したまま追加する場合

SharePoint2013

SharePoint Online

■変更する場合

厳密には追加した後に、オリジナルの方に消えていただく方法です。

SharePoint2013

SharePoint Online

リンクにしたり、SPOの場合はリンクを変更したりという事はさすがにできませんが、文言を変更する程度ならお手軽かなと思います。

また、この方法を使えば左上の製品テキストだけでなく、SharePointの標準機能では変更できない文言の変更など、色々な場所で使えるのではと思います。例えばリボン内のテキストとか、ダイアログのタイトルとか。
ただし、今回の上述のソースもそうですが、個人発信のブログなので検証に費やす時間もほとんどないので、動作を保証するものではありません。ソース丸々コピペすれば使える!というよりは、考え方のヒントにしていただければと思いますので、例えばセレクタの指定がシンプルだと他に影響が出る事も考えたり、色々と工夫してみてください。

Web制作をしていた頃はcontentプロパティなんてclearfixくらいでしか見なかったのですが、SharePointを扱うようになってからは使うようになりました。

SharePoint JSリンクとURLトークンとかいうトラップ

※すでにこの手の記事はググれば出てきますが、自分への備忘録です。

早めにググればよかったのですが…ハマりました。

01
アプリパーツの編集でJSリンクを適用する欄があり、まぁ普通に考えればどこかにアップロードしたJSファイルのURLを指定すれば良いと思うけど、こんなところにトラップを仕掛けているんですよね。
普通のURLでは適用されません。URLトークンなるものがあるんです。トー君?誰?って感じですよ。

SharePoint 2013 の URL とトークン
https://msdn.microsoft.com/ja-jp/library/ms431831.aspx

↑のページの真ん中くらいに表があります。「~sitecollection」か「~site」あたりを使う感じですね。はじめてJSリンクを使う人にはトラップです。

僕がSharePointをはじめた7年前は、ググっても日本語の情報が少なかったです。英語が苦手なので数少ない情報源の方々には感謝してもしきれません。今はだいぶ情報を掲載されている日本人も増えてきましたので、ハマったら即ググった方が良いですね。