Studio
Happyvalley

かる~く使える
チャットツール

開発用に作った
バーチャルチャットツールです。

image: かる~く使えるチャットツール

ぴったりフィットするテキストボックスとWEBストレージ

概要

  • フェイスブックなどのように、文字入力時にテキストボックスを文字量に合わせて自動的に伸縮させる方法を調べてみました。主に下記の二点がポイントです。

    ◎自動伸縮するテキストボックスでそのまま送信
    ◎コメントを投稿するとページがリロードになり、ユーザー操作がキャンセルされますが、その状態を維持する。

    私はフロントエンドが専門なので、開発段階ではサーバーで出力するデータをJSで仮に表示しデザインを進めたりします。
    今回はその過程で生まれた事案です。

機能の説明

  • ・投稿機能
    ・更新状態を維持
    ・編集機能で編集状態に移行
    ・入力無し投稿などへエラーメッセージ
    ・自分のコメントには「編集・削除」機能

技術仕様

  • ◎自動伸縮するテキストボックス は、HTML5の「contenteditable」という属性を使用しています。form要素を使わなくともテキストを入力可能にする機能です。

    もうひとつの◎ユーザー個別のページ状態を保存する は、同じくHTML5のWeb Storage という技術を使ってます。ブラウザにデータを保存する方法です。クッキーのような技術ですね。
    ただ今回作成したツールは、個人のブラウザだけにデータを保存するのでコミュニケーションツールとしては実用的ではないです。あくまで開発のためのツールですね。
    もちろんそのデータをサーバーに保存すればWEBアプリとして機能しますがそういうのはすでにあるので。

後記

  • 結構いい感じで使えるので実用的なツールにするために、軽さはこのままにデータをサーバーへ保存する仕様へ変更しようかと思案中です。

https://studio-happyvalley.com/wp/wp-content/uploads/2021/02/commenttool_fig_1-1.png

ログインしているユーザーだけができる機能などを調べるためにユーザーがログインしている状況をバーチャルで再現しています。

https://studio-happyvalley.com/wp/wp-content/uploads/2021/02/commenttool_fig_2.png

投稿した記事の編集もその場でできます。

https://studio-happyvalley.com/wp/wp-content/uploads/2021/02/commenttool_fig_3.png

いいねアイコン的なものも付けられます。

https://studio-happyvalley.com/wp/wp-content/uploads/2021/02/commenttool_fig_4.png

以前掲載していた記事のイメージです。汗