音声インプットメソッドお試し

Chrome でサポートしている音声入力。

実装方法調べたら１行コード記述するだけだったので仮組み。

<input type="text" x-webkit-speech="" />

HTMLモードにして上記コードを記述するだけ



実装は簡単だったんだけど、Mac OS X の音声入力に負けてる。

現段階ではワード単位ならギリギリ合格。ベラベラ喋ってるともうぐだぐだ。

あー、残念

css float ではまった

稚拙ながら、とあるブログサイト作成を手伝っている。

画像回り込み実装に css float 属性を使用したところ、イメージ通りのデザインが実装できず、html の style にベタ打ちで回避した。

当面はこれで良いかと思ったが、なんか気持ち悪い。だもんでテスト実装してみる。

属性への理解も深まるだろう。

作成しているブログサイトが blogger なので、テンプレートデザイナの上級者向けCSS追加へ追記。

.floatLeft img {
         float: left;
}

.floatRight img {
         float: right;
}

.floatClear {
    clear: both;
}

つづいて html の 回り込み対象を float 属性クラスで囲む。

<div class="floatRight">
<img border="0" height="148" src="*.png" width="200" />
</div><br class="floatclear" />

<div class="floatLeft">
<img border="0" height="148" src="*.png" width="200" />
</div><br class="floatclear" />

ここまでの実装ではイメージ通りのデザインが実現できなかった。
結果は下のイメージのようにグダグダ。

CSS class float: right; 指定

CSS class float: left; 指定

css class の作用を理解していないことがバレバレである。

いろいろさまよって class の組み方と作用をちょっぴり理解し、親元となるコンテナクラスの下に、イメージクラスとストリングクラスを下げるのが手早そうなので css 追記。デバッグ用としてborder 属性を付与。

.container {
    overflow: auto;
    border: double 10px #00ffff;
}

.floatRight {
         display:inline;
         border: solid 2px #000ff0;
}

.floatLeft {
         display:inline;
         border: solid 2px #00ff00;
}

.stringInFloat {

         border: double 10px #0000ff;

}

つづいて html に コンテナクラス、イメージクラス、ストリングクラスを実装。

<div class="container">
<div class="floatRight">
<img border="0" height="148" src="*.png" width="200" />
<div class="stringInFloat"></div>
</div></div><br class="floatclear" />

<div class="container">
<div class="floatLeft">
<img border="0" height="148" src="*.png" width="200" />
<div class="stringInFloat"></div>
</div></div><br class="floatclear" />

ここまでの実装でイメージ通りのデザインが実現できた。 

コンテナクラス

イメージクラス right; 指定

ストリングクラス

コンテナクラス

イメージクラス left; 指定

ストリングクラス

ストリングクラスに２００文字ほどおいて回り込み確認し、テスト実装完了。

コンテナクラス

イメージクラス right; 指定

１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９

コンテナクラス

イメージクラス left; 指定

１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９１２３４５６７８９