kintoneで簡単CMS

江田篤史

2018年10月29日 10:24

CMS(コンテンツ管理システム)は、ホームページの内容を手軽に管理できるシステムです。ホームページ内の更新頻度が高い箇所にCMSを利用すると、いちいちサーバーの管理者に変更を依頼する必要がなくなり、業務の効率化が図れます。通常CMSはデータの入力側と出力側の両側のシステムを作る必要がありますが、kintoneを利用すると出力側を作るだけで簡単にCMSを構築できます。

サンプル

kintoneのアプリに保存された画像を、外部サイトにスライドショーとして表示します。

フォーム設定

コード

本サンプルでは、PHPを利用しております。お試しの場合は、PHPが動作するサーバーをご利用ください。

PHP

・sample.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>マイホームページ</title>
  <link rel="stylesheet" href="sample.css">
</head>
<body>
  <h1>マイホームページ</h1>
  <div id="slideshow">
<?php
define('DOMAIN', '****.cybozu.com'); //kintoneのドメイン
define('APP', ****); //アプリ番号
define('API_TOKEN', '****'); //閲覧権限を持ったAPIトークン
$context = stream_context_create([
  'http' => [
    'method' => 'GET',
    'header' => 'X-Cybozu-API-Token:'.API_TOKEN."\r\n"
  ]
]);
foreach(json_decode(file_get_contents('https://'.DOMAIN.'/k/v1/records.json?app='.APP.'&query='.urlencode('表示 in ("on")'), false, $context), true)['records'] as $record){
?>
    <img src="data:image/jpeg;base64,<?= base64_encode(file_get_contents('https://'.DOMAIN.'/k/v1/file.json?fileKey='.$record['画像']['value'][0]['fileKey'], false, $context)) ?>">
<?php
}
?>
  </div>
  <script src="sample.js"></script>
</body>
</html>

JavaScript

・sample.js

(function(){
  'use strict';
  document.getElementById('slideshow').children[0].classList.add('on');
  setInterval(function(){
    var now = document.querySelector('#slideshow .on');
    if(now.nextElementSibling){
      now.nextElementSibling.classList.add('on');
    }else{
      document.getElementById('slideshow').children[0].classList.add('on');
    }
    now.classList.remove('on');
  }, 2000);
}());

CSS

・sample.css

#slideshow{
  text-align: center;
}
#slideshow img{
  width: 500px;
}
#slideshow img:not(.on){
  display: none;
}

今回は画像を例にしましたが、テキスト等も同様にkintoneによって管理可能です。

kintone REST APIには制限が設けられています。
https://jp.cybozu.help/k/ja/admin/limitation/limit.html
アクセス数の多いページでは、データをどこかにキャッシュする等の工夫をするとよいと思います。

kintoneで簡単CMS

サンプル

フォーム設定

コード

PHP

JavaScript

CSS

0件のコメント