【脱jQuery】jQuery の width, height の取得を Pure JavaScript に置き換える

jQuery は window や document 、element に対して幅 ( width, innerWidth, outerWidth ) と高さ ( height, innerHeight, outerHeight ) の取得ができる。 element に対して width や height を取得するための互換コードを紹介してる記事が多いが、 windowdocument に対しての取得について触れてる記事がなさそうだったので、調べてみた。

jQuery 3.5 をベースに調査している。

$(window) に対しての width, height の取得

jQueryソースコードではこの部分 https://github.com/jquery/jquery/blob/7a0a850f3d41c0412609c1d32b1e602d4afe2f4e/src/dimensions.js#L23-L29

$(window).width

document.documentElement.clientWidth

window に対しての width の取得なのに、いきなり document が出てくるのでびっくりすると思うが、間違いではない。

window には width プロパティはなく、 innerWidthouterWidth しかない。 また、window.innerWidthスクロールバーを含む ウィンドウのビューポートの幅を返す。

https://developer.mozilla.org/ja/docs/Web/API/Window/innerWidth

たいていの場合、取得したいのは描画が可能なエリア、つまりスクロールバーを除いた幅なので、その利用者側の意図と JavaScript の使用の差を jQuery が吸収してくれている結果。

逆に、スクロールバーを含めたウィンドウのビューポートの幅を取得したい場合は window.innerWidth を使うことになる。

$(window).innerWidth

document.documentElement.clientWidth

$(window).innerWidth で取得できる値は、 $(window).width と同じである。

$(window).outerWidth

window.innerWidth

$(window).innerWidth はスクロールバーを含めた幅が返ってくる。

window.outerWidth はブラウザの外側の幅(サイドバーやその他ブラウザのUIを含めたもの)を返すので注意する。

$(window).height

document.documentElement.clientHeight

詳細は $(window).width と同じで、widthheight に読み替えれば大丈夫。

$(window).innerHeight

document.documentElement.clientHeight

$(window).innerHeight で取得できる値は、 $(window).height と同じである。

$(window).outerHeight

window.innerHeight

詳細は $(window).outerWidth と同じで、widthheight に読み替えれば大丈夫。

$(document) に対しての width, height の取得

jQueryソースコードではこの部分 https://github.com/jquery/jquery/blob/7a0a850f3d41c0412609c1d32b1e602d4afe2f4e/src/dimensions.js#L32-L42

$(document).width

Math.max(
  document.body.scrollWidth, document.documentElement.scrollWidth,
  document.body.offsetWidth, document.documentElement.offsetWidth,
  document.documentElement.clientWidth
)

$(document).innerWidth

$(document).width と同じ値を返す。

$(document).outerWidth

$(document).width と同じ値を返す。

$(document).height

Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.documentElement.clientHeight
)

$(document).innerHeight

$(document).height と同じ値を返す。

$(document).outerHeight

$(document).height と同じ値を返す。

友達の頼みでノートパソコンを見繕った

高校の時の友達から「パソコン買い替えたいんだけど、おすすめとか教えてくれない?」と連絡がきて「え〜俺も詳しくないし〜」とか思いつつ、なんだかんだ乗り気にヒアリングをしてよさげな端末を見繕ってしまった。

要望

  • スマホのバックアップ
  • 家で仕事(MS Officeを利用する)
  • 起動が速い
  • 小さい
  • 安い

要望を受けての想定スペック

  • HDDまたはSSD: 256GB以上
  • メモリ: 8GB(値段を抑えたければ4GB)
  • Office: あり。Office Home & Business であること
  • USB: USB type-A (USB type-C のみは避ける)
  • サイズ: 13〜15インチ (優先度低め)

選んだポイント

  • スマホのバックアップは子供の写真が多いだろうからできるだけストレージ容量の大きいもの。最低でも 256GB 以上がよさげ。
  • 速さにこだわるんだったら SSD 。ただし、容量に対して HDD よりは割高。コストを抑えつつストレージ容量を重視したい場合は HDD 。
  • メモリは 8GB 以上あれば Office の操作も快適。16GB はオーバースペック感。
  • 価格を抑えるためにメモリ 4GB という選択肢もあるけど、若干動作は遅くなる。
  • Office あり。Office Personal 2019 だと Powerpoint が含まれないので注意。
  • USB type-A のポートが最低1つ、できれば2つ以上あればOK。 type-Cは変換アダプタが必要な場面が多いので避ける。

選んだ商品

けっこうお高いのね。と言われ、スペックを落とせば少し価格も落ちるよといって、メモリを4GBに落としたもの。

それでもやっぱりそれくらいするのね。と言われ、MS Office の値段も含まれてるから本体価格にしたら普通に安いほうだよ。と言ったら、え。Officeって買うものなの?と聞かれ、なるほどーという気持ちになった。

そして、その高校の友達、高校生の頃にお付き合いをしたことがあり、さらに今のLINEのプロフィール画像が子供の写真になっていて、聞くといつのまにか結婚・出産をしておりとてもショックを受けた、ということを最後に記しておく。

GASでサイボウズ ガルーンの予定をSlackに通知する

今勤めている会社では、スケジューラーとしてサイボウズのガルーンを利用しています。
サイボウズにはKUNAIという公式のスマホアプリがあり、それが予定の更新や予定のn分前のリマインドを通知してくれます。
しかし、仕事中はスマホの通知には気づきづらく、それなりの頻度でガルーンをチェックする必要があります。

ガルーンが公式にブラウザ通知やSlack連携をサポートしてくれれば嬉しいんですがそんな機能もいまだなく、 またガルーンが提供するAPIはいままでSOAP APIしかなく、SOAPは扱いづらいためずっと自作も避けていました。

そんななか、いつのまにかガルーンのAPIREST APIが追加されていたので、予定のn分前になったらSlackに通知するGAS(Google Apps Script)を書いてみました。

Garoon Slack Notificator

github.com

使い方

使い方はGitHub Pagesで用意してみました。

takaya1992.com

サイボウズ ガルーンのREST APIを使ってみて

APIのユーザー認証方法がイケてないなと思いました。

developer.cybozu.io

ドキュメントを参照すると「パスワード認証」と「セッション認証」が用意されており、「パスワード認証」はIDパスワードを、:で連結した文字列をBASE64エンコードしたものをX-Cybozu-Authorizationヘッダーに乗せて、リクエストを送ります。 この「パスワード認証」のトークンの作り方はBASIC認証とまったく同じで、ただHTTPヘッダーが違うだけです。 生のIDとパスワードを扱うのはつらいので、リジェネレートしやすい別のAPIトークンを発行できたりとか、OAuthできるようになるととても嬉しいなと思います。

CSSのカラーコードを一括で短縮する

#fa05abのようにCSS等で指定するカラーコード。これは6桁または3桁の16進数で表現をしている。 6桁の場合はそれぞれ2桁ずつ、3桁の場合はそれぞれ1桁ずつを、RGBの順番にそれぞれの色の強さとして指定している。 6桁の指定で、2桁ずつ同じ文字を指定している場合は、3桁のカラーコードに短縮ができる。 例えば、#000000#000#ff00aa#f0aと。 このように短縮できるカラーコードを一括で変換したい事情があり、備忘録として残しておく。

変換

Macを想定。Linuxでもgsedsedと読み替えればOK。

GNU版のsedを使いたいので、brewでインストールしておく。

brew install gnu-sed

filelist.txtにファイルのパス一覧が入ってることを想定してるけど、ここはよしなに。

cat filelist.txt | xargs gsed -i -e 's/#\([0-9a-fA-F]\)\1\+\([0-9a-fA-F]\)\2\+\([0-9a-fA-F]\)\3\+/#\1\2\3/g'

macOSでVagrantのsshfsとGoogleのDriveFileStreamが共存できない

会社のMacGoogleのDriveFileStreamをインストールしたあと、Vagrantで開発環境を起動しようとしたらホスト側のディレクトリをマウントできずに起動に失敗してしまうようになった。

Vagrant起動時に出るエラー

Mounting SSHFS shared folder via reverse SSHFS mount failed. Please
look at the below output from from the processes that were run.

SSHFS command output:

mount_osxfuse: the file system is not available (255)

よく見てみると、Vagrantで使っているOSX_FUSEとDriveFileStreamで使っているDFSFUSEがかち合ってしまい、どちらか片方しか動作しないようだった。

ちなみに、Vagrantを先に起動しておいてDriveFileStreamを後から起動、そしてDriveFileStreamが起動失敗したときのエラーログ

ログファイルの場所: ~/Library/Application\ Support/Google/DriveFS/Logs/drive_fs.txt

2017-12-12T03:22:28ZE [123145566691328] stderr: mount_dfsfuse: the DFSFUSE file system is not available (255)
2017-12-12T03:22:28ZE [123145566691328] stderr: fuse: failed to mount file system: No such file or directory
2017-12-12T03:22:28ZE [123145569374208] mount.cc:92:Mount Could not mount fuse at /Volumes/GoogleDrive.

どうやったら回避できるかはまだ不明。

事業買収(譲渡)された時にエンジニアが確認・対応すべきチェックリスト

買収 Advent Calendar 2017 5日目の記事です。

自分が働いている会社または事業が買収(譲渡)されたときに、確認・対応すべきものをまとめてみました。
(ちゃんとまとめようと思ったんだけど、どうもやる気がでなくて箇条書きで…)
ちなみにこれは自分の経験談でもあります。

  • サービス内に記載している会社名、電話番号、 FAX番号、住所などの変更
  • 名刺の変更
  • 電話番号・FAX番号の変更、契約変更
    • 転送設定、期間、料金
  • 各種サービスのアカウント譲渡、名義変更
    • データセンターなどで運用しているオンプレなサーバ
    • AWS/GCP/Azure などのパブリッククラウドサービスで運用しているサーバ
      • アカウントの追加、アカウントへの移行、アカウントの切り離し
    • メール系インフラ(G Suiteや、Office 365など)
      • 転送設定、期間、料金
      • アカウント数での課金の場合、アカウント削除後同名のMLを作って、転送したい人をそのMLに登録するという手法をとることが多い。
    • AdobeやJetBrains IDE、その他契約中のソフトウェアについての契約、ライセンス
    • PC、携帯の入れ替え
      • 一時的にNASにバックアップ、または売却先にVPNを貼って売却先の共有ファイルサーバにアップロード
      • しっかりしているところだとVPNや共有ファイルサーバのアカウントは入社手続きがないと作れないので難しい場合がある
      • NASは2つ買っておいて、片方にバックアップしてもらって、受け渡し時にもう片方にコピーして両社が同じデータを持つようにして、不要なデータを持ち出していないかとかあのファイル貰ってないんだけど…と後からいざこざにならないように工夫をする場合もあるらしい。
    • その他会社支給品の返却

builderscon 2017 に行ってきた / DBの寿命は本当に長い

8/4, 8/5に開催されたbuilderscon 2017行ってきました。ブログを書くまでがbuildersconとのことなのでブログ書きます。

ちなみに、Find Job!という求人情報サイトもスポンサーをしております。 トートバッグの中にチラシが入ってるのでぜひ見てくださいね!!

チラシに印刷されたかわいいキャラクターは「アカボシ」ちゃんです。

www.find-job.net

心に残った言葉「データベースの寿命はアプリケーションよりも長い」

そーだいさんの発表で今回も「データベースの寿命はアプリケーションよりも長い」っていうワードがあったけど、これは本当に痛感しています。

いま自分が関わっているFind Job! という求人情報サイトは今年で20周年を迎えます。 その20年間のなかで、OSやプログラミング言語、アプリケーション、RDBMS(MySQL)は改修やバージョンアップを重ねていますが、Find Job! ができた当時にあったテーブルの構造はたぶんいまでもほぼ変わってないはず。本当にDBの寿命は長いです。

詳しくは言えませんが、さすがに20年間運用されて続けてきただけあって、いろいろつらいなと感じるテーブル構造なものもあります。
いまでこそ書籍やネットに設計手法やアンチパターンなどの情報はいくつもあるけど、当時はなかっただろうしこの現状はある程度仕方がないことだとは思います。

逆に言うと、いまは恵まれたことに(?)いい設計の話やアンチパターン、今回の発表のようなリファクタに関する話が広まっていて、(少し話がずれるけど)用途によってはRDBではなくNoSQLなDBを使うという選択も容易*1にできる時代です。さらに10年20年と続いていくサービスを開発するつもりならば、それらの情報をもとに徐々にDBをリファクタするべきだし、または新規に開発する機能・サービスではしっかりとDBの選定、設計をすべきだなと思いました。

発表の内容からだいぶ脱線しましたが、今回の発表を聞いて、DBのリファクタの手法や困ったときの相談先(=コミュニティ)を知れたので、今後実践していきたいです。
あと、発表の後半はけっこうエモくて勇気をもらいました。 いまでも少しずつではあるけどDBのリファクタは行っていて、先日もとある機能の改修の際にテーブル構造変えたり制約追加したりしてリファクタしましたが、今後も折れずに地道に頑張っていこうと思えました。

面白かった発表

分割QRコードの話

Twitterでも2回くらい言ってるけど、リアル謎解きイベントとかでアイテム(分割QRコード)を集めて、すべて揃うとメッセージが読める仕組みがあったら絶対おもしろい。
まぁ別に分割QRコードじゃなくてもよさそうだけど、通信は発生しないし、分割QRコードを読めるアプリさえ用意すればいいからお手軽かつそれっぽさが出ていいかな〜と妄想してました。

サーバレスの話

いまちょうど個人でも業務でもAWSのLambdaやらSQSやらその辺を使って開発をしていて、同じ壁にぶつかって(Macでビルドしたものが動かない…とか)、同じ解決方法をとっていて(Docker上でビルド)、とても共感できる話でした。

builderscon楽しかった

いくつも学びがあって楽しかったです。いつか自分も発表する側、運営する側にまわってみたいな〜って思いました。(高校の学園祭実行委員だったこと思い出して懐かしくなった)

最後に、水が重かった

最後に2つトートバッグもらったけど、それぞれのバッグにペットボトルの水が2本ずつ入ってて、その前にもらってた水と合わせると5本(合計約1.6kg)持って帰る事になり、けっこう大変でした。

*1:NoSQLの選択は容易ではあるけれど、安易に選択するべきではなさそう