技術資料

contenteditable属性を使ってHTML内のテキストを編集できるようにして、フォームのように扱い、変更があったらサーバーサイドで処理する、という流れを考えてみたいと思います。

画面のイメージは以下のような感じ。タイトルを一覧画面で直接編集できるようにしてみましょう。

HTML側 - data属性で情報を付与する

HTML側では、contenteditable属性をつける要素に、data属性で情報を付与しておきます。

<table>
    <tr>
        <th>タイトル</th>
        <th>カテゴリ</th>
        <th>作成日</th>
    </tr><tr>
        <td><span contenteditable="true" class="article-title-editable trigger-posteditdata"
        data-posturl="https://mydomain/script/update_title/5">冷蔵庫にWi-Fi？IoT時代の家電事情</span></td>
        <td>ガジェット</td>
        <td>2024-11-28</td>
    </tr><tr>
        <td><span contenteditable="true" class="article-title-editable trigger-posteditdata"
        data-posturl="https://mydomain/script/update_title/4">ねこがボタンを押すとどうなるか検証してみた</span></td>
        <td>実験</td>
        <td>2024-11-26</td>
    </tr><tr>
        <td><span contenteditable="true" class="article-title-editable trigger-posteditdata"
        data-posturl="https://mydomain/script/update_title/3">古代ローマの税制を見習うべき理由</span></td>
        <td>歴史</td>
        <td>2024-11-25</td>
    </tr><tr>
        <td><span contenteditable="true" class="article-title-editable trigger-posteditdata"
        data-posturl="https://mydomain/script/update_title/2">「10秒でできる健康法」は本当に10秒か？</span></td>
        <td>健康</td>
        <td>2024-11-24</td>
    </tr><tr>
        <td><span contenteditable="true" class="article-title-editable trigger-posteditdata"
        data-posturl="https://mydomain/script/update_title/1">無人島でフレームワーク選ぶなら何？</span></td>
        <td>技術雑談</td>
        <td>2024-11-23</td>
    </tr>
</table>

data-posturlに、タイトルが変更された時に送信するサーバー側プログラムへのURLを指定しておきます。
今回の例だと、update_title という処理に各記事のID番号を付与してURLとして指定しています。

また、各タイトルを囲む span 要素には共通のクラス名を指定しておきます(今回の例では trigger-posteditdata というクラス名)。

ついでに、 article-title-editable というクラス名を付与しておいて、CSSの after疑似要素を使って後ろにペンの絵文字でもつけておくと、ユーザーが一目でこの欄が編集可能だとわかって良いかもしれません。

.article-title-editable:after{
    content: " \1F589";
}

編集後のテキストを取得して値を付与、送信

値が変更された時に、サーバーに値を送信するJavaScript側の処理は以下のような感じ(今回はjQueryを使っています)。

編集前の状態を保持しておき、カーソルが外れた時に値が変更されたかチェックする処理や、Enterキー押下で改行がされたくないので、Enterでフォーカスが外れる処理も入れてあります。

var posteditdata_value = '';
// フォーカスされた時に、変更前のデータを保持しておく
$(".trigger-posteditdata").focus(function(){
    posteditdata_value = $(this).text();
});
// Enterキー押下でフォーカスを外す
$(".trigger-posteditdata").on('keydown', function(e){
    if(e.key==='Enter' || e.keyCode===13){
        $(this).blur();
        return false;
    }
});
// フォーカスが外れた時の処理
$(".trigger-posteditdata").blur(function(){
    let edited_value = $(this).text();
    // データが変更されている時だけAjaxでデータ送信
    if(posteditdata_value != edited_value){
        let post_url = $(this).data('posturl');
        post_url += '/' + $(this).val();
        let edited_object = $(this);
        $.ajax({
            url: post_url,
            type: 'POST',
            dataType: 'html',
            data: {edited_name:edited_value},
            timeout: 5000,
        })
        .done(function(data) {
            // 成功時の処理
            console.log(data);
        })
        .fail(function(jqXHR, textStatus) {
            // 失敗時の処理
            $(edited_object).text(posteditdata_value); // 値を一度元に戻しておく
            console.log(textStatus);
            alert('Error: posteditdata '+posteditdata_value);
        });
    }
});

上記のスクリプトで、以下のURLに対してPOSTされることになります。

• https://mydomain/script/update_title/[article_id]

以下のnameとvalueが送信されます。

name:edited_name

value:[変更後のタイトル]

サーバーサイドでは、このURLで受け取った値を元に、データを更新すればOK。

処理が複雑にはなりますが、頑張ればNotionぽいリッチテキストエディタなんかも作れますね。