エンジニアをリングする

プログラをミングしたり。

my web site twitter

転職報告と近況もろもろ

めーっちゃ久しぶりにブログです。
最近いろんなことがあってわたわたしていたのですが、まとまった報告ってどこでもしていなかったので、近況でも書いてみようかと。

転職してました

6/1からGoodpatchで働いています。自社サービスのプロトタイピングツールProttのフロントエンドを担当しています。
Prottはサーバー側がRuby(Rails)、フロントがAngularでjade+sass+coffeeという感じの構成で、簡潔に書けてイイ感じ。
今までは受託が多かったので自社サービスに関わるのは初めてなのですが、とてもたのしいです。
きちんとデザインされたプロダクトをさわるとテンション上がりますよね。

GoodpatchはUIデザインの会社と認知されてますが実はデザイナーよりエンジニアのほうが人数が多くて、社内でエンジニアリングもがっつりやっています。
ただ共通点はエンジニアだろーがPMだろーがみんなデザインが好きってことで、カッコいいものが好きです。そしてわたしもカッコいいものが好き。
だから作るプロダクトのデザインに妥協しない環境にいられることはとても満足感があります。
そのへんもGoodpatchを選んだ理由のひとつです。

あとチームの雰囲気もすごくよかったり就業環境も恵まれているのですが、そのへんは後述の記事で。

CodeIQに載りました

先日インタビューが載りました。（ありがとうございます！）

今までの経歴と、Goodpatch/Prottチームでの働き方あたりを話してます。
CodeIQは好きなサービスで昔よく問題解いてたしCodeIQ MAGAZINEもみてたので、そこに自分が載るって不思議で嬉しいです。
見たよーって言ってもらえることも多くて、うれしはずかし。ありがとうございます＞＜

HTML/CSS本を出します

前述の記事の最後でちらっと触れてるんですが、11月上旬に書籍が出ます。
HTML5/CSS3のコーディングの本です。はじめての執筆・・・！

  • HTMLとCSSの文法とかはある程度知っているけど普段の自分のコーディングに自信がない
  • 修正とかはできるけどデザインをいちからコードにおこそうとすると戸惑う
  • 今までIE7~8対応のコーディングをしていて、そろそろ脱IE8なコーディングがしたい
  • フロントエンドエンジニアがHTML/CSSコーディングするところを隣で見たい！って思ったことがある

上記のようなかたを対象にした本で、実際にサイトデザイン画像からコーディングする流れをハンズオン形式で解説しつつ、要所要所でプロパティや要素について掘り下げて解説するみたいな感じの実践ベースなので、結構楽しく進められるんじゃないかなと思っています。
やっててテンション上がるように、サンプルサイトのデザインにもこだわりました！

今年ずっと地道にこれの執筆をしていて、やっと11/2に発売予定です＞＜（そして最後の追い込みで今月が炎上気味）
単著なので孤独な戦いですが、レビュアーさんがたのフィードバックに励まされてなんとかここまでこれました（；＿；）
圧倒的感謝。
書籍のことはまた表紙とかFixしたら改めてご報告したいとおもいますー。

しっっっかし文章書くのって大変ですね・・・！！
本書いてごはん食べてる方をほんとうに尊敬しました・・・
わたしはコードを書いてごはん食べていくぞ・・・という決意を新たにしました。

CSSの勉強会でLTしました

8/30にあったBack to BasicsというCSS勉強会でLTしました。
このイベントがとにかくめっちゃくちゃよくて・・・！！
企画された酒井さん久保さん本当にありがとうございましたという感じです。とにかくセッションの情報の質が高い。
CSS好きな方は私のスライドはいいので他の方々のスライドみてください。一番目から順番に・・・！！

参加レポートブログ：Back to Basics CSSの感想と自分用まとめ（とありがたきスライド）
振り返りスライド：Q＆Aで振り返る「Back to Basics」 CSS

どちらも素敵なまとめなのでぜひ。スライドのリンクも全部あります。
あの日参加して、もっとCSSの仕様ちゃんと読もうと心に決めた。

ちなみに私のスライドはこれでした（めっちゃ小ネタ）
CSSで固定比率レイアウト

React.js meetup #2 開催します

以前、百何十人の募集が数分で埋まったReact.js meetupというイベントがあったのですが、
いろいろないきさつがありまして、それの第二回の準備をkoba04さんと一緒に進めています！

React.js meetup #2

9/8(火) 19時からですー。
今週水曜日に公開したのですが、17分で180人埋まりました＞＜
みんなReact好きね。。

わたしはイベントの企画初めてなんですが、いきなりおっきいイベントなのでわくわくハラハラなかんじです。
募集開始した瞬間に待機勢が一斉にアクセスしてdotsが激重になったときはびびりましたね
当日うまくいきますようにー！

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

こんなとこですかねー・・・
とにかく今年は執筆でいっぱいいっぱいで、全然なにも作れてないので最近欲求不満気味です。。
原稿まわりが落ち着いたらなんかつくりたい！！

と、いうわけで近況でした！

　

あとおまけ

ハム速載りました

↓

hamusoku.com

＼(^o^)／

ES6入門のセッションした話&Talkie.js超オススメ

勉強会 JavaScript 発表資料

今日開催された春のJavaScript祭でES6入門の話をしてきました！
スライド資料は以下です。

HELLO, ES6 ~これから迎えるJSのミライ~

ES6入門な感じで、以下のようなことをざっくり話しました。

  • ES6って何
  • 何が変わるの
    • 新しい構文の紹介
    • 新しい機能の紹介
  • どうやったら使えるの
    • まずはちょっと試したい人へ
    • プロダクトのコードに使いたい人へ
    • テストだけES6で書いて慣れたい人へ

ちょっと駆け足でしたが、内容はスライドに全部書いてあるので、見てもらえれば思い出せると思います。
スライド、さっそくはてブがついててうれしい(^ω^)

会場の100人超のほか、生放送してたschoo経由でも見てくださった方もいたようで、ありがとうございます！
LT含め人前で話すのが初めてだったので緊張しました＞＜
でも楽しかったので、これからも機会があれば喋るの挑戦したいなーと思います！
JSオジサンとか出たい・・・！

一番言いたいこと

↑のスライド、Talkieというスライドライブラリで作ったのですが、マジ便利ということを声を大にして言いたいです！！！！
TalkieはMarkdownで書けるHTMLベースのスライドライブラリなのですが、今回のスライド、テキストベースじゃなくてKeyNoteとかのGUIベースで作ってたら5倍ぐらい時間かかってたと思います。。。

サンプルがてら、スライドの1〜4ページまでのコードはというと・・・

<script layout="cover" invert type="text/x-markdown"
  backface="image/sai.jpg" backface-filter="brightness(.4)">
# Hello, ES6
## ~これから迎えるJSのミライ~
2015.4.25 [@yoshiko-pg](http://yoshiko-pg.github.io)
</script>


<script layout type="text/x-markdown">
# 突然ですが
## JavaScript読めますか？
</script>


<script layout invert type="text/x-markdown"
  backface="image/koara1.jpg" backface-filter="blur(1px) brightness(.6)">
# 余裕？
</script>


<script layout="code" type="text/x-markdown">
## このコード読めますか？

\```javascript
function sum (...nums) {
  return nums.reduce((a, b) => a + b)
}
console.log(sum(1,2,3,4)); // 10

function hi (name = 'Bob') {
  console.log(`Hi, my name is ${name}`);
}
hi('Tom'); // Hi, my name is Tom
hi();      // Hi, my name is Bob
\```
</script>

こんな感じです。
背景に画像敷くのも、ぼかすのも暗くするのも、script要素の属性ひとつで超簡単！！！
コードのシンタックスハイライトも、Highlight.jsを読み込んでおけば勝手にやってくれるので超簡単！！！
（Highlight.jsはES6の構文対応してないので今回のサンプルコードは微妙に色がバグってますが）

スライドの公開もGitHubPagesに上げればPCからもスマホからも見れるし。
発表時の最大化もポインターの表示もキーひとつで超簡単！！！
あと外部Webページ紹介したい時もiframeで埋め込めるし・・・もちろんリンクもできるし・・・

便利すぎてスライド作るの楽しかったです。
作者のahomuさん尊敬しました。
私もこういうライブラリ作れるようになりたいですねー・・・

ロジックにはBacon.jsが使われていて、そこがこのライブラリに興味持ったきっかけでもあったので、実装も読もうと思います。

使い方はhttp://ahomu.github.io/Talkie/が説明兼実際に動くサンプルになっているのでスライドとそのソースコード見た感じでわかると思います。

いやーすばらしい

結論

ES6胸熱
Talkie++

AngularJSで改行を含むテキストを超簡単にng-bindする

AngularJS CSS

AngularJSのデータバインディング便利ですが、ng-bindで複数行のテキストを表示しようとすると途端に面倒になるんですよね。。
そのままじゃHTML上では改行されないので<br>に変換する必要があって、それはfilterとかで簡単にできるのですが、それをタグとして認識させるには$sce.trustAsHtmlしないといけなくて。。
でもユーザー入力の文字列をHTMLとして画面に表示することを許可してしまうのは危険すぎる。。
br以外のタグはエスケープするにしても、たかが改行表示するだけでそこまでするのはやーーだーー。。

とまあそんな感じだったんですが、この間すごいことに気付いてしまいました。

続きを読む

Re:VIEW導入 & Re:VIEW Live Reload作った

Re:VIEW 書籍執筆

最近ちょっと書籍形式の文章を書く機会があり、良い機会なのでたびたび耳にしていたRe:VIEWというツールを触ってみました。

Re:VIEWとは

書籍を書くことに特化したマークアップ言語＆ビルドツールという認識。
「れびゅー」と読むそうです。

続きを読む