めも

メモ.

OBSの通話チャットの表示をCSSで変更する

OBSでdiscordのボイスチャットを表示する時、フォントを変えたりしたいのでCSSを使って表示を変更してみます。

手順

1. discordボイスチャットのURLを取得する

上記サイトにてInstall for OBS > Voice Widget 以下のURLをコピーする。

f:id:misos:20210107223846p:plain
この画面のしたのURLをコピー

2. OBSのブラウザソースを追加

f:id:misos:20210107223919p:plain

3. ブラウザにて先ほど発行したURLを指定+適用するCSSをカスタムCSSから指定する

f:id:misos:20210107224031p:plain
上の赤枠部分に先ほどコピーしたURL、下にCSSを記述する

CSS記述例、通話している人だけアイコンの大きさを1.3倍にします。

span {
    font-family:'puikko-Regular' !important;
}

img {
    transition: 0.2s;
    -webkit-transition: 0.2s;
    transition-timing-function: ease;
}

img.speaking {
    transition: 0.3s;
    -webkit-transition: 0.3s;
    transition-timing-function: ease;
    transform: scale(1.3);
}

表示例

追記

CSSのアニメーションでコマ送りだったり簡単なアバター表示とかできるじゃん、と思って調べてみたらすでに多くのかたが取り組まれてました。参考:

2021

2021年 - Wikipedia

新年あけましておめでとうございます。いろんなブログを購読しておくと様々な職や趣味の人の今年の抱負が見れて新鮮な感じがする。それらに倣って自分も『2021年にしたいこと』を文字に起こしてみる。

エンジニア・技術関係

  • バックエンド側のプログラミング・実装の勉強
  • 自然言語処理関係を一から勉強する
  • 強化学習を使ったアプリを作る
  • 論文をもっと読み専門知識を深める
  • 技術書店などに一つ本を書いてみる
  • Blender/Zbrushを使う+3Dプリンタで何か作ってみる

とかでしょうか。あと電子工作がしたい気がしないでもない...(できるのか?)。 また、『【まつもとゆきひろ】20代のためのプログラマー勉強方法を聞いてきた。 - Qiita』とかを読みつつ、作ったものは公開できたらいいなと思います。

エンジニア・技術関係以外

したいことは無限にあるんですが、”2021年に”したいこと...って絞ると決めるのが難しい。

  • 英語(話す・書く)
  • 小説(読む・書く?)
  • DTM、道具揃えて何かする
  • デザイン関係の技術に触れる
  • 演劇みる
  • ゲーム

2020年が直ぐに終わってしまったように今年もきっとあっという間だと思う、戒驕戒躁に、無理しない範囲でいろいろしたいです。おわり。

休みが終わる前に積読を整理する

積読、積ん読(つんどく)とは入手した書籍を読むことなく自宅で積んだままにしている状態を意味する用語である[1][2][3]。 引用元:積読 - Wikipedia

読まずに放置している本がたまりつつあるので整理したいです。以下読みかけで止まっている書籍など。

技術書関係

技術書は必要になってから読み始めては遅いような気もするし、 かといって何に使うかわからない状態で勉強しようにもモチベが出ない、といった感じで難しい。そして自分の理解度が浅い箇所にぶつかると、場合によっては何日も進まなかったりしてしまいます。だから、大学の授業は真面目に受ける必要があったんですね(メガトン構文)。

小説・漫画

↓上のページの著者のツイッター

↓ペニー・パーカー


最近漫画も小説も読まなさ過ぎなので探すところからはじめないと...。

余談

整理しているときに見つけた、ISBNから引用情報を出力するサイト。ただbibtexファイルはGoogleブックスからもダウンロードできるので用途は限定されるかもしれません。

CSSだけで作成するいい感じの背景のサンプル

この記事は何

CSSだけで作成できるお洒落なウェブページ背景について、興味半分で調べたもののリンクを貼るのみの記事。面白そうですが直近で使ったりする機会はない気がします。

サイト

固定のチェックがらなどのパターン

上記ページはCSSで表現する背景パターン51種+【コピペで簡単!/アニメーション有】 | WebDesignFactsと同じ内容です、どちらが出典元かは不明。

粒子が動いている感じ?のパターン

動く系

2020年ふりかえり

毎年の終わりに一年のまとめを書いてたような気がしたけど、見てみたら2019年も2018年も記事を非公開にしていた。なんかチェックリストで「あれができた・これができなかった」みたいなことを硬い文章で書いていて恥ずかしくなったっぽい。

今年について、色々変化の大きい年だったね〜みたいな月並みな感想はさておき

変化がある中でもいろんな人に助けられた一年だった。あと、これまで一度もやったことがないものに興味を持ったり始めたりすることができた。来年はもっと色々と習得したり上手くなったりして、誰かに教えられるようになりたい。

あと、大学の頃は平気で徹夜して作業するみたいなことをやってたのに、今年急に出来なくなった。体力がないという訳では無く、なんだか眠くなってしまう。だからと言って『大学の頃にサークルとかゲームして過ごした時間でもっと色々やっておけばよかった』...と後悔している訳でもないです、それはそれで価値のある時間だったと思う。

なんだかんだ自分のやりたいことができた年だった、周りのおかげですね。来年は勉強とプライベートをさらに良くする方向に頑張りたい。

AWSのハンズオン「AWS で基本的なウェブアプリケーションを構築する」を行った際のめも

  • この記事は何
  • 使用するサービスなど
    • AWS Amplify コンソール
    • Amazon DynamoDB
    • AWS Lambda
    • Amazon API Gateway
    • AWS全般の用語
  • 公開までの流れ
  • 参考文献

この記事は何

AWSのサービスを用いたアプリケーションについて『アマゾン ウェブ サービス (AWS) の実践的チュートリアル』にて種々の事例のチュートリアルが用意されています。

Web上からAPIを叩いてDBにデータを挿入・変更する操作を自前のサーバーを用意することなく作成したいと思い、そのために、ハンズオンの一つ 『AWS で基本的なウェブアプリケーションを構築する』に沿って簡単なアプリを作成し、その際に調べたことをメモした記事です。

使用するサービスなど

無料枠で収まる範囲の使用ですが、料金体系や仕組みを確認。

AWS Amplify コンソール

料金体系 - 静的サイトのビルド回数に応じて課金 - データストレージをGB単位で課金

小規模かつ月のビルド回数が数十回の場合は無料利用の範囲内で利用できる。

Amazon DynamoDB

非リレーショナルデータベースの一つであるKey-Value方式のデータベースを提供する。 Key-Value方式のデータベースでは、データをKey-Valueのペアの集まりで表現する(参考文献:key-valueストアの基礎知識)。dict型のデータのイメージ。

料金体系

オンデマンドキャパシティーの料金 - Amazon DynamoDB | AWS

S3よりもデータのサイズあたりの料金が大きいため、大きいデータはS3に保存しておく方が良いと思われる。

続きを読む