くりーむわーかー

プログラムとか。作ってて ・試しててハマった事など。誰かのお役に立てば幸いかと。 その他、いろいろエトセトラ。。。

2020年04月

VirtualBox CentOS7のディスクを拡張する

タイトル通り。やり方はググれば色々出てくるのですが、何となく古い気がするので記載。

コマンドで拡張して、OSに認識させてー。みたいな感じなのですが、

今のVirtualBoxなら拡張はGUIからいける。

ファイル⇒仮想メディアマネージャー。

vbox01

拡張したいvdi選択して、プロパティクリック⇒増やしたいサイズに変更して適用。

vbox02

これでディスクの拡張はおしまい。楽。

そしたら、拡張した分をOS側に認識させる。

CentOS7だったら、上記拡張後に左上のアプリケーション⇒ユーティリティ⇒ディスクで拡張分の

ディスクサイズが未使用領域として見えてるはず。これを使えるようにする。


ここから先は「root」でやる。

fdiskで対話的に作業する。これってGUIで作業できないんだろうか。。。


$ fdisk /dev/sda

コマンド (m でヘルプ): p  #テーブルの確認はp
コマンド (m でヘルプ): d  #dでいったん現状のメインのパーティションを削除
パーティション番号 (1,2, default 2): 2  #大体2番になってると思うけど↑で出た一覧参照
コマンド (m でヘルプ): n # 新しいパーティションを作成
Select (default p): p #プライマリ
パーティション番号 (2-4, default 2): # 2でよいのでエンター
Last sector, +sectors or +size{K,M,G} (2099200-62914559, 初期値 62914559): #デフォでよいのでエンター
コマンド (m でヘルプ): w # 保存して終了

# 終わったらOS再起動

途中で削除してて、最初ビビったんだけど、設定変えてるだけだからデータは大丈夫らしい。

起動し終わったらLVMの再設定。

$ pvresize /dev/sda2
$ lvextend -l +100%FREE /dev/centos/root
$ xfs_growfs /dev/centos/root

CSS 直前の要素のセレクタ & beforeとafterで一言

とある要素の直前の要素をCSSセレクタで指定したくなった。

<div>hoge</div> ←これを選択したい
<div class="fuga">fuga</div> ←ここから見て
<div>moge</div>

結論から言うとCSSセレクタではこれは無理っぽい。

兄弟要素(階層が同じ要素)の弟(後に出てくる要素)は選択できるんだけど、

兄(前に出てくる要素)を選択するセレクタはないらしい。。。

DOMの構造見直すか、JavaScript使ってどうにかするしかあるまい。

jQueryなら「.prev()」とかでいけるかな?jQuery使ってないけど。


で、ここから調べてる中で「コレ間違ってるんじゃないかな?」って思った話。

「CSS 直前の要素」でググって出てくるサイトは一杯あるのですが、

疑似要素のbeforeとafterでちょいちょいヒットしてる。

見てみると、beforeの説明でこんな内容になってる。

:before 要素の直前

とか

before / afterでそれぞれ要素の前後に[擬似要素]を追加することができます。

ん?って感じ。

↑の説明だと、構造的に下記をイメージしますよね?

<::before />
<div />
<::after />

要素の直前だからね。実際↑書いてるサイトの構造のイメージはそうなってた。

でも、MDNにはこう書いてある

In CSS, ::before creates a pseudo-element that is the first child of the selected element.

CSS における ::before は、選択した要素の最初の子要素として擬似要素を作成します。

子要素として 擬似要素を作成します

ですよね。

chromeあたりの開発ツールで見ると分かるのですが、どう見ても指定してる要素の

子要素として作ってるよね?

構造的には下記。


<div class="hoge">
  <.hoge::before />
  <something.... />
  <.hoge::after />
</div>

直前の要素って説明は間違ってると思うのです。

書くなら「before:直下の最初の子要素」とか「after:直下の最後の子要素」が正確な表現かしら?

.net バージョンの確認

公式にはいちをこんなページがあるのでそれを見た方がよいかも。

昔、MSDNにこのコマンドファイル載ってたのですが、そのページ見つけられなくなった。。。

いちを↑のコマンドファイル実行でインストールされてるバージョンの確認はできる。

で、実行PG側から今動いてるフレームワークのバージョンが何かを見たい場合は下記。

string clrVersionBuildtime = System.Reflection.Assembly.GetExecutingAssembly().ImageRuntimeVersion;
string clrVersion = System.Environment.Version.ToString();
Console.WriteLine(String.Format("ビルドバージョン:{0}", clrVersionBuildtime));
Console.WriteLine(String.Format("動作時バージョン:{0}", clrVersion));

v-calendarのdate-pickerで外から表示する月を変える

Vueのコンポーネントで、v-calendarっていうやつがある。

相当色んな事が出来て、今まで見てきたカレンダー的モジュールの中では一番じゃないだろうかと個人的に思ってる。

中のソースもめっちゃ勉強になる。

で、これのDatePickerを使う場合に、外から日付を渡して表示する場所を変えたかったりする。

一筋縄でいかなかったのでちょっと記載。


多分普通に使う分には↓の感じ。

<vc-date-picker v-model="dateval" />

適当なdataをv-modelで指定してあげれば、それに応じた日付にはしてくれると思う。

ただ、このdatevalを外で変えた場合に、カレンダーのページがその日付の月になってない。

これをやるのに、shoPageRangeっていうの呼ぶらしい。公式のドキュメントにもそんな感じで書いてある。

これのissue

まー上手くいかないと。popoverの場合は上手くいかない。is-inlineだとうまくいくっぽい。

どうもpopoverの場合、$refs.calendarの$refsがcalendarじゃなくてpopoverになってるみたいですね。

で、ソース色々見てたら、少なくとも最新のバージョンではどうも違うっぽい。正解はこっちだと思う。

<vc-date-picker v-model="dateval" ref="calendar"/>

methods:{
  changePage(){
    this.dateval = "何かの日付"
    this.$refs.calendar.adjustPageRange()//コッチ
  }
}

datepicker使う場合は少なくとも「adjustPageRange」っぽいですね。

内部的なカレンダーの日付のページにこれで合わせてくれる模様。

コード的にはここ

あと、カレンダーが非表示の状態だと動かないっぽい?

なので、最終的にはこんな感じにしておく必要がありそう。

<vc-date-picker v-model="dateval" ref="calendar" @popoverDidShow="handleShow"/>

methods:{
  changePage(){
    this.dateval = "何かの日付"
  },
  handleShow(){
    カレンダーが表示されたときに呼ぶ
    this.$refs.calendar.adjustPageRange()
  }
}
問合せ