IE対応をしながらブラウザの表示可能領域のwidthとheightを得る

ブラウザの表示可能領域の横幅と縦幅を取るにはこれ

// 横幅
console.log(document.documentElement.clientWidth);
// 縦幅
console.log(document.documentElement.clientHeight);

ブラウザの表示可能領域を取得したいケースってたくさんあるだろうかと思う。CSSだけでも実装できるけど、JSを使わないと実装できないこともたくさんあるので覚えようぜ。

Thanks

kaelab.ranadesign.com

カウントダウンタイマーを作った

f:id:hoge:20150523122158p:plain

カウントダウンタイマーというものを作ってみた。タイマーのタイトルとカウントダウンしたい日付を入力すると即席でタイマーが作れるというどうでもいい代物。外部公開もできるので興味のある人は使ってみてくれ。

私の娘の10歳の誕生日をカウントダウンするタイマーを作りたかったので作ってみたら結構簡単にできた。

対話形式の文章を書くための「対話形式エディター」を作った

f:id:hoge:20150523122245p:plain

http://static.hoge.com/interactive-editor/

対話形式エディターなるものを作ってみた。タブで話し手を切り替えて、チャット感覚で文章が打てるのでいろんな所で使えそう。JSだけで実装してるし、GETで何か渡すわけでもないので私が他の人の編集内容を見ることはできないし、外部公開されることもないので安心よ♡

Amazon S3で静的サイトを独自ドメインで公開する

やったことは大きく5つ

  • バケットを作成する
  • バケットポリシーを編集して匿名ユーザーの読み取りを許可
  • ウェブサイトのホスティングを有効にする
  • インデックスドキュメントとエラードキュメントを設定
  • CNAMEで独自ドメインでアクセスできるようにする

パケットの作成

サービスからS3へ移動してバケットを作成する

f:id:hoge:20150509102653p:plain

バケットポリシーを編集する

{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AddPerm",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::static.example.com/*"
}
]
}

ポリシーのサンプルは全てここにある

docs.aws.amazon.com

ウェブサイトホスティングを有効にする

バケットのプロパティからホスティングに関する項目があってそっから有効にできるし、インデックスドキュメントとエラードキュメントもここで設定できる。

ホスティングの項目で公開URLみたいなやつも表示されているけど、そもそもこのURLは形式が決まっていて、バケット名を繋げた以下みたいな感じになっていて、リージョンによってちょっと変わる

バケット名.s3-website-ap-northeast-1amazonaws.com

詳しくはこっち

docs.aws.amazon.com

CNAMEの設定

ここはそのまま設定するだけ。公開されているアドレスに対して公開したいサブドメイン的なものを設定するだけ。

ファイルのアップロード

ブラウザから行えるが認証設定からアクセスキーIDとシークレットアクセスキーを取得してどうこうできるみたいだが、ブラウザのアップロード機能が十分便利なのでわざわざそんなことをしなくてもいいような気がした。

IE8とかにもgetElementsByClassNameを実装してみる

IE8ではdocument.getElementsByClassName()が確か無い気がする。詳しくは知らねえけど手動で実装するなら以下のような感じになるのかね。

var getElementsByClassName = function(className) {
var elements = document.getElementsByTagName('*');
var result = [];
for (var i = 0; i < elements.length; i++) {
var classList = elements[i].className.split(' ');
for (var c = 0; c < classList.length; c++) {
if (classList[c] === className) {
result.push(elements[i]);
break;
}
}
}
return result;
}

実行してみる

var result = getElementsByClassName('h1');
console.log(result);

結果は以下

[h1.h1.dummy]

記述的にはこんな感じで動くので、上手く動かないならちょっと修正したらいいんじゃない。私は古いブラウザの対応についてそこまで注力するつもりはねえ。

Macの音量が変更できなくなった場合

Macで音量変更キーで音量が変更できなくなったが、イヤホンを一度抜いて挿し直したら音量が変更できるようになった。特別な変更をMacに行ったわけではないので認識のズレなんだと思うが’、とても利用がしづらく面倒臭かった。

&amp;#39;libxml/xmlversion.h&amp;#39; file not found$ sudo easy_install pyqueryと言われたら

Xcpdeを入れろという記事があるのでアップデートしても変化なし。xcode-select --installしろという記事があるか実行しても効果なし。

xcode-select --install

brewでlibxml2を入れても効果なし

brew install libxml2

breqでlibxsltを入れても効果なし

brew install libxslt

これを実行することによってできるようになった

brew link libxml2 --force
brew link libxslt --force

これで問題なくなった