CSSのみでスクロールできそうな雰囲気を出す

HTMLでElement内でスクロールさせるUIが必要になったけれど、Macスマホだとスクロールバーは消えるスクロールできるの気づきにくい。という問題があったので、CSSのみでできる方法を考えていた。

解決方法そのものが出てきてしまったけど、すぐに理解するにはCSS力が足りなかったので、分解しつつ理解したメモです。

元ネタ

http://lea.verou.me/2012/04/background-attachment-local/

元ネタの人が本出してて評判良いので読んでみたい。翻訳版ないけど…

CSS Secrets: Better Solutions to Everyday Web Design Problems

CSS Secrets: Better Solutions to Everyday Web Design Problems

分解してみた

codepen.io

本来は背景色が白だけど、影を隠す要素を見やすくするために色付けしてる。

背景の設定

元のCSSの定義順に、背景1〜4とすると、

  • 背景3,4
    • 影っぽい見た目の背景
    • background-attachment: scroll で、Elementのスクロール位置ではなく、ページ内のElementの位置に追従する
  • 背景1, 2
    • 影を隠すための背景
      • background の重ねがけは、定義順で上位レイヤーになる仕組みを利用
    • background-attachment: local で、Elementのスクロールに追従する
    • 重なりと追従のおかげで、スクロール位置がトップかボトムにあると影が隠れる

background-attachment

について、知らなかったので読んでみた。

CSS Backgrounds and Borders Module Level 3

fixed

fixed with respect to the page box

Note that there is only one viewport per view

Viewportに対して固定されるので、もし背景3,4に設定してしまうと、Viewportのボトムにない限り影が見えないことになる

scroll

fixed with regard to the element itself and does not scroll with its contents

Elementの背景として表示されて、内包するElementがスクロール可能でも追従しない

local

the background scrolls with the element’s contents

Element内でのスクロール位置に追従する

スクロール範囲とBorderの関係についても触れられてるけど、今回は省略

感想

CSSすげー

CSSで色々作れる人すげー

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

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

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

HTML Standard

パターン

<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)

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

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

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

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

CSS Secrets: Better Solutions to Everyday Web Design Problems

RailsにWisper入れてみる

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使ってみた経験が欲しかったので、とりあえずライトにできる範囲で試してみた。

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

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

SET SESSION group_concat_max_len = 1000000;

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

 

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

 

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

設定

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

続きを読む

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

目的

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

Amazonのリンク貼ったけど、実際は使いどころに迷ってた楽天ポイント使って購入。
買ったのは黒だけど、白とか黄色のポップなのも良かったかなと未だに迷う。

開封したけど

とりあえず録画できることろまではたどり着く。
でも操作がいまいち慣れなくて戸惑う。

英語マニュアル見ても、各モードにする方法とその概要くらいしかないし。

さらには設定を日本語化してもよく分からん言葉が多いぞ。
写真・動画・カメラ用語はあまり分かんないし。

ということでググりつつ手探りつつ設定するので、メモを兼ねて記事を書くことにした。

このサイトにはお世話になりました。
きっとこれからもお世話になるでしょう。

http://www.catv296.ne.jp/~myergo/sjcam_sj4000wifi.html

設定編が結構長くなりそうなので分割しました。

続きを読む