UPDATE 2016年12月2日

iPhoneでメニューを固定にしたときの時間的なズレを解消

こんにちは。

スマホサイトを作っていると、スクロールした際に上部にメニュー等を固定にすることはよくありますよね。

var box    = $('#fixedBox');
var offsetTop = box.offset().top;
$(window).scroll(function () {
    if ($(window).scrollTop() > offsetTop) {
        box.addClass('fixed');
    } else {
        box.removeClass("fixed");
    }
});

みたいなことですね。

先日もそうやって固定にしたんですよ。
そしたらクライアントさんから
「ゾゾタウンみたいにスムーズじゃない」
「スクロールしてしばらくしないと表示されない(固定にならない)」
「ゾゾタウンはもっと滑らかだ」「ゾゾタウンが・・・」
と、やたらとゾゾタウンを引き合いに出して怒られたんですよ。

どないなもんかと僕もゾゾタウンを見てみたら確かに滑らかに固定されてるんですよね。
それに比べてこちらが作ったものはスクロールしてメニューが画面から消えてから表示されるまでに時間がかかるのです。
よくよく調べてみると、iOSでは慣性スクロール(画面を素早くスクロールさせた際、指を画面から離しても急には止まらず、慣性が作用しているようにスクロールがある程度維持される機能のこと)が効いているあいだはイベントが発生しないらいんですよね。
ゾゾタウンのjavascriptも見てみても書いていることはほぼ同じだったのでおかしいなあと思ってさらに調べているとやはり同じことで困っている人が多いようで、しかもその解決方法がCSSのほうに対するちょっとしたおまじないのような記述で解決するということで早速試してみたら本当に解消されました。

固定にする要素に対して、

#fixedBox {
    transform: translate3d(0, 0, 0);
}

と記述するだけです。

またひとつかしこくなったなぁ。

UPDATE 2016年4月14日

PreloadJSを使って読み込み状況を表示

FlashからToolkit for CreateJSを使って書き出したCanvasですが、ローディングをつけたいなあと思って調べたときの備忘録。

javascriptの該当部分を下記のように。

javascript

function init() {
	canvas = document.getElementById("canvas");
	images = images||{};

	var manifest = [
		{src:"images/dummy01.png", id:"dummy01"},
		{src:"images/dummy02.png", id:"dummy02"},
		{src:"images/dummy03.png", id:"dummy03"}
	];

	var loader = new createjs.LoadQueue(false);
	loader.addEventListener("progress", handleProgress);
	loader.addEventListener("fileload", handleFileLoad);
	loader.addEventListener("complete", handleComplete);
	loader.loadManifest(manifest);
	function handleProgress(evt) {
		// 読み込み率を0.0~1.0で取得
		var progress = evt.loaded;
		var per = Math.round(progress * 100);
		document.getElementById("loading").innerHTML=per;
	}
}

html

<p><span id="loading">0</span>%</p>

こんな感じですかね。

CSSなど工夫すればローディング画面も作れそうですね。

UPDATE 2015年6月24日

UserHeatを設置するとaタグのtargetが効かない?

どうも、僕です。

アクセス解析ツールの「UserHeat」を設置したページで、
aタグに設定したtarget属性が無効になるという現象に会いました。

特定の環境下で起こることなのか切り分けは出来ておりませんが
userheat.jsを読み込むとtargetが効かなくなるようです。

ざっくりググってみましたが、このような症例は見当たらず。。
根本的な解決にはなりませんが、javascriptを使ってtargetを実現したいと思います。

下記のjavascriptを記述。

function targetlink(url,target){
	window.open(url,target,'');
}

aタグには下記のように。
<a href="#" onclick="javascript:targetlink('http://google.co.jp','_blank');return false;">Googleにリンク</a>

お粗末様でした。

UPDATE 2014年4月11日

WordPress管理画面のロゴをオリジナルに変更する

WordPressをクライアントさんに納品するときは、管理画面の見た目もクライアントさん仕様にしてあげると喜ばれる(と思っている)はず。

ログイン画面のWordPressのロゴとログイン後の管理画面左上のホームアイコンを変更するにはfunctions.phpに下記を記述します。
あと、ログイン画面のWordPressロゴをクリックするとwordpress.orgにリンクしちゃってクライアントさんを混乱させちゃうので、これも自分のサイトへのリンクに変更します。

/**
 * ログインページのロゴとリンク先URLを変更する
 */
function custom_login_logo() {
        echo '<style type="text/css">h1 a { background: url('.get_bloginfo('template_directory').'/admin_logo.png) 50% 50% no-repeat !important; width: 166px !important; }</style>';
}
add_action('login_head', 'custom_login_logo');
function custom_login_logo_url() {
	return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'custom_login_logo_url' );

/**
 * 管理画面左上のホームアイコンマークを変更
 */
function my_custom_logo() {
	echo '<style type="text/css">#wpadminbar #wp-admin-bar-site-name > .ab-item:before { content: url('.get_bloginfo('template_directory').'/admin_logo_s.png);}</style>';
}
add_action('admin_head', 'my_custom_logo');

「●●px」の部分はadmin_logo.pngの横幅を入れてください。
ログイン後の画面左上のロゴ変更はWordPressのアイコンではなくてホームアイコンをオリジナルに変更するようにしています。ここをクリックすると自サイトにリンクするので、「W」アイコンはそのままにしておいて、ホームアイコンをオリジナルに変更したほうが自然でしょ。
「admin_logo_s.png」は18×18pxで作成します。


WordPressのバージョンは3.8で確認しています。
ちょっと前のバージョンではログイン後のホームアイコンって無かったはず。だから「W」アイコンをオリジナルに変更していたんですが、最近はこれでやってます。

UPDATE 2014年3月14日

カスタムタクソノミーのアーカイブページで記事の並び順や件数を変更する方法

メモ。

WordPressのカスタムタクソノミーのアーカイブページ(taxonomy.php)において、
記事一覧の表示順は新しい記事から順に表示されるが、これをページ属性の順序(menu_order)にしたい。
ついでに表示件数も管理画面における設定件数とは違うものにする。

$query_stringを使用して、元々のクエリを維持することがポイントらしい。
ループの前にこう書く。

global $query_string;
query_posts( $query_string . "&orderby=menu_order&order=ASC&posts_per_page=-1" );

« 前へ