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
アクセス数の多いページでは、データをどこかにキャッシュする等の工夫をするとよいと思います。
0件のコメント