過去の記事 - 氾濫原

2017年 04月 13日

✖

photo

13:26

Material Design Lite のテキストフィールドと Vue.js の相性があんまりよくない

tech

13:28

Material Design Lite のテキストフィールドの input 要素を Vue.js で扱うとき、普通に v-model で two way binding すると、ラベル位置が更新されなくて文字が重なってしまったりする。つまりこれは Vue.js側の更新処理がMDL側に適切に伝わっていないために起こる。

MDLのソースを軽く読んだ解決として、mdl-js-textfield クラスがついている親要素に v-mdl 属性を追加し、以下のようにカスタムディレクティブを定義すると解決する。あんまり美しくないがしかたない。

静的な要素だけなら upgradeElementは必須ではないが、動的になると必須になるためついでにやっている。

Vue.directive('mdl', {
	bind: function (el) {
		componentHandler.upgradeElement(el);
	},

	update: function (el, binding, vnode) {
		const textfield = el.MaterialTextfield;
		if (textfield) {
			Vue.nextTick(function () {
				textfield.checkDisabled();
				textfield.checkValidity();
				textfield.checkDirty();
				textfield.checkFocus();
			});
		}
	}
});

❤️ 投げ銭する

✖

photo

15:23

❤️ 投げ銭する

✖

photo

05:14

❤️ 投げ銭する

✖

photo

15:22

❤️ 投げ銭する

✖

photo

06:20

❤️ 投げ銭する

Google Photos の ICC カラープロファイルの扱いの続き

tech

14:57

Google Photos の ICC カラープロファイルの扱い | tech - 氾濫原の続きです。前回のまとめとしては

Google Photos は基本的に sRGB に変換
s0 (オリジナル同等サイズ) のみ元々のカラープロファイルが保持される
500px 未満の場合はカラープロファイルが削除される

でした。

ただしある程度時間が経つまではオリジナルのプロファイルの画像が配信されることがあることがわかりました。

検証の試行錯誤

今日追試してみたところ、前回わかったルールよりもうすこし複雑なようだぞという挙動にみえ、ついでにいうと法則性がわかりませんでした。

あらたなファイルをアップロードして検証

今日あらたにアップロードしたファイルで検証してみました。以下のようにして s0 の部分をかえています。

curl https://lh3.googleusercontent.com/-4gapCD_T4ag/WOT-_iAPFkI/AAAAAAAAu-I/KXcMpxSoEcMurTrZ3umFh8nfOfOV88knQCE0/s0/IMG_7343-16MP-2.jpg | exiftool -

s320 - なし
s480 - なし
s499 - なし
s500 - sRGB IEC61966-2-1 black scaled
s1024 - sRGB IEC61966-2-1 black scaled
s1280 - sRGB IEC61966-2-1 black scaled
s1919 - sRGB IEC61966-2-1 black scaled
s1920 - オリジナルのプロファイル (ただし EXIFやXMP などは削除)
s1921 - sRGB IEC61966-2-1 black scaled
s2047 - sRGB IEC61966-2-1 black scaled
s2048 - オリジナルのプロファイル (ただし EXIFやXMP などは削除)
s2049 - sRGB IEC61966-2-1 black scaled
s0 - オリジナルのプロファイル (ただし EXIFやXMP などは削除)

前回のファイルを再度検証

一方、前回検証したときに使ったファイルを再度検証してみましたが、こちらは前回と変わりませんでした。

curl https://lh3.googleusercontent.com/-BDMfJtqE7Mw/WIlEQ29H7II/AAAAAAAAnw0/2ZUwqimJUcQUbiLomaBrvwcrAebJFSjWQCE0/s0/IMG_9415-16MP-AdobeRGB.jpg | exiftool -
curl https://lh3.googleusercontent.com/-pEtCDwM8HhQ/WIlEQ5CSwLI/AAAAAAAAnw8/rAyZIkuFVzEk3x68vRLPAkkevHUxEicJQCE0/s2048/IMG_9415-16MP-ProPhotoRGB.jpg | exiftool -

s320 - なし
s480 - なし
s499 - なし
s500 - sRGB IEC61966-2-1 black scaled
s1024 - sRGB IEC61966-2-1 black scaled
s1280 - sRGB IEC61966-2-1 black scaled
s1919 - sRGB IEC61966-2-1 black scaled
s1920 - sRGB IEC61966-2-1 black scaled
s1921 - sRGB IEC61966-2-1 black scaled
s2047 - sRGB IEC61966-2-1 black scaled
s2048 - sRGB IEC61966-2-1 black scaled
s2049 - sRGB IEC61966-2-1 black scaled
s0 - オリジナルのプロファイル (ただし EXIFやXMP などは削除)

よくわからないので、前回と同じファイルをアップロードしなおしてみましたが変わらず。

同じ内容ですこし違うファイルを再アップロード

しかし s0 をダウンロードしたものを再度アップロードすると今度は以下のような結果に…

curl https://lh3.googleusercontent.com/-ykbJTkOQRME/WOUC9VszXHI/AAAAAAAAu-g/E5q6Ds_DJu06zrYiOK8J2FKNbmMjlU34ACE0/s2049/IMG_9415-16MP-AdobeRGB.jpg | exiftool -