CMSの見たまま編集機能の仕組み：JavaScriptで実現するドラッグ＆ドロップ💻

はじめに (対象読者・この記事でわかること)

この記事は、Web開発者、特にJavaScriptに興味がある方やCMSカスタマイズを検討している方を対象としています。プログラミングの基礎知識があることが前提となりますが、専門的な知識は必要ありません。

この記事を読むことで、CMSの見たまま編集機能がどのようにJavaScriptで実現されているか、ドラッグ＆ドロップの仕組みを理解できるようになります。具体的には、HTML5のドラッグ＆ドロップAPIの使い方、contenteditable属性の活用方法、編集内容の保存方法など、実際の実装に役立つ知識を習得できます。これにより、自社のCMSやブログツールに見たまま編集機能を実装する際の参考にすることができます。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - HTML/CSSの基本的な知識 - JavaScriptの基本的な文法とDOM操作の理解 - REST APIの基本的な概念

見たまま編集機能の概要と必要性

CMSの見たまま編集機能とは、HTMLやCSSの知識がなくても直感的にコンテンツを編集できる機能です。ドラッグ＆ドロップで要素の配置を変更したり、テキストを直接編集したりできるため、多くのCMSで採用されています。この機能は、コンテンツ制作者が専門知識がなくても簡単にウェブサイトを更新できるようにするための重要な要素です。

特に、非技術者向けのCMSでは必須の機能となっています。JavaScriptを用いたDOM操作やイベントハンドリングによって、このような直感的な編集体験を実現しています。代表的な実装例として、WordPressのGutenbergエディタやMicroCMSのビジュアルエディタなどが挙げられます。

見たまま編集機能を実現するための主な技術要素は、大きく分けて3つあります。1つ目はドラッグ＆ドロップ機能、2つ目はインライン編集機能、3つ目はコンテンツの保存と同期機能です。これらの要素を組み合わせることで、ユーザーが直感的にコンテンツを編集できる環境を構築できます。

見たまま編集機能の実装方法

見たまま編集機能の実装には、主に以下の要素が関係しています。ここでは、具体的な実装方法をステップバイステップで解説します。

ステップ1：ドラッグ＆ドロップの基本実装

まずは、ドラッグ＆ドロップの基本的な実装方法を見ていきましょう。HTML5のドラッグ＆ドロップAPIを利用することで、比較的簡単に実装できます。

Javascript

// ドラッグ可能な要素にイベントリスナーを追加
document.querySelectorAll('.draggable').forEach(item => {
  item.addEventListener('dragstart', handleDragStart);
  item.addEventListener('dragend', handleDragEnd);
});

// ドロップゾーンにイベントリスナーを追加
document.querySelectorAll('.dropzone').forEach(zone => {
  zone.addEventListener('dragover', handleDragOver);
  zone.addEventListener('drop', handleDrop);
});

// ドラッグ開始時の処理
function handleDragStart(e) {
  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', this.innerHTML);
  this.classList.add('dragging');
}

// ドラッグ終了時の処理
function handleDragEnd(e) {
  this.classList.remove('dragging');
}

// ドラッグオーバー時の処理
function handleDragOver(e) {
  if (e.preventDefault) {
    e.preventDefault();
  }
  e.dataTransfer.dropEffect = 'move';
  return false;
}

// ドロップ時の処理
function handleDrop(e) {
  if (e.stopPropagation) {
    e.stopPropagation();
  }

  // ドロップ先の要素を取得
  const dropzone = e.target.closest('.dropzone');

  if (dropzone && dropzone !== this) {
    // ドラッグ元の要素を取得
    const draggedElement = document.querySelector('.dragging');

    // 要素の位置を入れ替える
    const temp = document.createElement('div');
    dropzone.parentNode.insertBefore(temp, dropzone);
    draggedElement.parentNode.insertBefore(dropzone, draggedElement);
    temp.parentNode.insertBefore(draggedElement, temp);
    temp.remove();
  }

  return false;
}

上記のコードでは、まずドラッグ可能な要素（.draggableクラスを持つ要素）とドロップゾーン（.dropzoneクラスを持つ要素）を取得し、それぞれにイベントリスナーを追加しています。

dragstartイベントでは、ドラッグが開始されたときにデータを転送用オブジェクトに設定し、要素にドラッグ中のスタイルを適用します。dragendイベントでは、ドラッグが終了したときにスタイルを解除します。

dragoverイベントでは、ドロップを許可するためにpreventDefault()を呼び出します。dropイベントでは、ドラッグされた要素とドロップ先の要素の位置を入れ替えます。

ステップ2：編集可能な要素の実装

次に、テキストを直接編集できる機能を実装します。contenteditable属性を利用することで、簡単に実現できます。

Html

<div id="editor" contenteditable="true">
  <h2>見出し</h2>
  <p>ここにテキストを入力します。</p>
  <div class="draggable">ドラッグ可能な要素</div>
</div>

上記のように、編集可能にしたい要素にcontenteditable="true属性を追加します。これだけで、その要素内のテキストを直接編集できるようになります。

さらに、編集状態を管理するために、以下のようなJavaScriptコードを追加します。

Javascript

// 編集可能な要素にイベントリスナーを追加
document.querySelectorAll('[contenteditable]').forEach(element => {
  element.addEventListener('focus', handleFocus);
  element.addEventListener('blur', handleBlur);
  element.addEventListener('input', handleInput);
});

// フォーカス時の処理
function handleFocus(e) {
  e.target.classList.add('editing');
}

// ブラー時の処理
function handleBlur(e) {
  e.target.classList.remove('editing');
  // ここで変更内容をサーバーに送信する処理を実装
}

// 入力時の処理
function handleInput(e) {
  // 入力中の処理を実装
}

このコードでは、編集可能な要素にフォーカスが当たったときにeditingクラスを追加し、フォーカスが外れたときに削除しています。これにより、編集中の要素に視覚的なフィードバックを与えることができます。

ステップ3：コンテンツの保存と同期

編集した内容を保存し、サーバーと同期する処理を実装します。通常はAJAXやFetch APIを使用して、サーバーと通信します。

Javascript

// コンテンツを保存する関数
function saveContent() {
  const content = document.getElementById('editor').innerHTML;

  fetch('/api/content', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ content: content }),
  })
  .then(response => response.json())
  .then(data => {
    console.log('Success:', data);
    // 保存成功時の処理
  })
  .catch((error) => {
    console.error('Error:', error);
    // 保存失敗時の処理
  });
}

// 定期的にコンテンツを保存
setInterval(saveContent, 30000); // 30秒ごとに保存

上記のコードでは、編集領域のHTMLを取得し、Fetch APIを使用してサーバーに送信しています。また、30秒ごとに自動保存するように設定しています。

ハマった点やエラー解決

実装中に遭遇する問題として、ドラッグ＆ドロップ時のイベント伝播の制御や、編集可能な要素内でのドラッグ＆ドロップの動作が挙げられます。

問題1：編集可能な要素内でのドラッグ＆ドロップがうまく動作しない

編集可能な要素（contenteditable）内では、デフォルトのブラウザ動作と競合することがあります。特に、テキストを選択してドラッグしようとすると、ブラウザのテキスト選択機能と競合して意図しない動作をすることがあります。

解決策

編集可能な要素内でのドラッグを無効にするか、イベント伝播を制御する必要があります。

Javascript

// 編集可能な要素内でのドラッグを無効にする
document.querySelectorAll('[contenteditable]').forEach(element => {
  element.addEventListener('dragstart', e => {
    if (e.target.isContentEditable) {
      e.preventDefault();
    }
  });
});

また、ドラッグ可能な要素と編集可能な要素を明確に分離することも有効な対策です。例えば、編集可能なテキスト領域とドラッグ可能なブロック要素を別々に定義することで、競合を避けることができます。

ステップ4：UI/UXの改善

最後に、ユーザー体験を向上させるためのUI/UXの改善を行います。編集中の視覚的なフィードバックや、操作ガイドの追加などが考えられます。

Javascript

// 編集中の要素にスタイルを適用
const style = document.createElement('style');
style.textContent = `
  .editing {
    outline: 2px solid #4CAF50;
    outline-offset: 2px;
  }

  .dragging {
    opacity: 0.5;
  }

  .dropzone.drag-over {
    background-color: #f0f8ff;
    border: 2px dashed #4CAF50;
  }
`;
document.head.appendChild(style);

// ドラッグ中の視覚的フィードバック
document.querySelectorAll('.dropzone').forEach(zone => {
  zone.addEventListener('dragover', function(e) {
    this.classList.add('drag-over');
  });

  zone.addEventListener('dragleave', function(e) {
    this.classList.remove('drag-over');
  });

  zone.addEventListener('drop', function(e) {
    this.classList.remove('drag-over');
  });
});

上記のコードでは、編集中の要素に緑色のアウトラインを表示し、ドラッグ中の要素に透明度を適用しています。また、ドロップゾーンにドラッグオーバーした際に背景色を変更することで、どこにドロップできるかを視覚的に示しています。

さらに、ツールバーやコンテキストメニューを追加することで、ユーザーがより直感的にコンテンツを編集できるようにすることも考えられます。例えば、テキストの書式設定（太字、斜体、下線など）やリンク挿入、画像挿入などの機能を提供します。

Javascript

// ツールバーの実装
const toolbar = document.createElement('div');
toolbar.className = 'toolbar';
toolbar.innerHTML = `
  <button data-command="bold"><i class="fas fa-bold"></i></button>
  <button data-command="italic"><i class="fas fa-italic"></i></button>
  <button data-command="underline"><i class="fas fa-underline"></i></button>
  <button data-command="createLink"><i class="fas fa-link"></i></button>
  <button data-command="insertImage"><i class="fas fa-image"></i></button>
`;
document.getElementById('editor').parentNode.insertBefore(toolbar, document.getElementById('editor'));

// ツールバーのボタンにイベントリスナーを追加
toolbar.querySelectorAll('button').forEach(button => {
  button.addEventListener('click', function() {
    const command = this.getAttribute('data-command');
    document.execCommand(command, false, null);
    document.getElementById('editor').focus();
  });
});

このように、ツールバーを追加することで、ユーザーが簡単にテキストの書式設定やリンク、画像の挿入ができるようになります。

まとめ

本記事では、CMSの見たまま編集機能がどのようにJavaScriptで実現されているか、ドラッグ＆ドロップの仕組みを解説しました。

• 見たまま編集機能の基本概念と必要性
• ドラッグ＆ドロップの実装方法
• 編集可能な要素の実装
• コンテンツの保存と同期
• UI/UXの改善方法

この記事を通して、JavaScriptを用いたCMSの見たまま編集機能の実装方法について理解を深めることができたと思います。ドラッグ＆ドロップ機能やcontenteditable属性を活用することで、ユーザーが直感的にコンテンツを編集できる環境を構築できます。

今後は、より高度な機能やパフォーマンスの最適化についても記事にする予定です。例えば、リアルタイムでの共同編集機能や、バージョン管理機能の実装方法などについても解説していきます。

参考資料

参考にした記事、ドキュメント、書籍などがあれば、必ず記載しましょう。

• HTML5 Drag and Drop API
• contenteditable - MDN Web Docs
• CMSの見たまま編集機能の実装例