※スマホ対応はしてません。

新しいChromeでスクロールが取れない? scrollingElement?

カテゴリー: JavaScript

知り合いに聞かれて気づいたんですが、Google Chromeのv61からスクロールの取得方法が変わったっぽい。とりあえずこんなコードで取れます。

var top = document.documentElement.scrollTop || document.body.scrollTop

なんだこれ

Chrome 60までとか未対応のやつは document.documentElement.scrollTop が常に 0 を返すので、 || で繋げてやるとどっちに対応してる環境でも動きます。

事前にUAから分岐して要素を分けて、みたいなことしてると駄目なので、こっちがおすすめです。そんなに実行コストかからんでしょ。知らんけど。

Chromeは変わったけどSafariはまだ変わってないので、対応しときましょう。

あとEdgeも document.body の方みたい。IEは document.documentElement だったのに。はしごを外されちゃったね。

scrollingElement なるものが

で、ちらちら見てたら scrollingElement というものがあるらしい。Safariもこいつに対応してるけど、IEは対応してない。(Edgeはいける。) IEを無視できるならこれで一発ですね。

var top = document.documentElement.scrollTop;

らくちん~。

(まだMDNに日本語版がない。これは翻訳チャンスだ。)

対応まとめ

環境 scrollingElement documentElement body
Firefox ✅ ✅ 0
Chrome 61 ✅ ✅ 0
Chrome 60 ✅ 0 ✅
Safari ✅ 0 ✅
IE undefined ✅ 0
Edge ✅ 0 ✅

試してみたい方はこちらをどうぞ。

参考

Neovim for Windowsでcolorschemeを置く場所は本体らへん。

カテゴリー: 開発環境

<Neovimインストール先>\share\nvim\colors に foo.vim を置いて、 init.vim で colorscheme foo する。ディレクトリはないので自分で作る。

ちなみにGUI版は <Neovimインストール先>\bin\nvm-qt.exe ね。

ちゃんとやらないとこんなエラー。

E185: Cannot find color scheme 'foo'

当たり前すぎるのか情報が見つからなかった。まあgvimもこんな感じだったっけな。

あんまり関係ないリンク

“VCBuild.exe”がないと言われたけど、windows-build-toolsを入れたら解決したよ。

カテゴリー: JavaScript

正直あんまりわかってないけどまあ解決したのでメモしておく。

ざっくり

管理者権限のPowerShellで npm install --global windows-build-tools したら解決した。

  • https://www.npmjs.com/package/windows-build-tools

環境

  • node v4.5.0
  • Windows 10

なお現在node.jsの最新バージョンはv8.4です。

問題: “VCBuild.exe”がないと言われる

何かをインストールしようとしたとき、こんなエラーが出ました。

C:\Users\Ginpei\project\foo>npm install
> contextify@0.1.15 install C:\Users\Ginpei\project\foo\node_modules\jsdom\node_modules\contextify
> node-gyp rebuild


C:\Users\Ginpei\project\foo\node_modules\jsdom\node_modules\contextify>if not defined npm_config_node_gyp (node "C:\Users\Ginpei\AppData\Roaming\nvm\v4.5.0\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (node "" rebuild )
Building the projects in this solution one at a time. To enable parallel build, please add the "/m" switch.
MSBUILD : error MSB3428: Could not load the Visual C++ component "VCBuild.exe". To fix this, 1)  install the .NET Framework 2.0 SDK, 2) install Microsoft Visual Studio 2005 or 3) add the loca tion of the component to the system path if it is installed elsewhere.  [C:\Users\Ginpei\project\foo\node_modules\jsdom\node_modules\contextify\build\binding.sln]
gyp ERR! build error
...

MSBUILD : error MSB3428: Could not load the Visual C++ component “VCBuild.exe”.

node-gypでこける。なんかFAQだった気がする。

対応

MS Visual Studioをインストールすればいいのかなーと思ったけど、windows-build-toolsなるnpmパッケージでいけるらしい。npmパッケージじゃないのもあるのかなあ。

Windows PowerShellを管理者権限で起動

管理者権限じゃないとエラー。

>npm install --global --production windows-build-tools

-
> windows-build-tools@1.3.2 postinstall C:\Program Files\nodejs\node_modules\windows-build-tools

> node ./lib/index.js

Downloading BuildTools_Full.exe
[>                                            ] 0.0% (0 B/s)
Downloading python-2.7.13.msi
[>                                            ] 0.0% (0 B/s)
Downloaded python-2.7.13.msi. Saved to C:\Users\Ginpei\.windows-build-tools\python-2.7.13.msi.
Starting installation...
Please restart this script from an administrative PowerShell!
The build tools cannot be installed without administrative rights.
To fix, right-click on PowerShell and run "as Administrator".
npm ERR! Windows_NT 10.0.15063
...

Please restart this script from an administrative PowerShell!

というわけで、言われた通りに管理者権限でPowerShellを起動。

右クリックしてRun as administrator

で、この一行です。

npm install --global --production windows-build-tools

ここでツールをビルドしてるっぽくて相当時間かかった。

10分くらいかかった。

終わったら npm install し直すと、今度は成功した。やったね。

おしまい。

アンインストール

どうもwindows-build-toolsインストール前の状態への戻し方がわからない。npmのパッケージを削除してみたが、特に問題なく npm install が成功するようになってしまった。(まあ別にいいんだけど!)

>npm uninstall --global windows-build-tools

WindowsのSystem settingsから “Add or remote program” で一覧を開いて、今日インストールされたものの中からそれっぽいものを探す。どうやら以下の三つ。

  • Python 2.x.x
  • Microsoft Visual C++ Build Tools
  • Microsoft Visual C++ 2015 Redistributable (x64)

アンインストールするコマンドっぽいものはドキュメントに書いてあるんだけど、使い方がわからない……。これ↓と同じ症状。

参考

HTTPS対応しました。

カテゴリー: 日記

CertbotでLet’s Encryptを使ってHTTPS対応しました。今後はhttpsのURLであれこれしていこうと思ってます。

httpの場合は誘導リンク出るよ!

めっちゃ簡単だった。びっくりした。そのうち記事にします。

WordPress関連でも実はサーバ変更して再構築したんだけど色々まだ足りてないのがあって(画像編集とか)、諸々ぼちぼちやっていこうかと思ってます。なんか気が付いたらめっちゃアクセス数減ってたし。年始に何があったんだろ。

ひとまずお知らせまで。

なんかこう、しゅしゅしゅーんてな感じで動く検索画面のデモを作りました。

カテゴリー: CSS

こんなん。

雑に作ったので特に解説なし。