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

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

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

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

.ms-siteactions-normal { display:none; }

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

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

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

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

■方法

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

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

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

.ms-siteactions-normal { display:inline-block; }

【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 サイトのホームページ(トップページ)をサイト管理者以外に触られたくない

SharePointを運営していると、サイト管理者からよくある問い合わせがあります。「トップページがサイト管理者以外の人にチェックアウトされる事がよくある。」アクセス権限設定は問題なく、チェックアウトした本人に確認すると身に覚えがないとの事。
この場合、「チェックアウトしている人はそのサイトに対して投稿権限が付与されていませんか?」と聞き返せばほぼ100%「そうです。」と返答が来ます。つまり、ページも(チームサイトの場合)「サイトのページ」というライブラリの1アイテムなので、サイトに対して投稿権限があれば編集ができてしまう事。

一般的な考えとしては、サイトのトップページはサイト管理者しかイジれないと思ってしまいがちです。サイト管理者も投稿者もその仕組みを知らずに、投稿者が興味本位または操作ミスでページを編集モードにしてしまい、自然とチェックアウトされたままになっている状態。

さて、この場合、そういうものだと説明すると必ず「なんとかなりませんか?」と言われます。この場合も対応は以下の通りです。

【1】サイト内でホームページ以外でページの利用をしない場合
●「サイトのページ」ライブラリの権限設定を変更
・権限の継承を中止
・サイト管理者以外のSharePointグループおよびユーザーを閲覧権限に変更

【2】サイト内でホームページ以外でページの利用がされている場合
●「サイトのページ」ライブラリ内の「ホーム」ページの権限設定を変更
・権限の継承を中止
・サイト管理者以外のSharePointグループおよびユーザーを閲覧権限に変更

これで投稿権限ユーザーもホームページに対しては閲覧権限になるので、チェックアウトをされてしまう事がなくなります。

ただし、権限の継承を中止した事の注意点としては、サイトの権限を変更した場合は、忘れずに継承を中止した箇所も同じ設定にしましょう。意外とこれを失念して、サイトに新規ユーザーに権限を付与したのに、ホームページに権限を付与し忘れているからアクセスできないなんてトラブルもあります。

ちなみに問い合わせが来てから解決するまで、これを説明するのも相手次第では結構対応が大変になります。説明を求められたり、打ち合わせの席を設けられたり。

SharePointを導入する(している)企業のIT部門や運営部門は、やはり利用者への教育は必要だと思います。

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

※画像もビデオもファイルも全て同じなので、以下の例は画像にします。

SharePoint2007ではリストのアイテムの本文内に画像を表示したい場合、ちょっと面倒でした。通常のブログサービスのようにリッチテキストエディタからファイルをアップロードすればOKというわけではなく、一旦ライブラリに画像をアップし、そのURLをコピーして、リストのアイテムの複数行テキスト列内に貼り付けるような、投稿者に操作をお願いするにはちょっと酷な感じでした。

時を経て、SharePoint2010からはリストのアイテムの(拡張リッチテキストの)複数行テキスト列の場合、リボンタブ「挿入」→「画像」→「コンピューターから」で行う事ができます。これで通常のブログサービスのような操作感に近づいたのかなと思い、喜ばしい機能でした。

この機能はSharePoint2007の頃のような一旦ライブラリに画像をアップするという操作を、リストのアイテム投稿ページから移動せずにダイアログ内で行えるという機能で、結局、任意のサイト内のライブラリに画像ファイルをアップロードするという事には変わりありません。アップされると同時に本文内に表示されます。(実際にダイアログ内に表示されているコンテンツを調べると、宛先ライブラリに指定してあるライブラリのUpload.aspxをiframeで表示しているんですよね。)

アップロードする際に表示されるダイアログ内ですが、「宛先ライブラリ」という項目があります。つまりアップロード先のライブラリを指定する項目です。ドロップダウンの中にはサイト内のライブラリが一覧で表示されます。

ここは初期値で「サイトのリソース ファイル」ライブラリが選択されています。でも、中にはこのライブラリは利用されたくない場合もあると思います。ただ、初期値として設定されてしまっているので、「宛先ライブラリでは○○ライブラリを指定してください」と投稿者に指導をしたところで、操作ミスや失念でアップロードされてしまう可能性もあり、できれば初期値を別のライブラリに変更したいですよね。しかし、ここの初期値を変更できる設定はリスト内には存在しません。

標準機能では宛先ライブラリの初期値を変更できないのかと思ったら、ちょっと分かりづらい場所にあったので紹介します。

各ライブラリの詳細設定の中に設定項目があるんです。「サイトのリソース ファイル」ライブラリの詳細設定を見てみると、「サイト リソース ライブラリ」という項目が「はい」になっています。(サイトのリソース ファイルライブラリ内のサイト リソース ライブラリ…ややこしいですね。)この説明だけ読んでも宛先ライブラリの初期値に関わってくる項目とはわかりませんね。

「サイトのリソース ファイル」ライブラリのこの項目を「いいえ」に変更した後に、その後作成した宛先ライブラリで初期値にしたい「画像用ライブラリ」のこの項目を「はい」にすると、宛先ライブラリの初期値が「画像用ライブラリ」になりました。

ちなみにこの設定項目はサイト作成時に「サイトのリソース ファイル」ライブラリのみ「はい」になっており、その後作成するライブラリでは既定では「いいえ」で作成されます。

また、この設定での「はい」「いいえ」は上述の通り、宛先ライブラリの初期値の設定のようで、宛先ライブラリのドロップダウンに表示・非表示の設定ではないようです。「いいえ」にしても初期値にならないだけでドロップダウン内には選択肢の値として存在します。ここに表示・非表示という設定があれば良いのですが、今のところ見当たりません。例えば投稿者には選択肢の値として表示されたくない場合は、該当ライブラリのアクセス権限を外すなどの対応になるのかなと思います。

複数ライブラリでこの項目を「はい」にした場合の挙動はどうなるのか?を検証したところ、またまた興味深い結果になりましたので、それは日を改めて記事にしたいと思います。

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

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

■追加する場合

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

SharePoint2013

.ms-core-brandingText:after { content:”(しぇあぽいんと)”; }

SharePoint Online

.o365cs-nav-brandingText:after { content:”(おふぃす さんろくご)”; }

■変更する場合

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

SharePoint2013

.ms-core-brandingText:after { content:”残業なんてしたくない!”; padding-left:10px; } .ms-core-brandingText { text-indent:-102px; }

SharePoint Online

.o365cs-nav-brandingText:after { content:”残業なんてしたくない!”; padding-left:10px; } .o365cs-nav-brandingText { text-indent:-116px; }

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

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

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

SharePoint では0バイトのファイルをアップロードできない

人によっては今更のネタですみません。

0バイトのファイルをアップロード。まぁ通常運営していてなかなかありえない利用シーンですよね。なので僕も今まで知りませんでした。

先日、限られた環境で検証しようとした時に若干焦った事です。カスタムを施したカスタムリストの投稿を検証した際に、添付ファイルにファイルを添付するテスト事項もあり、いつもならExcelなどでテスト用ファイルを作るのですが、限られた環境という事でテキストファイルでテスト用ファイルを作成しました。いつもの自分の操作ならテキストエディタを開いて、適当に文字を入れてから保存をするのですが、なぜかこの時は無意識にデスクトップで右クリック→新規作成→テキスト ドキュメントという手順で、テキストファイルを作成しました。この場合、ファイルサイズは0バイトなんですね。ということで、偶然0バイトのファイルを作成したんです。これを利用してテスト投稿をしてみたのですが、SharePointのエラーページが出て投稿できませんでした。
エラー内容を見ても意味がわからず、原因不明で困っていた時に、色々やってみるとファイルを添付しない時には問題なく投稿される法則がわかり、その後、一緒にテストした人に「ファイル、0バイトじゃないですか?」と言われ、ようやく原因がわかった感じです。

で、検証してみました。

■ライブラリ
ライブラリに0バイトのファイルのアップロードを試みようとすると、丁寧に理由が記載されるのですぐにわかります。やはり通常の利用では0バイトのファイルを扱わないので、この表示は初めて見ました。

■リスト
添付ファイルの0バイトのファイルを添付しようとすると、添付ファイルを指定する操作は特に問題ないのですが、投稿をしようとするとSharePointのエラーページが表示されます。添付ファイルを指定する操作の段階でエラーになってほしいところです。また、これで投稿がエラーになってブラウザの戻るボタンをクリックしても、入力した情報は消えてしまいます。つまり苦労して入力した内容がパァになってしまうんです。

このエラーページには理由が記載されているので原因がわかりますね。ただ、この環境では理由が記載されていましたが、冒頭で同様のエラーページが出て焦った話の際の環境では、この理由が記載されていなかったんです。なので原因がわからずに焦った感じです。おそらくSharePointのバージョンの違いなのかと思いますが、詳しいことはわかりません。

ということで、冒頭の通り、通常運営していて0バイトのファイルを扱うことはないとは思いますが、こういう事があったぞという備忘録でした。

Nintex Formsの表示速度

Nintex FormsはSharePointの標準では実現できないフォーム画面のカスタマイズを比較的容易に実現できる便利なツールですが、過去にも色々クセがある事を紹介いたしました。

Formsでフォーム画面をカスタマイズする再に重要な点として、表示速度の問題は外せません。いくらUIが優れてフォーム入力が便利になっても、表示するのに時間がかかってしまってはUXとしては台無しです。

僕自身がFormsを使用した制作経験が少ないのですが、その少ない経験やググった結果から、Formsで表示速度に影響を及ぼすであろう原因を以下に挙げます。

・コントロール数
・ルール数
・カスタムしたJavaScript・CSS

もちろんサーバーやクライアントPCやブラウザ(得にIEは遅い…)などもありますが、同一環境での影響という意味では、大きくは上の3項目が挙げられます。カスタムしたJavaScript・CSSに関しては内容によって左右されますので、そういう意味でも表示速度に問題が出た場合の対応策として挙げやすいのが、単純にコントロール数やルール数をダイエットさせる方法かと思います。

デザインのみで利用しているパネルを妥協できる範囲内で削除してみたり、一つにまとめられるであろう列はまとめたり、表示・非表示で利用しているルールを本当に必要かどうか精査してみたり、バリデーションで利用しているルールを本当に必要かどうか精査してみたり。表示速度と言う観点に重点を置き、真剣に検討をすると意外とコントロール数もルール数も減らす事ができます。軽く検証したところ、20コントロールを削除するとIEでおよそ1秒~1.5秒早く表示される感じです。小手先の工夫でも十分に体感できる可能性があります。

コントロール数と単純に言ってもそのコントロールの種類でも左右されるのかもしれませんが、そこまでは把握できていません。ただ、軽く検証してみたところでは、コントロールの種類で大きく表示速度に左右される事はなさそうです。(ただし、別の場所からデータを引っ張ってくるようなコントロールは影響大きそうですが、そこまでは調べきれていません。)
おそらくですが、コントロール数が増えるほど表示時間が遅くなる原因は、コントロールを適切に配置するのに、CSSで大枠のdivにインラインで[top][left][height][width]といった位置情報が記述されていて、それらを表示の際に全てのコントロールで計算しているので時間がかかっているのではと思っています。(あくまでも予想なので違っていたらゴメンナサイ。)
また、例えばパネル内に非表示にした隠し項目や、タブのように開閉させてコントロール数を表示上で制御している場合でも、CSSでdisplay:none;で非表示にしているだけで、ソースを見るとHTML上では記述があり、上述の位置情報も計算されていたので、表示上のコントロール数ではなく、デザイン画面で実配置したコントロール数が影響範囲です。実際に表示速度が遅い状態でコントロールを非表示にしても遅いままです。

そういう意味でも、もし表示速度でお悩みの場合は、やはりコントロール数を減らしていく方向が一番考えずに表示速度を速くさせる方法なのかもしれないです。

Nintex Formsのユーザー列の注意点


SharePointのユーザー列はサジェスト機能で入力途中で候補がドロップダウンで表示されます。


Nintex Formsのユーザー列も同じです(Forms的には「人々」というコントロール名です)。ただ、若干見た目や表示項目が違います。この環境では設定していないけど、プロフィールに写真を登録していれば写真も表示されるようです。

どちらもSharePoint2007あたりでは存在していた、ダイアログでユーザーを検索する機能はなくなっています。
※Formsではレガシーコントロールとして「人々 V1」というものがあります。サーバーの全体管理から追加をします。
【参照】
Using the legacy People Picker control with Nintex Forms

 

Nintex Formsのユーザー列では、SharePointの標準のユーザー列にはない注意点があります。

サジェストのドロップダウンが下のコントロールに潜り込んで隠れてしまうんです。

原因はコントロールの重なり順です。過去の記事で軽く触れています。
【参照】
Nintex Forms コントロールのクセと対策 その1

PowerPointの「オブジェクトの順序」みたいな概念があり、上から順番に配置していく事を考えると、上にあるユーザー列のコントロールより、下にある複数行テキスト列のコントロールの方が前面にあり、構造上、背面にあるユーザー列のコントロールが隠れてしまうのです。

原因がわかれば対策はわかります。ユーザー列を前面に出せば良いです。該当するユーザー列を選択し、「最前面へ移動」をクリック。

解決しました。

この注意点は、作成中は結構盲点で見落としがちなので、ユーザー列を追加する際には気に留めておきましょう。

ちなみにFormsを起動した際のデフォルトの配置状態でもこの現象は起きます。

Nintex FormsでSharePointの選択肢を簡単に横並びにする

SharePointの選択肢列で不便に思うのが、ラジオボタンやチェックボックスが1列縦並びにしかできないこと。ムダに縦スクロールができてしまいます。選択肢が多い場合はドロップダウンにしがちですが、複数選択させたい場合はドロップダウンは使えません。

例えばこのように「好きなフルーツ」列を作りました。フルーツ大好きなので単数選択は僕にとっては酷な選択です。なので複数選択できるようにチェックボックスにしました。縦長になりますよね。こういうものだと思えば気になりませんが、なんとかしたい場合には、Nintex Formsでは2列以上に簡単にできます。

必要なコントロールの設定はこの3点です。

例によって文字だけでは意味がよくわからないので検証をします。

まず「列の数」で何列にしたいかを設定します。単純に何列にしたいのか数字を入力するだけでもOKだし、式も使えます。ここに「3」と入力するだけで、3列に設定してみました。簡単です。

次に「選択肢の配置」というのがわかりにくいです。

「下から右へ」はこんな並び順。これを見ると「下から右へ」の意味がわかりますね。

ここを「右から下へ」に変更するとこうなります。

つまり「右から下へ」というのはこういう事ですね。

最後に「列の配置」。

これは「固定」「浮動」とあります。今までは固定。

浮動に変更すると、こうなります。

固定は列ごとに左寄せされるのに対し、浮動は全てが左寄せになります。このままでは値と値の間の余白が不十分なので見づらく、何かしらの調整がしたくなりますね。

このようにFormsなら簡単に3つの設定で列の値を横並びにする事が可能です。

Nintex Forms で一度塗ってしまったコントロールの「背景塗りつぶし色」を透明に戻す方法

【結論】

「その他の色」から戻せる


例えばExcelでセルに色を塗った後に、元の透明に戻したい場合、「塗りつぶしなし」を選択すれば元の透明に戻せますよね。(白を選択しても見た目では元に戻るけど、厳密には上述の方法が元に戻す方法)

Formsでパネルなどのコントロールに色を塗る際に、「背景塗りつぶし色」で色を選択します。(「背景塗りつぶし色」ってネーミングがもうね…)

問題は塗った後に元の透明に戻したい場合。

Excelなどのような「塗りつぶしなし」的な解除ボタンはどこにもありません。操作の直後に戻すなら「元に戻す」ボタンで戻すことは可能ですが、他に色々な操作をした後に戻したい場合には、使えませんよね。

不可能かと思いましたが、分かりづらいところで透明に戻す方法があったので紹介します。

同じく「背景塗りつぶし色」で、一番下の「その他の色…」を選択します。

背景色ダイアログの「新しい色:」の下あたりにRGBの数値があって、そこを空欄にしてOKを押します。

透明に戻りました。

ちょっとわかりづらいですよね。数分悩んだので紹介してみました。

SharePoint で縦長ページのページ全体スクリーンショットが撮れない!→解決!

【結論】

ちょっと細工をすれば撮れます。


たま~にですが、ページのスクリーンショットを撮りたい時があります。(今の会社に入社してから頻度が増えました。)

SharePoint に限らずスクショを撮るには「PrtScn」キーを押せば良いのですが、それだとブラウザで開いたまましか撮る事ができません。(アクティブなウィンドウだけをスクショするなら「Alt」を押しながら「PrtScn」ですよね。)

縦長ページのページ全体のスクショを作るには、ペイントなどで切った貼ったを繰り返し…なんて面倒な作業も考えられますが、ダルいので便利なブラウザのアドオンやソフトを使いますよね。

アドオンを入れてまずは手始めにYahoo!トップページを撮るとこんな感じで縦長ページでもページ全体のスクリーンショットが撮れます。

この勢いでSharePoint のページでページ全体スクショを撮ったら…

ん???開いた領域しか撮れてない!!Yahoo!のトップページなどは普通に撮れたのでアドオンのせいではありませんでした。

これはSharePoint の作りの問題で、SharePoint のページはスクロールさせてもスイートバーやリボンは固定され、コンテンツエリアのみスクロールしますよね。ここが影響しているっぽいんです。

【解決法】

アドオン次第で成功したりしなかったりしたので、僕が成功した条件で紹介します。

  • FireFoxを使います(アドオン「FireBug」も入っています)。
  • スクショ用のアドオンは「Pearl Crescent Page Saver」を使いました。
  1. F12キーを押す
  2. 検索で「s4-workspace」を検索し、該当箇所を選択
  3. 「#s4-workspace」の「overflow:auto;」のautoをvisibleに変更(単にautoを削除するだけでもOK)
  4. F12キーを押す(スクロールバーが消えます)
  5. 「Pearl Crescent Page Saver」のアイコンから「ページ全体を画像として保存」をクリック。

おしまい。↓これで撮れたスクリーンショットです。ちゃんとページ全体が撮れています。

環境をFireFoxに限定したのは理由があり、IE11にスクショ用アドオンを追加して同じ方法で試したらバグっぽい感じでうまく撮れませんでした。ブラウザやアドインなど、環境によって成功しない場合もあり、ただそれを色々と検証するのが個人的にダルいので、成功した環境で紹介しました。IEじゃなきゃダメだという場合は、IEのアドオンを色々試してみてください。IEでも作業工程は上述の方法とほぼ同じです。