ダッシュボード機能:パーツの追加:クイックアクセス
## 概要
[ダッシュボード](/ja/manual/dashboard)にクイックアクセスを追加します。設定したサイト([フォルダ](/ja/manual/folder)、[テーブル](/ja/manual/table)、[Wiki](/ja/manual/wiki)、[ダッシュボード](/ja/manual/dashboard))へのリンクを一覧表示します。
## 設定手順
### 全般タブ
![image](https://pleasanter.org/binaries/2916e7d69c9f41a5a05dc5c88e0094bf)
|項目名|説明|
|:---|:---|
|タイトル|パーツの名称です。|
|タイトルを表示する|タイトルを表示させる場合にチェックします。|
|サイトID|表示したいサイトID、サイト名、サイトグループ名をカンマ区切りで入力します。入力した順番で表示します。トップ画面を指定する場合は0を入力してください。JSON形式での入力も可能です。|
|レイアウト|クイックアクセスパーツのレイアウトを選択します。|
|非同期読み込みしない|このチェックボックスにチェックを付けた場合、非同期読み込みの設定に関わらず非同期読み込みを行いません。非同期読み込みの設定については[ダッシュボード機能:パーツの追加](/ja/manual/dashboard-add-parts)を参照ください。|
|CSS|クイックアクセスパネルの要素にCSSを適用する場合に使用します。CSSクラス名を指定することで、各項目に任意のクラス名を指定し、[スタイル](/ja/manual/table-management-style)を適用することができます。|
### アクセス制御タブ
![image](https://pleasanter.org/binaries/036b468061eb4c28901aa2aa651ca51a)
クイックアクセスに対する参照権限を設定します。参照権限のないユーザがダッシュボードを開いた場合、このパーツは非表示となります。
<a id="site-icon"></a>
## 表示内容
### サイトのアイコン
サイトIDで指定したサイトの種類に応じてサイト名の前に自動的にアイコンが表示されます。後述する[JSON形式によるサイトIDの指定](#site-icon-by-json)でアイコンを変更することができます。
|サイト種別|アイコン|
|:---|:---|
|フォルダ|![image](https://pleasanter.org/binaries/485198d6f34f4229872b9b55a087259d)|
|期限付きテーブル|![image](https://pleasanter.org/binaries/d6ccb0b6175d451e94d71af88a97b69d)|
|記録テーブル|![image](https://pleasanter.org/binaries/a25dace04a264a1cbd139df50a30c7f1)|
|Wiki|![image](https://pleasanter.org/binaries/d8cb486a33e04a12aa6aba6d9a799273)|
|ダッシュボード|![image](https://pleasanter.org/binaries/36f7ddc76ca84df782e3de1154304247)|
![image](https://pleasanter.org/binaries/3088a408795c441aa13f90417eb6d6ca)
### レイアウト
レイアウトは縦方向、横方向のいずれかを選択します。
|レイアウト|内容|
|:---|:---|
|縦方向|サイトを縦に並べて表示します。パーツ自体の高さを狭くすると縦スクロールバーが表示します。|
|横方向|サイトを横に並べて表示します。パーツ自体の幅を狭くすると折り返して表示します。|
* レイアウト:縦方向
![image](https://pleasanter.org/binaries/4d5e9aac490249dabbc0ea9ae998fa8c)
* レイアウト:横方向
![image](https://pleasanter.org/binaries/aae2389f509546f6b4d2c5632a0daf46)
<a id="site-icon-by-json"></a>
## JSON形式によるサイトID指定
JSON形式でサイトIDを指定することで、表示サイト毎にアイコンの変更やサイトごとにCSSを指定することができます。
|項目名|説明|
|:---|:---|
|Id|サイトIDを指定します。Urlが設定されていない場合は必須です。Urlが設定されている場合は無視されます|
|Url|任意のリンク先をURLで指定します。Idが設定されていない場合は必須です|
|Icon|サイト名の前に表示するアイコンを設定します。指定文字は[Material Symbols(※1)](#material-symbols)を参照してください。Iconは省略可能です。省略時は[サイトのアイコン](#site-icon)の内容で表示します|
|Css|cssのクラス名を設定します。あらかじめ「CSS」タブや「拡張CSS」にて指定したクラスに対してスタイルを設定してください。Cssは省略可能です|
|Title|ボタンのキャプションとして表示する文字列を設定します。Titleは省略可能です。省略時はサイトIDを指定した場合はサイト名、Urlを指定した場合はUrlが表示されます|
|ViewMode|表示するサイトのViewModeを指定します。ViewModeは省略可能です。詳細は下記ViewModeの項目を参照してください|
|OpenInNewTab|リンク先を新しいタブで開く場合にtrueを設定します。OpenInNewTabは省略可能です。省略時はfalseとなります|
### ViewMode
ViewModeに指定可能な値は下記の通りです。
|表示|ViewMode|
|:---|:---|
|一覧|Index|
|カレンダー|Calendar|
|クロス集計|Crosstab|
|ガントチャート|Gantt|
|バーンダウンチャート|Burndown|
|時系列チャート|Timeseries|
|分析チャート|Analy|
|カンバン|Kamban|
|画像ライブラリ|Imagelib|
### 設定例
1つのサイトに対し[カンバン](/ja/manual/table-kanban-chart)で開くボタンと、[カレンダー](/ja/manual/table-calendar)で開くボタンを追加する例です。
また、どちらも「新しいタブで開く」設定としています。
##### JSON
```
[
{
"Id": 123,
"Title": "WBS(カンバン)",
"ViewMode": "Kamban",
"OpenInNewTab": true
},
{
"Id": 123,
"Title": "WBS(カレンダー)",
"ViewMode": "Calendar",
"OpenInNewTab": true
}
]
```
![image](https://pleasanter.org/binaries/1ae930f6910d404585aea15fe1ffe9a7)
サイトIDおよびCSSを以下のように設定した場合の表示結果は下記の通りです。
##### JSON
```
[
{
"Id": 123,
"Icon": "check_circle",
"Css": "bgcolorPink"
},
{
"Id": 456,
"Icon": "check_circle"
},
{
"Id": 789,
"Css": "bgcolorPink"
}
]
```
##### CSS
```
.bgcolorPink {
background-color: pink;
}
```
##### 表示結果
![image](https://pleasanter.org/binaries/4263bee057b04e4282e8b6a41bcd0282)
<a id="material-symbols"></a>
### ※1 Material Symbolsからの指定文字検索方法
JSON形式によるサイトIDの指定においてIconに設定する文字は以下手順で確認してください。
1. [Material Symbols](https://fonts.google.com/icons)のページを開く
![image](https://pleasanter.org/binaries/314622ec222b444eb3091c9cb4538c96)
1. 利用したいアイコンをクリックする
![image](https://pleasanter.org/binaries/4df30fc6a80e419d9b6663eedd48e414)
1. 画面右に表示する「Inserting the icon」欄のspanタグに囲まれた文字列をIconに設定する。
![image](https://pleasanter.org/binaries/42db7ceb711b4d98a164d65219f0fcbc)
## 対応バージョン
|対応バージョン|内容|
|:--|:--|
|1.4.10.0 以降|JSON形式によるサイトID指定にUrl、Title、ViewMode、OpenInNewTabを追加|
## 関連情報
<div id="ManualList"><ul><li><a href="/ja/manual/folder">フォルダ機能</a><span>2023/07/28 up</span></li></ul></article>
<ul><li><a href="/ja/manual/table">テーブル機能</a><span>2023/04/12 up</span></li>
<li><a href="/ja/manual/table-calendar">テーブル機能:レコードのカレンダー表示</a><span>2024/10/10 up</span></li>
<li><a href="/ja/manual/table-kanban-chart">テーブル機能:レコードのカンバン表示</a><span>2024/06/07 up</span></li></ul></article>
<ul><li><a href="/ja/manual/table-management-calendar">テーブルの管理:カレンダー</a><span>2024/06/17 up</span></li>
<li><a href="/ja/manual/table-management-kanban">テーブルの管理:カンバン</a><span>2024/06/17 up</span></li></ul></article>
<ul><li><a href="/ja/manual/table-management-style">テーブルの管理:スタイル</a><span>2024/10/08 up</span></li></ul></article>
<ul><li><a href="/ja/manual/wiki">Wiki機能</a><span>2023/05/18 up</span></li></ul></article>
<ul><li><a href="/ja/manual/dashboard">ダッシュボード機能</a><span>2024/06/21 up</span></li>
<li><a href="/ja/manual/dashboard-add-parts">ダッシュボード機能:パーツの追加</a><span>2024/06/21 up</span></li>
<li><a href="/ja/manual/dashboard-view">ダッシュボード機能:ビューの保存種別</a><span>2024/06/21 up</span></li>
<li><a href="/ja/manual/dashboard-calendar">ダッシュボード機能:パーツの追加:カレンダー</a><span>2024/07/01 up</span></li>
<li><a href="/ja/manual/dashboard-timeline">ダッシュボード機能:パーツの追加:タイムライン</a><span>2024/06/21 up</span></li>
<li><a href="/ja/manual/dashboard-custom">ダッシュボード機能:パーツの追加:カスタム</a><span>2024/06/21 up</span></li>
<li><a href="/ja/manual/dashboard-customhtml">ダッシュボード機能:パーツの追加:カスタムHTML</a><span>2024/06/21 up</span></li></ul></article>
<ul><li><a href="/ja/manual/style">開発者向け機能:スタイル</a><span>2023/05/18 up</span></li></ul></article></div><input id="SearchTextHidden" type="hidden" value="" />