ブラウザで利用する Office 365 を複数アカウントで利用する方法

業務上、立場上、複数アカウントを同時に利用したい場合もあるかと思います。例えば、自分用のアカウントと管理者用アカウントを使い分けたり、 SharePoint ならアクセス権限ごとの挙動や見え方の違いを検証したり。

その場合、利用を切り替える度にサインアウト→サインインを繰り返すのはかなりダルいですよね。また、別のブラウザを使って複数アカウントを同時に利用する方法もありますが、ブラウザごとにも挙動や見え方が若干違うので厳密な検証ができなかったり、そもそも指定ブラウザ以外は利用NGな環境もあると思います。

ブラウザではセッションごとにサインインなので、別セッションにすれば複数アカウントを同時に利用が可能です。

知らない方が結構多いのでIE11を例に紹介します。

▼まずは普通に1つ目のアカウントでサインイン。

▼IEのメニューの「ファイル」→「新規セッション」。

▼新規セッションで開いたウィンドウでサインイン画面。別アカウントでサインインします。

▼このように同じIE11で複数アカウントを同時に利用可能になりました。

SharePoint だけでなく、他のアプリもOKです。ただ、僕の知る限り、新規セッションがうまく動作しないPCもありました。(原因はよくわからないのでその人には諦めてもらいましたが…。)

 

SharePoint : 新しい表示(モダンUI)のライブラリの「上部に固定」機能を更に探る

前回、新しい表示(モダンUI)のライブラリの「上部に固定」機能を試してみました。

SharePoint : 新しい表示(モダンUI)のライブラリの「上部に固定」機能

今回は更にイジりたおしてみたいと思います。

 

▼あれ?Excelファイルを上部に固定したら中身が表示されるわけではなくアイコンが表示されるだけ。

▼一度ピン留めしたアイテムは「固定の編集」から固定を解除したり左右に移動したりできます。

▼投稿権限では操作ができないようです。つまり編集権限以上のライブラリの設定ができる権限でないと操作できなそうです。(バー内にメニューがない。)

▼「○○ さんが編集」という部分は「上部に固定」の編集した人ではなく、そのアイテム自体の最終更新者。

※なので、上部に固定の編集(固定・移動・削除)は誰が編集したかわからなそうです。

▼上部に固定したアイテムを一旦ごみ箱に削除し、ごみ箱から復元すると、上部に固定も復元されます。

▼フォルダーを作成してフォルダー内のアイテムを上部に固定すると、フォルダー内でピン留めされます。

※そのフォルダー内のみ有効で、別フォルダーやルートに移動すると上部に固定はされていません。

▼大きな画像をアップロードしてみて上部に固定してみます。

▼横幅基準で縮小され、縦幅は上を基点に余った部分は隠れます。

※310px × 190pxが最適なようです。

▼ビューのリスト上のアイテムはドラッグをすると複数選択できるが、上部に固定したアイテムはドラッグしても選択できそうでできない。

▼3個以上はピン留めできないようです。

▼っていうか…あれ? PowerPoint と Word は中身が表示されるぞ??

よくわからないので、以下、色々なファイルでテストしてみようと思います。(ファイルの中身は超テキトーです。)

▼Excelファイルをピン留め。

▼やはりアイコンだけで中身は表示されず。

▼Wordファイルをピン留め。

▼中身は表示される。

▼PowerPointファイルをピン留め。

▼中身は表示される。

▼テキストファイルをピン留め。

▼中身は表示されるが、化ける!

▼PDFファイルをピン留め。

▼中身は表示される。

▼HTMLファイルをピン留め。

▼中身は表示されるが、化ける!

▼念のため、PhotoShopのPSDファイルをピン留め。

▼おぉ!中身が表示されるとは思わなかった!

▼じゃ、IllustratorのAIファイルをピン留め。

▼こちらも中身が表示される!

とりあえずこのくらいで。なぜかExcelファイルの中身が表示されない。そしてテキストファイルとHTMLファイルは文字化け。ちょっと残念ですね。

って事で今回調べた結果のまとめを箇条書きにしてみます。

  • 「上部に固定」機能はライブラリのみ
  • 「上部に固定」をすると上部にピン留めされる。
  • ライブラリの設定ができる権限でないと利用できない。
  • ピン留めしたファイルを削除した後に復元するとピン留めも復元される。
  • 誰が何を上部に固定したのかはわからない。
  • フォルダー内で上部に固定するとそのフォルダー内のみピン留めされる。
  • 様々なファイルの中身がサムネイルとして表示される。
  • ただしなぜかExcelファイルは表示されない。
  • テキストファイルやHTMLファイルは文字化けする。
  • 画像や中身が大きい場合は、横幅310pxに縮小され、縦幅は190px以上は隠れる。
  • ピン留めされたアイテムはドラッグで選択できない。
  • 上部に固定できるのは最大3件まで。

 

こんな感じです。前回、パーソナライズされた使い方ができないと書き、個人ビューだとどうだろう?と疑問系で終わりましたが、個人ビューで上部に固定をすれば自分だけのピン留めはできます。ただ「上部に固定」機能自体がライブラリの設定ができる権限(編集権限以上かな)なので、投稿・閲覧権限のユーザーは結局利用できず、ライブラリの管理者的な人がピン留めしたものが表示されるだけになり、ここらへんはちょっと微妙かなぁと思ったり思わなかったり。

SharePoint : 新しい表示(モダンUI)のライブラリの「上部に固定」機能

新しい表示(モダンUI)を普段あまり使っていなかったので気がつかない事が多いのですが、ライブラリで「上部に固定」という機能がありました。(リストにはありません。)名前だけでどんな機能なのかは推測できるのですが、ちょっと触ってみました。

▼アイテムを選択するとバーに「上部に固定」が表示されます。

▼他にもアイテムの縦の三点リーダーから展開されるメニュー内にもあります。

▼上部にピン留めされました。

※ビューから移動されるわけではなく、ビューには残しつつ、上部にも表示されるようです。

▼別アカウントで見ても上部に固定されているので、自分だけのお気に入り機能というわけではないようです。(バーのメニューが少ないことからもわかるとおり、閲覧権限ユーザーで表示してみました。)

ここまでの情報を元に考えると…

パーソナライズされた機能というわけではないので、自分がよく使うファイルをピン留めするわけではなく、どちらかというとライブラリの管理者が、利用者のよく使うファイルや利用者に使って欲しいファイルをピン留めする使い方のようですね。ライブラリの管理者の思いが強すぎるとかえって利用者にとっては邪魔になりかねなかったり、ライブラリの管理者が複数人いたら若干ケンカになりかねないですね。(笑)

ただ、個人ビューで利用できれば自分だけのピン留めが実現できそうですね。

そういう点も含め、次回は、もう少し色々とイジって探ってみたいと思います。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

SharePoint :複数行テキスト列(拡張リッチ テキスト)の「XHTML に変換」ってなんだろう?

拡張リッチ テキストにした複数行テキスト列の編集画面には、リボンに様々な機能があります。Word などに似たUIではありますが、意味のわからない機能もあると思います。個人的には利用頻度ワースト3に入る機能なのであまり気にしていなかったのですが、「XHTML に変換」ってなんだろう?と思ったので調べてみました。

マウスホバー時に出てくるメッセージは

XHTML に変換
基礎となるページを HTML から XHTML 準拠に自動的に変更します。

と書いてあります。複数行テキスト列に入力する作業が多いのは SharePoint 開発者でもなくサイト管理者でもなく、通常の投稿者が大多数でしょうが「なんのこっちゃ?」となるでしょうね。HTMLという言葉くらいは知っていてもXHTMLは知らなかったり、仮に知っていてもHTMLとXHTMLの違いなんて世の中では知らない人が大多数かと思います。

現時点での SharePoint Online ではページのソースを見ると、DOCTYPE宣言には XHTML 1.0 Strict となっています。

なので、HTMLで記述されたソースであれば、 XHTML 準拠のソースに自動変更する便利機能なんだろうと思いますが、正直、投稿者からすれば自分が思ったように表示されていれば裏側のソースがどうのこうのは関係なく、やはり「XHTML に変換」機能自体はマニアックなのかなとは思います。そもそも SharePoint のソース自体が XHTML 1.0 Strict に準拠…!?という話でもありますが。

実際にHTMLで記述したソースが「XHTML に変換」でどうなるかを検証してみる前に、このリッチテキストで「ソースの編集」からソースを入力すると SharePoint 側が勝手に色々ソースを変えるので、その挙動から検証をしてみます。

検証する材料としてのソースですが、HTMLとXHTMLの違いとしては細かいのが色々あるのですが、大きく以下の点を考慮します。

  • HTMLでは大文字小文字どちらもOKだけど、XHTMLでは小文字のみ。
  • XHTMLでは終了タグは省略できない。
  • XHTMLは整形式で記述しなければいけない。
    ×例→<p><span>text</p></span>
    ○例→<p><span>text</span></p>
  • 空要素の場合は/を入れる。

▼これらを全て盛り込んだ検証用HTML

▼XHTMLに準拠した場合

▼では、検証用HTMLのソースを「ソースの編集」から貼り付けてみます。

▼表示のされ方はこのようになります。

この状態で「XHTML に変換」もせずに、もう一度「ソースの編集」を開きます。

▼やはり!(若干違うけど)この時点ですでにXHTMLに変換されてる。

つまり、ソースの編集でHTMLを記述すると、OKを押した時点でXHTMLに変換されるので、なおさら「XHTML に変換」の存在意義がわかりません。


結局、よくわからないので検索してみました。「SharePoint XHTML に変換」で検索しても日本語では有用な情報がなかったんです。仕方ないので英語サイトの情報を検索します。「XHTML に変換」は英語では「Convert to XHTML」です。しかしそれで検索しても情報がうまく見つけることができませんでした。つまり世界的にあまり利用もされていなく気にもされていない機能なのでしょうか。ただ、正解はわからないけど若干情報が出てきました。

それによると、「XHTML に変換」の用途は、例えばExcelからコピペしたあとに、そのソースをXHTMLに準拠したソースに変換しましょう!という事のようです。なるほど。実際にやってみます。

▼Excelの表部分をコピーします。

▼複数行テキスト列内にペーストすると見た目はしっかり再現されています。

▼ソースを見てみるとこんな感じで非常に汚いソースです。

ここで目立つのはfontタグがある事です。すっかり前段で検証し忘れていたけど、XHTMLの中でもStrictではfontタグは使用できません。つまりこのソースはXHTML 1.0 Strictには準拠していないという事になります。

では、この状態で「XHTML に変換」をしてみます。

▼fontタグが全てdivに変換されました!(汚いソースには変わりはありませんが…。)

その後、前段で検証し忘れていた「XHTML に変換」をしなくてもソースの編集でHTMLを入力したら SharePoint が勝手にソースを変えるという点ですが、fontタグはfontタグのままでした。

つまり、fontタグ以外のXHTML準拠の部分に関しては、「XHTML に変換」をせずとも変換してくれ、今のところ「XHTML に変換」はfontタグをdivタグに変換するだけの機能という感じ。

他にもあるのかもしれませんが、結局はHTMLをXHTMLにしますよという言葉以上の事はしないだろうし、「XHTML に変換」をしなくても、XHTMLの中にHTMLが入っていても、文法上は間違っていてもブラウザエラーになることもなく見た目は同じなので、投稿者目線では別にやらなくても良い行為で…やはりこの機能は利用頻度ワースト3不動かなと思います。

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:「注目リンク」リストは新しい表示(モダンUI)ではエラーになる

新しい表示が出てきてから結構経つと思いますが、仕事でモダンUIを利用する事はほとんどなく、だいたいクラシック表示で開発をしています。なので新しい表示は自分のテナントで趣味で遊ぶくらいしか触っていなく、イマイチ慣れないのですが…。

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

先日CSSでカスタマイズを紹介した「注目リンク」リストですが、作られた時からクラシック表示になっているという事にふと気がついて、新しい表示だとどうなるのかな?と切り替えてみました。

▼最初はクラシック表示。何もカスタマイズもしていない注目リンクです。

▼新しい表示に変更!エラーになります!

タイルビューがダメなのかな?と思ってビューを切り替えました。

▼それでもエラーです。

つまり注目リンクは新しい表示には対応していないようですね。

新しい表示のページには Hero というWebパーツがあるので、そもそも注目リンクは不要になるということでしょうか。

注目リンクのようにページには表示させたいけど、管理はリストで行いたいというニーズもあると思うんですけどね。

ちなみに新しい表示のページにリストWebパーツを表示させられるようになりましたが、Webパーツの設定で選択するリストの一覧の中に注目リンクはなかったので、注目リンクはリストだけど新しい表示のページには表示できないようです。

なので、現時点では注目リンクリストはクラシック表示での利用となるようです。

現時点で新しい表示だけで運営をしようとしている企業っているのでしょうか。まだまだ慎重になっているのかなぁと思います。コミュニケーションサイトなんかも出てきて、モバイル対応重視なら新しい表示にするべきでしょうけど、なんとなく不安感ありますよね。今後に期待です。

SharePoint: コンテンツ エディター Webパーツの「コンテンツへのリンク」の活用例

SharePoint 2007 から何かとお世話になることの多い「コンテンツ エディター」Webパーツ。ただし、僕個人的にはこのWebパーツを本来の使い方である「リッチテキストコンテンツ…」として利用した事はあまりありません。SharePoint 2010 からはWikiページになって、コンテンツ エディター Webパーツを使わなくても、コンテンツエリア内に直接リッチテキストを作成する事ができてしまいますからね。(コチラの方がコンテンツ エディター Webパーツよりも色々制約がありますが…)

コンテンツ エディター Webパーツの利用の大半は、そのページに適用したいCSSファイルやJSファイルのリンクを埋め込む事。これで結構重宝しました。SharePoint 2013 からはこの役割を「スクリプト エディター」Webパーツも行えるので、コンテンツ エディター Webパーツの利用頻度は減ってきたような気がします。

その他で僕がコンテンツ エディター Webパーツを利用してきた中で、本題の「コンテンツへのリンク」をよく使っていました。これはライブラリにアップロードしたテキストファイルのURLを指定すると、テキストファイル内のテキストが表示される機能です。

▼このようなテキストファイルを作成します。文字コードはUTF-8で保存しましょう。

▼アクセス権限だけ気にしてどこでも良いのでライブラリにアップロードします。URLを控えましょう。

▼表示させたいページにコンテンツ エディター Webパーツを配置し、「コンテンツへのリンク」にURLを指定。

▼コンテンツ エディター Webパーツには、テキストファイル内のテキストが表示されます。

【注意】
▼文字コードはUTF-8にしてください。文字化けします。

う~ん、テキストファイルなのでプレーンテキストを表示するだけでしょ?コンテンツ エディター Webパーツの中に直接リッチテキストコンテンツとして入力した方が装飾できるので、今のところ特に「コンテンツへのリンク」のメリットがない。

直接コンテンツ エディター Webパーツの中にリッチテキストコンテンツとしてテキストを入力するのと何が違うかというと、サイトコレクション内で使いまわせてコンテンツが一元管理できる点です。(サイト内ではなくサイトコレクション内です。ただ、別サイトコレクションは指定するとエラーになってしまいます…残念。)

つまり、複数ページに同じテキストを表示させ、更新などの管理を全ページで一括で行いたい場合、「コンテンツへのリンク」を使えば、指定したテキストファイル内のテキストを変更すれば、一括で全ページが更新されるというわけです。

若干メリットが出てきました。

で、テキストファイルなのでプレーンテキストだけしか対応しないと思うじゃないですか。でも実はこのテキストファイル内にHTMLを記述すれば、コンテンツ エディター Webパーツにはソースが表示させるのではなく、ちゃんとレンダリングされて表示されます。

▼さっきのテキストファイル内をこんな感じでHTMLを記述して更新します。

▼このようにソースが表示されずに、ちゃんとレンダリングされます。

夢が広がってきました。

過去にこれを使った例としては、トップリンクバーやサイドリンクバーは利用せずに、複数ページのコンテンツエリア内に独自のナビゲーションを配置させるのに利用しました。

▼軽くナビゲーションを作ったテキストファイルです。CSSも対応されます。

上で紹介した同じ方法でライブラリにアップロードし、表示させたいページにコンテンツ エディター Webパーツを追加し、「コンテンツへのリンク」にURLを設定します。

▼このようにテキストファイルに記述したナビゲーションが表示されました。

4ページ作成し、同じ位置に同じ設定をします。(1ページ作成し、 SharePoint Designer でコピーしても可ですね。)

▼このように4ページに全て同じナビゲーションが表示されます。

これで、この4ページはこのナビゲーションで自由に遷移する事が可能です。更に一括管理できるメリットを試してみます。この状態でテキストファイルを更新してみましょう。

▼テキストファイルを更新しました。

▼テキストファイルを上書きアップロードすれば、同時に全てのページで更新が適用されます。

今回はデモなので4ページのみですが、ページの量が増えるほど、一括管理できるメリットが活きるのかなと思います。

こういう機能があるんだという事を知っておくと、何かの時に役立つかもしれないですね。

Excel / PowerPoint にいつのまに「自動保存」機能?

今日 Excel を触っていたら左上に「自動保存」なる文字が。グレーアウトされて目立たなかったから気がつかなかった?いつからだ?っていうかグレーアウトされているからオンにできません。

▼他もチェックしたら PowerPoint にもありました。

▼しかし、 Word にはありません。

で、グレーアウトされていたら使えないじゃん!と思って調べたところ、

【参照】

自動保存とは

OneDrive、OneDrive for Business、 SharePoint Online に保存されている時に有効になるとか。ローカルでファイルを作っていたからグレーアウトされていたという事か。

▼ SharePoint Online 上のドキュメントを開いてみると自動保存がオンに!

Excel Online でも開きつつ、Excel でも同じファイルを開いてみて、Excel上で編集してみると…

▼面白い!遠隔操作しているように excel Online 上に反映されます。

▼この「 SharePoint に保存 ▼」をクリックすると…

▼バージョン履歴が。「すべてのバージョンを表示」をクリックすると?

▼右側が開いてバージョン履歴が表示され、 SharePoint のライブラリのように復元もできるようです。

普段、クラウド上のファイルを直接編集する事がなく、ローカルPCで作成したものをアップロードする流れは未だに根強い方法かと思いますが、このようにクラウドならではの便利機能が増えるほど、色々と作業方法も変わっていくんでしょうかね。っていうかローカルPCでの作業でもこの機能欲しいなぁ。

僕自身も恥ずかしながらローカルPCで作業してしまう人間というか、そもそもあまりチームで共同作業をした経験がないので、複数人で編集した際の挙動などはよく把握していないので、今後色々と遊んでみようと思います。

「ファイルを編集している時は無意識にctrl+sで保存するクセをつけろ!」なんて事もそのうち懐かしい昔話となるのでしょうか。

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の位置を調整すれば、こんな感じもいけちゃいます。(これ、実際に注目リンクです。)