【SharePointリスト】画像表示するギャラリービューの作り方

 

 

 

この記事では、SharePointリストに画像表示することでリストをカードのように表示させるギャラリービューを説明します。

 

 

 

 

この記事は、Power Automate活用術の在庫管理の続きになります。

 

 

 

画像表示

 

SharePointリストに画像を追加することで商品がわかりやすくなります。

画像表示の方法は、２通りあります。

 

ハイパーリンク

 

ハイパーリンクを使って画像を表示する場合は、チームサイトの画像ライブラリを使います。

コミュニケーションサイトには、画像ライブラリがありません。

 

 

SharePoint画像ライブラリを作成

 

step
１アプリの追加

①SharePointサイトの右上の「歯車マーク」→「アプリの追加」をクリック
②「画像ライブラリ」をクリック

 

step
２名前をつけて作成

③名前に「在庫リスト画像」と入力し、「作成」をクリック
④サイトコンテンツが表示されるので、「在庫リスト画像」をクリックして開く

 

 

step
３画像を追加

⑤「ドラッグ・アンド・ドロップ」もしくは、「アップロード」→「ファイル」で画像ファイルを追加。
※画像は、PNG（背景透明化）で作成するとギャラリーでカードにした時にキレイに表示されます。

 

表示するのに重くなるのでハイパーリンクの画像は、できるだけ軽くして下さい。

画像サイズは、JSONの書式設定で変更できるので統一する必要は、ありません。

 

SharePointリストにハイパーリンクを追加

 

step
１リストを開く

①SharePointリストを開く

 

step
２列の追加

②「列の追加」→「ハイパーリンク」をクリック
③名前に『画像URL』と入力し、「保存」をクリック

 

step
３ハイパーリンクを画像表示に設定

④右上の「歯車のマーク」→「リストの設定」→「画像URL」をクリック
⑤URLの形式を「画像」を選択
⑥列の書式設定に下記JSONを追加し、「OK」をクリック

 

 

JSONの画像サイズは、ピクセル表示です。

次の画像では、PNGで1000px正方形を使用しています。

 

SharePoint画像ライブラリのリンクを追加

 

step
１画像ライブラリのリンクをコピー

①画像ライブラリ「在庫リスト画像」を開く
②画像を選択し、「共有」、「リンクを知っている◯◯◯◯のユーザー」→「適用」→「リンクのコピー」をクリック
③「コピー」をクリックし、URLをコピーする

 

step
２画像URLを追加

④アイテムを選択し、「編集」→画像URLにコピーした「URLを貼り付け」→「保存」をクリック

 

step
３画像URLを追加

⑤①〜④を繰り返し、全ての画像をアイテムに追加

 

画像ライブラリのリンクコピーは、基本的には、同じサイト内に作成すれば、リンクコピーだけでURLは、コピーできます。

コミュニケーションサイトに作成してしまった場合は、この方法で行って下さい。

 

画像追加

 

もう一つの方法は、列の追加で画像を選ぶ方法です。

この方法の場合、ギャラリーでカードにした時はキレイに表示されますが、リストでは、キレイに表示されません。

ギャラリーでのみ表示させる場合は、こちらの方が簡単です。（画像は、背景透明化PNG、GIF推奨）

 

 

SharePointリストに画像を追加

 

step
１列の追加

①SharePointリストを開く
②「列の追加」→「画像」をクリック
③名前に『画像』と入力し、「保存」をクリック

 

step
２画像の追加

④アイテムを選択し、「編集」→「画像の追加」→「画像を選択」→「保存」をクリック

 

step
２画像の追加

⑤④を繰り返し、全ての画像をアイテムに追加

ハイパーリンクの画像と比べると背景が黒くなっていますが、ギャラリーのカードで表示した時は、キレイに表示されます。

JPEGの場合は、背景色になりますが、ギャラリーではキレイに表示できません。

 

ギャラリービューの設定

 

画像表示させたリストをギャラリービューで表示させます。

ハイパーリンクの画像と画像追加のギャラリービューは、同じになります。

カード デザイナーを使ってギャラリービューを見やすくしていきます。

 

SharePointギャラリー（カード デザイナー）

 

step
１ギャラリーを選択

①SharePointリストを開く
②右上の「すべてのアイテム」→「ギャラリー」をクリック
※ギャラリーで背景が透明化されてキレイに表示されていることを確認します。

step
２ビューの編集

③右上の「すべてのアイテム」→「現在のビューの編集」をクリック
④「注文数量」「注文計算」「注文状況」「注文チェック」のチェックを外し、「OK」をクリック
※表示させる必要がない列を非表示にする

step
３ビューの書式設定

⑤右上の「すべてのアイテム」→「現在のビューの書式設定」をクリック
⑥「カードデザイナー」をクリック

 

step
４ビューに名前をつけて保存

⑦右上の「すべてのアイテム」→「ビューに名前をつけて保存」をクリック
⑧『View』と入力し、「保存」をクリック
※これをパブリックビューにするにチェック
⑨「すべてのアイテム」→「現在のビューを規定値として設定」をクリック
⑩「ギャラリー」と「View」が選択された状態で「ビューに名前をつけて保存」→「保存」をクリック
※ブラウザを更新して常にギャラリーのカードで表示されることを確認。

 

 

ギャラリービューができたことで、リストが見やすくなりました。

 

Microsoft Listsで表示

 

Microsoft ListsがTeamsアプリで使えるようになりました。

Teamsのチャネルにリストを表示させることで、Teams内で仕事が完結できます。

 

Teamsチームチャネルにタブ追加

 

step
１チームチャネルを開く

①Teamsデスクトップアプリを開く
②「チーム」→「チームのチャネル」→タブを追加「＋」→「Lists」をクリック
③「保存」をクリック

 

step
２リストを追加

④「既存のリストを追加」→「在庫」をクリック

 

step
３リストを追加

⑤SharePointリストと同じビューで表示される

 

チームのチャネルにタブを追加することで、リストをすぐ確認することができます。

このような在庫管理リストを表示するのであれば、リストを選択して「会話」を使って「ノートの在庫が無いので補充して下さい。」とアイテムを添付してチャネルに投稿することもできます。

 

まとめ

 

今回は、SharePointリストに画像表示させる方法、ギャラリービューを説明しました。

SharePointのアップデートでギャラリービューが使えるようになったり、Teams内にMicrosoft Listsが追加されたりと知らないうちに機能が増えています。

今後、Teams内でSharePointサイトが表示できるようになるとの情報もあります。

すべての仕事をTeams内で行えるようになれば業務効率にも繋がりますね。

また、アプリ連携をPower Automate（自動化）で積極的に行うことで、もっと業務効率できます。

記事の冒頭でも紹介しましたが、自動化ツールは、簡単にできます。

新しい機能は、すぐに使ってみましょう。

 

この記事は、Power Automate活用術の在庫管理の続きになります。

Kindle Unlimitedを使ったことが無い方は、初回３０日無料で読むことが出来ます。

 

>>Power Automate活用術を無料で読む