Art-Break .log : Taichi Nakamura
Microsoft 365 ( Office 365 ) ・ Power Platform ・その他の情報発信ブログ
▼ライブラリ内のアイテムを選択し、「…」から「移動」をクリック。
▼右パネルが出現します。
▼右パネルの中でも右端に謎のアイコンが！
▼マウスホバーしてみると吹き出しらしきものが表示されるけどブラウザから見切れてる！！
おそらく1行目は「ドキュメント」で2行目は「共有」でしょうかね。
ちなみにマウスホバーをするとカーソルが指カーソルに変わるのでクリックできそうな挙動ですが、ボタンをクリックしても何のアクションも起きません。
▼移動先フォルダーを移動させて再度マウスホバーをすると…
1行目は移動したフォルダーの「test」でしょうが、2行目は「およ」？？およよ？？？、3行目は「て」…「てい」？？？？、もはやわかりません。
とにかくクリックできそうなのにできなく、吹き出しの中身もよくわからないので、現時点では不思議な機能です。
このアイコンどこかで見たなぁと思ったら…
▼Windows 10 のタスクバー内のPeopleボタンですね。
どんな機能なんでしょうね。たぶんそのうち中の人が気が付いて修正してくれるハズです。
モダンUIではビューから様々な設定が変更可能になっています。おそらく今後も増えていくのではと思っています。
リボンメニューがなくなり、ページ遷移数やブラウザ的に読み込む範囲を極力少なくすることで、やはりパフォーマンス軽減（ページの表示速度）や、ユーザーへのストレスを減らすUXに配慮というところでしょうか。
で、先日気が付いたのですが、タイトル列の名前の変更をした際におかしな挙動がありました。
▼カスタムリストのタイトル列をモダンUIのビューから変更
▼列名が「タイトル」から「製品名」に変更されました
▼しかし、その後、新しいアイテムを追加しようとするとなぜか「タイトル」に戻っています
▼リストの設定を見ると列名は「タイトル」のままでした
でも、モダンUIのビューを見ると「製品名」になっているんですよね。
▼リストの設定の列の設定で従来からの設定方法で列名を変更しました
▼するとすべての場所で列名が変更されました
ということでおかしな挙動があるので、ビューから変更した場合は確認が必要です。もしくは従来通りの方法でリストの設定から変更するか。
ちなみにこれまたこの記事を作る際にわかったんだけど、ビュー上から列名を変更する「名前の変更」というメニューがあるのは、今のところ「タイトル」列など、リストやライブラリを作成した際に標準で備わっている列にしかありませんでした。
▼追加した列に関しては「名前の変更」メニューは存在せず、代わりに「編集」があります。
▼「編集」をクリックすると、右パネルから列名を含めた列の設定が変更可能です
ここでの変更はちゃんと全て反映されます。
色々便利になってきたモダンUIですがまだまだな部分もあります。しかし思い起こせばクラシックUIだって色々ありましたよね。直らないままなものも。例えばビューの編集をするとリボンの挙動がおかしくなる問題とか。なのでそういうのは気にしない方が良いですね。
まだまだモダンUIの導入を控えている企業は多そうですが、先の事を考えて色々触ってみるのも大事ですね。
いつ実装されたかわかりませんが、画像Webパーツが便利になりました。画像を SharePoint 上でトリミングできるようになりました。今までペイントやPhotoShopなどで加工していた作業が、SharePoint 上で行えるのは非常に便利ですね。
▼画像Webパーツで画像をクリックします。
▼クリックすると上部にトリミング用のアイコンボタンが並んで表示され、「自由比でトリミングします」というアイコンが押下されています。
これ、僕もなかなか気がつかなかったんだけど、背景が白もしくは白に近い画像だと非常に分かりづらいです。
▼背景が黒い画像だとわかったけど、画像をクリックした時点ですでに自由比でトリミングできる状態なんですね。
▼なのでよーく見るとこの8箇所に■があるような…
▼画像の端でカーソルアイコンが変わるのでドラッグするとこのように表示範囲が狭まり、非表示範囲はグレーアウトされます。
▼フロッピーアイコン（プレビュー）をクリックするか、画像Webパーツじゃないところでクリックをすると結果が反映されます。
非常に簡単にトリミングができますね。
▼一番左のアイコンが「縦横比」。これをクリックすると…
▼このように4種類の四角いアイコンが
上から
16/9
3/2
4/3
1/1
という比率です。
▼一番下のアイコンをクリックすると、トリミングボックスを回転できます。
▼4種類の四角いアイコンのどれかをクリックすると、その縦横比でトリミングされるプレビュー。
▼そして反映。
他のアイコンについては、円を描く感じの矢印アイコンは戻るボタン、×ボタンはトリミングをリセットするボタンです。
▼IE11だと縦横比アイコンをクリックしても、縦横比を選択するドロップダウンが出てこない。
▼このようなレイアウトで右隅をドラッグしようとしたら右下のWebパーツの編集アイコンが表示されてしまい邪魔される。
どういう技術が使われているのかはわかりませんが、結果だけで判断すると、例えばオリジナル画像をそのままにCSSでトリミングされた非表示部分を隠す…などという事ではなく、ちゃんとトリミングした時点で画像ファイル自体がトリミングされていました。
▼トリミング後の画像をPCにダウンロードすると、画像ファイルは「thumbnail.jpg」とリネームされ、トリミングした状態でした。
SharePoint 内のライブラリにアップした画像を表示させていますが、トリミングした画像Webパーツの画像のプロパティを調べると、この画像が保存されている場所は SharePoint 内ではなく、別のそれ専用の場所に保存されているようです。
いずれにせよ擬似的ではなくちゃんとトリミング加工された画像を表示させる事も、適切なサイズで表示させる事により無駄なダウンロードを減らし、やはりパフォーマンス向上に貢献しているのでしょうか。
ふとモダンページをイジっていたらWebパーツの追加時に…
▼こんな矢印あったっけ？クリックしてみると
▼おっ、ダイアログボックス表示で展開された
前々から狭いなと思っていたのでうれしい！いつから実装されたんだろう？気が付かなかった。
で、ダイアログボックス内をさわってみると…
▼「テキスト、メディア、コンテンツ」の右に「すべて表示」というテキストリンク。
▼クリックするとそのカテゴリの全Webパーツが表示されました。
なんか足りないなぁと思ったらこういう仕掛けですが、ちょっと目立たなくて見落としそうなテキストリンクですね。
それと気になった点。
セクションとWebパーツが追加できる部分ですが、
▼「セクション レイアウト」のカテゴリがあります。ダイアログボックスに展開すると…
▼「セクション レイアウト」はダイアログボックス内にはありませんでした。
なので、今のところはセクション レイアウトは展開させないで選択ですね。
モダンUI、どんどん進化していってます。楽しいですね♪
現在、モダンUIのリストの場合、ビュー内のアイテムをクリックするとアイテム詳細ページ（DispForm.aspx）に遷移してアイテムを表示していましたが、先日紹介しました PowerApps でフォームカスタマイズができるようになってからのタイミングかとは思いますが、 PowerApps でフォームカスタマイズができるようになったテナントでは、フォームカスタマイズの利用をしたかどうかに関わらず、アイテムを開くとページはDispForm.aspxに遷移されず、右パネルが出現し表示されるようになりました。
まずは、 PowerApps でフォームカスタマイズができないテナントの挙動を確認します。
▼モダンUIのリストでアイテムのタイトルをクリックもしくは縦…メニュー→開くをクリックすると、
▼ページがアイテム詳細ページ（DispForm.aspx）に遷移して表示されます。
次は、 PowerApps でフォームカスタマイズができるようになったテナントで、 PowerApps でフォームカスタマイズをしていないリストの挙動です。
▼モダンUIのリストでアイテムのタイトルをクリックもしくは縦…メニュー→開くをクリックすると、
▼このように右からパネルが出現し、アイテムが開きます。
▼ちなみにIE11ではデザイン崩れが起きていました。
ただし、クラシックUIも存在する兼ね合いからか、URLの「AllItems.aspx」を「DispForm.aspx?ID=1」に変えて開いてみると、
▼このようにアイテム詳細ページ自体は存在します。
という事で、最終的には全テナントで、ページ遷移ではなく、右パネルで表示されるように統一されるんでしょうかね。ゆくゆくはDispForm.aspxはなくなってしまう運命なのでしょうか？どうなることやら。
このように徐々にページ全体が切り替わらない仕様になってきているのは、やはりパフォーマンス向上も関係してそうですね。
SharePoint の個人ブログって使ってる人いるのかな？僕は前職で社内向けにブログサイトで SharePoint のTipsを公開していましたが、個人ブログに関してはたしか作成できない設定になっていたので使った事ありません。
そんな最近、 Delve を見ていたらブログの欄があったので、懐かしいなぁと思い、思わずクリックしてみました。
▼このブログセクションの「+新しい投稿」をクリックしたら…
▼なんか見たことのないUIです。マルチデバイス対応ですよ的な画像。
とりあえず「作成開始」をクリックすると、数分かかります。
▼作成画面はこんな感じになりました。左上は「 SharePoint 」と表示されていますね。
ん？元々個人ブログはブログサイトと同じUI（クラシックUI）だったけど、これは見るからにモダンUIっぽい雰囲気。っていうかモダンサイトのページっぽい。
▼モダンページのWebパーツ追加と似てるけど、パーツの中身は記事を書くのに特化したパーツ。
▼記事を投稿するとこのようなトップページに遷移します。
このように各記事のメインビジュアルに設定した画像がサムネイルとして表示されるようです。クリックすると…
▼記事ページはこんな感じ。
へぇ～と思ったけど、いくつか疑問点が。
ブログもモダンUIになったんだなぁと思ったのですが、つい気になってモダンサイトであるチームサイトやコミュニケーションサイトのサブサイトとしてブログを作成したのですが、
▼あれ？従来のクラシックUIのままじゃん。サイドリンクバーにも新しい表示に切り替えるリンクもない。
つまり、上の個人ブログは特殊なのかな？
そういえば、過去にこのテナントで個人ブログで記事を書いた事を思い出しました。でも、上の個人ブログではその記事がないです。
個人ブログって個人プロファイルやニュースフィードなどの個人サイトコレクションにアクセスすると、サイドリンクバーにリンクがあったと思うのですが、そもそも個人プロファイルページなど個人サイトコレクションへアクセスするリンクってどこにあるんだろう？ Office 365 内の画面右上のユーザー名をクリックし、「マイ アカウント」をクリックしても違うし、「自分について」をクリックしても Delve に飛びます。
あ、そうだ！ モバイルアプリでは消えてしまった ニュースフィード は、まだアプリとしては存在していた！
▼久しぶりに見たこのページのサイドリンクバーに「ブログ」があるのでクリック。
▼あ、やっぱり SharePoint の従来の個人ブログは別に存在していた。2013年に書いた記事がありました。
ってことで、過去の SharePoint の個人サイトコレクション内のブログはおそらく過去の遺産として存続しているけど、それとは別で、 Delve からのリンクで作成できる個人ブログがあり、それがモダンUIっぽいブログだったという事かな。
また、ニュースフィードページのサイドリンクバーの「プロファイル」のリンクは、URLは個人プロファイル用のURLにリンクがあったけど、実際にクリックすると自動転送されて Delve に飛びました。つまり、従来の個人プロファイルページはなくなってしまったのでしょうか。
▼なつかしの個人プロファイルページ（オンプレ環境なら SharePoint 2016 でもあるのかな？）
実はこの記事のこれまでのページのURLや例えば OneDrive のURLを調べると、なんだか色々と複雑な感じになっているんだなぁという事がわかりましたが、それは記事に書くと大変そうなので割愛します。
特に日本の企業において、従業員の社内限定個人ブログのニーズがどこまであるかというと残念ながらあまりなさそうなのと、カンタンな情報公開なら Yammer でもできたり、 SharePoint でブログサイトを作成したり、他に代替手段がたくさんあるので、そんなに需要はないのかな。ただ、現状、上述の通り、 SharePoint にてブログサイトはモダンUIには対応していないので、この特殊なモダンUIの個人ブログはスマホからも見やすいと思います。しかし、あの個人ブログ…モバイルアプリでは Delve アプリで色々探したけどたどり着けませんでした…。SharePoint アプリでも探しましたけど同じくたどり着けませんでした。ちなみに、この個人ブログはフォローができないようです。なので、フォローして、 SharePoint アプリで見る事もできなそう。
ってことで、自分がザっと調べた範囲だと色々不思議な個人ブログですが、一度チェックしてみると良いと思います。もしかしたら、今後ブログサイトがモダンUIに対応したら、このようなUIになるかもしれないので。
クラシックUIの場合、
▼ページの歯車メニュー内に「サイトの設定」があります
▼モダンUIでは歯車メニュー内に「サイトの設定」がない！
以前はあったんですけどねぇ…
じゃ、どこから行けるの？と困っている方がいらしたらのために、記事を書きました。
▼歯車メニュー内にある「サイト 情報」をクリック
▼右からパネルが出てきます。
▼拡大してみるとこんな感じ。
非常に目立たないというかテキストリンクだとわかりづらいけど、この「すべてのサイト設定を表示」をクリックすると、サイトの設定に遷移します。
▼同じく歯車メニュー内の「サイト コンテンツ」をクリック（サイドリンクバー内にもリンクあります）
▼赤矢印の部分に「サイト設定」のリンクがあります。
▼サイト コンテンツ ページにこのリンクがあるのは SharePoint 2013 からなので、クラシックUIにもリンクはあります。
古くは SharePoint 2007 は右上に「サイトの操作」メニューがあり、 SharePoint 2010 ではそのサイトの操作メニューが左上に移動し、 SharePoint 2013 では歯車アイコンとして右上に戻るという変遷はあったものの、いずれのバージョンでもその中に「サイトの設定」のリンクはあったので、モダンUIの場合いずれの方法も2クリックしなければいけないのは若干ダルいです。
モダンUIはリスト・ライブラリも設定画面に行かずに、ビュー内で列の管理やビューの管理ができるようになり、極力設定画面を経由させない事で簡単に管理ができるように！という想いがあるのかもしれないです。同じくサイトの設定画面もなるべく経由させないように考えており、その表れとしてサイトの設定画面やリスト・ライブラリの設定画面にモダンUIがないのかなと思いました。そう考えると今後更に設定画面を経由しないUIになっていくのかもしれないですね。あくまでも僕の浅い考えの予想ですが…。ただ、過渡期である今はうまくモダンUIとクラシックUIを使いこなさないとですね。
前から噂の「Column formatting」（日本語の正式名称はなんだろう？）が先行リリースされたのですが、僕のテナントでもリリースされたのでちょっと遊んでみました。
※モダンUIのみの機能ですね。
これは、Excelの条件付き書式にような機能ですが、恥ずかしい話、僕はExcelの条件付き書式すら使い方を知ったのは半年前くらいです…。で、そういうレベルの僕がググった情報程度で遊んでみるとどうなるか？というところでチャレンジしてみます。
▼ビューの列名→列の設定→「この列の書式設定」
▼右に設定カラムが登場
▼拡大してみると、
う～む…JSON…色々お噂は聞くジェイソンさんですか…13日の金曜日に登場するだけで十分ですよ…ホラーもプログラミングも苦手なのでよくわかりません。ちなみに、この中の「JSON の書式の列の詳細情報」というテキストはリンクですが、クリック先のページにはたいした事は書かれていませんでした。
そのうちノンコーディングで色々できるようですが、現状はJSONを使うようです。
とりあえず、 Microsoft のページを参照。
まぁ、英語ですよね…。とりあえずサっと見て色々できるなぁと思ったけど、英語読むのが面倒なので、まずは簡単にCSSを当ててみます。
{ “$schema”: “http://columnformatting.sharepointpnp.com/columnFormattingSchema.json”, “elmType”: “span”, “txtContent”: “@currentField”, “style”: { “font-weight”: “bold”, “border”: “1px #c0c0c0 solid”, “border-radius”: “6px”, “padding-left”: “10px”, “margin”: “4px 0” } }
この2行目のURLみたいなのは自分の環境に合わせて書き直すとかではなく、このままで良いようです。この結果は…
▼おぉ、とりあえずスタイルが当たってる！
次に、列の値によってスタイルを変えたい！そのくらいはできるようになりたい！と思って Microsoft のページを見ながら試行錯誤してみると、条件を書くのが面倒くさくエラーばかりでした。
わからないまま書いたので正しいかはわかりませんが…以下で動きました。
{ “$schema”: “http://columnformatting.sharepointpnp.com/columnFormattingSchema.json”, “elmType”: “span”, “txtContent”: “@currentField”, “style”: { “font-weight”: “bold”, “border”: “1px #c0c0c0 solid”, “border-radius”: “6px”, “padding-left”: “10px”, “margin”: “4px 0”, “background-color”: { “operator”: “?”, “operands”: [ { “operator”: “==”, “operands”: [ “@currentField”, “青” ] }, “#7fffff”, { “operator”: “?”, “operands”: [ { “operator”: “==”, “operands”: [ “@currentField”, “黄” ] }, “#ffff7f”, “#ffbf7f” ] } ] } } }
▼信号ができました！
ただ、これだと青と黄以外が赤という条件なので、未選択でも赤になるのかもしれないけど、とりあえず必須項目にしたり初期値を指定すれば問題ないかな。
上述の Microsoft のページを見ると他にも色々できますが、ちょっと仕事やらプライベートが多忙なので今は保留です。もっと遊んでみたいんですけどね。
iPhone からアクセスするとどうなるかを見てみました。（最近買ったばかりの iPhone X です！）
▼ SharePoint アプリで該当リストを表示すると、アプリ内で整形されるので反映されないです。
モバイルのブラウザで表示してみたり、SharePoint アプリでも別の経路からブラウザ表示で表示すると、
▼このようにモバイルで表示しても反映されています。
その後に列の設定を見たら、
▼「カスタムのフォーマッタ」というところにソースが。
数日前に、急にこれが現れてなんじゃこりゃ？と思ったけど、名前からしてこの機能だとはなんとなく思っていました。
最後に、これまでのスクショを見る限り、「Column formatting」の日本語は、
のどちらかだろうけど、まぁ、「列の書式設定」でしょうね。
まだ先行リリースのプレビューなので実際に業務でこの機能を利用するのは尚早かもしれませんが、僕みたいにプログラミングができなくてもネットの情報を見れば簡単なものならなんとかなりそうなので、ちょっと遊んでみるのも良いかもしれないです。
ナニコレ？
リストならタイトル列、ライブラリなら名前列は他の列と違ってビューでの表示が特殊で、マウスホバーすると縦…メニューが表示されます。それによって少し前にややこしい事もありました。
SharePoint ：新しい表示（モダンUI）の「タイトル」列（「名前」列）の省略部分は列幅を広げると表示されました！
で、上の記事内のスクショを見た後に現在のモダンUIのビューを見ると違和感が。なんかタイトル列と縦…アイコンの間に、
▼新しいアイコンが出現！
▼これをクリックすると「リンクの送信」なるダイアログが
よく見ると上にも同じアイコンがあり、そこから吹き出しになっているので、アイテムを選択した後に上のアイコンでも同じ操作ができるようです。
で、上の記事内を踏まえた上でもしやと思い操作してみると…案の定、列幅調整の罠がここにもありました。
つまり、上の記事ではタイトル列の本当の列幅調整は縦…メニュー分を考慮して少し左の位置で調整しましょうと書きましたが、更にリンクの送信用アイコン分も考慮しないと同じ罠にハマりそうです。
というよりは、タイトル列の列幅の可変をしたい場合は、縦…メニューから探っていくより、
▼タイトル列の「タイトル」にマウスホバーさせると背景色が変化するので、
▼その右端にカーソルを持っていって
▼広げればOKですね。
▼っていうか他にもNewアイコンがマンガで言うところの急に現れた時を表現するような感じに変わりましたね。
日々変わっていくので楽しいですね！
最近モダンUIを触っているのですが、画像Webパーツやヘッダーの背景画像を表示させたい場合で、すでにサイト内にアップロードしている画像ファイルを利用したい場合、ちょっと挙動がおかしい点がありました。
▼例えばニュースのヘッダーに背景画像を表示したい場合
▼サイト内のライブラリにアップロードされているファイルを表示したい場合
▼表示したいアイテムをクリックすると右下の「開く」がアクティブになります。（色が変わります。）
この状態で「開く」をクリックすればあとは数クリックで表示できます。
ただ、どういう条件かはわかりませんが、アイテムをクリックしても「開く」がアクティブにならない場合がありました。
▼同じライブラリ内の別のフォルダーです。
▼アイテムを選択したのに「開く」が非アクティブのままです。
もちろんこの状態では「開く」をクリックできないので、表示できません。困ります。
色々試してみたら、たまたまアクティブにできる方法を見つけました。
アイテムを右クリックしてください。
▼なぜか「開く」がアクティブになりました。もちろんクリックでき画像を表示できます。
そのうち直るかとは思いますが、とりあえず困ったら右クリックしてみましょう。