SharePoint :いつの間に 注目リンク リストがモダンUIに対応していたので色々試してみる

過去に以下のような記事を書きました。

SharePoint:「注目リンク」リストは新しい表示(モダンUI)ではエラーになる

ところが、いつの間にか注目リンクがモダンUIに対応していました。

▼こんな感じです

この見た目、どこかで見た覚えがあるなぁと思ったら…

▼他のリストやライブラリのビューにもある「タイル」ビューのUIですね

ちなみにこの注目リンクリストをクラシックUIにすると…

▼こんな感じです。

使えなかったのが使えるようになったわけですが、それではクラシックUIとモダンUIでどのような相違があるかどうか触ってみました。

【1】レスポンシブWebデザイン

モダンUIなのでレスポンシブWebデザインです。ブラウザのサイズに合わせて列数も可変するし、タイルのサイズも可変します。

【2】全部表示される

クラシックUIの場合は、カルーセルUIで左右にスライドされるようになり、基本的には1行で表示できるだけ表示でした。
モダンUIの場合は、カルーセルUIではなくなり、ブラウザの横幅に合わせて2行以上で全て表示されます。

【3】マウスホバー時のアクションがなくなった

クラシックUIの場合は、タイルにマウスホバーすると透過したグレー部分が上昇し説明文が表示されます。
モダンUIの場合は、そのようなアクションはありません。
なので、ここからは説明文は見る事ができません。

▼クラシックUIの場合は、このようにマウスホバーをすると下部の帯の部分が上にせり上がりタイル全体を覆いますが、モダンUIにはそのような挙動はありません。

【4】背景画像の表示方法が異なる

クラシックUIの場合は、背景画像が縮小/拡大され、どのサイズでもタイル全体に画像が表示されます。なので横長の画像は縦の大きさに合わせるので画像の左右が切れてしまいます。
モダンUIの場合は、拡大はされず縮小のみです。縦長の画像の場合は下が切れてしまいます。

▼このような様々なサイズの画像を準備して背景画像に指定しました。

▼クラシックUIの場合

▼モダンUIの場合

う~む、こう見るとクラシックUIの方が良さそう!?モダンUIの注目リンクリストの背景画像は正方形でサイズは300px×300pxくらいあれば大丈夫そうかな。また、クラシックUIと同じく下部の帯で隠れる部分は考慮して背景画像は作成した方が良さそうですね。

【5】なんかアイコンが表示される

クラシックUIにはなかった点として、アイコン画像が表示されます。

▼クラシックUI

▼モダンUI(大きく紙のアイコンが表示)

▼モダンUIで背景画像を設定した場合

背景画像を指定すると紙のアイコンが小さくなって表示されますが、ちょっと邪魔ですね…。これが例えばリンク先がExcelだったらExcelアイコンに変わってくれたらまだいいなと思ったが、

▼Excelファイルにリンクを設定しても紙のアイコンのまま

ちょっと残念ですね。

以上の事からモダンUIでも利用できるようになった事は素晴らしいけど、まだまだ改良の余地がありそうですね。今のところクラシックUIよりも機能落ちしてしまっているところもあるので。

そしてモダンページのリストWebパーツは現時点ではカスタムリストしか選択できないので、注目リンクリストをWebパーツとしてモダンページに追加はできません。(これもそのうちできるようになりそうですが。)

また、ちょっとバグでは?という挙動を発見しました。

▼クイック編集 をクリックすると…

▼なぜか中身だけクラシックUIになってしまいます

そしてこの状態で「完了」をクリックしても元にも戻りません。

それと、背景画像を設定しようとした時にモダンUIでちょっと面倒だなと思った事があります。背景画像のURLの取得です。

注目リンクリストの背景画像の設定は「背景イメージの場所」列ですが、これは列の種類的には「ハイパーリンクまたは画像」列です。なので、ローカルPCから選択したりサイト内のライブラリから選択できず、単にURLを指定するしか方法がありません。

▼「背景イメージの場所」列

で、ライブラリに画像をアップロードしてURLを取得しようと思ったのですが、モダンUIだと正しいURLの取得方法がわからなかったんです。

アップロードした画像をクリックしても…

▼画像ビューアになるのでURLは取得できません

この状態で画像を右クリックしても右クリックメニューは表示されません。

次に、リンクのコピー機能を使ってみます。

▼リンクをコピーしました。

しかし、このURLが拡張子で終わっていないんです。通常なら「…/100_100.png」というURLですが、そうじゃないんです。試しにこのコピーしたURLでアクセスしてみると…やはり画像ビューアで開いてしまいます。

結局僕にはモダンUIから画像ファイルのURLにはたどり着けず、ただ構造は知っているのでアドレスバーに手打ちでURLにたどり着けました。また、クラシックUIでならURLにたどり着けますけど、ちょっとこれは面倒だなぁと思いました。

以上、モダンUIの注目リンクリストの少し触った気が付いたところです。またシレっと改良されていると思うので、今後に期待ですね。

SharePoint:「注目リンク」リストは新しい表示(モダンUI)ではエラーになる

[2018/02/21]追記

現在は注目リンクリストもモダンUIに対応され、エラーになっていません。

SharePoint :いつの間に 注目リンク リストがモダンUIに対応していたので色々試してみる


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

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

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

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

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

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

▼それでもエラーです。

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

新しい表示のページには Hero という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を付けています。強いて言えば、マウスホバー時の挙動に関して若干考えたくらいです。

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


.ms-promlink-root, .ms-promlink-body { width:330px !important; } .ms-promlink-header { display:none; } .ms-tileview-tile-root { width:110px !important; height:110px !important; } .ms-tileview-tile-content { width:100px !important; height:100px !important; } .ms-tileview-tile-detailsBox { top:50px !important; width:100px !important; height:100px !important; } .ms-tileview-tile-content [onclick*=”STSNavigate”] .ms-tileview-tile-detailsBox { top:0 !important; } .ms-tileview-tile-content img { width:100px !important; } .ms-tileview-tile-detailsListMedium { height:100px !important; }


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

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