2016-04-24

スパムまみれなHatena::Letの新着チェックを大チェッカーにしてる（スパム解決済み）

どうでもいい

スパムだらけで、タイムラインが死んでる状態なHatena::Letですが。

久々に Hatena::Let でも使うか！と思ったけどスパムらしsきもので埋まってる…
— Griever (@Griever2) 2016年4月24日

このサービス（というか、匿名ダイアリー除くはてラボ全体で言えることですが）は、アクティブユーザーが少ないために、スパムによる連続投稿の恰好の餌食となっています。

仕方がないので、既存ユーザーで過去の登録から一部ピックアップして、大チェッカーにて更新チェックしてみた次第。

maRkのHatena::Letのタイムライン - 大チェッカー
スパム防止につき、自分以外は編集できないように権限を絞ってありますので。非ログインでも、OPMLで吐き出しできますので、自分向けの情報にするなりできるかと思います。

2016-03-20

GoogleアナリティクスのAutoTrackを使用してみる

はてなブログどうでもいい

AutoTrack は Googleアナリティクスを便利に使う機能のプラグインのパッケージです。

はじめに、この機能は主に開発者向けとして提供されているものです。
はてなブログを始めたばかりでアナリティクスの設定をやりたい、という人は、google:はてなブログ Google Analytics とかすると詳しい方が解説されていますから、そちらを強くお勧めします。

前提として、analytics.js を設定済み（function(i,s,o,g,r,a,m)とかあるやつ）なこと、それと、autotrack.js と同梱のプラグイン群をホストする場所を持っていることです（自分の場合は bitbucketのサイト管理下で置いてます）

アナリティクス日本版公式ブログanalytics.js の自動トラッキング機能の紹介

これ、やり方がわかりにくいのですが、実はそれほど難しいものでもありません（最初英語ドキュメントくらいしかなかったりしたため）。
以下に、日本語によるドキュメントがあります。

Googleアナリティクスの便利プラグイン詰め合わせAutotrackのドキュメント日本語版 | 編集長ブログ―安田英久 | Web担当者Forum

まずは、GitHubにある、autotrackをダウンロードしておきます。

googleanalytics/autotrack

自分の場合だと、こんなかんじの階層になってます。

└── js
    ├── autotrack
    │   ├── autotrack.js
    │   ├── gulpfile.js
    │   ├── lib
    │   │   ├── constants.js
    │   │   ├── plugins
    │   │   │   ├── autotrack.js
    │   │   │   ├── event-tracker.js
    │   │   │   ├── media-query-tracker.js
    │   │   │   ├── outbound-form-tracker.js
    │   │   │   ├── outbound-link-tracker.js
    │   │   │   ├── social-tracker.js
    │   │   │   └── url-change-tracker.js
    │   │   ├── provide.js
    │   │   └── utilities.js
    │   ├── package.json
    │   └── wdio.conf.js

（autotrack.js と libだけアップでいいような気もするのだけど。/test/とかはローカルだけでサーバーになくても大丈夫と思います）

このうち、必要なのが、autotrack.js までのパスです。example.com/ga/autotrack/autotrack.js

はてなブログへの設置

個人で行ったことのメモですので、はてなブログ公式でない、ということと、この方法による不具合で損害があったとしても当方では責任を負えませんのでご理解願います。AutoTrackのドキュメントを熟読され、テスト用のようなブログで動作確認されることが望ましいです。

http://blog.hatena.ne.jp/my/config/detail

設定のページで、詳細設定のタブに行きます。
headに要素を追加とあるところの以前のコードは削除して、代わりに、AutoTrack 対応コードを入れます。

<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('require', 'autotrack');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<script async src='path/to/autotrack.js'></script>

上記は全部入りの場合のスニペットです。

イベントトラッキングだけ使う、という人は以下の通りに、必要なものだけ 'require'します。

プラグインを個別に使う | Web担当者Forum

例えば、はてなブログのイベントトラッキングの時は、

記事ページだけ設置したボタンにイベントトラッキングかけるには、

<button data-event-category="button" data-event-action="click" data-event-label="{Title}"></button>

イベントカテゴリー　はbutton、イベントアクションは click、イベントラベルとしてはてなブログ予約ずみ変数の{Title}でページのタイトルが GAに送信されるということになります。

outboundLinkTracker は、自分のブログのホスト名と違う外部サイトへのリンクのクリックイベントを記録するものです。

イベントカテゴリ	Outbound Link
イベントアクション	click
イベントラベル	リンクの href 属性の値

といった形で記録されます。

設定が済んだら、「変更する」を押して反映させます。
あとは、機能がバッティングするような、既存のスクリプトは削除しておいたほうがいいです。ga('send'~ とか。

その他、必要なトラッキングの仕込みは、デザインの編集画面の方で行います。

変更できたら、自分でアクセスしてトラッキングされていることを確認します。

f:id:maRk:20160320210935j:plain

2016-03-13

アメブロ、AMP対応始めたってよ。。

どうでもいい

AMP(Accelerated Mobile Pages)周りの検索してたら、何やらアメーバブログで AMP対応が始まってるらしい。

アメーバブログがAMP導入開始！｜web集客コンサルタントのぼちこつ

MJDK

アメーバブログ記事で、自前のブックマークレット打つとなんかAMPページがあるらしいことがわかる。

let.hatelabo.jp

はてなブログどうするんだろう。

2016-03-13

はてなブログトップページ（自分の）で記事一覧を折り畳みして別コンテンツを差し込む

どうでもいいはてなブログ

何言ってるか不明なんだけど、サイトのトップページぽくする系のカスタマイズです。
固定ページを持たないはてなブログでは、サイトトップを作る決定打があまりないですが、こんなやり方もというので。

f:id:maRk:20160313185814j:plain

Firefox のスラッチパッドで以下をトップページを開いて実行してみます。

($=> {
  const isTop = $('html').data('page') == 'index' ? 1 : 0;
  const MAIN_INNER = $('#main-inner');
 
  if (isTop) {
    $('#main:first-child').prepend('<article id="topageContent">{{CONTENT}}</article>');
    MAIN_INNER.css('display', 'none');
    const ShowHide = $('<a/>').text("表示 / 非表示").on('click', (e)=> {
    e.preventDefault();
    MAIN_INNER.toggle();
  })
  .attr({
    'id': 'mainToggle',
    'href': '#',
  })
  .css({
    border: '1px solid',
    borderRadius: '3px',
    padding: '.1em',
  });
    $('#main').prepend(ShowHide);
  }
  return;  
})(jQuery);

これで上記のような表示ができれば、実装させることができます。

jQueryはなんらかの形で読めるようにしておき、以下のようなのをフッターあたりに貼ります。（そのまま貼っただけでは運用としては使えません）
{{CONTENT}} の部分にトップページに必要な内容を入れれば（$.get()でもってくるとか）、常にトップページに何か表示させることができるかと。

<script>
  $(function(){
    var isTop = $('html').data('page') == 'index' ? true : false;
    var MAIN_INNER = $('#main-inner');
 
  if (isTop) {
    $('#main:first-child').prepend('<article id="topageContent">{{CONTENT}}</article>');
    MAIN_INNER.css('display', 'none');

  var ShowHide = $('<a/>').text("表示 / 非表示").on('click', (e)=> {
    e.preventDefault();
    MAIN_INNER.toggle();
  })
  .attr({
    'id': 'mainToggle',
    'href': '#',
  })
  .css({
    border: '1px solid',
    borderRadius: '3px',
    padding: '.1em',
  });
    $('#main').prepend(ShowHide);
  }
   return;
});
</script>

ただし、これだけでは問題があります。
無料ユーザーの場合の広告表示がスクリプト実行によって表示できない形になるため、広告ユニットをさらに追加して常時表示になるようにしておかないといけません。

これは、やっつけで対策してみたのだけど、ちょっと見た目は良くないかも

f:id:maRk:20160313192853j:plain

追記： 2018/04/18

トップページに任意の記事を固定できる機能が追加されました。
記事の管理画面の記事タイトルより、固定したい記事にチェックを入れて、横にある、編集のボタンを押すと、メニュー内の、「トップページの先頭に表示する」をクリックすることで設定できます。
staff.hatenablog.com/entry/2018/04/18/143000

2016-03-07

Web::ScraperとWWW::MechanizeでHatena::Letから自分のRawコード取得、ファイル保存

どうでもいい

Hatena::Let 外で作成済みのbookmarkリポジトリ管理しようかな、とか思って。一つ一つ書き出していくのもなんだし、後学のため作ってみた。

自分（或いはあるユーザー）のbookmarkletを持ってくるのに、cURL wget なり使ってもいいと思うけど、自分の場合だと@privateつきのプライベートモードのbookmarkletも作っているから、一回認証通してないとpublicモードのしか取れないことになる。

参考
WWW::Mechanize - Perlオブジェクト中のハンディWebブラウザ - perldoc.jp
use Web::Scraper; - 今日のCPANモジュール（跡地）

成果物は以下に

Hatena::Let で自分の bookmarklet の Raw Code を取得、ファイル保存する — Bitbucket

作業フォルダを mkdir してカレントディレクトリ移動しておきます。

my $user = 'USER NAME';
my $pass = '?? YOUR PASSWORD ??';

でユーザー名：Passwordを入れ getlet.pl とでもして保存。あとは、ターミナル等で

$ ./getlet.pl

とか。

Note:

ログインが成功したら、Hatena::Letのユーザーのトップページに移動して、そこから各bookmarkletのパーマリンクを配列に格納します。
あとは、Web::Scraperで、ページにあるbookmarkletの分だけページ移動してスクレイピングしていきます。Hatena::Letでは1ページ20件分のbookmarkletで分割されているので、1ページ最大で20件のbookmarkletです。
切り出し部分は、

my $scraper = scraper{
    process 'pre.code-raw', 'rawcode' => 'TEXT';
    process 'title', 'doctitle' => 'TEXT';
    };

な感じにして、Rawコードは pre要素から、各ファイル名として（でっちあげで）指定するのにtitle要素から取得しています。取得しできたら、ファイル出力して、20件分ならば20回繰り返します。
※ 出力するファイルは、text/plain で拡張子 .txtとなるようにしてあります。

本ツールでは、トップページ1ページだけの解析ですが、2ページ目からは、 ?of=20 とかいったリンクをたどることで取得できます（本当はそこまで解析して全自動にすればいいんだけど、何せ突貫工事なもので、本当に自分のページのだけしか想定してないです）。

$mech->follow_link (url => "http://let.hatelabo.jp/".$user."/");
$mech->follow_link (url_regex => qr/of=20$/i);

ついでにですが、以下に、個別bookmarkletページ開いた時実行するとダウンロードになるbookmarkletがあります。