みかづきブログ その3

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

Googleハングアウトの入力ソースを切り替える

最近Googleハングアウトを使う機会が多いのですが、カメラソースを変更しようと思ってURLバーのカメラアイコンをクリックしたのですが、切り替えることができません。設定から普通に変更できました。

解約したiPhone6をアクティベートする(au編)

iOS

先日 iPhoneSEを購入し、UQモバイルに乗り換えた ことによって、余ったiPhone6ですが、下取りには出さずに検証機として活用することにしました。kimizuka.hatenablog.com なので、一旦初期化したところ... アクティベートできなくなりました!(T_T) auで…

iPhoneで撮影した動画をffmpegで無音にしたい

Mac

無音にしたいだけなのにいちいちiMovieとかで編集するのが面倒だったのでプログラムでなんとかならないかと思い、 いろいろ調べた結果、ffmpegで処理することにしました。Macであればffmpegを導入するのはとても簡単です。kimizuka.hatenablog.com ffmpegで…

auからUQモバイルに乗り換えたらスマホ代が4分の1になりました。

金額にして月々の料金が6,000円ぐらい安くなりました。auに不満があったわけでも、UQモバイルに恩義があるわけでもないのですが、 事実として、僕の使い方だとau時代に8,000円ちょいだったスマホ代が2,000円弱になりました。 どこかにきっと同じような人がい…

CSSアニメーションで画面がちらつく場合は -webkit-backface-visibility: hidden; で解決する場合がある

CSS

大体1年前の記事で取り上げたUIをブラッシュアップしている時に気づきました。kimizuka.hatenablog.com 解決前DEMO カードをドラッグした時に、テキストが点滅するんです。 本当は制作当初から気になっていたんですが、原因もよくわからないし放置していまし…

フラットデザイン、マテリアルデザインを目コピーする(スライダーUI編)

年末にアドベントカレンダーで こちらの記事 を執筆させていただいたのですが、それからというものアプリっぽいUIをCSSでつくることにハマっています。techblog.kayac.com 以前から、トグルボタンとか、kimizuka.hatenablog.comドロワーメニューとか、kimizu…

iTunesのようにスクロールできるUIをつくる

overflow: scroll をつかってiTunesのようにスクロールできるUIをつくってみました。 本当のiTunesにはスクロールバーがついているのですが、なんとなく無い方がかっこいい気がして消しています。 基本的にはCSSのみでつくっているのですが、左右に薄くはい…

Mac版Chromeでトラックパッドを2本指でスワイプした時にブラウザバックしてしまう現象をなんとかする

Mac

あけましておめでとうございます。 昨年から、いや、もしかしたらもっと前から、ずーっと僕を悩ませていた現象を1つ解決できたので解決方法をまとめておきます。 現象 その現象がこちら。わかりますか? Mac版のGoogle Chromeなんですが、トラックパッドを2…

黄金チャーハンをまばゆく光らせたら裏クリエイティブアワード2016で最優秀賞を頂くことができました。

黄金チャーハンをまばゆく光らせたら裏クリエイティブアワード2016で最優秀賞を頂くことができたので、そこまでの道のりを書いていきたいと思います。http://realdgame.jp/ajito/harajuku/2016/10/ura-ca2016.html === こどもの頃、料理で対決するアニメを観…

はてなブログの読者になるボタンのリンク

http://blog.hatena.ne.jp/#{USER_ID}/#{URL}/subscribeで読者になるか否かを選択できる画面に遷移する。なので、 http://blog.hatena.ne.jp/kimizuka/kimizuka.hatenablog.com/subscribeこちらのURLでこのブログの読者になるか否かの画面に遷移。 リンクに…

JavaScriptでSin曲線を描く

本日無性にSin曲線を描きたくなりまして。 最速で描くとしたらどうするかな。と考えたところ。JavaScriptをつかってCanvasにレンダリングすることにしました。 JavaScript var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"…

CSSのみでドロワーメニューをつくったぞい

CSS

DEMO See the Pen Drawer Menu made from CSS only by kimmy (@kimmy) on CodePen.チェックボックス、隣接セレクタ、checked擬似クラス、target擬似クラスを活用してJavaScript無しでの動作を実現しています。 HTML <input id="btnMenu" type="checkbox" class="btn"/> <nav id="menu"><a href="#a" class="btn">MENU_A</a><a href="#b" class="btn">MENU_B</a></nav>

iPhoneのSafariのデフォルトの挙動(ボタンをタップした際の色、テキスト選択、長押しで開くメニュー)をリセットしたいという想い

結論 * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; -webkit-user-select: none; } でOK。こちらのページ で検証しました。(iOS10.1のiPhone6を使用して確認)http://jsrun.it/kimmy/ITBo ボタンをタップした際に薄暗…

HomebrewをつかってMacにffmpegを導入する。

Mac

1. Homebrewのインストール /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 2. ffmpegをインストール brew install ffmpeg 3. (動かない場合は)lameもインストール brew install lame 関連記事 kim…

ffmpegのエラーを解決する(dyld: Library not loaded: /usr/local/opt/lame/lib/libmp3lame.0.dylib)

Mac

ひさしぶりにmp4をgifに変換したくなったのですが、手順をすっかり忘れていて、 自分のブログを検索したら、 この記事 がヒットしました。kimizuka.hatenablog.com過去の自分に感謝しながら、 ffmpeg -i input.mp4 -r 8 -s 480x360 output.gifを叩くと、 dyl…

Androidの input type="file" accept="image/*" 事情

kimizuka.hatenablog.comこちらの問題 につづいてもうひとつ問題にぶつかりました。 やりたかったこと Androidからローカルの画像ファイルをアップロードするフォームをつくりたい できれば、画像以外のファイルは上がらないようにしたい さらにできればjpg…

3年間技術ブログを毎日のように更新してみて投稿してみてわかったこと

「3ヶ月毎日更新するぞ!」と思ってはじめたブログですが、気づけば3年つづきました。 2年間毎日書いた時点から毎日更新ではなくなったのですが、月に平均15本ぐらい記事を書きをつづけています。kimizuka.hatenablog.comこちらの記事内 で、 そんなこんなで…

CSSだけでトグルボタンをつくる

CSS

input要素をCSSでトグルボタン風に仕上げてみました。 DEMO See the Pen Toggle Button made from CSS only by kimmy (@kimmy) on CodePen. HTML <input type="checkbox" class="btn center"/> SCSS $white: #f8f8f2; $green: #a6e22e; body { background: $white; } .center { position: absolute; top:…

画面いっぱいのWKWebViewを設置しただけのアプリをつくる

iOS

ウェブフロントを生業としていて、大体のことをSafariにウェブページを表示させることで解決してきた私ですが、ときどきどうしてもiPhoneアプリをつくる必要が出てくるときがあります。プッシュ通知をつかいたいときとか、ランドスケープで固定したい時とか…

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

親がアナログの写真をデジカメで撮影してハガキに印刷(フラッシュが写り込んでしまっている)している姿を見て、 これ をプレゼントしようかどうか検討していた。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をアップデートするとおかしくなるかもしれないので、忘れないようにメモしておきます。 アンインス…