動かざることバグの如し

近づきたいよ 君の理想に

vuejsのslot完全に理解した

やりたいこと

あるコンポーネントを複数のVueファイルから呼ぶ。このとき、表示する文字を呼び出し元ごとに変えたい

components/MyComponent.vue

<template>
  <div>
    <h1>ここは親ページによってタイトルを変えたい</h1>
  </div>
</template>
<template>
  <div class="container">
    <MyComponent>
      ここはcomponentsページです
    </MyComponent>
  </div>
</template>

<script>
import MyComponent from '~/components/MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}
</script>

やり方

components/MyComponent.vueを以下にするだけ。親は特に弄ることはない

<template>
  <div>
    <h1>
      <slot />
    </h1>
  </div>
</template>

複数渡したい場合

名前をつけてあげる

components/MyComponent.vue

<template>
  <div>
    <h1>
      <slot name="title" />
    </h1>
    <p>
      <slot name="date" />
    </p>
  </div>
</template>

pages/components.vue

<template>
  <div class="container">
    <MyComponent>
      <template v-slot:title>
        ここはcomponentsページです
      </template>
      <template v-slot:date>
        2020-06-16
      </template>
    </MyComponent>
  </div>
</template>

<script>
import MyComponent from '~/components/MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}
</script>

Youtubeの音源をフリーソフトでハイレゾ化する

Youtubeでしかない歌ってみたみたいな音源をウォークマンで聴いてもやっぱり音質が悪いのが気になる。。

ってことでUpconvでちょっと高音質化するか、、と思って久々にみたらアップデートされてた

これ5年前の記事 thr3a.hatenablog.com

ダウンロード

公式サイトからダウンロードして適当に解凍してインストール

フリーソフト - upconvfe 0.8.x のページ: 59414d41のブログ

書いてる時点では最新版は「0.8.2i」だった

やり方

先に他の変換ソフトを使ってWAVEファイルに変換しておく

オプションはたくさんいじれるが、基本的にはプリセットが用意されているのでそれを選択するだけで十分

今回はデフォルパラメーター3を選択して、「Start」で実行できる

f:id:thr3a:20200614223516j:plain

CPUをフルに使って演算するので結構時間かかる。気長にまとう

確認

ちゃんと高周波が補完されているかを別のフリーソフト「WaveSpectra」を使うと確認できる

高速リアルタイム スペクトラムアナライザー WaveSpectra

一箇所だけ設定を変える必要がある。Spectrumタブより「横軸をリニア」にする

f:id:thr3a:20200614224226j:plain

加工前

f:id:thr3a:20200614224654j:plain

加工後

f:id:thr3a:20200614224735j:plain

NodejsでImageMagickを使うライブラリ「imagickal」

環境

  • Nodejs 12

やりたいこと

nodejsで画像加工をしたい。でもってやはり有名なのはImageMagick

早速一番それっぽいのを見つけたものの最終更新が8年前ww

rsms/node-imagemagick: Imagemagick module for NodeJS — NEW MAINTAINER: @yourdeveloper

This is an abandoned version. Please see @yourdeveloper/node-imagemagick for the currently maintained version

なるほど、メンテナンスは終わったけど誰かがフォークしてくれてるのね、と思って見に行くとこちらも閉店

yourdeveloper/node-imagemagick: Imagemagick module for NodeJS —

Note: This code has been unmaintained for a long time. Please consider using the gm module instead.

結局そのリンク先のaheckmann/gmも3年以上メンテされてないんだよな。。

でnpmでググった結果いいライブラリ見つけたのでメモ

martinj/node-imagickal: node wrapper for ImageMagick commands

インストール

先にImageMagickがインストールされている必要がある

yarn add imagickal

サンプル

とりあえず画像の解像度だけ取得するパターン

const im = require('imagickal');

im.dimensions('yusa_emi.jpg').then(function (dim) {
  console.log(dim.width);
  console.log(dim.height);
});

async / await で書くこともできる

async function run() {
  const dim = await im.dimensions('yusa_emi.jpg');
  console.log(dim.width);
  console.log(dim.height);
}

run();

リサイズ

im.commands()
.resize({ width: 100 })
.quality(90)
.strip()
.exec('yusa_emi.jpg', 'result.jpg').then(function () {
  console.log('done');
});

他にも公式サイトに例がたくさん載ってるのでそっちをみよう

UbuntuでNTPが自動起動しない件

結論「systemd許さない」

環境

現象

NTPをインストールして時刻調整まではうまくいったのだが、再起動すると起動してない。

なるほど、自動起動の設定ができてなかったなと思って

systemctl enable ntp.service

を実行して再起動するも変わらず。。。

inactive (dead) つまり起動してない

# systemctl status ntp.service
● ntp.service - Network Time Service
   Loaded: loaded (/lib/systemd/system/ntp.service; enabled; vendor preset: enabled)
   Active: inactive (dead)
     Docs: man:ntpd(8)

原因

systemdがデフォルトでNTPサービスを提供しているから

どういうことなんだよって思うが、本当にそのまま。実はsystemd自体に時刻合わせ機能が実装された

これは以下のコマンドにて確認できる

# systemctl status ntp-systemd-netif.service
● ntp-systemd-netif.service
   Loaded: loaded (/lib/systemd/system/ntp-systemd-netif.service; static; vendor preset: enabled)
   Active: inactive (dead) since Fri 2020-06-12 21:22:25 JST; 6min ago
  Process: 906 ExecStart=/bin/sh -c . /etc/dhcp/dhclient-exit-hooks.d/ntp (code=exited, status=0/SUCCESS)
 Main PID: 906 (code=exited, status=0/SUCCESS)

Jun 12 21:22:25 systemd[1]: Started ntp-systemd-netif.service.

で、ntpの設定でsystemd側のNTPと競合しないようにしてくれている

# grep -i conflict /lib/systemd/system/ntp.service 
Conflicts=systemd-timesyncd.service

解決策

俺はNTPがつかいたいんだ!!!ってことでsystemdの方を無効化

まずは停止

systemctl stop systemd-timesyncd
systemctl stop ntp-systemd-netif

自動起動の無効化

systemctl disable systemd-timesyncd
systemctl disable ntp-systemd-netif

これで再起動すると晴れてntp.service側が起動している。やったね

参考リンク

Rubyで配列からマッチした要素のindexを取得したい

Rubyの記事久々すぎて書き方忘れたw

環境

やりたいこと

タイトル通りだが、例えば a〜zの配列でaとkにマッチする要素を取得するときはselectでいける

array = ("a".."z").to_a
array.select{|item| item == "a" || item == "k"  }
# => ["a", "k"]

が、今回は要素そのものではなく要素が格納されている配列のインデックスが知りたい。

コード

意外にもRubyにネイティブなメソッドは用意されてないっぽい。そこで array.each_index.select をつかうことにした

array.each_index.select{|i| array[i] == "a" || array[i] == "k"  }
# => [0, 10]

each_indexでindexのEnumeratorオブジェクトを生成し、selectで評価していく方法。これが一番しっくり来た

他にも

色々あるっぽい。そこでベンチマークをとってみた。

require 'benchmark'

arr = 10000000.times.map{rand(1000)};

Benchmark.bm(7) do |x|
  x.report("arr.each_with_index.map:")   { arr.each_with_index.map { |a, i| a == 50 ? i : nil }.compact }
  x.report("arr.size-1 .select:") { (0..arr.size-1).select { |i| arr[i] == 50 } }
  x.report("arr.map.with_index:")  { arr.map.with_index {|a, i| a == 50 ? i : nil}.compact }
  x.report("arr.each_index.select:")  { arr.each_index.select{|i| arr[i] == 50} }
  x.report("arr.size.times.select:")  { arr.size.times.select {|i| arr[i] == 50} }
end

結果

              user     system      total        real
arr.each_with_index.map:  1.006136   0.055187   1.061323 (  1.062394)
arr.size-1 .select:  0.754916   0.000831   0.755747 (  0.757302)
arr.map.with_index:  0.879967   0.055472   0.935439 (  0.936816)
arr.each_index.select:  0.734339   0.000641   0.734980 (  0.735821)
arr.size.times.select:  0.732360   0.000913   0.733273 (  0.734476)

速度でなら arr.size.times.select が最強か。上で紹介した arr.each_index.selectも悪くなさそう。

参考リンク