2016年08月

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

javascriptをつかってブラウザで録音するWEBサイトが作れるのか調べてみた

仕事で調べる必要があって。

HTML5でいろいろできるようになってるっていうし、ブラウザでその場で録音するWEBサイトって作れるのかな?

■つくれる。

こんなデモがあった。
https://webaudiodemos.appspot.com/AudioRecorder/index.html

録音して再生したり音声データをダウンロードしたりできる。

できるね。
 

■Web Audio API というものらしい。

音をいろいろするAPI
http://www.html5rocks.com/ja/tutorials/webaudio/intro/

 
■javascriptライブラリもあった。 

recorder.js
https://github.com/mattdiamond/Recorderjs

rec.record()
rec.stop()
これだけでできんのすごい。
こんど試しデモつくってみよう。

WevAudioRecorder.jsなんていうのもある。
https://higuma.github.io/web-audio-recorder-js/


■問題が。スマホサイトでは使えない。

ひととおり調べてみた限り、スマホではブラウザでの録音ができないっぽい。

https://www.quora.com/How-do-I-record-audio-using-the-iPhone-6-running-on-iOS-8-1-3-microphone-on-the-Chrome-or-Safari-browser

すでにいろいろ試した先駆者がいたようで、いろいろなAPIを駆使したがiphone 6ではsafariから録音ができなかったとのこと。

回答のいち部分を翻訳。


getUserMediaなどrecorder.jsなどのライブラリで使えますが、
mobile Safariは、オーディオキャプチャをサポートしていません
デスクトップブラウザ上で、このための一般的な回避策は、フラッシュを使用することであるが、iphoneではフラッシュが使えません。
そのためゆういつの解決策はネイティブアプリとしてリリースすることです。

オーディオキャプチャをサポートしてないので、できませんよ、と。



PCではできるけど、スマホでできない。

ユーザーが気軽にスマホで遊ぶような録音サイトは作れなさそうかな。



引き続き調査をすすめてる。

 

makeshopのカート画面でお気に入り商品の削除やお気に入り商品を「買い物かごにいれる」がエラーになる

makeshopでは、お気に入りに追加するとカート(買い物かご)の画面にお気に入り商品が一覧表示される。

カート画面をオリジナルデザインで作っていたら、この画面にでてくる
・お気に入り商品の削除ボタン
・お気に入り商品をカートに入れるボタン

の2つが機能しなかった。

管理画面を読み込んでみたけどわからない。

しょうがないので、chromeの検証でコンソールを開いて、jsのエラーを確認して、javascriptから追いかけていって解決。

■結論から

wishlistの商品数入力ボックス(タグで言うと[WISH_QUANTITY] ) 
を記述してないとエラーになるっぽい。

とはいえ、デザイン上お気に入り商品一覧画面で商品数を入力させたくなかったので、ソース上は表示させつつ見た目には見えないようにした。

<div style="display:none">
[WISH_QUANTITY]
</div> 

これで解決!
 

■どうやって見つけたかも書いておく。

①chromeの検証でconsoleをひらいておく。 

②エラーとなる「お気に入りの削除」ボタンをクリック。するとconsoleにエラー文言がでる。
「602行目のvalueがエラーだよ」 
のようなのが出た。

③chromeのソースビューで602行目を探すと
document.getElementById("formwish" + temp).amount.value=0;
このような1文があった。 

④tempというのは上のほうを探っていくと一覧の番号であることがわかる。 ので、valueがエラーということは、id="formwish1"というタグの子要素にamountというのが存在しないためのエラーということがわかる。ソースをみていくと確かにそんなタグは出力されてない。

⑤なんか必要なタグいれわすれてんのかな?と疑って、makeshop独自デザインの買い物カゴ編集画面を見に行く。wishlistのあたりを見ていると、[WISH_QUANTITY]というのがある。
あぁ、amount(=量)って数量のことかってことでためしにこのタグをいれてみたら、解決。 


って感じで探したよ。


 

MTIfで「AまたはB」で条件をつくる。OR条件。<Movabletype>

Movabletypeで、MTifタグを使って、一致する記事だけをひっぱってくるには以下のようにやるよね。

カスタムフィールドでつくったタグが
<mt:hogehoge>だとしたら

<mt:if name="hogehoge" eq="ホゲ">
</mt:if> 


 hogehogeというフィールドに入ってる内容が「ホゲ」だったときに表示する、みたいな分岐。

ここで、2つの文言にあうときの条件を作りたいとき、
例えば、「ホゲ」と「にゃん」どちらかが入力されている場合、というのを作りたいときはlikeをつかって以下のようにする。

<mt:if name="hogehoge" like="ホゲ|にゃん">
</mt:if>

 「|」←縦棒
で区切って likeであいまい検索をかける。




OKOK 
記事検索

リモキュー

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

https://twitter.com/tacshock
タグクラウド
QRコード
QRコード
  • ライブドアブログ