読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

3ヶ月つづけてみました。

npm start で Expressをつかったスタティックなサーバをたてて、ブラウザを起動する

kimizuka.hatenablog.com以前、Expressをつかってスタティックなサーバをたてました が、今回はサーバを立てつつ、ブラウザも起動してみます。 ディレクトリ構成 以前とまったく同じものです。 app.js 以前とまったくもって同じものです。 var express = req…

排水溝を取り合う猫

なかなか良い動画を撮影できたので保存しておきます。ひとつの排水溝を取り合う子猫の兄弟。最終的に2匹とも入れることに気付いて仲直り。 pic.twitter.com/ZSt2KsmBao— きみづかふみたか (@ki_230) 2016年10月14日 YouTubeバージョン 猫

マイクロソフトペイントの偉大さに気づいた話

この記事 を読んで思い出したので書いておきます。http://wired.jp/2016/10/11/new-paint-microsoxt/すこし前の話なんですが、 Tilt Brush を体験させていただいた時に感動しましたwww.youtube.comこれは絶対に、ペンと紙では不可能な体験で、VRならではの体…

MacBookのトラックパッドでピンチイン・アウトしたときにChrome拡大縮小するのを止める

Mac

システム環境設定 > トラックパッド > スクロールとズーム > 拡大/縮小 のチェックを外したら止まりました。

Compassのみ(他のタスクランナーをつかわず)でAutoprefixerをつかいたいという想い

CSS

GruntとかGulpでは良くAutoprefixerをつかっていたのですが、AutoprefixerのためだけにGruntとかGulpを導入するのもなかなか面倒なので、なんとかCompassでつかえないものかと悩んでいたのですが、つかえました。 必要なgemをインストール autoprefixer-rail…

rbenv install で BUILD FAILED (OS X 10.11.6 using ruby-build 20160913) とエラーが出た場合の対処法

Mac

ひさしぶりに、 rbenv install 2.2.3でrubyをインストールしようとしたら、 rbenv install 2.2.3 Downloading ruby-2.2.3.tar.bz2... -> https://cache.ruby-lang.org/pub/ruby/2.2/ruby-2.2.3.tar.bz2 Installing ruby-2.2.3... BUILD FAILED (OS X 10.11.6…

iPhoneをPCにつないだ時に自動でiTunesを起動させない設定をする

iOS

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

個人的におすすめしたいスピッツのシングル10選(6選 + 4曲)

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

個人的におすすめしたいスピッツのシングル以外の曲10選

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

Macの開発環境を整える 2016

Mac

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

Macのスクリーンショットあれこれ(保存場所変更・ファイル形式変更・名前変更・影の有り無し変更)

Mac

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

iOS10のiPhoneのmobile Safariではビデオ要素(videoタグ)をインラインで再生できるようになったし、無音のビデオなら自動で再生できるようになった模様

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

Slackで自分の発言を検索する

Mac

from:meで検索。

続・JavaScriptをつかってブラウザでカメラからQRコードをデコードする

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

ffmpegをつかってmp4をリサイズしてgifアニメに変換する

Mac

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

flexboxをつかってコンテンツを均等に並べる

CSS

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

gem update --system ができなかったので色々やってみました

Mac

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

homebrewを入れなおす(アンインストール&インストール)

Mac

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

pdf.jsをつかってPDFの内容をcanvasにレンダリングする

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

はじめてのtemplateタグ

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

JavaScriptの力をつかってテキストをコピーするボタンをつくる

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

TwitterCards(ツイッターカード)では、ランドスケープ(横長)とポートレート(縦長)でsummary_large_imageのトリミングの位置が変わってくる

SNS

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

TwitterCardsのsummary_large_imageのサイズ

SNS

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

0円(無料)でhttpsの環境を手に入れたい!と思った時につかえる3つのサービス

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

生後6ヶ月まで育児を助けてくれたおすすめデバイスを4点紹介します。

ユラリズム オート DX カンタービレBE アップリカ 電動ハイローベッド&チェア ユラリズム オート DX カンタービレBE 【入眠 + あやし・落ち着かせサポート】 洗濯機丸洗いシートタイプ 91701出版社/メーカー: アップリカ発売日: 2014/12/02メディア: Baby Pr…

いつもの炒飯がさらにおいしく見えるフタ型デバイスをつくりました。

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

iOS用のカスタムDatePickerをつくりました

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

ひっそりとサイトを更新して〼

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

border-radiusを若干楕円にする

CSS

/ で区切って数値を複数渡すことで楕円を描画できます。 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

Canvasでスポットライト的なものをつくる

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

今日のCSSアニメーション その8

CSS

蝶を目指しました。 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…

iPhoneのカメラで撮影した画像の回転を補正してSafariにプレビューをし、リサイズ・トリミングをフロントエンドで行いたいという想い

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

JavaScriptでExif情報を読みだす

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

Electronとシリアル通信を両立する

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

GitHub と Heroku を連携させる

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

Express と socket.io をつかったサーバを Heroku にデプロイする

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

npmでglobalにいれたモジュールの一覧を確認する

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

Node.jsでシリアル通信する際にArduinoがつながっているポートを自動的に探し、繋ぎ、繋いだ際のコールバックを設定する

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 でおしゃれな枠線を実装する

CSS

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

SublimeText2でスニペットを登録・編集する

Mac

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

改めてiOSのSafariが表示できる画像サイズ(リソース制限)を確認する

iOS

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

JSXをつかってPhotoShopを自動化する

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

JavaScriptをつかってブラウザでカメラからQRコードをデコードする

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

iPhoneのSafariでダブルタップを無効にする(iOS10でもどうしてもuser-scalable=noを有効にしたい場合とか)

iPhoneのSafariで表示されているページをダブルタップをするとページが拡大します。 metaタグでページの拡大を止めている場合はページがスクロールします。http://jsrun.it/kimmy/AJce ※ iPhoneで見てくださいダブルタップによるページの拡大を止めつつ、ペ…

iPhone の mobile Safari で video を再生し終わった後にビデオプレーヤを閉じ、mobile Safari に戻す方法

iPhoneでは videoタグのplayを叩くと、ビデオプレイヤーが立ち上がりビデオが再生されます。昔の僕は、なんとかSafari内で再生できないものかと インラインで再生する方法 を探りましたが、最近は考え方が変わり、ビデオを再生し終わった後にSafariに戻って…

Express と socket.io でローカルにリアルタイム通信をするサーバをたてる

最小限だとこんな感じじゃないでしょうか。 ディレクトリ構成 package.json { "name": "app", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author"…

Node.js + Arduino でサーボモータを制御する

kimizuka.hatenablog.com以前 は duino というパッケージをつかっていましたが、サーボモータを制御しようとしたら何故かうまくいかなかったので、 johnny-five というパッケージに切り替えました。github.comgithub.com JavaScript var five = require("joh…

Expressでスタティックなサーバをたてる

JavaScript var express = require("express"), app = require("express")(), http = require("http").Server(app); app.use("/", express.static(__dirname + "/public")); http.listen(3000, "0.0.0.0"); とりあえずこれでpublicをルートとしたstaticなサ…

ElectronをつかってWebサーバをたてる際は絶対パスで指定しないとアプリ化したときに動かなくなる

kimizuka.hatenablog.com以前つくったアプリ ですが、コマンドラインから実行する分には問題なかったのですが、アプリ化すると動かなくなってしまい困ってました。結果として、パスを絶対パスにすることによって動くようになり、 アドレスを追加することによ…

Web Audio API の基本の基 その6 (filterをつかって音をフィルタリングする)

今回はfilterをつかってオーディオをフィルタリングしてみました。 前回のビジュアライズのコードを残しておいたので、比較してみるとわかりやすいです。 ローパスフィルタをかけてみたので低音が強調されています。 JavaScript (function(win, doc) { "use …