ようじょのおえかきちょう

ふぇぇ お医者さんにペン持ったらダメっていわれた〜〜

CSSフレンズ 第一回「CSS再入門」に参加しました #cssfriends

ブログ書く枠で参加したのでメモをブログで公開します。発表スライドがあがったら追加したりします。

cssfriends.connpass.com

参加者同士の交流を目的とした、初心者向けの勉強会です。

CSSフレンズは、職場でついつい確認しないまま仕事を進めてしまうCSSの基礎をおさらいしながら、同じレベルで学び合える友だちをつくる集まりです。

募集中は2回増席されるぐらい人気だったみたいです。すっごーい!

CSS再入門。CSSはなぜCSSなのか

榊原昌彦

Cascading とは

  • CSSがなかった時代はデザインを変えるために文章構造をいじったりしていた。
  • もし Cascading がなかったら、共通部分の使い回しができない
  • Cascading で優先順序付けができるようになったので、 .btn をベースに .btn.blue とかができるようになった
  • 詳しい Cascading の順序はここに書いてあるよ CSS Cascading and Inheritance Level 3

  1. 記述順
    • 後に書いたスタイルが前に書いたスタイルを上書きする
  2. 詳細度
    • id / class とか使うと優先順位が高くなるよ
    • 詳しくはここに Selectors Level 3
  3. !important
    • 強制的に詳細度を底上げしてくれる
    • 詳細度の管理ができなくなっていくので、使わないほうがいい。つらい。
  4. inline
    • <font> とか書いてた頃と一緒じゃねーか!

チームでCSSを書く時のより良い方法を探そう

  • 命名規則には気をつけよう!
  • 脱コピペ!
  • ファイルの分け方を考えよう!
  • …みたいな話を懇親会でやろう!

脱初心者!コピペに頼らないCSS入門

シマキョウスケ

脱初心者!コピペに頼らないCSS入門 | 第一回「CSS再入門」 | CSSフレンズ | シマキョウスケ

Emmetすっごーい!

  • bg と入力して Tab or Ctrl+E を押すと background と入力される
  • bgc (background-color) とか m:a (margin: auto) とかたくさんある
  • Emmet Cheat Sheet を見よう

CSSアニメーション

ちげ

docs.com

CSSでアニメーションをやる

  • アニメーションとは時間軸のある変化。CSSの記述に時間軸が加わる
  • A→B
    • よく疑似要素を使ったりする
      • :hover : ボタンにカーソル載せたら色変わるとか
    • transition を使うよ
  • A←→B
    • keyframesをつかう

映像について

映像の原則 改訂版 (キネマ旬報ムック)

映像の原則 改訂版 (キネマ旬報ムック)

  • 「映像の原則」
    • 映像作品における視覚的にわかりやすく納得のいくものを制作するための原則的な考え方
  • 見ている人を時間で縛ってしまう
  • 時間と距離に気をつけよう!
    • 遅すぎると見ている人の時間を奪ったり、速すぎるとわからなかったりする
    • 動きがあると、動きに無駄があることに気づきやすい
  • 止め絵の目安は3秒
    • ロード時間はこれを超えると厳しい
    • スクロールを始めるまでの時間も3秒
  • 上手・下手
    • 右はポジティブで大きい、目立つイメージ
    • 左はネガティブで小さい、弱いイメージ
  • 動き
    • 左→右は勢いがある印象
    • 右→左は落ち着いた印象

CSSのidとclassの使い分け

Daisuke KONISHI

speakerdeck.com

結論

  • 基本classだけでOK
    • 使い回しがしやすい
    • id はページで1つしか使えない

わかりやすい名前をつけよう

  • .box1.box2 が無くなったら死ぬで
  • .topContentHeaderLink → ちょっと長すぎ。 .link-more とか
  • .header h1 より .header .title

セレクタを少なくするには

みんなとケンカしないCSS

GOUTEN

あなたの身の回りのCSSトラブル

  • !import 地獄
  • 思ったように動かない
  • ページまたぎで同じスタイルがあるのに固有のCSSファイルに書いてる
  • ネスト深すぎ(階層が深い)
  • デザインリニューアルで変更箇所多すぎて死ぬ

悟りをひらこう

  • けんかさせないCSSを書こう
  • CSSは設計8割、実装2割
  • 役割を持つCSSを書く
  • やさしいせかい
  • つづきは涅槃(こんしんかい)へ


かんそう

書きはじめの頃によく思う「CSSの書きかたは分かった! でもどんなところに気をつけて書いたらいいの?」に対するヒントがいっぱいありました。CSSの歴史から設計について、それから便利ツールの紹介まで幅広いトピックがあり、自分も書きはじめの頃にこんな話を聞きたかったなぁと思っています。

cssfriends.connpass.com

CSSつらいってよく聞くんですが、今度は「つらくならないCSS」をテーマにお話が聞けるみたいです。

マネーフォワードさんでお世話になりました

この春休み3月いっぱい、田町にある マネーフォワード さんでお世話になりました。

マネーフォワードさんについて

オレンジ : toC

moneyforward.com

とか

青 : toB

biz.moneyforward.com

とか(青は 6 種類ぐらいある)を運営しているところです。

社員さんの数は数えられなかったんですが 200 人は超えてると聞いた気がします、今まででお世話になったところではダントツに多いです。私の居た 1 ヶ月の間にもどんどん人が増えていました。

高専OBの方もちらほらいて、Slackに #kosen チャンネルが立っていました。学閥だ…

どんなことをしたの

今までだいたいバックエンドで Rails を書くインターンをしていて、もうちょっとフロント側もやってみたいな〜と思ったので、フロント側をやっていました。 React でした。

biz.moneyforward.com

biz.moneyforward.com

最初にテストを書きたいと希望を出していたのでテストをよく書きました。青いシリーズの「MFクラウド 経費」と「MFクラウド ファイナンス」を触っていました。前者ではUIに関する機能追加をしたりテストを書いたり、後者でもテストを書いてカバレッジをちょっとだけ上げました。

勉強したこと

  • 普段ひとりで書いていると設計に 自信がないまま/適当なまま 突き進んでしまって後でつらみを見たりすることが(私は)よくあるのですが、業務だとそんな怖いことできないのでこまめに聞きながら進めることができた
  • テスト書くのに慣れてきた
  • テストだいじ
  • 人数が増えて物理的な距離が離れると軽いやりとりに抵抗が生まれやすい(気がする)
    • オフィスの端と端とか、別の階とか、あるいは別の建物とか
    • 「わざわざ話すことでもないかな?」とか思っちゃう(かもしれない)
  • 慣れない、会計用語
  • デザイナーさんがフロントのコードを触れたらすごい助かるけど実際そう簡単にはいかない話とか

終わってみて

フロント中心のインターンは初めてだったのもあって全体的に動きが遅かった気がします…後から振り返るともっとスピード感持ってできたんじゃないのかなーとか、変なところで悩みすぎてたなーとか。後半は慣れてきてスピード上げてできたので良かったです。

あとこれはインターン期間が 1 ヶ月しかないのが + インターンという立場が原因の一つなんですが、どんなユーザーさんがどんな風にこの機能を使っているかとかサービスのことをもっと詳しく知ったりできたら「コードを書いている」から「サービスを作っている」って気持ちになりやすいのかなぁ、と(日本語がない)(その点デザイナーさんは強そう)(期間短いしある程度仕方ない感じする)

作法を分かってなくて滅茶苦茶書いたりしましたが丁寧に教えてくださった社員のみなさん、ありがとうございました :pray:

これから

8月半ばから9月末まで夏休みなのですが、ひとつ気になっている企業さんがあるのでその夏インターンの様子を窺いながら、それを差し引いた残りの夏休みをどう過ごそうか考えています。このままいくとあと 2 年で高専を卒業してしまうので、それまでにどこかでデザイナーインターンをしてみたいなとぼんやり思っています。

スキルを落ち着けろという話もあって、 Rails も React も趣味レベルでなんとか書けても胸を張って書けるとは言い切れないところがあるので、もうちょっと踏ん張るという選択肢もあります。

春休みの間に 1 回インタビューを受けたのですが(そのうち記事が出ると思う)、将来何がやりたいのという問いにやっぱり「その時やりたいことができれば…いいかなぁ…」とぼんやりした答えしか出せませんでした。これが自分でも悔しかったので、ほんとにその時やりたいことができるだけの幅広い基礎力をまずつけるか、何かひとつ自信持ってできることをつくるか、どっちかやっていきます。

おまけ

recruit.moneyforward.com

採用ページめっちゃかっこよくないですか

休学の予定と春休みの予定

休学

トビタテ!留学JAPAN という文科省のプロジェクトの6期メンバーに採用されました。うちの学校からは初めてなんですよ。どやぁ。

www.tobitate.mext.go.jp

ただビザや受け入れ先候補企業さんの関係で本当に行けるかはちょっとまだ未定です。一次審査、二次審査の話は長くなるのでまとめて別の記事にします。

もし行けることになったら6月から翌年3月までアメリカにいる、ということで先に休学届を出してきました。後輩の皆さん再来年度からよろしくね。行けんかったら…どうするんやろなぁ。

春休み

電磁気という超絶苦手な科目も追試を回避し、このまま事故らなければ4年生に進級できます :tada:

3月末まで東京にいます。今日も米の上に魚が乗ってる神の食べ物を食べさせてもらいました。めっちゃうれしい。

さて今日から家計簿サービスやってはるオレンジの会社で、オレンジじゃない方のコードを書くインターンをさせてもらってます。マンスリーマンションを提供してもらってるのですが(手厚い)、調理器具とかは揃ってなかったです。お料理したいなぁ。お料理したいなぁ…

卵焼き器とかもらえるとめっちゃよろこびます。

https://www.amazon.co.jp/registry/wishlist/3KDNW63RQCCKNwww.amazon.co.jp

『東京防災』 #kosen14s 読書会2nd

kosen14s.github.io

kosen14s 読書会2nd 6日目です。今日は東京防災の話をします。

東京防災

東京防災

1 「東京防災」とは 東京の地域特性や都市構造、都民のライフスタイルなどを考慮し、災害に対する事前の備えや発災時の対処法など、今すぐ活用でき、いざというときにも役立つ情報を分かりやすくまとめた完全東京仕様の防災ブックです。

「東京防災」の作成について|東京都

災害が起きたらどう動きましょうねとか、普段からできる防災アクションとか、実際に起きたときの対応方法とか便利知識がまるっとまとめられた一冊の本です。なにがすごいって、避難地図とか公共連絡先まとめみたいなプリントは n 年ごとにポストに入ってたりするんですが、比べると圧倒的に情報量が多いし具体的なことがいっぱい書いてあって、それが PDF や電子書籍で公開(無料!)されてるんです。

f:id:yamasy1549:20161224221214p:plain ↑ プライバシーの確保は東日本大震災で改めて認識された。避難所でパーティションは必須

f:id:yamasy1549:20161224221325p:plain ↑ コンロの作り方まで書いてるの初めて見た

f:id:yamasy1549:20161224221814p:plain ↑ 子供は気づかないうちにストレスをためやすいのでこれは大事

f:id:yamasy1549:20161224222129p:plain ↑ 地味に役立つのでは

中身を見ると、コンテンツの並べ方や注意を引かせる工夫とかいっぱい詰まってるのでそういう勉強にもなります。1 周目は防災の勉強として(防災リテラシーという科目を取っていたので多少興味はあるのです)、2 周目はデザインの勉強として読みました。

f:id:yamasy1549:20161224223028p:plain ↑ ものすごいインパク

f:id:yamasy1549:20161224220826p:plainプログレスバーまでかっこいい

お役所からの保存版配布物ってわりと捨てられやすかったり読まれなかったりが多い印象ですが、一目で重要と分かって、長くてもざっと目を通しておきたくなるような(自分だけかも)工夫がある東京防災は良いなと思っています。大きくなったらそんなお仕事をしたいなー。

高専に入ったら職が見つかり彼女は出来ないけど背も3センチ伸びました。 | Kosen Advent Calendar 2016 6日目

タイトルは twitter bootstrap railsを使ったら職が見つかり彼女も出来て背も3センチ伸びました。 より

身長は3センチも伸びなかったのでちょっと詐欺しました。高専の利点を使い倒して優勝しよう?」といった内容を書こうと思います。

www.adventar.org

ちなみに、これは記事を書き始めたときの様子です。スッカスカやんけ!

f:id:yamasy1549:20161206213744p:plain


中学の頃ぼんやりと「ぱそこん使う仕事なら食いっぱぐれないよなー」と思って高専を選び、今は明石高専で電気情報工学科の3年生をやっております。

高専生のひと、かつて高専生だったひとは何かしら高専に魅力を感じて入学したことと思いますが、今日はその魅力をもっと活用し、いろんな場面でラクして過ごすことを考えてみます。

※おことわり 自分がよくお世話になってるIT系(主にWeb寄り)の目線で書いてるので、他分野はもしかしたら事情が違うかもしれません。

利点① なんかすごそうと思われやすい

中学卒業して5年間かけて専門科目を勉強するということで「若いし知識がある、つよそう」「中学から進路を考えていてすごい」と思われやすいし実際よく言われます(もし仮にあみだくじで高専を選んだとしても…)。大人のひとはやる気のある若者が大好きなのですぐに高専生のとりこになってくれます。

少しでも興味を持ってくれたようならチャンスです。こんな勉強をしてるんだよ、こんなことをしたいんだよ、といったことをどんどんお話して、今度は興味の対象を「高専生」から「目の前にいる高専生(自分)」に向けてもらいましょう。

利点② 元高専生はどこにでもいる

本当にどこにでもいます。「わたし高専生なんですよ」と言うと「ぼくのところにも元高専生いるよ!」と返ってきたり、運が良ければ「ぼく高専出身なんだ!」と仲良しになれたりします。偏った情報ですが私のよくお世話になってる世界では長野高専や岐阜高専あたりの出身者が多い気がします。なんでやろ。

もし元高専生に会えなくても大丈夫、時間に比例して元高専生は増えていくのでいつか必ずどこかで会えます。

利点③ 先輩の活躍の恩恵を受けられる

企業やコミュニティでは、高専出身でバリバリ活躍している人が結構います。まわりのひとに話を聞くと大体「高専生は優秀だね」と感想をくれるので、そんなときは先輩の活躍に感謝しましょう。心の中で思いっきりドヤ顔をしましょう( ・´ー・`)また、ドヤ顔させてもらった分がんばることを忘れないでおきます。


雑に利点を挙げてみました。

次はこれらを使い倒して優勝しようとする例です。自分の話になりますがすいません。

筋トレを惜しまない

そもそも力をつけましょうという話(自戒…)。最新情報を追ったりコード書いて試してみたりインプットを怠らず代謝を上げておきます。

勉強会とかイベントにめっちゃ参加する

インプットの一環としてもそうですが、ここですごいひとと実際にお話したり繋がれたりするのが強いです。

先に挙げたように元高専生はどこにでもいるので、特に私服で集まって懇親会でピザとビールが出るような勉強会だと規模にもよるけど2, 3人は必ずいます。高専生どうしは生まれつき謎の仲間意識を持っているので、出身校の話題で盛り上がったあとtwitterのIDを交換してしまえばもうぼっちではありません。

余裕があれば登壇してみるのも楽しいです。

さらりとインターン先を探していることを伝える

私はいろんな会社で渡り鳥的にちょこちょこ働かせてもらうのが趣味なので、ここで知り合った企業のひとにお願いしてインターン先を決めたりしています。フットワークの軽い企業さんなら「ぜひおいで!」「一回遊びに来てよ」と言ってもらえてその夜のうちにメッセージが飛んできて決まることもあります。

社内に元高専生がいると「ぜひおいで!」と言ってもらえる率が高い気がしています(ちゃんと計算したのではないけど、感覚的に)。

はたらく

私がこうしてたくさんのチャンスに恵まれているのは、かつて高専生だったひとたちの活躍のおかげでもあります。いっぱい勉強していっぱい実務でコードを書かせてもらうことで、感謝を表しているつもりです。

(繰り返す)

後輩たちにもこの恩恵を受けてほしいなと思っているので、いろんな勉強会に顔を出したり登壇したりコンテストで賞を取ったりして明石高専の名前を売るようにしています。後輩のためとか言いながら自分のためにもなっているのでついでに自分の名前も売って、それを利用してまた新たなインターン先を見つけたりします。


「顔パス」ならぬ「高専パス」の恩恵を受けられるのはとてもありがたいことです。せっかく有利な環境にいるのだから、あと2年間、使えるものは全部使っていきたいと思います。

ということで、やましーは春休み(3月〜4月)のインターン先を探しています。もしよければ実際に動いてるサービスのコードを書いて経験値荒稼ぎさせてください!