3月のてげWebは「チェロを弾く私にインスピレーションを与えてくれた母 」でスタート!ted.com/talks/paul_ruc… #tegeweb
2019-04-01 11:00:07チェロを弾いてる人はお母さんは音楽教育を受けたことのある人だけど、当人はレッスンを1度も受けたことがない。チェロを弾いたり、叩いたり、弦に棒を挟んでビヨーンと鳴らしたものをサンプリング&ループして自由な音楽を作りをしてる。かなり面白い #tegeweb
2019-04-01 11:04:42動画のあとは森からWebデザインがめちゃはかどる(かもしれない)CSS Gridのお話。なぜかCODEPENが使えないハプニングあり。 #tegeweb
2019-04-01 11:05:32CSS Gridの勉強には「CSSグリッドで作るHTML5&CSS3レッスンブック」 amazon.co.jp/dp/4802611897 がすごくよかったよ〜 #tegeweb
2019-04-01 11:08:49CSS Gridはマス目の定義をしておいて、マスに要素を当てはめていく。あらかじめどんなマス目の定義をするかがとても大事。 #tegeweb
2019-04-01 11:11:44CSS 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本を見ながら作ったページ。body要素にCSS gridの指定あり。 pensive-hodgkin-a8734a.netlify.com #tegeweb
2019-04-01 11:17:20CSS Gridは display: grid; を指定した要素がコンテナ、その子要素がアイテムとなる。アイテムは自分で何も指定しなければコンテナのマス目に順番にレイアウトされる。 #tegeweb
2019-04-01 11:20:26CSS Gridのアイテムはマス目どこに入るかを指定できる。具体的にはマス目の線のどこからどこまで、という指定をする。grid-columnは横方向、grid-rowは縦方向の位置を指定する。grid-column: 2 / -2; は左端から2つめの線と右端から2つめの線で囲われるエリアになる。 #tegeweb
2019-04-01 11:25:40grid-column, grid-rowで-2などの右端からの指定を使うメリットはSP版はグリッドが少なく、PC版ではグリッドが増える様になったときでも、両端のグリッドを変更せずに指定できること。 #tegeweb
2019-04-01 11:28:25CSS Gridで作ったマス目はChromeだと開発ツールのElementタブでdisplay: grid;を指定した要素にマウスオーバーすると表示される。 #tegeweb
2019-04-01 11:30:20マス目とマス目の間の余白をgap, row-gap, column-gapで指定できる。gapは縦横の余白を一括指定。縦方向のみはrow-gap、横方向のみはcolumn-gapで指定。grid-gap, grid-ow-gap, grid-column-gapという旧名もあり、しばらくは併記するのがよいようす。 #tegeweb
2019-04-02 14:32:46IE11は古いバージョンのCSS Gridが実装されているため、別途記述が必要。去年AutoprefixerにCSS Gridの古い記述を追加する機能が入った。npmjs.com/package/autopr… #tegeweb
2019-04-02 14:36:02AutoprefixerでCSS Gridの古い記述を追加する機能はデフォルトではoff状態なのでオプション指定に grid: "autoplace" を入れるか、CSSファイルに /* autoprefixer grid: autoplace */ を入れる #tegeweb
2019-04-02 14:37:45気楽にコードを試すサービスのCODEPENでAutoprefixerを使ってCSS Gridの機能をonにするにはCSSに /* autoprefixer grid: on */ を入れる #tegeweb
2019-04-02 14:43:24CSS Gridを使ったレイアウトは要素ごとのレイアウトが独立するので、デザイン作業が楽になるはず。バグはあるようなので表示チェックはしっかりするのが吉。 #tegeweb
2019-04-02 14:50:47これまでは12カラムのグリッドレイアウトをfloatやflexboxを使ったフレームワーク(Bootstrapとか)で実装していたのがCSS Gridだと使わなくて済む。これまでのようにHTMLにクラスを書いてレイアウトするなら自分でクラス定義しちゃえばいい。 #tegeweb
2019-04-02 16:29:27obniz に ToFセンサ( VL53L1X レーザー距離測定 ) と カメラ ( ArduCAMMini )を繋ぐ [距離センサ] on @Qiita qiita.com/t_furu/items/3…
2019-03-28 23:02:52古川さんからIoTが簡単にできちゃう「obniz」を使った距離センサー話。資料はQiitaで。 qiita.com/t_furu/items/3… #tegeweb
2019-04-02 16:31:59距離測定センサーはaliexpressで購入できるものがかなり便利なんだそうです。ja.aliexpress.com/item/GY-53-L1X… #tegeweb
2019-04-02 16:33:11カメラはobniz.jsに標準で使えるようになっているものを使います。switch-science.com/catalog/3780/ #tegeweb
2019-04-02 16:37:31電源はobnizの端子からだと動作が不安定になる可能性があるためブレッドボード用電源ボードを別途用意。switch-science.com/catalog/2243/ #tegeweb
2019-04-02 16:39:37距離を測定して、1mより近づいたら画像をブラウザに表示するプログラムをobnizのプログラミング環境で実装していきます。 #tegeweb
2019-04-02 16:42:22