投稿日：2022-02-01T22:12:18+09:00

HTML+JavaScript で Unicode 文字表

Unicode の何処にどんな文字が入っているのか確認するための HTML+JavaScript です。静的な HTML ファイルを作ると、サイズが巨大になってしまうため、JavaScript で動的にテーブルを生成します。以下、スクリーンショットです。「更新」をクリック後にブラウザが暫く応答しないことがあります。動作確認は　　Google Chrome 　　バージョン: 97.0.4692.99（Official Build）（x86_64）で行っています。 viewer.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Unicode 文字表</title> <style> table { border: solid 1px #ccc; border-collaspe: collaspe; border-spacing: 0; } th, td { border: solid 1px #ccc; padding: 6px; } th { background: #eee; } .left { text-align: left; } .center { text-align: center; } .right { text-align: right; } </style> </head> <body> <h1>Unicode 文字表</h1> <table> <tr> <th colspan="4">Basic Multilingual Plane</th> <th colspan="4">Supplementary Multilingual Plane</th> <th colspan="4">Other Plane</th> </tr> <tr> <td><label><input type="radio" name="alloc" value="0000-00FF" checked>ASCII & Latin-1 Compatibility</label></td> <td>0000</td><td>-</td><td>00FF</td> <td rowspan="2"><label><input type="radio" name="alloc" value="10000-107FF">General Script</label></td> <td rowspan="2">10000</td><td rowspan="2">-</td><td rowspan="2">107FF</td> <td><label><input type="radio" name="alloc" value="20000-2FFFF">Supplementary Ideographic</label></td> <td>020000</td><td>-</td><td>02FFFF</td> </tr> <tr> <td><label><input type="radio" name="alloc" value="0100-058F">General Script</label></td> <td>0100</td><td>-</td><td>058F</td> <td><label><input type="radio" name="alloc" value="30000-3FFFF">Plane 3</label></td> <td>030000</td><td>-</td><td>03FFFF</td> </tr> <tr> <td><label><input type="radio" name="alloc" value="0590-08FF">General Script (RTL)</label></td> <td>0590</td><td>-</td><td>08FF</td> <td><label><input type="radio" name="alloc" value="10800-10FFF">General Script (RTL)</label></td> <td>10800</td><td>-</td><td>10FFF</td> <td rowspan="8"><label><input type="radio" name="alloc" value="40000-DFFFF" disabled>Plane 4 〜 13</label></td> <td rowspan="8">040000</td><td rowspan="8">-</td><td rowspan="8">0DFFFF</td> </tr> <tr> <td><label><input type="radio" name="alloc" value="0900-1FFF">General Script</label></td> <td>0900</td><td>-</td><td>1FFF</td> <td><label><input type="radio" name="alloc" value="11000-11FFF">General Script</label></td> <td>11000</td><td>-</td><td>11FFF</td> </tr> <tr> <td><label><input type="radio" name="alloc" value="2000-2BFF">Punctuation & Symbols</label></td> <td>2000</td><td>-</td><td>2BFF</td> <td rowspan="4"><label><input type="radio" name="alloc" value="12000-15FFF">Cuneiform & Hieroglyphic</label></td> <td rowspan="4">12000</td><td rowspan="4">-</td><td rowspan="4">15FFF</td> </tr> <tr> <td><label><input type="radio" name="alloc" value="2C00-2DFF">General Script</label></td> <td>2C00</td><td>-</td><td>2DFF</td> </tr> <tr> <td><label><input type="radio" name="alloc" value="2E00-2E7F">Supplemental Punctuation</label></td> <td>2E00</td><td>-</td><td>2E7F</td> </tr> <tr> <td><label><input type="radio" name="alloc" value="2E80-33FF">CJK Miscellaneous</label></td> <td>2E80</td><td>-</td><td>33FF</td> </tr> <tr> <td><label><input type="radio" name="alloc" value="3400-9FFF">CJKV Unified Ideographs</label></td> <td>3400</td><td>-</td><td>9FFF</td> <td><label><input type="radio" name="alloc" value="16000-16FFF">General Script</label></td> <td>16000</td><td>-</td><td>16FFF</td> </tr> <tr> <td><label><input type="radio" name="alloc" value="A000-ABFF">General Script (Asia & Africa)</label></td> <td>A000</td><td>-</td><td>ABFF</td> <td><label><input type="radio" name="alloc" value="17000-1BBFF">Ideographic Script</label></td> <td>17000</td><td>-</td><td>1BBFF</td> </tr> <tr> <td><label><input type="radio" name="alloc" value="AC00-D7FF">Hangul Syllabels</label></td> <td>AC00</td><td>-</td><td>D7FF</td> <td><label><input type="radio" name="alloc" value="1BC00-1CFFF">General Script</label></td> <td>1BC00</td><td>-</td><td>1CFFF</td> <td style="color: #f00;"><label><input type="radio" name="alloc" value="E0000-E0FFF" disabled>Plane 14 (Ignorable)</label></td> <td>0E0000</td><td>-</td><td>0E0FFF</td> </tr> <tr> <td style="color: #f00;"><label><input type="radio" name="alloc" value="D800-DFFF" disabled>Surrogate Codes</label></td> <td>D800</td><td>-</td><td>DFFF</td> <td><label><input type="radio" name="alloc" value="1D000-1E7FF">Symbols</label></td> <td>1D000</td><td>-</td><td>1E7FF</td> <td><label><input type="radio" name="alloc" value="E1000-EFFFF" disabled>Plane 14 (Reserved)</label></td> <td>0E1000</td><td>-</td><td>0EFFFF</td> </tr> <tr> <td><label><input type="radio" name="alloc" value="E000-F8FF">Private Use</label></td> <td>E000</td><td>-</td><td>F8FF</td> <td><label><input type="radio" name="alloc" value="1E800-1EFFF">General Script (RTL)</label></td> <td>1E800</td><td>-</td><td>1EFFF</td> <td><label><input type="radio" name="alloc" value="F0000-FFFFF">Plane 15 (Private Use)</label></td> <td>0F0000</td><td>-</td><td>0FFFFF</td> </tr> <tr> <td><label><input type="radio" name="alloc" value="F900-FFFF">Compatibility & Specials</label></td> <td>F900</td><td>-</td><td>FFFF</td> <td><label><input type="radio" name="alloc" value="1F000-1FFFF">General Script</label></td> <td>1F000</td><td>-</td><td>1FFFF</td> <td><label><input type="radio" name="alloc" value="100000-10FFFF">Plane 16 (Private Use)</label></td> <td>100000</td><td>-</td><td>10FFFF</td> </tr> </table> <div> </div> <table> <tr> <th>幅</th> <td> <label><input type="radio" name="width" value="16" checked>16</label> <label><input type="radio" name="width" value="32">32</label> <label><input type="radio" name="width" value="64">64</label> <label><input type="radio" name="width" value="128">128</label> <label><input type="radio" name="width" value="256">256</label> </td> <th><input id="button" type="button" name="generate" value="更新" onclick="onUpdate();"></th> </table> <hr> <table id="ctab"> </table> <script type="text/javascript">  </script> </body> </html>

　 Tweet
Qiitaで続きを読む

投稿日：2022-02-01T14:36:00+09:00

formを用いたHTMLからMySQLへの値の挿入方法について。

formを用いたHTMLからMySQLへの値の挿入方法 Node.jsとMySQLを用いたアプリの開発途中に少し詰まったので備忘録として書いておきます。 HTML.CSS <form action="new" method="post"> <p>名前</p> <input type="text" name="name" > <p>性別</p> <input type="text" name="gender"> <p>年齢</p> <input type="text" name="age" > <p>生年月日</p> <input type="date" name="dob"> <input href="/new" type="submit" value="送信する"> </form> 例えば、このようなformの内容をMySQLに挿入したい場合、Node.js上でこのように記述することで挿入が可能です。 Node.js //データの追加はpost送信を用いる app.post('/new', (req, res) => { console.log(req.body); //formからの内容はreq.bodyに格納されるため、その中からformの内容を取り出し変数に挿入する処理。 const name = req.body.name; const gender = req.body.gender; const age = req.body.age; const dob = req.body.dob; console.log(name, gender, age, dob); //MySQLへ接続し、値を挿入する処理 connection.query( //変数を挿入したい部分は"?"で記述する。 'INSERT INTO users (name, gender, age, dob, level) VALUES (?, ?, ?, ?, ?)', //[]で囲んだ中に"?"に対応する変数を記述する。 [name, gender, age, dob], (error, results) => { console.log(results) console.log(error) res.redirect('/top',); } ); });

　 Tweet
Qiitaで続きを読む

投稿日：2022-02-01T11:27:26+09:00

HTML タグ紹介

progressタグとmeterタグプログレスを表示してくれるタグです。css pseudo classesを利用すると、きれいに見せます。 progressタグとmeterタグの大きい差はmeterタグにはlowとhighの属性があり、ゲージによる、プログレス色の差を表示することができるところです。 <label for="file">Downloading progress:</label> <progress id="file" value="32" max="100"> 32% </progress> progressを使って見る <p><label for="anna">Anna's score:</label> <meter id="anna" min="0" low="40" high="90" max="100" value="95"></meter></p> <p><label for="peter">Peter's score:</label> <meter id="peter" min="0" low="40" high="90" max="100" value="65"></meter></p> meterを使って見る 2.　よく知られているタグであるdetailsタグはsummaryタグの内容のみを表示して、クリックしたら、detailsタグ内の内容まで表示してくれるものです。detailsをクリックした時のCSSは「#details[open]」です。 <details> <summary>Epcot Center</summary> <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p> </details> detailsを使って見る３．inputタグのtypeに追加された属性はカレンダーの機能や時間、週単位のユーザ選択をやり安くしてくれます。 dateのmin、maxを指定して、欲しい範囲を絞ることも可能です。３．１．dateタグ <input type="date" id="datemin" name="datemin" min="2000-01-02" max="2022-12-31"> dateを使って見る３．２．monthタグ <input type="month" id="bdaymonth" name="bdaymonth" min="2022-02" max="2022-07"> <input type="week"> <input type="time"> monthを使って見る３．３．weekタグ <input type="week" id="week" name="week"> weekを使って見る３．４．timeタグ <input type="time" id="appt" name="appt"> timeを使って見る３．５．rangeタグ <input type="range" id="vol" name="vol" min="0" max="50"> rangeを使って見る４．イメージをユーザデバイスに合わせて表示する時、CSSのみを使うと、該当CSSをすべてダウンロードして、その中から、ユーザに合わせたイメージを表示することになりますが、pictureタグを利用すると、ユーザのデバイスに合わせたイメージのみをダウンロードして、表示します。ユーザデバイスに関してはmediaに指定できるし、基本イメージ（pictureタグが使えない場合など）はpictureタグ内部のimgタグにて指定できます。 <picture> <source srcset="1.jpeg" media="(min-width:1200px)" /> <source srcset="2.jpeg" media="(min-width:900px)" /> <source srcset="3.jpeg" media="(min-width:500px)" /> <img src="default.jpeg" /> </picture> pictureを使って見る５． auto complate機能はスクリプトを利用して、開発していた内容でしたが、datalistタグにより、簡単にできるようになりました。最も良いのは先頭文字のみの検索ではないことですね。途中や末尾の文字だとしても、正しく検索してフィルターを掛け、表示してくれます。 <label for="movie">What is your favourite movie?</label> <input type="text" list="autolist" /> <datalist id="autolist"> <option value="A Movie" /> <option value="B Movie" /> <option value="C Movie" /> </datalist> datalistを使って見る参照元 https://www.youtube.com/watch?v=EMOlLLTAZMs

　 Tweet
Qiitaで続きを読む

投稿日：2022-02-01T01:23:22+09:00

[JS]HTML要素の取得や書き換えをする

HTML要素の取得や書き換えをすることで、イベント発火させると表示されている文字を変更することができるようになります。 innerHTMLプロパティ JavaScriptにて、HTML要素の取得や書き換えを行うことができるプロパティ。例 HTML <div class="contents" id="hoge">HTML</div> javascript const hoge = document.getElementById("hoge") //HTML要素の取得 console.log(hoge.innerHTML) // => HTML //HTML要素の書き換え hoge.innerHTML = "javascript" console.log(hoge.innerHTML) // => javascript 以上。補足等ありましたらコメント頂けると幸いです。

　 Tweet
Qiitaで続きを読む

20220201のHTMLに関する記事は4件です。

HTML+JavaScript で Unicode 文字表

formを用いたHTMLからMySQLへの値の挿入方法について。

HTML タグ紹介

[JS]HTML要素の取得や書き換えをする

日付別

タグ一覧