position: absolute; + display: table;の謎を解きたい
10/23 追記: absolute + tableの謎が解けた!!!! - エンジニアをリングする
CSSでちょっと前から悩んでいる挙動があります。
- heightプロパティを%指定するときには、包含ブロックにheightの値が指定されている必要がある
- しかし、絶対配置(positionがabsoluteかfixed)されている要素は包含ブロックにheightの値がなくてもheightを%指定できる。
- 該当の仕様: Visual formatting model details (緑色のNoteのところ)
- 仕様日本語:視覚整形モデル詳細
ある要素の高さが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効いてないよ!!なんで!!!
※ この状態で.wrapper
にheight: 200px;
を指定すると.inner
のheightもちゃんと効きます。
この挙動の元となる仕様はどこで定義されてるんでしょうか・・・?
どなたかご存知でしたら教えてください><
今日CSS仕様書もくもく会に参加してきたので id:nxdebiru さんに質問してみたのですが、検証しているうちにさらに恐ろしいことが・・・
とりあえず恐ろしい挙動を共有しておきますね https://t.co/EH1ZoTYR7w
— debiru (@debiru) October 21, 2015
謎い!!!!!!!
ちなみにCSS仕様書もくもく会は毎月第三週開催、場所はGoodpatchですので是非!
そして前述の謎挙動(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
- 良いコミュニティを維持するためにルールは必要だが、このようにルールのせいで人が驚いたり納得できないことも起きうる
- ではStack Overflowが大切にしているルール・思想は何か?
- 目指しているのは「会話より結果」
- Stack Overflowの代表的な質問は、一人が質問し、数人が答え、数百〜数千人が閲覧する
- ポリシーは "We Hate Fun"
- Stack Overflowはソーシャルコミュニティではなく、掲示板でもなく、談笑する場所でもなく、プログラマーのリソースとなるべき場所である
- "厳しさ"やドライな雰囲気が感じられるとしたら狙い通り
- 目指しているのは「会話より結果」
- 良いコミュニティを維持するためには良くないものを取り除く必要がある
- しかし、殺伐としすぎていると、将来コミュニティに貢献してくれそうな有望な人が一度の失敗でコミュニティから離れてしまうことにも繋がる
- その対策のひとつとして、良くない質問につけるタグの表現を変更した
Closed
→On Hold
(終了
→編集待ち
)Too localized
→Off topic
(局所的すぎる質問
→トピック外の質問
)Not constructive
→Primary opinion-based
(建設的でない質問
→主観的な意見の質問
)Not a real question
→Unclear 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(海野さん)
毎月ユーザーミートアップを開催するなど、ユーザーの意見を吸い上げられる取り組みを行なっている。
ただ、たとえばユーザーから「こういう機能がほしい」というフィードバックがあったときは、「その機能を実装すべきか?」よりも「その機能によって、ユーザーはどんな問題を解決したいのか?」を考え、「その問題に対する最適解は何か?」という視点で考えなおしている
以上です。
日米2大巨頭 #devdays pic.twitter.com/5Sggo8moEF
— sho otani (@ozu_syo) 2015, 10月 9
個人的にはStack Overflowがここまでコンセプトを尖らせ、「厳しさ」を意識して作られたサービスだとは知らなかったので衝撃でした。
そこまでしてはじめて、純度の高いあの価値ができあがるんですね。
ジョエルさんのセッションの中で語られていた、Stack Overflowが掲げるこのポリシーにしびれました。
"We Hate Fun"
stackoverflowはソーシャルコミュニティではなく、掲示板でもなく、談笑する場所でもなく、プログラマーのリソースとなるべき場所である
— よしこ (@yoshiko_pg) 2015, 10月 9
他のセッションも面白かったです。長くなってしまうので資料へリンクだけさせていただきます。
その他のセッションのスライド
ビルトイン・セキュリティのススメ Dev Days 2015 Tokyo - Riotaro OKADA by @okdt
プロダクトのセキュリティについてや、必要なセキュリティをレベル分けしたOWASP ASVSという指標について。
とある業務オペレーション自動化の話 // Speaker Deck by @onigra_
RubyとRailsで業務を自動化した具体的なノウハウのお話。
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の統計・研究についてのお話で、興味深いグラフなどとても面白かったです。
stackoverflowに駆逐されゆくR言語のメーリングリスト
このグラフの上がり方すごいな…(オレンジがstackoverflow) #devdays pic.twitter.com/wAVZgbndh3
— よしこ (@yoshiko_pg) 2015, 10月 9
Meteorでつくる3分間プロトタイピング // Speaker Deck by @besutome
Meteorについて。実際に3分でサイトをデプロイするデモでした。速い・・・
リアルタイムに映像を繋いで広げるデモ(スライドなし)
「他の方がMacBookとか使われてる中ちょっと異質ですが…」 #devdays pic.twitter.com/KJCKsQeEUb
— 唸る人 (@unarist) 2015, 10月 9
3台のカメラの映像をリアルタイムに1つに合成してパノラマみたいにしてる!すごい! #devdays
— よしこ (@yoshiko_pg) 2015, 10月 9
CoffeeScriptでパケットアナライザーを作る
↑こちら、スライド公開されていましたら教えていただければと思います><
CoffeeScriptとElectronでリアルタイムにパケットを表示してました。かっこよかった。
デモ
パケットマニア垂涎な感じですね #devdays pic.twitter.com/hR9YDmyemd
— よしこ (@yoshiko_pg) 2015, 10月 9
[Stack Overflow Dev Days 2015]Android 6.0 Marshmallow App Permissions… by @korodroid
Android6.0から変わったパーミッションの仕様について。
Zaim 500万ユーザに向けて by @watura
容量が膨れ上がってしまったデータベースをシャーディング(分割)したときのエピソードとノウハウ。
こんな感じでした!
ツイートのまとめはこちら。 Stack Overflow DevDays - Togetterまとめ
最初に募集ページのタイムテーブルを見た時は、やたらいろんな話題のセッションが散らばってるなーと思ったのですが、実際に聞いてみるとどれも質の良いお話でとても楽しかったです。(途中で抜けて会社戻ろうかと思ってたけど、結局最後までいてしまった)
あとお弁当とか
おべんとうの豪華さよ pic.twitter.com/chea1wZd4t
— よしこ (@yoshiko_pg) 2015, 10月 9
無限コーヒー・お菓子とか
食べ放題。カップケーキがすごいうまい #devdays pic.twitter.com/WdqQxmKbKB
— ANDO Yasushi (@technohippy) 2015, 10月 9
参加記念のTシャツとか
このTシャツ、“わかっている生地”だ、最高 pic.twitter.com/OAU6PqpifY
— よしこ (@yoshiko_pg) 2015, 10月 9
この辺りもとても充実していて、参加無料なのに大丈夫なのかな・・・?って思いつつ、かなりエンジョイしてしまいました。
Stack Overflowのみなさま、素敵なイベントをありがとうございました!!
参加したかった日本のエンジニアがまだまだいたと思うので、次回開催も楽しみにしています><
それと、業務扱いで勉強会に参加させてくれた会社にも感謝です( ´ ▽ ` ) ありがとうございました!
Goodpatchは公式的に業務時間中の勉強会参加がOKなので堂々と朝からstackoverflowのイベントに来れるってわけよ(他にも4人ぐらいきてる)
https://t.co/yHvb8FvUBy
— よしこ (@yoshiko_pg) 2015, 10月 9
転職報告と近況もろもろ
めーっちゃ久しぶりにブログです。
最近いろんなことがあってわたわたしていたのですが、まとまった報告ってどこでもしていなかったので、近況でも書いてみようかと。
転職してました
6/1からGoodpatchで働いています。自社サービスのプロトタイピングツールProttのフロントエンドを担当しています。
Prottはサーバー側がRuby(Rails)、フロントがAngularでjade+sass+coffeeという感じの構成で、簡潔に書けてイイ感じ。
今までは受託が多かったので自社サービスに関わるのは初めてなのですが、とてもたのしいです。
きちんとデザインされたプロダクトをさわるとテンション上がりますよね。
GoodpatchはUIデザインの会社と認知されてますが実はデザイナーよりエンジニアのほうが人数が多くて、社内でエンジニアリングもがっつりやっています。
ただ共通点はエンジニアだろーがPMだろーがみんなデザインが好きってことで、カッコいいものが好きです。そしてわたしもカッコいいものが好き。
だから作るプロダクトのデザインに妥協しない環境にいられることはとても満足感があります。
そのへんもGoodpatchを選んだ理由のひとつです。
あとチームの雰囲気もすごくよかったり就業環境も恵まれているのですが、そのへんは後述の記事で。
CodeIQに載りました
先日インタビューが載りました。(ありがとうございます!)
CodeIQ MAGAZINEさんで取り上げていただきました!うれしはずかし。
Goodpatchのギークガール☆趣味はプログラミング!だから、仕事外でもアウトプットしていたい|CodeIQ MAGAZINE https://t.co/DAdOG7YJPM @codeiqさんから
— よしこ (@yoshiko_pg) 2015, 8月 26
今までの経歴と、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さんと一緒に進めています!
9/8(火) 19時からですー。
今週水曜日に公開したのですが、17分で180人埋まりました><
みんなReact好きね。。
わたしはイベントの企画初めてなんですが、いきなりおっきいイベントなのでわくわくハラハラなかんじです。
募集開始した瞬間に待機勢が一斉にアクセスしてdotsが激重になったときはびびりましたね
当日うまくいきますようにー!
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
こんなとこですかねー・・・
とにかく今年は執筆でいっぱいいっぱいで、全然なにも作れてないので最近欲求不満気味です。。
原稿まわりが落ち着いたらなんかつくりたい!!
と、いうわけで近況でした!
あとおまけ
ハム速載りました
オフィスの空気清浄機あけたら衝撃の事実 pic.twitter.com/XQKFoYxEEk
— よしこ (@yoshiko_pg) 2015, 8月 21
↓
\(^o^)/
ES6入門のセッションした話&Talkie.js超オススメ
今日開催された春のJavaScript祭でES6入門の話をしてきました!
スライド資料は以下です。
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以外のタグはエスケープするにしても、たかが改行表示するだけでそこまでするのはやーーだーー。。
とまあそんな感じだったんですが、この間すごいことに気付いてしまいました。
続きを読む