メモ 2023-10

2023-10-31

LXCで使っているZFS領域を拡張する

lxc で storage のサイズを拡張する備忘録 [Ubuntu Server 22.04 Host] [ZFS編] - takashi kono's blog を参考にさせていただきました。

パラメータを調べる

• POOL_NAME: プール名 (例: default)
• SOURCE: ストレージデバイス (例: /var/snap/lxd/common/lxd/disks/default.img)
• DEVICE_ID: デバイス識別子 (例: 15274996953059060469)

$ lxc storage list
+---------+--------+--------------------------------------------+-------------+---------+---------+
|  NAME   | DRIVER |                   SOURCE                   | DESCRIPTION | USED BY |  STATE  |
+---------+--------+--------------------------------------------+-------------+---------+---------+
| default | zfs    | /var/snap/lxd/common/lxd/disks/default.img |             | 8       | CREATED |
+---------+--------+--------------------------------------------+-------------+---------+---------+

NAMEを POOL_NAME に、SOURCEを SOURCE にセットする。

POOL_NAME=default
SOURCE=/var/snap/lxd/common/lxd/disks/default.img

$ sudo zpool status -vg $POOL_NAME
  pool: default
 state: ONLINE
  scan: scrub repaired 0B in 0 days 00:11:11 with 0 errors on Sun Oct  8 00:35:13 2023
config:

        NAME                    STATE     READ WRITE CKSUM
        default                 ONLINE       0     0     0
          15274996953059060469  ONLINE       0     0     0

errors: No known data errors

表示された値を DEVICE_ID にセットする。

$ DEVICE_ID=15274996953059060469

現在の容量を確認しておく。

$ lxc storage info $POOL_NAME | grep total
  total space: 16.95GiB

拡張する

10GB拡張するので +10GB を指定する。 + をつけ忘れると全体で10GBになってしまうので注意。

$ sudo truncate -s +10GB $SOURCE
$ sudo zpool set autoexpand=on $POOL_NAME
$ sudo zpool online -e $POOL_NAME $DEVICE_ID
$ sudo zpool set autoexpand=off $POOL_NAME

確認する。

$ lxc storage info $POOL_NAME | grep total
  total space: 26.16GiB

CSSについてのメモ

CSSについての自分用メモです。

目次:

スタイルの優先順位

スタイルには優先順位がある (Qiita)。

優先度: id ＞ class ＞ 要素(タグ) ＞ * (全称セレクタ)

セレクタ

• #foo - idによる指定
• .bar - クラスによる指定
• div - divタグ
• div, span - divタグとspanタグの両方
• div a - divタグの中にあるaタグ
• div > a - divタグの直下にあるaタグ
• .bar a - barクラスの中にあるaタグ
• 兄弟セレクタ:
  • 隣接兄弟セレクタ - h2 + p (h2直後のp)
  • 一般兄弟セレクタ - h2 ~ p (h2以後に出てきたすべてのp)
• 擬似クラス:
  • a:hoverのように使う
  • hover(カーソルが乗ったとき)、active(クリックしたとき)、visited(訪問済み)
  • first-child(最初の子要素)、last-child(最後の子要素)
    • <ul class="foo"><li>a</li><li>b</li></ul>のとき .foo > li:first-childで最初の子要素を指定できる

CSSのセレクタは右から評価される (Qiita)。

色

• red - 色名による指定
• #aaccee - RGBによる指定
• #ace - #aacceeと同じ
• rgb(170, 204, 238) - 10進数による指定
• rgba(170, 204, 238, 0.3) - 透明度(0透明〜1不透明)を指定

Googleカラー選択ツール

border, margin, padding

• border - 枠線
• margin - 枠線の外側の余白
  • marginはマイナス指定ができ、他のブロック要素に重ねることができる
  • ブロック要素は幅指定とmargin: autoでセンタリングされる
• padding - 枠線の内側の余白
• marginやpaddingには1〜4個のサイズを指定することができ、上右下左に対応する。省略された場合の下は上と同じ、左は右と同じ、右は上と同じになる

サイズ指定

• %指定は親コンテナに対する%になる
• サイズ計算:
  • widthは内側のコンテンツのサイズを表し、全体のサイズはその周囲にpadding, border, marginが足されたものとなる
  • box-sizing: border-boxを指定するとwidthが全体のサイズになる
• ブロック要素間の縦方向marginは重なり、大きい方の間隔分だけ空く
• 文字に関するサイズ:
  • デフォルトの文字サイズは16px
  • emは親コンテナの文字サイズに対する比率。1emは親コンテナと同じフォントサイズ
  • remはhtml要素の文字サイズに対する比率
• ビューポートを基にする単位:
  • vh - ビューポートの高さの1%
  • vw - ビューポートの幅の1%

ブロック要素とインライン要素

• ブロック要素は左右にめいっぱい広がるので縦に並んで表示される
• インライン要素は同じ行に並んで表示され、marginやpaddingは左右にしか効かない
• display: block - ブロック要素にする
• display: inline - インライン要素にする
• display: inline-block - インライン要素のように同じ行に並び、ブロック要素のようにmarginやpaddingを上下にも指定できる

中央寄せ

• 水平:
  • ブロック要素は幅指定とmargin: autoで中央に表示される (左右に均等にマージンがついて1行を専有している状態)
  • インライン要素やinline-block要素は親要素にtext-align: centerを付けると中央に寄る
• 垂直:
  • インライン要素やinline-block要素は親要素にvertical-align: middleを付けると中央に寄る

float

• ブロック要素を並べて表示できる
• float: left, flow: rightで要素の並び方向の左右を指定する
• 並べた後に次のインライン要素が並ぶ
• floatを解除する方法:
  • 次の要素にclear: bothをつける
  • floatを指定した要素の:after疑似要素でclear: bothを指定する
  • floatを指定した要素の親要素でoverflow: hiddenを指定する

overflow

• overflow: visible - 親コンテナからはみ出た部分が表示される
• overflow: hidden - 親コンテナからはみ出た部分がカットされる。親コンテナにheight指定がなければすべて表示されるまで縦に延びる
• overflow: scroll - 親コンテナからはみ出た部分はスクロールして見られる

position

position	本来の場所を	z-index	説明
static	専有する	無効	本来の位置に表示される(デフォルト値)
relative	専有する	有効	本来の位置からずらしたり親位置からの相対位置に表示
absolute	専有しない	有効	親位置からの指定位置に表示
fixed	専有しない	有効	ブラウザウィンドウの指定位置に表示

親位置: 親方向に検索して最初にpositionがstaticでない要素の位置

Flexbox

子要素を縦または横に並べることができる機能。

フレックスコンテナ

フレックスアイテムを囲むコンテナ。

• 親の幅まで広がり、デフォルトで中のコンテナのサイズを均等に割り振る
• display: flexでフレックスコンテナになる
• flex-directionには方向を指定する: row(横方向)、row-reverse(横逆方向)、column(縦方向)、column-reverse(縦逆方向)
• flex-wrap: wrap - はみ出たアイテムが折り返される

フレックスアイテム

縦や横に並べる箱。

• flex-grow - アイテムの合計よりコンテナが広い場合にどう配分するかの比率を指定する。0は広がらない
• flex-shrink - アイテムの合計よりコンテナが狭い場合にどう配分するかの比率を指定する。他が1で自分が2なら1/2に狭められる。デフォルトは1。0は狭めない
• flex-basis - アイテムの最低寸法を指定する。auto(デフォルト。均等配分)、0(コンテンツに必要な広さだけ配分)、200px, 50%など(専有する広さ)

上記3つをflex: <flex-grow> <flex-shrink> <flex-basis>と1行で記述できる。 3列の真ん中がメインコンテンツのとき、左右にflex: 0 1 {必要な幅}、真ん中にflex: 1を指定することでウィンドウに合わせて真ん中だけが広がるようになる。

CSS設計手法

• OOCSS (SINAP)
  • オブジェクト指向を取り入れた設計手法
  • コンテンツにスタイルを与える: どこにあっても「タイトル文字」「編集ボタン」などのクラスを指定できる
  • 構造と見た目を分ける: .boxで基本構造を指定し、.box-red, .box-blueなどで色を指定する。class="box box-red"のように合わせて使う
• BEM (Qiita)
  • Block(大きなくくり), Element(要素), Modifier(BlockやElementの変化)に分ける
  • Block__Element--Modifierという形でクラス名をつける
• SMACSS
  • ベース、レイアウト、モジュール、ステート、テーマという5つに分類して管理する
• MCSS
  • BEMとOOCSSの原理をベースに作られた
  • Base(再利用が可能なスタイルセット), Project(プロジェクトごとのスタイル), Cosmetic(色、サイズなど)の3つのレイヤーに分ける
• FLOCSS
  • OOCSS、SMACSS、BEM、MCSSなどの考え方のいいとこどりをした設計手法
  • 命令規則はMindBEMding(BEM)

Railsについてのメモ

(2023-11-02更新)

Ruby on Railsについての自分用メモです。

ルーティング

config/routes.rb に記入する。

リソース全体を登録するには resoures :books のように書く。

限定、除外するにはそれぞれ only, except をつける。

resources :books, only: [:index, :show]
resources :authors, except: [:destroy, :update]

ルーティングの確認方法:

• Rails コンソールから rails routes を実行
• http://localhost:3000/rails/info/routes にアクセス

ActiveRecord で最終 n 件を取得する

Books.all.order(name: 'DESC').limit(5)

結果は降順で取得される (order は1度しか指定できないため)。

昇順で取得したい時はサブクエリを使って次のようにする。

Books.all.order(:name).where(id: Books.all.order(name: 'DESC').limit(5).select(:id))

その他

• bundlerでgroup :production以外をインストールする: bundle install --without production
• サンドボックスでコンソールを開く: rails console --sandbox
• 特定の環境用にコンソールを開く: rails console --environment {環境}
• generate: rails generate controller StaticPages home help, rails generate model User name:string email:string
  • コントローラやリソースは複数形、モデルは単数形で指定する
  • rails generate modelするとマイグレーションファイルが作成されるので、中身を確認してから rails db:migrate を実行してデータベースに反映させる
• generateを取り消す: rails destroy model User (Qiita)
• モデルでハッシュ化したパスワードを使う: モデル内にhas_secure_passwordを入れる。テーブルのpassword_digestに格納される
• assertion:
  • レスポンスコード: assert_response :success (doc)
  • テンプレートの使用: assert_template "users/new"
  • 要素が存在する: assert_select "title", "Sign up", assert_select "div#message" (Qiita)
  • 要素が存在しない: assert_select "title", false, "Sign up", assert_select "div#message", false (APIdock)
  • 状態に変更がない: assert_no_difference "User.count" {ブロック}
  • 状態に変更がある: assert_difference "User.count", 1つ増える→assert_difference "User.count", 1
• flashとflash.now:
  • フラッシュメッセージを表示する。flash[:notice]="message", flash.now[:alert]="message"のように使う (Qiita)
  • flash:
    • 主にredirect_toメソッドとセットで使用する
    • 次のアクションまでメッセージが残る
    • 注意: renderで使うとrenderの次のアクションのページにもメッセージが残る
  • flash.now:
    • 主にrenderとセットで使用する
    • 次のアクションに移行した時点でメッセージは消える
    • 注意: redirect_toとともに使うとメッセージが表示されない (redirect_toが次のアクションとなるため)
• debugger
  • debuggerを記入するとデバッグセッションが開始される (Zenn)
  • next(またはn)でシングルステップ実行
  • continue(またはc)で実行を再開し、quit(またはq)で実行を中断する。
• ActiveRecord
  • update_attribute: 単一アトリビュートを更新する。バリデーションは実行されない
  • update_attributes: 複数アトリビュートを更新できるがバリデーションが実行される
• db:migrate
  • 基本操作はrails generate migration 〜(マイグレーション作成)→rails db:migrate(適用)
  • 最後に適用したものを戻す: rails db:rollback
  • 現在の適用状況を見る: rails db:migrate:status
  • 最初から適用し直す: rails db:migrate:reset
  • マイグレーションファイルの作成:
    • モデル作成時: rails generate model User name:string email:string
    • フィールドの追加: rails generate migration add_password_digest_to_users password_digest:string
    • 固定小数点フィールドはt.decimal :fieldname, precision: 11, scale: 3のように作成する (この場合全11桁のうち小数点以下3桁)
• db:seed
  • db/seeds.rbファイルで初期値を設定する
  • 初期値の投入はrails db:seed
  • 複数回実行するとデータが複数回追加されたりIDを指定している場合には重複の問題があるためrails db:migrate:resetでデータベースを作り直してから実行する方がよい
• Railsバージョンアップ: Gemfileのバージョンを変更し、bundle update railsを実行 (Qiita)