なぽろぐ

気ままに感じたことを記事にまとめます。Vtuberのイベントのことと、プログラム関連のことが多めだと思います。

APEX 初ダイヤに到達した

APEX 日常のこと

祝ダイヤ

シーズン5から APEX をはじめました．ランク行き始めたのはシーズン5後半からでゴールド4から上がれずめちゃくちゃ悔しかったのを覚えています．今回初ダイヤを踏むためにやったことをざっくりまとめて2スプリット目も頑張りたいと思います．

f:id:Naporitan:20210319063923p:plain

今までと今回で違ったこと

  • ダイヤに行っている友達に勝つための情報をもらった
  • ダイヤにいている友達にランク中の画面を見せてコーチング的なことをやってもらった
    • 2人にやってもらいました
  • 対面の練習をめっちゃやった．
    • レレレ打ちだけからしゃがみを入れれるように体に覚えこませた
    • 射撃演習場でタイマンをやりまくった
  • クリプトを使った
    • 周辺部対数を見ることで漁夫するタイミングと戦闘タイミングを調整
    • 敵の構成を先にみることができる
    • 1人になったときでもドローンとウルトをうまく使って戦闘を誘発させる
  • サーバーを東京から台湾に
    • かなり効果ある．東京は正直言ってめちゃくちゃつよい
  • 武器を固定化
    • めっちゃ効果あった
    • スコープも固定した
    • ボルト・EVA-8 で固定した．
      • 301 でもよかったけどボルトのほうが手になじんだのでそちらを使用
      • 僕はマスティフがめちゃくちゃ苦手
  • 始めジャンプするときに敵の情報を集める
    • 敵が多く降りている場所を見ておく
    • 逆に敵がいない場所も見ておく
      • 降下する場所以外のルートも確保する意味で
  • マップルームがあるなら積極的に利用する
    • リソースがあるなら何度か打って移動ルートを確立する
  • 土地の名前を覚えた

まとめ

対面はかなり強くなったな～と自分でも思うくらいに変化しました．プラチナ1からダイヤまでの戦闘では2タテ何度かするなど．ジャンプへの気持ちの入れ方が変わったり，周辺部対数への意識などかなり気を付けることが増えたなぁって印象です．残り数日で滑り込みダイヤだけどこれからも頑張るぞ！

「さなのばくたん。 -ていねいなお誕生日会- Powered by mouse」個人的まとめ

1年待った誕生会。オタクの感情のなぐり書き。気持ちの放出。

僕の推しは名取さな。名取のお誕生日会は去年2020 3月以来1年越しのリベンジとなる形で 2021 3/7 に開催されました。公式ホームページ

bakutan.natorisana.com

ありえんくらいかわいい。飛びててくるこのビジュアル。タペストリーにもなってて迫力満点で本当に可愛いです.....🙏🙏🙏

当日の動きです。（そもそもチネチッタに到着するまでにソワソワしすぎて電車の乗り換えすべてミスり、予定より15分以上遅れての到着になりました。トホホ....）

  1. エロイーズカフェにてばくたんカフェを楽しむ。
  2. チネチッタ周辺を見て回り、さな歩き。で使われた箇所を探索。
  3. CD の受け取り
  4. 物販の購入
  5. お誕生日会本番
  6. 翌日もう一度カフェに行きたくなり、ホテルを急遽手配したのでホテルで次の日を迎える

という感じになりました。カフェについて色々注文したのですが、僕の小さい胃袋ではすべての食物を食べることができず、半分くらいしか味わうことができなかったため即座にホテルを予約する結果となりました。（家から思ったより遠かったというのもあり......）

ばくたんカフェ

うさちゃんせんせいがばくたんカフェのお出迎えをしてくれます。これをくぐると推しにまみれた店内を見ることができます。 f:id:Naporitan:20210307144148j:plain

この名取可愛すぎ注意...！！！

f:id:Naporitan:20210307145641j:plain

カフェに立ち寄る女子高生名取......本物じゃん.....

f:id:Naporitan:20210307145710j:plain

階段には他にも、ヌォンタートが飾られており店内自体が味わい深い雰囲気になっております。

エローズカフェさん。名取の店内放送によるとフレンチトーストのお店らしく、封印確実うまうまフレンチトーストはパンがカリッとしていて、器の中で溶けたチョコと生クリームとの相性が抜群でめちゃくちゃ美味しかったです。名取さな誕生記念フレンチトーストはやわらかくパンが仕上げてあってパフェみたいな感覚で美味しくいただくことができました。2つの違った角度から楽しめるフレンチトースト.....名取監修最高です......美味....

本日食べられなかったものについては 3/8 に食べようかと思っています。すべてを食べたせんせえ方！おすすめがあれば教えて下さい！

退店するときにカウンターにいる名取を撮って行きたかったので、店員さんにとってもいいですか？と聞いたところ快く快諾してくださった上にここで撮るとより質感あっていいですよ！と言われました。店員さんも、もしかして「せんせえ」なのか....？

before

f:id:Naporitan:20210307155335j:plain

after

f:id:Naporitan:20210307155325j:plain

タワレコでCDの受け取り

宇木敦哉 さんによる名取のパネルがお出迎えしてくれます。うごき！動きがある！！！今にも動き出しそうなパネルに通りがかって実物を見たとき驚いてしまいました。PPAP(PINK PINK ALL PINKのことです)流れてて、おれたちは1年待ったんだな....という実感に浸るなどしておりました。エッビーナースデーも流れておりこれを俺たちは俺たちは聞くんだなと.....気合を入れるには十分すぎる待機列でした!! f:id:Naporitan:20210307155544j:plain

ばくたん会場

僕はスクリーン12にいました。公演終了してるのでいいますが、主張の激しかった12でした。主張も激しいし一体感(クイズのときのばらつきのなさすごい。)(別に馴れ合ってませんよ...ほんとだよ....)

参加したフラスタとても大きくてよかった.... f:id:Naporitan:20210307212723j:plain

始まる前の前説めちゃくちゃおもしろかった！なんで名取なさ同士でコントしてるんですか？ f:id:Naporitan:20210307212839j:plain

馴れ合い禁止！ f:id:Naporitan:20210307212849j:plain

会場出てすぐメモったのですが、記憶がぶっ飛んでる可能性がある(新曲からの記憶がかなり怪しい)ので温かい目で見てもらえると助かります。

  1. おうた
  2. さなちゃんねるキャラクターズによるプレゼント
  3. ワイらの大喜利コーナー(厳しい
  4. おうた
  5. クイズコーナー
  6. 新曲含むおうた ---- ここでいちどおわり ---
  7. アンコールからのお手紙
  8. さなのおうた

1. おうた

歌うぞ！と名取から言われていたエッビーナースデーから始まりました。こんなに会場盛り上げて誇らしくないの？はじめから特急電車に乗らされさなのばくたん。の世界観に一気に連れ出されていきました.....

3. ワイらの大喜利コーナー

名取ががんばった分次はこちらが身を削る番。大喜利の時間です。回答が面白いものばかりでほんとにこのコーナーがさなのばくたん。本編になるところでした。名取さん危なかったですね。僕らせんせえたちはいつでも王の座を狙っていますよ。(うそです）ちょくちょく名取が自分のことをせんせえたちは好きだよな？可愛いと思ってるよな？という発言をするのですが、せんせえたちは示しを合わせたようにサイリウムを振るのをやめたりBGMが止まったりと会場でもプロレスが実現していました。めちゃ面白かったです

4. おうた

王の衣装に変わって PINK PINK ALL PINK ！1年前を思い出しながら僕はちょっと泣いてしまいました。(こんなこと王の前では言えませんが....) やっぱり主人公！って感じのピンクいっぱいでほんとに楽しい曲です！会場でサイリウム振りながら聴ける時が来て本当に良かった......

歌詞が一部変更されていて、「君の声を聞かせてもっと」のところが「君の愛を届けてもっと」に桃井はるこさんが変えてくださった話を聞いたときには思わず天を仰ぎ神だ....という感情に.....何という配慮.....

5. クイズコーナー

6問出題される中から4問正解できれば名取が発表したいことを言えるという企画。せんせえたちが答えられなかったらどうするつもりだったんだ...？という心配はおいておいて、楽しい企画でした。 TweetDeck よりも Twitter web client が正解だなんて！！！いつもTweetDeckから投稿してるくせに！！！！！

6. おうた

クイズコーナーで無事4問正解する事ができたので新曲発表。アマカミサマというタイトル！他にも重大発表がありました！！！あれやこれが.....

今までとは一風かわった曲調で水の中にいるような演出もありつつ、しっとりした曲になってました。名取はアニメ二期EDのような感じにしているといっており、もしかするとことは伏線なのか....？と、ばくたん終了瀬戸際に流れたある映像によって今は感じています。

7. アンコールからのお手紙

アンコールめちゃくちゃ拍手のスピードが早くなって手がちぎれるからと思いました。思いが先行しちゃうけど体はついてこないね〜衰えかな？

黒い画面にロゴだけ映し出されたスクリーンが暗転し、名取が再登場。アマカミサマの感想の拍手やコメント、サイリウムを見つつお手紙に突入します。

ここは僕が泣きすぎてまじで何もかけないのですが、僕は3年間名取を最推しにしてきてよかったな。と普段はプロレスで戦いまくってるけど名取もせんせ絵たちのことがすきなんじゃね〜かと。もうぐちゃぐちゃになりながら聞きました。あんなに大はしゃぎしてた12スクリーンですら、まわりからすすり泣きしている音が聞こえてきたので、みんな同じ気持ちだったんじゃないかと、そう思える瞬間でした。(今もちょっと泣きそう

8. さなのおうた

やっぱりこれがなくちゃ帰れね〜〜〜ぜ！もっちゃん様作曲のファンメイドの曲。さなのおうた。もうね、最後これだなんておかしいですよ。泣くしかないじゃないですか、最後のサビでコメントが流れる演出があり、コメント(せんせえ)と名取が作り上げてきた世界だぞ！と言われているような気がして涙ポロポロ、鼻水じゅるじゅる、肩ガクガクでした。

本当に最高のイベントありがとう！

さいごに

よっぽどなことがない限りライブとかイベントで泣くことないんですが、名取の初単独イベントかつ1年ごしリベンジということもあり、ま〜〜〜〜〜〜〜じで泣いちゃいました。絶対見せたくね〜よ名取にこんな姿....って思いながら無理でしたね〜泣いちゃいました。よかったもん。ばくたん。すべてがつまってるんだよ。会場の微妙にツンデレ？(なのかな？)みたいな反応もさぁ。運営側のBGM止めたりする反応もさぁ。衣装チェンジのタイミングとかさぁ。手紙とかさぁ........卑怯じゃん。3年応援し続けた推しがさぁたかが見てるだけの人間に感謝してるだってさぁ...........もう何もかも最高でした。今年はこれで頑張っていけそうです。去年は開催できなくて来年にリベンジを掛ける形となりましたが、今年は来年もばくたんやるぞ！というポジティブな宣言もあり、今日からすでに期待でいっぱいです。

これからも応援し続けるからな〜〜〜〜！最高のイベント「さなのばくたん。 -ていねいなお誕生日会- Powered by mouse」ありがとうございました！

Next.js で Babylon.js を扱う

Next.js Typescript

Next.js と Babylon.js とwebGL が全く分からない俺

分からないので動かしたかった．バンドラーとして Next.js つかったら next.config.js 書かなきゃ動かなかったので備忘録的に文字に起こしておきます．

Babylon.js を動かす

babylonjs で npm ライブラリも公開されているが nextjs だと動かないので @babylonjs/core を使用する

yarn add -D next-transpile-modules next-compose-plugins
yarn add @babylonjs/core
const withTM = require('next-transpile-modules')(['@babylonjs/core']);
const withPlugins = require('next-compose-plugins');

const nextConfig = {
  /* 任意の config */ 
}
module.exports = withPlugins([
  [withTM],
], nextConfig);

これだけで build ができるようになります． next-transpile-module が必要なのは @babylonjs/core の js ファイルが es6 import を使用してるからです．@babylonjs/core を install したあとに node_modules をみてみるとわかると思います．

shader ファイルを raw-loader で読む

.glsl, .vert, .frag ファイルを raw-loader で string として読み込んで使えるようにします． next.config.js は babylonjs を使えるようにしたものを拡張しています．

yarn add -D raw-loader glslify-loader
const withTM = require('next-transpile-modules')(['@babylonjs/core']);
const withPlugins = require('next-compose-plugins');

const nextConfig = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.(glsl|frag|vert)$/,
      use: [
        options.defaultLoaders.babel,
        {
          loader: "raw-loader"
        },
        {
          loader: "glslify-loader"
        },
      ],
      exclude: /node_modules/,
    });
    return config;
  }
}

module.exports = withPlugins([
  [withTM],
], nextConfig);

import fragment from "./fragment.frag" としたときに fragment が string になるように typescript の型定義も追加しておきます．

declare module "*.vert" {
  declare const value: string;
  export default value;
}

declare module "*.frag" {
  declare const value: string;
  export default value;
}

declare module "*.glsl" {
  declare const value: string;
  export default value;
}

以上です．もしこれで動いたならばうれしいです．

wsl2 で docker が起動できないときにすること

wsl2 環境を用意したがdockerコマンドが動かないとき

f:id:Naporitan:20210104111738p:plain

こういうパターンの時です．

解決策

このissueに書かれている通り wsl --unregister docker-desktop を行います． github.com

f:id:Naporitan:20210104111806p:plain

bug アイコンを押すと restart docker desktop という項目が出てくるので restart します

以上の手順を踏むと docker コマンドを実行できます．

おわり．やっとまともに wsl2 をつかえる

Nextjsでsvgをインラインで読み込んでreact componentとして使う

Nextjsでもsvgをreact componentで使いたい

素のreactのプロジェクトだとこれ使ってパチッとやってたやつをNextjsでもやりたいってやつです． github.com

次のように書ければ目的達成という感じです．

import Icon from "~/assets/icons/icon.svg"
export const Component = () => {
  return (
    <Icon />
  )
}

Nextjs用のライブラリがあるですね～．うれしい．これを使うだけなのですが，next-imagesを併用してると動かないときもあるのでメモしておこうと思います． github.com

next-react-svg と next-images を併用する

next-imagesは "jpg", "jpeg", "png", "svg", "gif", "ico", "webp", "jp2", "avif" の拡張子を含むファイルをすべて url-loader 通しちゃうので next-react-svg を使っていても svg は url 形式になってしまいます．なので次のようにnext-react-svgがincludeしてるpathをnext-imagesではexcludeするという処理をすれば動きます．

next-compose-pluginsはwithXXXに対応するconfigを見やすく記述することができるpluginなのでいれています．

const { withPlugins } = require("next-compose-plugins")
const withImages = require('next-images')
const withReactSvg = require("next-react-svg")
const path = require('path')

const nextCofig = {
  / * someconfig .... */
  webpack(config) {
    config.resolve.alias['~'] = path.resolve('src')

    return config
  }
}

module.exports = withPlugins([
  [withImages, {
    exclude: path.resolve(__dirname, "src/assets/icons")
  }],
  [withReactSvg, {
    include: path.resolve(__dirname, "src/assets/icons")
  }]
], nextConfig)

typescriptを使う人向けにsvgの型定義を置いておきます．~/assets/icons/*.svgからimportするときはComponentで読み込んでほしいので次のようにどこかに記述して置けれいいはずです．

declare module '*.svg'
declare module '~/assets/icons/*.svg' {
  const value: React.FunctionComponent<React.SVGAttributes<SVGElement>>

  export = value
}

これで次のような記述をすることでsvgをcomponentとして扱うことができます．

import Icon from "~/assets/icons/icon.svg"
export const Component = () => {
  return (
    <Icon />
  )
}

2021年のカレンダーを買いました

購入したカレンダー

booth.pm

ひそなさんのサークルsuoiretsymでカレンダーを買い続けて5年目となりました！2016年から買い続けているのでこの時期(紅楼夢から12月あたり)になると毎年ワクワクしながら待ってます．

このカレンダーのおかげで毎月の変わり目がとても楽しくなります． 僕はその月にならないとカレンダーを絶対めくらない縛りをしてて，それがカレンダーの僕なりの楽しみ方だからですね～

f:id:Naporitan:20201225022136j:plain

すべて保管してるんですが，2016年の記憶もちょっとよみがえってきていいですね．．．．．．毎年カレンダーを作ってくださっているひそなさんに感謝です:pray:本当に毎年の楽しみになっています！！！！