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

みかづきブログ その3

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

アナログの写真をデジタル化したいという想い

親がアナログの写真をデジカメで撮影してハガキに印刷(フラッシュが写り込んでしまっている)している姿を見て、 これ をプレゼントしようかどうか検討していた。omoidori.jp以外に高いなー。アプリだけでなんとかならないのかなー。と思っていて購入を躊躇…

Canvasで角丸の四角形を描く

愚直にパスを左上から時計回りに一周描くことで角丸の四角形を描く関数をつくりました。 JavaScript var canvas = document.getElementById("canvas"); drawRect({ ctx : canvas.getContext("2d"), x : 10, y : 10, width: 120, height: 120, radius: 26, co…

iPhoneのMobile Safariでユーザーきっかけじゃないwindow.openが効かないとき

JavaScript window.open("http://kimizuka.fm"); 最小限のコードで混焼しました。 ページ読み込み時にwindow.open();を叩いても、デフォルトだと効きません 特にエラーも出ないです。 DEMO http://jsrun.it/kimmy/Mxk7 原因 ポップアップブロックがONになっ…

nodebrew install-binary の早さに感動

いつもは、 nodebrew install stable nodebrew use stableと、installをつかっていたのですが、 nodebrew install-binary stable nodebrew use stableと、install-binaryに乗り換えました。 どうせちょっと早くなるだけ、「ハイパーミニがハイパーダッシュに…

Node.jsでletをつかったときに SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode とシンタックスエラーが出るとき

英語を訳しただけなのですが、strictモードじゃないと使えない模様です。(v5.4.1で確認) main.js for (let i = 0; i < 10; i++) { console.log(i); } ではなく、 main.js "use strict"; for (let i = 0; i < 10; i++) { console.log(i); } とすればOKでし…

SafariCloudHistoを終了する

Mac

Flashをインストールしているときに、やれPhotoshopを閉じろだ、やれChromeを閉じろだと色々警告が出てその都度対応していたのですが、SafariCloudHistoを閉じろと言われて困りました。 起動した覚えがないからです。一旦インストールを中断してPCを再起動し…

いま一番おもしろいサッカー漫画だと思っている「BE BLUES!〜青になれ〜」から学んだこと

昔、 おすすめマンガリスト をまとめたことがありました。kimizuka.hatenablog.comしかし、ひとの好みというのはころころ移りゆくものでして、最近だと、 コミックスを買うほど好き バクマン バクマン。 モノクロ版 1 (ジャンプコミックスDIGITAL)作者: 大場…

過去のツイートをすべて削除したいときにつかうウェブサービス

SNS

黒歴史クリーナー kurorekishi.me ツイートの一括削除ツール! ysklog.net どちらも「Favの保護」や「削除するツイートの期間設定」などができます。 黒歴史クリーナーは名前が良いですね。 両方使ってみましたが、両方ツイート数表示がおかしくなりました。…

Node.jsでスクレイピング

cheerio-httpcliをつかいましょう。www.npmjs.com詳しいつかいかたは上記ページに載っているのですが、 例えばブログの最新のタイトルを取得するときは、 var client = require("cheerio-httpcli"); client.fetch("http://kimizuka.hatenablog.com/", {}, (e…

AfterEffectsで連番書き出し

Mac

1. コンポジション > レンダリングキューに追加 2. 出力形式をPNGシーケンスに変更 3. ファイル名を変更したい場合は出力先を変更 #の数でゼロパディングの数を調整できます。 4. レンダリング! 以上です。

GitでリポジトリのURLを確認する

Mac

git remote -vでOK。

ツイッターの自作ツイートボタン(Web Intent)に渡すパラメータは適切に設定しようと思いました。(URL、ツイート本文、ハッシュタグ)

SNS

https://twitter.com/intent/tweet でTwitterの投稿画面を立ち上げてくれることでおなじみのWeb Intentですが、 https://twitter.com/intent/tweet?text=ツイッターの自作ツイートボタン(Web Intent)に渡すパラメータは適切に設定しようと思いました。(UR…

After Effects で背景透過の動画(アルファチャンネル付きmov)を書き出す

Mac

1. コンポジション > レンダリングキューに追加 2. レンダリング設定をこんな感じに 3. 出力モジュールのチャンネルをRGB + アルファに変更 4. レンダリング! 以上です。

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です。