みかづきブログ その3

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

PCと同期していないiPhoneのミュージックアプリでアーティストが分裂(表記ゆれ)してしまったときの直し方 😭

Mac

アーティスト名の表記ゆれ問題 いつも便利に使わせていただいているiTunesなのですが、昔から1つだけ大きな不満がありました。 それは時々アーティスト名が表記ゆれすること。僕は良くスピッツが分裂します。 これはレコード会社が登録時に表記ゆれしていて…

Nginxでwwwありできたリクエストをwwwなしにリダイレクトする

Mac

サブドメインなしバージョンとサブドメインありバージョンを2つ書いて見ましたが、なんとかひとつに統一できないものか。 # サブドメインなし server { listen 80; server_name www.hogehoge.com; root /home/app/static-sites/loading/; return 301 $scheme…

JSON.stringifyに第3引数を渡して整形し出力する 😎

developer.mozilla.orgJSON.stringifyの第3引数でスペーシングの調整をすることができます。 preタグに出力したり、white-space: pre-wrapと組み合わせてつかうことで、 JSONを読みやすく出力することができます。下記のDEMOではどちらもスペーシングとして…

pタグ内の改行コードを改行する(Reactで改行を反映したいときなど) 😎

kimizuka.hatenablog.com JavaScript <p className="txt">{this.props.txt}</p> みたいな感じで、this.props.txtに、 ふるいけや\nかわずとびこむ\nみずのおとという感じで改行コード入りのテキストを渡したい時、 CSS .txt { white-space: pre-wrap; } とCSS側を工夫することで一応…

GW中に一番活躍したアプリを紹介します。(タクシー配車アプリ編) 🚖

iOS

今年のゴールデンウィークは家族3人がローテーションで風邪を引いてしまい、 連日のように休日病院や小児科に通っていました。我が家から最寄りの小児科、休日病院までは片道1.5km程度。 車を持っていないので、いつもはこどもを抱えて徒歩かベビーカーで通…

いつのまにかUQmobileの動作確認端末一覧にau版のiPhone6が増えている。 📱

いつのまにか増えてます。www.uqwimax.jpしかもデザリングもつかえます。僕が乗り換えた時 は対応してなかったから、iPhone SEを買い足したのに。 kimizuka.hatenablog.comまあ、SEのサイズ感、気に入ってるからいいんですが。 はやく7も対応してくれるとう…

フロントエンドエンジニアがさくらVPS で Ubuntu + Nginx + Node.js + Express + webpackの環境を整えるまでの道のり - その6 Expressのディレクトリ調整とpm2の導入 😎

春ですね。^ ^なにか新しいことをはじめたくなりますね。^ ^前回はExpressの導入を行いました。 今回は、webpackを導入します。kimizuka.hatenablog.comkimizuka.hatenablog.comkimizuka.hatenablog.comkimizuka.hatenablog.comkimizuka.hatenablog.com …

webpackを導入してPostCSSをCSSに変換してCSSファイルを書き出せるようにする。 😎 (フロントエンドエンジニアがさくらVPS で Ubuntu + Nginx + Node.js + Express + webpackの環境を整えるまでの道のり - その5)

春ですね。^ ^なにか新しいことをはじめたくなりますね。^ ^前回はwebpackをつかってJavaScriptでimportをつかえるようにしました。 今回は、webpackでPostCSSをつかえるようにします。kimizuka.hatenablog.comkimizuka.hatenablog.comkimizuka.hatenabl…

webpackを導入してフロントのJavaScriptでimportをつかえるようにする。 😎 (フロントエンドエンジニアがさくらVPS で Ubuntu + Nginx + Node.js + Express + webpackの環境を整えるまでの道のり - その4)

春ですね。^ ^なにか新しいことをはじめたくなりますね。^ ^前回はExpressの導入を行いました。 今回は、webpackを導入します。kimizuka.hatenablog.comkimizuka.hatenablog.comkimizuka.hatenablog.com ゴールまでの道のり VPSサーバ借りる Ubuntu入れ…

フロントエンドエンジニアがさくらVPS で Ubuntu + Nginx + Node.js + Express + webpackの環境を整えるまでの道のり - その3 - Expressの導入とwebpackを入れる決意を固めるまで 😎

春ですね。^ ^なにか新しいことをはじめたくなりますね。^ ^前回はnodebrew、Node.js、npmのインストールを行いました。 今回は、Express か Koa を選んで導入していきましょう。kimizuka.hatenablog.comkimizuka.hatenablog.com と、思いましたが。決め…

フロントエンドエンジニアがさくらVPS で Ubuntu + Nginx + Node.jsの環境を整えるまでの道のり - その2 - nodebrew、Node.js、npmの導入 😎

春ですね。^ ^なにか新しいことをはじめたくなりますね。^ ^前回はUbuntuのインストールから初期設定までと、Nginxのインストール&起動を行いました。kimizuka.hatenablog.com今回ははりきって、nodebrew、Node.js、npmを導入していきましょう。 ゴール…

フロントエンドエンジニアがさくらVPS で Ubuntu + Nginx + Node.jsの環境を整えるまでの道のり - その1 - Ubuntu導入からNginxの起動まで 😎

Mac

春ですね。^ ^なにか新しいことをはじめたくなりますね。^ ^かれこれ7年ぐらいさくらのVPSをつかっているのですが、「さくらのVPS乗り換えキャンペーン」たるものをつかって新しいサーバに乗り換えてみることにしました。www.sakura.ad.jpいままでは、Ce…

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…

花粉プラスはなのど飴 😷

この時期は花粉症で鼻づまりとのどの痛みがひどくて、 のど飴を買いにコンビニに出かけたら、「はなのど飴」たるものを見つけました。しかも「花粉プラス」。ライオン菓子 花粉プラス 70g×6袋出版社/メーカー: ライオン菓子発売日: 2016/12/12メディア: 食品…

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

ومن المثير للاهتمام أن تقرأ من اليمين إلى اليسار. مزيج أكثر إثارة للاهتمام هو الأرقام الأبجدية 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;…