新しい日記

新しい日記

デザイン論

この記事は、社内向けに書いたけど、収まりきらなかったので、ブログに載せられるように編集を加えた、私なりのデザイン論についての記事です。 はじめに、私とデザインの関わり アシスタントエンジニアがなぜこんな話を?と思われるかもしれないのではじめ…

退職

これやりたかったんだよね 2015年4月から新卒としてお世話になっていた現職ですが、6月末に退職することになりました。色々ありましたが、1月になっても内定が出ずふらふらしていた私を拾って色々チャレンジさせてくださったという点では本当に頭が上がりま…

クロージャを理解したような気になっていたが…

先日クロージャの説明を求められて、堂々とスコープのことを説明をしてしまい、ウーン…違う…とさせてしまうという出来事がありました。 その場でクロージャの例についてお教え頂き、そのときは「クロージャってそういう意味なのか!」と納得した気になってい…

sass(scss)の&と変数を利用して親の親であるセレクタを参照する

sass の &(アンパサンド) はとっても便利。 特に BEM やるときは、いちいち block や element を書かずに & で書き足していけばいいのでやりやすい。 例えば以下のようなコードをコンパイルすると .block{ display: block; &__element{ display: inline-bloc…

jQuery なしでスムーススクロール実装するときのベストプラクティスがわからない

jQuery で便利なのは offset 系の処理だと思うんだけど、 offset 系の処理で最も頻発するのはスムーススクロールだと思ってる。 とりあえず何秒かごとにターゲットの場所までちょっとずつスクロールしていくだけという雑なコードを書いているんですがうまい…

gulp+ejs+json その2

ページの情報を json にまとめておいて、そこから情報を取ってきたり、出力場所をそれぞれのページで変えたりする場合、以下のようなやり方でできる。 meta の一部が違うとか、中身で共通する部分はあるけどそれぞれのページでユニークな部分が多いときに便…

git で画像扱う時の設定

git

git で画像も管理してて、多数の人(多数の環境)の間で編集しあってると、 編集してない画像ファイルが modifiy 済みみたいな挙動をして、git reset --hard しても元に戻らないみたいなことがある。さくっと!.gitattributes # Autodetect text files * tex…

MySQL の now() とタイムゾーンの関係

NOW() した際に UTC になっていたので、JST にしようとしたところはまった。まず MySQL のタイムゾーンは複数ある。 mysql> SELECT @@system_time_zone, @@global.time_zone, @@session.time_zone;をするとわかります。@@system_time_zone はシステムタイム…

PHP5.6に入れなおすぞ!

前回うまくいかなかった vagrant 上の PHP のアップグレード作業に再チャレンジしました。結果! そして! できた〜!!!手順!準備。古い php は消しておく yum remove php-*remi リポジトリの追加まずそもそも(前回から) remi ってなんやねん…って思っ…

ejs で json からデータを取り込む

ejs は embeddedjavascript というテンプレートエンジン。 gulp 用のパッケージもあるよ。www.npmjs.comHTML に組み込むような書き方なので、デザイナーさんなどと共有しやすいし、学習コストが低くて気に入っています。 外部ファイルの include や 変数の呼…

sass 3.3 以上で使えるようになった map について

今更ってかんじですが… css 風の書き方で json みたいなデータを作れるようです。 書き方のサンプルはこんなかんじ $map: ( key1: value1, key2: value2, key3: value3, ); <|| 以下はマップを使ったカラーパレットの管理の例です。 >|| $colors: ( black: #…

javascript reduce(), reduceRight()

隣り合う 2 つの配列要素に対して(左から右へ)同時に関数を適用し、単一の値にします。 by MDN以下の様な感じで、 配列の総計を出したりするのに使えます var sum =function(arr){ var value = arr.reduce(function(a,b){ return a+b; }); return value; }…

git でローカル環境外で管理したくないファイルを指定する

git

普通に作った .gitignore はリポジトリ内で共有されてしまいます。 自分専用の環境設定ファイルなど、ローカル環境では使いたいけど、 リポジトリ全体では共有したくないものなどは .git/info/exclude に記述することで、管理から除外されます。 ただし、 so…

vagrant に php 5.5 をインストール

以前の記事の通り、 $ sudo yum -y install phpと、 yum で 引っ張ってくると php 5.3系がインストールされてしまいますね。これを参考にして5.5系をインストールしてみようとしたところ、どうもうまくいかない。 $ php --versionするとちゃんと5.5系が入っ…

FUCK facebook ogp

facebook ogp のキャッシュが何を試しても消えない。試したこと debugger POST する ページ自体を削除してみたけどキャッシュは残ってる og:url 末尾に / ついてる というか、 debugger では正しく meta 情報が拾われてるような表示をされてるんだが、 share…

browserify で javascript plug-in 使いたいときは browserify-shim を使え

前に書いた browserify の記事、これで $ は使えるようになるんですが、 plug-in を使おうとするとこのままだとできない。 そこで必要になるのが "browserify-shim" というもので、こいつを npm install したのち、 package.json に以下を追加。 { ~略~ "bro…

gulp-ruby-sass で複数の scss を同時にコンパイルする

gulp-ruby-sass は src 部分に配列とかグローバル(*)を使うことが出来ないので、異なる scss ファイルを出力したい場合は複数のタスクを作るしかないと思っていたが、 以下のような方法で source をわけてあげることで複数の scss をコンパイル出来る。 //so…

gulp で browserify

ちょっと前から話題の browserify を導入してみました。 browserify とは? javascript で require ができるようになる。 jquery だとか、その他いろいろなライブラリを使っていると、その依存関係を考慮して html 順番に読み込ませたり、 あるいは順番に co…

gulp-run-sequence is deprecated

というわけなのでgulp-run-sequenceを使っていたところは、run-sequenceに移行しましょう。run-sequencewww.npmjs.comgulpfile.jsの書き方は全く一緒。

viewport units へさらなる理解

CSS

この記事は主に以下の記事を参考にしています。bitsofco.de viewportとは? viewportを基本にした相対的な単位です。 vw, vh, vmin, vmax の4つがあります。 名前 単位 意味 viewport width vw ブラウザのviewportの横幅の1/100 viewport height vh ブラウザ…

シングルページ、かっこいいデザイン

条件 シングルページ ビジュアル重視 スクロールアクション Goodmoods | Where inspiration meets e-shopping Phases Magazine 条件 シングルページ width: 100%; Lunar Gravity | We craft unique digital experiences throughout the universe. 例外 table…

git コマンドをつかっちゃお

git

git コマンド詳しくなくて恐縮ですが最近利用し始めたので自分用メモに残しておく ブランチ間の差分をファイル名だけで出力する git diff --name-only ブランチ1 ブランチ2 ブランチ間の差分をファイル名+ステータスで出力する git diff --name-status ブラ…

sourcetree で Git Flow を使ってみる

git

お恥ずかしながら、役職名の中にエンジニアって単語が入ってるのに git は sourcetree で使ってる。 git コマンドもあんまり詳しくないし…sourcetree で git flow というブランチ管理をするにあたってのメモです。まずmasterがあります。 新しい案件Aが入っ…

PHP short_open_tagの設定

PHP

以前にも調べた話題ですが PHP省略タグについて - 新しい日記これをOn Offさせる方法について。php.iniをいじってサーバ全体について設定する方法 /etc/の中にphp.iniがあるので、その中をいじる short_open_tag = Off //省略タグ使用不可あるいは short_ope…

inline-block, line-height, vertical-align

CSS

良記事!!!1理解しておきたい、CSSによるインラインレイアウトの仕組み(font-size/line-height編)Inline Layout─Frontrend Conferencehtml5experts.jp2 https://html5experts.jp/takazudo/13464/3 https://html5experts.jp/takazudo/13592/4 理解してお…

技術関係ない話2

UX

関係ないとまでは言わないけどそこまで関係ない話Slack人気の理由を機能で説明がつかないと思っている人はたぶん多い、私はチャットツールあんまり比較してないのでわからんけど一応業務でSlackは使ってる私が思うSlackのいいところ 絵文字がいっぱいある ア…

技術関係ない話

Groovesharkがサービス終了!!Groovesharkがサービスを終了jaykogami.com今の仕事とは全く関係ないけど、修論で音楽サービス関連についてもそこそこ調べていたのでGroovesharkってそもそもなに? ユーザが音楽を違法アップロードしてそれをシェアしてストリ…

colorboxをスワイプ対応にする

lightbox系プラグインで有名なcolorboxですが、スワイプなどのタッチ操作に対応してない。 colorboxはインライン要素などを表示できたりと機能豊富なのがいいんですが、他によさげなプラグインがなかったので、タッチ操作に対応させる手段として、jQuery.eve…

画像の高さの取得

はまったcontainerの中のimg要素の高さを取得してcontainerに取得した高さを適用させたいHTML <div class="container"> <img src="xxx.jpg" alt=""> </div>以下の様なjQueryを書いたけどうまくいかず、取得されたheightは0となってしまった。jQuery $(function(){ var height = $('.container > img').height(); $('.…

スマホサイトtips

android4.1とかだと下記のようなCSS3のbackground省略記法が使えない background: url(img/xxx.jpg) 50% 50% / contain no-repeat;だから、わけてかきましょうね! background: url(img/xxx.jpg) 50% 50% no-repeat; background-size: contain;ちなみに、背…