スキップしてメイン コンテンツに移動

投稿

2014の投稿を表示しています

やさしいアンカーリンク

【趣旨】 HTMLで、あるページ(page1.html)から別のページ(page2.html)の特定の場所にリンクさせる場合

あるページ
page1.html
<a href="page2.html#anchor">アンカーの位置へジャンプ</a> (以降、アンカーリンクと呼びます。)

別のページ
page2.html
<div id="anchor">アンカーの場所</div>
などと記載しますが、これだとpage1から、『一瞬で』page2の特定の場所に移動してしまい、(page2のヘッダー部分が見えないだったりすると特に)ユーザーが迷子になりやすいです。
また、コンバージョンに向けてストーリーでページ遷移を設計している場合も、そのアンカーリンクでストーリーが途切れてしまい、コンバージョン率の低下を招きます。(きっと)

そこで今回はアンカーリンクで何が起ったのか、自分がどのページのどこにいるのかをユーザーに認識させる、ユーザーにやさしい方法を記載します。


【実装】 page1.html
<a href="page2.html?ancid=anchor">アンカーの位置へジャンプ</a>

page2.html
<div id="anchor">アンカーの場所</div> (従来どおり)

jQuery
$(document).ready(function () {     // ------------------------------     // 別ページへのやさしいアンカーリンク     // ------------------------------     var url = $(location).attr('href');     if (url.indexOf("?ancid=") != -1) {         setTimeout(function(){           var sp_arr = url.split("?ancid=");           var hash   = …

WordPressのショッピングカート(Welcart)にメルマガ(acmailer)を連動させる方法(登録もjQueryで版)

【趣旨】 WordPressのショッピングカートプラグイン「Welcart」に、メールマガジン「acmailer」(無料で使えるメール配信CGI)を連動させる。


【既出の方法】 http://tukuruder.com/archives/1449
http://www.be-friend.biz/201204/
などにすばらしい記事がありますが、方針としてはいずれも

・登録はWordPressの「functions.php」に、Welcart登録完了時のフックにアクションフック(もしくはフィルターフック)して登録(acmailerのreg.cgiにパラメータを渡してPHPの file_get_contents を実行)

・削除と更新はjQueryでacmailerのreg.cgiにパラメータを渡して$.ajaxを実行

としています。


【今回の方法】 どうせなら、WordPressのfunctions.phpに手を加えることなく、すべてjQueryでやってしまったほうが気持ちがいいということで、登録もjQueryで行います。


【WordPressの設定】 functins.php => 特に記載なし


【jQuery】 (削除、変更は上記URLのブログご参照)

$(function(){   //登録   $('.customer_form_entry input[name="regmember"]').click(function () {       // メールアドレス、パスワードを1回のみ入力にするために値設定(オプション。HTML側はhiddenにしておきます。)     $('.customer_form_entry #mailaddress2').val($('.customer_form_entry #mailaddress1').val());     $('.customer_form_entry #password2').val($('.customer_form_entry #password1').val());       //メールアドレス取得     var mailaddress = $('.customer_form_e…

HTMLの要素を下揃えする方法

【実現したいこと】 上の図において、要素1と要素2の下面を揃えたい。


【よく見る方法は...】 ・親要素に「position:relative;」
・子要素に「position:absolute;」、「bottom:0;」
とすると、左右のdivの高ささえ揃えておけば、下面を合わせられますが、BootstrapなどのCSSフレームワークを使用していたりして、既存のスタイルと干渉してしまう場合に、JavaScript(jQuery)で実現する方法を記載します。


【JavaScriptでの実現方法(考え方)】
上の図において、スクリプトを使用し、「A」、「B」、「C」を高さを取得し、計算により「D」の高さを取得します。

「D」=「A」-「B」-「C」

この「D」を要素2の「margin-top」に追加してあげます。

今回は、レスポンシブ(RWD)に対応するため、ウィンドウの幅を変えた時にも「margin-top」を設定し直す仕様とします。


【実装】 jQuery(document).ready(function() {   adjustPosition();     $(window).resize(function () {     adjustPosition();   });   function adjustPosition(){       var heightA = $("要素1").outerHeight();       var heightB = $("テキスト部").outerHeight();       var heightC = $("要素2").outerHeight();       var heightD = heightA - heightB - heightC;       if (heightD > 0) {         $("#要素2").css("margin-top", heightD + "px");       }   } });

【解説】 特に難しいことはしていませんが、初回とウィンドウリサイズ時に、それぞれの要素の高さを取得して(outerHeightは、padding, bord…

Bootstrap3のAffixバグについて

【Affixとは】


サイドメニューなどを、画面と一緒にスクロールさせずに固定位置で表示するためのBootstrapのビルトイン便利JSです。
http://getbootstrap.com/javascript/#affix

また、サイドメニューの上部高さとフッターの高さを指定すると、上部高さまで、および、フッターが表示されるとフッターに押されて画面と一緒にスクロールされます。

上部高さはoffsetオプションのtopで指定し、フッターの高さはoffsetオプションのbottomで指定します。
具体例は以下

$('サイドメニュー').affix({   offset: {     top: function () {       return (this.top = $('ヘッダー部分').outerHeight(true))     },     bottom: function () {       return (this.bottom = $('フッター部分').outerHeight(true))     }   } });

【バグの事象】(v3.1.1で確認) スクロール中は動的にJSにより.affixクラスが付与され、position:fixed(自分でCSSに設定)となりサイドメニューの位置は固定され、bottom(フッター位置)までスクロールすると、動的にJSにより.affix-bottomクラスが付与され、position:absolude(自分でCSSに設定。top位置はJSが計算)となり画面と一緒に上に移動してゆきますが、スクロールで上部に切り返しても.affix-bottomが解除されず位置がフッターの上部に固定されたままになってしまいます。
(一旦、画面上部までスクロールすると.affix-topが付与され、サイドメニューは初期位置までジャンプします。その後画面下部にスクロールすると.affixが付与され正常動作(位置固定)しますが、bottomまでスクロールされると上記不具合(.affix-bottomクラスが付与され解除されない)が発生します。)


【バグの報告】 以下でバグ報告が挙げられています。
https://github.com/twbs/bootstrap/is…

Googleタグマネージャー|iFrameの中で入力・確認・完了画面が遷移する場合の仮想ページビューのトラッキングの仕方

【概要】 Googleタグマネージャーをページに仕込んでおくと、仕込んだページ側のコードを一切変更することなく、後から動的にページビューやらイベントやらをタグマネージャー側の管理画面で動的にトラッキングすることができてとても便利なわけですが、ページがiframeの中で入力->確認->完了画面と遷移する場合、iframeの側(読み込む側)にタグマネージャーのタグを仕込んでおいても、目的のページビューがトラッキングできません。
そこでiframeで読み込まれた側の任意のページビューをトラッキングするためにGoogleタグマネージャーのdataLayerを利用する方法を記載します。
更に今回は、別々のiframeから共通で読み込まれたページでも外側のiframeに隠しコードを仕込み、どのiframeで読み込まれたのか判定して任意のトラッキング(仮想ページビュー)を行う方法をご紹介(提案)します。


【やりたいことをもう少し具体的に】 ページ要素として ・親フレームA ・親フレームB ・投稿フォーム とあった場合で
・親フレームA <= 投稿フォーム ・親フレームB <= 投稿フォーム と読み込んでいる場合に
Googleタグマネージャーを使用して、親フレームAでの入力画面、親フレームBでの確認画面、、、等の仮想ページビューをトラッキングしたい。

【HTML】(親フレームA) 親フレームAに以下のタグを記述(非表示の判定フラグ用) <div id="post_which" style="display:none;">frameA</div> ※親フレームAにはGoogleタグマネージャーのタグは仕込みません。

【HTML】(親フレームB) 親フレームBに以下のタグを記述(非表示の判定フラグ用) <div id="post_which" style="display:none;">frameB</div> ※親フレームBにもGoogleタグマネージャーのタグは仕込みません。

【投稿フォーム・入力画面】 読み込まれる投稿フォームの入力画面に以下のコードを記述

<body>の直下に Googleタグマネージャーのコードを設…

JavaScriptで正規表現を使用し img/* もしくは ../img/* の下にある画像ファイル名を変更する

【やりたいこと】 トップページと下層ページで共通のJavaScriptを使用している場合で、相対パスで記述している場合に、ファイル名「hoge.jpg」を「fuga.jpg」に変更したい。


【HTML】 下層ページの場合:
<img src="../img/hoge.jpg" id="myHogeImg" alt=""/> トップページの場合:
<img src="img/hoge.jpg" id="myHogeImg" alt=""/>

【JavaScript】(jQuery)$(document).ready(function () {   $("#myHogeImg").attr('src', $("#myHogeImg").attr("src").replace(/^(.*img\/)(.+)$/, "$1fuga.jpg")); });


【解説】 replace(/^(.*img\/)(.+)$/, "$1fuga.jpg")の部分の解説
/^(.*img\/)
src="img/ もしくは src="../img/ (imgの前は何でも良い) => $1 に格納

(.+)$/
hoge.jpg(img/ 以降の任意の文字) => $2 に格納(使用はしない)

"$1fuga.jpg"
img/fuga.jpg もしくは ../img/fuga.jpg に変更


以上です。
本年もスキルを磨くとともに、日々の業務で得た知見を公開してゆきたいと思います。
よろしくお願いします。