タグ: モダンUI

前回の記事で、モダンUIのタイトル列（名前列）の省略されたテキストは、ビュー内で列幅を広げても省略されたままである。と記載しました。

SharePoint ：新しい表示（モダンUI）の「タイトル」列（「名前」列）が長い場合の挙動

しかし、この記事間違いでした。
さっき発見したんです。

その前に前回のおさらい。

▼長いタイトルは296px以上の部分は後ろに「…」が表示され省略されます。

▼モダンUIだとマウスホバーした際にカーソルがこのように変わったところでクリックしたまま左右に動かすと列幅が可変します。

▼しかしタイトル列の列幅を広げても省略されたテキストは現れません。

そして、前回の記事のあとに発見したこと。

▼タイトル列の列幅調整はさっきの場所ではなく、少し左側にあったんです。

▼幅を広げると省略されていたテキストが現れました。

なんだよ～～～～～～。

という事で、前回の記事でウソを書いてしまったのですが、どういう事かというと…

▼両方の位置を並べるとこんな感じです。

じゃ、この右の方のトラップのような位置はなんなんでしょうか。

▼重ね合わせると、なんと！「…」メニュー用の列幅調整位置だったんです。

いやいやいや…列単位で可変できる機能ですけど、そこを列扱いしますかねぇ。百歩譲っても「…」を広げる意味なんて全くないですよねぇ。マウスホバーしないと「…」が表示されなくなったので余計気がつきませんでした。

という事で、タイトル列や名前列のように「…」メニューが付く列に関しては、少し左の位置で列幅を可変しましょう。

※この記事は一部ウソを書いています。以下の記事をご覧下さい。

SharePoint ：新しい表示（モダンUI）の「タイトル」列（「名前」列）の省略部分は列幅を広げると表示されました！

---

リストの場合は「タイトル」列、ライブラリの場合は「名前」列。ここが文字数が多くて長い場合、クラシック表示だと、ブラウザの解釈都合で改行されたり、場合によっては改行されず横スクロールが発生します。

では、レスポンシブ対応されている新しい表示（モダンUI）はどうでしょう。

▼他の列の有無は関係なく、コンパクトになっています。

▼拡大して見ると三点リーダー（…）で省略されています。

▼CSS的にはこんな感じ。

widthはインラインで296pxが指定されていて、僕が操作した限りだとブラウザの幅を可変しても296pxが追従して可変する事はありませんでした。また、classにはtext-overflow: ellipsis;が。これで296px以上の部分は三点リーダーで省略される感じです。

クラシックUIに比べてコンパクトになったモダンUIですが、省略されることは必ずしもメリットだけではなく、デメリットもあります。

タイトルは長くても省略しないで全部表示されて欲しい場合もあります。
▼この場合は、マウスホバーをすると省略されずに表示されます。

ただ、マウスホバーせずに全アイテムのタイトルを省略させないで表示させたい場合もあります。

色々イジってるとクラシックUIにはできなかった機能で、ユーザー側で列幅を調整する事ができるんですよね。

▼このように列名のところをマウスで探ると、列と列の境界あたりに縦線が表示されカーソルが変わります。

この状態でクリックしながら左右にカーソルを動かすと、列幅を変更できるんです。なら、これを右側に移動すればどんどん省略されたテキストが現れるハズ！

▼残念…

列幅を広げることはできても、三点リーダーは追従せず、ただただ余白が広がるだけです。これは残念。

タイトル列の列幅は逆に縮める事もできないので、width=”296px”で固定なのでしょうか。

ただ、色々イジっているうちにおかしな（というか正常な）挙動になる場合を発見しました。

▼ビューの設定で3種類あるタイトル列を全て表示する設定にします。

▼するとなぜか三点リーダー（…）が表示されません。

この状態で列幅を広げてみると…

▼広げると追従してタイトル列の隠れていたテキストが表示されます。この挙動を求めていたんですよね。普段は省略されるけど、ユーザーが列幅を広げるとその分隠れていたテキストが表示される動作。

▼ただし、不思議な事に一つの列幅を広げると、3種のタイトル列が全て連動して一緒に広がりました。

よくわからないけど同じ「タイトル」列と認識するのでしょうか。っていうか、列幅を広げると省略が徐々に表示されたいがために、3種のタイトル列を全て表示させるのも微妙ですよね。

ちなみに追加した2種のタイトルのどちらか片方を表示して、元々のタイトル列とあわせて、2種だけ表示してもダメでした。つまり3種類のタイトル列全て表示させないと思った挙動が出ないという感じ。

という事で、現状では、モダンUIのタイトル列（名前列）の省略されたテキストは、ビュー内ではマウスホバーしないと表示されないようです。今後に期待ですかね。

※現状でも何か方法があるぞ！という場合は、御一報ください。

---

▼例えば、途中までファイル名が同じ2つのファイルがあるとします。

• テキストテキストテキストテキストテキストテキストテキストテキストテキスト_株式会社AAA様向け.xlsx
• テキストテキストテキストテキストテキストテキストテキストテキストテキスト_株式会社BBB様向け.xlsx

▼モダンUIで省略されると、全く同じファイルに見えてしまいます。

• テキストテキストテキストテキストテキストテキストテキストテキストテ…
• テキストテキストテキストテキストテキストテキストテキストテキストテ…

マウスホバーをすれば違いはわかるけど、いちいちホバーさせないとわからないので一覧性に欠けます。現状は仕方ないので、モダンUIを利用する場合は、ユニークな文字列を先頭に配置するようなファイル名の命名規則にした方が良さそうですね。

• 株式会社AAA様向け＿テキストテキストテキストテキストテキストテキストテキストテキストテキスト.xlsx
• 株式会社BBB様向け＿テキストテキストテキストテキストテキストテキストテキストテキストテキスト.xlsx

前回、新しい表示（モダン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件まで。

 

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

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

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

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

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

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

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

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

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

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

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

[2018/02/21]追記

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

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

---

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

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

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

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

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

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

▼それでもエラーです。

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

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

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

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

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

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