本格的にお勉強開始！
序章にも書きましたが、Kintone ＋ カレンダーPlus という組み合わせで、なかなか使いやすい
施設の予約スケジュール表を利用しています。が、Cybozu からまさかの実質的な値上げ通知が！
Kintone は現在最低契約数の 5ユーザーで利用していて、それでも十分すぎるのですが、
改定後は最低契約数が10ユーザーとなり、倍額に！ この経費節約の折に、なんてこったい！
と、云うことで…、お手製の施設スケジュール表を自社でなんとか開発して動かせないものかと
考え始めることになりましたが、またこれ敷居が高い！
これを実現するには、フロントエンド、バックエンド、データベース、これらを連携させるノウハウが
必要なのです！ しかも初心者な私に。 理解がむずかしい！！
※外部アクセスでのセキュリティ面では Kintone に依存し続けるのもあり、なんですけれどもね…。
まぁ、ダメで元々、ノウハウの蓄積かねて悪あがきをしてみてやよう、と勉強開始。
まずは連携方法を理解するための簡単なサンプルプログラムを組ませてみました。perplexity に。
そもそも フロントエンド / バックエンド / データベース って何？
これこそ初心者には詳しく説明が必要なのですが、これを記事にすると長くなるので、
現時点ではかなり端折ります。ゴメンナサイ。
とりあえず、施設スケジュールのようなシステムでは必要な「３種の神器」といったところ。
簡単に説明だけします。
フロントエンド： 主にWebブラウザからのアクセスに反応して表示を司る部分。
一方的に情報を見せるだけなら、これだけでいいです。
バックエンド： Webブラウザに入力された情報をデータベースなどのサーバへ受け渡し、
サーバから返ってきたデータをWebブラウザに戻す部分。裏方さん的役目。
データベース： データを蓄え管理するシステム
主流なサーバには大抵「mariaDB」というデータベースが組み込まれています。
これらを連携させて初めてできるシステムは数多くあります。難しいんですが避けては通れません。
でも、検索方法がよくないのか、それらしい記事に巡り合うことができませんでした。
だったら AI にでも頼って、仕組みから理解できるプログラムを試してみるか、と。
まずはデータベースからデータを引き出して表示させてみる
■サンプル：
データベースに登録されている商品リストから商品をリストアップし表示するだけの簡単なサンプル。
データベースがない、もしくはデータが空の場合、作成してサンプル商品データを登録する。
■プログラムの構成：
/XAMPP/
├── config/ ※このフォルダは Webから見えずアクセスできない セキュリティ的に重要なデータの置き場
├── config.php # データベース接続情報
└── init-db.php # データベース初期化
├── htdocs/ ※このフォルダ以下がWebからアクセス可能
├── index.php # フロントエンド
├── script.js # JavaScript data.php とやりとりして JSON形式でデータをもらう
└── php/
└── data.php # バックエンド (データベースからデータを取り出しJSON形式に)
■フロントエンド
index.php
init-db.php と script.js に連携
<?php
// データベース初期化処理を別ファイルに分離
require_once '../config/init-db.php';
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>商品一覧</title>
</head>
<body>
<h1>商品リスト</h1>
<div id="product-list"></div>
<script src="script.js"></script>
</body>
</html>script.js
バックエンドの data.php と、JSON形式でデータのやりとりを行なう
document.addEventListener('DOMContentLoaded', () => {
fetch('php/data.php')
.then(response => response.json())
.then(data => {
const container = document.getElementById('product-list');
data.forEach(product => {
container.innerHTML += `
<div class="product">
<h3>${product.name}</h3>
<p>価格: ${product.price}円</p>
</div>
`;
});
})
.catch(error => console.error('Error:', error));
});init-db.php
データベースがなければ、もしくはデータベース内のデータがなければ、作成する。
データベースアクセス情報を config.php からもらう。
<?php
require_once 'config.php';
try {
$pdo = new PDO("mysql:host=" . DB_HOST, DB_USER, DB_PASS);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// データベース作成
$pdo->exec("CREATE DATABASE IF NOT EXISTS " . DB_NAME);
$pdo->exec("USE " . DB_NAME);
// テーブル作成
$pdo->exec("CREATE TABLE IF NOT EXISTS products (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(50),
price DECIMAL(10,2)
)");
// テストデータを追加(重複挿入防止)
$stmt = $pdo->query("SELECT COUNT(*) FROM products");
if ($stmt->fetchColumn() == 0) {
$pdo->exec("INSERT INTO products (name, price) VALUES
('商品A', 1000),
('商品B', 2980)");
}
} catch (PDOException $e) {
die("初期化エラー: " . $e->getMessage());
}
?>config.php
データベースへアクセスする為の情報を設定。
実際の運用ではパスワードは必須ですが、テスト環境につき空欄です。
<?php
define('DB_HOST', '127.0.0.1');
define('DB_NAME', 'example_db');
define('DB_USER', 'root');
define('DB_PASS', '');
?>
■バックエンド
data.php
config.php からデータベースアクセス情報をもらい、データを取り出してJSON化、script.js へ渡す。
<?php
header("Content-Type: application/json; charset=UTF-8");
require_once '../../config/config.php';
try {
$pdo = new PDO(
"mysql:host=" . DB_HOST . ";dbname=" . DB_NAME,
DB_USER,
DB_PASS
);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// 商品データ取得
$stmt = $pdo->query("SELECT id, name, price FROM products");
echo json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));
} catch (PDOException $e) {
http_response_code(500);
echo json_encode(['error' => $e->getMessage()]);
}
set_error_handler(function($severity, $message, $file, $line) {
throw new ErrorException($message, 0, $severity, $file, $line);
});
?>賢いAI の perplexity を使ってコードを書かせるのですが、こちらの物言いがよくないのか
動作するコードはすんなりとは完成しませんでした。
試行錯誤を重ねた上記各コードはきちんと動作しました。
動作結果：
これで基礎がわかれば次は応用です。 今回はこの辺で。