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

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

性別のもやもや

リアルで初めて会う人に「ずっと男性だと思ってました!」とか、知ってる人でも「なんで一人称ぼくになったりするん?」とか、時々聞かれるのでいまの考えをメモ。

女の子が苦手だった

女の子のひとがいたらごめんなさい…今はわりとマシです。

幼稚園ぐらいからちょっと苦手だった。陰口や悪口をよく言う人がダメなんだけど、そういう人がたまたま女の子に多かったので、自然と女の子を避けるようになった。

小学生ぐらいになると知能がついてくるのでもっとダメになって、比較的さばさばした女の子と仲良くするか、男の子とつるんでいた。 ほんとうは性別なんて関係ないんだけど当時は「女の子は陰口や悪口をよく言うからダメ」と信じ込んでいて、坊主憎けりゃ袈裟まで憎いでピンク色とかひらひらした服とかを嫌っていた。同時になんで自分は女に生まれたんだろう、ともやもやしていた。

仲良くなるには流される

中学に上がってからは基本的に男の子とつるんでいた。髪の毛長いし見た目が女っぽいので、なんで女の子と群れないのかって最初はびっくりされたけど、口調や態度を彼らに合わせていたら自然と仲良くなれた(ほんまか)。具体的には、声を低くして動作を少し雑にして猫背になって一人称をおれやぼくにしていた。

その延長でいまも一人称は基本的にぼく、「なんでぼくなん?」ってざわざわされそうなときはわたし、と使い分けることにしている。

されたことのある質問

ところで女の子なんですか、男の子なんですか

身体は女っぽいけどこころがそれを許したくないタイプです

自分が女だと思いたくないんですが、女の裏は男ではないので男でもありません。聞かれた時はどっちかわかんないなぁと答えています

見た目を男っぽくしようとは思わなかったんですか

身長が足りないからなにやっても無駄と思って諦めた

トイレ入るとき迷うことはあるの

ゆっくり考えてると洪水警報なので思考停止で女子トイレ

他、アンケートとかで性別が 2 択のときは悩み始めると終わらないので思考停止で女

好きになるのは女の子? 男の子?

どっちも

生きづらくない?

「エェッ! オンナノコジャナイノ!? ナンデ!?」「ボクっ子なん…」とか言われたときは生きづらいけど基本的に生きづらくはない、生きづらくならないように一人称は使い分けてる


自分は女の子じゃないなぁと思った時に行き先が男の子しかなかったので、今のぼくみたいなどっちかわかんないひとがもうちょっと増えたらラクかなぁと思っています。

あと、性別関係なく生きたいなぁと思ってる自分が性別に縛られた考えをしている気がしてそれももやもやします。

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プログレスバーまでかっこいい

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