masalibの日記

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

今更なんだけど・・・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; 
   }
}

Windows のショートカットファイルに対してキーを割り当てる

お恥ずかしいのですが知りました。

たぶんショートカットを作ることは普通の人は知っていると思うんですがショートカットキーを割り当てるということはあまりしてないのではないかなと思う。

たとば私の場合はOBSを立ち上げる事が多いので

D:\Program Files\Streamlabs OBS のフォルダに行く

Streamlabs OBS.exeを右クリックしてショートカットを作る

ここまでは知っていたのですが このショートカットをキー設定するには 作成したショートカットをプロパティを表示する

ショートカットの部分にカーソルをもってきて 起動したいキーを設定するだけです

ちょっとした事ですが起動に数秒ほど時間短縮できます。チリツモなので皆様も ぜひ使ってほしいです。

【無料】Snap Camaraを使ってWEB会議やゲーム実況でアピールする

先日、XSplit Vcamというソフトを購入した。

masalib.hatenablog.com

このソフト以外にもカメラを加工してバージョンなカメラのソフトがあったので試してみた

Snap Camaraとは

簡単にいうとスマートフォンアプリのShowです・・・

snapcamera.snapchat.com

実例

ハードウェアの制限はあるがそこまで高くなかった

オペレーティングシステムWindows 10(64ビット); MacOS 10.11以降 ハードウェア: 4 GB RAMを搭載したIntel Core i3 2.5Ghzまたは AMD Phenom II 2.6Ghz以上。Intel HD Graphics 4000 / Nvidia GeForce 710 / AMD Radeon HD 6450; 画面解像度1280x768以上

実際にやってみた

自分でやってみた

目を漫画風に変えるものです。

自分で作る事も可能

ちょっとめんどくさいのですが Lens Studioというソフトを使用すれば自分で作る事もできます

私もテンプレートから作って見ました

作成例

プレビュー画面

公開もできます

Snap to Unlock • Snapchat

まだやっていないけど githubに公開する事も可能みたい

さらにめんどくさいけど・・・ グリーンバックも作る事ができると思う。

https://www.youtube.com/watch?v=sQ7vzBDb8Oo

この人の説明が早くてなかなか理解するのに時間がかかった。 実際にやってみたがグリーンバックの精度が高くなく、XSplit Vcamでグリーンバックすることにした

参考にしたサイトは以下です

yokof88.com

自分の運用の場合

Snap Camaraで加工する

XSplit Vcamでグリーンバックにする

OBSで出力する

になりました

問題点

  • WEBカメラの問題なのか勝手にズームされたりする・・・ XSplit Vcamではおきなかっただけど・・・

  • 自分が作った加工を人にシェアするのが結構めんどくさい

Snap to Unlock • Snapchat

これを人に使ってもらうには検索窓に入力しないといけない