kinalog

自称フロントエンドエンジニアが何か喚いています。

Ruby on Railsがインストールできなくて小一時間悩んだ

Ruby Ruby on Rails MEMO

ちょっと手が空いたし、すごいプチネタだけど勉強もかねて作りたいものもできたので、Rubyの勉強の延長でRuby on Railsを触ってみることに。

が、しかし、この手のものを入れるときの最初の難関でもあるインストールでいきなり躓いたので今後のためにも覚書。

続きを読む

Gulp＋EJS＋JSONからHTMLファイルを生成する

Gulp EJS HTML

似たようなファイルをたくさん作る機会があったんだけど、面倒だし後から更新するのも大変。
そこで、GulpとEJSを使って、JSONファイルの設定を読み込んで、その設定の分だけHTMLファイルを生成する方法はないかと探してみたところ、やっぱりありました。

aircolor.hatenablog.com

ただ個人的に、いっぱいタスク作るのってどうなんだろう...と思ったので、1個のタスクにまとめてみることに。

続きを読む

gulp-compassで色んな階層のsassをwatch

Gulp Sass Compass

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
2015.10.21 config.rbが使えるように改良した記事をアップしました。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝




gulpの解説サイトを見ていると、そのどれもフォルダ構造が、フォルダ名は違えど

root（ここにgulpをインストール）
├ dist（ビルドするとここに出力される。サーバーにアップしたり納品用）
└ src（開発用）
　　├ assets（このフォルダ内にCSSや画像を全部突っ込む）
　　│　├ _sass
　　│　├ css
　　│　├ images
　　│　└ js
　　├ index.html
　　・
　　・
　　・

みたいになっていますが、案件によっては

root
├ dist
└ src
　　├ assets（このフォルダ以下には共通のCSSやら画像やらのみ格納）
　　│　├ _sass
　　│　├ css
　　│　├ images
　　│　└ js
　　├ _sass （トップページ用SASS）
　　├ css （トップページ用CSS）
　　├ images（トップページ用画像）
　　├ js（トップページ用JS）
　　├ index.html
　　└ contents1
　　　　├ _sass（contents1用SASS）
　　　　├ css（contents1用CSS）
　　　　├ images（contents1用画像）
　　　　├  js（contents1用JS）
　　　　└ index.html
　　　　・
　　　　・
　　　　・


みたいに、階層ごとにわけた構造にする必要が出てくることがあると思うんです。というか私はあります。

でもgulp-compassの公式のドキュメントを見ても、色々なサイトを見ても、rootフォルダでgulp watchしたとき下層の任意の場所でcompassを実行する方法っていうのがどうにも見当たらない。

ということで、どうやればいいか考えてみました。
※gulp超初心者のため、他にスマートな方法が存在しているかも。

続きを読む

iMac（Mid2007）の内蔵HDDが死にました

世間がWWDC前でなんだか浮き足立っていた23時頃。24時間電源入れっぱなしで、Returnキーを押しただけで画面が表示されるはずの自宅のiMacが、マウスを動かそうが何をしようがうんともすんとも言わない。電源は入ってるんだけど画面は真っ暗なまま。

とりあえず電源ボタンから電源を切って、再度電源を入れたところ、Macの起動音の後に...

画面の真ん中にフォルダアイコンに？マークが書かれたものが点滅をしている。

7年ぐらいMac使ってて初めて見る光景だったんだけど、後ろで酔いつぶれた同居人に聞いてみたところ、「それOS死んでる...」とだけ。

どうしようもない状況です。

続きを読む

Grunt使いこなしてないけど、Gulp導入してみた

node.js Gulp

世の中には、「Grunt使いはGulp使うべし！」のような記事がたくさん存在している。
でも待って欲しい。私のような化石フロントエンドはそもそもGruntなんて使ってなかった。（インストールはしたが）
そんな希少な人間だって生きていて良いハズなのです。

というわけで、Grunt使ってない系の人間がGulpを導入してみました。

続きを読む

超！イマサラ！Gruntを導入するだけしてみた

node.js Grunt

最近、「イマドキGrunt使ってないフロントエンドエンジニアいるの？（笑）」みたいな風潮だけど、ここに居ました。笑ってください。ここに居ました。

初めてHTMLを触った時はテーブルレイアウトが主流、サイトの上部には「This site is Japanese only.」の表記、ウェブリングやヘンテコな同盟に参加してバナーを貼りまくり、JavaScriptといえばページの上部から雪を降らせる技術、みたいな化石時代を生きてきた私が、やっと重い腰を上げてGruntを導入してみた。

続きを読む