過去の記事 - 氾濫原

2017年 05月 24日

✖

photo

15:09

Lightroom 写真の保存位置の変更

00:18

既存のものを新しい場所にコピー
Lightroom 上で「フォルダの場所を更新」
読みこみダイアログでコピーする場所を新しい場所に
Time Machine のバックアップ元として新しい場所を追加する

I-O DATA HDD 外付けハードディスク 4TB USB3.0/テレビ録画/パソコン/家電対応日本製 HDC-LA4.0 - アイ・オー・データ — I-O DATA HDD 外付けハードディスク 4TB USB3.0/テレビ録画/パソコン/家電対応日本製 HDC-LA4.0 cho45

アイ・オー・データ

★ 4.0 / 5.0
cho45

オルレイヤ・グランディフローラ

photo

14:05

「ホワイトレースフラワー」には似た形の2つ以上の種があるらしい。Ammi majus・Ammi visnaga (この2つはよく似ている) と Orlaya grandiflora で、写真はたぶん Orlaya grandiflora 。

英語で「White lace flower」で検索すると Orlaya grandiflora だけが出てくるが、日本語で「ホワイトレースフラワー」と検索すると Ammi 系と Orlaya grandiflora が混ざって出てくる。

国内だと「オルレヤ・ホワイトレース」と書いて Orlaya grandiflora のほうを明示してることがあるっぽい。

複数デバイス時のロケーション履歴

tech

14:38

同一アカウントでログインしているタブレットを家に置いたまま家を出たりすると、ロケーション履歴が乱れてしまう。ロケーション履歴は複数台ログインして記録している場合、それらが合算された履歴になるため。

この場合、本当に常時持ち歩くデバイスのロケーション履歴だけを有効にしたくなる。具体的には以下のヘルプに書いてある。

https://support.google.com/accounts/answer/3118687?hl=ja

ログインしているどのデバイスでもいいので、ロケーション履歴の設定を辿れば、その時点でログインしているすべてのデバイスごとに有効/無効を切り替えられる。

HTML要素が見える範囲にあるかの判定

tech

14:47

HTML上のある要素が見える範囲にあるかを JavaScript で判定したい。なんか1発で判定できるメソッドがあった気がしたが見つからなかったので、以下のようになった。

/**
 * element の一部でも見える位置にあるか
 * margin が指定された場合、その分上下左右にビューポートを拡大(または負の場合は縮小)しているとみなして判定する
 */
function isInViewport (e, margin) {
	const rect = e.getBoundingClientRect();
	if (!margin) margin = 0
	return (
		rect.bottom >= -margin &&
		rect.right  >= -margin &&
		rect.top    <= window.innerHeight + margin &&
		rect.left   <= window.innerWidth  + margin
	);
}

/**
 * element 全体が見えているか
 */
function isWholeInViewport (e) {
	const rect = e.getBoundingClientRect();
	return (
		rect.top    >= 0 &&
		rect.left   >= 0 &&
		rect.bottom <= window.innerHeight &&
		rect.right  <= window.innerWidth
	);
}

id:vantguarde 「なんか1発で判定できるメソッドがあった気がしたが」一発ではないかもしれないけどIntersection Observerかしら https://wicg.github.io/IntersectionObserver/

http://b.hatena.ne.jp/vantguarde/20170522#bookmark-338453319

とのこと！！書いてみるもんだ〜ありがとうございます。

IntersectionObserver の場合はたとえば以下のように。画像をスクロールに応じて遅延ロードさせたい場合を想定

const observer = new IntersectionObserver( (entries) => {
	for (let entry of entries) {
		const section = entry.target;
		const imgs = section.imgs || section.querySelectorAll('img');
		section.imgs = imgs;
		for (let img of imgs) {
			if (entry.isIntersecting) {
				const src = img.getAttribute('data-src');
				if (img.src !== src) {
					img.src = src;
				}
			} else {
				img.removeAttribute('src');
			}
		}
	}
}, {
	rootMargin: "1000px",
	threthold: 0.0
});
const sections = document.querySelectorAll('section.dir');
for (let section of sections) {
	observer.observe(section);
}