Filters〜無限に増えるフィルター加工で写真や動画がもっと楽しくなるカメラアプリ〜 https://itunes.apple.com/jp/app/filters-wu-xianni-zengerufiruta/id926621140?mt=8&uo=4&at=10l16903インスタグラムやPathのようなフィルターを自作できるアプリです。…

2014年は途中からAmazonの買い物履歴を公開してきましたが、今年本当に買ってよかったものをまとめてみようと思います。 Amazon カテゴリーの記事一覧 - みかづきブログ その3 SCHWINN CUTTER SCHWINN(シュウィン) シングルスピード CUTTER ブラック Mサイズ…

iPhoneのMobile Safariでdocumentに設定したクリックイベントが効かないときの対処法 - みかづきブログ その3昔はiPhoneのMobile Safariでdocumentにクリックイベントが設定できなかったんですが、iOS8.1.2で試したら動くようになってました。 DEMO

基本的には、 JavaScript document.addEventListener("touchmove", function(evt) { evt.preventDefault(); }, false); という感じでtouchmoveのデフォルトのイベントを止めればスクロールしません。が。一部Androidではこの設定を乗り越えてページをスクロ…

<meta name="viewport" content="width=device-width,user-scalable=no"/> と設定すると一部Androidで拡大された状態で表示されてしまうのですが、 <meta name="viewport" content="width=device-width"/> メタタグの時点ではwidthのみ決めておき、 <script> document.querySelector("[name=viewport]").setAttribute("content", "width=device-width, initial-scale=1, use…</meta></meta>

http://graph.facebook.com/?id=#{シェア数を取得したいURL} で簡単に取得することができます。 DEMO http://kimizuka.fm のシェア数を取得しています JavaScript $.ajax({ url:'http://graph.facebook.com/?id=http://kimizuka.fm/' }).done(function(evt) …

vw, vh, vmax, vmin をつかえばらくらく指定できます。 vw, vh 親のサイズに依存することなく、viewportを基準にサイズを指定できる単位です。 .viewport { width: 100vw; height: 100vh; } と指定すればviewportのサイズに対して100%、 .viewport { width: …

DEMO HTML <div class="btn"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> CSS body { background: #333; } .btn { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 44px; height: 44px; cursor: pointer; overflow: hidden; .line { position: …

DEMO See the Pen hello world. by kimmy (@kimmy) on CodePen. HTML <div class="txt t0"> <p class="txt-copy"></p> <div class="txt-underline"> <div class="txt-cursor"></div> </div> </div> SCSS body { color: #333; font: 30px AvenirNext-Heavy; background: #a3a3a3; } .txt { position: absolute; top: 0; bott…

（開発者ツールでコンソールを開いてリロードしてみてください）めっちゃ便利ですね！ JavaScript console.table([ { no: 7, name: "鈴木大地", ave: 0.287, hr: 3, rbi: 43 }, { no: 61, name: "角中勝也", ave: 0.277, hr: 8, rbi: 57 }, { no: 8, name: "…

前回つくったもの のFPSをさげてスピードを上げてみました。 Canvasで塗りつぶしを加算しつつ残像を残す - みかづきブログ その3 DEMO See the Pen Ball by kimmy (@kimmy) on CodePen. ほんのりおしゃれさがアップしましたね。

ボールが己の中に2つCanvasを持つように改修してみました。 調子に乗ってボールの数も増やしているので結構重めの処理になってしまってます。

公式サイト からつくれるツイートボタンはiframeのsrcにツイート本文が埋め込まれます。 なので、iframeのsrcを書き換えてappendしなおすとツイート本文を差し替えることができます。 DEMO HTML <div> <input class="txt" placeholder="シェア文言" /> <a class="btn make">作成</a> </div> <div id="box"> </div>

ページを離れる際に確認のダイアログを出す（PC版） - みかづきブログ その3前回の記事ですが、iPhoneではページの去り際に beforeunload ページ遷移の際にイベントが発火しないので動作しません。しかし、ページを遷移する際にpagehideイベントが発火するの…

window の beforeunloadイベントのコールバック内でreturnValueにストリングを代入すると、ページ遷移しようとした際にダイアログが表示されます。 JavaScript window.addEventListener("beforeunload", function (evt) { evt.returnValue = "じぇじぇじぇ！…

Canvasでボールをはねさせる - みかづきブログ その3context の globalCompositeOperation を lighter に指定して、 こちらのボール の塗りつぶし色を加算で合成してみましょう。 DEMO JavaScript (function(win, doc, ns) { "use strict"; function _revers…

Canvasではねさせたボールに残像をつける - みかづきブログ その3 Canvasでボールをはねさせる - みかづきブログ その3よく考えると 前回つくったもの は残像とは言いがたいものでした。（マリオカートのゴーストみたいなものをイメージしてました）今回は、…

SCSSをつかうとセレクタをネストで書けるようになります。 その際、& ををつかうと1つ親のセレクタを参照できます。 SCSS .box { &.red { background: #dc5252; } } ↓ CSS .box.red { background: #dc5252; } SCSS .box { .blue & { background: #65b9c3; } …

DEMO See the Pen Box by kimmy (@kimmy) on CodePen. HTML <ol class="box"> <li class="surface front"></li> <li class="surface back"></li> <li class="surface left"></li> <li class="surface right"></li> <li class="surface top"></li> <li class="surface bottom"></li> </ol> SCSS $size: 200px; html { width:…

以前、 6to5 というツールをつかって ECMAScript 6 を試す方法をしょうかいしましたが、なんと、 jsdo.it にも同様の機能が搭載されました！ ECMAScript 6で書いたJavaScriptのコードをECMAScript 5に変換する - みかづきブログ その3 GitHub - babel/babel:…

このエントリーは jQuery Advent Calendar 2014 の 11日目のエントリーです。原稿が締め切りに間に合わないことを「原稿を落とす」と表現することがありますね。当日までになにか思いつくだろうと軽い気持ちでアドベントカレンダーに登録したものの、なにも…

iOS 8.1.2 で SpeechSynthesisUtterance の rate とか pitch が効くようになった気がします。 JavaScript (function(win, doc) { "use strict"; var msg = new SpeechSynthesisUtterance("生麦生米生卵"), isPlay = false; msg.lang = "ja-JP"; msg.onend = …

ページをクリックするたびにAudioを再生しようと思い、 (function(win, doc) { "use strict"; var audio = new Audio("./audio.mp3"); // localhost上のファイル document.addEventListener("click", function() { audio.currentTime = 0; // 再生位置を先頭…

Canvasでボールをはねさせる - みかづきブログ その3以前つくったバウンドするボール に残像をつけてみましょう。 DEMO 実装的には毎フレームCanvasの状態を保持しておき、4フレーム前の状態を半透明にしてdrawImageしています。 JavaScript // forked from …

こちらの背景透過画像にシャドウを落としてみましょう。 box-shadow 画像の縁にshadowを落とせます。 CSS .img { box-shadow: 0 0 5px rgba(0, 0, 0, .5); } -webkit-filter: dropshadow 画像の縁ではなく、透過ではない部分にshadowを落とせます。 CSS .img…

このサイト を参考にWebAudioAPIに取り組み、不気味な音を醸し出すことに成功しました。 Getting Started with Web Audio API - HTML5 Rocks DEMO ループでmp3を再生し続けつつ、再生スピードをランダムで変更しています。 JavaScript (function(win, doc) {…

これまで、UIView、Canvas要素の背景をグラデーションにしてきましたが、今回はCSSでDOMの背景をグラデーションにしてみます。 UIViewの背景にグラデーションを設定しよう。 - みかづきブログ その3 Canvasの塗りつぶし色にグラデーションを設定する - みか…

よく検証につかっているサイト jsdo.it ですが、実はAdd Libraryボタンから別のJSファイルを読み込むことができます。そこで己の検証時間を短縮すべく、毎回つかうようなクラスをjsdo.it上にアップしてみました。 NameSpace http://jsdo.it/kimmy/NameSpace …

前回つくったもの を3D的な感じにしてみました。 CSSアニメーションを一時停止する - みかづきブログ その3 DEMO See the Pen plate that rotates by kimmy (@kimmy) on CodePen. HTML <div id="plate"> <div class="front">HELLO</div> <div class="back">WORLD.</div> </div> CSS body { background: #e3e3e3; } #plate { position:…

CSSアニメーションは animation-play-state: paused; で一時停止することができます。 animation-play-state: running; でアニメーションします。 DEMO クリックするとアニメーションが一時停止し、もう一度クリックすると再び動き出します。 内部的にはpaus…