【kintone活用法の発明】「マニュアルをいちいち開く」無駄をゼロに。アプリ一覧画面に”更新可能な”説明書を埋め込む方法

<!--
 Copyright (c) 2025 森田ユウゴ https://moritayugo.com/
 License: GPL-3.0 (改変・再配布時は同じライセンスで公開してください)
 https://www.gnu.org/licenses/gpl.html
-->

<div class="view-manual">
  
  <div class="wiki-toolbar">
    <button id="wiki-reload-btn" type="button" class="kintone-btn">
      <svg viewBox="0 0 24 24">
        <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
      </svg>
      最新の情報に更新
    </button>
  </div>

  <div id="wiki-content">
    <div class="intro">
      <p>読み込んでいます...</p>
    </div>
  </div>
  
  <div id="wiki-error" class="error-box" style="display:none;"></div>

  <footer>
    © <a href="https://moritayugo.com/">Yugo Morita Dev.</a>
  </footer>
</div>

// 2025/12/13 更新版 from Yugo Morita

/*
 * Copyright (c) 2025 森田ユウゴ https://moritayugo.com/
 * License: GPL-3.0 (改変・再配布時は同じライセンスで公開してください)
 * https://www.gnu.org/licenses/gpl.html
 */

(function() {
  // 【セキュリティ】意図しないグローバル変数の汚染を防ぐためStrictモードを使用
  'use strict';

  const CONFIG = {
    TARGET_APP_ID: XXX,
    TARGET_RECORD_ID: YYY,
    // 【トラブルシューティング】ここが間違っているとデータが取得できても表示が空になります
    RICH_TEXT_FIELD_CODE: 'fieldname', 
    // 変更不要
    TARGET_DOM_ID: 'wiki-content'
  };

  // キャッシュキー（TARGET_APP_IDとTARGET_RECORD_IDから自動生成）
  CONFIG.CACHE_KEY = 'wiki_manual_cache_app' + CONFIG.TARGET_APP_ID + '_record' + CONFIG.TARGET_RECORD_ID;

  kintone.events.on('app.record.index.show', function(event) {
    const container = document.getElementById(CONFIG.TARGET_DOM_ID);
    const reloadBtn = document.getElementById('wiki-reload-btn');
    const errorContainer = document.getElementById('wiki-error');

    if (!container) return;

    const renderContent = function(htmlContent) {
      if (htmlContent) {
        // 【セキュリティ】リッチテキストの仕様上 innerHTML を使用します。
        // ※ 信頼できる管理者が作成したレコードのみを表示対象としています。
        container.innerHTML = htmlContent;
      } else {
        container.innerHTML = '<div class="intro"><p>コンテンツが空です。</p></div>';
      }
      if (errorContainer) errorContainer.style.display = 'none';
    };

    const fetchFromApi = function() {
      container.innerHTML = '<div class="intro"><p>最新データを取得中...</p></div>';
      
      const body = {
        'app': CONFIG.TARGET_APP_ID,
        'id': CONFIG.TARGET_RECORD_ID
      };

      // 【セキュリティ】HTTPS通信 (kintone.api.url利用) と セッション認証 (kintone.api利用) を使用
      // パスワードやAPIトークンをコードに埋め込まないことで安全性を確保しています。
      kintone.api(kintone.api.url('/k/v1/record.json', true), 'GET', body, function(resp) {
        // 【トラブルシューティング】指定したフィールドコードが存在するかチェック
        if (resp.record && resp.record[CONFIG.RICH_TEXT_FIELD_CODE]) {
            const richTextValue = resp.record[CONFIG.RICH_TEXT_FIELD_CODE].value || '';
            
            renderContent(richTextValue);

            // 【セキュリティ】永続的なlocalStorageではなく、タブを閉じれば消えるsessionStorageを使用
            // 万が一、共用PC等でログアウトし忘れても、ブラウザを閉じればデータは消去されます。
            try {
              sessionStorage.setItem(CONFIG.CACHE_KEY, richTextValue);
            } catch (e) {
              console.warn('Cache full');
            }
        } else {
            console.error('Field Code Error: ' + CONFIG.RICH_TEXT_FIELD_CODE);
            container.innerHTML = '';
            if (errorContainer) {
                errorContainer.style.display = 'block';
                // 【セキュリティ】XSS対策のため、エラーメッセージ表示には innerText を使用
                errorContainer.innerText = '設定エラー: フィールドコード "' + CONFIG.RICH_TEXT_FIELD_CODE + '" が見つかりません。';
            }
        }

      }, function(error) {
        console.error(error);
        container.innerHTML = '';
        if (errorContainer) {
          errorContainer.style.display = 'block';
          // 【セキュリティ】エラー詳細をHTMLとして解釈させない
          errorContainer.innerText = 'データの取得に失敗しました。権限やID設定を確認してください。';
        }
      });
    };

    // 【セキュリティ】外部からの汚染された入力(URLパラメータ等)を使わず、ブラウザ内キャッシュのみ確認
    const cachedData = sessionStorage.getItem(CONFIG.CACHE_KEY);

    if (cachedData) {
      console.log('Displaying from cache');
      renderContent(cachedData);
    } else {
      fetchFromApi();
    }

    if (reloadBtn) {
      reloadBtn.onclick = function() {
        sessionStorage.removeItem(CONFIG.CACHE_KEY);
        fetchFromApi();
      };
    }

    const createRecordUrl = function() {
      // 【セキュリティ】現在のURLからドメインを取得（外部入力に依存しない）
      const origin = location.origin;
      
      // 【セキュリティ】https://またはhttp://で始まることを確認
      if (!origin || (!origin.startsWith('https://') && !origin.startsWith('http://'))) {
        console.error('Invalid origin:', origin);
        return null;
      }
      
      const recordUrl = origin + '/k/' + CONFIG.TARGET_APP_ID + '/show#record=' + CONFIG.TARGET_RECORD_ID;
      return recordUrl;
    };

    const createRecordLinkButton = function() {
      const recordUrl = createRecordUrl();
      if (!recordUrl) {
        console.warn('Failed to create record URL');
        return;
      }

      // 【セキュリティ】createElementで要素を作成（innerHTMLを使用しない）
      const recordLinkBtn = document.createElement('a');
      recordLinkBtn.href = recordUrl;
      // 【セキュリティ】innerTextを使用してXSSを防ぐ
      recordLinkBtn.innerText = '✎';
      recordLinkBtn.setAttribute('aria-label', 'レコード画面を開く');
      
      // 更新ボタンと同じクラスを適用（CSSでスタイル定義）
      if (reloadBtn && reloadBtn.className) {
        recordLinkBtn.className = reloadBtn.className;
      } else {
        recordLinkBtn.className = 'wiki-record-link-btn';
      }

      if (reloadBtn && reloadBtn.parentNode) {
        reloadBtn.parentNode.insertBefore(recordLinkBtn, reloadBtn.nextSibling);
      } else if (container && container.parentNode) {
        container.parentNode.insertBefore(recordLinkBtn, container);
      }
    };

    createRecordLinkButton();
    
    return event;
  });

})();

/* 2025/12/13 更新版 from Yugo Morita */

/*
 * Copyright (c) 2025 森田ユウゴ https://moritayugo.com/
 * License: GPL-3.0 (改変・再配布時は同じライセンスで公開してください)
 * https://www.gnu.org/licenses/gpl.html
 */

@charset "UTF-8";

/* メインコンテナ */
.view-manual {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  padding: 40px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  position: relative;
}

.view-manual * {
  box-sizing: border-box;
}

/* ツールバーエリア */
.wiki-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e3e7e8;
}

/* kintoneライクなスマートボタン */
.kintone-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #f7f9fa;
  border: 1px solid #e3e7e8;
  color: #3498db;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  margin-left: 8px;
}

.kintone-btn:hover {
  background-color: #e2e6e8;
  color: #217dbb;
}

.kintone-btn:active {
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
  transform: translateY(1px);
}

/* アイコン(SVG)のスタイル */
.kintone-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* エラー表示エリア */
.error-box {
  color: #e74c3c;
  margin-top: 20px;
  font-weight: bold;
  background: #fde8e7;
  padding: 10px;
  border-radius: 4px;
}

/* 編集ボタン等の追加ボタンスタイル */
.wiki-record-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #f7f9fa;
  border: 1px solid #e3e7e8;
  color: #3498db;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 8px;
  text-decoration: none;
}
.wiki-record-link-btn:hover {
  background-color: #e2e6e8;
  color: #217dbb;
}