2019年3月のてげWebまとめ

鹿児島市で開催しているてげてげなWebのなんでも勉強会「てげWeb」の2019年3月開催分まとめ
0
森 史憲🍛🍻🍫 / コーディングデザイン @mr_moo555

3月のてげWebは「チェロを弾く私にインスピレーションを与えてくれた母 」でスタート!ted.com/talks/paul_ruc… #tegeweb

2019-04-01 11:00:07
森 史憲🍛🍻🍫 / コーディングデザイン @mr_moo555

チェロを弾いてる人はお母さんは音楽教育を受けたことのある人だけど、当人はレッスンを1度も受けたことがない。チェロを弾いたり、叩いたり、弦に棒を挟んでビヨーンと鳴らしたものをサンプリング&ループして自由な音楽を作りをしてる。かなり面白い #tegeweb

2019-04-01 11:04:42
森 史憲🍛🍻🍫 / コーディングデザイン @mr_moo555

動画のあとは森からWebデザインがめちゃはかどる(かもしれない)CSS Gridのお話。なぜかCODEPENが使えないハプニングあり。 #tegeweb

2019-04-01 11:05:32
森 史憲🍛🍻🍫 / コーディングデザイン @mr_moo555

CSS Gridの勉強には「CSSグリッドで作るHTML5&CSS3レッスンブックamazon.co.jp/dp/4802611897 がすごくよかったよ〜 #tegeweb

2019-04-01 11:08:49
森 史憲🍛🍻🍫 / コーディングデザイン @mr_moo555

CSS Gridはマス目の定義をしておいて、マスに要素を当てはめていく。あらかじめどんなマス目の定義をするかがとても大事。 #tegeweb

2019-04-01 11:11:44
森 史憲🍛🍻🍫 / コーディングデザイン @mr_moo555

CSS Gridはマス目の定義は横方向はgrid-template-columns、縦方向はgrid-template-rowsで行う。grid-template-columns: 20px 1fr 20px; というふうに値を半角スペースで区切って指定。「fr」は余ったエリアを振り分ける比率を示す単位。1fr 2frだったら1/3, 2/3に分ける #tegeweb

2019-04-01 11:15:36
森 史憲🍛🍻🍫 / コーディングデザイン @mr_moo555

CSS Gridは display: grid; を指定した要素がコンテナ、その子要素がアイテムとなる。アイテムは自分で何も指定しなければコンテナのマス目に順番にレイアウトされる。 #tegeweb

2019-04-01 11:20:26
森 史憲🍛🍻🍫 / コーディングデザイン @mr_moo555

CSS Gridのアイテムはマス目どこに入るかを指定できる。具体的にはマス目の線のどこからどこまで、という指定をする。grid-columnは横方向、grid-rowは縦方向の位置を指定する。grid-column: 2 / -2; は左端から2つめの線と右端から2つめの線で囲われるエリアになる。 #tegeweb

2019-04-01 11:25:40
森 史憲🍛🍻🍫 / コーディングデザイン @mr_moo555

grid-column, grid-rowで-2などの右端からの指定を使うメリットはSP版はグリッドが少なく、PC版ではグリッドが増える様になったときでも、両端のグリッドを変更せずに指定できること。 #tegeweb

2019-04-01 11:28:25
森 史憲🍛🍻🍫 / コーディングデザイン @mr_moo555

CSS Gridで作ったマス目はChromeだと開発ツールのElementタブでdisplay: grid;を指定した要素にマウスオーバーすると表示される。 #tegeweb

2019-04-01 11:30:20
森 史憲🍛🍻🍫 / コーディングデザイン @mr_moo555

マス目とマス目の間の余白をgap, row-gap, column-gapで指定できる。gapは縦横の余白を一括指定。縦方向のみはrow-gap、横方向のみはcolumn-gapで指定。grid-gap, grid-ow-gap, grid-column-gapという旧名もあり、しばらくは併記するのがよいようす。 #tegeweb

2019-04-02 14:32:46
森 史憲🍛🍻🍫 / コーディングデザイン @mr_moo555

IE11は古いバージョンのCSS Gridが実装されているため、別途記述が必要。去年AutoprefixerにCSS Gridの古い記述を追加する機能が入った。npmjs.com/package/autopr… #tegeweb

2019-04-02 14:36:02
森 史憲🍛🍻🍫 / コーディングデザイン @mr_moo555

AutoprefixerでCSS Gridの古い記述を追加する機能はデフォルトではoff状態なのでオプション指定に grid: "autoplace" を入れるか、CSSファイルに /* autoprefixer grid: autoplace */ を入れる #tegeweb

2019-04-02 14:37:45
森 史憲🍛🍻🍫 / コーディングデザイン @mr_moo555

気楽にコードを試すサービスのCODEPENでAutoprefixerを使ってCSS Gridの機能をonにするにはCSSに /* autoprefixer grid: on */ を入れる #tegeweb

2019-04-02 14:43:24
森 史憲🍛🍻🍫 / コーディングデザイン @mr_moo555

CSS Gridを使ったレイアウトは要素ごとのレイアウトが独立するので、デザイン作業が楽になるはず。バグはあるようなので表示チェックはしっかりするのが吉。 #tegeweb

2019-04-02 14:50:47
森 史憲🍛🍻🍫 / コーディングデザイン @mr_moo555

これまでは12カラムのグリッドレイアウトをfloatやflexboxを使ったフレームワーク(Bootstrapとか)で実装していたのがCSS Gridだと使わなくて済む。これまでのようにHTMLにクラスを書いてレイアウトするなら自分でクラス定義しちゃえばいい。 #tegeweb

2019-04-02 16:29:27
t_furu ♨ @t_furu

obniz に ToFセンサ( VL53L1X レーザー距離測定 ) と カメラ ( ArduCAMMini )を繋ぐ [距離センサ] on @Qiita qiita.com/t_furu/items/3…

2019-03-28 23:02:52
森 史憲🍛🍻🍫 / コーディングデザイン @mr_moo555

古川さんからIoTが簡単にできちゃう「obniz」を使った距離センサー話。資料はQiitaで。 qiita.com/t_furu/items/3… #tegeweb

2019-04-02 16:31:59
森 史憲🍛🍻🍫 / コーディングデザイン @mr_moo555

距離測定センサーはaliexpressで購入できるものがかなり便利なんだそうです。ja.aliexpress.com/item/GY-53-L1X… #tegeweb

2019-04-02 16:33:11
森 史憲🍛🍻🍫 / コーディングデザイン @mr_moo555

カメラはobniz.jsに標準で使えるようになっているものを使います。switch-science.com/catalog/3780/ #tegeweb

2019-04-02 16:37:31
森 史憲🍛🍻🍫 / コーディングデザイン @mr_moo555

電源はobnizの端子からだと動作が不安定になる可能性があるためブレッドボード用電源ボードを別途用意。switch-science.com/catalog/2243/ #tegeweb

2019-04-02 16:39:37
森 史憲🍛🍻🍫 / コーディングデザイン @mr_moo555

距離を測定して、1mより近づいたら画像をブラウザに表示するプログラムをobnizのプログラミング環境で実装していきます。 #tegeweb

2019-04-02 16:42:22