GridJs におけるメッセージツイトーストのUI外観のカスタマイズ方法

GridJsのためのカスタムトーストガイド

概要

GridJsは柔軟なカスタムトースト通知システムを提供しており、デフォルトのトーストメッセージを独自の通知実装に置き換えることが可能です。このガイドでは、アプリケーションのニーズに応じたトースト通知のカスタマイズ方法をさまざまなアプローチで示します。

Basic Usage

Simple Alert Example

The most basic custom toast can be implemented using the native alert() function:

const xs = x_spreadsheet('#spreadsheet');

// Define custom toast function
function myToast(title, content, callback) {
  alert(`${title}: ${content}`);
  if (callback) callback();
}

// Set custom toast
xs.customToast(myToast);

パラメータ:

title（文字列）：トースト通知のタイトル
content（文字列）：トーストメッセージの内容
callback（関数、省略可能）：トーストが閉じられた後に実行されるコールバック関数

Integration Examples

1. Beautiful Custom Toast

Create a visually appealing toast notification without external dependencies:

function beautifulToast(title, content, callback) {
  // Create dimmer overlay
  const dimmer = document.createElement('div');
  Object.assign(dimmer.style, {
    position: 'fixed',
    top: 0, left: 0, right: 0, bottom: 0,
    background: 'rgba(0,0,0,0.5)',
    zIndex: 9999
  });

  // Create toast element
  const toast = document.createElement('div');
  Object.assign(toast.style, {
    position: 'fixed',
    top: '50%', left: '50%',
    transform: 'translate(-50%, -50%)',
    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    color: 'white',
    padding: '20px 30px',
    borderRadius: '10px',
    boxShadow: '0 10px 40px rgba(0,0,0,0.3)',
    zIndex: 10000,
    minWidth: '300px'
  });

  toast.innerHTML = `
    <div style="display: flex; justify-content: space-between; margin-bottom: 10px; font-weight: bold;">
      <span>${title}</span>
      <span class="close" style="cursor: pointer;">×</span>
    </div>
    <div>${content}</div>
  `;

  const remove = () => {
    document.body.removeChild(toast);
    document.body.removeChild(dimmer);
    if (callback) callback();
  };

  toast.querySelector('.close').onclick = remove;
  dimmer.onclick = remove;

  document.body.appendChild(dimmer);
  document.body.appendChild(toast);

  // Auto-dismiss after 3 seconds
  setTimeout(remove, 3000);
}

xs.customToast(beautifulToast);

特徴:

グラデーション背景
モーダルオーバーレイ
クリックして閉じる
3秒後に自動的に閉じる
閉じるボタン

2. Toastr Library Integration

Integrate the popular Toastr library for toast notifications.

Prerequisites:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

実装:

xs.customToast((title, content, callback) => {
  toastr.options = {
    closeButton: true,
    progressBar: true,
    positionClass: 'toast-top-right',
    timeOut: 3000
  };
  toastr.info(content, title);
  if (callback) callback();
});

カスタマイズオプション:

closeButton: 閉じるボタンを表示
progressBar: カウントダウンのプログレスバーを表示
positionClass: トーストの位置（右上、左下など）を制御
timeOut: 自動閉鎖の持続時間（ミリ秒）

3. SweetAlert2 Integration

Use SweetAlert2 for beautiful, customizable alert dialogs.

Prerequisites:

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

実装:

xs.customToast((title, content, callback) => {
  Swal.fire({
    title: title,
    html: content,
    icon: 'info',
    confirmButtonText: 'OK'
  }).then(() => {
    if (callback) callback();
  });
});

使用可能なアイコン:

成功
エラー
警告
情報
質問

4. Vue + Element UI

Integration with Vue.js and Element UI’s notification component.

new Vue({
  el: '#app',
  mounted() {
    const xs = x_spreadsheet('#spreadsheet');

    xs.customToast((title, content, callback) => {
      this.$notify({
        title: title,
        message: content,
        type: 'info',
        duration: 3000,
        onClose: callback
      });
    });
  }
});

通知タイプ:

成功
警告
情報
エラー

5. React + Ant Design

Integration with React and Ant Design’s message component.

import { message } from 'antd';

const App = () => {
  useEffect(() => {
    const xs = x_spreadsheet('#spreadsheet');

    xs.customToast((title, content, callback) => {
      message.info({
        content: `${title}: ${content}`,
        duration: 3,
        onClose: callback
      });
    });
  }, []);

  return <div id="spreadsheet"></div>;
};

代替のAnt Designコンポーネント:

message.success()
message.error()
message.warning()
notification.open() (より複雑な通知用)

Advanced Use Cases

6. Logging and Analytics

Combine custom toast with logging and analytics tracking:

xs.customToast((title, content, callback) => {
  // Log to console
  console.log(`[Toast] ${title}:`, content);

  // Track in analytics system
  if (window.analytics) {
    analytics.track('toast_shown', {
      title: title,
      content: content,
      timestamp: new Date().toISOString()
    });
  }

  // Display custom notification
  showMyCustomToast(title, content, callback);
});

利用ケース:

デバッグログ記録
ユーザー行動の追跡
エラー監視
パフォーマンスメトリクス

7. Mobile-Friendly Toast

Create a mobile-optimized toast notification:

function mobileToast(title, content, callback) {
  const toast = document.createElement('div');
  Object.assign(toast.style, {
    position: 'fixed',
    bottom: '20px',
    left: '50%',
    transform: 'translateX(-50%)',
    background: '#323232',
    color: 'white',
    padding: '12px 24px',
    borderRadius: '24px',
    fontSize: '14px',
    zIndex: 10000,
    maxWidth: '80%',
    textAlign: 'center',
    boxShadow: '0 4px 12px rgba(0,0,0,0.3)'
  });

  toast.textContent = `${title}: ${content}`;
  document.body.appendChild(toast);

  setTimeout(() => {
    document.body.removeChild(toast);
    if (callback) callback();
  }, 2000);
}

xs.customToast(mobileToast);

モバイル最適化機能：

ボトム配置（親指に優しい）
パーセンテージ幅（最大80％）
短い持続時間（2秒）
大きなタップターゲット
オーバーレイなし（ブロックしない）

API Reference

`customToast(toastFunction)`

Sets a custom toast notification function for the spreadsheet instance.

Parameters:

toastFunction (Function | null): Custom toast function with signature (title, content, callback) => void
- Pass null to restore default toast behavior

Returns:

The spreadsheet instance (for method chaining)

Example:

// Set custom toast
xs.customToast(myToastFunction);

// Restore default
xs.customToast(null);

// Method chaining
xs.customToast(myToast)
  .loadData(data)
  .setActiveSheet(0);

Best Practices

1. Always Handle the Callback

Ensure you call the callback function if provided, as it may contain important cleanup or continuation logic:

function myToast(title, content, callback) {
  // ... show toast ...
  if (callback) callback();  // ✅ Always call
}

2. 非ブロッキング通知

より良いユーザー体験のために、モーダルアラートの代わりに非ブロッキングのトースト通知を使用してください：

// ❌ Blocks user interaction
alert(`${title}: ${content}`);

// ✅ Non-blocking
showToastNotification(title, content);

3. 適切な継続時間

コンテンツの長さに基づいて適切な自動消去時間を選択してください：

const duration = content.length > 50 ? 5000 : 3000;
setTimeout(remove, duration);

4. アクセシビリティ

カスタムトーストがアクセシブルであることを確認してください：

toast.setAttribute('role', 'alert');
toast.setAttribute('aria-live', 'polite');
toast.setAttribute('aria-atomic', 'true');

5. エラーハンドリング

スプレッドシートが壊れないように、トースト機能をtry-catchでラップしてください：

xs.customToast((title, content, callback) => {
  try {
    // Your toast implementation
    myCustomToast(title, content);
  } catch (error) {
    console.error('Toast error:', error);
  } finally {
    if (callback) callback();
  }
});

6. リソースのクリーンアップ

DOM要素とイベントリスナーを常にクリーンアップしてください：

function myToast(title, content, callback) {
  const toast = document.createElement('div');
  // ... setup toast ...

  const remove = () => {
    document.body.removeChild(toast);
    // Clean up any event listeners
    toast.onclick = null;
    if (callback) callback();
  };

  document.body.appendChild(toast);
  setTimeout(remove, 3000);
}

7. 必要に応じてデフォルトに戻す

デフォルトのトースト動作を復元する方法を提供してください：

// Set custom toast
xs.customToast(myToast);

// Later, restore default
xs.customToast(null);

Troubleshooting

Toast Not Showing

Problem: Custom toast function is called but nothing appears.

Solutions:

Check z-index values (ensure they’re higher than spreadsheet elements)
Verify the toast element is appended to document.body
Check browser console for JavaScript errors

Callback Not Working

Problem: Operations after toast don’t execute.

Solution: Ensure you’re calling the callback function:

if (callback) callback();  // Don't forget this!

メモリリーク

問題： 多くのトースト通知の後、ページが遅くなる。

解決策: DOM要素とイベントリスナーのクリーンアップ:

const remove = () => {
  document.body.removeChild(toast);
  toast.onclick = null;  // Remove event listeners
  if (callback) callback();
};

モバイル表示の問題

問題: トーストの表示がモバイルデバイスで良くない。

解決策:

パーセンテージベースの幅を使用: maxWidth: '80%'
Add viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1">
相対フォントサイズを使用: fontSize: '14px'（固定ピクセルの代わりに）

GridJsを使ったコラボレーティブなExcelエディタの構築方法