EventTarget.addEventListener() - Web API | MDN addEventListenerの第3引数でuseCaptureを指定することができます。 useCaptureがfalse 簡単にいえば子要素からイベントが発火します。 useCaptureがtrue 簡単にいえば親要素からイベントが発火します。 挙…

https://dev.twitter.com/ja/web/embedded-timelines https://dev.twitter.com/ja/web/embedded-timelines いつのまにかひっそりとサポートを切られていました。https://dev.twitter.com/faq/twitter-for-websites-%26-widgetsAndroidは4.Xからサポートとな…

touchstart、touchmoveの座標等の情報は、touchesにアクセスすればOKなのですが、touchesには現在画面上にある指の情報の配列のため、touchend発生時は離れた指の情報は入っていません。そんなときはchangedtouchesにアクセスしましょう。 JavaScript (funct…

setPlaybackRateを変更することで再生速度を変更することができます。 0.5倍から2倍まで指定ができるようです。 DEMO JavaScript // プレイヤーインスタンス収納用変数 var player; // iframeAPIの準備ができたときに実行されるコールバック関数 function on…

1. ツール > Web 開発 > 開発ツールを表示 を選択2. 歯車マークを選択3. 3Dビューにチェックをいれる4. 歯車マークの左隣の方にあるキューブみたいなボタンを押す5. ドラッグしたりしてページをぐるぐる回す 以上、なんかたぶんこんな感じです。

風邪をひいて声が出なくなってしまったので、Mac の sayコマンドを活用してみました。 sayコマンドのつかいかた say helloこちらのコマンドをターミナルにコピペするだけで「hello」と読みあげてくれます。 基本的には英語の発音になるので自己紹介と基本的…

ECMAScript 6で書いたJavaScriptのコードをECMAScript 5に変換する - みかづきブログ その3 以前、6to5というツールを紹介しましたが、いつのまにか名前が変わってました。 その名も「babel」。 なんだか崩壊しそうな名前ですね。 GitHub - babel/babel: Ba…

まだ発生条件が完全にわかっていないのですが、IE11でposition: fixed;の要素がスクロール時にガタつくときがあります。 ユーザ側の対策としては、 インターネットオプション > 詳細設定 > スムーズスクロールを使用する のチェックを外したら直りました。 …

http://200.kimizuka.fm/ http://200.kimizuka.fm/ 200を返すページをつくってみました。 200が返ってこない場合やオフラインの場合はChrome的な恐竜が表示されます。

404 NOT FOUND - みかづきブログ その3 以前つくった 404ページ ですが、実際の404ページに設定してみました。 404 | NOT FOUND 上記ページは200を返すサンプルページなので、本物の404が欲しい場合は、http://404.kimizuka.fm/404等、実際には存在しないペ…

タイトル・ディスクリプションの欄をクリックしたら書き換えることができました。 よく考えると、制作者がOGPタグで設定したタイトル、ディスクリプションはあくまでデフォルトのものでしかないということですね。 【2016.09.01 追記】 いつの間にか編集不可…

Chromeのアドレスバーに下記URLを打ちこめば一覧が確認できるのでそこから削除すればOKです。 chrome://appcache-internals/ 昔はアプリケーションキャッシュを消すのも一苦労だった気がしますが、とても便利な世の中になりましたね。

正確にははじめてではないんですが、ひさしぶりにCoffeeScriptをつかったらほぼすべてを忘れてしまっていたので思い出したことをメモに残しておこうと思います。CoffeeScript 導入方法 npm install -g coffee-scriptnpmがつかえればらくらくです。 コンパイ…

DEMO HTML <canvas id="canvas"></canvas> JavaScript (function(win) { "use strict"; win.App = {}; })(this); (function(win, doc, ns, $) { "use strict"; function Stage(stgCtx, width) { var that = this, canvas = doc.createElement("canvas"), ctx = canvas.getContext("2d"), i…

DEMO See the Pen Chrome's Error by kimmy (@kimmy) on CodePen. HTML <div class="dinosaur position size"> <header class="head"> <div class="face"> <div class="eye"></div> </div> <div class="chin"><div> </header> <div class="body"> <div class="neck"></div> <div class="breast"></div> <div class="belly">…</div></div></div>

Sass .btn { display: block; cursor: pointer; } .redBtn { @extend .btn; width: 160px; height: 90px; background-color: red; } このSassをコンパイルすると、 CSS .btn { display: block; cursor: pointer; } .redBtn { display: block; cursor: pointe…

試みました。 DEMO See the Pen Coke by kimmy (@kimmy) on CodePen. JavaScript (function(win) { var requestAnimationFrame = win.requestAnimationFrame || win.mozRequestAnimationFrame || win.webkitRequestAnimationFrame || win.msRequestAnimation…

前回Tumblr API をつかって 最新の投稿（しかもTextのみ）を取得しました が、今回は様々な投稿タイプに対応させつつ最新20件を取得するように改修してみました。 Tumblr API で 投稿内容を取得する - みかづきブログ その3 DEMO JavaScript // forked from …

(function(win, doc) { "use strict"; var ua = doc.getElementById("ua-2015-02-09"); textContent(ua, navigator.userAgent); function textContent(elm, value) { var content = elm.textContent; if (value === undefined) { if (content !== undefined)…

先日職場の後輩（マークアップエンジニア）に、「ゲームのUIとか演出を研究するのはすごく勉強になるよ。」とアドバイスしたのですが、僕自身も最近のゲームを全然やってなかったのでPS3を購入してみました。PlayStation3 チャコール・ブラック 500GB (CECH4…

前回つくったもの の焼き直しです。 Canvas アニメーション習作 - みかづきブログ その3 DEMO See the Pen Dots by kimmy (@kimmy) on CodePen. JavaScript (function(win, doc) { function Dot(ctx) { this.ctx = ctx; } Dot.SIZE = { MAX: 30, DIFF: 10 };…

※ Chromeのデベロッパーツールでご観覧ください。 console.log('%cconsoleのスタイルを整える', 'font-size: 200%; font-weight: bold;'); console.log(''); console.log('chromeのコンソールは第一引数に\%cをつけた文字列、第二引数にスタイルを渡すことに…

IEとかもろもろを考えると、iframeのcontentWindowにアクセスするのがベストな気がしています。 その際、iframeのonloadを待たないとうまくいかないのでご注意を。 JavaScript (function(win, doc) { "use strict"; var iframe = doc.getElementById("iframe…

先日紹介した 金の Chrome こと Chrome Canary ですが、一部ES6を評価してくれます。 金のChromeを手に入れる方法 - みかづきブログ その3 なので、 こちらの記事で紹介したテンプレート は Chrome Canary ではつかえてしまうのです。 JavaScriptで変数に代…

以前、ページのローディング中に ローリング・ストーンズ の曲が流れる 「ローディング・ストーンズ」 というページをつくったことがありました。 The Loading Stones - みかづきブログ その3 今回は、404ページ用に Mr.Children の NOT FOUND が流れるページ…

+1ボタンを設置してみよう。 - みかづきブログ その3かつて、+1ボタンを押してくれたユーザーに感謝の気持を込めてゴリラの写真を披露する実装を試したことがありますが、今回はツイートボタンを押してくれたユーザーに感謝の気持を込めてゴリラの写真を披露…

DEMO Tumblrの投稿内容をAPIで取得して表示するモックを作成しました。最新のものを1件表示し、クリックするとTumblrにジャンプします。 ※ 最新の投稿のタイプがテキストのときのみ動作します。 JavaScript $(function(){ var domain = "surprisewindow.tumb…

DEMO See the Pen Dots by kimmy (@kimmy) on CodePen. JavaScript (function(win, doc) { function Dot(ctx) { this.ctx = ctx; } Dot.SIZE = { MAX: 30, DIFF: 29 }; Dot.prototype = { constructor: Dot, draw: function(x, y, r) { var ctx = this.ctx; …