PCは会社支給のもの、iPhoneは私物をつかっているため毎回警告が表示されていました。（PCを認証していないため）警告が出るだけならまだしも、このアラートのOKを押さないと、iTunesの終了もままならず大変困っていたのですが、「この iPhone を接続してい…

kimizuka.hatenablog.com 昨日のエントリー を書いている途中に、シングルとシングル以外の曲を分けないと10曲に収まらないと気付き、急遽エントリーを分けました。2枚組のアルバムもこういう風にできるのかもしれないですね。しらないですけど。 シングルは…

突然ですが個人的におすすめしたい スピッツの曲を10曲紹介します。 スピッツに対して、「チェリー」とか「渚」みたいな甘いポップスみたいなイメージを持っている人にこそ是非とも聞いていただきたいと思っています。 たしかにシングルにはそういう曲が多い…

OSをアップデートするたびにMacを初期化しているのですが、以前まとめた開発環境が若干古くなってきたため、一新しようと思います。kimizuka.hatenablog.com 変更した設定 キー入力周り 入力ソースに日本語（ひらがな）を追加 ライブ変換をOFF 推測候補表示…

保存場所変更 変更 defaults write com.apple.screencapture location #{保存場所のパス}killall SystemUIServer Desktopに戻す defaults delete com.apple.screencapture locationkillall SystemUIServer ファイル形式変更 JPGに変更 defaults write com.ap…

iOS10でビデオをインライン再生する kimizuka.hatenablog.comこれまで、iPhoneのmobile Safariでビデオをインラインするためには、 videoのplayを叩かずに、currentTimeを操作してCanvasにレンダリングするという涙ぐましい努力 をしてたりしたのですが、 iO…

from:meで検索。

kimizuka.hatenablog.com以前 とは 別のライブラリ をつかって実装してみました。github.com DEMO https://kimizuka.github.io/qr-web-2/※ PCのモダンブラウザでアクセスしてください。カメラにQRコードを近づけるとデコード結果がアラートで表示されます。 …

FFmpeg 取り急ぎメモ。 ffmpegの導入手順とかは別途まとめたいところ。 i で インプットを指定 r でFPSを指定 s で出力サイズを指定 なので、 ffmpeg -i input.mp4 -r 8 -s 480x360 output.gifだと、input.mp4 を 8FPS で 480 × 360 で書き出します。

DEMO See the Pen flexbox by kimmy (@kimmy) on CodePen. 子要素の数に依存せずに、コンテンツ幅を均等にして並べたいことがあると思います。 そんな時に便利なのがflexboxです。 +ボタンを押していただくとわかりますが、子要素を増やすと自動でコンテンツ…

事象 最近、openFrameworks やら node.js やらにうつつを抜かして、いわゆるマークアップをする機会がなかったのですが、ひさしぶりにcompassを使おうとすると、 /Users/nanashi-gonbei/.rbenv/versions/2.2.2/lib/ruby/site_ruby/2.2.0/rubygems/core_ext/k…

brew doctorを叩いたところ異常が見つかったため、入れなおすことにしました。 OSをアップデートしたタイミングでおかしくなったような気がします。 またOSをアップデートするとおかしくなるかもしれないので、忘れないようにメモしておきます。 アンインス…

github.comすごいライブラリですね。さすがMozilla。 つかいかた 1. ライブラリをダウンロードして解凍 https://mozilla.github.io/pdf.js/getting_started/#download からライブラリをダウンロード 2. ソースを編集 viewer.htmlにアクセスした際、デフォル…

いままではHTMLでテンプレートを使いたい場合は、scriptタグをつかっていたのですが、templateタグの存在に気がついたのでこれからは積極的につかっていこうと思いました。 ただし、IEとAndroidの対応状況が不安なので、まだ実践では控えておこうと思います…

kimizuka.hatenablog.com以前は Flashをつかってコピーボタンをつくりました が、今回はJavaScriptの力でコピーボタンをつくります。 JavsScript document.getElementById("btn").addEventListener("click", function() { var address = document.getElement…

【結論】 横長画像（正方形含む）は、 background-position: center center; background-size: cover; 的な感じでトリミングされ、縦長画像は、 background-position: center top; background-size: cover; 的な感じでトリミングされる。 【考察】 なんでだ…

TwitterCardsのsummary_large_imageを設定する際、いつもog:imageと同じサイズ（1200px × 630px）の画像を使いまわしていたのですが、最適なサイズはいくつなのだろう？と思い調べてみました。こちらのページ によると、幅280px以上、高さ150px以上である必…

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にデプロイしてみましょう。 まず、ソースを若干修正します。 ソース…