audio、videoタグをスマホサイトで使う時に気をつけること
ちょっと前にスマホサイトで音声や動画を流す要件があり、
注意が必要な箇所があったのでメモ書き程度に残します。
使うのはHTML5で追加されたauido、videoタグです。
その名の通り、audioは音声ファイル、videoタグは動画ファイルを
Webサイト上で再生するためのタグになります。
タグ自体の説明はぐぐってもらうとして、
以下に気をつけるべき注意点を書いていきます。
自動ロードされない(video&audio)
preloadとload属性は無視されます。
PCではもちろん動作しますが、スマホでは無視です。
これちゃんと意味があって、勝手にロードされたら
課金されちゃうでしょ？っていう上での動きのようです。
言われてみれば確かにそうですね。。。
じゃ、いつロードされるのか？
jsで、ドキュメントロード後に
audio.load();
とかやってもダメです。
ロードされません。
じゃ、いつやればいいの？ってことなんですが、
これはユーザアクションを受け取ったFunctionでしか出来ません。
例えば
$('#load').click(function(){
audio.load();
});
って感じ。
必ずユーザ入力ありきでしかロードされません。
つまりなにかクリックとかの動作が必要ということです。
例えば、サイト表示時に
音声を再生しますか？
はい いいえ
の選択肢を出して、「はい」を押したらロードするとか。
自動再生されない(video&audio)
これもロード同様に、autoplayとか効きません。 ロード同様に、
audio.play();
するためにはなんらかの入力が必要になります。
ただロードからの自動再生は出来ました。
端末、OSに実装方法が異なりますが、autoplay属性をtrueにして
dataloadedイベント（or canplay）をハンドルして、そこからplay()することでいけます。
複数音源読み込みがOSにより不安定(audio)
例えば、１画面でa.mp3とb.mp3というファイルを再生したい場合
iOS6で動作が不安定になりました。
音がロードされなかったり鳴らなかったり。。。
時には遅延がひどかったり。
これ、対策としては１音源のみをロードするようにして
再生位置、再生秒数を指定するような形で各音を再生するような形にしました。
１音源のみを読みこめば良いのでロード処理もシンプルになります。
poster画像が表示されない(video)
iOSだけですが、BASIC認証かけてたりすると
poster属性の画像が表示されませんでした。
非表示にしておくと良くないっぽい(video)
load -> playとするまで
display: none
としておき、load直前で
display: block
してたのですが、一部端末（Android）で
loadが正常に開始されない現象ありました。
なので、displayによる非表示はせずに画像を重ねて
見えないようにすることで対処しました。
最後に
思い出しながら書きましたが大きなところではこんなところかと思います。
サイトで音がでるのはあまりないかなと思いますが、
これから増えていくのかなーと思ってたりします。
特にloadとplayにユーザアクションが必要というのは
UIに関わってくるところでもあるので、ユーザさんが
「スマホサイトで音鳴らしたい！」
と言ったらそこを考慮しつつ設計するのがまず大事かと思います。
今回の案件でこの辺のノウハウ溜まったので、お仕事お待ちしております（・∀・）ﾆﾔﾆﾔ
MacBook系ユーザがAppleCareに入っておくべきXX個の理由
タイトルはやってみたかっただけです。はい。
なんとなくブロガーっぽい感じにしたいと思ってやってみました。
で、本題です。
この度、持ち歩き用MacBookProRetina13インチ（以下MBPR）がまたも
AppleStoreへ預け修理となりました。
またというのは、ちょっと前にこんなことがあったためです。
新年頭からジーニアスバーのお世話になった - yakisakeの日記
今回も同じMBPR、そして症状も同じですｗ
ディスプレイの違う箇所ですがホワイトスポットがでました。
よく見ないとわかりませんが、カーソルが指す部分と
その左下辺りに白くもわっとしたのがあります。
これ、俗にホワイトスポットというらしく、LEDが変になって
こんなことになってしまってるようです。
あぁまたかという感じで、AppleStoreアプリからGeniusBarを予約。
案件の谷間を狙って行ってきました。
症状を見せると今回はハードウェアチェックなどはなしで、入庫確定。
すぐにディスプレイの在庫確認してさくさくと事が進みました。
ただ、この現象、どうやらディスプレイを強く押した場合などに起こるらしく
今回が二度目ということで厳重注意をもらいました。。。(^_^;)
もちろんわざとやってるわけではないということはわかってもらってますが
無償でも交換は今回が最後かもしれない。。。と最後通告ががが。。。
常に持ち歩いてるので無意識になにか当たってるのかもしれません。。。
気をつけなければと思いつつ対策はすることにしました。（記事最後で
無事預けてAppleStoreを出る時にメールが着信。
どうやらAppleからの修理受付メールのよう。
中身を見ると、詳細なことがもろもろ書かれていました。
完全ペーパーレスにしたと言ってたのは間違いなかったようです。
で、修理細目が以下。
おぉ。。。ディスプレイまるごと交換はさすがにお高い。
Retinaディスプレイは通常のより割高と聞いてましたが
ここまで高いとは。。。
修理工賃含めると、諭吉さんが４人さよならです。
今回はAppleCareに入ってるおかげで請求は０円。
これ見てしみじみとAppleCareありがたいなぁ。。。と思ったわけです。
特にMBPRは部品が特殊すぎてその辺で買ってきて「はい、交換。。。」が
できないので、AppleCare必須ですね。。。
ロジックボード壊れたりしたら10万ぐらいとどこかで読んだこともあります。
特にMacBook系のラップトップは持ち歩く人が多いと思うので
ふいにぶつけたりして故障。。。ということも十分考えられます。
もしこれ読んでてまだAppleCare入ってないという方はぜひお布施を。
そして故障した時はAppleStoreのお世話に十二分になりましょう。
また、AppleCareの話とはそれますが、AppleStoreは完全にペーパーレス化したようで
修理預入から受取まで一切紙面によるやりとりはありませんでした。
サインはiPad上に指で書くようになってましたし、保証書なんてものは必要なし。
本体のシリアルIDから状態をすぐに呼び出してくれます。
あぁなんてステキなんだろう。。。AppleStore。
ちなみに今回の修理、預けてから２日で返ってきました。
仕事で使ってる身としてはすごくありがたい早い対応でした。
すごいAppleStoreヨイショしてますが、ニーハイの可愛いお姉さんがいたからという
不純な理由ではありませんよ。。。|дﾟ)ﾁﾗｯ
最後に、今後の対策として以下のカバーを購入しました。
MacBook Pro Retina ディスプレイ 13.3インチ用 マット ハードケース 《全12色》 ブラック（黒）
- 出版社/メーカー: MS factory
- メディア: エレクトロニクス
- クリック: 2回
- この商品を含むブログを見る
ずっと裸族（カバー、ステッカーなし）だったのですごく不本意なのですが
これ以上故障してもらっては困るので。。。
以上です。
いろいろ考えてRX100（デジカメ）を買いました
自宅のコンデジを買い換えました。
これまではかなりの昔のサイバーショットを使ってました。
さすがに性能的なところとメモリーカードの読み出しが
エラーになることもあったので、買い換えることにしたのです。
最初、一眼レフというものを買ってみようかなと思い
キャノンのEOS Kiss X7を候補にしていました。
コンパクトだしお値段的にも予算内。
が、ちょっと前に偶然にもプロカメラマンの方とお話する機会があって
ド素人な質問をいろいろぶつけてみました。
そもそもコンデジと一眼レフってなにか違うんですか？
というものから、専門用語の意味とかまで。。。
で、もしカメラ選ぶなら用途に合わせて買うのが良いですよ！
とアドバイスをもらったので、よく考えてみたのです。
うちの用途、カメラに求めるものは
・普段使い
・コンパクト
・妻も簡単に使える
という、よくよく考えると一眼レフってでかいし難しいから
全然用途に合ってないんじゃないかなぁ。。。って思いました(^_^;)
いろいろ楽しそうなのはあるんですが、そこが一番じゃないなぁと。
で、コンデジ＋α的なのが良いのかなと思いRX100が候補に上がりました。
これよりコンパクトなコンデジはたくさんありますが、
評判が良いのと、＋α的なところが設定できるそうかなと思いました。
安いお店見つけたら買おうと思ってたのですが、
なんとなく大型量販店によったら納得いく価格だったので、
全然買うつもりなかったのに買ってしまいましたｗ
ほぼ衝動買いに近いです。。。
手元にあったEye-Fiを挿入して、MacBookAirとリンク。
自動保存先をAmazonCloudDriveに設定し、環境構築は完了です。
まだ外にすら持って行ってませんが、いろいろ楽しみたいと思います。
自宅データを全部クラウドに持っていった話
自宅にある写真、ドキュメント類、音楽、動画の電子データは
これまで自宅のNASに保存していました。
少し前にHDD一つのNASでは不安でRAID1のNASに移行したりしてきましたが
最近、妻から使いにくい。。。使い方忘れるという要望が上がってきてました。
まー、確かにNASフォルダへのショートカットとか作って
ここに置いて！
とお願いする運用してきましたが、操作忘れることもあるようで。。。
GWで少し時間取れそうなので全部クラウドにアップして
今より楽な運用にしてみました。
で、契約したのは以下の２つ。
・AmazonCloudDrive（50GB、¥2,000/年）
・iTunesMatch（¥3,980/年）
Amazonには、写真、ドキュメント類などを、iTunesには音楽データをアップしました。
Dropboxなども検討しましたが、お値段でAmazonになりました。
iPhoneアプリもあってどこからで写真にアクセスできるのも大きかったです。
iTunesはまさにタイミングぴったりでサービス開始されて
iOSデバイスも多いため即導入が決定しました。
全部アップするのにGWをほぼ使ってしまいましたが、
クラウドに上げたことで安心感はアップしました。
Nokia Lumia525を購入しました
NokiaのWindowsPhone、Lumia525を購入しました。
公式の製品ページはこちら。
日本では発売されていないため、Expansysから購入しました。
SIMフリーのスマートフォン、タブレット、アップル製品 - EXPANSYS 日本
送料を少しけちってヤマト便にしたら、注文後にメールがきて
Nokia製品はFedExでしか配送できないよ〜と。。。
決済価格が自動で書き換えられてFedExで届きました。
注意書きには確かに書いてあったけど、注文途中で止めてよ。。。
忙しくてあまり触ってないのでとりあえず写真で。
正面から。
背面。
鮮やかな黄色。
Nexus5と並べるとこんな感じ。
ちょうど一回り小さい。
初期設定をしてこんな感じで画面が表示されました。
Windows8で見てて慣れてますがタイルスタイルです。
SIMなしということで、Nexus5のSIMを挿そうかなと思いましたが
Nexus5以外では使用できないらしく断念orz
なので、iPhone5のSIMでも暇ができたら挿してみようと思います。
これから開発機としていろいろ活躍してくれると思います。
javascriptでamf通信するの巻
いろいろあってjavascriptからamf通信しなきゃいけなくなりました。
絶対というわけではないのだけど、それが出来ると工数がかなり下がる。
ちょっと調べたらこんなの発見。
amf.js – A Pure JavaScript AMF Implementation
ピュアー！
って書かれてるくせに実装みてたらvbscript使ってる。
なんぞこれって、思っていろいろ調べた。
今更ながらのAjax(IE)の仕様にはびっくりしたと言う話 - maachangの日記
どうやら、IEはバイナリ処理部分でActiveXが必須らしいのだけど
すでにそんなのは提供しておらず、vbscriptに頼るしかないと。
確かにvbscriptで実装するとIEでも動くけど、IE10をターゲットにしたりしなきゃいけない。
※ブラウザモードがedgeだとvbscriptの実行が許可されていない
百歩譲っても、実際にやってみたら遅いこと遅いこと。
ほんと
「IEくそ」
って言っちゃったぐらい遅い。
vbscriptってこんな遅いのかー。。。
で、見つけたのがこれ。
IEでのAjaxバイナリ受信はこっちの方が圧倒的に速い. - maachangの日記
「圧倒的！」らしいのだけど、これは試してません。
ちょっと見方を変えたら異なる実装を見つけて
そちらのほうが転送に少し時間かかるだろうけどリスクはないと判断したのです。
単純にamfやめてjsonで通信するようにしただけなのだけども
amfで目指した工数削減部分は実現できそうなので問題無。
正直、すごい遠回りしたなーと思うけど、これはこれで
バイナリ通信する時は気をつけろが学べたので良かった。
一番行ってるラーメン屋について
今日は嫁が飲み会で夕飯が支給されず、ラーメン屋によって帰ってきました。
帰ってきて即これを書いてます。
立ち寄ってきたラーメン屋はこちら。
東北をメインにしてるラーメンチェーン店で、
僕が一年のうちに一番よく行くお店です。
僕が子どものころからあるお店で、昔は「あいづっぽ」って名前でした。
妻との間では「づっぽ」という愛称で通ります。
ここ、チェーン店なので「早い、安い、美味い」を売りにしてると思うんですが
「安さ」と「美味さ」のバランスがすんばらしい。
正直、ここのラーメンより美味いラーメンは五万とあると思う。
実際聞かれたらすぐに出てくる。
だけど、コスパって部分で言うと圧倒的に「づっぽ」が最強。
例えば、これ。
づっぽの中華そば。
チャーシュー、メンマ、海苔ものって見た目普通のラーメン。
いや美味いラーメン。
これが¥290。
五百円玉で余裕のお釣りゲット。
スタバのドリップコーヒーより安いっ。
しつこいようだけど、これで「美味い」。
ほんと素晴らしい。
拍手喝采。
これに、これ
鉄鍋チャーハンが付いてなんと¥600也。
鍋の下に固形燃料入ってて火が入ってる。
目の前でジュージュー言ってます。
忘れてた。
これも付きます。
ラーメンのお供、餃子です。
通常の半分の量ですが、これが付いて¥600。
コスパ恐ろしい。
素晴らしいとかじゃなくもはや怖い。
他に大好きなメニューあるんですが、今日食べたものをジャブ程度に紹介してみました。
というように、もはや恐怖すら覚えるづっぽ。
一人で食べてるといろいろ思い出すもので、づっぽについていろいろ思い出があることに気づきました。
じいさんと
今は亡きじいさん。
よくづっぽに連れて行ってくれました。
小さかった僕（たぶん小学低学年）は、大人ぶって辛し味噌ラーメンを注文。
辛くてどうしようにも食べれないのを、「美味しい」とか言って
若干の涙と共に食べきったことがあります。
秋田で
出張で秋田に３ヶ月ぐらいいたことがあります。
冬でした。めっちゃ寒い。。。
職場の近くに食べるところがなくいつも僕はづっぽへ。
お昼になるとづっぽへ行き、中華そばとチャーハン。
毎日のように食べ若干づっぽから遠のきました。
秋葉原で
これまた出張で東京へ。
住んだのは秋葉原近く。
慣れない土地で、秋葉原のヨドバシ近くにあった幸楽苑の看板がすごく輝いてみえよく行きました。
行かなくても乗り切れたけど、乗り切れたのはたぶんづっぽのおかげ。
というように、自分で書いてて「それほどでもない」という感じの
思い出を食べながら思い出しました。
せっかくこういう仕事してるので個人的に幸楽苑アプリ作ろうかって思ってるぐらい好きです。
幸楽苑にコネある人は連絡ください（真顔
なんかすごい遠回りになったけど、言いたいことは
「ほんと、づっぽって美味しいし、恐ろしく安いよっっ」
ただそれだけ。
