SharePoint :モダンページのWebパーツに新しく実装された「Kindle インスタント プレビュー」「Twitter(プレビュー)」を試す

モダンUIのWebパーツは徐々に追加されていって面白いですね。ただ、ガチガチに厳しい企業にとってはアレも利用禁止、コレも利用禁止にするのに四苦八苦だと思います。そういう企業さんはモダンUI自体が利用禁止でしょうけど。そもそもそういう企業さんにとっては Office 365 は向いていないのかも。

さて、最近追加されたWebパーツが2個ほどありました。

  • Kindle インスタント プレビュー
  • Twitter(プレビュー)

早速試してみました。

■ Kindle インスタント プレビュー

▼モダンページのWebパーツ追加に Kindle のアイコンが

▼クリックするとWebパーツが追加されます

▼同時に設定の右パネルが出現します

(右パネル上部の「 Kindle インスタント プレビュー」の「ビュー」が改行されて隠れてしまっているのはご愛敬ですね。英語だと「Kindle Instant Preview」で余裕をもって収まっていました。)

ここに埋め込みコードを入力すれば良いので、取得しようと思います。

実際に Amazon で埋め込みコードを取得しようと思ったことがないのですが、SNSなどにシェアをするボタンはあったなぁと思って探しました。

▼ここらへん

しかし、埋め込みコードはどこにもなかったんです…。

一旦、SharePoint に戻って右パネル内を見ると、「 Kindle プレビューの埋め込みについての詳細情報 」なるリンクを発見。そこからページに行くもヒントがなく、更にリンクを辿るとAmazonサイトのページにたどり着きました。

Amazon.com: Kindle Instant Preview
https://www.amazon.com/Kindle-Instant-Preview/

ふむふむ…

▼ん?<Embed>??

この左隣のPアイコンはあったけど、<Embed>なんてなかったぞ?もしや?と思い、英語版のAmazonサイトを見てみると…

▼あった!!!

つまり、Amazonの日本サイトでは埋め込みコードは対応されていないという残念なオチでした。そしてAmazonの日本サイト以外を利用したことがなかったけど、英語サイトで日本の書籍を検索しても出てきません。

▼取扱い商品等が変わります…そうですよね…

うーむ、つまり日本の書籍はこのWebパーツは今のところ使えないという事でしょうか。(他国でも取り扱いがあれば使えるますが。)これはなかなか残念です。Amazon側の仕様だからなおさら残念。自分で埋め込みコードを作成するなど何か解決方法はあるんでしょうかね。(今回は時間もないので調べませんが…)

とりあえず、英語サイトで埋め込みコードを取得してWebパーツの設定に突っ込んでみました。

▼ページの編集モードでもプレビューが即表示されます

▼発行するとこんな感じ。プレビューが埋め込まれます。

▼「プレビュー」をクリックするとちゃんと試し読みが少しできます。フルスクリーンも対応ですね。

チームサイト内でチームにおススメ本があったらこのように紹介するのも良いですね。ただ、Amazonの日本サイトが…という点が痛いですが。

■Twitter(プレビュー)

おそらくこっちの方が使えそうです。

▼Webパーツの追加で「Twitter(プレビュー)」をクリック

▼追加するだけで既定で Microsoft のアカウントが指定されています

特定のアカウントのツイートを表示する場合は、特に自分のTwitterのアカウントを持ってなくても利用可能です。ユーザー名やURLを指定するのですが、少し触った限りだと複数指定はできなさそう。

また、ハッシュタグなど検索結果を表示させるにはTwitterのアカウントが必要なようです。

詳細は以下のページをご参考に。

Twitter の web パーツを使用します。
https://support.office.com/ja-jp/article/-15db6b3b-d167-41dd-9875-2af64b44d820

Twitterに関しては例えば Microsoft Flow を利用して、SharePoint や Yammer や Teams などに流す方法もあるけど、Flow のアクションはTwitterアカウントにログインしなければいけなかったと思います。今回紹介した方法なら一部ではTwitterのアカウントなくても表示可能なので、気軽ですね。

利用シーンとしては、ソーシャルメディアをやっている企業なら、自社アカウントを社内ポータルサイトに表示させたり、営業部門のサイト内では自部門で扱っている商品やその企業のアカウントがあればそれを表示させるのも良いですね。技術部門も同じく。
例えば、 Microsoft 製品を販売している部門サイトに Microsoft の製品関連のアカウントがあれば、それを表示させていれば最新情報を楽に得る事が可能かと。

こんな感じでカンタンに設定が可能な便利機能が続々実装されていく中で、開発やらカスタマイズにこだわるよりも、このような標準の便利機能をいかに業務に役立てるか?という利活用の工夫に時間とお金を注いだ方が良いのではと思います。テナントの管理者にとっては最新機能などのキャッチアップが非常に大変で追いつけないかと思いますが。

SharePoint :モダンページのテキストWebパーツの「ハイパーリンク」

モダンページのテキストWebパーツに関しては、少し前の記事で、右パネルが表示されたり、テーブルがプレビューだけど実装されたり、を紹介しましたが、その時にはなんでもなかったハイパーリンクが少し機能アップしたようです。

以前のスクショがないのですが、リンクの挿入にはURL欄と表示テキスト欄しかなかったと記憶しています。

▼ところが、今日見てみたらこんな感じになっていました。

ハイパーリンクに入力するURLに関しては特に用途制限はないとは思いますが、これを見る限りだとサイト内のページをリンクする用途をメインとしてる感じでしょうか。それと、新しいタブでリンクを開く設定もできますね。

これ、どこかで見たことあるなぁと思ったら、WordPress の記事作成のリッチテキストにリンクを追加するUIがこんな感じです。過去記事へのリンクが楽なんですよね。

これまた先日紹介したページの「レベル上げ」機能。あれはナビゲーションにリンクを追加でしたが、ナビゲーションがゴチャつくので正直微妙かなと思っています。それよりもページのコンテンツエリア内に配置できるテキストWebパーツにリンクの方が用途としてはありそう。あ、忘れちゃいけないのがリンクWebパーツもありました。あっちはリンク先URLのサムネイル表示ができる機能はありますが、このようにサイト内のページを検索する機能はありません。
クラシックUIのWebパーツでも、概要リンクWebパーツだったりコンテンツ エディターWebパーツのリンクだったり、目的は同じでもやはり細かな用途に応じて様々な機能を使い分けていたので、今後もそんな感じでしょうか。

やはりこれからの SharePoint はニュース(ページ)をどんどん利用していく想定ですかね。

Yammer などでフロー情報が流れ、 SharePoint はどちらかというとストック情報の蓄積がメインになるかとは思いますが、そもそもお知らせリストだとか SharePoint はフローもストックもどっちもイケるわけで、ニュースもそういう意味ならフロー情報の用途になるかと思いますが、大事なニュースはこのように固定でリンクさせておくのも大事ですよね。

様々な機能が追加されていきますが、利用ユーザー目線でストレスなく利用されやすい事を第一に構築していきたいですね。今までの経験則だと、ページなどのコンテンツ作成者が自分本位でしか考えていなく、結果として利用ユーザーからすると使いづらい・わかりづらい…なんて場合も少なくはありませんでした。特に社内ポータルサイトのトップページなんかは。

SharePoint : モダンページのテキスト Webパーツが少し進化しました

現状、モダンページのテキスト Webパーツはまだまだ機能は少ないですが、徐々に進化して新しい機能が追加されてきています。

▼バーの一番右に…アイコンがあります。クリックすると…

▼右パネル「テキストと表の書式設定」が現れます。

▼パネル内を拡大

ちょっと触った限りの気が付いた点を箇条書きに。

  • フォント サイズはクラシックページの コンテンツ エディター Webパーツのように数値入力はできません。選択するのみ。
  • 文字装飾については、バー内にある機能の他に「取り消し線」「上付き」「下付き」が増えましたね。
  • フォントの色と蛍光ペンの色では色は固定で、クラシックページの コンテンツ エディター WebパーツのようにRGBで数値を入力して指定するような柔軟性は今のところないです。
  • 段落では、バー以外に「インデントを増やす」「インデントを減らす」があります。

で、箇条書きとは別に、今回の機能追加ではプレビューだけどテーブルが挿入できるようになりました。

▼右パネル内の「表の挿入」をクリックすると、

▼行や列の数は指定できず、3×3が作られます。

そこから右パネル内「挿入と削除」で行や列を追加します。アイコンは直感的でわかりやすいです。

▼表をクリックすると表全体の縦横の大きさを変更する事は可能です。

▼大きさを変えようとすると「横px × 縦PX(横増減分px,縦増減分px」がボックスで表示されます。

▼表内で右クリックをするとメニューがあらわれます。

▼ドラッグした分、セルを選択できます。また、ctrlでも複数セルを選択できます。

▼その状態で装飾をすると、選択した全てのセルで適用されます。(例:選択したセルが一挙に太字になりました。)

▼列幅もドラッグして変更できました。

と、ちょっと触って僕が気が付いた範囲はこんな感じです。表のスタイルの変更など細かい点ではまだまだですが、とりあえず機能追加として第一歩ですね。今後もどんどん機能が追加されると思います。

あ、そうそう、表(テーブル)ってレスポンシブWebデザインにおいて表現が難しいものの一つですが、今の機能ではどうなるでしょうか?

▼Webパーツ内での横スクロールで対応です。

ちなみにモバイル機器(iPhone X で検証)でも同じ挙動でした。

あ、そうそう、モダンページのテキスト Webパーツ内でも、改行をする場合はShift+Enterですよ。クラシックUIよりも改段落の時の行間は広がっています。ちゃんと認識して使いこなせば、文章の視認性は高くなりますね。


SharePoint リッチテキストエディタ内で改行をするとやたら行間が空いてしまう!?

SharePoint :モダンページのリスト・ドキュメント ライブラリ Webパーツに新規ボタンなどのコマンド バーが追加された!

このバーの正式名称がわからなく、 Microsoft のサイト、ブログなどでは「コマンド バー」と記載されている事が多かったので、コマンド バーとしています。

追加されるという話は聞いてたけどようやく追加されましたね!色々触ってみます!

■ドキュメント ライブラリ Webパーツ

▼「新規」と「アップロード」が表示されています。

▼「新規」を展開すると。

ライブラリのコマンド バーと比べると「Visio 図面」や「リンク」がないですね。

▼「アップロード」を展開すると。

っていうか「アップロード」でフォルダーを選べるのを今知りました…。というのも諸事情でIE11での操作が多いんだけど、モダンUIはIE11で操作しない方が良さそう!というのも…

▼IE11だとライブラリのコマンド バーの「アップロード」は下矢印がなく展開できない。

▼ただ、モダンページのWebパーツはIE11でも下矢印があり展開可能。しかし、フォルダーを選択できなく、実質使えない。

▼アイテムを選択した状態のコマンド バー

ライブラリのコマンドバーと比べると必要最低限が揃っているという感じでしょうか。

■リスト Webパーツ

▼「新規」が表示されています。

▼「新規」を展開すると。

展開させる必要がない感じですね。

▼アイテムを選択した状態のコマンド バー

こちらも必要最低限という感じですね。クラシックページのWebパーツの設定ではツール バーの種類は「詳細」と「簡易」が選べるけど、モダンページのコマンド バーにはそのような選択は今のところないようです。

■気になった点

▼Webパーツの編集にはコマンド バーの表示・非表示の制御はできません。

クラシックページではツール バーの種類で非表示の制御はできますが。

▼タブレットサイズまではコマンド バーは表示されますが、スマホサイズだと非表示になります。

▼リストで PowerApps でフォームカスタマイズしていても、モダンページのWebパーツ経由で新規作成する時は、NewForm.aspxに遷移しました。

ここで「キャンセル」をクリックすると、モダンページに戻ります。

■モバイル機器の SharePoint アプリでは?

iPhone X での確認です。

▼やはりコマンド バーは非表示です。

▼ただ、横にするとタブレットサイズになり表示されます。

 

ちなみにこれらWebパーツってクラシックページのようにWebパーツのタイトルは変更できないんですよね。リストやライブラリ名がそのまま表示されて変更ができないです。

と、午前中に気が付いて急遽昼休み中に記事を書いたので慌て気味でしたが、とりあえずこんな感じでした。いやぁ、どんどん機能が追加されていくので楽しみですね!

SharePoint :新しい表示(モダンUI)の画像Webパーツでトリミングができるようになった!

まだまだモダン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 内ではなく、別のそれ専用の場所に保存されているようです。

いずれにせよ擬似的ではなくちゃんとトリミング加工された画像を表示させる事も、適切なサイズで表示させる事により無駄なダウンロードを減らし、やはりパフォーマンス向上に貢献しているのでしょうか。

SharePoint :新しい表示(モダンUI)のページのWebパーツの追加がダイアログボックス化でき、便利になった!

ふとモダンページをイジっていたらWebパーツの追加時に…

▼こんな矢印あったっけ?クリックしてみると

▼おっ、ダイアログボックス表示で展開された

前々から狭いなと思っていたのでうれしい!いつから実装されたんだろう?気が付かなかった。

で、ダイアログボックス内をさわってみると…

▼「テキスト、メディア、コンテンツ」の右に「すべて表示」というテキストリンク。

▼クリックするとそのカテゴリの全Webパーツが表示されました。

なんか足りないなぁと思ったらこういう仕掛けですが、ちょっと目立たなくて見落としそうなテキストリンクですね。

それと気になった点。

セクションとWebパーツが追加できる部分ですが、

▼「セクション レイアウト」のカテゴリがあります。ダイアログボックスに展開すると…

▼「セクション レイアウト」はダイアログボックス内にはありませんでした。

なので、今のところはセクション レイアウトは展開させないで選択ですね。

モダンUI、どんどん進化していってます。楽しいですね♪