kintoneで簡単CMS

kintone 開発相談
1

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"\>\<?phpdefine('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"]]);foreach(json\_decode(file\_get\_contents('https://'.DOMAIN.'/k/v1/records.json?app='.APP.'&query='.urlencode('表示 in ("on")'), false, $context), true)['records'] as $record){?\><imgsrc="data:image/jpeg;base64,\<?= base64\_encode(file\_get\_contents('https://'.DOMAIN.'/k/v1/file.json?fileKey='.$record['画像']['value'][0]['fileKey'], false, $context)) ?\>">\<?php}?\></div>
  <scriptsrc="sample.js"></script>
</body>
</html>

JavaScript

・sample.js

(function(){'use strict';document.getElementById('slideshow').children[0].classList.add('on');setInterval(function(){varnow=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;
}#slideshowimg{width:500px;
}#slideshowimg:not(.on){display:none;
}

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

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