みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

Koaをつかってスタティックなサーバをたてる 😎

kimizuka.hatenablog.comいままではExpressをつかっていましたが、 もう2017年なので、これからは積極的にKoaをつかっていこうと思いました。 Koaとは Koaとは next generation web framework for node.js です。 よくわからないけど、Node.js向けの次世代の…

npmの代わりにYarnをつかってパッケージを管理する 😎

Mac

もう2017年なのでパッケージの管理をYarnにしてみることにしました。 Yarnとは yarnpkg.comFacebookがつくったパッケージマネージャーでそうです。 なんでもnpmより高速でGoogleも開発に協力しているとか。 個人的にはnpmに全然不満はなかったのですが、Face…

絵文字を入力したくなったときにコピペするためのページ 🤢

😀😃😄😁😆😅😂🤣☺️😊😇🙂🙃😉😌😍😘😗😙😚😋😜😝😛🤑🤗🤓😎🤡🤠😏😒😞😔😟😕🙁☹️😣😖😫😩😤😠😡😶😐😑😯😦😧😮😲😵😳😱😨😰😢😥🤤😭😓😪😴🙄🤔🤥😬🤐🤢🤧😷🤒🤕😈👿👹👺💩👻💀☠️👽👾🤖🎃😺😸😹😻😼😽🙀😿😾👐🙌👏🙏🤝👍👎👊✊️🤛🤜🤞✌️🤘👌👈👉👆👇☝️✋️🤚🖐🖖👋🤙💪🖕✍️🤳💅💍💄💋👄👅👂👃👣👁👀🗣👤👥👶👦👧👨👩👱‍♀️👱👴👵👲👳‍♀️👳👮‍♀️👮👷‍♀️👷💂‍♀️💂🕵️‍♀️🕵️👩‍⚕️👨‍⚕️👩‍🌾👨‍🌾👩‍🍳👨‍🍳👩‍🎓👨‍🎓👩‍🎤👨‍🎤👩‍🏫👨‍🏫👩‍🏭👨‍🏭👩‍💻👨‍💻👩‍💼👨‍💼👩‍🔧👨‍🔧👩‍🔬👨‍🔬👩‍🎨👨‍🎨👩‍🚒👨‍🚒👩‍✈️👨‍✈️👩‍🚀👨‍🚀👩‍⚖️👨‍⚖️🤶🎅👸🤴👰🤵👼🤰🙇‍…

windowの幅・高さ系の情報を表示するシンプルなページをつくりました。 😊

昨今JSで画面幅に合わせたコンテンツをつくる事が増えてきており、 画面の幅、高さ系の情報を確認できるページをつくってみました。 inner-width => 表示領域の幅 inner-height => 表示領域の高さ screen-width => 画面の幅 screen-height => 画面の高さ ava…

花粉プラスはなのど飴 😷

この時期は花粉症で鼻づまりとのどの痛みがひどくて、 のど飴を買いにコンビニに出かけたら、「はなのど飴」たるものを見つけました。しかも「花粉プラス」。[asin:B01N8TMSYD:detail] 渡りに船とはこのことだと思い、購入。 でも「花粉プラスってネーミング…

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

ومن المثير للاهتمام أن تقرأ من اليمين إلى اليسار. مزيج أكثر إثارة للاهتمام هو الأرقام الأبجدية 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で最優秀賞を頂くことができたので、そこまでの道のりを記していきたいと思います。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でこのブログの読者になるか否かの画面に遷移。 リンクに…