【kintone】Kintone Portal Designer でサンプルテンプレートを編集してオリジナルポータルを作成する

今回は Kintone Portal Designer のサンプルテンプレートのHTMLを編集して独自のポータル画面を作って見ようと思います。

# サンプルテンプレートのImport

Kintone Portal Designerでは、いくつか予め準備されたサンプルテンプレートからデザインをImportすることができます。まずはImportボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/45b0abfa-acc7-9b7b-d2f1-cfb43cccbc30.png)

今回はタブ切り替えができるデザインにしたいと思います。
advance-3tabを選択してImportをクリックしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/06ee13a1-96f3-fdad-311d-f1c3103ebfde.png)

Saveボタンと左上のトグルボタンをクリックするのもお忘れなく。

# HTMLの編集

Kintone Portal Designer のサンプルテンプレートを使うと、HTMLを編集するだけでオリジナルのポータル画面が作成できます。

## タブのHTML

タブ選択のHTMLは以下のようになっています。
`class` に　`advanced-tab--active` があるタブが初期表示のときに選択されるタブになります。
初期表示させたいタブの `class` に `advanced-tab--active` を設定しておきましょう。

```html
<div id="tabs" class="advanced-tab-container">
  <button role="tab" class="advanced-tab advanced-tab--active" type="button" aria-expanded="true">Tab1</button>
  <button role="tab" class="advanced-tab" type="button" aria-expanded="false">Tab2</button>
  <button role="tab" class="advanced-tab" type="button" aria-expanded="false">Tab3</button>
</div>
```

### タブのタイトルの編集
3～7行目あたりの `</button>` の直前にある **Tab1～Tab3**を変更します。
**タブの名前1～タブの名前3** に変更してみました。

```html
<div id="tabs" class="advanced-tab-container">
  <button role="tab" class="advanced-tab advanced-tab--active" type="button" aria-expanded="true">タブの名前1</button>
  <button role="tab" class="advanced-tab" type="button" aria-expanded="false">タブの名前2</button>
  <button role="tab" class="advanced-tab" type="button" aria-expanded="false">タブの名前3</button>
</div>
```

このように、タブのタイトルが変更されます。
![032601.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/f88f276b-533f-357f-38c7-0919c2f088c2.png)


## タブの削除

以下のように、消したいタブの行を削除するだけです。
※分かりやすいようにコメントアウトしてみました。

```html
<div id="tabs" class="advanced-tab-container">
  <button role="tab" class="advanced-tab advanced-tab--active" type="button" aria-expanded="true">タブの名前1</button>
  <!-- <button role="tab" class="advanced-tab" type="button" aria-expanded="false">タブの名前2</button> -->
  <button role="tab" class="advanced-tab" type="button" aria-expanded="false">タブの名前3</button>
</div>
```

するとこのように**タブ2**が削除されます。
![032602.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/aefcf4c5-1c2c-48d3-4413-efd0963a42ea.png)

### タブの追加

タブを増やしたい時は、タブの行をコピーしてペーストし増やします。

```html
<div id="tabs" class="advanced-tab-container">
  <button role="tab" class="advanced-tab advanced-tab--active" type="button" aria-expanded="true">タブの名前1</button>
  <button role="tab" class="advanced-tab" type="button" aria-expanded="false">タブの名前2</button>
  <button role="tab" class="advanced-tab" type="button" aria-expanded="false">タブの名前3</button>
  <button role="tab" class="advanced-tab" type="button" aria-expanded="false">タブの名前4</button>
</div>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/757b0d1f-8446-977f-2dc9-913d69638bb5.png)

※タブを増やした場合、タブの中身も同時に追加する必要があります。

## タブの中身

タブの中身は、タブのタイトルよりも下の行（9行目あたり～）で設定されていて、こんな構成になっています。
並び順は、タブのタイトル順と一致しています。
タブ1を初期表示で開いていおきたい場合は、`class` に `advanced-panel-contents--active` を追加しておきましょう。

```html
<div class="advanced-panel-container">
  <!-- タブ1の内容 -->
  <div class="advanced-panel-contents advanced-panel-contents--active">
    ...
  </div>

  <!-- タブ2の内容 -->
  <div class="advanced-panel-contents">
    ...
  </div>

  <!-- タブ3の内容 -->
  <div class="advanced-panel-contents">
    ...
  </div>

  <!-- タブを追加した場合はタブ4の中身も追加します -->
  <!-- タブ4の内容 -->
  <div class="advanced-panel-contents">
    ...
  </div>
  
</div>
```

### タブの中身の構成

`class` に `advanced-panel-contents` が指定されている要素の下の階層は
こんな感じにclassが指定されます。
![032603.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/57b3f274-69fc-5428-a040-b418a975bf91.png)


### タブの中身

Tab1の中身だけ色々と書きましたがこんな感じに使うことができます。
グラフの埋め込みも可能です。

```html
<!-- Tab1の中身 -->
<div class="advanced-panel-contents advanced-panel-contents--active">
  <!-- 1行目 -->
  <div class="advanced-panel-contents-group">
    <!-- 1列目（左側） -->
    <section class="advanced-panel-contents-unit">
      <h3 class="advanced-heading1">お知らせ</h3>
      <h4 class="advanced-heading2">〇〇がXXです</h4>
      <p class="advanced-text">○月X日から〇〇がXXになります。</p>
    </section>
    <!-- 2列目（右側） -->
    <div class="advanced-panel-contents-unit">
      <h3 class="advanced-heading1">〇〇系アプリ</h3>
      <h4 class="advanced-heading2">〇〇をXXするアプリです</h4>
      <div class="advanced-list-container">
        <ul class="advanced-list">
          <li class="advanced-list-item">〇〇申請アプリ</li>
          <li class="advanced-list-item">XX申請アプリ</li>
          <li class="advanced-list-item">△△精算アプリ</li>
        </ul>
        <ul class="advanced-list">
          <li class="advanced-list-item">〇〇アプリ</li>
          <li class="advanced-list-item">XXアプリ</li>
          <li class="advanced-list-item">△△アプリ</li>
        </ul>
      </div>
    </div>
  </div>

  <!-- 2行目 -->
  <div class="advanced-panel-contents-group advanced-data">
    <!-- グラフ埋め込み -->
    <iframe width="1400" height="600" frameborder="0" src="https://{subdomain}.cybozu.com/k/302/report/portlet?report=5118339&amp;chartType=column&amp;stackType=stacked&amp;title=1"></iframe>
  </div>
</div>

<!-- Tab2の中身-->
<div class="advanced-panel-contents">
  <h3 class="advanced-heading1">Heading1</h3>
  <h4 class="advanced-heading2">Heading2</h4>
  <p class="advanced-text">Tab2 is under construction.</p>
  <p style="line-height:500px;">&nbsp;</p>
</div>

<!-- Tab3の中身-->
<div class="advanced-panel-contents">
  <h3 class="advanced-heading1">Heading1</h3>
  <h4 class="advanced-heading2">Heading2</h4>
  <p class="advanced-text">Tab3 is under construction.</p>
  <p style="line-height:500px;">&nbsp;</p>
</div>
```

見た目とコードはこんな感じに対応しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/d46192d1-3c1c-28ea-6769-4ac101df0650.png)


# まとめ
kintoneポータルはHTML、CSS、JavaScriptによって自由度が高いカスタマイズができるようです。
サンプルテンプレート以外にも、デザインテンプレートギャラリーもあるようですので、試してみてね！

https://developer.cybozu.io/hc/ja/articles/360029783812-kintone%E3%83%9D%E3%83%BC%E3%82%BF%E3%83%AB-%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%AE%E3%83%A3%E3%83%A9%E3%83%AA%E3%83%BC