Web Speech API:音声認識に使うマイクはvagrantでは許可されない！？

<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>
var recognition = new webkitSpeechRecognition();
  recognition.onresult = function(event) {
  if (event.results.length > 0) {
    q.value = event.results[0][0].transcript;
  }
}
</script>

192.168.33.10:8000ではマイクがブロックされます。

chromeのhelpページを見ても、解決する記載がなし
https://support.google.com/chrome/answer/2693767?hl=ja

仕方ないので、さくらで共有sslの環境で試してみます。

sslを設定すると、許可のポップアップが表示される

おおお、すげー、感動した！

どうもhttp通信だと、セキュリティ的にマイクはダメのようですね。
また、mp3ファイル(TRF ez do dance)を再生して、歌詞を表示させようとしましたが、audio再生をそのままテキストにすることはできませんでした。残念。

電話番号を発信する

tel:を使います。

<?php 

$fname = $_SERVER&#91;'PHP_SELF'&#93;;
$number = substr($fname, 1, 12);
?>
<a href="tel:<?php echo $number; ?>"><?php echo $number; ?></a>

iphoneで試してみましたが、上手くいきました。

電話番号の情報を表示

googleで「ぎんざ姿 電話番号」を打ち込むと、

一発で出てくる。。終わった。

ファイル名を取得して表示する

echo $_SERVER['PHP_SELF'];

1文字目～13文字目をslice

$fname = $_SERVER['PHP_SELF'];
echo substr($fname, 1, 12);

ファイルを複製する

$i = 1;
$copy = '03-3567-000'.$i.'.php';
copy('03-3567-0003.php', $copy);

03-3567-0001.php の中身のコードも、03-3567-0003.phpと同じものになっています。

ファイルを複数複製する

for($i = 0; $i < 10; $i++){
	$copy = '03-3567-000'.$i.'.php';
	if(!file_exists($copy)){
	copy('03-3567-0003.php', $copy);	
	}
}

これ、何百万のphpファイルと何百万のmysqlレコードをつくるのか！？

phpで郵便番号から住所を取得

$zip = "1530042";
$base_url = "http://zipcloud.ibsnet.co.jp/api/search?zipcode=".$zip."";
$json = file_get_contents($base_url);
print_r('<pre>');
var_dump($json);
print_r('</pre>');
$arr = json_decode($json, true);
echo $arr['results'][0]['address1']. "<br>";
echo $arr['results'][0]['address2']. "<br>";
echo $arr['results'][0]['address3'];

string(293) “{
“message”: null,
“results”: [
{
“address1”: “東京都”,
“address2”: “目黒区”,
“address3”: “青葉台”,
“kana1”: “ﾄｳｷｮｳﾄ”,
“kana2”: “ﾒｸﾞﾛｸ”,
“kana3”: “ｱｵﾊﾞﾀﾞｲ”,
“prefcode”: “13”,
“zipcode”: “1530042”
}
],
“status”: 200
}”
東京都
目黒区
青葉台

検索ページをスタイリング

sumo

リクナビ

吉本タレント検索

レコチョク検索

amazon

zozo

model search

model town:http://www.modeltown.jp/index.php?app_controller=search&type=items&run=true
モデルタウンすげーな、髪型で検索できんのかよ！めっちゃいいやんけ。
私も機械学習の画像認識で、髪型登録して、髪型検索のサービス作りたいです。。。。

初期画面

シンプルだが及第点ってところか？

OK,　悪くない

後は、メール受信画面を成形

ほぼ出来たか？

入力フォームをスタイリング

戦後のスカイラインのデザインはかっこよかったが、やはり、デザインはその時の時代背景が出ますね。。

<style>
.submit1 {
	height:30px;
	margin-top:5px;
	padding-right:15px;
	padding-left:15px;
	background-color:#0099FF;
	color:#fff;
	border:0px;
}
.submit1:active {
    -ms-transform: translateY(2px);
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    border-bottom: none;
}
.form2{
	height:30px;
}
textarea{
	padding-top:5px;
}
</style>

<form action="?compose=done" method="post" enctype="multipart/form-data">
			<br>
			<input type="text" class="form2" name="to" size="80%" value="<?php echo $to; ?>" placeholder="　宛先　※必須"  required><br>
			<br>
			<input type="text" class="form2" name="subject" value="<?php echo $subject; ?>" placeholder="　件名" size="80%"><br>
			<br>
			<textarea placeholder="　メッセージを入力してください　※必須"　name="body" rows="12" cols="82%" required></textarea>
			</p>
			<input type="file" id="files" name="files&#91;&#93;" multiple />
			<div id="caution">
			※送信できるファイルの拡張子は"gif","jpg","jpeg","png"の何れかです。<br>
			※ファイル送信は最大2つまでです。3つ以上選択しても、3つ目以降は送れません。また、二つのファイルを送信する場合は、キーボードの"ctl"ボタンなどで二つ選択した状態で開いてください。</div>
			<output id="list"></output>
			<p>
			<input type="submit" class="submit1" value="送信">
			</form>

なんか、hrがしょぼいですな。。

あ、hrもcssでスタイリングできるんですね♪

hr{
	height: 2px;
	background-color: #F8F8FF;
	color: #F8F8FF;
}

割といい

メールボックスをスタイリング

headerをつくっていきます。

.header-wrap{
	background-color:#222222;
	margin-bottom:10px;
}
.title-wrap{
   display:inline-block;
   vertical-align: bottom;
}
.title-wrap h1 {
	font-size:23px;
	padding-top:0px;
	padding-left:15px;
	margin-bottom:0px;
	color:#fff;
}
.title-wrap h2 {
	font-size:14px;
	margin-top:0px;
	padding-left:15px;
	padding-bottom:5px;
	color:#fff;
}
.out {
	display:inline;
	vertical-align: bottom;
	font-size:12px;
	float:right;
	padding-top:15px;
	padding-right:15px;
	color:#fff;
}

もう少し細くします。

flex-1, flex-2にヘッダーをつけます。

.side{
	height:12px;
	background-color:#E6FFE9;
}
.main{
	height:12px;
	background-color:#F5FFFA;
}

ul, li要素のlist-styleをnoneにします。

ul{
	list-style:none;
}
li{
	margin:7px;
}

まぁまぁOK

ログアウト画面の表示

<?php 

require("auth.php");
$auth = new Auth();
$auth->logout();

?>
お待ちください...
<script>
setTimeout(function(){
	window.location.href = "login.php";
}, 600);
</script>

gmailと一緒で、特にスタイリングはなしでOKですね。settimeは600msくらいにしておきます。

さあ、次は、form周りでしょうか。

メールボックス ログイン後のUI

hotmail: 大人っぽいデザインです。

gmail:やすっぽい印象があり、あまり好きではない

yahoo:ごちゃごちゃしていて見にくい

アマゾン:特に感想なし

テキスト小さめで、ヘッダーは黒・紺の方が落ち着いて見える気がします。

初期画面

アカウント登録画面のデザイン

amazon: カッケー

hotmail: 渋い

yahoo: ヤフーっぽい感じが出てて、なんか好感持てる！

google: ああ、登録画面はGoogleが一番いいかも。特にセキュリティをケアしているところが好きだ。

どこも、基本はログインの画面と整合性が取れてますね。
なるほど！

初期画面

css

.form1{
	width:100%;
	height:30px;
	margin-top:5px;
}
.submit {
	width:100%;
	height:30px;
	margin-top:5px;
	background-color:#0099FF;
	color:#fff;
	border:0px;
}
select{
	width:100%;
	height:30px;
	margin-bottom:5px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #999;
	padding-left:5px;
}

修正後 ->
適当だけど雰囲気はそれっぽい(笑)

ログイン画面のデザイン

なんじゃこれ、よく見たら、全部カッケーーーーーー　すげーーーーー

ホットメール

gmail

yahoo

twitter

facebook

LINE

Amazon

なんだよこれ、2回言うけど、全部カッケー
すげーなー

input formはyahoo, facebookを除いて中央寄せがトレンドのようですね。

初期画面

スタイリングしていきます。

<div class="signin">
      <h1>サインイン</h1>
      <form method="POST" action="login.php">
        <input type="text" name="username" placeholder="ユーザー名"/><br>
        <input type="password" name="password" placeholder="パスワード"/><br>
        <input type="submit" value="ログイン" />
      </form>
      ※アカウントを持ちでない場合、<a href="register.php">新規登録</a>できます。
      </div>

css

body{
	background-color:#EEEEEE;
}
.signin{
	background-color:#fff;
	margin:50 auto;
	padding-top:10px;
	padding-left:10px;
	width:400px;
	height:400px;
}

更にスタイリング

body{
	background-color:#EEEEEE;
}
.signin{
	background-color:#fff;
	margin:50 auto;
	padding-top:10px;
	padding-left:10px;
	padding-right:10px;
	width:400px;
	height:400px;
}
.form1{
	width:100%;
	height:30px;
	margin-top:5px;
}
.submit {
	width:100%;
	height:30px;
	margin-top:5px;
	background-color:#0099FF;
	color:#fff;
	border:0px;
}
#fs-s{
	font-size:small;
	color:gray;
}

おおお、それっぽい(笑)