Category: HTML5

機種依存文字のHTMLの表示

半角文字、機種依存文字、記号のHTML表示

<p>ｱｲｳｴｵ、ｶｷｸｹｺ</p><br>
		<p>①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳：㍉㍍㌔㌘㌧㌦㍑㌫㌢：㍻㍼㍽㍾：ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩ</p><br>
		<p>〃 仝 ゝ ゞ 々 〆 ヾ ― ‐ ／ 〇 ヽ ＿ ￣ ¨ ｀ ´ ゜ ゛ ＼ § ＾ ≫ ￢ ⇒ ⇔ ∀ ∃ ∠ ⊥ ⌒ ∂ ∇ ≡ ∨ ≪ † √ ∽ ∝ ∵ ∫ ∬ Å ‰ ♯ ♭ ♪ ‡ ～ ′ ≒ × ∥ ∧ ｜ … ± ÷ ≠ ≦ ≧ ∞ ∴ ♂ ♀ ∪ ‥ ° ⊃ ⊂ ⊇ ∩ ⊆ ∋ ∈ 〓 〒 ※ ″</p><br>

表示される
続いて、mysqlでテストする

PSD・AIからHTMLへの書き出し

コーディングに必要なこと

– 画像のスライス（書き出し方法）
– 要素の幅・高さを取得する
– 要素間の余白を取得する
– フォント情報の取得

デザインデータから情報を取得してコーディングする。
言うが易しって感じもするが。。

PSDファイルからHTMLにする流れ

PSD -> HTMLにする為の具体的な作業内容
ここが超絶重要なポイント、丁寧に深く理解する必要がある。

1. スケッチ(どのようなWebサイトを作っていくか)
2. ワイヤーフレーム(何ピクセルで作るかなど)
3. デザイン(色のパレットを決める、配色・配置)
4. 切り出し・書き出し・引き継ぎ
L ロゴ、メニューなどを切り出す作業をスライスという
L 各要素を適切なファイルサイズで書き出す
L 書き出したファイルを整理整頓する

なるほど、デザインしたものをスライスして書き出してる訳ね。
バナー作成の場合は基本的にデザインだけだが、Webページのデザインの場合はスライス・書き出しの作業があるから全然違うな。
OK、工程をちゃんと理解した。レイヤーをどう使ってるかなどは理解する必要があるな。

HTML5のemailのバリデーションとは？

まず普通にemailのバリデーションを考える。

/^[a-zA-Z0-9_.+-]+[@][a-zA-Z0-9.-]+$/

これで試す。

$email = ["test@yahoo.com","あああ@gmail.com","12345"];
foreach($email as $data){
	if(preg_match("/^[a-zA-Z0-9_.+-]+[@][a-zA-Z0-9.-]+$/", $data)){
		echo $data . " is ok<br>";
	} else {
		echo $data . " is not email<br>";
	}
}

HTML5のemail属性はどうなってるのか？
Mozilla.org: Email
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/email

username@domain または username@domain.tld

なるほど、良さそうやな。

selectを変更したらform submitしたい

カート処理で、selectで商品の数量を変更したら変更する値をsubmitして変更内容を即時に反映したい。
※更新ボタンを省きたい

まず普通にselect boxをforで回して作ります。

<form method="post" action="#">
			<select name="number">
        <?php
        $check = 20;
        for($i = 1; $i <= 50; $i++) {
	        	if($i === $check){
	        	echo "<option value='" .$i. "' selected>".$i."</option>";
	        } else{
		        echo "<option value='" .$i. "'>".$i."</option>";
		    }
        }
        ?>	
   	 	</select>
   	 	<br><br>
   	 	<input type="submit" value="送信">
   	 </form>

これに onchange=”submit(this.form)”をつけると

<form method="get" action="app.php">
			<select name="number" onchange="submit(this.form)">
        <?php
        $check = 20;
        for($i = 1; $i <= 50; $i++) {
	        	if($i === $check){
	        	echo "<option value='" .$i. "' selected>".$i."</option>";
	        } else{
		        echo "<option value='" .$i. "'>".$i."</option>";
		    }
        }
        ?>	
   	 	</select>
   	 </form>

なに？　こんなに簡単なのか？？　

音声認識を実装したい

Web Speech APIを使いたいと思う

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body>
	<h1 class="text-center h1">Web Speech API</h1>
	<div id="content">
		<input type="textarea" id="q" name="q" size=60>
		<input type="button" value="Click to Speak" onclick="recognition.start()">

	</div>
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
	<script>
		let recognition = new webkitSpeechRecognition();
		recognition.onresult = function(event) {
			if (event.results.length > 0){
				q.value = event.results[0][0].transcript;
			}
		}
	</script>
</body>
</html>

なんやこれは、、、　ここもコモディティ化されとんのか。。。

alt属性とtitle属性

alt属性はよく画像につけるものとしてありますが、title属性とは何でしょうか？

– alt属性はロボットに対して明示してあげるもの
– title属性は要素の補足説明をするためのものいわゆる「ツールチップ」

ロゴで以下の様にtitle属性、alt属性を設定すると良いとのこと。

<a href="/" title="トップページへ">
          <div class="top-logo">
            <img src="img/logo.png" alt="サービス名・会社名">
          </div>
        </a>

なるほどー

[HTML5] mp4再生の書き方

– movはsafariにしか対応していないので、mp4にする
– controlsでコントロールパネル表示

<video src="test.mp4" controls width="400px" height="200px"></video>

– 自動再生するには”autoplay” を入れるだけ
– クリックすると、遷移させるには普通にaタグ

<a href="/test.html"><video src="test.mp4" autoplay muted controls width="100%" height="500px"></video></a>

OK

WebController

Webcontroller is an HTML5-based browser application which allows to build versatile user interfaces for visualization, control and debugging of ROS systems. It uses and shows ROS messasges, services and parameters, much like the rqt-tools. GUIs are created right in the browser by drag&drop and can be saved. A menu bar displays the available ROS resources and widgets.