すっかり夏ですね。いま一番必要な音楽と出会えるサービスこと オンガクスリ 。 最近作業用BGMにつかわせていただいている悩みを紹介します。 頭のなかを夏で満たしたい http://ongakusuri.com/topic/2195 http://ongakusuri.com/topic/2195 キラキラしてた…

結論から言えば「print to HTML」というパッケージをつかえばラクラクです。が。僕はパッケージのインストール自体ひさしぶりだったので、そこを思い出すところからはじまりました。（Package Control ははるか昔に導入済みでした） 導入手順（Macで確認） P…

jquery-cookie というプラグインをつかうとCokkieの操作が楽々です。 Cookieをオブジェクトに変換して取得 var obj = $.cookie(); で obj の中にCookieをオブジェクトに変換したものが返ってきます。例えば、 "key=value" というCookieは、 {key: "value"} …

navigator.cookieEnabled; を確認すればOKです。 demo

時計をつくるときとかに、 1 を 01 にしたいときとかにつかえます。 function numberToStringWithDigit(num, digit) { var zero = "0", i = 0, str, result; for (; i < digit - 1; i++) { str += zero; } return (str + num).slice(-digit); } 動作原理 ret…

今月のアマゾンでの買い物履歴です。 audio-technica ヘッドホン延長コード 延長コードが断線したので購入。 なんとなくaudio-technica製のものを購入したのはイヤホンがaudio-techica製ということもありますが、プラシーボを期待した結果です。良い買い物だ…

1ヶ月なんてあっというまですね。それでは今月試してみたアプリをまとめてみます。 いろぴこ 「Philips hue LEDランプ」に対応したということで再ダウンロード。 まあ「Philips hue LEDランプ」なんてハイカラなデバイスはもってないんですけどね。「登録し…

昔はプラグインが必要だったりしたらしいですが、いまは options の open を true にするだけでブラウザを起動してくれることを知りました。 // grunt-contrib-connect connect: { server: { options: { port: 9000, open: true // ブラウザ起動 } } } 良い…

new Dateの引数にありえない日付を渡してもなんとかしてくれます。 // 2000年 1月1日 new Date(2000,0,1); // 2000年 1月1日 // 2000年 1月32日 → 2000年 2月1日 new Date(2000,0,32); // 1月に32日はないので2月1日になる // 2000年 2月29日 new Date(2000,…

先日リリースした chibadge（チバッジ） ですが、申請に半年以上費やしたため、すでにPUSH通知の証明書の有効期限が切れそうです。 PUSH通知がつかえなくなると、本当になにもできないアプリになってしまうため、急いで更新したときのメモを残しておきます。…

マークアップを担当していると、デザイナーの方からpngやjpgでデザインの確認を依頼されることがあります。もらった画像をiPhoneに転送して確認してみることも少なくはありません。 デザインにMobile SafariのUIがはいっている場合もありますが、iOS7からはM…

クリックした文字同士を入れ替えます。 JSはやたら長いですが単純にクラスを付け替えているだけで、後はCSSアニメーションに任せています。 謎のちらつきは謎のままです。FFだときれいに見えます。 See the Pen hello world. by kimmy (@kimmy) on CodePen. …

最小値と最大値を渡して、その間の値をカウントアップでループさせます。 JavaScript function Count(min, max) { this._min = min; this._max = max + 1; this._current = min - 1; } Count.prototype.up = function() { return this._current = (this._cur…

文章にするのは非常に難しいですが、順番だけランダムにして一巡させるような場合の実装です。 JavaScript function Lottery(length) { this._length = length; this._pod = []; this.reset(length); } Lottery.prototype.reset = function(length) { var i …

JavaScript，CSSの検証には jsdo.it をつかっているのですが、 今後は CodePen も併用していこうと思います。非常にシンプルで使いやすいですね。See the Pen unEhw by kimmy (@kimmy) on CodePen.

注射を打つときや歯を削るときに、「痛かったら言ってくださいね。」と言われることがよくありますが、いままで一度も言えた試しがありません。なぜなら、針を刺したり、歯を削ったりすることが痛くないわけがないと思ってしまうからです。 つまり、「痛かっ…

<div id="btn" class="btn"> <p class="inner">SAY!</p> </div> こちらのHTMLに、 * { margin: 0; padding: 0; } body { padding: 50px; color: #2e2e2e; background: #e8e8e8; font: 25px HelveticaNeue-UltraLight; text-align: center; } .btn { margin: 20px 10px; } .inner { display: inline-block; padding:…

僕から見た世界の表現を試みます。 ※ PC版のChromeでご観覧ください。 次回は顔の距離に応じてブラーのレベルを変えることに挑戦しようと思います。

OGP周りの確認には Facebook の Open Graph Debugger をつかいましょう。OGPを確認したいURLを入力してDebugボタンを押すだけで、なんということでしょう。 OGP周りのエラーがまるわかりです。 通常シェア時のOGPはFacebookのサーバに保存されているものが使…

intent https://twitter.com/intent/tweet?text=hey!PCでもスマフォでもOK。 単純にテキストを渡すだけならこれでOK。 status https://twitter.com/?status=hey!PCでは動きますがスマフォでは動かない気がします。 share https://twitter.com/share?text=hey…

↓ せいっ！ ↓反転してサウスポーになりました。 ソース -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; ちなみにキーフレームアニメーションに…

自分用にYouTube Playerをつくるクラスをつくってみました。 EventDispatcherを継承しており、onYouTubeIframeAPIReadyでイベントを発火してくれるので、playerにしたいDOMのidと再生したいビデオのidを渡すだけでプレイヤーをつくってくれます。 ソース (fu…

IE8などでは埋め込んだYouTubeプレーヤーがz-indexを無視して最前面にしゃしゃり出てくる現象が発生します。 今回はそれの解決策をメモしておきます。 iframe埋め込みの場合 iframe埋め込みの場合は貼り付け用URLにパラメータとして、 ?wmode=transparentを…

単一のインスタンスを返すシングルトンクラスの実装をいろいろ検討してみました。 function SingletonClass() { } SingletonClass.getInstance = function() { if (!SingletonClass.instance) { SingletonClass.instance = new SingletonClass(); } return S…

function ClassA() { function say() { // ここでClassBのsayメソッドを実行したい } this.say = say; } function ClassB() { function say() { alert("B"); } this.say = say; } こんなことってありませんか？一番シンプルに考えるのであれば ClassA のスコ…

シンプルなEventDispatcherを自作してみました。仕様としては、 イベント名を渡すとイベントがあるかどうかわかる イベント名とコールバック関数を渡すとイベントを登録できる イベント名とコールバック関数を渡すとイベントを削除できる イベント名（と引数…

同一ドメインであれば window.parent で親にアクセスできます。 親を持たないwindowにでは自分自身になるようです。なので、親ウィンドウがもっている sayメソッド をiframeから叩くとすると、 window.parent.say && window.parent.say("SAY!"); という感じ…

時々、何度自動販売機にいれても戻ってきてしまうコインっていますよね。自動販売機側はコインに同じ形状を期待していて、 コインも同じ形になるべくつくられているのですが、 時々型破りなコインがでてくるのでしょう。昔はどちらかと言うと受け入れ側の視…

jQueryをつかっている場合は、 var newArray = $.merge([], array); で。 jQueryを使ってない場合は、 function copyArray(array) { var newArray = [], i = 0; try { newArray = [].slice.call(array); } catch(e) { for (; i < array.length; i++) { newAr…

前々回 、 前回 につくったモックに画像生成機能をつけてみました。 openボタンを押すと、png画像を別タブで開きます。 JavaScript (function(win, doc, $) { "use strict"; win.app = {}; })(this, document, $); (function(win, doc, $, ns) { "use strict…