2014年2月 Archive

今月（2014年2月）、サイトでカスタマイズした点をまとめたエントリです。

• はてなブログのAction Streams (プロフィール)の追加
• labs のほうで Google Analytics のユニバーサルのほうに切り替えした

Action Streams は最近触ってなかったので登録のしかたも忘れていたりしますが、はてなブログのフィードは Atom のほう （*/feed）を設定ファイルには典型的なAtom feed なので　atom : 1 を記述しておけばいいです。

Analytics のユニバーサルの件は、設定のトラッキング情報で、トラッキングコードがユニバーサルに切り替わってましたので、そのまま以前の非同期のコードと全て差し替えるだけで利用可能のようでした（この時点公開時点ではまだこのブログサイト内では以前のトラッキングコードです）。

イベントトラッキングについて、特定の要素にイベント付与する方法がこれまでと違うので下記を参考に直しました。

• Event Tracking - Web Tracking (analytics.js) - Google Analytics -- Google Developers

今月のカスタマイズは以上です。以下に過去のカスタマイズ記録リストがあります

• 当ブログのカスタマイズ記録

テキストリンクの一部分をコピーするとき楽にするための JavaScript です。

小粋空間さんのところにて、テキストリンクの部分コピーの方法についてまとめられていました。

• テキストリンクの一部をコピーする方法のまとめ: 小粋空間

やりかたについては、リンクの上側をなぞるとか、以前訓練した覚えはあります。しかしながら、やりにくい場合もありますので、これを選択しやすくするための JavaScript を作ってみました。

以下のようなものを、ブラウザのコンソールで実行するか Bookmarklet 化します。

(function(){
  var a = document.querySelectorAll("a"), d;

  for (var i=0; i<a.length; i++){
    a[i].addEventListener( "mouseover", rmHref, false);
    a[i].addEventListener("mouseout" ,rmSelhelper , false);
  }

  function rmHref(){
    d = this.getAttribute("href")||"";
    this.setAttribute("data-selecthelper-href", d);
    this.removeAttribute("href");
  }

  function rmSelhelper(){
    d = this.getAttribute("data-selecthelper-href")||"";
    this.setAttribute("href" , d);
    this.removeAttribute("data-selecthelper-href");
  }
})();

リンクのマウスオーバーでテキストのリンクが削除（動作はdata-*に置き換えで退避）されるので選択しやすくなります。

• 対象セレクターを絞り込む場合の対応で querySelectorAll のほうを使っています。
• 実際のハイパーリンクが動作するところまで考慮してませんので、改造するならば、なんらかの条件で removeEventListener を実行すればいいと思います(ページリロードしたほうが早そうだけど)。
• 元ページでほかにイベントリスナーが設定されている場合の動作まで検証してないので、あくまでも純粋なテキストリンクむけです
• あと、クロスブラウザまで考えていませんので