やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

📌 ？
トップ > HTML > HTMLに欲しいタグ

HTMLに欲しいタグ

HTML

　もはや当初のHTMLでは要件を満たせない。<code src="">とか欲しい。

きっかけ

　HTMLで縦書きビューアを作ろうとした。表示設定として「フォントサイズ小中大」「縦書き／横書き」「背景色白／黒」「明朝体／ゴシック体」を用意しようと考える。その入力フォームにラジオボタンを使うのが適切だと判断した。各グループ内において、どれかひとつだけを選択するものだからだ。

ラジオボタン

　すごく使いづらい。わかりづらい。なので以下を作った。

　これをきっかけに、HTMLについて調べてみることにしたのが今回の本題。

<input>要素

　ラジオボタンは<input>要素をつかう。テキストボックスなど他のUIも<input>で表すため、パッと見わかりづらい。

type属性

　ラジオボタンは<input type="radio">とする。このtype属性値をかえると他のUIになってしまう。その数23種。input参照。

混沌とするtype属性値

分類

　独断でグループ化してみた。なお、<button>,<select>,<textarea>,<dialog>という別の要素も包括してみた。

　４種類に大別できる。

種類 目的 特性
hidden 値を隠し持つ 見えない
button 起動する契機 ON/OFFの2値。ワンス／モーメンタリ／オルタネート。
select 用意された値から選ぶ 多値。選択＝単一／複数。型＝数／字／色／日時／ファイルハンドラ
text 自由に言語を入力する 値＝言語。バリデーション。list, pattern

　一覧は以下。

  • hidden
  • <button>
    • button
    • submit
    • reset
    • image
  • <select>
    • range
      • number
    • checkbox
    • radio
    • file
    • datetime
      • date
      • month
      • week
      • time
      • datetime-local
    • color
  • <textarea>
    • text
    • search
    • tel
    • url
    • email
    • password

特徴

　次のような特徴がある。

  • button系
    • clickイベントを実装する
  • select系はbuttonの複雑版である
    • changeイベントを実装する
  • text系はselectの複雑版である
    • changeイベントを実装する

要件

要件

　私としては以下のような要件がある。

  • text系はselectの複雑版である
  • ほかの型もほしい
    • テキスト：JSON、XML、HTML、CSV、list、KSV、RDBMS、RDF、…
    • バイナリ（画像、音声、動画、圧縮ファイル、…））

　画像や音声を入力するUIがない。いまどき音声認識や画像認識くらいあってもいいと思う。

　テキスト系はもっと充実してほしい。たとえばファイルシステムとテキストエディタが連動したUIが欲しい。

　以下のようにやったら実際のディレクトリ構造を読んでよろしくやってほしい。

<fs src="./projects">

　以下のようなディレクトリ構造だったとする。

  • projects/
    • src/
      • index.html
      • js/
        • index.js

　左にツリー。右にテキストエディタ。それがくっついたUI。

projects/        |1 <html>
  src/           |2 </html>
    index.html   |3 
    js/          |4 
      index.js   |5

　よくコードを書くから、せめてファイル名の表示やシンタックス・ハイライトくらい標準装備していて欲しい。

<code src="./projects/src/index.html">
<html>       |index.html|
<body>       +----------+
</body>
</html>

　パスやコードはワンクリックでコピーできてほしい。

　どこかに要件をみたすUIライブラリはないものか。

element-plus

element-plus

　element-plusをみてみると、まだまだ足りないものがある。

UI 概要
element-plus-switch スイッチ（２値。ON/OFF）
element-plus-rate レート（５段階評価）
element-plus-transfer リストの移し替え
element-plus-cascader 多段メニュー
element-plus-table テーブル。表。二次元。グループヘッダ。ソート。フィルタ。
element-plus-tag タグ。☓ボタンで消せる。
element-plus-tree ツリー。木構造。
element-plus-pagination ページネーション。
element-plus-badge バッジ。
element-plus-loading ローディング
element-plus-message メッセージ通知（上）
element-plus-notification メッセージ通知（右）
element-plus-menu メニュー
element-plus-tabs タブ
element-plus-breadcrumb パンくずリスト
element-plus-dropdown ドロップダウン。プルダウン。コンボボックス。
element-plus-steps タブ。進捗つき。
element-plus-popover ポップアップHTML
element-plus-popconfirm ポップアップ確認
element-plus-card カード
element-plus-carousel スライド。自動遷移して１枚だけ表示する。
element-plus-timeline タイムライン。時系列。
element-plus-collapse アコーディオン。クリックで詳細表示。
element-plus-infiniteScroll 無限スクロール。
element-plus-avatar アバター。顔画像。

欲しい

タグ 概要
<code src=""> 外部ファイル参照。シンタックス・ハイライト。行表示。行ハイライト。コピー。パス表示。パスコピー。
<fs src=""> 外部ディレクトリ参照。ツリー構造表示。内容はファイル形式に応じたビューア／エディタで表示する
<terminal> 端末。ANSI Escape Codeに応じて表示する。

所感

　自分でつくるしかないか。

対象環境

$ uname -a
Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux