SharePoint :新しい表示(モダンUI)で画像表示を設定する際にサイト内の画像を選択しても「開く」がアクティブにならない場合

最近モダンUIを触っているのですが、画像Webパーツやヘッダーの背景画像を表示させたい場合で、すでにサイト内にアップロードしている画像ファイルを利用したい場合、ちょっと挙動がおかしい点がありました。

▼例えばニュースのヘッダーに背景画像を表示したい場合

▼サイト内のライブラリにアップロードされているファイルを表示したい場合

▼表示したいアイテムをクリックすると右下の「開く」がアクティブになります。(色が変わります。)

この状態で「開く」をクリックすればあとは数クリックで表示できます。

ただ、どういう条件かはわかりませんが、アイテムをクリックしても「開く」がアクティブにならない場合がありました。

▼同じライブラリ内の別のフォルダーです。

▼アイテムを選択したのに「開く」が非アクティブのままです。

もちろんこの状態では「開く」をクリックできないので、表示できません。困ります。

色々試してみたら、たまたまアクティブにできる方法を見つけました。

アイテムを右クリックしてください。

▼なぜか「開く」がアクティブになりました。もちろんクリックでき画像を表示できます。

そのうち直るかとは思いますが、とりあえず困ったら右クリックしてみましょう。

SharePoint :アイコンを表示する技術の変遷

SharePoint にはページ内に様々なアイコンがありますが、ページの読み込みを速くする目的の一つとは思いますが、アイコンを表示させる技術が変わってきています。

■ SharePoint 2007

SharePoint 2007 ではサーバー内のフォルダにたくさんのアイコン画像がありました。<img>タグを使ったいわゆる普通の画像表示でアイコンを表示していました。

■ SharePoint 2010 ~ クラシックUI

たしか SharePoint 2010 からだったと思いますが、CSSスプライトを使っています。CSSスプライトとはサイト内の複数画像を極力1枚の画像にまとめて、CSSで表示の座標を指定する事で特定の画像を表示させる仕組みで、画像の読み込みを減らす事がサイトの読み込みを速くさせる事につながります。

※JPGに変換したので背景は白ですが、実際は透過PNGです。

見た目は1つのアイコン画像のように表示されますが、このようにある程度アイコンがまとまった一つの画像です。

■新しい表示(モダンUI)

モダンUIのソースを見ていたら、アイコンは画像ではありませんでした。アイコンフォントを使っています。(Webフォントとかフォントアイコンとも言われてるのかな?あまり詳しくなくてすみません。)アイコンフォントなら更に読み込み速度に貢献できそうだし、なによりフォントなのでフォントカラーを指定すれば色も簡単に変わります。テーマカラーごとにアイコン画像を用意する必要もないですね。

例えばモダンUIのライブラリは、フォルダーをクリックするとページ全体が再読み込みされず、比較的速くにフォルダーが切り替わると思います。

などなど、どうしてもパフォーマンスの問題を指摘されやすい SharePoint ですが、色々と改良されてきているので、そういう観点からもモダンUIを積極的に利用したいですね。

また、せっかくこのようにパフォーマンスを改善しているのに、不必要な開発やカスタマイズで表示速度が遅くなるケースもよくあります。

(日本では特に不評な)バージョンアップするごとにミニマルなデザインになってきているのも、その時代のトレンドもありますが、極力雑音を取り除き、必要な情報をユーザーに速く提供する意向もあるでしょう。そういう事も考慮して運用していくことも大事なのかなと思いました。

SharePoint :用語セットの並び順は変えられる!

用語セットの並び順は昇順です。

▼作成時は作成した順番に並びます。ここまででは追加した順番通りに表示されると思ってしまいます。

▼しかし一度設定ページを終了してもう一度設定を見ると昇順に並び変わっています。

▼この用語セットを使った管理されたメタデータ列はアイテム作成時も昇順に並び変わっています。

▼なので任意の順序に並べ替えたい場合は、以前は用語の頭に連番を振って対応したりしていました。

でも、実は目立たないところに並び順を変更できる設定があるんですよね。結構気がついていない方も少なくなかったので記事にしました。

▼用語セットを選択すると上に目立たないタブがあり「ユーザー設定の並べ替え」なんてタブが!

▼「ユーザー設定の並べ替え順序を使用する」にチェックをすると並べ替えができます。

▼このように順番が任意の順番になりました。

▼ちなみに、設定を変更した後に、用語を追加すると…(F、Dの順番で追加)

▼追加分に関してはまた昇順で追加されるので、毎回並べ替え順序を変更する必要があります。(F、Dの順で追加したのに順番はDが4、Fが5になっています。)

これを知っていると知らないとでは大違いですね。連番で管理するのは大変だし余計な文字が増えて邪魔ですからね。

SharePoint :新しい表示(モダンUI)の「…メニュー」が一部縦並び表示に変わってた?ちなみに「…」は何て呼称する?

前回の記事でスクショをとってるときに気がついたのですが…。

様々なところで現れる「…メニュー」ですが、モダンUIのリストやライブラリのビューを見ていたら、タイトル列(名前列)の右の「…」が縦になっているのにさっき気がつきました。

SharePoint Online はシレっと変更されているので、いつ変わったかわかりません。もしかしたら結構前から変わっていた!?

ちなみに自分の過去のブログのスクショを調べても…メニューが表示されている画像がなく、ググると今年の8月あたりのスクショでも横並びになっていたりするので、やはり最近の変化なのかもしれないです。

しかし、なんで縦にしたんですかね。タイトル列や名前列が省略された際の三点リーダと並んでしまうからですかね?それとも特に意味はなかったり?それと元々は常時表示されていたのに、今はアイテムにマウスホバーしないと表示されません。それも何かしらの意味があるんでしょうかね。

ちなみに、この「…」の呼称は?という話は、先日、某MVPの方々と食事をしている際にもあり、これを「三点リーダメニュー」と言う人もいれば、「テンテンテンメニュー」と言う人もいるという話になり、「三点リーダ」が実はそんなにメジャーな用語ではないとのことで、特にお客様との会話ではわかりやすく「テンテンテンメニュー」でも良いのかなぁなんて思っていました。(会話ではなく表記上では「…メニュー」で良いと思いますが。)

海外ではどのように呼称されているのか?と思ってちょっとググってみたところ、「ellipsis」「three dots」あたりがヒットしました。つまり海外も同じような感じですかね。

縦の…メニューってどこかで見たなぁと思ったけど、ブラウザのchromeの右上にありましたね。

ハンバーガーメニューやワッフルメニューやテンテンテンメニューなど、展開するとメニューが表示されるアイコンは様々あり、時代によっても流行りがあるようだし、UXの観点からも賛否両論あるようで奥が深いです。大事なのはユーザーから視認しやすく、また容易に動作や用途が連想できる事ですね。どんなすばらしい機能もユーザーが利用しない、ユーザーに気付かれなかったらダメですからね。

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

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

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

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

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

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

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

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

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

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

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

なんだよ~~~~~~。

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

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

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

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

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

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

SharePoint :新しい表示(モダン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

Office 365 ホーム ページの表示がちょっと変だけど気にしない~

今朝、 Office 365 ホーム にアクセスしてみると、なんかちょっと違和感を覚えました。

よく見ると、「ドキュメント」の下のメニュー内に、スクロールバーが表示され、デザインが崩れています。

こういう事は今までもこれからもちょくちょくあるだろうことなので、「使えるから別に気にしない」と、広い気持ちで楽しみましょう!中の人達が一生懸命色々とがんばってくれている証拠ですね。

Office 365 : パスワードを無期限に設定することをお勧めします

▼Office 365 の管理センターを開いたら、鍵のイラストのメッセージが。

▼こんなメッセージが表示されていました。

▼「推奨事項を表示」をクリックするとこんなダイアログが表示されます。

▼「これを推奨する理由の詳細を表示」というテキストリンクをクリックするとPDFが開きます。

でた!英語!…長い…即読むのを断念。しかし、それじゃイカン!と思ってとりあえずGoogle翻訳(Bing翻訳じゃなくてスミマセン)。

箇条書きにすると以下のような感じです。

  • 強固なパスワードにしよう
  • 定期的なパスワードリセットをやめよう
  • 他のサイトで使いまわすのをやめよう
  • 怪しいアクセスがあったら追跡ができますよ
  • 2段階認証プロセスなんて良いんじゃない?
  • OSやブラウザーなどはちゃんとアップデートしましょう
  • 怪しいサイトなどは見ないでね
  • アンチウイルスソフトを入れましょう

※もちろんですが、英語力低いのでこれを信用しないでください(笑)ちゃんと把握したい場合はPDFをしっかり読んでみてください。

これで全部読んだかと思ったら…ここから目次が出てきて、実は1/5くらいしかまだ読んでない事に気がつき…マジで読み進める事を断念…。でも、たぶん上の7項目を更に詳しく説明しているんじゃないかと思います。いや、そう思いたい…なので、これで概要は把握した!と思い込みます。


僕も定期的なパスワードの更新は前から不要と思っていました。あまり意味がないどころかかえって悪影響なんじゃないかと思っています。もちろん上記の箇条書きのような内容をクリアーした上での話ですが。

特に、 Office 365 を利用していて思っていたんです。様々なサービスがあるでしょ?マルチデバイスでしょ?パスワードを変更したら超めんどくさそう!って。特にスマートフォンはアプリ単位でサインインを求められます。面倒なことこの上ないですよ。

なんか良い方法ないんですかねぇ。

メールでファイルを送る際のパスワード別送運用もそうですが、なんだかなぁという運用でとりあえず対外的にも「対策していますよ!」的な感じ。それで作業効率が悪くなっている感じ。そういうのが徐々に解決されていくと良いですね。

Office 365 :自分に割り当てられているライセンスを調べる方法

Office 365 には色々なサービス・アプリがあり、増えたり、時には減ったりしますが、自分のアカウントに割り当てられているライセンスの種類次第では、利用できたりできなかったりします。なので、より Office 365 を活用したい場合は、自分に割り当てられたライセンスを知る必要があると思います。

自分で調べる方法があるので紹介します。

▼ Office 365 にサインインし、右上の自分の名前をクリック→「マイ アカウント」をクリック。

▼ナビゲーションの「サブスクリプション」か「サブスクリプションの表示」をクリック。

▼ここに自分に割り当てられているライセンスの一覧が表示されます。

利用できるサービス・アプリも記載されているので良いですね。

SharePoint : リッチテキストエディタの「段落の方向」って何?「左・右揃え」との違いは?

リッチテキストエディタには「段落」というセクションがあります。

▼「箇条書き」「段落番号」などはよく利用するのではと思います。

▼「インデント」「インデント解除」に関しても場合によっては利用すると思います。

▼「右揃え」「中央揃え」「左揃え」「両端揃え」も利用頻度は高いかもしれないです。

▼ところで「段落の方向 – 左から右」「段落の方向 – 右から左」は使った事ありますか?

初期状態では「左揃え」と「段落の方向 – 左から右」が選択されている状態になっています。また、「右揃え」も「段落の方向 – 右から左」も、クリックした結果だけを見れば、右に寄せられる事は同じです。では、この「揃え」系と「方向」系の違いはなんでしょうか?

実際にクリックした後のソースを元に考えてみます。

▼「左揃え」

<p style=”text-align: left;”>テキスト</p>

※初期状態では選択されている状態ですが、ブラウザの初期状態が左揃えなのでソースにはタグは含まれていません。一度右揃えにした後に再度左揃えになると、上述のようなソースになります。

▼「右揃え」

<p style=”text-align: right;”>テキスト</p>

▼「段落の方向 – 左から右」

<p dir=”ltr” style=”text-align: left;”>テキスト</p>

※「左揃え」と同じく、初期状態ではタグはない。

▼「段落の方向 – 右から左」

<p dir=”rtl” style=”text-align: right;”>テキスト</p>

※ここを選択すると「右揃え」も自動で選択される。


「揃え」系は「text-align」を使用し左右に揃えるのでわかりやすいです。
問題は「方向」系です。こちらも「text-align」を使用していますが、大事な部分は「dir=””」の部分です。これはあまりメジャーではないタグかと思いますが、書字方向を指定するタグです。そもそも「書字(しょじ)方向」って何よ?って感じですが、文字を書き進める方向という意味で、縦書き・横書きも該当するそうですが、dir=””を使用する場合は横書きにおいて左から右か右から左を指定します。”ltr”は「left to right」で、”rtl”は「right to left」のようです。

つまり、「段落の方向 – 右から左」の場合は、見た目は右揃えと同じですが、dir=”rtl”があるので中身は全く違う事になります。この指定をすると、読み順としては「トスキテ」と読む事になるのかな。

右から左へ記述するのは例えばアラビア語などなので、そういう言語で文章を書く場合に指定するボタンでしょうね。ワールドワイドな製品なので。

多くの場合はあまり関係のない事かと思いますので、やはり右揃えにしたい場合は、視覚的には同じだとしても、「右揃え」を使い、「段落の方向 – 右から左」は利用しないようにしましょう。

ちなみにCSSカスタマイズで「方向」系ボタンを非表示にしたい場合は、idのRibbon.EditingTools.CPEditTab.Paragraph-Large-0-0-2がオリジナルのidっぽいので消せそうですが、そこまでする必要もないだろうし、検証はしません(笑)

以上、なんか気になるボタンだったので調べてみました。