スマートフォン | miyasaka.info

YouTube再生で「スマフォでも音を出すな！」と言われたら

先日の記事、YouTube動画をWebページに埋め込み、字幕版・音声あり版を切り替えたいでは、

PCでは自動再生、音声オフ、字幕表示
音声を出したい時は、リンク先で音声あり版を見る
スマフォは音声オフに出来ない

という方法を紹介しました。

ところが、
どーーーーーーしてもスマフォで音声オフにしたい！
いや、オフにしやがれ！
という要望をいただきました。

オフにするのは無理です。

なんで、そういう時は、音声あり版と、音声無し版、両方をYouTubeにアップしてくださいな。

つまり、

PCでは「音声無し版」を自動再生、字幕表示
スマフォは再生ボタンを押すと「音声無し版」を再生、字幕表示
PCでもスマフォでも、音声を出したい時は、リンク先で音声あり版を見る

みたいな感じです。

テストページはこちらをごらんください。

「音声無し版」を使えば、html/ jsで「音声のオフ」処理をする必要がないので、iframe_apiを使わず、iframeだけで処理できます。

ソースはこちら。

<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1">
  <script   src="https://code.jquery.com/jquery-1.12.4.min.js"   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="   crossorigin="anonymous"></script><!--jqueryを読み込み-->
  <script>
    $(function() {
      var agent = navigator.userAgent;
      if(agent.search(/iPhone/) != -1){//iPhoneの処理
        $('#player').css({display : 'none'});//PC用の動画を非表示に
        $('#sp_player').css({display : 'block'});//スマフォ用プレイヤーを表示
      }else if(agent.search(/iPad/) != -1){//iPadの処理
        $('#player').css({display : 'none'});
        $('#sp_player').css({display : 'block'});
      }else if(agent.search(/Android/) != -1){//Androidの処理
        $('#player').css({display : 'none'});
        $('#sp_player').css({display : 'block'});
      };
    });
  </script>
</head>
<body>
  <div id="player"><!--PC用プレイヤー-->
    <iframe width="560" height="315" src="https://www.youtube.com/embed/BmBUbaWkLqw?rel=0&showinfo=0&cc_load_policy=1&autoplay=1" frameborder="0" allowfullscreen></iframe><!--自動再生で音声無し版を字幕表示-->    
  </div>

  <div id="sp_player" style="display:none;"><!--スマフォ用プレイヤー-->
    <iframe width="560" height="315" src="https://www.youtube.com/embed/BmBUbaWkLqw?rel=0&showinfo=0&cc_load_policy=1" frameborder="0" allowfullscreen></iframe><!--音声無し版を字幕表示-->
  </div>
  <p class="link_text_sp">音声ありの動画は<a href="https://youtu.be/Yz_edq9mJrE" target="_blank">こちら</a></p><!--音声あり版のリンク-->

</body>
</html>

<head>

$(function() {

var agent = navigator.userAgent;

if(agent.search(/iPhone/) != -1){//iPhoneの処理

$('#player').css({display : 'none'});//PC用の動画を非表示に

$('#sp_player').css({display : 'block'});//スマフォ用プレイヤーを表示

}else if(agent.search(/iPad/) != -1){//iPadの処理

$('#player').css({display : 'none'});

$('#sp_player').css({display : 'block'});

}else if(agent.search(/Android/) != -1){//Androidの処理

$('#player').css({display : 'none'});

$('#sp_player').css({display : 'block'});

};

});

</script>

</head>

<body>

</div>

</div>

<p class="link_text_sp">音声ありの動画は<a href="https://youtu.be/Yz_edq9mJrE" target="_blank">こちら</a></p>

</body>

</html>

iPhoneのGoogle Analyticsアプリがバージョンアップされた

iPhone用のGoogle Analyticsアプリがバージョンアップされ、バージョン3.0になりました。

リリースノートより

バージョン 3.0 の新機能

* Sharing! Share a report via text, email, chat, and more
* Customization! Customize reports and save them to your dashboard for quick follow-up
* Brand new look & feel; easier to use than ever
* New scorecard visualizations: tab through metrics, swipe through dimensions
* Change & compare date ranges, dig deeper by adding segments
* Greatly simplified navigation and report discovery

何が変わったのか

1. 共有：レポートをテキスト、メール、チャットで共有
2. カスタマイズ：よく使用するレポートをマイレポートとして保存
3. 新しいルック&フィール：簡単に使える
4. 新しい表示方法：タブとスワイプで表示項目を切り替え
5. データ表示期間の変更と比較にセグメントを追加可能
6. ナビゲーションの簡易化

実際に使ってみる

アイコンが変わった

まずこれに慣れるのに時間がかかりそうですね。

ナビゲーションの簡易化

左上のハンバーガーメニューから開くナビゲーション。
以前のバージョンでは「ユーザー」などの項目をタップするとサブメニューが表示されるドリルダウン型でしたが、バージョン3.0ではサブメニューは廃止。
レポート画面でタブ・スワイプでレポートを切り替える方式になりました。

セグメント

データ表示期間に、新規・リピート、検索・参照トラフィック、コンバージョンが達成された訪問、モバイルのトラッフィクなどフィルタが設定できるようになりました。

ファーストインプレッション

UIが大きく変わったので、慣れるまで時間がかかりそうですね。
いまだにページビューをどこで見るのか、見つかりません笑
タブ&スワイプでレポートを切り替えられるようになった分、1画面に表示される情報量が増加しました。
その分、データが表示されるまで時間がかかるのが気になります。
すぐに見ておきたい情報は、マイレポートに登録しておき、細かく見たい時に通常レポートをチェックする、という使い方がいいかもしれませんね。
フィルタは便利ですね。
ラベル文字が大きすぎたり、グラフの下の時間表示が見にくかったり、日本語にうまく最適化できていない部分が気になります。

僕ら1日24時間ログを見ているユーザーにとって、最も重要なアプリなので、新しい機能の追加やUIの改善はありがたいですね。

以上、速報レポートでした。

モバイルバッテリーを買った

Facebook広告に出てきたUSB型モバイルバッテリーを買った。

2400mAhと容量はあまり大きくないが、緊急用としては十分な容量。
重さは73gと、iPhone5の112gに比べて65%ぐらい。
毎日持ち歩く用にはなるべく軽い方がいいので、これならまあ許せるか、といった感じだ。

Android 2.3でアコーディオン内にiframeがあるとスクロールできないバグ

タイトルでほぼ言い尽くしたが、Android 2.3で、アコーディオンなど非表示(display:none)になっている部分にiframe(YouTube、ソーシャルメディアボタン)があると、ファーストビュー表示後スクロールできず、ブラウザがフリーズした状態になるバグがある。
アコーディオン部をタップした時にiframeをhtmlに追加するなどの方法で回避できるようだ。

ちょっと高い液晶保護フィルムを買ってみた

ふじやんのお薦めで¥2,940とちょっとお高めの、iPhone用のガラス製液晶保護フィルムを買った。

ぺにゃぺにゃのフィルムと違い、ガラス製なので固く、貼りやすい。
指紋もほとんど付かず、¥2,940分の価値は十分あると感じた。

スマフォ制作おすすめ書籍

「iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザイン」

「モバイルデザインパターン」

「すべての人に知っておいてほしいスマートフォンサイトデザインの基本原則」

「スマートフォンサイト設計入門」

「スマートフォンサイトデザインブック仕事で絶対に使うプロのテクニック」

「スマートフォンサイトのためのHTML5+CSS3」

dショッピング、まとめ買いすると高くなる

598円の商品を2個買うと1,196円。
2個セットだと1,220円。
こういう価格メンテミスも通販として致命的。
逆セブンネットショッピング祭りでは、炎上マーケティングにもならない

値段は高くないんだけどね・・・

ミイルのhtmlメールがものすごく良く出来ている

「どんな料理もおいしく写す魔法のカメラ」、AndroidとiPhone用アプリmiil（ミイル）。

アプリのユーザーインターフェースも良く出来ているが、初心者向けのhtmlメールがものすごく良かった。
ミイルでできること、画像の編集の仕方、写真の投稿の仕方がわかりやすく説明されてるし、ポップで楽しい。
スマフォでメール内の「写真を投稿する」リンクをクリックすると、ミイルのアプリが起動する導線も良い。
アプリの利用率向上の参考になるだろう。

dショッピングで買い物してみた

NTTドコモのECサービス、dショッピングで買い物をしてみた。

dショッピングは、NTTドコモが運営する、日用品のECサイトだ。
とりあえず、一番おすすめ商品（？）箱ティッシュと水、猫の餌を買ってみた。

ドコモポイントが「使える、貯まる」ECサイトなので、ドコモユーザーはお得だ。
購入金額¥2,000以上で送料無料。
ドコモに登録してある住所への配達なら、住所入力がいらないので楽。
支払いはドコモケータイ払い、クレジットカード払いが選べる。
ネットワーク暗証番号とSPモード暗証番号、両方の入力が必要なので、セキュリティ的にも安心。
SPモード暗証番号がデフォルト（同じ数字の4桁）のままだと、購入時に変更が求められるあたりも、さすがドコモ公式サービスだ。

ただし、サイトのユーザビリティが非常に悪い。
商品カテゴリ選択がページ下部にしかない、購入ボタンをタップしても反応がないなど、購入するまでの導線でかなりストレスが溜まる。
また商品ページと購入ページのデザインが大きく違うのも違和感を感じる。
エレメントに赤背景白文字が多すぎ、バナーが楽天的なダサさなあたり、これは狙ってやっているのだろうか？

「iPhoneでスクロールバーが出ない」問題の対策

縦に長いページなのに、Android2.1のスマフォでスクロールバーが出ない・・・という症状が発生。
以下のjsをhtmlに挿入することによって上記症状に無理矢理対応してみた。

&lt;script type="text/javascript"&gt;
&lt;!--
if ( navigator.userAgent.indexOf('iPhone') &gt; 0 || navigator.userAgent.indexOf('iPod') &gt; 0) {
  document.write('&lt;meta name="viewport" content="width=device-width, maximum-scale=2.0, user-scalable=yes" /&gt;');
}else if( navigator.userAgent.indexOf('Android') &gt; 0 ) {
  document.write('&lt;meta name="viewport" content="width=device-width,initial-scale=1.1,maximum-scale=2.0, user-scalable=yes" /&gt;');
}
--&gt;
&lt;/script&gt;

<!--

if ( navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPod') > 0) {

document.write('<meta name="viewport" content="width=device-width, maximum-scale=2.0, user-scalable=yes" />');

}else if( navigator.userAgent.indexOf('Android') > 0 ) {

document.write('<meta name="viewport" content="width=device-width,initial-scale=1.1,maximum-scale=2.0, user-scalable=yes" />');

}

-->

</script>

見ての通り、andoridの場合はviewportでinitial-scaleを1.1にして、ちょっとだけ拡大してみたところ、スクロールバーが出た。
この方法が正しいのかわからないけど。