gulp + babel + browserify + scssで、ちょっとモダンなフロントエンドの練習をした
現在、熱血高校吹奏楽部のWebをリニューアルしているので、せっかくだからモダンなフロントエンドが書きたいと思ってやってみた。
Webのちょっとしたアニメーションなので、サクッとできるかなと思ったけど、やっぱりいつもと違うと慣れなくて、けっこう戸惑った。 慣れなかった主な点は以下。
gulpのセッティング
ES2015のimport記法
ES2015のクラス記法
gulpのセッティング
webpackにしなかったのは、なんとなくで出来るようにはなりたくなかったから。 雑だけど、以下のような感じ。
"use strict"; const gulp = require('gulp'); // コンパイルエラーでgulpが落ちないようにするやつ // http://blog.webcreativepark.net/2014/05/14-112523.html const plumber = require('gulp-plumber'); const sass = require('gulp-sass'); // レスポンシブのCSSがラクに書けるようになるやつ // http://qiita.com/kyaido/items/828906ffa7198e99d0b7 const combineMq = require('gulp-combine-mq'); // *.jsって書き方ができるようになるやつ // http://qiita.com/tonkotsuboy_com/items/67d9fd4d054a45af9f34 const sassGlob = require("gulp-sass-glob"); // babel const babelify = require('babelify'); // browserify const browserify = require('browserify'); const source = require('vinyl-source-stream'); // ESLintがこけたらデスクトップ通知を出してくれるやつ const notify = require('gulp-notify'); const eslint = require('gulp-eslint'); gulp.task('sass', function() { gulp.src('src/scss/style.scss') .pipe(sassGlob()) .pipe(sass({ outputStyle: 'expanded' })).on('error', sass.logError) .pipe(combineMq({ beautify: true })) .pipe(gulp.dest('css')); }); gulp.task('browserify', function () { return browserify('./src/js/main.js') .transform(babelify, {presets: ['es2015']}) .bundle() .on('error', function(err){ console.log(err.message); console.log(err.stack); }) .pipe(source('bundle.js')) .pipe(gulp.dest('./js/')); }); gulp.task('lint', function(){ return gulp.src('./src/js/*.js') .pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') })) .pipe(eslint({useEslintrc: true})) .pipe(eslint.format()) .pipe(eslint.failOnError()) .pipe(plumber.stop()); }); gulp.task('watch', ['sass'], function () { gulp.watch('src/scss/**/*.scss', ['sass']); gulp.watch('src/js/**/*.js', ['browserify']); });
ES2015のimport記法
require
はNode.js、import
はES2015の記法なんだそうな。
http://sakamock.hatenablog.com/entry/2016/02/03/091623
ES2015でimport
を書くと、babelでrequire
になって、browserifyで依存解決される、ということらしい。
import
とrequire
では、exportする記法も異なるので注意。
http://qiita.com/rooooomania/items/4c999d93ae745e9d8657
// slider.js 'use strict'; export default class slider { //hogehoge }
// main.js import slider from './slider.js'; new slider();
ES2015のクラス記法
中のメソッドをどう使っていくかはまだまだ勉強が必要そう。
// slide_menu.js 'use strict'; // jqueryをnpmで入れてます import $ from 'jquery' class slideMenu { constructor () { this.menuButton = $("#js_menu_button"); // hogehoge } hoge () { // hogehoge } }
webのちょっとしたアニメーションって、文字通り「振る舞う」から、JavaScriptでオブジェクトの振る舞いを考えられるのはおもしろかった。 会社でcoffeeを書くときも、もうちょっとオブジェクトの振る舞いとか、関数で振る舞いを定義していく感覚を意識していこうと思う。
commitしたら写真を撮られてSlackにアップされるスクリプトを作った
写真はMacBookの画面の上についてるカメラで撮られます。
commitしたら写真を撮られるところまでは旦那さんからPHPスクリプトをもらってたんですが、そこから先、撮った写真がSlackにアップされるスクリプトを書けと言われました。
自分はちょっと前まではPHP書くことも(ただしド素人レベルで)あったのですが、最近はほとんどPHPを書かないので、pre-commitにRubyで書けないかとググってみたんですが、自分の環境(zsh + rbenv)だと一筋縄ではいかないようでした。
あと、ググってもRailsのgemの記事ばかりで、Rubyのスクリプトはちょっとしか出てこなかったです(´・ω・`)
まあ途中までPHPで書かれているので、PHPのほうが撮影したファイルを扱いやすいかな、ということでPHPで手段をさがすことにしました。
commitしたら写真を撮られてSlackにアップされるって、どんなプレイだよというツッコミを心のなかでしつつ、ちょっと調べてみたら
https://api.slack.com/methods/files.upload
これがイケそうだというのと、
file_get_contents
でファイルをPOSTできそうだということが分かりました。
なんとかAPIからレスポンスが返ってくる状態にはできたのですが、
invalid_args_name
が解決できず。
ちょっと調べると、file_get_contents
だとinvalid_args_name
でできなかったけど、curl
だとできたよ、という記事が出てきました(URL載せようと思って探したけど見つからない…)
なのでcurlでやり直してみたんですが、いかんせんcurlのお作法がわからず苦労しました。
結局一週間くらい泣きながらやってみてもできなくって、深夜に旦那さんにきいてもますますわからない事を言われて余計にヒステリックになる始末でした。
そんな中、今朝、旦那さんから「これは?」と言われた記事を参考にして、ようやくできました。
うまくいかなかった原因はふたつあって、ひとつは、
PHP5.6からファイルの取り扱い方が変更になったため、
$file = new CurlFile('filename.png', 'image/png');
という感じでCurlFile
を使わないといけないということ。
もうひとつは、先述の通り、curlでPOSTするお作法が全然わからなかったということでした。
SlackのAPIや、ググッて日本語ですく出て来る記事には、getでテキストファイルなどを送る方法がメインで書いてあったので、そっちにとらわれてしまっていたり、curlで検索してもいろいろ出すぎてよくわからなかったり…という感じでした。
curlでPOSTするお作法については、分かったら色々便利そうだなぁという感じなので、もうちょっと詳しくなりたいです。詳しい人教えて下さい(´・ω・`)
実際に動かしたスクリプトは以下です。
.git/hooks/pre-commit
に書く場合は最初にPHPのPATHをかきましょう。
#!/usr/bin/php <?php // ディレクトリは好きなところに $dir = '/Users/meg/.gitshots/'.date('Y/m/d'); $file = date('His').'.jpg'; if (false === is_dir($dir)) { echo "Create directory {$dir}\n"; mkdir($dir,0777,true); } echo "Taking capture into {$dir}/{$file} \n"; pclose(popen("imagesnap -q -w 3 {$dir}/{$file} &> /dev/null &", 'r')); // ここでsleepしないと画像ファイルが生成される前にスクリプトが動いちゃうので // ファイルがありませんというエラーが出ちゃいます sleep(5); //ここはSlackAPIで各自取得してください $slacktoken = "xxx-xxx-xxxx"; $channelId = 'xxxxxxx'; $header = array(); $header[] = 'Content-Type: multipart/form-data'; $file = new CurlFile("{$dir}/{$file}", 'image/jpg'); $postitems = array( 'token' => $slacktoken, 'channels' => $channelId, 'file' => $file, 'text' => "コミットしました", 'title' => "コミットしました", 'filename' => date('Y/m/d').".jpg" ); $curl = curl_init(); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); curl_setopt($curl, CURLOPT_HTTPHEADER, $header); curl_setopt($curl, CURLOPT_URL, "https://slack.com/api/files.upload"); curl_setopt($curl, CURLOPT_POST, 1); curl_setopt($curl, CURLOPT_POSTFIELDS,$postitems); $data = curl_exec($curl); echo 'RETURN:'.$data; curl_close($curl);
iSightのあるMacBookなら
brew install imagesnap
をした後に実行すれば動くと思います。
ということで、現在、コミットすると夫婦Slackに自分の写真が送られます…
うまくいって嬉しいけど、複雑なキモチ(´・ω・`)
Apple Watchを買ってみた
自分が買ったのはこれです。
アルミニウムのスポーツタイプ、一番安いタイプです。
よかったこと
動いた量に気を使うようになった
「アクティビティ」という機能で「ムーブ」「エクササイズ」「スタンド」の量を毎日計測してくれます。
座り仕事なので、よく「そろそろスタンドの時間です!」と、一旦立つように通知が来ます。
ねこあつめ再開した
くっそかわええ。それだけ。
操作はほとんどできないぽい?
駅locky
利用駅を登録しておくと、次の電車が来るまでの時間が分かるようになります。
せっかちなのでありがたい機能ですw
防水
いままで防水の時計にまったく興味なかったのですが、手を洗ったり、家事をするときに外さなくていいのが便利です。料理しながらsiriでタイマーできるのがとてもよいです。
macのロック自動解除
そんなに変わらないだろうと思ったんですが、仕事上、毎日何回もやることだからとてもラクになりました。
通知やタイマーが無音でリアルタイムに受け取れる
iPhoneにしてもガラケーにしても、着信音ありでもバイブにしても、まわりに音が聞こえちゃうのがすごく嫌なので無音バイブなしにしているのですが、それだと電話取れなかったり、メッセージに気づかなかったり、ということがあります。
Apple Watch は軽いバイブで通知してくれるのですが、腕につけているので基本音がしないんです。これが一番うれしい!
ビミョウなこと
おしゃれなベルトが高い
と思ったらメルカリに結構あったw
ゴツい
つけてる違和感というか、重みみたいなものはずっとありますね。。
それでも、損したな、と思ったことは今のところないです。
むしろ生き物みたいでかわいい。そんな感じです。 みんな買えばいいと思うよ。
「情熱プログラマー ーソフトウェア開発者の幸せな生き方ー」を読んだ
自分にとって目新しいことはそんなに書いてなかったのですが、2つほど印象に残った章があったので、メモがてら書きます。
「一番の下手くそでいよう」
ここに書いてあったこと、まるで自分のクラリネットのようでした。
作者の方もサックスプレイヤーだったそうで、上手い人に誘われて、上手い団体にどんどん入れてもらったら、自分も上手くなっていった、、というようなことが書いてありました。わたしもそうだったな。 なぜかお声がけをいただいて、うっかり参加したらみんな上手すぎて、ついていくぞー!と練習して...を繰り返していたら、ここまできました。 この辺の経歴はそのうちどこかで演奏動画と一緒にまとめて見られるようにしたいな、と考えています。
なんであれ、一緒にやる人のレベルってきっとすごく大事で、わたしはひとりではダメダメなやつなので、すごい人達に引っ張られていくのが一番成長への近道なんだと思います。他力本願だと言われることもありますが...。そう思って、今の会社にきました。まだまだエンジニアとしては「一番の下手くそ」です(´・ω・`)
「リーダーが自分の名前を知っているからといって自分の能力も理解されていると思っちゃいけない」
リーダーだけではなくて、周りの人に自分の能力をちゃんと伝えよう、ということでした。 たしかにそうで、優秀であることとそれが相手に伝わっていることは全く別の問題だし、相手が優秀であるからといって自分の力がどれくらいか分かるのかというと、そうでもないんだと思います。
アウトプットというのは、自分の能力を伝えるという意味もあるんだなぁ、と思いました。 よくよく考えれば当たり前のことなんですが、なんだか刺さりました。
Slackでちょっとだけたのしくなった話
五反田でお世話になっている@MiryGoAroundさんが、社内でSlack博士になっているというお話を以前に聞いたり、こういうエントリを書かれていたりしました。
そのときは、
「まあ、弊社はみんなSlack詳しいから不要なんだろうな〜」
と思っていたのですが、その後、
「あの小さい絵文字のやつ(Reaction)、どうやってやるんですか?」
「途中で改行ってどうやってやるんですか? Enter押したら送信されちゃって...」
「アイコンってどうやって変えるんですか?」
と、言う声がちらほら。
わたしが参加していないchannel(営業さんやライターさんのchannel)を見ると、
ひたすら文字だけだったり、改行が全く無かったり...ちょ、怖いっす...
と、いうことで、
esaにSlackのちょっとしたことをまとめてみました。
- Reactionのしかた
- 絵文字のつかいかた
- 途中で改行する方法
- アイコンの変更方法
などなど。
こんな感じ。
基本的だけど非エンジニアにはちょっとハードルがあるらしい使い方を、
画像を使いながら簡単に書いておきました。
すると、不思議とSlackでの会話量が増えたり
Reactionも増えたり
感謝されたり(笑)しましたw
なんというか、
「自分の知っていることはみんな知ってるんじゃないか」
と、いつも思っていたのですが(おそらく旦那さんがそうだからなんですが...)
意外とそうでもなくて、自分の知っていることを求めている人もいるんだな〜と思えてきて、 最近やっとアウトプットする意味や楽しさを、徐々に理解してきたところです。
LINE Bot や Amazon Dash Button で遊んでいた
ちょっと前に流行ったけど、余裕がなくて手を出せなかったので、今ごろになって遊びました。
だいぶ参考記事が出揃っていたので、やりやすかったです。
LINE Bot
ゴールデンウィークに山手線沿いを内回りで、五反田から高田馬場まで歩いたのですが、そのときに@polidogがLINE Botで、2割の確率で電車が出るくじ引きを作りました。
コードも一通り見せてもらったのですが、なんか面白そうだったので、わたしもサーバルちゃんBotを作りたいと思ったのがきっかけです。
で、共有してもらったコードを参考にNode.jsで作ってたのですが、わたしNode.js使ったことなくて、そりゃ当たり前なんですが全然動きませんでした。
何回herokuにデプロイしても、herokuのlogを見た時点で503エラー。もうどうしたらいいかわからーん! と、ガチで凹みました。
翌日、普段から使っているRailsに切り替えることに。
メインで参考にしたのは
バグ修正で参考にしたのは
です。
基本、前者の記事のとおりに進めれば大丈夫なのですが、時々コメントアウトが// コメントアウト
になっているので、注意して適宜# コメントアウト
に置き換えるか、消してしまうかしてください。
前者の記事のとおりに進めたら、$ git push heroku master
でデプロイに失敗すると思います。
Gemfile
のgem 'sqlite3'
を削除して、
group :development do # Access an IRB console on exception pages or by using <%= console %> in views gem 'web-console', '~> 2.0' gem 'sqlite3', '1.3.13' # ココに追記
また、同じくGemfile
で
group :production do gem 'rails_12factor' gem 'pg' # ココに追記 end
あとは$ bundle install
した後に再度$ git push heroku master
します。
heroku logs -t
で問題なくrailsが動いているようであれば、LINEの管理画面でwebhookのテストをした後、botを友だち登録して、声をかけてみましょう。
オウム返ししてくれると思います。
さくっと動かしたかったので、そのまま動かしてしまいましたが、いろんなSDKがあるので、こっちの方がコード見やすくなりそうだなーと思いました。
Node.jsちゃんと使えるようになったら、公式のSDKでもっかいやってみよ。
もちろんRubyもあった。
Amazon Dash Button
こちらは比較的簡単でした。
Amazon Dash Button を購入し、以下を参考にしてセットアップをします。
あとは以下の通りです。
どちらも同じwifiの中でやらないとたぶんダメだと思います。
旦那が基本、玄関と違うフロアでヘッドホン付けながら仕事しているので、『ただいまボタン』にできるかなーと思ったのですが、サーバー置かないといけないし、だいぶタイムラグやブレがあったので、実用はきつそうだな、という所感でした。
kindleでJavaScriptを勉強した
モダンでプレーンなJavaScriptを勉強した〜い!
ということで、kindleで2冊読みました。
どこでおすすめされたのか忘れてしまいましたが、思い出すためにググッてみると、やはり評判がよい感じですね。かゆいところに手が届くという感じです。
いままで分からなかったことがとてもわかりやすく書かれていたので、プレーンでなくてもモダンなJavaScriptを勉強/コードリーディングするときに、大いに知識が役立っています。
「何となくJavaScriptを書いていた人が一歩先に進むための本」では、半分近くが基礎的な文法のおさらいになってしまうのですが、その後にしっかり
- JavaScriptにおけるオブジェクトの基礎
- JavaScriptにおける関数の基礎(スコープやクロージャもココ)
の説明がされて、
- プロトタイプ
- ES6
についても、比較的サクッと説明されます。
「JavaScriptの理解を深めた人がさらにもう一歩先に進むための本」では、
- "use strict" で変わること
- いろんなthis
- ES6におけるネイティブオブジェクト
- イテレータ
- 関数(巻き上げ、コンストラクタ、オーバーロード、getter/setter)
- プロパティと属性
- オブジェクトの制御
- JavaScriptにおけるクラス
が書かれていました。
電子書籍でそんなにボリュームのある本でもないですし、こうやって挙げてみると軽そうに見えるのですが、いきなりオライリーとか読んだら挫折しそうな予感しかしなかったので、気軽に読めてレベル感の合う技術書があってよかったな、と思いました〜。
hamlで、シンボル(&:hoge)使ってねっていうエラーでハマった - Class: RuboCop::Cop::Style::SymbolProc
初歩的なことでちょっとだけハマったのでメモ。
- cats.each do |cat| = cat.name
がrubocopでこけた。
Class: RuboCop::Cop::Style::SymbolProc — Documentation for rubocop (0.47.1)
(&:name)
←こういうのがまだちょっと使いこなせてないので調べる。
なるほど。
まあとりあえず言われた通り直してみるか。
= cats.each(&:name)
オブジェクトになっちゃって想定通り出力できない。
= cats.map(&:name)
うーんちょっとちがう。
とりあえず、
- cats.each do |cat| %span= cat.name
で逃げてみた。
うーん、ゼッタイもっときれいになるよなぁ、と思ったんだけど、
= cats.map(&:name).join(" ")
join
すればよかったのでした。反省。
「はじめてのCSS設計 - フロントエンドエンジニアが教えるメンテナブルなCSS設計手法」を読み終えた
はじめてのCSS設計です pic.twitter.com/l4kTHhNKuq
— ナユ (@nayucolony) 2017年3月16日
このツイートを見かけて、本屋に行って速攻お買い上げしました。
今月14日に出たばっかりだったんですね。
以前読んだ「Web制作者のためのCSS設計の教科書」よりも良かったなあと思ったのは、設計を活用する場面のイメージが具体的に書かれていたことです。逆に、手法とその名前・定義を明確に知りたいなら「Web制作者のためのCSS設計の教科書」の方がいいかなと思いました。
part1の、継承やカスケードについての説明は、今まで読んだ本の中で一番分かりやすかったです。
実践編であるpart4は、結構長い上にプラスアルファの応用もそこそこあったので、結構読むのがしんどかった印象。自分がまだ理解しきれていないだけかもしれないけれど。
SVGアイコンとグリッドシステムについてが難しくて、、、誰か詳しい人、教えてください。。
flexboxについては一番最後に詳しく説明がありました。flexbox使うときに引きながらやったら捗りそうな感じでした。
流れの早いフロントエンド界隈なので、タイムリーな本が出版されるのは、非常に貴重でありがたいです。
せっかくなので、同シリーズの「HTML5/CSS3 モダンコーディング」もAmazonでポチりました。今の会社に入ったときに借りれるチャンスはあったのですが、そのときはRubyとRailsのお作法を覚えるほうが急務だったのでお断りしてしまっていたのでした。早く届かないかな〜。
初心者がUI・UXまわりのデザインについて勉強するのに役立ちそうなものまとめ
めるです。
最近、コード書いてばっかりもいられないので、UI・UXまわりのデザインについて勉強しています。
こちらでも、UI担当と紹介されています。汗
まず、もくもく寺さんのSlack(参加自由)で紹介があったのがこちら。
⬇Amazonはこちら。
また、五反田ともだちの@ymrlさんにも聞いてみました。
ということで、早速お買い上げしました。
誰のためのデザイン? 増補・改訂版 ―認知科学者のデザイン原論
それから、
のほうは、いま読んでる途中です。
そして、お買い上げした翌日に会社で@mikedaさんから「あげる」と渡されたのが
ですが、こちらは古いので、4章のページレイアウト、5章のリスト、10章のモバイルのところだけ読みました。他に読むべきところがあったら教えてください。
同じタイミングで「◯◯◯◯◯◯社のときに読めって言われた」と渡されたのが
スマートフォンサイト設計入門
こちらはスマートフォンに絞った話なので、とても実践的でした。
そして、今日会社で@dim0627さんから貸していただいたのが
こちらは読むのがとても楽しくて、お昼休みに一気読みしちゃいました。
今月お財布がピンチなので、お給料が入ったら自分用に買おうと思います。
ノンデザイナーズ・デザインブック [第4版] に関しては、会社のエンジニアみんなでそれぞれ買って、勉強会をすることになりました(`・ω・´)
そういえばIT業界にきた当初は、デザイナーになりたかったんだってことを思い出しました。UI / UX頑張ります〜。