静的サイトで JS/CSS のキャッシュを防ぎつつレポジトリをキレイに保つ
「ABOUT」のページをリニューアルしました。 １つ前のデザインのままだったものを、現在のデザインに沿って作りなおして、ついでに文章やレイアウトなども整えました。 公開したものの問題発生 意気揚々と公開してみたのですが、１つ問題が見つかりました。 ページを公開したあと、本番環境を表示するとデザインが崩れていました。そのあと、ページをリロードすると期待通りの結果になりました。 原因は CSS がキャッシュされていた ことでした。 たとえページが更新されていたとしても、JavaScript や CSS は古いキャッシュを使い続けてしまうことがあります。 で、この問題に対処しようとしたのですが、「静的生成」「生成結果を GitHub で管理」「キャッシュ問題への対策」の 3 つのいいとこ取りをしようとすると、意外に複雑でした。 その話をいまからします。 キャッシュ問題の一般的な解決策 よく見る解
Visual Studio Code は JavaScript 開発が超絶便利になる可能性を秘めている！
Visual Studio Code は JavaScript 開発が超絶便利になる可能性を秘めている！ クロスプラットフォームでオープンソースな IDE 環境、Visual Studio Code が公開されたので試してみた。 拡張を入れなくても、デフォルトで JavaScript の「自動 Lint」「Grunt、Gulp 連携」「デバッグ」が動いた。なんだかすごく便利そうな予感。 Windows 環境で起動してみたらこんな画面だった。 なんか黒いが、色は好みにカスタマイズできるし、プリセットからも選べる。 フォルダーを開くことから始まる Visual Studio Code にはプロジェクトの概念はない。 [File] > [Open Folder] からフォルダーを開けばよい。 ためしに、過去に作った Node.js 製の livereloadx のフォルダーを開いてみた。 左側に
jQuery の bind, unbind の裏側
jQuery のソースを呼んでいて、イベント登録のところが複雑だったので備忘録として記しておく。 バージョンは 1.2.1。 そもそもの目的 DOM 標準の removeEventListener は、element と type(click, submit, blur など) と listener の３つを指定する必要がある。 element.removeEventListener(click, listener, false); jQuery ではイベント解除に unbind という便利な関数が用意されている。 element, type, listener を指定して解除する（通常の removeEventListener と同じ）element, type を指定して全てのイベントハンドラを解除するelement から全てのイベントを解除する 例えば、 $("#foo").unbi
jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話
jQuery 1.9 がリリースされました。1.9 の新機能の中ではあまり注目されていませんが、ソースマップに対応したのが地味に便利そうです。 というのも、圧縮版の jquery.min.js を使っていると 何か問題が起きたときにスタックトレースを眺めても jQuery の部分が意味不明 デバッガーで jQuery のソースにステップインしても意味不明 といった理由で、開発中には非圧縮の jquery.js を使うことが多かったわけです。 それが、1.9 からはソースマップに対応したので圧縮版のままでのデバッグが簡単になってます。 超簡単な使い方 ソースマップに対応したブラウザーは現時点では Google Chrome のみなので、Google Chrome の手順を説明します。 (Firefox はソースマップへの対応を計画中らしい) 事前準備を忘れずに Google Chrome で
GitHub で clone するときは SSH じゃなく HTTP を使ったほうが高速
GitHub には clone するための URL として [HTTP]、[SSH]、[Git Read-Only] の 3 つが用意されている。 いままで、SSH に慣れているという理由だけで [SSH] を利用していたのだけど、「SSH は転送速度が遅い」という問題がある。 SSH だとこんなに遅い… さっき、[SSH] で clone してみたら 20～60 KiB/s 程度の速度しか出なかった。 $ git clone git@github.com:nitoyon/tech.nitoyon.com.git Cloning into 'tech.nitoyon.com'... remote: Counting objects: 8856, done. remote: Compressing objects: 100% (2125/2125), done. remote: Total
-webkit-text-size-adjust: none を絶対に設定してはいけない理由
PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
git difftool --dir-diff が便利すぎて泣きそうです
Git の 1.7.11 から git difftool コマンドに --dir-diff というオプションが追加されたのですが、これがライフ チェンジングだと思ったので紹介します。 --dir-diff 登場以前の git difftool は「ファイルごとに順番に差分を表示していく」ことしかできず、使い勝手はいまいちでした。それが、--dir-diff オプションの登場で状況が一変したわけです。 こんな感じの使い心地だよ ある Git レポジトリーで dir1/a.txt と dir2/c.txt を編集したとしましょう。 この状態で git difftool --dir-diff または git difftool -d を実行してみると・・・。 はい、差分のあるファイルが一覧で表示されました。 (difftool に WinMerge を設定して、メニューから [ツリー表示] を有効
クラスタリングの定番アルゴリズム「K-means法」をビジュアライズしてみた
集合知プログラミング を読んでいたら、K-means 法（K平均法）の説明が出てきました。 K-means 法はクラスタリングを行うための定番のアルゴリズムらしいです。存在は知っていたんだけどいまいちピンときていなかったので、動作を理解するためにサンプルを作ってみました。 クリックすると１ステップずつ動かすことができます。クラスタの数や点の数を変更して、Restart を押すと好きなパラメータで試すことができます。 こうやって１ステップずつ確認しながら動かしてみると、意外に単純な仕組みなのが実感できました。 (追記) HTML5 版の K-means 法を D3.js でビジュアライズしてみた も作成しました。Flash を表示できない環境ではそちらをご覧ください。 K-means 法とは K平均法 - Wikipedia に詳しく書いてあるけど、もうすこしザックリと書くとこんなイメージに
飛び出る Google マップを作ってみた - てっく煮ブログ
あまり知られていないけど、Google マップには MapsGL というのがあって一部の建物が 3D 表示になったりする。といっても Google Earth のように角度を変えて表示したりはできないんだけど、地図をスクロールすると高い建物の傾き具合が変化する。この表示方法のことを、Google では「parallax (視差効果)」と呼んでいるようだ。「視差」という言葉で思い出すのは立体視。MapsGL の視差効果を使えば、立体視を作れそう！試しに作ってみた。飛び出る東京都庁どうせなら高いビルを立体視したい。思いついたのは西新宿のオフィス街。その中でもひときわ目立つ 東京都庁で試してみた。平行法交差法飛び出るビッグベンお次は、ロンドンの ビッグ・ベン。複雑な建物の構造が再現されているので、なかなかいい立体感だ。平行法交差法浮き上がりましたか？それなりに立体にみえて面白い。本当はもっといっ
簡単にファミコンのプレイ画像を入手する方法 - てっく煮ブログ
ゲーム名で Google 画像検索しても意外にプレイ画像は手に入りにくい。たとえば「スーパーマリオ3」で検索するとこうなる。パッケージ写真だったり、二次創作だったり、テレビ画面を写真に撮った画像だったりがヒットするのでノイズが多い。さらにたちが悪いのがプレイ動画のサムネール。一覧ではまともに見えるのに、開いてみるとボケていてがっかりしてしまう。上の画像のそれっぽく見えるやつも、実はほとんどが動画のサムネールである。やりかた左側の [サイズを指定] をクリックして、256×240 を指定して検索するだけ。かなりの的中率になった。エミュレーターで遊んだ人がそのままキャプチャーしてアップロードしたものだと思う。等倍の画像なので変にボケてなくて便利。どうぞご利用ください。ツイートする
Box2D Lite を Flash 化してみた - てっく煮ブログ
これまで Box2D を使っていろいろ作ったのだけど、Box2D をはじめとする物理エンジンがどのような仕組みで動いているのか、理解していなかった。まとまった時間がある GW の間に Box2dFlashAS3 のソースを読もうとしたのだけど意味不明すぎる。Box2D Lite があるじゃないか諦めかけたころに、Box2D の ダウンロード ページを眺めていたら Box2D Lite なるものが存在していた。どうやら、Box2D Lite は Box2D の初期リリースのようだ。ちょっと見てみたところ、ソースの分量も少なくてシンプル。機能が増えて複雑になる手前なら全体構造も把握しやすい！気分よくソースを読んで Box2D Lite の全体構造は把握できたものの、衝突判定のところはやっぱり意味不明。挫折して Flash 化悶々として楽しくなかったので、C++ のソースを ActionScri
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
