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をそのまま使えたほうがいいんですがね。

ツイートツイート

AtomにMarkDownでhtmlを書こう

まずは以下のようなテキストを書きます。

AtomにMarkDownでhtmlを書こう

### MarkDownとは
書いたテキストに簡単なマークアップをするだけで、HTMLを書き出すことができる、便利な方法です。
BlogやWeb記事を大量に書く人にとっては非常に便利なので、覚えておいて損はありません。

### AtomでMarkDown
今回は、Atomで書いたテキストを、htmlにする方法を書いていきます。

#### Atomをダウンロードする
まずは[Atomのサイト](https://atom.io/)から、Atomをダウンロード、インストールしましょう。

#### テキストを書く
htmlにしたい文章を、プレーンにどんどん書いていきましょう。

#### MarkDownプレビュー表示
Macなら shift + ctrl + M
Windowsなら Alt + P
で、プレビューウインドウが表示されます。

僕の環境ではなぜかshift + ctrl + Mが反応しないので、AtomのPackagesメニューからMarkdown Preview、Toggle Previewを選んでいます。

#### 見出しをマークアップする
見出しのテキストの前に「# 」を入れると、h1になります。
「## 」と2個ならh2。h4は、もちろん「#### 」です。
スペースを一つ入れるのをお忘れなく。

#### リンクをマークアップする
\[リンクのテキスト](URL)の記法で、リンクがかけます。
[こんな感じ](http://www.miyasaka.info/)みたいな感じです。

#### ulやol
テキストの冒頭に「* 」または「- 」でul、「1. 」のように数字だとolのリストになります。
htmlで直接<ul><li>なんとか</li>を打つのは面倒ですからね。
これは便利。

以下、リストのテスト

##### 似ているけど違いがわからない動物
* トド
* セイウチ
* アザラシ
* オットセイ
* アシカ

##### ポケモンGoでたくさん出てるけど、もういらないとおもうポケモンベスト3
1. ポッポ
2. コラッタ
3. ズバット

#### マークアップできたら
右側のプレビューウィンドウで右クリック、「Copy As HTML」。
Blogやエディタにペースとすれば、HTMLが貼り付けられると思います。

ここで説明した、「#」「リンク」「*」を覚えるだけで、かなり便利にテキストをhtmlにできると思います。

これが、htmlとしてコピペできます。
↓以下の通り。

MarkDownとは

書いたテキストに簡単なマークアップをするだけで、HTMLを書き出すことができる、便利な方法です。
BlogやWeb記事を大量に書く人にとっては非常に便利なので、覚えておいて損はありません。

AtomでMarkDown

今回は、Atomで書いたテキストを、htmlにする方法を書いていきます。

Atomをダウンロードする

まずはAtomのサイトから、Atomをダウンロード、インストールしましょう。

テキストを書く

htmlにしたい文章を、プレーンにどんどん書いていきましょう。

MarkDownプレビュー表示

Macなら shift + ctrl + M
Windowsなら Alt + P
で、プレビューウインドウが表示されます。

僕の環境ではなぜかshift + ctrl + Mが反応しないので、AtomのPackagesメニューからMarkdown Preview、Toggle Previewを選んでいます。

見出しをマークアップする

見出しのテキストの前に「# 」を入れると、h1になります。
「## 」と2個ならh2。h4は、もちろん「#### 」です。
スペースを一つ入れるのをお忘れなく。

リンクをマークアップする

[リンクのテキスト](URL)の記法で、リンクがかけます。
こんな感じみたいな感じです。

ulやol

テキストの冒頭に「* 」または「- 」でul、「1. 」のように数字だとolのリストになります。
htmlで直接<ul><li>なんとか</li>を打つのは面倒ですからね。
これは便利。

以下、リストのテスト

似ているけど違いがわからない動物
  • トド
  • セイウチ
  • アザラシ
  • オットセイ
  • アシカ
ポケモンGoでたくさん出てるけど、もういらないとおもうポケモンベスト3
  1. ポッポ
  2. コラッタ
  3. ズバット

マークアップできたら

右側のプレビューウィンドウで右クリック、「Copy As HTML」。
Blogやエディタにペースとすれば、HTMLが貼り付けられると思います。

ここで説明した、「#」「リンク」「*」を覚えるだけで、かなり便利にテキストをhtmlにできると思います。

ツイートツイート

牛久大仏花火大会にてきとぅなキャプションをつけてみた

「牛久大仏 花火」で画像検索すると、この世の終わりとしか思えない写真が大量に出てきて怖かったので、ちょっとてきとぅなキャプションをつけてご紹介します。


▲ちなみに、牛久大仏は、ガンダムより、エヴァよりもでかい。


▲大仏様が静かに怒りながら、力を貯めています。


▲大仏様の怒りが最高潮に。今日世界は終わります。突然ごめんね。


▲力が放射されていきます。心が弱い人は、もうこれだけで意識を失います。


▲最初の一撃です。ここから板野サーカス的な攻撃が始まります。


▲ここから本気です。この攻撃で、東京はほぼ壊滅しました。


▲総攻撃です。日本の国土の95%が海に沈みました。


▲米軍が最新兵器で反撃します。しかし、大仏様はびくともしません。さすが大仏、なんともないぜ!

以上、ネタですので、仏教関係の方からのクレーム等はご容赦ください。

ツイートツイート

atomとchromeでもLiveStyle

livestyle-atomのインストール

apmが動くなら、
apm install livestyle-atom

串設定ができていない場合などは
AtomメニューからPreference, Installをクリック
Search Packagesで
Livestyle-atom
を検索、Install
Atomを再起動

ChromeにLiveStyleをインストール

ChromeウェブストアでEmmet LiveStyleをインストール
Chromeを再起動

設定する

Chromeに追加されたLiveStyleボタンをクリックして、右上のOFFをONにする
スクリーンショット 2016-06-09 19.35.03
今回はstyle.cssというcssを変更する場合。

いじる

ChromeのDeveloper toolsでstyleを変更すると、atomで開いているエディタ内のcssが自動で変更された。
スクリーンショット 2016-06-09 19.36.21
スクリーンショット 2016-06-09 19.36.42
▲変更前
スクリーンショット 2016-06-09 19.37.00
スクリーンショット 2016-06-09 19.37.08
▲変更後

反対に、atomでstyleを変更すると、chromeの画面がリアルに書き換わります。

ツイートツイート

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. ナビゲーションの簡易化

実際に使ってみる

アイコンが変わった

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

ナビゲーションの簡易化

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

セグメント

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

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

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

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

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

ツイートツイート

サイトを公開した直後にリファラスパム

本日、クレジットカード倶楽部というサイトを立ち上げました。
アフィリエイト目的ではなく、クレジットカードユーザーに本当に役にたつ情報を発信するメディアを目指していきます。
SAKANA Magazineとともに、よろしくお願いいたします。

さて、このクレジットカード倶楽部を公開して、sitemap.xmlをgoogleに送った数分後。
Google Analyticsのテストのためにリアルタイム計測を確認したところ、すでにリファラスパムがやってきていました。
Googleのインデキシングのスピードも速いけど、リファラスパムの対応速度もものすごいですねえ・・・
スクリーンショット 2016-03-24 18.04.40

ツイートツイート