2016-05-16

Evernoteのクリップボタン付けてみた（今更）

オワコンとか囁かれていたりするエバノなんですが。
Clip it ボタン（でよかった？）は、Zenback 入れてるとついてきたように思うけど、自分は使ってないので、自前で入れることにした。

公式のサイトで探せなかったので別ブログで貼ったのそのまま転用してたりするんですが、以下のサイトのページに詳細が記載されていました。

追記：2018/04/18

Clipボタンは使用できません。

WordpressテーマにEvernoteのクリップボタンを取り付けるカスタマイズ方法

まずは、記事ページのみ表示させたいので、デザイン編集の[記事]の方で、できれば記事上の方がいいかと思います。

<a href="https://www.evernote.com/noteit.action" rel="nofollow" onclick="Evernote.doClip({contentId:document.getElementsByTagName('article').id, providerName:'YOUR BLOG URL'});return false;">
<img src="http://static.evernote.com/article-clipper-jp.png" alt="Clipボタン" style="border:0px;" height="17" width="58">
</a>

Evernote.doClip にオブジェクトを指定するなどです。

cotentId は記事のエリアにある id を入れるので、はてブロの場合だと、 article['id'] が該当。
providerNameには、各自のブログのトップページのURLを入れます。

これだけだと、リンクを作成しただけなんで、ClipさせるJavaScript本体を読み込みします。

<script src="http://static.evernote.com/noteit.js" async='true'></script>

を記事下などで。
自分は、フッターに貼ったので、以下のようになってます。

<script>
(function(){
 if(document.documentElement.getAttribute('data-page') === 'entry'){
    var evn = document.createElement('script');
    evn.src = 'http://static.evernote.com/noteit.js';
    evn.async = 1;
    document.head.appendChild(evn);
 }  
})();
</script>

あとはテンプレート編集のプレビューでもいいので、clip it を押してみて、ウィンドウが表示されれば成功です。
適当にclass を振って、 CSSで位置の調整をしたら完成です。

2016-05-15

藤の花

どうでもいい

今週のお題「植物大好き」

藤棚の藤の花のたわわな様が好きで、毎年飽きもせず撮ってる

2016-04-29

ランダムエントリーパーツをブログサイドバーに設置

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

古くからあるカスタマイズですが、表示のたびにランダムに切りかわる過去記事の参照リンクのカスタマイズです。

f:id:maRk:20160429190753j:plain

PHPを使いますので、別にサーバーが必要です。

おおまかな作業は以下です。

すべての記事を、はてなブログの AtomPub(

はてなブログAtomPub - Hatena Developer Center
) を使って取得

取得したら、タイトルとリンクなど必要な情報のみ解析して、JSON形式として書き出し
書き出されたJSONから、ランダムに抜き出しして、HTMLに整形
はてなブログ側で表示

といった形になります。（HTML整形ははてなブログから直接にJSON読む手もありますが、外部
ファイルのリードを抑えてなるべく軽くしたいところなので）

管理としては、

全記事取得はタスク処理などで定期に更新。（更新間隔はブログ記事の更新頻度による）
全記事取得するphpはドキュメントルートより上に置き、書き出すJSONを公開ディレクトリ下に
外部ファイルには、 Access-Control-Allow-Origin で、許可サイトを登録するようにする

参考：

www.bunkei-programmer.net

AtomPub での取得方法。 JAVAによるものですが、手順としては他の言語でも大丈夫です。

配列のランダム抽出、面倒になったので、以下のメソッドに頼ることに。

【PHP】配列から指定したエントリの数のバリューをランダムに抽出する - Qiita

追記：
以下にて、使用ファイルのサンプルを用意しました。
Get Random Entry — Bitbucket

※ 正確には全記事取得ではありません。（最後のページの要素が1つな時、配列にならなかった場合の処理を行っていないため）

170記事で、ファイル書き出し完了までにおよそ25秒くらいでした。タイムアウトで止まるようならば、ループのところでカウンター変数セットしてリミットかける必要あると思われます。
※ 処理が重い場合に、共用サーバーでプロセスkillになるかもしれないので、ローカルでテストされてから使う方がいいです。
（問題のある場合に公開取りやめますが、基本、at your own riskでお願いします）

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