Web基礎知識リファレンス

FileMaker開発者のための HTML・CSS・JavaScript 入門

🏗️

HTML — ページの構造を作る

構造

HTMLとは

HTMLはWebページの「骨格」を定義する言語です。タグ（<tag>）で囲むことで要素を作ります。FileMakerのWebビューアも、内部ではHTMLをレンダリングしています。

基本構造

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">               <!-- 文字コード（必須）-->
  <meta name="viewport" content="width=device-width">
  <title>ページタイトル</title>
  <style> /* ここにCSS */ </style>
</head>
<body>
  <!-- ここに表示内容 -->
  <h1>見出し</h1>
  <p>段落テキスト</p>
  <script> /* ここにJavaScript */ </script>
</body>
</html>
FileMakerでの注意Webビューアに渡す場合も同じ構造が基本です。<!DOCTYPE html>から始めると現代的なHTML5として動作します。

よく使うタグ

タグ用途
<div>ブロック要素（レイアウト用）
<span>インライン要素（テキスト装飾）
<h1>〜<h6>見出し（数字が大きいほど小さい）
<p>段落テキスト
<canvas>Chart.jsの描画領域
<script>JavaScriptを記述
<style>CSSを記述

属性（attributes）

タグに追加情報を付けます。

<!-- id: 要素を1つ特定する -->
<canvas id="myChart"></canvas>

<!-- class: 複数要素に同じスタイル -->
<div class="chart-box"></div>

<!-- style: インラインCSS -->
<div style="height:300px"></div>

Chart.js用のcanvas配置

<!-- コンテナ（高さが必要）-->
<div style="width:100%; height:360px;">
  <canvas id="myChart"></canvas>
</div>

<!-- NG: コンテナなし（高さが0になりグラフが表示されない）-->
<canvas id="myChart"></canvas>
よくある失敗<canvas>の親要素に高さが指定されていないと、responsive:trueのChartが高さ0で描画されます。
🎨

CSS — 見た目を整える

デザイン

CSSの書き方

/* セレクタ { プロパティ: 値; } */

/* 要素指定 */
body { margin: 0; font-family: sans-serif; }

/* IDで指定（#）*/
#myChart { width: 100%; }

/* クラスで指定（.）*/
.chart-box { height: 360px; background: #fff; }

/* 複数プロパティ */
.container {
  width:   100%;
  height:  100vh;  /* ビューポートの高さ100% */
  padding: 16px;
}

よく使うプロパティ

プロパティ意味
width / height幅・高さ
margin外側の余白
padding内側の余白
background背景色・画像
color文字色
font-size文字サイズ
display表示形式
position配置方法

Flexboxで横並び

.row {
  display:         flex;
  gap:             16px;      /* 間隔 */
  align-items:     center;   /* 縦中央揃え */
  justify-content:space-between;
}
.row > div {
  flex: 1; /* 均等に広がる */
}
FileMakerのWebビューアはフレックスボックスを完全サポートしています。

FileMakerのWebビューアで使う基本CSS

/* Webビューア全体にグラフをフィットさせる */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { width: 100%; height: 100vh; overflow: hidden; }
#container { width: 100%; height: 100%; }
⚡

JavaScript — 動きを付ける

動作

変数（var / let / const）

// const: 変わらない値（推奨）
const title = "月別売上";

// let: 後で変わる値
let score = 0;
score = 100; // 再代入OK

// var: 古い書き方（非推奨）
var old = "避ける";

データ型

const num   = 42;           // 数値
const str   = "こんにちは"; // 文字列
const bool  = true;        // 真偽値
const arr   = [10,20,30]; // 配列
const obj   = {           // オブジェクト
  name: "山田",
  score: 85
};
const empty = null;       // 空

関数

// 関数宣言
function greet(name) {
  return "こんにちは " + name;
}
const msg = greet("山田"); // "こんにちは 山田"

// アロー関数（短い書き方）
const add = (a, b) => a + b;
add(3, 4); // 7

条件分岐・繰り返し

// if文
if (score >= 80) {
  console.log("合格");
} else {
  console.log("再挑戦");
}

// 配列のループ
[10,20,30].forEach(v => {
  console.log(v);
});

// map: 変換して新しい配列
const doubled = [1,2,3].map(n => n * 2);

JSON（データ形式）

FileMakerとJavaScriptの間でデータをやりとりするのに必須の形式です。

// FileMakerのJSONSetElementが生成した文字列をJavaScriptで使う
const jsonStr = '{"labels":["1月","2月"],"values":[100,200]}';

// 文字列 → オブジェクトに変換
const data = JSON.parse(jsonStr);
console.log(data.labels);  // ["1月","2月"]
console.log(data.values);  // [100, 200]

// オブジェクト → 文字列に変換
const str = JSON.stringify({ name: "山田", score: 85 });
FileMakerの JSONSetElement が生成した文字列はそのまま JSON.parse() に渡せます。
🔍

DOM操作 — HTML要素をJSで操作する

操作

要素を取得する

// IDで取得（1つ）
const canvas = document.getElementById('myChart');

// クラスで取得（複数）
const boxes = document.querySelectorAll('.box');

// CSSセレクタで1つ取得
const first = document.querySelector('#app h2');

要素を変更する

const el = document.getElementById('title');

// テキストを変更
el.textContent = "新しいタイトル";

// スタイルを変更
el.style.color = "#003b82";
el.style.display = "none"; // 非表示

// クラスを追加・削除
el.classList.add("active");
el.classList.remove("active");

DOMContentLoaded — HTML読み込み後に実行

// HTMLが全部読み込まれてからJSを実行する（重要！）
document.addEventListener('DOMContentLoaded', function() {
  // ここでcanvasを取得してChart.jsを初期化する
  const ctx = document.getElementById('myChart');
  new Chart(ctx, { /* 設定 */ });
});
読み込み順が大事Chart.jsの <script> が new Chart() より後にあると「Chart is not defined」エラーになります。必ずChart.jsを先に読み込んでください。
⏳

非同期処理 — データ取得に必要

応用

なぜ非同期が必要か

外部からJSONデータを取得したり、時間のかかる処理をしたりする場合、処理が終わるまで待つ必要があります。Promiseやasync/awaitはその待ち方を記述する仕組みです。

❌ NG（結果が来る前に使おうとする）
fetch('data.json')
  .then(res => res.json());

// ここではまだデータが来ていない
console.log(data); // undefined
✅ OK（await で待ってから使う）
async function loadData() {
  const res  = await fetch('data.json');
  const data = await res.json();
  console.log(data); // ✓ データあり
}
loadData();

FileMaker.PerformScript（FileMakerへの通知）

// WebビューアのJSからFileMakerスクリプトを呼ぶ
// ※ FileMaker.PerformScript は非同期（戻り値を直接受け取れない）

function notifyFileMaker(eventName, payload) {
  FileMaker.PerformScript(
    "JS受信スクリプト",           // FileMakerスクリプト名
    JSON.stringify({ eventName, payload }) // JSON文字列で渡す
  );
}

// 呼び出し例（グラフのクリックイベント）
notifyFileMaker("barClick", { label: "1月", value: 100 });
📊

Chart.js 基本パターン

Chart.js

最小構成（棒グラフ）

<!-- HTML -->
<div style="height:300px">
  <canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>

<!-- JavaScript -->
<script>
  new Chart(document.getElementById('myChart'), {
    type: 'bar',
    data: {
      labels: ['1月', '2月', '3月'],
      datasets: [{
        label: '売上',
        data: [120, 190, 150],
        backgroundColor: '#2ea7e0'
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false  // コンテナに高さを合わせる
    }
  });
</script>

グラフ種別

type値グラフ種類
'bar'縦棒グラフ
'bar' + indexAxis:'y'横棒グラフ
'line'折れ線グラフ
'pie'円グラフ
'doughnut'ドーナツグラフ

グラフを更新する

// インスタンスを変数に保存しておく
const chart = new Chart(ctx, config);

// データを差し替えて再描画
chart.data.datasets[0].data = [50,80,120];
chart.data.labels = ['A','B','C'];
chart.update(); // 必ずupdateを呼ぶ

// 新しいChartを作る前は必ずdestroyを呼ぶ
chart.destroy();
🔗

FileMaker連携パターン

FileMaker

$$変数でHTMLを組み立てる（基本パターン）

// ─ FileMaker計算式 ─────────────────────────────

// Step1: JSONデータをグローバル変数に格納
$$chartData = JSONSetElement ( "{}" ;
  [ "type"                  ; "bar"         ; JSONString  ] ;
  [ "data.labels"           ; $$labels      ; JSONArray   ] ;
  [ "data.datasets[0].data" ; $$values      ; JSONArray   ] ;
  [ "data.datasets[0].label"; "売上"        ; JSONString  ] ;
  [ "options.responsive"    ; True          ; JSONBoolean ] ;
  [ "options.maintainAspectRatio" ; False   ; JSONBoolean ]
)

// Step2: HTMLを$$変数に格納
$$html =
  "<!DOCTYPE html><html><head>" &
  "<meta charset='UTF-8'>" &
  "<style>*{margin:0;box-sizing:border-box}" &
  "body{height:100vh}" &
  "#c{width:100%;height:100%}</style>" &
  "<script>" & $$chartJsSrc & "</script>" &
  "</head><body>" &
  "<div id='c'><canvas id='myChart'></canvas></div>" &
  "<script>new Chart(document.getElementById('myChart')," &
    $$chartData &
  ");</script></body></html>"

// Step3: Webビューアに設定
Set Web Viewer [ Object: "グラフビューア" ;
  URL: "data:text/html," & $$html ]

FileMaker → JS（グラフ更新）

// Webビューアで既にChartが表示されている場合
// JavaScriptの関数を直接呼び出して更新

Perform JavaScript in Web Viewer [
  Object Name: "グラフビューア" ;
  Function Name: "updateChartData" ;  ※ 関数名は任意。プロジェクトで統一すること
  Parameters: $$chartData
]

// JS側（Webビューア内）— 関数名はFileMaker側と一致させる
function updateChartData(jsonStr) {
  const cfg = JSON.parse(jsonStr);
  chart.data = cfg.data;
  chart.update();
}

JS → FileMaker（イベント通知）

// グラフクリック時にFileMakerへ通知する例

const chart = new Chart(ctx, {
  type: 'bar',
  data: { /* ... */ },
  options: {
    onClick: (evt, items) => {
      if (!items.length) return;
      const idx = items[0].index;
      const val = chart.data.datasets[0].data[idx];
      const lbl = chart.data.labels[idx];
      // FileMakerに通知
      FileMaker.PerformScript(
        "グラフクリック受信",
        JSON.stringify({ label: lbl, value: val })
      );
    }
  }
});

💡 実装時のチェックリスト

  • Chart.js本体（$$chartJsSrc）はテキストフィールドに保存して読み込む
  • maintainAspectRatio: false でコンテナの高さに追従させる
  • HTML文字列内のダブルクォート（"）はシングルクォート（'）に置き換えるかエスケープする
  • FileMakerのWebビューア設定で「JavaScriptによるFileMakerスクリプトの実行を許可する」を有効にする
  • Chart.jsの <script> タグは new Chart() の前に記述する