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


WordPressのプラグインがSSLでエラーを出すので修正

以前紹介したWordpressプラグインScroll to Topが、SSLでエラーを出していた。

エラー内容は以下の通り。
Mixed Content: The page at ‘https://www.hoge.com/’ was loaded over HTTPS, but requested an insecure script ‘http://www.hoge.com/wp-content/plugins/scroll-to-top/js/stt.js?ver=1.0′. This request has been blocked; the content must be served over HTTPS.

プラグイン用のJSが、http://から呼ばれているためにブロックされている。

WordPressが吐いたソースを見ても
<script type=’text/javascript’ src=’http://www.hoge.com//wp-content/plugins/scroll-to-top/js/stt.js?ver=1.0’>
となっている。
そりゃーブロックされますよね。

修正するには、/wp/wp-content/plugins/scroll-to-top/stt.phpを修正する。

元のソース

wp_enqueue_script(‘stt’, WP_PLUGIN_URL . ‘/scroll-to-top/js/stt.js’, array(‘jquery’), ‘1.0’ );


修正後

wp_enqueue_script(‘stt’, plugins_url() . ‘/scroll-to-top/js/stt.js’, array(‘jquery’), ‘1.0’ );

WP_CONTENT_URLやWP_PLUGIN_URLは、Wordpressの管理画面で設定されたURLを読むだけなので、SSLを自動認識しない。
site_url()やplugins_url()を使わないとダメ、ってことですね。

JSやCSSを追加する系プラグインは、同じ様な方法で修正できるんじゃないかと思います。


WP Social Bookmarking Lightに「メールで送る」ボタンをつけたい

WP Social Bookmarking LightはTwitter、Facebook、Line、Google +など、多くのソーシャルメディアシェアボタンを簡単にWordpressに追加できる。
しかし、「メールで送る」ボタン機能がないので、簡単に作ってみた。

仕様として、WP Social Bookmarking Lightのclass、.wp_social_bookmarking_lightの中の、最後にjQueryのaddpentToで追加するように作っている。

jQuery(document).ready(function($) {
var pageTitle = document.title;
var pageUrl = location.href;
var shareText =’ここにメール本文に書きたいテキストを書く%0d%0a%0d%0a’;
jQuery(‘<div class=”wsbl_mail”><a href=”mailto:?subject=’ + pageTitle + ‘&body=’ + shareText + pageUrl + ‘”><img src=”/wp-content/uploads/2016/02/mailto.jpg” alt=”メールで送る” width=”88″ height=”22″></a></div>’).appendTo(‘.wp_social_bookmarking_light’);

メールで送るボタンのサンプルはこんな感じで。
mailto


WordPressをソーシャルシェア

WordPressのプラグイン、WP Social Bookmarking LightとAll in One SEOを使った方法の紹介です。

WP Social Bookmarking Lightの設定

「WP Social Bookmarking Light」をインストールして、設定画面からお好きなソーシャルメディアを右から左にドラッグしましょう。
ここではFacebook、Twitter、LINEを設定してみました。
スクリーンショット 2016-01-15 17.05.42

All in One SEOの設定

トップページや、各投稿毎にシェア画像を設定するのに、今回はWordpressプラグイン「All in One SEO」を使います。
「All in One SEO」をインストール。
スクリーンショット 2016-01-15 16.25.27
All in One SEOの「Feature Manager」から、「Social Meta」の「Activate」ボタンを押す。
スクリーンショット 2016-01-15 16.27.40
All in One SEOの「Social Meta」をクリック。
スクリーンショット 2016-01-15 16.28.15

トップページのシェア画像設定

まずはHome Page Settingsの各項目を設定。これでトップページのシェア設定ができます。
スクリーンショット 2016-01-15 16.37.03
とりあえず、ここではog:imageだけ設定しておきます。
・「Home Image」の「Upload Image」をクリックし、新規画像を追加する
・同じく「Home Image」の「Upload Image」で、メディアにアップロードされているファイルを選ぶ
・画像のURLを直接指定する
などの方法で設定可能です。

個別ページのシェア画像設定

1.「All in One SEO」の「Image SettingsーSelect OG:Image Source」から設定する方法
・Default Image:個別ページ共通で、同じ画像を使う
・アイキャッチ画像:個別ページに設定されたアイキャッチ画像を使う
・Image From Custom Field:カスタムフィールドで設定した画像を使う
などが選べます。
スクリーンショット 2016-01-15 16.47.04
2.個別ページのAll in One SEO設定する方法
投稿の下部にある「All in One SEO Pack」の「Social Settings」タブで、Custom Imageを設定します。
スクリーンショット 2016-01-15 17.00.46


SSL証明書の期限切れgithub serverにSourceTreeから無理やりプッシュする

github/ github enterpriseのSSL証明書の期限が切れてしまうと、「fatal: unable to access ‘: SSL certificate problem: Invalid certificate chain」のようなエラーが出て、プッシュできなくなる。
スクリーンショット 2016-01-08 12.07.24

無理やりプッシュするには、SourceTreeの環境設定ーGitで、「SSL証明書の検証をしない」にチェックを入れるといい。
スクリーンショット 2016-01-08 12.04.27

まあ、根本的な解決方法ではないけれど。


Androidでベーシック認証のページからはPDFはダウンロードできない

以前も書いたけど、Androidではbasic認証/digest認証がかかっているサイトからは、PDFがダウンロードできない。

具体的な症状としては、
・ダウンロードが終わらない
・PDFビューアソフトで「不正なPDF形式です」のエラーが出る
など。

Gingerbreadの頃から発生しているのだが、Lollipopでも同じ症状だった。
Chromeでも標準ブラウザでも、アプリ内ブラウザでもダメ。

「AndroidでPDFがダウンロードできない!」という話があったら、「認証かかってない?」と確認するようにしましょう。


iOSで「2回クリックしないとリンク先に遷移しない」原因はopacity

症状

iOS上でリンクをクリックしても、リンク先に遷移しない
しかし、もう一回クリックすると遷移する
SafariでもChromeでも同じ症状
AndroidやPCブラウザでは症状が出ない

原因

iOS8.4.1以降の、CSSのopacityの扱い方が原因。

対策

リンク部分のclassに

opacity:none;

を指定する。

症状が発生するバターン1

画像リンクで発生

<style>
.link_image{
opacity:0.6
}
</style>
<a href=”link.html”><img class=”link_image” src=”link.jpg”></a>

症状が発生するバターン2

リンクではなく、jQueryによるcss変更でも発生

<style>
.link_image{
background:url(‘link.jpg’);
}
<script>
jQuery(‘.link_image’).click(function() {
jQuery(‘.link_image’).css(‘background’,’none’);
jQuery(‘.link_text’).css(‘display’,’block’);
});
</script>
<a id=”link_image”>
<span class=”link_text”>リンクします</span>
</a>

それぞれ

<style>
.link_image{
opacity:none;
}
</style>

にすれば1クリックでリンクされる。

サイト内に

<style>
a:hover {
opacity: 0.8;
}
</style>

のような設定がある場合は要注意。


本番とステージングでGoogle Analyticsのトラッキングコードを自動で出し分ける(WordPress)

ステージング(開発環境)サーバーでと、本番(商用環境)のサーバーと、同じGoogle Analyticsプロパティを設定してしまうと、本番データにノイズが入る。
だからといって別プロパティにすると、アップロードのミスで「本番にステージングのトラッキングコードをアップしてしまった」というミスも発生しがち。
そんな時は、funcitions.phpで出し分けると良い。

以下の例は、本番のドメインがwww.hoge.jpで、本番のトラッキングコードがUA-xxxxxxxx-1、ステージングがUA-xxxxxxxx-2の場合。

function wp_google_analytics(){
$domain=$_SERVER[‘SERVER_NAME’];
if ($domain == ‘www.hoge.jp’){
$ua=’UA-xxxxxxxx-1′;
}else{
$ua=’UA-xxxxxxxx-2′;
}
?>
<script>
(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’//www.google-analytics.com/analytics.js’,’ga’);
ga(‘create’, ‘<?php echo $ua;?>’, ‘auto’);
ga(‘send’, ‘pageview’);
</script>
<?php }
add_action(‘wp_head’, ‘wp_google_analytics’);