2018-01-29

Scriptタグのリソース読み込み順序についてのメモ

ちょっとトラブってしまったので、反省しつつ整理。

リンク先の画像がすごいわかりやすいので、これ見たら解決するけど。

パターン

<script>
<script defer>
<script async>
<script type="module">
<script type="module" async>

この5個がある。2018/01/29時点では module のサポート状況微妙だけど。

Can I use... Support tables for HTML5, CSS3, etc

Classic Scripts

module scriptsではない方を参照先ではこう読んでいたので倣っておく。

	fetch	evaluate
[default]	HTMLのパースをブロックしてFetchする	Fetch直後にJSの評価を開始する
async	HTMLのパースをブロックせずにパラレルでFetchする	Fetch完了直後にHTMLのパースをブロックしてJSの評価を開始する
defer	HTMLのパースをブロックせずにパラレルでFetchする	HTMLのパースが完了したらJSの評価を開始する

Module Scripts

	fetch	evaluate
[default]	HTMLのパースをブロックせずにパラレルでFetch、依存先もFetchする	HTMLのパースが完了したらJSの評価を開始する
async	HTMLのパースをブロックせずにパラレルでFetch、依存先もFetchする	依存先も含めたFetch完了直後に、HTMLのパースをブロックしてJSの評価を開始する

module scriptsにはdeferつけてもデフォルトのまま。と説明あるけど、要はClassic Scriptsでのdefer属性付きと似たような動作がデフォルトということのよう。

昔読んだWebの基礎についての本にも載ってたのかもしれないけど、当時はそれを理解できるベースがなかったんだろうなと思うと感慨深い。

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)

作者: 山本陽平
出版社/メーカー: 技術評論社
発売日: 2010/04/08
メディア: 単行本（ソフトカバー）
購入: 143人クリック: 4,320回
この商品を含むブログ (183件) を見る

「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか

作者: 小森裕介
出版社/メーカー: 技術評論社
発売日: 2010/04/10
メディア: 大型本
購入: 57人クリック: 1,242回
この商品を含むブログ (35件) を見る

2018-01-29

CSSのみでラジオボタン＋スライドバーなUIを作る

html css UI

作ったサンプル

はこちら。アニメーションとかはもっと調整できそうだけど… jQueryを利用してますが、選択中の値を表示するためだけに使ってます。

codepen.io

radios-to-slider: jquery plugin to create a slider using a list of radio buttons. 見た目はこちらを参考にしてます。

ポイント

ラジオボタンの選択

ボタン自体は非表示にしていて、Psuedo ElementでUIを作るありがちな手法。非表示に指定する時に display: none だとPsuedo Elementへのスタイルで打ち消せないので visibility: hidden を使うことを忘れずに。

スライドバー部分

デフォルトアクティブな色で、選択したラジオボタン以降を灰色にしてる。general sibling selectors使う都合。

.radio:checked ~ label
  background-color: gray

ところで ~ 使ったセレクタを general sibling selectors （一般兄弟セレクタ）と呼ぶの覚えにくい…

Adjacent sibling combinator - CSS | MDN

radial-gradientで枠付きの丸を描く

borderで十分だったことに後から気づいたけど、せっかく使い方覚えたので。

developer.mozilla.org

// メモ用に改行
background-image: radial-gradient(
  circle,              // 形と位置の指定 省略すると `ellipse`
  white 0.7rem, // 白で0.7remまで塗る
  black 0.7rem, // 0.7rem ~ 0.7rem で白->黒にグラデーション。要はグラデーションなし。
  black 1rem,     // 0.7rem ~ 1remは黒に塗る（省略可）
)

あとがき

最近CSSがちょっと楽しくなってきた。辛いことの方が多いけど。

もっとCSS力上げたいけど、やりたいことが先にある感じになってて、体系的に学習していきたさがある。

みんなどうやってCSS修行してんのかな。

CSS Secrets: Better Solutions to Everyday Web Design Problems

作者: Lea Verou,Eric A. Meyer
出版社/メーカー: Oreilly & Associates Inc
発売日: 2015/07/03
メディア: ペーパーバック
この商品を含むブログを見る

2018-01-15

RailsにWisper入れてみる

rails library architecture

Wisperとは

github.com

Ruby on Railsで Pub-Subパターンを使うためのライブラリ。ビジネスロジックを分離して Hexagonal Architecture を実現するためや、ActiveRecord のCallbackの代わりに使ったりする。

サンプル

使い方はGitHubに載ってるので十分だったので省略。気が向いたら追記するかも。

感想

巷で話題になるだけあって、コードがスッキリ書ける感じする。 .on { block } の記法だとJavaScriptのPromiseとにた感じがするのも良かった。 DDDとかCQSと組合わせるときに真価を発揮しそうだけど、部分的に使うだけで十分コードが整理される感じがして良かった。

背景

取り止めがなくなったので最後に…

仕事のRailsのコードベースが大きくなってるので、ツラみを解決したくて入れてみた。まず1つ目は、Model間にまたがった処理をしたいとき。どこにコードを書こうか迷うし、後から読み返すときにどこで変更があるのかわかりにくい。大体は関連の強い気がするModelに入り口となるメソッド作ってる。そして2つ目に、ログイン情報やリクエストの内容を処理に使うような場合。関心の分離的にはControllerに書くべきなのか？Controllerにコードたくさん書くのってイケてないのでは？とか思いつつ書いていた。こういう場合、サービスクラスを導入するというのもよくあるけれど、最近はCommandという単位にするのが流行ってる雰囲気を感じる。

qiita.com

リファクタしたい気持ちをもちつつ、Wisper使ってみた経験が欲しかったので、とりあえずライトにできる範囲で試してみた。

2018-01-15

MySQLでGROUP_CONCATの文字数が切れる時

mysql sql db

ちょっとしたデータ集計したり、テスト環境作ったりするときに使ったのでメモ。

SET SESSION group_concat_max_len = 1000000;

2016-05-08

SJCAM SJ4000wifi買ったのでドラレコ化するために設定する

sj4000 バイク

の続きで、SJCAM SJ4000 wifiの設定についてメモを残しとく。

本体の設定はわかってきたけど、さらにマウントとかのオプションも多いんだよなぁ。
いまいち使いみちの読み取れないものもあるし。
多いのも魅力だと思って買ったけど、痒いとこに手を届かすには別途部品がいるのかな。
この辺はそのうち別の記事に起こすことにして、本体の設定をしていこう。

「SJCAM正規品」　SJ4000　スポーツカメラ　WiFi搭載 30m防水　170度広角レンズ　1080P 液晶画面　HD動画対応ハルメット式　コンパクトカメラ（ブラック）

出版社/メーカー: SJCAM
メディア: エレクトロニクス
この商品を含むブログを見る

設定

バイクのドラレコに良さげな設定を目指す。
しばらくこの設定をベースに試行錯誤していこう。

2016-05-08

SJCAM SJ4000wifi買ったら設定の意味がわかりにくかった件

sj4000 バイク

目的

どこで初遭遇したかは忘れたけれど、SJCAM SJ4000はアクションカムだけどドラレコとしても使えると聞いて、欲しいと思っていた。
前々からバイクにドラレコ欲しいなと思ってたけれど、高かったり、個人輸入だったりで決め切れなかったところ、これなら試しに買ってもいい値段だし、wifiついてると面白そうだったのでついに購入。