Chromeからカメラにアクセスしたいとか、TwitterCardsを検証したいとか、og:videoを検証したいとか、iOSのAPIでつかいたいとか、いろいろと理由はあるでしょう。 そんな時に僕がつかっているサービスを3つ紹介します。 GitHub Pages 独自ドメインでなくても…

ユラリズム オート DX カンタービレBE [asin:B00OXR9ZY8:detail]もちろん相性はあるのでしょうが、我が家では生後4ヶ月目ぐらいまでは効果てきめん。 多少ぐずっていても乗せて揺らせば寝かしつけることができ、大変助けられました。 5ヶ月目ぐらいからは揺…

www.youtube.com ※ 炒飯は撮影の後スタッフがよりおいしく頂きました。光と音で炒飯のおいしさを引き出すフタ型デバイスです。 このフタ、実はクロッシュっていうらしいので、僕は光るクロッシュと呼んでいるんですが、そもそもクロッシュという呼び名の知名…

See the Pen Custom DatePicker for iOS by kimmy (@kimmy) on CodePen.フォームをCSSでカスタムするのはなかなか骨が折れる作業なので、 inputタグを透明にしてしまい、上にDOMを置くことで編集しました。 iPhoneでご確認ください。 http://codepen.io/kimm…

最近ドメインが切れまして、開催から1年経過したことに気付きました。http://sozonoasobi.com/sozonoasobi.comムービーとギャラリーを追加しましたので、もしよろしければ御覧ください。 1年前の自分のコードをみると恥ずかしいですね。

/ で区切って数値を複数渡すことで楕円を描画できます。 CSS .box { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border-radius: 20px / 30px; width: 200px; height: 150px; background: #3e3e3e; } HTML <div class="box"></div> DEMO

kimizuka.hatenablog.comSee the Pen Transition like the ending by kimmy (@kimmy) on CodePen.以前、CSSでアニメのエンディングのようなトランジションをつくったことがありましたが、今回はこれをCanvasでつくります。 DEMO クリックすると開いたり閉じ…

蝶を目指しました。 DEMO HTML <div class="arc"> <div class="box"> <div class="butterfly"> <div class="head"></div> <div class="body"> <div class="wing l"></div> <div class="wing r"></div> </div> </div> </div> </div> SCSS %block { display: block; position: absolute; border: solid rgba(0, 0, 0, 0); width: 0; he…

iOS6でファイルアップロードが可能になってから、「iPhoneのカメラで撮影した画像のリサイズ、トリミングをフロントエンドで行いたい」という想いは持ち続けていました。しかし、それを実現するためには、 iOS画像リソース制限問題 Exifで回転して表示してし…

kimizuka.hatenablog.comだいぶ前に JavaScriptでバイナリを解析するモック をつくりましたが、今回はバイナリを解析しExif情報を読みだしてみようと思います。 まあ、僕が色々と書かなくても既に ライブラリ があるので楽勝です。github.com HTML <input id="input" type="file" /> javascri…

Electronアプリでserialportをrequireして使おうとすると、 Uncaught Exception: Error: Module version mismatch. Expected 49, got 47. at Error (native)的なエラーが発生します。そんな時は、アプリケーションのルートにて、 cd node_modules/serialport…

kimizuka.hatenablog.com前回 は Heroku Toolbelt をつかってデプロイしましたが、GitHubと連携するとpushするだけでデプロイできるということだったのでやってみました。 1. Herokuのダッシュボードにアクセス heroku.com 2. 新しいアプリケーションを作成 …

Herokuとは heroku.com条件付きですが無料でWebアプリケーションを公開できるプラットフォームと理解しております。kimizuka.hatenablog.com今回は、以前つくった こちらのソース をherokuにデプロイしてみましょう。 まず、ソースを若干修正します。 ソース…

npm ls -g --depth=0これでOKです。

www.npmjs.com Node.js var SerialPort = require("serialport"), serialPort; SerialPort.list(function(err, ports) { ports.forEach(function(port) { if (port.manufacturer && /arduino/.test(port.manufacturer.toLowerCase())) { serialPort = new Se…

デザイナーから、大きさが可変のイメージをおしゃれな枠線で囲んだデザインが上がってきたので、border-image + drop-shadow で実装することにしました。 border-imageの実装 このような9分割できる素材を用意しましょう。 （ぼかしはCSSでいれようと思って…

Macであれば、 ~/Library/Application\ Support/Sublime\ Text\ 2/Packages/Userに、#{スニペット名}.sublime-snippet というファイル名で保存されています。なので、ターミナルで、 open ~/Library/Application\ Support/Sublime\ Text\ 2/Packages/Userを…

自分の記憶が確かなら、昔は こちらのページ にSafariに表示することのできる画像の大きさの制限について書いてあった気がするのですが、ひさしぶりに見返したら見当たらなくなってます。developer.apple.comjpgは32メガピクセルまで、png、gifは5メガピクセ…

以前からJavaScriptをつかってPhotoShopを自動化できることは知っていましたが、実際にやってみたことはありませんでした。 が。本日突如発生した「すべてのレイヤーの大きさの違う画像に対して上だけトリミングしたい」という作業がめんどくさ過ぎたため、J…

以前、 URLをQRコードにするモック はつくったのですが、今回はその逆です。kimizuka.hatenablog.comこちらのライブラリ を使用させていただきました。github.com DEMO https://kimizuka.github.io/qr-web/ ※ PCのモダンブラウザでアクセスしてください。カ…