Magnific Popupで、YouTubeの関連動画を非表示にしたい

Magnific Popupを使うと、YouTubeにリンクした動画を、モーダルで表示できる。

しかし、rel=0オプションでキャンセルできるはずの動画再生後の関連動画表示が、オフに出来ない。
こんな感じで、オフにできるらしい。
Unable to remove related videos in youtube

ツイートツイート

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

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

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

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

ところが、
どーーーーーーしてもスマフォで音声オフにしたい!
いや、オフにしやがれ!

という要望をいただきました。

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

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

つまり、

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

みたいな感じです。

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

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

ソースはこちら。

ツイートツイート

WordPressで新規ページを作る(動画)

WordPressとは

このサイトmiyasaka.infoや、SAKANA Magazineなど多くのサイトで僕が使っているのがオープンソースCMS、Wordpress。
CMSとは、Contents Management Systemのこと。
ページ作成やサイトの管理がとても簡単にできるシステムです。
世界中で使われているので、不具合があれば誰かが見つけ、すぐに対応されます。
「プラグイン」という機能追加が豊富に揃っているのもWordpressの特徴です。
では、実際に新規ページを作ってみましょう。

新規ページを作る

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-26-14-18-07

こちらがWordpressの管理画面。
「新規追加」でページの作成画面が開きます。
タイトルと本文を入力して、「プレビュー」をクリックすると。
ほら、こんな簡単にページができました。

リンクを設定する

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-26-14-18-27

他のサイトへリンクしたいテキストを選択して、「link」ボタンをクリック。
リンク先のURLを入れて「リンク追加」をクリック。
これでリンクが設定できました。

画像を入れる

画像を入れたい場所をクリックして、そこに画像をドラッグ&ドロップ。
これでページに画像が入りました。
ページの一番上に入る「アイキャッチ画像」も設定できます。

プラグインの「TablePress」でテーブルを作る

表組に使うhtmlの「table」タグ。
tr,td,テキスト、/td,/tr
・・・って、tableをhtmlで書くのってとても面倒ですよね。
Wordpressに色々な機能を追加できる「プラグイン」ですが、tableを簡単に作れる「TablePress」というものがあります。
これを使えば、Excelのような画面でtableタグを作成できます。

サイト名URL
miyasaka.infohttp://www.miyasaka.info/
SAKANA Magazinehttp://sakana.fish/magazine/

公開する

ページが出来上がったら、「公開」ボタンを押すだけ。
公開日時をタイマーで設定することもできます。
Webを見る人が多い朝や昼休みを狙って新規ページを公開する、ということもできます。

ソーシャルメディアに自動投稿

プラグインを使えば、ページの公開と同時にTwitterやFacebookにシェアすることもできます。

とっても便利、Wordpress

コンテンツサイトの運用において、大事なのは良いコンテンツを、たくさん作ること。
新規ページ作成やサイトの管理が面倒だと、コンテンツへ集中する時間を取られてしまいます。
Wordpressなら、コンテンツ作成に集中することができます。

ツイートツイート

Macで画面操作を動画にする方法

  • QuickTime Playerを起動する
  • ファイルから新規画面収録をクリック
  • %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-26-12-59-08

  • 「画面収録」ウィンドウが表示される
  • %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-26-12-59-50

  • 真ん中の録画ボタンをクリック
  • フルスクリーンを録画するならクリック、画面の一部を録画するならドラッグで録画が始まる
  • %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-26-13-01-00

  • 本当は「画面収録」ウィンドウで録画終了ボタンをクリックするはずなんだけど、なぜかウィンドウが行方不明になってしまう
  • しょうがないので、QuickTime Playerを終了すると、動画保存のダイアログが出てくるので、保存。
  • %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-26-13-05-34

  • QuickTime形式(mov)の動画ファイルが保存される
ツイートツイート

YouTube動画をWebページに埋め込み、字幕版・音声あり版を切り替えたい

YouTubeの動画をPC用Webに埋め込み、

  • 標準では音声なし、字幕ありの動画を自動再生
  • 音声あり、字幕なしへのリンクを表示

とかやる方法です。

こうしておけば、プロモーション的動画を無理矢理来訪者に見せることができます。
マーケティングファーストで、UXファーストじゃないのでアレですけどね。

スマフォは自動再生ができないので、普通のiframe埋め込みを表示します。

デモページ

デモページ

動画表示の幅とか細かいとこは適当でごめんね。

まずは動画の準備

YouTubeに動画を登録します。
僕はiMovieから「共有」で動画登録をしています。

字幕を入れる

  • YouTube画面右上の「アカウント」「クリエイターツール」をクリック
  • 「動画の管理」をクリックし、字幕を入れたい動画の「編集」の右にあるプルダウンから「字幕」をクリック
  • 「新しい字幕を追加」「日本語」とクリック
  • 字幕を上げる方法は幾つかあります。今回は「新しい字幕を作成する」をクリック
  • 字幕のテキストを入力。「+」ボタンをクリックします。
  • 字幕が出る、消えるタイミングの調整もできます。
  • 右上の「公開」をクリック

Webページに埋め込む

YouTubeの「共有」「埋め込みコード」で取得したiframeソースにパラメーターをつけるだけで、自動再生、字幕の有無は設定できるのですが、「音声なし」はコントロールできません。
なので、YouTubeのiframe_apiでWebページに表示させます。

ソース

こんな感じでいかがでしょうか。

ツイートツイート

WordPressでPDFのサムネイルをつくってくれるプラグイン、PDF Image Generator

PDF Image Generatorは、WordpressでPDFのサムネイル画像をつくってくれるプラグイン。

通常、Wordpressのメディア機能でアップロードしたPDFを投稿に追加すると、こんな感じになります。
5b172a20858c8e40cb5d001fb5de44da

PDF Image Generatorを使うと、こんな感じになります。

2016 Doodle フルーツゲームのサムネイル

自動的にサムネイル画像が作られて、リンク先はPDFになっています。

ただ単にPDFへのリンクを張っているだけのページってよくありますが、こんな感じにサムネイル画像があるだけで、一気にコンテンツサイト感が出てきて、いいじゃないですか。
まあ、飛び先はPDFですが・・・

スマフォでPDFを読んで、満足している人っているのかなあ?

詳細は作者のサイトへ。
PDF Image Generator : PDFのサムネイル画像を自動生成するプラグイン。

注意点

ご注意:このプラグインを有効化するにはサーバーにImageMagickとGhostScriptがインストールされている必要があります。またphpのexecコマンドが許可されているか、imagick APIがインストールされている必要があります。

ツイートツイート

GTMとGoogle AnalyticsでFacebookとTwitterのボタンクリックを計測する

GTM (Google Tag Manager) + Google Analyticsで、FacebookとTwitterのボタンクリックを計測する方法です。
こちらは2016年8月8日の情報です。
どうせまたGTMもGAも、画面が変わってしまうと思いますので。

GTMの初期設定

まずはGTMのアカウント作成、コンテナ作成。
GTMのタグをHTMLに入れて、PVが計測できる状態まで設定します。

変数を作る

  • GTM管理画面左側の「変数」をクリック
  • 「新規」ボタンをクリック
  • 「データレイヤーの変数」をクリック
  • 「データレイヤーの変数名」に「socialAction」と入力
  • 「変数を作成」ボタンをクリック。
  • 「変数名の変更」で「socialAction」と入力、「保存」ボタンをクリック
  • これで変数「socialAction」ができました
  • 同じように「socialNetwork」「socialTarget」を作ります

スクリーンショット 2016-08-08 16.23.20

トリガーを作る

  • GTM管理が面左側の「トリガー」をクリック
  • 「新規」ボタンをクリック
  • 「カスタムイベント」をクリック
  • イベント名を「socialEvent」に
  • トリガー配信は「event」「等しい」「socialEvent」
  • 「トリガーを作成」ボタンをクリック
  • 「トリガー名の変更」で「social」と入力、「保存」ボタンをクリック

スクリーンショット 2016-08-08 16.23.52

タグを作る

  • GTM管理が面左側の「タグ」をクリック
  • 「新規」ボタンをクリック
  • 「プロダクトを選択」で「Google Analytics」をクリック
  • 「タグの種類を選択」で「ユニバーサルアナリティクス」をクリック
  • 「トラッキングID」に対象サイトのGAのUA番号を入力
  • 「トラッキングタイプ」のプルダウンで「ソーシャル」を選択
  • 「ネットワーク」は「{{socialNetwork}}」、「アクション」は「{{socialAction}}」、「アクションターゲット」は「{{socialTarget}}」を入力し
  • 「続行」ボタンをクリック
  • 「配信するタイミング」で「その他」をクリック
  • 先ほど作ったトリガー「social」にチェックを入れ、「保存」ボタンをクリック
  • 「タグを作成」ボタンをクリック
  • 「タグ名の変更」で「social」と入力、「保存」ボタンをクリック

スクリーンショット 2016-08-08 16.23.37

公開

作った変数、トリガー、タグを公開します。

ソース

ソースの変更方法

GTMのタグを入れる

3〜11行目。GTMのタグを入れてあります。

FB関数を初期化する

FB.eventでfacebookのイベントを取れるよう、16行目〜21行目を書きます。

trackFacebook関数呼び出し

52行目から書かれているtrackFaebook関数を、ここ(23行目)で呼び出しています。

facebookのsdk.js呼び出し

26〜32行目。普通のsdk.jsの呼び出し方法です。
30行目と20行目で違うversionが指定されていると動かないはずなので注意。

widgets.js呼び出し

36〜41行目。
twitter純正シェアボタンなどのwidgets.js呼び出しと微妙に違うので注意してください。

イベントをGAに送る

52行目〜64行目で、FB.eventが発生したらdatalyer.pushでGAにデータを送っています。

注意点

  • Facebookのシェアは計測できません
  • twitterはclickとtweetの両方のイベントが取れてしまいます

参考サイト

Google Analyticsのソーシャルプラグイン解析について(タグマネージャーとユニバーサルアナリティクス対応)

ツイートツイート

WordPress投稿にソースを表示するプラグイン、Crayon Syntax Highlighter

Web系のBlogを書いていると、htmlやcss、jsのソースをサンプルとして表示したいことがよくあります。
そんな時に便利なのが、Crayon Syntax Highlighter。

プラグインのインストール

WordPressのプラグイン新規追加画面で、「Crayon Syntax Highlighter」を検索してインストールして、プラグインを有効化。

設定

WordPress管理画面で、設定ーCrayonを選択。
テーマやフォント、ツールバーなどの設定ができます。

スクリーンショット 2016-08-08 12.41.48

記述方法

<pre>でソースを囲むと、こんな感じで表示されます。

投稿画面のcrayonボタン

preで囲むだけじゃなく、いろいろカスタマイズしたい時は、投稿画面に追加されている「crayon」ボタンをクリック。
色々細かな表示設定を変更できます。
スクリーンショット 2016-08-08 12.52.54

ツールバー

ツールバーは、左から

  • 行番号非表示切り替え
  • 素のコード表示切り替え
  • ワードラップ表示の切り替え
  • コピペ用全選択
  • 別画面でソース表示

となっています。

ツイートツイート

FacebookとTwitterのボタンクリックをGoogle Analyticsで計測する

Webページ内にFacebookやTwitterの純正ボタンを入れると、iframeだったりなんだりで、Google Analyticsのクリック計測が簡単にはできない。
FacebookのSDK(sdk.js)とTwitterのwidgets.jsを使って、GAの「集客」「送客」「プラグイン」で集客できるようにしてみる。

<div id=”fb-root”></div>
<script src = “//connect.facebook.net/ja_JP/sdk.js”></script>
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : ‘v2.5’
});
};
FB.Event.subscribe(‘edge.create’, function(targetUrl) {ga(‘send’, ‘social’, ‘facebook’, ‘like’);});
FB.Event.subscribe(‘edge.remove’, function(targetUrl) {ga(‘send’, ‘social’, ‘facebook’, ‘unlike’);});
window.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src=”https://platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);return window.twttr||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,”script”,”twitter-wjs”));
twttr.ready(function (twttr) {twttr.events.bind(‘click’, function (e) {ga(‘send’, ‘social’, ‘twitter’, ‘click’); });
});</script>

詳しくはanalytics.jsのソーシャル インタラクション関連ページをどうぞ。

Lineボタンなどは

<script>
jQuery(function () {
jQuery(“.social_button_line”).click(function () {
ga(‘send’, ‘social’, ‘line’, ‘click’);
});
});
</script>

みたいな感じで、class(上の例では.social_button_line)のclickを計測してga(‘send’, ‘social’, ‘line’, ‘click’);すればいいです。

これで、「集客」「送客」「プラグイン」の「ソーシャルネットワークとアクション」に
facebook : like
facebook :unlike
twitter: click
line : click
の数が集計されます。

ツイートツイート

iPhone 7の発売日はいつ?2016年9月16?

ヘッドフォンジャックの廃止、カメラの大型化、プロセッサの高速化などが噂されている、iPhone 7。
iPhone 4以降、毎年9月頃に発売されているiPhoneシリーズなので、今年も9月に発売されるのではないかと予想されています。

そんな状況の中、2016年9月16発売という情報が流れています。
iPhone 7の発売日は、2016年9月16日金曜日!?

情報ソースは、@evleaks氏のtweet。
以前からApple関連の情報をリークしているアカウントなので、本当なのかもしれません。
そうなると、一週間前の9月9日に予約開始、ぐらいのスケジュールになるのでは。

僕は先日iPhone 6を新しいものに交換したばかりで、バッテリも元気なので、すぐに買い換えたい理由はないのですが。
iPhoneが壊れたので「ケータイ補償サービス」で交換品を送ってもらった

とはいえ、ドコモポイントも貯まっているし、dカードゴールドのケータイ購入ご優待券もあるので、多分買い換えます。
dカードGOLD限定の「ケータイ購入ご優待券」が来た

ヘッドフォンジャックが廃止になるのはいいんですが、Lightningから3.5mmのヘッドフォンジャックへの変換コネクタがダサかったりしたらどうしよう・・・というのがちょっと怖いですね。
Bluetooth接続のヘッドフォンを買ってもいいのですが、今使っているbeat tour2やAKG Q460をそのまま使えたほうがいいんですがね。

ツイートツイート