이번에는 Kintone Portal Designer의 샘플 템플릿인 HTML을 편집해 독자적인 포털 화면을 만들고 싶다.

샘플 템플릿의 Import

Kintone Portal Designer에서는 미리 준비된 샘플 템플릿 몇 개에서 Import 설계를 할 수 있습니다.먼저 Import 버튼을 클릭합니다.

이번에는 라벨을 바꿀 수 있는 디자인으로 디자인하고 싶어요.
advance-3tab을 선택하고 Import 를 클릭합니다.

Save 버튼과 왼쪽 상단 버튼을 클릭하는 것을 잊지 마세요.

HTML 편집

Kintone Portal Designer의 샘플 템플릿을 사용하면 HTML만 편집하면 오리지널 포털 화면을 만들 수 있다.

탭의 HTML

탭에서 선택한 HTML은 다음과 같습니다.class 중 advanced-tab--active의 탭은 처음 표시할 때 선택한 탭입니다.
처음에 표시할 태그class에 advanced-tab--active를 설정합니다.

<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이 변경되었습니다.

<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>

이렇게 하면 탭의 제목이 수정됩니다.

태그 삭제

아래와 같이 삭제할 탭만 삭제합니다.
※ 쉽게 이해할 수 있도록 리뷰를 해봤어요.

<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는 이렇게 삭제되었다.

태그 추가

탭에서 레이블 행을 복사하고 붙여넣기를 추가합니다.

<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>

※ 태그를 추가할 때는 태그 내용도 함께 추가해야 합니다.

태그 내용

탭의 내용은 다음과 같이 탭 제목 아래에 있는 행(9행~)에 설정됩니다.
정렬은 탭의 제목 순서와 일치합니다.
초기 디스플레이에서 태그 1을 열려면 class에 추가advanced-panel-contents--active합니다.

<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에 지정된 요소의 아래 레이어
이런 느낌은 클라스를 지정했다.

태그 내용

Tab1의 내용만 많이 써서 이렇게 사용할 수 있습니다.
그래프를 채울 수도 있다.

<!-- 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>

외관과 코드는 모두 이런 느낌에 대응한다.

총결산

Kintone 포털은 HTML, CSS, 자바스크립트에 따라 자유도가 높다.
샘플 템플릿 이외에 디자인 템플릿 갤러리도 있으니 시도해 보세요!