はじめに
この記事はJspreadsheet Advent Calendar 2024の11日目の記事です。
Jspreadsheetを今知ったところですが、
とても便利そうなので、ChatGPT先生と一緒に試してみます。
ChatGPT先生に教えてもらう
なるほど、なるほど。便利そう。
JSON、CSVのあたりが気になる。
サンプルを作ってもらう
j1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>APIデータをJspreadsheetに表示</title>
<!-- Jspreadsheet CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jspreadsheet-ce/dist/jspreadsheet.css" />
<script src="https://cdn.jsdelivr.net/npm/jspreadsheet-ce/dist/jspreadsheet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <!-- Axios (API用) -->
</head>
<body>
<h1>APIデータを取得して表示</h1>
<!-- スプレッドシートを表示する場所 -->
<div id="spreadsheet"></div>
<script>
// JSONPlaceholder APIからデータを取得
async function fetchData() {
try {
// ユーザーデータを取得
const response = await axios.get('https://jsonplaceholder.typicode.com/users');
const users = response.data;
// データをスプレッドシート用に整形
const data = users.map(user => [
user.id,
user.name,
user.username,
user.email,
user.address.city
]);
// Jspreadsheetを作成
jspreadsheet(document.getElementById('spreadsheet'), {
data: data,
columns: [
{ type: 'number', title: 'ID', width: 50 },
{ type: 'text', title: 'Name', width: 150 },
{ type: 'text', title: 'Username', width: 100 },
{ type: 'text', title: 'Email', width: 200 },
{ type: 'text', title: 'City', width: 120 }
],
pagination: 5, // ページごとに表示する行数
search: true // 検索機能を有効化
});
} catch (error) {
console.error('データの取得に失敗しました', error);
}
}
// データ取得を実行
fetchData();
</script>
</body>
</html>
あ。そうだ、CSVで保存するボタンを付けてもらおう。
j1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>APIデータをJspreadsheetに表示 & CSV保存</title>
<!-- Jspreadsheet CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jspreadsheet-ce/dist/jspreadsheet.css" />
<script src="https://cdn.jsdelivr.net/npm/jspreadsheet-ce/dist/jspreadsheet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <!-- Axios (API用) -->
</head>
<body>
<h1>APIデータを取得して表示</h1>
<!-- CSV保存ボタン -->
<button id="saveCsvBtn">CSVで保存</button>
<!-- スプレッドシートを表示する場所 -->
<div id="spreadsheet"></div>
<script>
let spreadsheetInstance;
// JSONPlaceholder APIからデータを取得
async function fetchData() {
try {
const response = await axios.get('https://jsonplaceholder.typicode.com/users');
const users = response.data;
// データをスプレッドシート用に整形
const data = users.map(user => [
user.id,
user.name,
user.username,
user.email,
user.address.city
]);
// Jspreadsheetを作成
spreadsheetInstance = jspreadsheet(document.getElementById('spreadsheet'), {
data: data,
columns: [
{ type: 'number', title: 'ID', width: 50 },
{ type: 'text', title: 'Name', width: 150 },
{ type: 'text', title: 'Username', width: 100 },
{ type: 'text', title: 'Email', width: 200 },
{ type: 'text', title: 'City', width: 120 }
],
pagination: 5, // ページごとに表示する行数
search: true // 検索機能を有効化
});
} catch (error) {
console.error('データの取得に失敗しました', error);
}
}
// CSV保存ボタンの動作
document.getElementById('saveCsvBtn').addEventListener('click', () => {
// JspreadsheetのデータをCSVとしてエクスポート
spreadsheetInstance.download({
filename: 'spreadsheet-data.csv',
delimiter: ','
});
});
// データ取得を実行
fetchData();
</script>
</body>
</html>
いざブラウザで開く
あれれ？表が表示されない。
元データはこれなのに何も表示されない。
https://jsonplaceholder.typicode.com/users
Chromeの開発者ツールで確認。
Jspreadsheet自体の読み込みに失敗している様子。
ChatGPTとの対話で、しばし格闘したが改善せず。
１日目の記事を見に行く。
CDNのところに記載されている通りにやれば良さそう。
j2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>APIデータをJspreadsheetに表示</title>
<!-- CSSライブラリ -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jspreadsheet-ce/dist/jspreadsheet.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsuites/dist/jsuites.min.css" type="text/css" />
<!-- JavaScriptライブラリ -->
<script src="https://cdn.jsdelivr.net/npm/jspreadsheet-ce/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsuites/dist/jsuites.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<h1>APIデータを取得して表示</h1>
<button id="saveCsvBtn">CSVで保存</button>
<div id="spreadsheet"></div>
<script>
let spreadsheetInstance;
// JSONPlaceholder APIからデータを取得
async function fetchData() {
try {
const response = await axios.get('https://jsonplaceholder.typicode.com/users');
const users = response.data;
// データをJspreadsheet用に整形
const data = users.map(user => [
user.id, user.name, user.username, user.email, user.address.city
]);
// Jspreadsheetを初期化
spreadsheetInstance = jspreadsheet(document.getElementById('spreadsheet'), {
data: data,
columns: [
{ type: 'number', title: 'ID', width: 50 },
{ type: 'text', title: 'Name', width: 150 },
{ type: 'text', title: 'Username', width: 100 },
{ type: 'text', title: 'Email', width: 200 },
{ type: 'text', title: 'City', width: 120 }
],
pagination: 5,
search: true
});
} catch (error) {
console.error('データの取得に失敗しました:', error);
}
}
// CSV保存ボタン
document.getElementById('saveCsvBtn').addEventListener('click', () => {
spreadsheetInstance.download({
filename: 'spreadsheet-data.csv',
delimiter: ','
});
});
fetchData();
</script>
</body>
</html>
いざ再実行！
やったね！
CSVで保存を押す。
CSVファイルがダウンロードされた！。
開いてみよう。
素晴らしいです。
右下の「２」を押すと
いい感じ。
右上の「Search」に「Ka」と入れると
セルに「Ka」が含まれる行だけが表示された！ 便利。
以上、「ChatGPT先生にJspreadsheetを教えてもらう」でした。