一時期流行っていたものをつくってみました。動きしかつくってません。（シェア機能はありません） DEMO

kimizuka.hatenablog.com遷移しようとした際にconfirmを出すことは簡単なのですが、キャンセルを押した際、どのような処理が適切なのかが思いつきませんでした。 本当は遷移をキャンセルしたかったのですが、それはできず。 次点として一旦遷移後にlocation.…

OK・キャンセルでよければ confirm をつかえばOKです。 JavaScript (function(win, doc) { "use strict"; var TXT = "テキスト"; if (confirm(TXT)) { alert("OKの処理"); } else { alert("キャンセルの処理"); } })(this, document); DEMO

api.jquery.comいままで、 btn.addEventListener("click", function _handleClick() { btn.removeEventListener("click", _handleClick); alert("wow!"); }, false); 的な感じで書いてましたが、最近jQueryをつかう場合はoneをつかうようになりました。 Java…

kimizuka.hatenablog.comこちらの記事 で紹介しましたが、Androidでは擬似要素にCSSアニメーションが効かない機種があり、その対策として.afterというクラスを持ったdivに置き換えていたのですが、置き換えても一部AndroidでのみCSSアニメーションが再生され…

本日遭遇しました。 displayをblockにしたあとにbackground-imageのurlのパスにタイムスタンプをつけることによって解決しました。 この方法では、レンダリングが2回走ることになり、サイズの大きなgifアニメだと一瞬消えてしまうので注意が必要です。 JavaS…

前回の記事 でDISQUSってなんぞや？と思ったので調査して導入してみました。 Disqusとは disqus.comDisqus（ディスカス）は、Webサイトやブログに中央集権型のコメント機能を提供するオンラインサービスである。2007年に設立され、Big Head Labs Inc. の名前…

iOS9で話題になっていたSafariのコンテンツブロック機能。その実力を簡単に調査してみました。 コンテンツブロックとは iOS9にアップデートすれば、それだけでコンテンツブロック機能がつかえるようになると思っていたのですが、実際はそうではありません。 …

kimizuka.hatenablog.com前回の記事 でちらっと紹介しましたが、CSSアニメーションの途中にdisplayをnoneにするとtransitionend、animationendが発火しなくなります。 DEMO transitionend animationend 発火しない際には疑ってみてもいいかもしれません。

基本的にはトランジションの際はtransitionend、キーフレームアニメーションの際はanimationendをつかえばOKです。 transitionend HTML <div class="box"></div> CSS .box { position: absolute; top: 20px; left: 20px; border-radius: 12px; width: 120px; height: 120px; backgro…

非同期の処理をうまく扱うためにDefferdをつくりました。 要件 内部状態は 初期状態 から 成功 / 失敗 に切り替わる 1度切り替わったら状態は変わらない 成功、失敗状態になった際に発火するコールバック関数を登録することができる コールバック関数は登録…

便利ですが、範囲の指定には気をつけましょうという話です。github.com // grunt-autoprefixer autoprefixer: { options: { browsers: ["last 2 version"] // 対象のバージョンが指定できる }, develop: { src: "build/data/css/*.css" }, distribution: { s…

(function(win, doc) { "use strict"; var obj = {}; obj.addEventListener = addEventListener; function addEventListener() { // ... } })(this, document); 的なコードを書いていたところ、JSHintで、 'addEventListener' is already defined.と怒られま…

連載中 ワールドトリガー ワールドトリガー 1 (ジャンプコミックスDIGITAL)作者:葦原大介集英社Amazonほんのり理屈っぽい漫画が好きなので、今いちばん好きな漫画と言っても過言ではありません。 侵略者から街を守る漫画はいままでもあったと思うのですが、…

よく考えたら、iframe内での画面遷移を取得できることに気づきました。 JavaScript (function() { "use strict"; var iframes = document.querySelectorAll("iframe"); iframes[0].onload = function() { alert(this.src); }; iframes[0].src = "http://kimi…

集中すると時間の流れをゆっくりに感じることがあるといいます。「ボールが止まって見えた」的な名言もそこから生まれたのでしょう。プログラマが集中するとどうなるのか考えてみたのですが。ウィンドウが開くのがゆっくり見えるのかもしれませんね。Macでは…

Skypeのプロフィール画像を変更する際、「最近の項目」に羅列される写真はMacのどこに保存されているのか調べました。 ~/Library/Containers/com.apple.ImageKit.RecentPictureService/Data/Library/Images/Recent\ Picturesに保存されてました。 ~/Library/…

まさに新体験ですね。 正しいオキュラスのつかいかたを垣間見たような気がしました。 VICTORSTAR 3Dペン (ブルー)/ ドライバー+3色ABSフィラメント＋電源アダプタ+紙パターン+日本語説明書VictorstarAmazon

Numberを継承したサブクラス（Num）をつくるぞ。 function Num() { Number.call(this, arguments); } Num.prototype = new Number(); Num.prototype.constructor = Num; できた。インスタンスをつくろう。 var num = new Num(10); 試しにNumber.ptototype.to…

kimizuka.hatenablog.com以前、 JavaScriptでテキストの選択範囲を抽出したこと がありましたが、今回は抽出した部分を読み上げるように改良してみました。 音声合成APIを使っていますが、長文を読み上げることができなかったため、句読点で区切って読み上げ…

夏のことは忘れてました。 ハコスコストア https://itunes.apple.com/jp/app/hakosukosutoa/id983958124?mt=8&uo=4&at=10l16903ハコスコで楽しめるコンテンツがてんこもりです。 ピーティックス Peatix(ピーティックス)Peatix Incエンターテインメント無料意…

developer.vimeo.comこちらのサイト にすべてがまとまってます。 再生時間が取得できるので動画のプログレスに合わせてページの背景色を変化させています。 JavaScript $(function() { var body = $(document.body); var iframe = $('#player1')[0]; var pla…

ハコスコ6（シックス）iPhone 6サイズ対応 ハコスコ6（シックス）iPhone 6サイズ対応Amazon右目・左目がセパレートされていないタイプなので、顔にiPhoneを固定することが主な機能なのですが、YouTubeがTHETAの全天球動画に対応した昨今。 なかなかのコスト…

いま一番必要な音楽と出会えるサービスこと オンガクスリ 。 最近作業用BGMにつかわせていただいている悩みを紹介します。 大自然に癒されに行きます。大自然にぴったりの曲を教えてください。 http://ongakusuri.com/topic/3223ongakusuri.com 就活が終わら…

p##{hoge}.#{fuga} piyo では駄目で、通常の属性と同じように、 p(id=#{hoge} class=#{fuga}) piyo という感じで渡せばOKでした。

よく使うのでmixinにしています。 方針としては、 image-width、image-heightで大きさを合わせる text-indentを-9999pxにしてテキストを飛ばす 背景画像を設定する を行っています。 インライン要素に対してはdisplayをblockにしてやる必要がありますが、そ…

うどん職人が、インタビューにて、「うどんは生き物です」的なことを言っている姿をみました。 昔、醤油職人が、「醤油は生き物です」って言ってた気がします。 野球の監督も「野球は生き物なんですね」的な解説をしていた気がします。みんな生き物なのかも…

最近教えてもらいました。 iOSでfont-sizeが16px未満のインプット要素はフォーカスを当てたときに拡大されるようです。 ただし、viewportでuser-scalable=no的な感じで拡大縮小を止めるとこの機能もOFFになります。 DEMO

kimizuka.hatenablog.com以前、ブラウザのプッシュAPIをつかったことがありました が、今回はそれを応用して、5分タイマーをつくりました。 プレゼンの時とかに役に立ちます。 JavaScript (function(win, doc) { "use strict"; Notification.requestPermissi…

kimizuka.hatenablog.com ローカルでサーバーを建て、スマフォをそこにつないで表示確認をすることが多いのですが、いちいちIPを確認するのが面倒なので、常時メニューバーに表示しておくことにしました。こちら をインストールするだけで実現できるのでらく…