Chot Memo - Usage

§ Ex.4 Reminder ( Regular notification ) 例 4 リマインダー（定期通知）

This feature automatically opens a note and notifies you at the set time. It is also possible to configure repeated notifications.
# When using the reminder, it is recommended not to minimize the main screen but to keep it always placed on the desktop.
設定した時刻になったらメモを自動で開いて通知する機能です。繰り返し通知する設定も可能です。
※リマインダー使用時は、メイン画面をアイコン化せずに、常にデスクトップ上に配置しておくことをお勧めします。

† Operation steps 操作順

As an example of using the reminder (regular notification),

for periodic break reminders

is introduced here.

For instance, let’s think about not forgetting regular break times.
You enter the break time into a note and press the reminder button.

Set the start time of the reminder and set the interval to one hour.

The reminder time is displayed in the window title. After that, as long as you keep the main screen open, when the time comes, the note will automatically open and notify you.

If you do not set an interval, it is also possible to configure a one-time notification.

You can also set reminders on two notes, for example to notify the start of focused work and then the end of the work session.
リマインダー（定期通知）を使用する例として

定期的な休憩の通知

に使用する場合を紹介します。

例えば、定期的な休憩時間を忘れないことを考えます。
メモに休憩時間と入力し、リマインダーボタンを押します。

リマインダーを開始する時間を設定し、周期を１時間に設定します。

リマインダー時間は、ウィンドウタイトルに表示されます。あとは、メイン画面を開いておけば、時間になったらメモが自動で開いて時間を通知してくれます。

周期の時間を設定しなければ、一度だけの通知設定も可能です。

2つのメモにリマインダーを設定し、集中して作業開始する時間と作業終了を通知する使い方などもできます。

† Run HTML & JavaScript HTML & JavaScript 実行

Reminder (periodic notification) allows you to run HTML & JavaScript.
For simple code, it’s faster to have AI write it for you.

Example) Flashing

The following code is an example that makes the memo background flash.

<html><head>
  <script>
    function flashBackcolor() {
      let colors = ["#ffcccc", "#ccffcc", "#ccccff", "#ffffcc", "#ccffff"];
      let index = 0;
      setInterval(function() {
        document.body.style.backgroundColor = colors[index];
        index = (index + 1) % colors.length;
      }, 1000);
    }
  </script>
</head>
<body onLoad="flashBackcolor()">
<h3>The background flashes.</h3>
</body></html>

Example) Play a sound

The following code is an example that plays a sound.

<html><head>
  <script>
    function playSound() {
      const audio = new Audio("https://chotmemo.xyz/sound/reminder_melody3.wav");
      audio.volume = 0.1;

      let count = 0;
      let times = 3;

      audio.addEventListener('ended', () => {
        count++;
        if (count < times) {
          audio.currentTime = 0;
          audio.play();
        }
      });

      audio.play();
    }
  </script>
</head>
<body onLoad="playSound()">
<h3>A sound will play.</h3>
</body></html>

By writing a script that uses the Audio object, you can make a sound play at the set time.
However, you need to register the site in advance from "edge://settings/privacy/sitePermissions/allPermissions/mediaAutoplay".

Sample sounds.
reminder_melody1
reminder_melody2
reminder_melody3

Example) Fetch data from a Web API

The following code is an example that fetches data from a Web API.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>USD/JPY Fetch Demo</title>
<style>
  body { font-family: system-ui, sans-serif; padding: 1rem; }
  #rate { font-size: 2rem; margin: 1rem 0; }
  #status { color: #555; }
</style>
<script>
  async function fetchUsdJpy() {
    const url = "https://api.frankfurter.app/latest?from=USD&to=JPY";
    const statusEl = document.getElementById("status");
    const rateEl = document.getElementById("rate");

    try {
      statusEl.textContent = "Updating…";
      const res = await fetch(url);
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const data = await res.json();

      const rate = data?.rates?.JPY;
      if (typeof rate !== "number") throw new Error("Failed to get rate");
      rateEl.textContent = `USD/JPY: ${rate.toFixed(3)}`;

      // Display current local time down to the second
      const now = new Date();
      const timeStr = now.toLocaleTimeString("ja-JP", { hour12: false });
      statusEl.textContent = `Last updated: ${data.date} ${timeStr}`;
    } catch (err) {
      statusEl.textContent = `Fetch failed: ${err.message}`;
    }
  }

  function startPolling() {
    fetchUsdJpy();                    // Fetch once initially
    setInterval(fetchUsdJpy, 10000);  // Fetch again every 10 seconds
  }
</script>
</head>
<body onload="startPolling()">
  <h3>USD/JPY Rate</h3>
  <div id="rate">USD/JPY: ---.---</div>
  <div id="status">Waiting…</div>
</body>
</html>

When using a Web API, please follow the terms and rules of the API you are using.
リマインダー（定期通知）時に、HTML & JavaScriptを実行することができます。
簡単なコードなら AI に書いてもらった方が早いです。

例）点滅する

次のコードはメモの背景を点滅する例です。

<html><head>
  <script>
    function flashBackcolor() {
      let colors = ["#ffcccc", "#ccffcc", "#ccccff", "#ffffcc", "#ccffff"];
      let index = 0;
      setInterval(function() {
        document.body.style.backgroundColor = colors[index];
        index = (index + 1) % colors.length;
      }, 1000);
    }
  </script>
</head>
<body onLoad="flashBackcolor()">
<h3>背景が点滅します。</h3>
</body></html>

例）音を鳴らす

次のコードは、音を鳴らす例です。

<html><head>
  <script>
    function playSound() {
      const audio = new Audio("https://chotmemo.xyz/assets/sound/reminder_melody3.wav");
      audio.volume = 0.1;

      let count = 0;
      let times = 3;

      audio.addEventListener('ended', () => {
        count++;
        if (count < times) {
          audio.currentTime = 0;
          audio.play();
        }
      });

      audio.play();
    }
  </script>
</head>
<body onLoad="playSound()">
<h3>音が鳴ります。</h3>
</body></html>

Audio オブジェクトを使ったスクリプトを書くことで、定刻に音を鳴らすことができますが、事前に "edge://settings/privacy/sitePermissions/allPermissions/mediaAutoplay" からサイトを登録する必要があります。

サウンドのサンプル。
reminder_melody1
reminder_melody2
reminder_melody3

例）Web APIでデータを取得する

次のコードは、Web API でデータを取得する例です。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>USD/JPY Fetch Demo</title>
<style>
  body { font-family: system-ui, sans-serif; padding: 1rem; }
  #rate { font-size: 2rem; margin: 1rem 0; }
  #status { color: #555; }
</style>
<script>
  async function fetchUsdJpy() {
    const url = "https://api.frankfurter.app/latest?from=USD&to=JPY";
    const statusEl = document.getElementById("status");
    const rateEl = document.getElementById("rate");

    try {
      statusEl.textContent = "更新中…";
      const res = await fetch(url);
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      const data = await res.json();

      const rate = data?.rates?.JPY;
      if (typeof rate !== "number") throw new Error("レート取得失敗");
      rateEl.textContent = `USD/JPY: ${rate.toFixed(3)}`;

      // 現在のローカル時刻を「秒」まで表示
      const now = new Date();
      const timeStr = now.toLocaleTimeString("ja-JP", { hour12: false });
      statusEl.textContent = `最終更新: ${data.date} ${timeStr}`;
    } catch (err) {
      statusEl.textContent = `取得失敗: ${err.message}`;
    }
  }

  function startPolling() {
    fetchUsdJpy();                    // 最初に1回取得
    setInterval(fetchUsdJpy, 10000);  // 10秒ごとに再取得
  }
</script>
</head>
<body onload="startPolling()">
  <h3>ドル円レート</h3>
  <div id="rate">USD/JPY: ---.---</div>
  <div id="status">待機中…</div>
</body>
</html>

Web APIを使う場合は、使用するAPIの規約やルールに沿って使用してください。