masalibの日記

システム開発、運用と猫の写真ブログです

今流行りのDeno.landに入門してみた

フロントエンド側とバックエンド側でちょっと有名になった言語があるのですが言語と言うかシステムなのですがdenoというものがあります.

コンセプトとしてはnode.jsの弱点を補った形らしいのですが私はあまり触ったことがないので入門してみたいと思いました。

Denoは、V8を使用し、Rustに組み込まれた、JavaScriptとTypeScriptのシンプルでモダンで安全なランタイムです。

  1. デフォルトで保護します。明示的に有効にしない限り、ファイル、ネットワーク、または環境へのアクセスはありません。
  2. そのままの状態でTypeScriptをサポートします。
  3. 単一の実行可能ファイルのみを出荷します。
  4. 依存関係インスペクター(deno info)やコードフォーマッター(deno fmt)などの組み込みユーティリティがあります。
  5. Denoでの動作が保証されている一連のレビュー済み(監査済み)標準モジュールがあります:deno.land/std

上記は本家からの引用になります

実際に触ってみてなのですが

  1. node.jsと違って NPM というのでインストールすることはしないんでその都度サーバーからインストールするという方式をとっています。
  2. node.jsのコールバック地獄ないみたいなので本当にうれしい
  3. 今流行りのTyepscriptを標準として使えるのもいいところです。 型宣言できるというのはjava系のバックエンド側やってる人には非常にありがたい

環境的にはWindows10です。 何も問題なくインストールできました。 (念のために管理者権限で実行しています)

iwr https://deno.land/x/install/install.ps1 -useb | iex

いつもどおりHello Worldは超カンタン

deno run https://deno.land/std/examples/welcome.ts

さすがにこれだと・・・Hello Worldっぽくないので

import { serve } from "https://deno.land/std@0.54.0/http/server.ts";
const s = serve({ port: 8000 });
console.log("http://localhost:8000/");
for await (const req of s) {
 req.respond({ body: "Hello World\n" });
}

入門する前に必ず入れて欲しい vscode の拡張があります

marketplace.visualstudio.com

こちらをインストールするとコードの補完してくれると言うのが便利です。 補完するにはモジュールのダウンロードする必要があります。

そのため、新しいモジュールをインポートする時は この状態で

import { serve } from "https://deno.land/std@0.54.0/http/server.ts";

で deno run xxxx.tsをする必要があります。 インストール(キャッシュ)しないと補完してくれないのはちょっとめんどくさいかな・・・

インストール前 f:id:masalib:20200531235042p:plain

インストール後 f:id:masalib:20200531235100p:plain

今更なんだけどmysqlのデータの取得で「*」を使ってはいけないと思った

SQLでテーブルのすべてを取得するのに「*」を使う事がある。 mysql本にはパフォーマンスが下がるのでカラム指定をしましょうと書いてあった。

プログラムで取得するときはできるかぎり指定するようにしていた。

昨日、自分はインフラとして一部参画していたプロジェクトでトラブルが発生した。 なんでも100万件も満たないデータでかつインデックスも貼っているのに3秒もかかる

今どき、インデックスを貼っていれば100万件程度なら余裕のはずが3秒もかかる。 しかもEXPLAINで調べるとタイプのがALL(インデックスがはられていないという状態)になっている。

EXPLAIN select * from master_data where Code=21321313454;

正直、困惑した。

インデックスが貼っているのにALLになるなんて・・・

壊れているのではないかという指摘があったので再構築のコマンドを実行した。

optimize table master_data;
-- master_dataは対象テーブルのです

参考URL https://hacknote.jp/archives/8852/

このコマンドはテーブルのロックがもろにくらうのでためらったがやってもいいという お達しがあったので実行した。

EXPLAINで対象のSQLを調べても結果は同じだった

EXPLAIN select * from master_data where Code=21321313454;

最終的にはインデックスを削除しなおして作り直すというありえない事をやった

ALTER TABLE master_data DROP INDEX idx_code;
ALTER TABLE master_data ADD INDEX idx_code2(Code);

qiita.com

結果はかわらず・・・困惑した。 どうしたものかと思った瞬間になんで

EXPLAIN select * from master_data where Code=21321313454;

なんで*なんだ? と思ってカラム名を指定してSQLを実行すると

EXPLAIN select id from master_data where Code=21321313454;

1秒もかからずに返ってきた。

カラムを指定するのとしないのでこんなに差がでるとは・・・・

しかもよく見ると Codeはvarcharだったので文字列指定にしたら

EXPLAIN select id from master_data where Code='21321313454';

0.01秒で返ってきた。

まじで本に書いてあるとおり 「*」を使ってはいけないな~と思った

ちなみにトラブルの原因はこのSQLではなく違うSQLだった。 スロークエリログも見ないで推測で相談してきたみたい・・・・。 自分も相談をうけた時に真っ先にスロークエリログを見るべきだった。 この部分を次回のトラブルに役立てたい。

今更なんだけど・・・WordPressのデザインの勉強する事になった

マナブさんという誰でもかせげるプログラマーになれると謳っている ユーチューバーがいるのですが、その人が稼ぐなら「WordPress」がいいと言っていた。 プログラマーとしてはちょっと「WordPress」というプラットフォームにのる形で好きではなかった。 またセキュリティーがもれる事が多々あるのでちょっと怖くて手の出さずにいた。

このご時世なのでもらえるお仕事がない時もあって、もしかしてもらえるお仕事が「WordPress」だった。 「WordPressならデザインもできるでしょ」とプレッシャーをかけられてうなずいてしまった。

ちょっとテーマを触る程度ならできるけど、お金ももらうのでちょっと怖くなって勉強する事にした。

開発環境構築はvagrantのvccwで簡単につくれる。

ちなみにVCCWとは

V…Vagrant C…Chef C…CentOS W…Wordpress

の頭文字を取ったものらしいです

公式の手順どおりだとWindowsではうまくいきませんwwww

  1. VirtualBoxをインストールする。

https://www.virtualbox.org/

  1. Vagrantをインストールする。

http://www.vagrantup.com/

  1. vagrant-hostsupdaterプラグインをインストールする。
vagrant plugin install vagrant-hostsupdater

Windowsではhostsファイルを変更できません。

管理者権限でメモ帳を開く "C:\Windows\System32\drivers\etc\hosts"

f:id:masalib:20200513002034p:plain

「192.168.33.10 vccw.test」を追加する

  1. Vagrant Boxをダウンロードする
vagrant box add vccw-team/xenial64
  1. .zipをダウンロードする。

vccw.cc

公式にあるリンクをダウンロードして解凍する

6.新しいディレクトリに移動します。

$ cd vccw-x.x.x

Windowsの場合は下記のファイルを修正する

vccw-x.x.x/Vagrantfile

下記をコメントアウトする

  if Vagrant.has_plugin?('vagrant-hostsupdater')
    config.hostsupdater.aliases = _conf['hostname_aliases']
    config.hostsupdater.remove_on_suspend = true
  end

   ↓

#  if Vagrant.has_plugin?('vagrant-hostsupdater')
#    config.hostsupdater.aliases = _conf['hostname_aliases']
#    config.hostsupdater.remove_on_suspend = true
#  end

  config.vm.provision "ansible_local" do |ansible|
    ansible.compatibility_mode = "2.0"
    ansible.extra_vars = {
      vccw: _conf
    }
    ansible.playbook = "provision/playbook.yml"
  end

   ↓

  config.vm.provision "ansible_local" do |ansible|
    #ansible.compatibility_mode = "2.0"
    ansible.extra_vars = {
      vccw: _conf
    }
    ansible.playbook = "provision/playbook.yml"
  end

参考にさせてもらったページ https://dev83.com/wordpress-vccw/

あとvagrantの性質上、フォルダに日本語や全角などは使わない方がいいです。

  1. Vagrant環境を開始します。
$ vagrant up

9.ブラウザでVagrantWordPressにアクセスします 訪問のhttp://vccw.test/またはhttp://192.168.33.10/

便利な世の中になったものだ。

現在は下記のサイトでデザインを勉強中。 https://plusers.net/wordpress_theme_0

ゲーム実況での字幕(テロップ)テストをしてみる

タイトル

私もゲーム実況をやってみたいと思っているのでそちらのテストを行いました。 ゲームはいつも通りのApexです

字幕はVrewいうソフトを使ってまずは入れます (このソフトは以前紹介した文字起こしで使ったソフトになります)

masalib.hatenablog.com

その後、 DaVinci Resolve字幕のフォントやサイズなどを調整して入れるという方式にしています。 DaVinci Resolveで直接入れない理由としては直接入れる方が作業効率が悪いからです

Vrewというソフトだとフォントは変更できるのですが 微妙な位置を変更したり、 シャドウ入れたりすることができないので 字幕データを取り込むことで対応しています

  • Vrewに動画を取り込む
  • 字幕を修正する。
  • 字幕データのエクスポートを行う
  • DaVinci Resolve に動画を取り込ませる
  • DaVinci Resolve に字幕データをインポートする
  • 字幕の位置を調整する
  • データの書き出して、YouTube にアップロードを行う
  • 感想としては
続きを読む

Spoonの初心者定期の最速のやり方

すごい前にスプーンと言うライブ配信ができるアプリを紹介したと思うのですがちょこちょこアクセスがあるのでそちらについて補足という意味で記載します

masalib.hatenablog.com

「初心者定期」というものがあります これは初心者に対しての説明書をになるのですが メモ帳なのでコピーして貼り付けっていう風にやっていくと時間がかかるので

Simeji - 日本語文字入力きせかえキーボード

Simeji - 日本語文字入力きせかえキーボード

  • Baidu Japan Inc.
  • ユーティリティ
  • 無料

というアプリを使って辞書登録をするというのが一般的なのですがそれでも遅いです。

私は

定型文キーボード - CannedText

定型文キーボード - CannedText

  • Yuta Hirobe
  • ユーティリティ
  • 無料

ていうアプリを使って初心者定期を行なっています こちらは無料のアプリなので誰でも使えると思います

作業手順

アプリをキーボードとして認識させる

アプリをダウンロードしてもキーボードとして認識されていないので
設定 → 一般 → キーボード

f:id:masalib:20200509154632p:plain

追加したキーボードを追加する

カテゴリを追加する

アプリを立ち上げると下記のようなページが表示されます

f:id:masalib:20200509154841p:plain

カテゴリを追加した後にカテゴリをクリックするとカテゴリ内へ移動します。

初心者定期の内容を追加する

表示名とテキストというフォームが表示されるのでそちらに登録していきます

f:id:masalib:20200509155059p:plain

辞書登録をする単位なんですけどもスプーンのアプリで記載できる文字数が限られているので複数登録する必要があります。 私は番号で登録しているのですがもう少し番号を大きくした方がボタンを押しやすいかと思います


表示名:1


①Spoonの機能
1.LIVE:最大で2時間配信ができる
2.CAST:30秒以上で録音が可能です
3.Talk:30秒以内でお題に答える所です

 


表示名:2


②記号の意味
🎧:今見ている人の数
❤:ハートをいただいた数(いいねみたいなもの)
👤:配信にきてくれた人の数(トータルリスナー)
 


表示名:3


下の説明
❤:入室1分後から押せます
🎁:Spoon(投げ銭)を送る事ができる
DJ(配信者)に贈ることができる
 


表示名:4


③「アイコンを押すと」
・名前の右側にある「+FAN」を押すとFAN登録できます。
 


表示名:5


FANはTwitterで言うフォローです。
FANしている人がLIVE、CAST、TALKを投稿すると通知がきます
 


表示名:6


FANになるには対象のアイコンをタップして「+FAN」を押すとなれます
コメントしている人でもFANになる事ができます
・声の評価:配信者のボイスタイプを投票できる
 


表示名:7


④「マネージャー」
・配信しているとコメントなどが
見れないので、コメントを返したり
荒らしを退室する事ができます
 


表示名:8

⑤その他
・試し聞き:配信しているバーを長押しすると試し聞きができます。
・フリーズ:リスナーがコメントできなくなる
・ミュート:配信者の音をキル事ができます
 


表示名:9


⑥スプーン用語
・枠=配信
・ないすぷ=ないすすぷーん
・ないバス=ナイスバスター(♡✕10)
・電ヘラ、ヘラった=電波が悪い状況

 


表示名:10


・流れ星=枠に入ってすぐに出てる事
・推しマ=推し配信者のマーク(例:🍙🍰)

 


表示名:11


・○○フラ=配信中に誰かが来ること(例:親フラ)
・完走=枠を最後まですること(いること)
・潜る=コメントしないで聞いていること

 


表示名:12


・おばけ=参加者に表示されないバグ ⑦新規ユーザー
・アカウント作って24時間後に2スプーンもらえます
・1スプーン=4ポイント

 


表示名:13

・300ポイントから溜まったら換金できます
⑧アイコンのボヤけを直す方法✨
ホーム画面にある自分のアイコンを
タップしてプロフィール画面を出してください。

 


表示名:14

右上をタップして修正すると、名前、アイコン、
ID(1度のみ)変更できます。

ダウンロードしやすい用に全文のリンク Beginnertext · GitHub

初心者定期をやってみる

動画の方がわかりやすいと思ったので動画にしました

youtu.be

「RTX Voice」のノイズキャンセリングを試してみた

masalib.hatenablog.com

という記事を出したのですが

ハードウェアの制限でインストールできなかったと記載したのですが 制限を解除する方法がわかった

forest.watch.impress.co.jp

解除手順はリンク先に書いてあるのですがまさか・・・制限を解除できるとは思ってもいなかった。
フォルダの制限を解除して修正と書いてあるがメモ帳を管理者権限で開けば多分修正できると思う

f:id:masalib:20200508215651p:plain

インストールすると画面がでてくるのですが
入力するデータを除去するのか、出力するのを除去するのかの画面がでてきます
私は入力デバイスがAG03なのでそちらを選択して
「Remove background noise from my microphome」をチェックしました
こちらをチェックするかしないかでノイズを消すのかどうかをハンドリングしています。

感想

実際に使ってみた感想なのですが

  • 本当にノイズが減る。ノイズキャンセリングをしなくてもいいとは言わないですが減ります。
  • CPUはそこまで使わない感じでした。GPUは2~5%ぐらいしから上がらずそこまでGPUの使用をしていないみたい。
  • GPUをよく使うゲーム(APEX)で遊びながら使用してみたゲームが落ちる事はなかった
  • 打音がなくなるのでプログラムの講座を録音する場合などにはいいと思う。

実際に試してみた内容

自分でも試した結果をアップしました

youtu.be

ノイズが減っていい感じです

memcachedに入っているデータの確認

memcachedは早くて便利なプロダクトなんですが、 いざデータをみたいとなった時にmemcached-toolのダンプしかデータを見る事ができない。 それだとデータが本当に入っているのか、意図しないデータが入っているなどありえる。

masalib.hatenablog.com

確認は絶対に必要なんだけど、もう少し具体的にデータを取得する方法を用意するべきと思ったので 記載する

キーがわかっている場合

$m = new Memcached();
$m->addServer('xx.xxx.xxx.xxx', 11211); //hostとportを設定する
$key='key_XXXXXXXXXXX';
$get_data = $m->get($key);
var_dump($key); 
echo ($get_data);   

キーがわかっていない場合

1回目はキーどのようなデータが入っているのかを探る

$m = new Memcached();
$m->addServer('xx.xxx.xxx.xxx', 11211);//hostとportを設定する
$cachekeys = $m->getAllKeys();
foreach ($cachekeys as $key) {
  var_dump($key);
}

2回目以降はキーから推測してデータを出力する

$m = new Memcached();
$m->addServer('xx.xxx.xxx.xxx', 11211);//hostとportを設定する
$cachekeys = $m->getAllKeys();
foreach ($cachekeys as $key) {
    $prefix = 'key_';   // prefixの部分にキーの頭に入っている文字列をいれる
    if (strpos($key, $prefix, 0) !== 0) {
        //var_dump($key);
    } else {
        var_dump($key);
        $get_data = $m->get($key);
        echo $get_data; 
   }
}