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

みかづきブログ その3

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

مثيرة للاهتمام العربية

ومن المثير للاهتمام أن تقرأ من اليمين إلى اليسار. مزيج أكثر إثارة للاهتمام هو الأرقام الأبجدية ABC تقى 123 تقى تقى. ولكن، للأسف لا يبدو HATENA بلوق لتتوافق مع اللغة العربية. النص غير موجود في محاذاة اليمين. أنا آسف.

iPhoneでページを開いているブラウザがSafariかどうか判定したいという想い。 😎

iOS

Safari以外のブラウザ(アプリのWebViewとか)で開かれた際に、Safariで開き直して欲しいという要望をよく受けるので、愚直にUserAgentで判定を試みました。 まずは、各ブラウザのUAをまとめます。 Safari mozilla/5.0 (iphone; cpu iphone os 10_2_1 like m…

Macにrmagickをインストールしたときにでるエラーを解決する 😎

Mac

エラー内容 checking for clang... yes checking for Magick-config... no checking for pkg-config... yes checking for outdated ImageMagick version (<= 6.4.9)... no checking for presence of MagickWand API (ImageMagick version >= 6.9.0)... no ch…

jQueryのノードリストみたいなやつをつくりたいときはadd()をつかうと良いかも 😎

例えば配列をもとにDOMをたくさんつくりたいとき、 なにも考えないバージョン let $body = $(document.body), arr = [ {index: "66", name : "岡田"}, {index: "00", name : "高濱"}, {index: "1", name : "清田"}, {index: "54", name : "デスパイネ"}, {in…

jQuery3からwidth()、hight()の挙動が変わっとる! 😲

jQuery2.Xで開発していたものを3に切り替えたら挙動が変わって、なんでだろうと思ったていたら、 width()、hight()の挙動が変わったことが原因でした。github.com #box { width: 100px; height: 100px; transform: scale(.5); } というDOMに対して、いままで…

中身がユニークな配列をつくりたいぜ 😎

lodash の uniq をつかえばOK!https://lodash.com/docs/4.17.4#uniq var arr = [0, 1, 2, 3, 3]; みたいな配列を、 var arr = [0, 1, 2, 3, 3]; _.uniq(arr); // => [0, 1, 2, 3] としてくれます。(破壊的) 完。 しかし、自分、lodashのようなハイカラな…

CanvasのdrawImageで画像の縮小を綺麗に行なう為のClassをつくりました。 😎

CanvasのdrawImageで画像の縮小を行なう際に、一気にサイズを小さくするとジャギーがひどいことになってしまうことがあったので、段階的に小さくしていくためのClassをつくりました。インターフェイスとしては、 var obj = SmoothResize.resize(img, zoom); …

『山田孝之のカンヌ映画祭』が好きすぎて、OP曲、フジファブリックの 『カンヌの休日 feat. 山田孝之』にでてくる映画をまとめてみました。 📽

『山田孝之のカンヌ映画祭』いま一番面白いと思っているドラマです。 http://www.tv-tokyo.co.jp/yamada_cannes/ より引用 www.tv-tokyo.co.jp 内容 山田孝之の2016年夏の記録 2016年夏山田孝之は、映画監督山下敦弘を呼び出す。 山田は山下に、世界最高峰の…

Pug(Jade)でfor文を書く 😎

単純にfor文を書きたければ、 Pug - for (var $i = 0; $i < 10; ++$i) { .box - }が HTML <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div>

CSSでロングシャドウをつくってその影で影時計をつくりました。 😎

最近、家に時計がないことに気づきました。時計機能のついたものはたくさんあるので、時間がわからなくて困ることは無いんですが、 世の中から時計という装置がどんどん減ってきてるのではないかと思いました。反面、ありとあらゆるものに時計機能が付随して…

配列のIndexにいろいろ入れてみた 😎

var arr = [0, 1, 2, 3, 4]; console.log("1"); // => 1; console.log(arr[true]); // => undefined console.log(arr[false]); // => undefined console.log(arr[[1]]); // => 1 console.log(arr[[[2]]]); // => 2 console.log(arr[0, 1]); // => 1 console.…

JavaScriptのアローファンクション(アロー関数)ではargumentsがつかえないんですね 😳

先日、 var sum = (a, b) => { var total = a + b; return total; }; sum(1, 2); // => 3 的な関数の引数を可変にしようとしまして、 var sum = () => { var total = 0; for (let i = 0, length = arguments.length; i < length; ++i) { total += arguments[…

テキストの縦位置・横位置をセンタリングしたいという想い(display: flex; align-items: center; justify-content: center;) 😇

CSS

いままで、display: table-cell とか text-align: center とか line-height(1行のときのみ)とか色々頑張ってきたけど、今後はflexboxをつかうと決意した。 なんていったって、いままでの試行錯誤と違って専用のプロバティだし。 CSS .box { display: flex;…

iOS10.2でdocumentに張ったmousemoveが発火することがある 😭

仕様かバグかは調べてないのですが、iOS10.2では発火することがありました。詳しい発生条件はわかりませんが、挙動を見るに、少なくとも、 touchstart => touchend の間に touchmove を挟まない touchstart => touchend の間隔を0.1秒程度以下にする の2つが…

JSONにコメントを描き込みたいという想い 😭

JSONをつくる際に、 { index : 3, // 背番号 name : "サブロー" } という感じでコメントを入れてしまうとエラーになります。 なので、いつも泣く泣く、 { index : "COMMENT: 背番号", index : 3, name : "サブロー" } という感じで、 key名を重複させてコメ…

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で最優秀賞を頂くことができたので、そこまでの道のりを書いていきたいと思います。裏クリエイティブアワード2016 | 原宿ヒミツキチオブスクラップ === こどもの頃、料理で対決するアニ…

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

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ならではの体…