エンジニアをリングする

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

my web site twitter

position: absolute; + display: table;の謎を解きたい

10/23 追記: absolute + tableの謎が解けた!!!! - エンジニアをリングする

CSSでちょっと前から悩んでいる挙動があります。

  • heightプロパティを%指定するときには、包含ブロックにheightの値が指定されている必要がある
  • しかし、絶対配置(positionがabsoluteかfixed)されている要素は包含ブロックにheightの値がなくてもheightを%指定できる。

ある要素の高さがcssではなく内包物によって保たれているような場合、その子要素にheightを%指定しようとしてもできなくてautoの扱いになるよ、 でもその子要素がposition: absolute;だったら特別にheightを%指定してもいいよ、親要素(包含ブロック)の内側の高さを基準にして計算してあげるよ、みたいな感じです。

実際に挙動をみてみましょう。

.wrapper(赤)が外側の要素。縦横200px。 その中に.inner(黄)と.spacer(見えない)があります。
.wrapperの高さが200pxなのは、子となる.spacerのheightに200pxを指定しているためなので、.wrapperにはheightの指定がありません。
この場合、子となる.innerにheight: 50%;を指定しても効きません。
でも、.innerのpositionがabsoluteであれば、height: 50%;が効いて.innerの高さは100pxになります。
上のfiddleがその状態です。

ここまでは仕様通りです。
ではここで.innerのdisplayをblockからtableに変更してみましょう。

height効いてないよ!!なんで!!!

※ この状態で.wrapperheight: 200px;を指定すると.innerのheightもちゃんと効きます。

この挙動の元となる仕様はどこで定義されてるんでしょうか・・・?
どなたかご存知でしたら教えてください><

今日CSS仕様書もくもく会に参加してきたので id:nxdebiru さんに質問してみたのですが、検証しているうちにさらに恐ろしいことが・・・

謎い!!!!!!!

ちなみにCSS仕様書もくもく会は毎月第三週開催、場所はGoodpatchですので是非!

togetter.com

そして前述の謎挙動(absoluteで効くはずのheightの%指定がtableにすると効かなくなる)、どなたかおしえてくださいっ!!

Stack Overflow DevDaysに参加してきました

10/9(金)に行われたStack Overflow 10月「DevDays」 | Peatixに参加してきました!
平日朝9時半からというマッチョなスケジュールでしたが、いつもお世話になりすぎているStack Overflowのイベントとあって、とても楽しみにしていました。
でもこの平日の日中という開催日時のために、行きたくても行けなかった人も多かったんじゃないかな・・・と。

内容としては最初にジョエル・スポルスキさんのセッションがあったあと、有志によるセッション大会といった感じでした。
それと、お昼のあとには日本で一番ポピュラーな技術情報共有サービスであるQiitaを開発しているIncrementsのCEOである海野さん@yaottiとジョエルさんが二人で壇上に並んでのQ&Aコーナーもありました。
ジョエルさんの発表もQ&Aもその場でしか聞けない内容でしたが、とても良い内容だったので自分なりに概要をまとめてみます。

大きなオンラインコミュニティを継続的に維持する方法 - Stack Overflow最高経営責任者 Joel Spolsky @spolsky

ジョエルさんによる発表。
大きなオンラインコミュニティであるWikipediaの例を挙げながら、大規模なオンラインコミュニティがはらみがちな問題点とStack Overflowの掲げる思想が語られました。

  • インターネットにテキストボックスを見つけると、人は何を書いてもいいと思ってしまうらしい
    • 一般人に「匿名性」と「観客」が与えられると、一般人は不良になる
  • そのためにオンラインコミュニティにはルールが必要
  • しかし、ルールが有益に働かない例もある。例えば、Wikipedia
    • Wikipediaには「確認できる情報」しか載せることができない
    • ある作家が、自分の著作に関した間違った情報がWikipediaに載っているのを見て、内容の修正を申し立てた
    • Wikipedia側からの回答は「No」だった
      • 「著者が著作について一番詳しいということは理解するが、修正の内容が事実であることを確認できるリソースがない」とのこと
    • これは実に馬鹿らしい
    • 「真実」と「確認できる情報」は一部しか重ならない。確認できない真実も多いし、確認できる嘘の情報もまた多い
  • 良いコミュニティを維持するためにルールは必要だが、このようにルールのせいで人が驚いたり納得できないことも起きうる
  • ではStack Overflowが大切にしているルール・思想は何か?
    • 目指しているのは「会話より結果」
      • Stack Overflowの代表的な質問は、一人が質問し、数人が答え、数百〜数千人が閲覧する
    • ポリシーは "We Hate Fun"
      • Stack Overflowはソーシャルコミュニティではなく、掲示板でもなく、談笑する場所でもなく、プログラマーのリソースとなるべき場所である
      • "厳しさ"やドライな雰囲気が感じられるとしたら狙い通り
  • 良いコミュニティを維持するためには良くないものを取り除く必要がある
  • しかし、殺伐としすぎていると、将来コミュニティに貢献してくれそうな有望な人が一度の失敗でコミュニティから離れてしまうことにも繋がる
    • その対策のひとつとして、良くない質問につけるタグの表現を変更した
      • ClosedOn Hold終了編集待ち
      • Too localizedOff topic局所的すぎる質問トピック外の質問
      • Not constructivePrimary opinion-based建設的でない質問主観的な意見の質問
      • Not a real questionUnclear what you're asking質問ではない質問したい内容が明瞭でない
    • これには絶大な効果があって、タグ付けされた質問の再編集率が2倍以上になり、投票率も増した
    • 言葉遣いは大切である
      • できるかぎりポジティブで、見た人がどう行動すればいいのかわかる言葉を使うこと
  • 良いコミュニティを維持するために、適切な説明や言葉でルールを伝えていく

Stack Overflow & QiitaのCEOにQ&Aタイム

※ 記憶が曖昧な部分はtogetterのツイートを参考にさせていただきました

Q. ユーザーのフォローやDMなどのSNS的機能について自分のサービスにおいてはどういった考えを持っているか?

Stack Overflow(ジョエルさん)

Stack Overflowが大切にしているのは「会話より結果」なので、質問の投稿者や回答者が誰なのか?といったことは重要ではない。
そのため意図的にアンチソーシャルな厳しい作りにしている。
当時新しいサービスとして盛り上がっていたFacebookとは逆の方向に進みたかった。

Qiita(海野さん)

QiitaはStack Overflowと違って「質問→回答」という形式ではないので、投稿された記事を求めている人に届けるためにフォローなどのSNS的な要素を利用している。

Q. サービス開設〜ユーザーが集まってサービスが回り出すまでの間、どうやってユーザーを集め根付かせたか?

Stack Overflow(ジョエルさん)

Stack Overflowを開設したのは2008年だが、その時には2000年から個人でやっていたブログが一日に3万ビューほどあるぐらいに読者がとても多かった。
なので2008年のStack Overflow開設時には当日だけで3万人の利用者が集まり、1週間で9万人〜12万人の利用者に達した。

Qiita(海野さん)

自分の周りの技術者が使ってくれたのと、はてなブックマークTwitterなどで広まっていった。
ある程度記事が集まると徐々にGoogle検索でも引っかかるようになってきて、認知度が上がっていった。

Q. 自分のサービスに対して何か印象的なエピソードはありますか?

Stack Overflow(ジョエルさん)

Stack Overflowを公開したすぐあとに、文中のURLをリンクにする改善をしようとしたら正規表現でのマッチングがうまくいかず、Stack Overflowに自分で質問を投稿してみた。
答えを得るまでには時間がかかるだろうと思ったら、同じ質問が既にあるよとサジェストされた上、そこに適切な答えも投稿されていて、公開当初からサービスが有用に機能していることに感動した。

Qiita(海野さん)

バグによってQiitaのサーバーを落としてしまったとき、解決策を検索したら検索結果一覧にQiitaの記事が見つかったので見ようとしたらサーバーが落ちていて見られなかった(会場笑)
Googleのキャッシュで見ることができ、解決できた。

Q. Down voteの機能について

Stack Overflow(ジョエルさん)

Stack Overflowが大切にしているのは「真実」なので、そのためにDown voteは必要。
ただそれによってユーザーが傷つくこともあるので、気持ちは大切にしてほしい

Qiita(海野さん)

(※QiitaにはDown voteの機能がない)
善意で投稿された記事に対してネガティブなリアクションをさせる機能はとてもセンシティブな問題だと考えている。
かわりに編集リクエストの機能でコンテンツの良さを保とうとしている。ただ、(Down voteのような機能も)検討はしている。

Q. 類似サービスと比較しての強みはどこだと思いますか?

Stack Overflow(ジョエルさん)

ユーザー数。Stack Overflowに投稿するのが一番多くのユーザーに見られ、一番多くの回答がつく。

Qiita(海野さん)

ジョエルさんの回答と同じ。
Qiitaでは記事投稿のためのデスクトップアプリの提供やAPIの公開など、記事を共有してもらう施策に取り組んでいる。

Q. サービスに対するユーザーからのフィードバックをどう受け止めていますか?

Stack Overflow(ジョエルさん)

すべてのフィードバックに感謝するが、すべてのフィードバックを採用するわけではない。
すべての意見に共感して取り入れてしまえば、インターネットはトイレに落ちた猫の写真だらけになる(←米国ではこの写真が人気?)

Qiita(海野さん)

毎月ユーザーミートアップを開催するなど、ユーザーの意見を吸い上げられる取り組みを行なっている。
ただ、たとえばユーザーから「こういう機能がほしい」というフィードバックがあったときは、「その機能を実装すべきか?」よりも「その機能によって、ユーザーはどんな問題を解決したいのか?」を考え、「その問題に対する最適解は何か?」という視点で考えなおしている


以上です。

個人的にはStack Overflowがここまでコンセプトを尖らせ、「厳しさ」を意識して作られたサービスだとは知らなかったので衝撃でした。
そこまでしてはじめて、純度の高いあの価値ができあがるんですね。
ジョエルさんのセッションの中で語られていた、Stack Overflowが掲げるこのポリシーにしびれました。

他のセッションも面白かったです。長くなってしまうので資料へリンクだけさせていただきます。

その他のセッションのスライド

ビルトイン・セキュリティのススメ Dev Days 2015 Tokyo - Riotaro OKADA by @okdt
プロダクトのセキュリティについてや、必要なセキュリティをレベル分けしたOWASP ASVSという指標について。

とある業務オペレーション自動化の話 // Speaker Deck by @onigra_
RubyRailsで業務を自動化した具体的なノウハウのお話。

1 Year Retrospective: how to increase developer productivity // Speaker Deck by @kenchan
チームビルディングやプロジェクトマネジメントについてのお話。

3D Printer as a welfare program - Google スライド by @technohippy
3Dプリンタの種類や、3Dプリンタが会社にあることで得られる恩恵などw

UX専門家から見た「Running Lean」の改善ポイント 〜「Lean Customer Development」と読み比べ〜:201… by @storywriter
「実践リーンスタートアップ」と「リーン顧客開発」の差分、主にユーザーヒアリングの具体的なポイントについて。

エンジニアのためのSketch3入門 // Speaker Deck by @androhi
Sketch3の紹介と実際にZaimのロゴをSketchで作る様子のデモ。

エンジニアにとって欠かせないインフラとなっているStack Overflow
↑こちら、スライド公開されていましたら教えていただければと思います><
Stack Overflowの統計・研究についてのお話で、興味深いグラフなどとても面白かったです。

Meteorでつくる3分間プロトタイピング // Speaker Deck by @besutome
Meteorについて。実際に3分でサイトをデプロイするデモでした。速い・・・

リアルタイムに映像を繋いで広げるデモ(スライドなし)


CoffeeScriptでパケットアナライザーを作る
↑こちら、スライド公開されていましたら教えていただければと思います><
CoffeeScriptとElectronでリアルタイムにパケットを表示してました。かっこよかった。

[Stack Overflow Dev Days 2015]Android 6.0 Marshmallow App Permissions… by @korodroid
Android6.0から変わったパーミッションの仕様について。

Zaim 500万ユーザに向けて by @watura
容量が膨れ上がってしまったデータベースをシャーディング(分割)したときのエピソードとノウハウ。


こんな感じでした!
ツイートのまとめはこちら。 Stack Overflow DevDays - Togetterまとめ

最初に募集ページのタイムテーブルを見た時は、やたらいろんな話題のセッションが散らばってるなーと思ったのですが、実際に聞いてみるとどれも質の良いお話でとても楽しかったです。(途中で抜けて会社戻ろうかと思ってたけど、結局最後までいてしまった)

あとお弁当とか

無限コーヒー・お菓子とか

参加記念のTシャツとか

この辺りもとても充実していて、参加無料なのに大丈夫なのかな・・・?って思いつつ、かなりエンジョイしてしまいました。

Stack Overflowのみなさま、素敵なイベントをありがとうございました!!
参加したかった日本のエンジニアがまだまだいたと思うので、次回開催も楽しみにしています><

それと、業務扱いで勉強会に参加させてくれた会社にも感謝です( ´ ▽ ` ) ありがとうございました!

転職報告と近況もろもろ

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

転職してました

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

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

続きを読む