平素は格別のご愛顧をいただき、心から御礼申し上げます。
誠に勝手ながら以下の期間を夏季休業日とさせていただきます。
期間中の通常業務（CMS関連事業・Webサイト制作事業・CRM関連事業）は休業となります。


休業期間：2026年8月11(火)〜8月16日(日) 迄

休業中に頂いたお問い合わせについては、休業期間終了後に順次回答させていただきます。
ご迷惑をおかけしますが、ご了承のほどよろしくお願いいたします。

※コワーキングスペースの休業日については、ベースキャンプ名古屋のWebサイトをご覧ください。

6月の3日間、去年に引き続き、SANU 2nd Home for Business を利用して社員旅行に行ってきました。今年の行き先は、奄美大島です！

1日目

奄美自然観察の森

SANU 2nd Home 奄美大島1st

ナイトサファリツアー

夜はゆっくりと食事を楽しむチームとナイトサファリツアーに参加するチームに分かれて行動。ナイトサファリツアーではジープに乗ってガイドの説明をききながら、さまざまな野性動物を観察しました。アマミノクロウサギはもちろん、お昼に聞いた謎の鳴き声の主、リュウキュウアカショウビンにも遭遇してテンションが上りました。

2日目

金作原原生林散策トレッキング

マングローブカヌー体験

3日目

奄美パーク

奄美大島での3日間、非常に楽しく、チームの親睦も深まりました。フレッシュな気持ちで今年後半のお仕事に取り組んでまいります！

4月1日（水）に、2026年度入社式が行われ、フロントエンドエンジニアとして 山中 弥琴（やまなか みこと）さんを迎え入れました。

実は山中さんと私たちの出会いは、今から約半年前の2025年夏に遡ります。
最初は3日間の短期インターンからのスタートでした。その後、今年の春まで長期インターンとして、熱心に業務に取り組んでくれました。

入社式では、少し緊張しながらも、インターン時より一層たくましくなった山中さんの表情が印象的でした。
地道な努力を積み重ね、一つひとつスキルを自分のものにしていく姿を間近で見てきたからこそ、今日という日を迎えられた喜びもひとしおです。

新しいメンバーと共に、より一層パワーアップしたアップルップルを今後ともよろしくお願いいたします！

この記事では、a-blog cms のブロックエディターで生成されるコードブロックに、アクセシビリティに配慮したコピーボタンを追加する実装方法をご紹介します。

ブロックエディターのHTML構造を理解する

a-blog cms のブロックエディターは Tiptapを使用しており、コードブロックは以下のようなシンプルなHTMLとして出力されます。

<div class="column-block-editor">
  <pre>// ここにコードが入ります</pre>
</div>

HTML構造の解説

• <pre> タグ：コードブロックの本体
• <div class="column-block-editor">：ラップしている div タグ

このラップ用の div タグは、system/_layouts/unit.html の @section(block-editor) で定義されており、任意で追加できます。標準でこのクラスが付与されている理由は以下の通りです。

• ブロックエディター内に限定したスタイル制御が容易
• ユニット毎に要素を明確に分けられる

アクセシビリティに配慮した実装方法

完全なコード

以下が、アクセシビリティに配慮したコピーボタンを追加するためのJavaScriptコードです。

const preElements = document.querySelectorAll('.column-block-editor pre');

if (preElements.length === 0) return;

function addCopyButton(codeBlock) {
  // 既にラップされている場合はスキップ
  if (codeBlock.parentElement.classList.contains('code-block-wrapper')) {
    return;
  }

  // コピーボタンを作成
  const button = document.createElement('button');
  button.type = 'button';
  button.className = 'code-copy-button';
  button.textContent = 'コピー';
  button.setAttribute('aria-label', 'コードをコピー');

  // ライブリージョンを作成（スクリーンリーダーへの通知用）
  const liveRegion = document.createElement('span');
  liveRegion.className = 'visually-hidden';
  liveRegion.setAttribute('role', 'status');
  liveRegion.setAttribute('aria-live', 'polite');
  liveRegion.setAttribute('aria-atomic', 'true');

  // ボタンのクリックイベント
  button.addEventListener('click', async () => {
    try {
      const code = codeBlock.textContent;
      await navigator.clipboard.writeText(code);

      // コピー成功のフィードバック
      button.textContent = 'コピーしました!';
      button.setAttribute('aria-label', 'コードをコピーしました');
      liveRegion.textContent = 'コードをクリップボードにコピーしました';

      // 2秒後に元に戻す
      setTimeout(() => {
        button.textContent = 'コピー';
        button.setAttribute('aria-label', 'コードをコピー');
        liveRegion.textContent = '';
      }, 2000);
    } catch (error) {
      button.textContent = 'エラー';
      button.setAttribute('aria-label', 'コピーに失敗しました');
      liveRegion.textContent = 'コピーに失敗しました。もう一度お試しください';

      setTimeout(() => {
        button.textContent = 'コピー';
        button.setAttribute('aria-label', 'コードをコピー');
        liveRegion.textContent = '';
      }, 2000);
    }
  });

  // pre要素をラップするコンテナを作成
  const wrapper = document.createElement('div');
  wrapper.className = 'code-block-wrapper';
  const parent = codeBlock.parentNode;
  parent.insertBefore(wrapper, codeBlock);
  wrapper.appendChild(codeBlock);
  wrapper.appendChild(button);
  wrapper.appendChild(liveRegion);
}

// 各 pre 要素に対してコピーボタンを追加
preElements.forEach(codeBlock => {
  addCopyButton(codeBlock);
});

コードの処理フロー

1. コードブロックの検出

const preElements = document.querySelectorAll('.column-block-editor pre');
if (preElements.length === 0) return;

ページ内のすべてのコードブロック（pre タグ）を取得します。コードブロックが存在しない場合は処理を終了します。

2. 重複チェック

if (codeBlock.parentElement.classList.contains('code-block-wrapper')) {
  return;
}

既にコピーボタンが追加されている場合はスキップします。これにより、同じコードブロックに複数のボタンが追加されるのを防ぎます。

3. コピーボタンの作成

const button = document.createElement('button');
button.type = 'button';
button.className = 'code-copy-button';
button.textContent = 'コピー';
button.setAttribute('aria-label', 'コードをコピー');

アクセシビリティのポイント：

• type="button": フォーム内で使用された場合の意図しない送信を防止
• aria-label: スクリーンリーダーがボタンの目的を明確に読み上げられるようにする
• textContent: 視覚的なラベルを提供

4. ライブリージョンの作成

const liveRegion = document.createElement('span');
liveRegion.className = 'visually-hidden';
liveRegion.setAttribute('role', 'status');
liveRegion.setAttribute('aria-live', 'polite');
liveRegion.setAttribute('aria-atomic', 'true');

ライブリージョンとは：

ライブリージョンは、ページの内容が動的に変更されたときに、その変更をスクリーンリーダーユーザーに自動的に通知するための仕組みです。

各属性の役割:

• role="status"：ステータスメッセージであることを示す
• aria-live="polite"：現在の読み上げを中断せず、終了後に通知する
• aria-live="assertive"と異なる点：緊急性が低いメッセージに適している
• aria-atomic="true"：内容全体を読み上げる（部分的ではなく）

なぜボタンに aria-live を付けないのか：

ボタンに直接 aria-live を設定することも技術的には可能ですが、以下の理由から推奨されません。

• ボタンは「操作する要素」であり、「状態を通知する要素」ではない
• フォーカスがボタンにある状態では通知が不安定になる場合がある
• 役割を分離することで、より確実でメンテナンスしやすいコードになる

5. クリップボードへのコピー機能

button.addEventListener('click', async () => {
  try {
    const code = codeBlock.textContent;
    await navigator.clipboard.writeText(code);

    // 視覚的フィードバック
    button.textContent = 'コピーしました!';
    button.setAttribute('aria-label', 'コードをコピーしました');

    // スクリーンリーダーへの通知
    liveRegion.textContent = 'コードをクリップボードにコピーしました';

    // 2秒後に元に戻す
    setTimeout(() => {
      button.textContent = 'コピー';
      button.setAttribute('aria-label', 'コードをコピー');
      liveRegion.textContent = '';
    }, 2000);
  } catch (error) {
    button.textContent = 'エラー';
    button.setAttribute('aria-label', 'コピーに失敗しました');
    liveRegion.textContent = 'コピーに失敗しました。もう一度お試しください';

    setTimeout(() => {
      button.textContent = 'コピー';
      button.setAttribute('aria-label', 'コードをコピー');
      liveRegion.textContent = '';
    }, 2000);
  }
});

アクセシビリティのポイント：

1. 視覚的フィードバック：button.textContent の変更で、視覚ユーザーに結果を通知
2. aria-label の動的更新：スクリーンリーダーユーザーがボタンに再フォーカスした際に、正確な状態を伝える
3. ライブリージョンによる通知：フォーカス位置に関わらず、操作結果をスクリーンリーダーユーザーに通知
4. 状態のリセット：2秒後に元の状態に戻すことで、再試行が可能

try-catch を使用する理由：

navigator.clipboard.writeText() は以下の状況で失敗する可能性があります。

• HTTPS でない環境（http ページ）
• ユーザーがクリップボードへのアクセスを拒否している
• 一部の古いブラウザでの非対応
• iframe内での実行制限

try-catch により、エラーが発生してもアプリケーション全体がクラッシュせず、ユーザーに適切なフィードバックを提供できます。

6. DOM構造の再構築

const wrapper = document.createElement('div');
wrapper.className = 'code-block-wrapper';
const parent = codeBlock.parentNode;
parent.insertBefore(wrapper, codeBlock);
wrapper.appendChild(codeBlock);
wrapper.appendChild(button);
wrapper.appendChild(liveRegion);

コードブロック、ボタン、ライブリージョンを包含する wrapper div を作成し、以下のような構造に変更します。

変更前：

<div class="column-block-editor">
  <pre>...</pre>
</div>

変更後：

<div class="column-block-editor">
  <div class="code-block-wrapper">
    <pre>...</pre>
    <button type="button" class="code-copy-button" aria-label="コードをコピー">
      コピー
    </button>
    <span class="visually-hidden" role="status" aria-live="polite" aria-atomic="true">
    </span>
  </div>
</div>

これにより、コードブロックとボタン、ライブリージョンを一つのコンテナで管理でき、CSS でのスタイリングが容易になります。

スタイリング

基本的なCSS

コピーボタンを右上に配置し、ライブリージョンを視覚的に非表示にする CSS です。

.code-block-wrapper {
  position: relative;
}

.code-copy-button {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 12px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.code-copy-button:hover {
  background-color: #e0e0e0;
}

.code-copy-button:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* スクリーンリーダー専用: 視覚的に非表示だが読み上げ可能 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.code-copy-button:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* マウスクリック時はアウトラインを非表示 */
.code-copy-button:focus:not(:focus-visible) {
  outline: none;
}

重要な注意点：

ライブリージョンを視覚的に非表示にする際、display: none や visibility: hidden を使用すると、スクリーンリーダーからも隠れてしまいます。.visually-hidden クラスを使用することで、視覚的にのみ非表示にし、スクリーンリーダーからはアクセス可能な状態を保ちます。

アクセシビリティのチェックリスト

この実装が満たしているアクセシビリティ要件:

• ✅ キーボード操作：ボタンは Tab キーでフォーカス可能、Enter/Space キーで操作可能
• ✅ スクリーンリーダー対応：aria-label とライブリージョンで適切な情報提供
• ✅ 視覚的フィードバック：ボタンのテキスト変更で操作結果を表示
• ✅ 音声フィードバック：ライブリージョンでスクリーンリーダーに通知
• ✅ エラーハンドリング：失敗時にも適切なフィードバック
• ✅ フォーカスインジケーター：キーボード操作時に視覚的なフォーカス表示
• ✅ セマンティックHTML：適切な要素と属性の使用

まとめ

このスクリプトを使用することで、a-blog cms のブロックエディターで生成されるすべてのコードブロックに、アクセシビリティに配慮したコピーボタンを自動的に追加できます。

主要なアクセシビリティ機能：

1. ボタンの明示的なタイプ指定：type="button" でフォーム送信を防止
2. aria-label：スクリーンリーダーユーザーにボタンの目的を伝える
3. ライブリージョン：動的な変更を自動的に通知
4. 視覚的フィードバック：すべてのユーザーに操作結果を提供
5. 適切なエラーハンドリング：失敗時も明確なフィードバック

これにより、アクセシビリティが考慮できた快適に使用できる実装となっています。

今年もよろしくお願いいたします。