performance.now() - Web APIs | MDN var startTime = Date.now(); // 重めの処理 // 重めの処理にかかった時間 console.log(Date.now() - startTime); // ms 的なことを実現したいときに、performance.nowをつかうとより制度の高い時間が計算できます。 var…

iOS7.1 Safariのminimal-uiと高さ100%コンテンツへの使用警告多少問題はありましたが、Safariの表示領域を広くつかう手段としては有効だったminimal-ui。しかし、 iOS 8 Release Notes には、 The minimal-ui viewport property is no longer supported in i…

特定の要素を全画面(フルスクリーン)にするFullscreen APIこちらを参考にDEMOをつくってみました。 DEMO http://jsrun.it/kimmy/fullscreen HTML <div id="target"> <img src="http://jsrun.it/assets/5/O/F/h/5OFhg.jpeg" /> </div> <div id="btn" class="btn red adjust"> <div class=hole> <div class="inner">FULL</div> </div> </div> JavaScript (function…

Grunt 作業メモ - みかづきブログ その3Gruntをつかいはじめてはや4ヶ月。 新たなタスクがどんどん増えてきております。 一旦ここにまとめておきます。 ディレクトリ構成 buildが開発用ディレクトリ、distが公開用ディレクトリです。 assetsディレクトリは諸…

Google FontsWEBフォントをつかったことがなかったので調べてみました。

すっかり秋ですね。いま一番必要な音楽と出会えるサービスこと オンガクスリ 。 最近作業用BGMにつかわせていただいている悩みを紹介します。 冬が嫌いです。冬を好きになれそうな歌を教えてください http://ongakusuri.com/topic/2406 http://ongakusuri.co…

無限ループ - みかづきブログ その3

Googleカスタム検索エンジンを調べてみました。 こちらのサイト から簡単に作成することができます。 (function() { var cx = '016617070659792596056:uixp4xttcky'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.asy…

今月のアマゾン買い物履歴です。 ワールドトリガー 一気にはまって一気に購入してしまいました。 8巻も買っちゃいたかったんですが、kindle版はコミックスの発売日と違うんですね。 コミックスの発売は10月3日、デジタル版の11月4日。 ジャンプコミックは1ヶ…

konashi.js 作業メモ - みかづきブログ その3先週末にまたも konashi をがっつり触る機会があったので気づいたことをメモしておきます。 ログを表示する window.kの中身を見ていて気づきました。 k.log というメソッドが用意されているようです。 // k.log f…

続・CSSでボタンをつくろう。 - みかづきブログ その3以前、 CSSでボタンをつくったこと がありましたが、今回はカラフルなボタンをつくってみました。 DEMO See the Pen button by kimmy (@kimmy) on CodePen. HTML <div class="btn red adjust"> <div class=hole> <div class="inner">H</div> </div> </div> <div class="btn purple adjust"> <div class=hole> <div class="inner">E</div> …</div></div>

consoleを自作する - みかづきブログ その3jQueryに依存しないバージョンをつくってみました。前回までは、 $console.log(); $console.dir(); という名前だったのですが、jQueryを使っていないのに$をつかっちゃまずかろうと思い、 _console.log(); _console…

WebViewの中などconsoleがつかえない環境用にconsole.logとconsole.dirを自作しました。 JavaScript (function(win, doc, $) { "use strict"; var $console = $('<div id="console"></div>'), $inner = $('<div id="console-inner"></div>'); _init(); function _init() { $(doc.body).append($console.append($inne…

裏面が傷だらけになってしまったiPhoneをなんとかしよう。 - みかづきブログ その3前回は応急処置で済ませましたが、カメラも不調になってしまったので修理に出すことにしました。 なんか色々面倒だったので次回以降のためにメモ。 マイサポートプロファイル…

OSをYosemiteにアップデートするにあたって、もういちど1からスタートし直そうと思い、MacBook Airを初期化してみました。もろもろ設定し直したのでメモ。 インストールしたアプリケーション Google Chome Google Chrome - Google の高速で安全なブラウザを…

iPhone6に機種変更してからはや4日。 華麗にアスファルトに落下させてしまい、裏面がボロボロになってしまいました。。。 表面がバリバリになったときの対処法 は以前考えたのですが、今回は裏面用の方法を紹介したいと思います。 バリバリに割れてしまったi…

YouTubeでマルチアングル風の演出をつくろう - みかづきブログ その3以前、2本のYouTubeを切り替えるモック をつくりましたが、それを応用して 「まじですかスカ！」 （ http://www.youtube.com/watch?v=ArfDmSjuU_Y）のPVを全員分同時に再生するサイトをつ…

モーニング娘。のPVは Solo Close-up Ver. と題してメンバーそれぞれのアップバージョンがあることがあります。 そこで、「まじですかスカ！」 （ http://www.youtube.com/watch?v=ArfDmSjuU_Y）のPVを誰のバージョンをみるかをスロットのインターフェイスで…

先日iPhone6を買ってかなりアプリをいれかえました。 なので今月はかなりはやいですが、つかってみたアプリをまとめてみます。 el とても綺麗なゲームです。絵本みたいな雰囲気がとてもよいです。BGMもよいです。 ただ、個人的にはこの手のゲームはバルーン…

だんだんシンプルになってきているような気もしますが、今日のCSSアニメーションです。 「ばいーん！」って感じのアニメーションをつくりたくて、「ばいーん！」って感じを目指してみました。 どうでしょう。個人的には意外と「ばいーん！」って感じになった…

これまでは、 @-webkit-keyframes step { 0% { left: 0px; } 19.99% { left: 0%; } 20% { left: 75px; } 39.99% { left: 75px; } 40% { left: 150px; } 59.99% { left: 150px; } 60% { left: 225px; } 79.99% { left: 225px; } 80% { left: 300px; } 99.99% …

HTML5のカスタムデータ属性に値を操作しようとしたときに、jQueryのdataメソッドをつかうと期待と違う動作をするときがあります。 JavaScript (function(win, doc, $) { "use strict"; var $div = $("div"); console.log($div.data("msg")); // => hello con…

ゴリラのイラストをツイートする - みかづきブログ その3先日投稿したこちらの記事ですが、実はこのような意図がありました。 順を追って説明していきます。 ツイートを行う際に画像を追加すると画像付きのツイートを投稿することができます。画像付きツイー…

[追記] jsdo.it終了に伴いDEMOを移動しました。blog.kimizuka.org---Facebookが関西弁に対応したということで早速調査してみました。locale は ja_KS の模様。なので、いいねボタンを設置する際のパラメータとして、 locale=ja_KSを渡せば ええやん！ボタン …

ゴリラのイラストをツイート

ダイナミックにGoogleMapを埋め込んだページで、ページをスクロールしようとしているのにMapが拡大 / 縮小してしまうことってありますよね。 こんなときはオプションの scrollwheel を false に設定するとスクロールイベントを無効にできます。 と。親切な方…

俄然Canvas勉強中です。 Canvasでベジェ曲線を描く時はコンテキストの quadraticCurveTo メソッドをつかいます。 今回は無意味にアニメーションをつけてみました。 DEMO JavaScript (function(win, doc) { "use strict"; var canvas = doc.querySelector("#c…

前回 つくったデリゲートですが、evt.target がマッチするしか調べていませんでした。 delegateをつくろう - みかづきブログ その3なので、 <div id="room"> <div class="member" id="no1">清田</div> </div> という構造なら問題がありませんが、 <div id="room"> <div class="member" id="no1"><p>清田</p></div> </div> と、ターゲットに子要素があったとき、子要素をクリックしても…

background-positionをアニメーションさせる - みかづきブログ その3昨日はbackground-positionをアニメーションさせていましたが、今回はbackground-sizeをアニメーションさせてみました。実装方針は変わりません。 DEMO JavaScript (function(win, doc, $)…

background-positionは通常jQueryのanimateで操作することができません。 プラグインをつかえば動かすことができるようになりますが、今回は自前で実装してみましょう。 方針としてはjQueryのanimateでmodelの値をイージングをかけて変化しつつ、その値をvie…