過去記事一覧

モモツキ桃源郷 サークルサイトがオープンしました!
ねこづきあゆむとももつきゆきや、2名で運営している同人サークル「モモツキ桃源郷」のサークルサイトがリニューアルしました!ぜひ御覧ください!https://togenkyo.works
みすほわいとメンテナンスメモ
めもです。メンテ開始前misskey-dev/misskey/main をベースにブランチ (AyumuNekozuki/misskey/original-202x.xx.x)作成作成したブランチ -> AyumuNekozuki/misskey/develop_mashiro-site に PR/mergeAyumuNekozuki/misskey/develop_mashiro-site で各種修正AyumuNekozuki/misskey/develop_mamashiro-site -> AyumuNekozuki/misskey/mainhiro-site に PR/mergeAyumuNekozuki/misskey/main_mashiro-site から Release 作成メンテ開始後
「連合思考のMisskeyサーバー」を運用する理由
この記事は Fediverse Advent Calendar 2023 12日目の記事です。前日は Morikapu さんの「色々なサーバーを運営してみた」でした。
「みすほわいと」もうすぐ1周年
この記事は Misskey Advent Calendar 2023 12日目の記事です。前日は 高橋牧場 さんの「MissFARMにおける快適なタイムライン体験のための取り組み」でした。
![[Works] きりふぇす(第7回/2023冬開催回)のWEBサイト実装を担当しました。](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2Fa5ff6e98431f4b57878a2ad002b8c2d5%2Fcd5702f8360d46b991c9d76514e53122%2F2023%25E5%2586%25AC%25E3%2583%259B%25E3%2582%259A%25E3%2582%25B9%25E3%2582%25BF%25E3%2583%25BC%25E6%25A8%25AA.png%3Ffm%3Dwebp%26w256%26h144&w=828&q=75)
[Works] きりふぇす(第7回/2023冬開催回)のWEBサイト実装を担当しました。
バーチャルイベント「きりふぇす」(第7回/2023冬開催回)のWEBサイト実装を担当しました。よろしければご覧ください。https://kilifes.jp/07/
![[Works] きりふぇす(第6回/2023夏開催回)のサイト実装を担当しました。](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2Fa5ff6e98431f4b57878a2ad002b8c2d5%2F9fbe918293c047c9a825be4bd452f153%2Fopengraph-image.png%3Ffm%3Dwebp%26w256%26h144&w=828&q=75)
[Works] きりふぇす(第6回/2023夏開催回)のサイト実装を担当しました。
バーチャルイベント「きりふぇす」(第6回/2023夏開催回)のサイト制作を担当しました。よろしければご覧ください。https://kilifes.jp/06/
サークル「モモツキ桃源郷」に加入しました!
Misskeyでは先にお知らせしましたが、この度、ももつきゆきやくん率いるサークル「モモツキ桃源郷」に正式加入しました!https://togenkyo.worksまぁこれまで、冬コミ・超会議(クリエイターX)と、売り子してたりしたんですけどね...wちなみに、次の夏コミ、C102、います!日曜西か17bです!詳細は後日...。ということで、今後とも、ねこづきあゆむと「モモツキ桃源郷」をよろしくお願いいたします!以上お知らせでした!

はじめてのMisskey -インスタンスの選び方-
前置きこの記事は「Misskeyは Misskey.io 以外にも広大な世界が広がっているんだよ。それを知って、楽しんでいって欲しいな」という考えのもと執筆・作成されました。その為、一部箇所に偏りが発生する場合があります。それを踏まえた上でご覧いただければと思います。はじめにみなさま、初めましての方は初めまして。そうじゃない方はお久しぶりです。ねこづきあゆむ(@AyumuNekozuki@mi.mashiro.site)です。Misskeyインスタンス「みすほわいと」の管理人をしています。さて今回は、最近Misskeyを知った方向けに、おすすめのインスタンスを紹介していきます。「Misskeyってそもそもなんぞや」って方はこちらを、

Misskey v13アプデでつまずいたところメモ
みすきーねこづき(Misskey自鯖)を v12系からv13系にアプデする際にめちゃくちゃハマり倒したので、メモ書きです。参考にならないと思いますが、参考にどうぞ。環境AWS EC2 / Ubuntu Arm64 / t4g.medium (テスト環境は t4g.small )公式のInstall Shell Scriptを使わず、こちらの記事を参考に手動で構築Repo: AyumuNekozuki/misskey branch: v12.119.2-nekozuki -> v13.x-nekozuki へアプデTL;DR# misskeyを止める
$ sudo systemctl stop misskey
# node v18系へアプデ (nで管理します)
$ sudo npm install -g n
$ sudo n lts
$ hash -r
# postgresql 15へアプデ
$ sudo sh -c 'echo "deb http://apt.postgresql.org/pub/repos/apt $(lsb_release -cs)-pgdg main" > /etc/apt/sources.list.d/pgdg.list'
$ wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add -
$ sudo apt update
$ sudo apt -y install postgresql-15
$ sudo pg_dropcluster 15 main --stop
$ sudo pg_upgradecluster 13 main
$ sudo pg_dropcluster 13 main
# pnpm のインストール
$ sudo npm install -g pnpm
# ユーザー misskey へ切り替え & 移動
$ sudo -iu misskey
$ cd misskey/
# git pull
$ git pull
$ git checkout v13.x-nekozuki
$ git pull
$ git submodule update --init;
# 構築開始
$ pnpm run clean
$ NODE_ENV=production pnpm install --frozen-lockfile
=> ErrorMemo 01(後術)
$ NODE_OPTIONS=--max_old_space_size=3072 NODE_ENV=production pnpm run build
=> ErrorMemo 02(後術)
$ NODE_OPTIONS=--max_old_space_size=3072 pnpm run migrate
=> ErrorMemo 03(後術)
$ exit
# 再起動
$ sudo apt update -y
$ sudo apt full-upgrade -y
$ sudo reboot
# systemctlの設定ができていれば再起動で自動的にMisskeyが起動しているはず
# そういえばリリースノートに書いてあったけどやってなかったから後からやった(これは一体なんなんだろう)
$ sudo corepack enable躓いたところErrorMemo 01: pnpm install でコケる本番時には発生しなかったんですが、規模を縮小したテスト環境で事前に試した時に、pnpm installが最後まで回らずに途中でコケました。(途中で Killed が表示されて処理が止まっちゃう) 原因はいまいちわからなかったんですが、おそらく環境が小さいとコケるっぽい?ラズパイでMisskey構築してる人たちどうするんだ……。そもそもpnpm自体、npmやyarnと比べると圧倒的に文献が少なく、原因とかを調べるのにもものすごく苦労しました……。というか、yarn-error.logみたいにコケた時ログ出してくれるとありがたいんですけどねpnpmくん……。ErrorMemo 02: xxx not found. でコケる多分01の影響です。僕の場合は、packages/backend
- tsc not found
- tsc-alias not found
packages/frontend
- vite not foundが発生。それぞれ、$ cd packages/backend/
$ pnpm install tsc
$ pnpm install tsc-alias
$ cd ../frontend/
$ pnpm install viteで事を納めました。ErrorMemo 03: module not found でコケる多分01の影響&02と同様の事態です。僕の場合、re2 がないよ!って怒られたので、プロジェクトのルートで、$ pnpm install re2 -wで事を納めました。-w がついているのは、プロジェクトのルートだからです。ない状態で叩くと、ルートでやるならオプションつけろよオラァって怒られます。おわりにpnpm、情報がなさすぎて、調べようにも、欲しい情報が見つからないのが辛いですね……。
2022年もお世話になりました。
年末振り返りです。多分結構長いので、目次活用してね。はじめにどうも、ねこづきあゆむです。毎年恒例、年末振り返り記事です。多分過去のやつはタグからいけると思うので探してみてね。と思っていたけれど、直近は放送してたのでないんでした。ボカロ10選はあるので見てみてね。2022年ボカロ10選今年の僕がめちゃくちゃ良いと思った楽曲10選です。良いと思ったら色々聞きに行ってみてください。
![[C101] 1日目・12月30日金曜日 東P-19b『モモツキ桃源郷』で売り子します](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2Fa5ff6e98431f4b57878a2ad002b8c2d5%2F0fc5498998f148098721839041a13dde%2Fslide_000.png%3Ffm%3Dwebp%26w256%26h144&w=828&q=75)
[C101] 1日目・12月30日金曜日 東P-19b『モモツキ桃源郷』で売り子します
よかったらきてね!!!※埋め込みが表示されない場合は、ページをリロードしてみてください...!#C101 お品書きです!1日目・12月30日金曜日、東P-19b『モモツキ桃源郷』でお待ちしてます!!📕 #ニコ厨合同誌『Re:starteRs ―ニコ厨で合同誌作ってみた―』📘 #マストドン解説本『はじめてみよう!今話題のSNS Mastodonの解説本』💚 ずんだもんアクキー2種(委託)#C101お品書き #C101告知 pic.twitter.com/rVie72q62l— ももつきゆきや@金曜東P19b【ニコ厨合同誌・マストドン解説本】 (@yukiyalien) December 28, 2022
Misskeyの構築bashスクリプトは基本そのままで立てようというお話
はじめにこれは個人的な備忘録です。Misskeyの自鯖を立てました。ここです。@AyumuNekozuki@mi.nekozuki.me環境Oracle Cloud Infrastructure Always Free で建てるよこちらの記事を参考に立てたよOracle Cloud Infrastructure Always Freeを使ってタダでMisskeyインスタンスを立てよう ARMはインスタンスがいつまで経っても立てられないのでAMDで建てました本題bashスクリプトでの導入なんですが、知識がない方が成功します。Misskeyを立てたことがあったり、Dockerの知識があったりすると、無駄にいじってしまって失敗します。example.comのURL、Postgres / redisのパスワード、iptable以外は基本Y/Enterで。設定項目としては、Docker Use, DockerHub, Nginx, iptable で選択、example.com, Postgres / redisのパスワードだけちゃんと入れてください。僕の場合は、最初、gitrepoからDLして失敗し、そのままDockerをやって失敗し……で5時間ほど詰まってました。そうなったらもういっそインスタンスごと立て直した方が早いです。はまり方bashスクリプトの途中で、misskeyのチェックがNGとなり詰むError: connect ECONNREFUSED redis: EAI_AGAIN
スマホからTwitterを消して、大体1ヶ月が経ちました
明けましておめでとうございます。12月です。もう残す所あと1ヶ月かぁとなっている僕です。いろいろ、本当にいろいろとあって、メンタルやばかったんですが、とりあえず安定化しつつある?気がしているので、ちょっとだけ11月を振り返ろうと思います。配信をやめ、Twitterもやめ、僕は何をやっていたのかと言うと、何をしてたんだっけ。通話しながら、ゲームしたり……ぐらいしかやってない気がしてます。あ、ちなみに、ポケモンSV、ヴァイオレットを買ったんですけど、とりあえずクリア(初回殿堂入り)しました。そっから先やる気が起きねぇんだわ……。そしてなぜか、ポケモン過去作をやりたくなってしまって、ちょうど今日、近くのゲオでアルセウス(未プレイ)と、BW(プレイ2回目)を中古で買ってきて遊んでます。それ以外にも、VALORANTにはまってここ最近毎日のようにやっていたり、ライザとか積んでたゲームを色々片し始めてます。それだけ配信とかって時間取られてたんだなぁ…と、自分でもちょっとびっくりしてるまぁそんなこんなで過ごしている僕ですが、精神的には、実は結構危うい気がしてます。かれこれこの状態2ヶ月、3ヶ月?ほど続いてますが、前と比べて明らかに悪化してる。自分の中のボーダーラインすれっすれを掠めてってるような、そんな感じ。実は、って言っても知ってる人もいそうですが、高校入学頃、一度鬱になって不登校ひきこもりになってまして(その後N高に転校して配信ガッツリやってメンタル戻してった)、その時を100としたとき、数日前ぐらいの感情値が95とかぐらいで、ちょっと次帰省した時にもっかい心療内科行った方がいい気がしてます。まぁ、自分で判断できるだけまだマシですが…話変わるんですが、数日前、やばくて、今大丈夫なの、日記のおかげかなって気がしてます。耳鼻科の初診の日…11/22から毎日日記をつけていて、その日の感想(適当でおk)と、達成度☆5段階評価(当社比)を、Notionに放り込んでます。これ結構良い気がしてて、どのタイミングでメンタルやってたってのと、その日何があった、どう言う感情だったかっていうのが振り返れてとてもよい。あとある種の吐き出し口的な面にもなってる気がしてます。自分の中では珍しく続いてる部類(大体4、5日でやめちゃうことが多かった)ので、ちょっとまずは年末、年明けまで続けて様子見ていこうと思います。本題:Twitterをスマホから消して1ヶ月ぐらい経ちましたさて、ここまで色々書いたので本題にいこうと思います。Twitterの話です。まぁ色々あってTwitterをスマホから消しました。あくまでスマホから消しただけで、PCからは見れるし、アカウントも残してあります。けれど、スマホから消しただけで生活が一変するぐらいには効果があるっぽいです。やべーな。Twitterを消してよかったことまずはTwitterを消してよかったところから。無駄な時間が減った電車の中とか、寝る前ベッドとか、暇さえあればTwitterを開いてしまっていたんですが、それがなくなりました。代わりに何になったかと言うと、マンガとか小説とかを読む時間になりました。あんまり変わってないね。ただ、積んであった諸々を消化できるので、これは良いことです。(確信)ストレスが減った当社比です。Twitterから通知がやってこないのでストレスが減りました。やったね。Twitterを消して困ったこと情報入手の機会が減るこれはマジで困ってます。結構、新しい技術の話とか、良いアイデアの素とか、推しの諸々の情報とかをTwitterから拾ってきてたりしてたんですが、新しい情報に出会えなくなってしまった感がすごいあります。ちょっとこれは困りもの。総じて、時間とストレスが減るのと引き換えに情報がもらえなくなります。うーん。ただ、情報に関しては、いろんなニュースアプリだったり、Mastodonの連合TLにもちょこちょこ流れてくるのでなんとかなりそう感はある気がしてます。まぁ、当分、Twitterは消しっぱなしにしておきますね。Twitterを消したと同時に、Mastodon(自鯖)に基本浮上するようになりました。アカウントはこちらです @AyumuNekozuki@mstdn.nekozuki.me 一応改めてにはなるんですが、流行りに乗ったわけではないです!!イーロンさんのTwitter騒動でMastodonが話題になるのと、Twitter削除タイミングが噛み合い過ぎてて誤解されそうなんですよね……ww自鯖、今年6月(前鯖もいれればもう3年前?)には立ててるので。なんならその前から friends.nico に僕居たので。まぁ、このままだらだらと書いてもいいんですが、長くなるので、今回はここらへんで。メンタル死んでますが、ちゃーんと生きてます。安心してください。次は多分年末振り返りかな。

niconico Darkmode の更新対応を終了します
2022.12.12追記v.2.5.0をリリースしました。長らくのご利用、ありがとうございました。
![[Works] きりふぇす(第5回/2022冬開催回)のWebデザイン・制作を担当しました。](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2Fa5ff6e98431f4b57878a2ad002b8c2d5%2F42611def01cf4fb9a57befd9e7c6d5d2%2Fogp_main.png%3Ffm%3Dwebp%26w256%26h144&w=828&q=75)
[Works] きりふぇす(第5回/2022冬開催回)のWebデザイン・制作を担当しました。
VRイベント「きりふぇす」(第5回/2022冬開催回)のWebデザイン・制作を担当しました。よろしければご覧ください。サイトはこちらから
[MacOS] ターミナル上でマイクの権限を付与したい!
備忘録的な何かです。環境はこんな感じ。MacBook Pro (14-inch, 2021)Apple M1 PromacOS Monterey 12.4Cubase Elements 12 Version 12.0.40 Build 317 (Rosetta 2)きっかけワイ「Cubase、オーディオIFにくっついてきたやつだとやっぱり機能限られるからあれやなぁ」ワイ「おっ!上位版セールやってんじゃん!買っちゃえー!!」==購入後==ワイ「よっしゃインストールできたで!早速適当に収録……」ワイ「あれ?マイク音声入らんのやけど???」ワイ「あー、OSのマイク権限許可でてないんか。どおりで認識するのに音声反応しないんか。」ワイ「んで、その許可ポップアップ、どうやって出すん???」試行錯誤してみるマシン再起動ワイ「だめやな」Cubase再インストールワイ「だめやな」色々ファイル諸々消してもっかいインストールワイ「だめやな」🤯色々試して思った。ワイ「正攻法で無理なら、コマンドで無理やり権限与えればいいんじゃね?」色々調べてみるワイ「さーて、とりま調べてみっか」サイトA「システム環境設定.appから、セキュリティとプライバシーに入って、そこからマイクの権限いじれるで」ワイ「いや、マイク権限のアプリリストにCubase出てこんからいじれないんやが……」サイトB「システム環境設定.appから……(ry」サイトC「システム環(ry」サイトD「シs(ry」ワイ「全然情報ないやんけ!!!」ワイ「日本語なさそうだし、海外のサイトだけで絞るか……」WebSiteA「tccutilってコマンドで権限リセットできるで」ワイ「それや!でもやりたいんリセットちゃうしなぁ」ワイ「いや待てよ……権限リセットできるなら付与もできんちゃう?」==色々試して==ワイ「付与できんかー」WebSiteB「有志が作ったtccutil.pyあるで」ワイ「それや!!!」本題:ターミナル上でマイクの権限を付与するワイ「まずこっからファイル落として……こうじゃ!」$ sudo python tccutil-1.2/tccutil.py -e -id com.steinberg.cubasesoft12 --microphone
Allowed the app to access Microphone!ワイ「よっしゃきた!!」Cubaseくん「マイク入ったで」ワイ「っしゃああ!」おわり
近況報告的な雑談的なsomething
やぁやぁやぁ、猫月遥歩(ねこづきあゆむ)です。唐突に始まる話なんですけど、自分文章書く時だけ人が変わるっぽいんですよね。めちゃくちゃ筆が乗る……現代的に言うと、キーボードに乗る……?なんだそれ。まぁともかく文章書く時だけめちゃくちゃ筆が乗ることに気づきました。とはいえ、語彙力が無いのは相変わらずなので、先日もボカロタイムズの選曲&コメント執筆していて、何度も「歌い上げる」とか「マッチして……」とか同じ単語ばっかり使っちゃって悩んでました。自分のもった感情・感想を言葉にするのって難しいなぁと改めて実感した今日この頃です。今日の議題議題というか話題というか。そんなものは今回ないです。ただただ雑に書き殴ってます。とはいえそのまま長文をつらつら書くのはそれはそれでクソほど見づらいので、適度にセクション分けぐらいはしようと思います。PCの人だけになっちゃうけどサイドバーに目次あるので気になる話題探してみてね。メインブラウザをSafariに変えましたMacを使い始めてはや2年。iPhoneユーザーかつMacユーザーかつiPadユーザーなのにも関わらずこれまでずっとChromeを使ってきましたが、とある理由でSafariに乗り換えました。きっかけは、iPhoneからです。iPhoneとSafariって結構親密につながっていて、いくつか自分の知るWebサービスの中には、iOSユーザーの人はSafari使ってね!!みたいなものも結構あります。それにぶつかってChromeからURLコピってSafariに移って……ってするの疲れた!!!!!!!!ってところからでした。最初はiPhoneでSafari使うんだったら、履歴とかもろもろ共通できるようにMacでもSafari使おっかみたいな感じで軽いノリで使い始めたんですが、これが案外使いやすい。拡張機能が足りてないってところを除けばめちゃくちゃ便利です。といっても自作の「niconico Darkmode」と「ニコニ広告ex.」に関しては、ローカルでビルドし直すだけでSafariでも使えるし、他の拡張機能は、実はちゃんと使ってたの「1Password」ぐらいなので、普通にストアにあったのでDLしました。そんな感じで、結構導入コスト的なもの低かったのは結構良かったです。ただ、Safariに変えたことならではの不便なところもありました。他ブラウザでちゃんと動作する機能が微妙にオカシクなってたり(特にニコニコ)、進む戻るのトラックパッドでのフリックが、全画面挙動なせいで結構うってなります。ただ、それ以外はめちゃくちゃ良いので、あんまり気にしてなかったりもします。そんな感じで、Macユーザーの皆さん、Safari結構良いのでありかもしれません。今期のおすすめアニメの話Engage Kissとリコリコはいいぞ。完。お前いっつもそればっかり言ってんなって感じですが。マジで。良いので。みてください。Engage Kissはね、まじで、やばい。さえかの♭好きな人は絶対好きなのでみてほしい。丸戸先生だし。やばいよあれは……。結局語彙力無くなりましたね、ごめんなさい。ともかく、めちゃくちゃ良いのでみてみてくださいな。タスクと進捗のお話近況報告と銘打ったからには、報告しない訳にはいかないでしょう。今の積みタスクと進捗はこんな感じです。歌ってみたCollection 投稿用動画作成歌練習中。09/23スタジオ収録予定。その日中に音源をMIX師さんに投げるのでなんとか間に合いそう?クリエイターサポート用サポーターカードイラスト&デザインラフあらかた。清書は……誰か描いて?(遠い目)ポータルサイト nekozuki.me リニューアル計画デザイン考え直し。進捗巻き戻ってるんですが……。ざっとこんな感じであんまり芳しくないです。これ以外にも動画とか動画とか動画とか作りたいし、ゲームだってしたいので、タスクなんとかしないとなぁみたいな感じあります。さらにまだ言えない依頼系のタスクとか、リアルのタスクとかも混ざってくるので、まぁ大変。死なない程度に頑張ります。いくつかお知らせ?『The VOCALOID Times(RC) 2022年08月号』リリース……じゃなかった発行しました。今月はずんだもん特集なのだ。よかったら好きな動画探してみてほしいのだ。
20歳になりました。
先にお知らせごとから。お知らせ動画が2本上がります。
ブログをリニューアルしました
お前しょっちゅうリニューアルしてんなって言われそうな気がしてます、猫月遥歩(ねこづきあゆむ)です。この記事を見に来て、大半の人が気づいてると思いますが、(初めて見に来た人がいたらごめんね)このブログをリニューアルしました。びふぉーあふたーびふぉーあふたーリニューアル後の変更点開発言語を Nuxt(Vue) から Nextjs(React) に変更しました各種情報を、ページにアクセスしてから都度取得ではなく、ブログ記事が公開されたタイミングの情報を拾ってくるようになりました。そのため、閲覧スピード(ページ間移動時のレスポンス)が上がりました。UI、デザインをリニューアルしました元のアイコン(ゆかりさん)から、新しいねこづきのバーチャルアバターをベースに、配色し直しましたサムネイル画像サイズを小さくし、可読性を上げました各種UIサイズを調整しました広告を減らしました(サイドバーにあるやつだけになったよ)Twitterタイムラインウィジェットを削除しました新機能と今後追加したいなって思ってる機能たち新機能目次機能をリリースしましたPC版で右サイドバーに出てきます技術系ブログでよく使うと思います今後追加したいなって思ってる機能コメント機能丸2年ぶりぐらいにDisqus復活させます。TOPICS機能ポータルサイト(nekozuki.me)のTOPや、生放送の配信画面下に出てくるTOPICS・お知らせをブログにも表示させたいなって思ってますついでに、ニコ生配信中の時に自動でWEBに「配信中!」みたいな表示を出したいな〜って軽く思ってますが、どっかからAPI探してこないとなので、時間かかる気がします。ニコ生の埋め込みプレーヤー、あれ使ってもいいんだろうか...限定公開記事機能・課金機能Pixiv FANBOXみたいな記事ごとや月払いの課金制の記事を出せるようにしたいなって思ってますFANBOX更新忘れるので、自分のサイトにデータがあった方が楽というかなんというか....w使ってるCMSの規約周りとか諸々確認が必要なのでこれも結構先になると思いますざっとこんな感じでやりたい機能みたいなのを書いてみました。まぁ当分、1年ぐらいはリニューアルはしないと思いますが、ちょくちょく機能追加とかしていったり、もちろん記事も書いていきますのでぜひ、今後ともねころぐをよろしくお願いします!次回更新はたぶん、配信画面・素材について、動画化してそれの補足的な記事を上げると思いますーではでは〜
最近の個人的なお話。
どうも。ブログでは久々ですね。なんか最近色々考え込むことが多くて。ちょっと頭の整理と近況報告用のブログを書くことにしました。最近、放送もできず、動画も上げず、Twitterにも現れず。コンテンツを消費する側に回りかけている気がしていますが、意外と色々作ってます。最近もちゃんとモノ作ってるんですよ?ラノベチックな見出し文になりましたが、まぁ、この記事の後ろの方で話すと思います。ブログでも更新しましたが、「きりふぇす」「ニコニコバーチャル動画投稿祭」のWeb周り全般(デザイン・システム含む)を担当しています。近々また、ちょこっと更新を予定しているので、色々準備中です。
![[Works] ニコニコバーチャル動画投稿祭 #ニコV祭 のWebデザイン・制作を担当しました](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2Fa5ff6e98431f4b57878a2ad002b8c2d5%2F81489bca8927431d8a0f752232ee0f02%2Fogp.png%3Ffm%3Dwebp%26w256%26h144&w=828&q=75)
[Works] ニコニコバーチャル動画投稿祭 #ニコV祭 のWebデザイン・制作を担当しました
ニコニコバーチャル動画投稿祭 #ニコV祭 のWebデザイン・制作を担当しました。ぜひご覧ください。サイトはこちらから
![[Works] きりふぇす(第4回/2022夏開催回)のWebデザイン・制作を担当しました](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2Fa5ff6e98431f4b57878a2ad002b8c2d5%2Fc2774c1aa11f429fbf1897e2997e4fb4%2Fogp_main.png%3Ffm%3Dwebp%26w256%26h144&w=828&q=75)
[Works] きりふぇす(第4回/2022夏開催回)のWebデザイン・制作を担当しました
きりふぇす(第4回/2022夏開催回)のWebデザイン・制作を担当しました。ぜひご覧ください。サイトはこちらから
[ねころぐ] 公開日時・改訂日時を別表示&タグを整理しました
どうも、ねこづきあゆむです。タイトル通り、このブログ、以下の更新をしました。公開日時と改訂日時を分けて表示「技術部」タグを整理サムネがない記事のOGPがちゃんと表示されるようにしました公開日時と改訂日時を分けて表示しました元々、公開日時だけ表示してたのを、とあるタイミングから改訂日時だけ表示するようにしていました。ですが、このブログ、過去のWordPressとかブロマガで書いていた記事を移行してきた都合上、改訂日時=移行日の日付になってしまってました。その為、その記事がいつ公開されたのかわからない状態でした。なので、以下のように、公開日時と改訂日時を分けて表示するように改修しました。カレンダーマークが公開日時、鉛筆マークが改訂日時です。これで色々楽になるよ!やったね!「技術部」タグを整理しましたもともと、「技術小話」というタグだったものを「技術部」タグに直して、技術関連の記事は全てここに纏まるようにしました。このブログ自体、自分がただ記事を書いて個人ブログとして運用していたのですが、色々と技術系の記事も流すようになり、まとまっていた方が色々楽だなと気づいたので、タグでまとめました。そのうちカテゴリも再編すると思います。サムネがない記事のOGPがちゃんと表示されるようにしました(当記事みたいに)サムネを設定してない記事をTwitterに共有した際になぜかOGP画像がFaviconになって見た目的にもSEO的にもよろしくなかったので、ちゃんとOGPが設定されるようにしました。元々設定していたはずなんですが、なぜか、meta_imgにどこかのタイミングでfaviconが代入されるらしく...まぁ治せたので良かったです
![[超会議2022] 超日記 DAY6/DAY7/DAY8](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2Fa5ff6e98431f4b57878a2ad002b8c2d5%2Fbb0ee25ede654e9f8f5046ccdc871e5b%2FSlide%252016_9%2520-%252014__.png%3Ffm%3Dwebp%26w256%26h144&w=828&q=75)
[超会議2022] 超日記 DAY6/DAY7/DAY8
さて、DAY6 / DAY7 / DAY8の超日記です。DAY6前日入りしました。学校の授業を1限で切り上げ、(本当は2限まであった)颯爽に幕張へ。適当にツイートしたら、ビスコがちょうど丸の内にいるということでビスコと合流。ついたらやっぱり超会議って実在するんだなと改めて実感(?)しました。

@nuxtjs/pwa の覚えがき
今回、ブログとポータルサイトをPWA化しました。PCだとアドレスバー、スマホだとホーム画面に追加から、Webアプリとして実行できるあれです。そんなPWAを導入するにあたって、色々と覚え書きを書いておきます。NuxtjsでのPWAの導入導入はクソほど簡単。最初のyarn create nuxt-app <project-name>の中でPWAの選択項目があるので、それを選択して入れればとりあえずOK。モジュールが入ったら、nuxt.config.js に色々書き加えます。正直何が必須で何が任意かよくわからなかったので、適当に書きました。 pwa: {
manifest: {
name: 'ねころぐ',
lang: 'ja',
short_name: 'ねころぐ',
description: 'ねこづきあゆむの過去ログ倉庫です。',
display: 'standalone',
start_url: '/',
theme_color: '#7f7fff',
background_color: '#EFEFFF',
},
icon: {
source: '/static/icon.png',
fileName: 'icon.png'
}
},上から順にmanifestname: サイトの名前lang: 言語short_name: アプリの短縮名(ホーム画面に出てくる簡略化した名称)description: 概要文display: 実行モード(いろいろあるらしい)start_url: アプリのメインURLtheme_color: テーマカラーbackground_color: 背景色iconsource: アイコンの位置fileName: アイコンのファイルネームこれでとりあえず完了です。あ、開発環境で確認したい時は dev: trueをつけてください。キャッシュが残りすぎて記事が更新されない問題とりあえず実装したはいいものの、キャッシュ周りでごちゃごちゃし始めました...。PWAは仕様上、キャッシュ優先で拾ってくるので、記事が更新されていても表示上更新されていないように見えることになります。なので、workboxでキャッシュ時間を指定してあげるといいっぽいです。(ネットで拾ってきたものをそのままやってるのであまり理解してないので、今後理解したい) workbox: {
dev: true,
offline: false,
skipWaiting: true,
clientsClaim: true,
runtimeCaching: [
{
urlPattern: `/api_nicorepo/*`,
handler: 'staleWhileRevalidate',
method: 'GET',
strategyOptions: {
cacheExpiration: {
maxAgeSeconds: 60 * 15, // 15分
},
cacheableResponse: {
statuses: [200],
},
},
},
{
urlPattern: `/api_mc_nekolog/*`,
handler: 'staleWhileRevalidate',
method: 'GET',
strategyOptions: {
cacheExpiration: {
maxAgeSeconds: 60 * 30, // 30分
},
cacheableResponse: {
statuses: [200],
},
},
},
{
urlPattern: `/api_mc_nekozukime/*`,
handler: 'staleWhileRevalidate',
method: 'GET',
strategyOptions: {
cacheExpiration: {
maxAgeSeconds: 60 * 60 * 3, // 3時間
},
cacheableResponse: {
statuses: [200],
},
},
},
{
// デフォルト(最後に記述する)
urlPattern: '/*',
handler: 'networkFirst',
method: 'GET',
},
],
}あと、microCMSでWebhook投げれるので、microCMSで記事更新 → Vercelで受け取ってデプロイ させてます。とりあえず覚え書きでした。
![[超会議2022] 超日記 DAY5](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2Fa5ff6e98431f4b57878a2ad002b8c2d5%2F15d04ac5880f4a0aba9bb0aef3b5124e%2FSlide%252016_9%2520-%252014_.png%3Ffm%3Dwebp%26w256%26h144&w=828&q=75)
[超会議2022] 超日記 DAY5
さぁさぁ。いよいよ明日です。まぁ記事を書いてるのはその明日なんですけれど。幕張に前日入りするので、いろいろと仕込みました。準備中 [・▲・] pic.twitter.com/trEf3Xsem5— ねこづきあゆむ@超会議 (@nekozuki_2525) April 27, 2022テレビちゃんのフィット感好きw夜はハレスタでわちゃわちゃしてました。明日以降の日記は多少なりとも中身があると思うのでよかったら見て下しあ〜
![[超会議2022] 超日記 DAY4](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2Fa5ff6e98431f4b57878a2ad002b8c2d5%2Fd3946997b8ad4f9b8d61b4079475525e%2FSlide%252016_9%2520-%252014_.png%3Ffm%3Dwebp%26w256%26h144&w=828&q=75)
[超会議2022] 超日記 DAY4
記事書くの、忘れてました.....何やったかあんまり覚えてないです。あ、そうそう。家に帰ったら湿気がすごくて、頭痛くなってそのまま寝たんだった。次の日の超日記を見てね
![[超会議2022] 超日記 DAY3](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2Fa5ff6e98431f4b57878a2ad002b8c2d5%2Ff2dbbc4413ea4be18a22ad70448ddbec%2FSlide%252016_9%2520-%252014.png%3Ffm%3Dwebp%26w256%26h144&w=828&q=75)
[超会議2022] 超日記 DAY3
更新がしんどくなってきました。5日目です。今日やったこと起きて学校行ってカラオケ入ってネカフェ行って超歌舞伎を見ながら作業してハレスタ行って帰って二次会して寝ましたハレスタ、なんかのドラマの撮影してたらしく、めちゃくちゃ陽キャばっかで怖かったです多分次は火曜か水曜に行きます
![[超会議2022] 超日記 DAY2](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2Fa5ff6e98431f4b57878a2ad002b8c2d5%2F3e21729e0a904ce0b83a7651746f19cb%2FSlide%252016_9%2520-%252014.png%3Ffm%3Dwebp%26w256%26h144&w=828&q=75)
[超会議2022] 超日記 DAY2
案の定3日坊主になりかけました。猫月遥歩(ねこづきあゆむ)です。今日は起きてちょっと動画見てSmileS生でMCやって超インフォ見て二次会やってボカコレユーザークルーズを回しながら寝たので特になにもありませんでした。おわり。
![[超会議2022] 超日記 DAY1](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2Fa5ff6e98431f4b57878a2ad002b8c2d5%2Fcf8ffe543a614de6b48c7731926c5063%2FSlide%252016_9%2520-%252014.png%3Ffm%3Dwebp%26w256%26h144&w=828&q=75)
[超会議2022] 超日記 DAY1
ついに!始まりました超会議!まぁ日記自体2日前から書いてるのであんまり実感ないんですけどね。ほんとぬるっと始まりました。ぬるっと。
![[超会議2022] 超日記 DAY-1](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2Fa5ff6e98431f4b57878a2ad002b8c2d5%2Ffed9967882604788b7f69601dd820e2c%2FSlide%252016_9%2520-%252014.png%3Ffm%3Dwebp%26w256%26h144&w=828&q=75)
[超会議2022] 超日記 DAY-1
........死んでます。ボカコレ楽曲多すぎるんだよおおおおおおおお超会議始まる前から疲労困憊です。今日1日、ボカコレユーザークルーズをひたすら運営してたのであんまり記憶ないんですよね....wまぁ明日からは程々に楽しみます!あ、自分のおすすめ動画は以下のマイリストにまとめてあるので、ぜひ見てみてください。
![[超会議2022] 超日記 DAY-2](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2Fa5ff6e98431f4b57878a2ad002b8c2d5%2Fdb889673208f4be18071b79d43f6567b%2FSlide%252016_9%2520-%252014.png%3Ffm%3Dwebp%26w256%26h144&w=828&q=75)
[超会議2022] 超日記 DAY-2
超会議2022のユーザー企画に #超日記 ってやつがあったので、書いていこうと思います。ただ、多分、3日坊主になりそうな気がするんだよなぁ...企画1個目です。今年は開催期間が長いので皆で日記を書こう#超会議2022 #ユーザー企画応募 pic.twitter.com/JZLFHndX0T— ふゆゆ (@huyuyu58) February 15, 2022タイトルは、デイ・ツーではなく、デイ・マイナスツーです。2日前なんでね。というか今年の超会議、頭おかしいですよね(いい意味で)。超会議、8日間やります!(😧) ↓前日からボカコレルーキーやります!!(🤔) ↓その前日にKiiteで前夜祭&縁日射的やります!!(🤔🤔🤔)頭おかしい。ということで、まぁ、忙しいと思いますが、楽しんでいこうと思います。そういえば、超会議の予定表 「#超私のタイムテーブル」に参加して、つくりました。

ニコニコ超会議2022 ユーザー企画「超シベリア送り」企画中止のお知らせ
ご無沙汰しております、猫月遥歩(ねこづきあゆむ)です。今回は、超会議2022のユーザー企画として立ち上げました「超シベリア送り」についてのご報告です。楽しみにされていた方には大変申し訳ありませんが、今回の企画は"中止"とさせていただきます。理由としては世界情勢の影響です。ニコニコをご存知の方なら、シベリア送りが単なるネタであることがわかると思うのですが、Twitter上で、ハッシュタグを用いて行う企画のため、世界情勢・SNSでの反響・影響を鑑み、今回は中止とさせていただきます。2020年に実施した際のサイトは以前のまま残していますので、利用されたい方は、用法・用量には十分ご注意の上、ご利用いただければと思います。2020年時のサイトはこちら尚、シベリア鉄道同様の企画として、オーストラリア横断鉄道が実施されるようです。ぜひ、シベリアではなく、 オーストラリア送り を皆様でお楽しみ頂ければと思います。以上、大変申し訳ありませんが、宜しくお願い致します。

『バーチャルキャスト非公式ブログパーツ』をリリースしました
ブログパーツはこちらからバーチャルキャスト非公式ブログパーツをリリースしました。元々このブログとかVキャス新聞とか、自分の関連するところだけで使おうと思ってたんですけど、Discordのほうで聞いたら需要多少なりにはありそうだったので全体公開してみました。バーチャルキャスト版とTSO版の2種類あって、それぞれのURLに対応した表示になります。使った感じ

【02/01追記】今後の活動について
2022/02/01 更新各種対応を行いました。今回のお知らせについて、経緯をブログに書いてなかったので再度説明します。2022年6月30日をもって、Vカツのサービス終了が決定しました。その発表の際に、画像やアバターに対して、サービス終了以降利用できなくする旨の規約変更がされました。そのため、Vカツのアバターを含む、アイコンやグッズ等、全てのコンテンツについて見直しが必要となり、対応をした次第です。なお、なぜ今なのかということについては、依頼していたアイコンがものすごいスピードで完成したこと、猫月遥歩(ねこづきあゆむ)の姿形が変わるので、超会議前にある程度認知してもらう必要があると考えたことあたりです。旧な変更となり申し訳ありませんが、今後とも是非、猫月遥歩(ねこづきあゆむ)をよろしくお願い致します!変更内容は以下の通りです。BOOTH で販売中だったグッズを販売終了しました。ご購入いただいたグッズは7営業日を目処にpixivFACTORYより配送されます。BOOTH で販売中のグッズが無くなったため、一時的にショップを非公開にしました。pixivFANBOXを閉鎖しました。スポンサー登録いただいていた方は、自動的に課金がキャンセルされます。THE SEED ONLINE にて販売中だった一部VCIを販売終了しました。購入者であれば、 2022年6月30日 までは継続して利用することができます。尚、6月30日以降は、購入者であっても利用することができませんのでご注意ください。Vket Store にて販売中だったアセットを販売終了しました。ダウンロードしたアセットは今後も利用できます。尚、6月30日以降、SmartMonitor を利用する際はご注意ください。ニコニ立体 にて公開中だった全コンテンツを非公開にしました。二次創作ライセンスの改訂を行いました。変更後の詳細は こちらから ご確認ください。

ソフトウェアトーク/シンガー系ソフト M1Mac動作情報
最終更新: 2022/01/30 17:00はじめにこの記事は、当該環境のM1Macで動作したソフト・動作しなかったソフトをまとめたものです。各環境での動作を保証するものではありません。あくまで自己責任でお願いいたします。筆者の環境MacBook Pro(14インチ、2021)チップ: Apple M1 Proメモリ: 16GBOS: macOS Monterey v12.1Parallels Desktop 17 for Mac Standard Edition v17.1.1(51537)ゲームモードで動作中Windows 11 Home (ARM64) 21H2 22000.438Windows 機能エクスペリエンス パック 1000.22000.438.0

@nuxtjs/axios 関連の覚え書き
どうも、猫月遥歩です。先日、ポータルサイト nekozuki.me をリニューアルしました。リニューアルの経緯や、各所に急に出てきた紫のねこについては、後日また告知(?)します。この記事では、リニューアルの時に触った @nuxtjs/axios についての覚え書き記事です。@nuxtjs/axios の Proxyまわりについて@nuxtjs/axios、ネット上にいろんな記事が出ていて、特にproxy周りで情報が錯綜しています。proxy: trueを入れるとか入れないとか。調べた感じ、公式ドキュメントがやはり一番っぽいので、ドキュメントベースで進めてみてください。いろいろ使ってみて、とりあえず 2022年1月現在で動作したものをここにメモしておきます。// nuxt.config.js
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {
// Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
prefix: '/',
proxy: true,
},
proxy: {
'/api_hoge/': {
target: 'https://example.com',
pathRewrite: {
'^/api_hoge/': '/v1/example/'
}
},
},// pages/example.vue
//基本的な使い方
$axios.$get("/api_hoge/"),axiosで複数箇所から取ってくる場合の最適化1ページで複数からaxiosで叩くと、ページのロードに時間がかかります。そのため、Promise.all でまとめて取得すると、時間がかからずに取得できます。 async asyncData({ $axios }) {
let [hogea, hogeb, hogec] = await Promise.all([
$axios.$get("/api_hoge_a/v1/schedule"),
$axios.$get("/api_hoge_b/"),
$axios.$get("/api_hoge_c/v1/article"),
])
return {
hogea,
hogeb,
hogec,
};
},@nuxtjs/axios を動かしてると何故か microcmsのNuxtモジュールが動かないなぜかmicroCMSモジュールでエラーが出ます。なので、いっそのこと、microCMSもaxiosで取得しましょう。APIKEYについては、proxyの方に設定しておくと楽です。 proxy: {
'/api_mc_nekozukime/': {
target: 'https://hogehoge.microcms.io',
pathRewrite: {
'^/api_mc_nekozukime/': '/api/'
},
headers: { "X-MICROCMS-API-KEY": process.env.MC_API_KEY },
},
},// queries なし
$axios.$get("/api_mc_nekozukime/v1/schedule"),
// queries あり
$axios.$get("/api_mc_nekozukime/v1/makes?filters=type%5Bequals%5Dextentions&orders=createdAt"),クエリは、microCMS管理画面の APIプレビュー > cURLを選択して調節すると楽に書けると思います。

猫月遥歩(ねこづきあゆむ)の #2021年ボカロ10選
もう年の瀬ですね…。猫月遥歩(ねこづきあゆむ)です。猫月遥歩の2021年のボカロ10選をご紹介します。なんか…(いい意味で)やばいリストになりました。▼マイリストはこちら

ブラウザ拡張機能についてLTで話しました
どうも、猫月遥歩(ねこづきあゆむ)です。先日、ニコニコ情報調査室SmileS内 で 「テーマなしLT」企画があり、それに参加してきました。クローズドな場所で行われたのですが、スライド等公開してもいいよってことだったので、公開しておきます。

Nuxt.js × microCMSでブログをリニューアルした話
この記事は N・S高等学校 Advent Calendar 2021 6日目の記事です。はじめにどうも、N高卒業生(21年3月卒)の猫月遥歩(ねこづきあゆむ)です。現在専門学生なのですが、うちの学校にはアドカレのような文章としてアウトプットしようみたいな取り組みが少ない(というか無い)ので、今年もN高のアドカレに参加させていただいてます。さて、今回は、今みなさんがこの記事を読んでいる個人ブログ「ねころぐ」を最近リニューアルしたので、その話をしようと思います。動機リニューアル前は、静的サイトジェネレーター「Hexo」× Netlify で構築していました。Markdownで記事を書ける等のメリットから利用していたのですが、使っていくうちにいくつかの問題が出てきました。ローカル環境が破損しやすいテーマ(デザイン系)リポジトリとHexoのメインリポジトリが別なので、デザイン修正するには行ったり来たりして修正しないといけない画像周りの管理がめんどいこれに合わせて、ニコニコで活動する上での情報をまとめるのに利用していた「ユーザーブロマガ」がサービス終了したこともあり、ブログのリニューアルを行うことにしました。必要用件ブログ記事更新がしやすいブログ記事で利用する画像の管理がしやすいNuxt.js で作成できる以上の観点から良さげなものを探した時に、友人から「これおすすめだよ〜」と教えてもらったのが microCMSでした。なぜmicroCMSなの?調べていくうちに、目的と合致すること以外にも、ドキュメントが整理されている公式ブログに言語ごとのチュートリアル的なものがたくさん上がっているので、とっかかりしやすい等のメリットがあったため、利用することにしました。いざ、実践!といっても、8割方、公式ブログ通りなので、以下の関連リンクから調べてみてくださいmicroCMS + NuxtでJamstackブログを作ってみよう(microCMS公式ブログ)microCMSのNuxt.js用モジュールを公開しました(microCMS公式ブログ)デザインは、BootstrapVueを利用しながら、Hexo時のデザインを踏襲しつつ作成しました。この記事では、つまずいたことをメインに書いていこうと思います。① Nuxt-linkで移動するとOGPが死ぬNuxt-link とは、aタグ同様、リンクを移動する時に使うやつです。クリックすると、設定したそのページに飛びます。Vueを知る人は、router-link に似るものといえばわかると思います。aタグとの違いは、移動先がNuxt.jsの内部ページであれば圧倒的にパフォーマンスが良いという点です。今回何が問題だったかというと、パフォーマンスが良い代わりにOGPが死にます。正確には、移動前のページのOGPをそのまま受け継いでしまい、Twitterなどへの共有ボタンが機能しなくなるという点です。解決法、知る方いれば教えてください。(今回は諦めて、aタグで妥協しました)② Jamstack化するとOGPが死ぬOGP、おまえ、いっつも死んでんな....先ほど紹介した記事通り、最初は作っていたのですが、一通り作り終え、試しにgenerateすると、なんということでしょう!全ての記事のOGPが、とある1つの記事になっているではありませんか!!なんで...?こちらも、結局解決策がわからず、Jamstackを諦め、SSRで構築しています。③ nuxt-highlightjsで特定のテーマが利用できないこれは大丈夫です。解決済みです。Nuxtで構築するにあたって、便利そうなものをもろもろと入れています。その中にHighlightjsもあります。Highlightjsとは、以下のようにコードを書くと、ハイライトをかけてくれるライブラリです。var message = "Hello world";
console.log(message);nuxt-highlightjsで、テーマ「GitHub Dark」が利用できませんでした。色々試しましたが、正攻法では利用できず、結果、テーマのSCSSを nuxt.config.js で直読みしています。 css: [
'~/assets/icomoon_fonts/icomoon-style.css', //オリジナルsvgフォントファイル
'~/assets/style/github-dark.scss', //HighlightJS テーマ
'~/assets/style/main.scss'
],感想約2週間の突貫工事だったため、まだ色々と足りていない部分があります。先ほどあげたつまづきも、力技でなんとかしているだけなので、いつかちゃんとした解消法を見つけて直していきたいです。今後について今後は、ページ移動時のレスポンスの遅さを解消Disqusの再導入あたり進めていきたいなと思っています。おわりにいかがでしたでしょうか。作っていて楽しかったです。みなさんもぜひ、Nuxt.js × microCMSでブログを作ってみてはいかがでしょうか。N・S高等学校 Advent Calendar 2021 、明日以降もまだまだ続きますので、ぜひ、引き続きご覧ください。以上、猫月遥歩(ねこづきあゆむ)でした。Thank you for Reading!

2021年11月の近況報告
お久しぶりです。猫月遥歩(ねこづきあゆむ)です。11月の近況報告です。11月の振り返り2021年11月のTwitterはこちらから。ニコニコプレミアムDAY11月はあれですね。ニコニコプレミアムDAYのツイートばっかりしてますね。改めて、「ニコニコ動画プレミアムアワード2021秋」1次審査ノミネート、ありがとうございました!

「ねころぐ」リニューアルしました!
どうも、お久しぶりです。猫月遥歩です。ブログ、更新止まっててすいません。まぁ動画の更新も止まってるんですが。色々と、某組織の生放送を作ったり、某フェスのWebサイトを作ったりとか。いろいろ裏方のお仕事をがんばってます。今月末から「近況報告」再開しようと思うので、またよろしくお願いします。さて、ブログをリニューアルしたお話です。今回はただの報告ですが、後日また詳しい構成や作った時のポイント等話そうと思います。なぜリニューアルしたかというと、更新がめんどかったからです。というのも、前のブログシステム(Hexo)は、記事データをMarkdownで書き、それをGitHubに上げると更新されるというめんどくさいものでした。しかもデザインファイルが詰まったリポジトリと、記事データ・構成データのリポジトリが別になっていたのでそれはそれで面倒。ということで「microCMS」というものを利用する形でリニューアルしました。こんな感じでブログが更新できるのでめっちゃ便利なのです。そんなこんなで、今後もブログ更新していくのでよろしくお願いします!
このブログについて
当サイトは、ねこづきあゆむの個人ブログです。このブログでは、適当に日々の思いつきを書き連ねています。コメント機能 / 広告についてコメント機能(Disqus)・広告表示欄(Google Adsense)を実装していましたが、リニューアルに伴い、停止しています。データ収集/広告について当サイトでは、 Google LLC 提供の Google Analytics を利用しています。これらのサービスでは、トラフィックデータの収集のためにCookieを利用しています。このトラフィックデータは匿名で収集されており、個人を特定するものではありません。収集されないようにしたい場合は、ブラウザの設定からCookieを無効化していただくようお願い致します。 Googleプライバシーポリシーまた、2023年09月12日現在、当サイトに位置情報収集機能は導入しておりません。免責事項当サイトの情報の正確性について当サイトのコンテンツや情報において、可能な限り正確な情報を掲載するよう努めています。しかし、誤情報が入り込んだり、情報が古くなったりすることもあります。必ずしも正確性を保証するものではありません。また合法性や安全性なども保証しません。損害等の責任について当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますので、ご了承ください。また当サイトからリンクやバナーなどによって他のサイトに移動された場合、移動先サイトで提供される情報、サービス等について一切の責任も負いません。当サイトの保守、火災、停電、その他の自然災害、ウィルスや第三者の妨害等行為による不可抗力によって、当サイトによるサービスが停止したことに起因して利用者に生じた損害についても、何ら責任を負うものではありません。当サイトを利用する場合は、自己責任で行う必要があります。画像の著作権や肖像権等について当サイトで掲載している画像の著作権や肖像権等は、各権利所有者に帰属します。万が一問題がある場合は、以下お問い合わせよりご連絡いただけますよう宜しくお願い致します。

テストデータ
見出し1見出し2見出し3見出し4見出し5本文codecenterright引用console.log("This is code block");123abcaaaaaaxxx2sasasasa
【AmongUs】近くの人と喋れる喋れるようにする【身内向け】
近々、みんなで「近くの人と喋れるAmongUs」をやるので、参加者向けに導入方法を解説します。
lv332256879
PC版の導入方法まず、GitHubからBetter-CrewLinkをダウンロードします。
一番上にある「Download from GitHub」をクリックすればOKです。
DLできたら起動し、インストールします。インストール出来たら起動すると以下の画面が現れます。
スクリーンショット 2021-06-10 135753
これが起動した状態でAmongUsを起動し、ルームに入ると、右側にDiscordのオーバーレイみたいなものが表示されたら導入OKです。ちなみにBetter-CrewLinkの設定からオーバーレイを表示させるさせないといった設定も可能です。
Android版の導入方法まず、GooglePlayよりBetter-CrewLinkをダウンロード・インストールします。
インストール出来たらAmongUs起動しルームに入ります。
そしてBetter-CrewLinkを起動し、Setting画面を開きます。開いたら以下の文言を入力してください。
Ingame Name: ゲーム内の自分の名前
Lobby Code: 部屋コード
入力したら、下にある「Connect」ボタンを押してください。
スクリーンショット 2021-06-10 14 20 38
するとAmongUsの右側にDiscordのオーバーレイみたいなものが表示されたら導入OKです。ちなみにBetter-CrewLinkの設定からオーバーレイを表示させるさせないといった設定も可能です。
iOS版/Switch版の導入方法通話に参加したい端末で Web版のBetter-CrewLinkを開きます。
開いたら以下の文言を入力してください。
Ingame Name: ゲーム内の自分の名前
Lobby Code: 部屋コード
入力したら、下にある「Connect」ボタンを押してください。
スクリーンショット 2021-06-10 14 20 38
すると通話に参加できます。PCやAndroidと違ってオーバーレイには対応していません。
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});

ニコニ広告ex. v2.0.0アップデートのお知らせ
今日はアップデートのお知らせです。ニコニ広告ex. v2.0.0を、6/9~10にリリース予定です。
変更の無い点・変更に伴う注意点以下の機能は変更なしです。ご安心ください。
動画/生放送の広告機能を新しいウィンドウではなくコメント欄上に表示させる機能
6/9に「ニコニ貢献」リリース後、現行バージョンが動作しなくなる可能性もありますが。v2.0.0にて修正・リリースしますので気長にお待ち下さい。
v2.0.0 の変更点(予定)新サービス「ニコニ貢献」に対応します。もちろん対応します。
ロゴ・アイコンリニューアルニコニ貢献のリリース、ニコニコのロゴ更新などもあった為、ニコニ広告ex.のロゴ・アイコンをリニューアルします。
サブスクを見直してみる
学校の授業でサブスクについての話題になり、最近確認してないなと思ったので一度確認してみる。
とりまチェック。主に、月払いのサブスクと年払いのサブスクがあるので確認していく。実際に払う金額でないと実感が出ないので、全て税込み価格。
月払いサブスクを確認する
サブスク
金額
ニコニコプレミアム
¥550
ニコニコチャンネル(dアニメ支店)
¥440
ニコニコチャンネル(SmileS)
¥1980
pixivプレミアム
¥550
ドメイン維持費(nekozuki.me)
¥110
Google Workspace Enterprise Standard
¥2260
iCloud(200GB)
¥400
Discord NITRO CLASSIC
$4.99 (¥526前後)
Franz Franz Professional
$7.99 (¥870前後)
GitHub Pro
$4 (¥440前後)
—-
—-
合計
¥8126
年払いサブスクを確認する
サブスク
金額
Amazon Prime Student
¥2450
iTunes Match
¥3980
Splashtop Personal - Anywhere Access Pack
$16.99 (¥1870前後)
Duet Pro
¥3200
ドメイン維持費(nekozuki.me)
¥8272 (※2年に1度なので¥4136)
—-
—-
合計
¥15636
1年で…
サブスク
金額
月払いx12
¥97512
年払い
¥15636
—-
—-
合計
¥113148
こりゃ結構な出費だ…
ヤマザキ春の解約祭りとりあえず一つずつ見直す。
サブスク
今後
備考
ニコニコプレミアム
維持
生命線&クリ奨で元取れてる
ニコニコチャンネル(dアニメ支店)
維持
生命線&クリ奨で元取れてる
ニコニコチャンネル(SmileS)
維持
脱退理由がない&クリ奨で元取れてる
ドメイン維持費(nekozuki.me)
維持
生命線
Google Workspace Enterprise Standard
維持
GDrive容量無限は強い
Discord NITRO CLASSIC
維持
絵文字&アカウントの#2525維持のため
Amazon Prime Student
維持
生命線
サブスク
今後
備考
Franz Franz Professional
Personalへ変更($3.99)
Proの機能は使ってないが有料機能は使ってる為
GitHub Pro
学割再申し込み($0)
N高卒業で一旦学割が切れたが学生であることには変わりない為
iTunes Match
代替サービス検討
代替サービスが見つかり次第解約
サブスク
今後
備考
pixivプレミアム
解約
使ってないので
iCloud(200GB)
解約
中身を全てGDriveに移動後に解約
Duet Pro
解約
最近使ってないので
Splashtop Personal - Anywhere Access Pack
解約
別の無料ソフトで代替可能な為
結果。¥82258/年まで減らせました。
といってもまだ多いな。減らせるときに減らしておきたいです。
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});
Mac側のdocker-composeでAutoMuteUsをセルフホストしてWindowsのに接続する
タイトル通りです。AmongUsを遊ぶことになり、AutoMuteUsを導入したので、備忘録として。
構築する環境
AutoMuteUs(GitHubからFarkCloneしたやつをそのままdocker-composeで)
MacbookProのdockerで建てて、Windows側からローカルIP経由で接続する
Macで建てる理由は、Macのほうがやりやすいからです。
とりまbot作成DiscordのDeveloperPanelからbotを作成。管理者権限を与えて、自鯖に接続。もちろんTokenはコピっておこうね!
.env を作成cloneしてきたファイルの中にsample.envがあるので、それを元に.envを作成。
.env1234567AUTOMUTEUS_TAG=6.13.0GALACTUS_TAG=2.4.1DISCORD_BOT_TOKEN=**********GALACTUS_HOST=http://localhost:8123GALACTUS_EXTERNAL_PORT=8123
ソースコメントを元に、トークンやら、ポートなんかを設定。
上から順に、
AUTOMUTEUSのGithubrepoのRelease最新版を指定
GALACTUSのGithubrepoのRelease最新版を指定
さっきコピったbotToken
IP
ポート
を設定。詳しくはソース内にコメントがあるからそれを読めばわかる。
docker-composeを実行123$ docker-compose pull$ docker-compose build$ docker-compose up
できたー
WindowsのAutoMuteusCaptureと接続するコレは簡単。手動接続画面に行き、
URL: localhostの部分をmacのローカルIPに書き換えて接続
Code: Botから渡されたコードを入れる
以上!
あとがき思ってたよりだいぶ簡単でした。みんなも試してみてね
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});
docker-compose で Apache + PHP + mysql + phpmyadmin 環境を作る
タイトル通りです。編集中にファイルが逝って、3回目の書き直しです。最初は前文面白いこと書いてたんですけど、めんどくさいので本題に移ります。
構築するdocker-compose で以下の環境を構築するイメージは今回は公式イメージを利用。
php:7.4.16-apache
mysql:5.7
phpmyadmin/phpmyadmin
docker-compose.ymlを書く書いた
1234567.├ school_workspace/├ nnn_workspace/├ nekozuki_workspace/├ docker-compose.yml├ php.ini└ httpd.conf
docker-compose.yml123456789101112131415161718192021222324252627version: '3.5'services: php: image: php:7.4.16-apache volumes: - ./php.ini:/usr/local/etc/php/php.ini - ./httpd.conf:/usr/local/apache2/conf/httpd.conf - .:/var/www/html ports: - 8080:80 mysql: image: mysql:5.7 volumes: - ./mysql:/var/lib/mysql environment: - ぱすわーどとか phpmyadmin: image: phpmyadmin/phpmyadmin environment: - ぱすわーどとか links: - mysql ports: - 4040:80 volumes: - ./phpmyadmin/sessions:/sessions
はい。
動かす1$ docker-compose up
動いた!けど。
123456789.├ school_workspace/├ nnn_workspace/├ nekozuki_workspace/├ mysql/├ phpmyadmin/├ docker-compose.yml├ php.ini└ httpd.conf
色々邪魔だなぁ。
サブディレクトリから起動するディレクトリこうしてみる。合わせてdocker-compose.ymlも修正。
12345678.├ school_workspace/├ nnn_workspace/├ nekozuki_workspace/└ docker/ ├ docker-compose.yml ├ php.ini └ httpd.conf
docker-compose.yml123456789101112131415version: '3.5'services: php: image: php:7.4.16-apache volumes: - ./php.ini:/usr/local/etc/php/php.ini - ./httpd.conf:/usr/local/apache2/conf/httpd.conf - ../:/var/www/html ports: - 8080:80 mysql: 略 phpmyadmin: 略
起動。
1$ docker-compose -f ./docker/docker-compose.yml up
わーい。rootも綺麗。
12345678910.├ school_workspace/├ nnn_workspace/├ nekozuki_workspace/└ docker/ ├ mysql/ ├ phpmyadmin/ ├ docker-compose.yml ├ php.ini └ httpd.conf
でも起動時のコマンドが長いな…
.shから起動する1234567891011.├ school_workspace/├ nnn_workspace/├ nekozuki_workspace/├ docker/│ ├ mysql/│ ├ phpmyadmin/│ ├ docker-compose.yml│ ├ php.ini│ └ httpd.conf└ start_php.sh
123#!/bin/shdocker-compose -f ./docker/docker-compose.yml up
1$ ./start_php.sh
できたー!
あとがきできるだけdockerに慣れ親しんで使えるようになりたいので、今後も色々触っていきたいです
参考文献
docker-compose を用いて Apache・PHP・MySQL の開発環境を構築してみた
他のフォルダのdocker-compose.ymlを実行する方法
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});

近況報告と色々。
11月から月1近況報告記事、止まってましたね。すみません。お久しぶりです。猫月遥歩(ねこづきあゆむ)です。
まずはここ数ヶ月のざっとした近況報告をしたいと思います。
niconico Darkmode
いい感じに進んできています。現在、総合TOPなど共通部分、動画、生放送、ガレージ、実況に対応済みです。次はコモンズ。がんばります。
Vキャス新聞 Webサイト
Firebase化を始めて、数ヶ月経ちました。当初予定していた、動的サイトへの完全移行は自分の技術力では無理と判断して、Firebase の Firestore(DB格納庫)と Storage(画像保管庫)を活用して、読み取りを全てクライアント側のJSで対応しました。
あとは書き込みなんですが、意外と簡単そうです。ただ、現状、新しい記事を作るときに毎回 index.html を吐き出さないといけないのでそれをなんとかしたいけど、それをするにはサーバーサイドの知識が要りそうなのでやめときます。
なんでも屋になるつもりは一切ないです。
その他技術部案件
ニコニコの告知なしの改善(もとい改修)に振り回されながらも、なんとか対応できています。正直対応するのがきつい。クラファンじゃないけどなにかお金とか干し芋催促するようにいつか(といっても数年後に)はするかもしれません。
動画と生放送(自分の活動)
そういえば、VOICEROID界隈に顔を出し始めたのも11月(正確にはもうちょっと前)でしたね。ボイロ解説から始まり、ボイロ劇場、ボイロキッチン・・・とどんどん流れてます。
VOICEROID界隈、毎日投稿が多すぎるので、自分もやりたい!ってなるんですけど、今の状況じゃ手が完全に回らないのと、数年後には猫月遥歩の看板を下ろす(下ろすわけじゃ、居なくなるわけじゃないけど、クリエイター、動画投稿者、生放送配信者としての猫月遥歩はおしまい)という日が来るので、それまでのんびり続けようと思います。
体調の話
相変わらず季節の変わり目に弱いですね、自分。低気圧が来るたびに寝込んでます。あとこの時期は花粉もあって息をするのが辛いです。
そう言えばリングフィットを買いました。鹿児島に居た頃はバイト先まで数キロ歩いてたり…とかしてたんですけど、東京に来てから何もしなくなってしまったので。案の定体力落ちてますね。
体はこんな感じなんですけど、心は元気かって言われるとそうでもなく。
3月、高校生活ラスト1ヶ月だー!って言ってやりたいことを入れすぎた結果。そのタスク量に押しつぶされそうです。
数年前、中2?中3のときですね。完全に堕ちまして。鬱々真っ盛りでしたが。その鬱々真っ盛りになる前の状態に近い気がしてます。やばいです。
当時は、そんな真っ盛りになる寸前のときに、自分-教師間で理不尽なことがあって、完全に間違ったこと言ってたのでそれを正そうとしたら逆ギレされてwじゃあもうこんなとこ二度と来るか!って言って数カ月間登校しませんでしたね、生徒会長なのにw
今思えばクソガキだなぁと。そんなときに逃げ込んだのがニコニコだったと。そのあと出席日数ギリギリで卒業できて、普通科の高校とかも行ったけど馴染めずN高に…って感じでしたね。
いやほんとN高無かったら自分今この世に居ない気がします。
いや何の話だったっけ。あ、タスクに押しつぶされる話でしたね。まぁ今の所決定的事項がないのでまだ大丈夫だとは思いますが。
ただまぁ、心が死ぬ前になんとかせなあかんと思ったので、なにかします。そのなにかっていうのが次の話題です
ちょっと旅行に行ってきます
お金もないし、こんなご時世なので小規模一人旅ですが。
↑みたいな心理状態の時、大人だったらお酒飲んでぷはー!って言って忘れるんでしょうが、自分まだ未成年なのでそんなことはできません。
ってときの旅行です。
よく、あなたは「インドア派?」「アウトドア派?」って聞かれるんですけど、圧倒的にインドアです。といってもアウトドアが嫌いなわけじゃないんです。
外出はします。というか色んな所に行きたい欲があるので、コロナ前は結構土日で福岡行ったりとか結構してました。アウトドアのなにが嫌いかって。
山道を歩くのが嫌いです。船に乗るのが嫌いです。虫が嫌いです。
なんでって。疲れるから。船酔いするから。虫が嫌いだから。
なので、将来バイクの免許取ってツーリングとか行きたいんですけど、如何せん教習所で金を取られるのが嫌なんですよね…。
いや、金を取られるのは良い。ただその値段だよ… 10万って…。
また話が脱線しましたね。
と、ブログを書いてたら動画が上がったようです。
ゆかりさんと同棲する話 #10
電車でがたんごとん揺られながらゆったり行ってきます。
あ、どこ行くかって?名古屋です。ホントは1泊2日にしたかった。けど2日目雨だった。なので日帰りです。まぁ多少は気晴らしになるでしょう。
まぁ。ちょっと今日は長文書きすぎましたね。近々ブログまた更新します。ブロマガなくなるそうなので。
ということでまた今度。ノシ
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});

11月の近況報告
もう残り1ヶ月です。11月の近況報告です。
11月の出来事niconico Darkmode の更新を行いましたCSS → SCSSへの修正作業も無事終わり、比較的楽に対応できるようになりました…!疲れた…
湯婆婆つくりました
久々に大百科編集をたくさんやってます百チャレ、これまで知らない分野だったり、書きにくいテーマだったんですが、今月のテーマは「ニコニコ関連」!書くしか無い!!!久々に結構書いてますw
12月の目標
年末大掃除。色々片付ける!
出費をできるだけ減らす
というのもお金が…干し芋待ってます
今月もがんばるぞー
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});

10月の近況報告
遅くなりました!10月の近況報告です!
10月の出来事引っ越しました!鹿児島から東京に引っ越しました~~すでに環境ちゃんと整っていろいろやってます。
一番心配してたのが、防音面と回線なんですが、防音面は、吸音材とかやったので、放送とかVRとかしても今の所苦情なしです!回線は、ちょくちょく重い…ドコモ光の1Gマンションプラン、プロバイダはGMOで、IPv6 Plusで繋いでます。基本上下200~300は普通に出てくれるのでいいんですが、祝日の夜7時とかが下り1ケタ…ちょっときついです。仕方ないのかなぁ~~
niconico Darkmode拡張が伸びまくっててびっくりしてますニコニコを "ダークモード" 化する拡張機能作ってみた!
進捗。手が回りません!!!ww
『シベリア送り』が優秀賞頂きました!!
週ニコでも取り上げて頂いて…本当にありがとうございます!!!
他にも色々
深くは語りませんが、SmileSに入りました
サマポケRBくりあしました~
動画作ってます
湯婆婆つくりました
11月の目標すでに1週間ほど過ぎてますが目標です。
学校の課題(ry
溜まってる案件をなんとかする
新しいプロダクトをなにかつくる
今月もがんばりましょー
猫月遥歩(ねこづきあゆむ)2020/11/08 04:23:00
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});

【コメ返し】『ニコニコを "ダークモード" 化する拡張機能作ってみた!』10000再生ありがとうございます...!
この記事はブロマガから移行した記事です。
元記事はこちらhttps://ch.nicovideo.jp/nekozuki_blog/blomaga/ar1915605
1万再生ありがとうございます!!
久々のブロマガです!
コメント返しするならコチラのほうがいいだろうということで。
先に前置きです!
・自分は廃止が決まっているサービスは基本的に対応しません(旧マイページなど)
・公式では「対応したいが、準備がまだ=時間がかかる」なので「対応しない」とは言っていない
以上の点だけ抑えておいてください!
ということでコメ返しです!
まずは 10/3に返した分から。
静画も…/投稿動画(ガレージ)も…
今後対応予定です!userscript(グラスモンキー)版が欲しい!
検討しますページ切り替え時に一瞬白くなる(Firefox)
Firefox自体の仕様となります...!ご了承ください...!旧マイページ・Flashプレイヤーだと文字だけ白になって文字が読めない
対応は行いません。ご了承ください。(近日クローズのため)なんでアドオンで出来ることが公式で出来ないんですかね
逆にアドオンだからすぐに実装できることなので…(運営はやらないとは言ってない)これとアドブロッカーで超快適
アドブロックしちゃうとドワンゴの広告費が入らなくなるので個人的にはオススメしませんむしろうp主をドワンゴが雇えば良い
ドワンゴに就職したいです!!
10/20コメント返し!
chromeはDark Readerじゃダメなん?
自分も一時期使ってたけど、微妙な仕様調整がめんどくさかった...公式が対応しませんって明言しやがったから助かったわ
しないとは言ってないです。「対応するけど時間がかかるよ」的な発表でした。
ちょっと黒が濃いので、Office365のグレーやDiscord並の薄さにしてほしい
iOSの 公式の niconicoアプリ/ニコ生アプリの配色をベースに作ってるので、大幅な色変更は行いません...!多少の色調整は随時させていただきます...!公式じゃないからこそ使える手口なんじゃない?
正解。
公式だと、なにか不具合あると大バッシングになるから、しっかりとした状態でリリースしないといけないけれど、ユーザー側が勝手に作れば、公式的にはなんにも無いのと、
あと、これを公式で実装するには、本当にシステム面で統一された作りにしないと、細かい対応が増えて、それこそ負債になっちゃうんですよね
現状、CSS手書きで無理やりダークモード化している状況なので、これを公式対応するには本当に時間がかかるかと(ダークモード対応するぐらいなら別の改修改善を進めたほうが効率は良い)
ということで、コメントが増え次第再度コメ返しするのでよろしくね!
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});

コミュお知らせ:生放送/動画投稿のお知らせ
コミュのお知らせに入り切らなかったのでこちらで。
ヘッダー右上の 🌙 からダークモードにできます
以下コピペ
いつもありがとうございます!猫月あゆむです!さて、直近の生放送・動画投稿のお知らせです。
❏ 生放送:週刊ニコニコインフォ 二次会番組 10/02(金) 公式終了後~ ※SP or iPad からの放送です。
❏ それ以外の生放送について 基本的に 不定期&スマホoriPadからの放送になります。 引越し先の環境が整うまで待っててね
❏ 動画について 今後の動画投稿は動画が作れ次第 になります。 投稿する際は、日曜 18:00 になると思います。 引越し先の環境が整うまで待っててね
色々とバタバタしてきちゃって、10/4(日)の夜にはPCを梱包して…ってしないといけなくなっちゃったのですみませんがお願いします!!
猫月遥歩(ねこづきあゆむ)2020/10/01 20:07:12
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});

9月の近況報告
色々とバタバタしてきました。2020年9月の近況報告です。
9月の出来事
動画をたくさん上げました
結構上げたなぁ
「niconico Darkmode」「HideAmazon RealName」をリリースしました
ニコニコを "ダークモード" 化する拡張機能作ってみた!
引越し準備中でも月課は欠かさないよ!
HideAmazonRealNameは、chrome.storage API学習の副産物です。今後のnicoDarkのアップデートで使うよ~
今やってる CSS → SCSS への移行が時間かかるのでいつになるやら(´・ω・`)
サマポケRBを時間かかりながらも進めてます
いやぁ~。語彙力なくなるわあれw
個人的にオススメは蒼・のみき・識ルートですネタバレやなので語りはしません、やってみてね
届いた当日のブログ → サマポケRB届きました! - 2020/06/26
家が決まったよ
決まってなかったらやばいです、引越し引越しって言ってたの何だったんですかレベル。
引っ越し日程も決まりました。10/7に東京に飛んで、10/8入居です!ついに念願の一人暮らし…!
干し芋また後日再公開するので、引越し祝い待ってます()
10月の目標
学校課題(ry
1ヶ月に何かしらのプロダクト(ry
Macに慣れる ← !?
ざっとこんな感じでしょうか。
3つ目についてさらっとだけ言及しますと、一人暮らしのお祝いに両親からMacbookProを買ってもらうことになりました(!?)詳しくは手元に届いた当日にブログ更新すると思うので、そっちで話します!両親マジ感謝。ありがとう!
ということで、10月、肌寒くなってくる季節の変わり目ですが、体調には気をつけて頑張りましょー!
猫月遥歩(ねこづきあゆむ)2020/10/01 01:48:13
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});

8月の近況報告
台風来てて鹿児島は大嵐ですwということで8月の近況報告。
8月の出来事
ニコニコネット超会議2020夏
いやぁめっちゃ楽しかった!!4月のネット超会議とは違って、バイトが再開してて常時シベリアに張り付くみたいなことはできなかったけれど、4月以上に運営企画がめっちゃ増えててよかった!けどその分、ユーザー企画のピックアップが減っちゃったのがちょっと残念。
次回は2021!来年ネットと幕張で!
右奥歯の親知らずを抜きました
めっちゃ腫れた( ´・ω・`)反対側を9/5に抜きます・・・
『niconicoってどう使うの?』シリーズスタート!
これは少し9月上旬にも入って来ますが。niconicoチュートリアル的な動画を投稿しました!このシリーズに関しては色々考えてることがあるのでこちらの記事を↓(画像クリック)
近況報告振り返りも終わったので近況報告です。
以前から書いている通り、10月上旬に上京します。不動産屋さんに連絡して内見とかも進めてます。なので、10月から生放送系がかなり減ることをご了承ください。動画は空いた時間で自由に作れるので続けていきたいと思ってます。というか新シリーズ始めたばっかりだし。
ここらで今月の近況報告とさせていただきます。まぁすぐ次の記事来るのでwよろしくね
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});

7月の近況報告
月日が流れるのが速いですね。7月の近況報告です。
7月の出来事07/05 マイナポイント
07/07 niconicoバッジ、常連MAX
7月中旬~ シベリア送り
07/27 niconicoアップデート、 07/28 次期バージョン(Re)
7月その他の出来事
色々あった。覚えていない。
7月の振り返り先月の目標の結果です
高校の必修教材をry
9割方終わったのでさっさと終わらせます
新しいもの(プロジェクトなりプログラムなり…)を1つは作る!
Vキャス新聞とシベリア送り作ったのでOK
引っ越しに向けて資金を貯める(ムダ使いしない)
まぁまぁ溜まってきたと思う
少しずつ部屋の片付けを…
2割片付いた
物件探しも少しずつ。さすがに3ヶ月前は速いので、今月からやる
8月の目標ということで7月の目標です。
ネット超会議を全力で楽しむ!!
一通り、個人的大イベントが8割型終わったので、とりあえず超会議を楽しむ!!!
ということで7月の振り返りでした。
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});

6月の近況報告
もう7月なんですね。6月の近況報告です。
6月の出来事6/16~ 『週刊ニコニコインフォ』スタートniconicoの公式番組『週刊ニコニコインフォ』がスタートしました!全ニコ厨にとって、マジで神番組だと思います。
6/23~ Apple『WWDC20』開催iOS14 andmoreが発表されました。3年ほどiPhone8を使っていて、そろそろ変えたいなと思っているので恐らく9月発表のiPhone12に期待です。
6/25 拡張機能「SHOWROOM LivePlayer」リリース最近よく、Vキャス配信者のSRを見に行くんですが、配信ページがくっそ見づらかったので作りました。
6/26 サマポケRBが届きました!現在絶賛プレイ中です。感想は全ルートクリア後に。
6/29 「Vキャス新聞」公式サイトオープン毎週、4面を担当しているVキャス新聞ですが、かれこれ半年たったので公式サイトを作ってアーカイブを見れるようにしました。GitHubPagesで立ててます。初めてinclude(js)を使いました。便利ですねあれw
6月その他の出来事
色々あったけど、サマポケRBがやりたすぎて思い出せない
5月の振り返り先月の目標の結果です
高校の必修教材を6月中にすべて終わらせる!
半分ぐらいしか終わってないorz…がんばります
新しいもの(プロジェクトなりプログラムなり…)を1つは作る!
拡張機能とアーカイブサイト作ったのでOK
6月末にはサマポケRB!お金の浪費を控えめに…(外食とか自販機とか)
控えめに出来たと思う(当社比)
例年この時期確実に体調崩すので、今年は持ちこたえる!
そういえば体調崩してないややったぜ
7月の目標ということで7月の目標です。
高校の必修教材をry
新しいものを1つは作る!
引っ越しに向けて資金を貯める(ムダ使いしない)
少しずつ部屋の片付けを…
物件探しも少しずつ。
引っ越しが秋冬(今年中)になりました。上京です。というのも、本当だったら冬春(年明け後)でもいいんですが、コロナの影響で何が起こるかわからないので…がんばります。
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});

サマポケRB届きました!
サマポケRBが届きました!
ゲマズオンラインショップで買ったんですが、発売3日にしてようやく届いた…!地方の辛いところはこれなのよね。
ちなみに、「初回限定版」を買いました。流石に豪華限定版はお値段ががが…
これから1周目です!色んな人のツイートをかる~くみると、うみちゃんルートが攻略順によっては、ルート自体が消えてしまうようなのでうみちゃんるーとは早めに攻略したいところではある。が、昇格のみきたちや、識ちゃんも早くやりたくて仕方がないので、うみちゃんルートから回ってみます
ということで早くやりたいので今日はココまで。ノシ
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});
「WWDC20」を見たよ
感想ブログです。放送もやったので良かったら見てね
WWDC2020を見る枠
iOS 14
ホーム画面
“App Liblary”追加
“ウィジェット”刷新
“ピクチャーインピクチャー”追加
“Siri”刷新。よりコンパクトに
“Translate”アプリ追加
“Messages”アプリ各種リニューアル
“Memoji”
マップ
名所・レストラン等を探しやすく
自転車・EV系追加(初期時点で日本未対応)
CarPlay: 色々アプリ追加
CarPlay: 車の鍵がiPhoneに
“App Clips”追加
着信画面が通知デザイン寄りに
ホーム画面にウィジェットを埋め込めるようになります。あと、アプリの一覧表示ができるようになります(AppLibrary)。いろいろカスタマイズ性が増してめっちゃいいですね!
ピクチャーインピクチャーがデフォ搭載です。OS標準のプレイヤーでは使えるようになるそうですが、niconicoとかYouTubeとかのプレイヤーでも使えるようになったらいいなぁ。
Siriがコンパクトになります。コンパクトになるのはいいんですが、認識文章わからないのはちょっと…たまに文章の認識がおかしいときがあるので…
App Clipsが追加です。例えば、マックに行ったときに、ものすごく混んででモバイルオーダーで頼もうと思ったけどアプリ入れてない!、そんなときに役立つ機能です。アプリの注文機能部分のみをサクッとDLして、キャンペーン情報とかのフルバージョンアプリをあとからDLできる機能。NFCタグとQRコードの認識どちらでも使えるので便利になることは間違いなし。あとは日本のデベロッパーがどこまでやる気になるか…
iPadOS 14
アプリ内”サイドバー”の追加改善
検索システム、ポップアップ表示&結果を総合表示
iOS14の追加機能も搭載。
もちろんこちらも更新。
これまで、iPadOSはスマホ寄りのデザインだったが、今回、また一歩PC寄りにデザイン改善。
あと次の項で話すがApple Pencilとの連携度がバク上がりです!
周辺端末
“Apple Pencil”、手書きメモの大幅改善&テキストボックスに手書きで書き込めるように(iPadOS)
“AirPods Pro”、5.1ch/7.1ch/DolbyAtmosに対応(全OS)
ApplePencil、大幅に利便度が上がります。手書きメモを取ったときに、手書きの☆が長押しするだけできれいに整形された☆になったり、手書き文章をテキストとして読み込めたりします。また、通常のテキストボックスにそのままPencilで書き込むことで、手書きで入力できるように!まじでApplePencilが手放せなくなりましたw
WatchOS 7
サードパーティアプリ製文字盤が作成可能に
作った文字盤をシェアできるように
“ワークアウト”ダンスを追加
“睡眠トラッキング”追加
“手洗いタイマー”追加
iOS14のマップ関連機能も追加。
文字盤がシェアできるようになります!!作った文字盤をシェアして色んな人に使ってもらったり、便利な体験を共有できたりします。
“睡眠トラッキング”機能追加です!アラーム等はもちろん、寝る前のルーティンを設定できたりします。ただ…いつ充電やるの?今でしょ!とかいう話ではなく、昼間スケジュール管理・交通周りで持ち出すAppleWatchを夜もつけていたらいつ充電やるんだろう…
タイムリー!”手洗いタイマー”機能追加です!手洗い動作を自動検知して、タイマーが作動します。カウントダウンのシャボン玉デザインすこ
プライバシー
位置情報の提供精度をユーザーが指定できるように
アプリのプライバシーポリシーをひと目で確認できるように
Home & tvOS 14
HomekitがOSS化
“Home”アプリで一括管理できるように
tvOS14、ピクチャーインピクチャー対応
mac OS Big Sir
アイコンデザインリニューアル
“コントロールセンター”追加
iOS14の”ウィジェット”周りも追加
“Safari”大幅アップデート。Chromeより50%早くなる
Mac、ARM シリコンチップへ移行
iOS/iPadOSアプリを使えるように
“Safari”の大幅アップデートです。Chromeより50%早くなり、セキュリティ・プライバシー面もしっかり。拡張機能周りも実行範囲を選べたりします。
ARMならぬ”シリコンチップ”になりました。これまでiPhoneやiPadに搭載していたシリコンチップ。それの開発技術を集合させmac用にシリコンチップを搭載します!(iPhoneとかの”A13”のような名前は出てきませんでした)。移行周りもアプリの再コンパイルだけでOK、再コンパイルされていなくてもインストール時に自動でやってくれるそうです。すでにMicrosoftやAdobeと連携してOfficeやAdobeCCはネイティブアプリ化されているそう。
開発者用シリコンチップ搭載mac miniは本日より応募可能。実際搭載されてリリースされるのは年末以降。
開発者用OSは本日よりDL可。パブリックベータは来月、リリースはいつもどうり秋となる。
実際にまともに使えるようになるのは秋以降ですが、めっちゃ楽しみです!!!!!!!!!!!!!!!!!!!!!!!!
以上。
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});

5月の近況報告
4日ほど過ぎてしまいましたが、5月の近況報告です。
5月の出来事05/06 - 05/07 サイトリニューアル猫月あゆむPORTAL や 月夜の野良ねこ屋 などサイトを色々リニューアルしました。といっても、このブログのナイトモードとデザインを合わせただけなんですけどね。まぁメンテが楽になりました。ただ、イマイチなところとかもあるので随時更新していく予定です。
05/13 & 5/31 拡張機能「ニコニ広告ex.」アップデート拡張機能のアップデートを行いました。主にバグ修正と動作改善です。更新内容はHPからどうぞ。05/31更新のv1.2.0では、全スクリプトの見直し・最適化を行いました。謎のtrycatch文祭りで、自分が過去に作ったものなのに、頭にハテナが浮かぶという事態でしたが、ちゃんと修正しました。こんな感じで技術負債って起こるんだなって少しわかった気がします。
05/22 マストドンインスタンスを構築しましたねこづきどん(mstdn.nekozuki.me)をAWSで構築しました。無料利用枠内で立てたので、めっちゃカツカツで動いてます。(安定してつながるとは言っていない)。紆余曲折ありましたがなんとか建てられました。サーバーサイドは多少N予備校の教材で分かる程度で、得意な分野ではないので、終始頭にハテナが浮かんでました。色々勉強して少しでもわかるようになりたいです。
5月のその他の出来事
プリコネR、たのしい(プリフェスで回しすぎて石足りてない)
プリコネアニメ、おもしろい
Live2D is かわいい(friends.cafe一般店員モデル買った)
上旬:アニメいろいろ再放送で悲しい
SAO新刊よかった
Key新作アニメ「神様になった日」楽しみすぎる
Orangestarさんおかえりなさい!!
ニコ生新機能「エモーション」についてはこちらを → nl21
5月の総括コロナの影響でバイトがいつ始まるかわからず、先の見えない毎日ながらもいろいろと製作・改善や新しいことができてよかったと思う。そろそろ高校卒業後に向けて色々準備していかないとなぁって感じ。
6月の目標
高校の必修教材を6月中にすべて終わらせる!
新しいもの(プロジェクトなりプログラムなり…)を1つは作る!
6月末にはサマポケRB!お金の浪費を控えめに…(外食とか自販機とか)
例年この時期確実に体調崩すので、今年は持ちこたえる!
以上!6月も頑張りましょう!
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});

「ニコニ広告ex.」v1.2.0 リリースしました
猫月あゆむです。以前から開発しているブラウザ拡張機能「ニコニ広告ex.」のv1.2.0をリリースしました。
この拡張機能については上のリンクからどうぞ。
v1.2.0 更新情報機能改善
拡張機能のボタンをわかりやすくしました。
生放送:閉じるボタンを押しやすくしました。
不具合修正
生放送:一部公式番組でフルスク解除時に表示崩れが起きる不具合を修正
生放送:正常な状態で意図せずエラーログが表示されてしまう不具合を修正
細かい修正
動画:各所デザインのズレを修正しました。
生放送:エラーログを5秒後に自動で閉じるようにしました。
裏側の修正
スクリプトを全て見直しました。
スクリプトを軽量化しました。
現在周知の不具合
動画:一部チャンネル動画で貢献度ランキング・広告履歴が表示されない不具合
上記不具合に関して、不具合を直すには動画IDの取得方法をまるごと見直す必要が出てきてます…そこらへんも含めて対応検討中なのでもう少々お待ち下さい。なにかいい案ある方は GitHubのissue へコメントお願いします。
また、こんな機能欲しい!、バグってるから直して!っていう連絡は以下までお願いします。
@nekozuki_dev
特設サイト専用フォーム
AyumuNekozuki/nicoad-ex
今回のアプデを解説拡張機能のボタンをわかりやすくしました
状況によっては「ex.」の文字が小さく見づらかったので、広告アイコン全体をオレンジ色にしました。また、今回アイコン画像の形式を PNG から SVG へ変更したので、ダークモード拡張機能等が入っていても綺麗に表示されるかと思います。
生放送:閉じるボタンを押しやすくしました
これまで閉じるボタンが広告画面と被り、押しにくい状態でした。今回新しくヘッダー部分を作り、ボタンを押しやすくしました。
ほかいろいろと不具合が治っていたり、表示が綺麗になっていたりします。というのも、スクリプトをほぼすべて書き直しました。
かなりバグ取りをしましたが、なにかバグが有りましたらご連絡ください。
アップデートについてFirefox版は、すでに審査が終了し更新可能です。Chrome版は、前回に引き続き、新型コロナの影響で審査が送れています。今しばらくお待ち下さい。GitHubのReleaseタブから今回のバージョンも直DL可能です。開発への参加お待ちしております。
DLはコチラから!
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});
マストドンインスタンスを立てた
オリジナルインスタンスを立てました!!!
知識なくても2日で立てられるので 💪
技術系、実際に立ててみたい人はコチラをどうぞ
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});
AWS Educateは色々とややこしい
どうも猫月あゆむです。AWS Educateを触ってみたのでその感想です。
前提まず、今回話すのは AWS Educateという教育機関向けのAWSです。
そして、今回はN高のアカウントで触るので、加盟校(高校)の利点が利用できる状態のお話です。まぁこれ以上のプランはEducateには無い(たぶん)と思います。
使ってみて今回、Mastodonのインスタンスを建てました。Mastdon構築で詰まったこととかはまた後日。
メリットえっと。利点わからない…..学校に所属する間はいろんな機能が無料ってことぐらいですかね…?あと100ドルぐらいクレジットが付いてくる
デメリットその1:いろんな機能が「使えない」「vocareum」という外部サイトを経由して入るんですが、そのせいでいろいろな機能が使えません。
例えば「アカウント情報」。メールアドレスとかの変更とかできません。SES(メール関連)とかも全然ダメでした。
その2:メリットが状況次第ではほぼ無いというのも、先程「学校に所属する間はいろんな機能が無料」といいました。ですが、通常のAWSには、初回登録から12ヶ月無料という特典があります。
そのため、自分のような、卒業まで1年を切っている人であれば、別にそこまで変わりません。
結論と検討している人へ簡単な目安作ったのでどうぞ
AWS Educate がオススメの人
ちょっと触ってみたいだけの人
やりたいことが明確に決まっていて、必要なツールも全てEducateの利用できる範囲内に収まる人
卒業まである程度年月がある人
AWS がオススメの人
やりたいことが明確に決まっているが、Educateの範囲内に収まらない人
アカウントの切り替えが面倒な人
卒業まで年月が無く、卒業後もAWSを触るかもという人
ざっとこんな感じです。
nextオリジナルマストドンインスタンス立てた
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});
Bootstrapを使ってみた
ねこづきあゆむです。今日はBootstrapを使って「ニコニ広告ex.」のサイトをリニューアルしました。
Bootstarapとは?
Bootstrapはレスポンシブデザインに対応したフロントエンドのフレームワーク
https://techacademy.jp/magazine/6270
簡単に言うと、CSSファイルの集合体(たぶんちがう)です。htmlファイルでクラス指定するだけで、Bootstrapのスタイルできれいな感じにしてくれます。
例えば…
index.html123<a href="#dl" class="btn btn-primary btn-lg" role="button" aria-pressed="true"> <i class="fas fa-download"></i>ダウンロード</a>
こんな感じで、特定の class を指定してあげるだけできれいな感じにしてくれます。
使ってみて一長一短でした。
メリット要素を形にしやすい思っていたとおりにクラス指定するだけで大部分ができるのでとても楽です。ナビゲーションバーとかもサクッと作れてしまったのでびっくりしました
レスポンシブ対応がしやすい自分が頑張らなくてもレスポンシブになるのでとても楽。
デメリットオリジナリティを出しづらいどうしても、オリジナリティを出しづらいです。先程ダウンロードボタンの画像を貼りましたが、あのボタン色んな所にありそうですよね。そんな感じでオリジナリティが出しづらいです。
作っていると既存サイトに引っ張られやすい自分だけかな?作ってて、これいいなあれいいなという感じで詰め込んでいったらN Airのサイトっぽくなってしまいました。(特にDLリンクより下の部分)どうしてもパーツで似たのがあると引っ張られる感じがします。
総合評価個人的にはうーん…っていう感じでした。ただ、今後いろんなプロダクトを作っていくとどこかで確実に使うことになりそうなので多少の勉強はしておいたほうが良い気がします。
まぁ今後、趣味で作ったプロダクトのサイトには導入しません。
あと、Fontawesomeとマッチしすぎてやばいw
おわりに2・3時間で完成させるつもりが、色々ハマってしまって結局まる1日かかりました。家での自粛期間ももうそろそろ終わりそうなので、この間にできること・やりたいことをじゃんじゃんやりたいです。
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});
Chromeの通知がうるさいので静かにさせた
はじめに環境は以下の通り。
Windows 10
Google Chrome 81.0
通知がうるさい自分は、niconicoやYouTubeの通知をPCのChromeでオンにしている。というのも、スマホよりPCのほうを多用しており、PCに来たほうが何かと確認が楽なのである。
だが、いつだっただろうか。Chromeの通知がWindows10のネイティブ通知として来るようになってしまい、心底うんざりしている。というのもいくつかデメリットが有るのだ。
ネイティブ通知のデメリットその1:音が鳴るうるさい。表示するだけでいいのに音がなるせいでうるさい。
その2:表示が遅い、複数個出ないブラウザ起動後、起動までに溜まっていた通知がダダダダと表示される。表示するのは良いのだが、複数個出ない。
しかもこの際、まいどまいど音がなるのだ。まじうるさい。
その3:通知が溜まるスマホでは通知が溜まるのは当たり前だ。見逃した通知を後から見れるようになっている。
Windows10にも同様の機能がついているのだが、イマイチ使いづらい。スマホと違い、1個1個の通知が多少の大きさがあるため、4,5個通知が溜まっただけで表示範囲からはみ出てしまう。こうなるとスクロールして見るほかない。
その4:YouTubeの通知がうざいうざいと書いたが、通知が来る分には構わない。自分にも追っているVTuberの一人や二人はいるし、動画の更新情報だって知りたい。だが、他のサイトの通知とは違い「閉じる」ボタンがバカでかく表示される。流石にこれはうざいし通知領域の幅をとってしまう。
どうすればいい?解決への条件
通知が来た際の効果音を消す、もしくは小さくする
Windows10のネイティブ通知を使わない
上記2つが解決への条件だ。Windows10のネイティブ通知を使わないことで、「表示が遅い/複数個表示されない」「通知が溜まる」という問題を解消できる。
実際に設定してみるChromeのアドレスバーに以下のURLを打ち込む。
chrome://flags/
すると全面英語のページが出てくる。このページはChromeの「実験中機能」を使えるようにする設定画面だ。
上部にある警告を読み、同意できるものだけこの先に進もう。
上にある検索ボックスで「notifications」と検索。日本語訳すると「通知」だ。
すると3つの設定項目が出てくる。
この中から「Enable native notifications.」=「ネイティブ通知を有効にします。」というものを探す。
現在、Defaultになっているが、これをDisabled=無効にし、ブラウザを再起動。
すると、
上のように、Chrome自体の通知で飛んでくるようになる。幸いなことに、何も設定せずとも音がならないようになっている。ありがたいことだ。
おわりに上述した設定をON/OFFすることで通知の種類を変えることができるのでぜひ。たぶんMacでも同じことができるはず。
Webサイトからの通知のお話をしたが、当ブログでWeb Pushを導入する予定はないのでご安心を。
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});

「ニコニ広告ex.」v1.1.4 リリースしました
猫月あゆむです。以前から開発しているブラウザ拡張機能「ニコニ広告ex.」のv1.1.4をリリースしました。
変更内容のお知らせの前に、この拡張機能についてサクッと説明したいと思います。
ニコニ広告ex. とはニコニコ動画・ニコニコ生放送の視聴ページに「ニコニ広告」のボタンがあると思います。通常、それをクリックすると「ポップアップウィンドウ」としてニコニ広告の画面が表示されるんですが、この拡張機能では、生放送の「ギフト」のように、コメント欄上に表示してくれる拡張機能となります。
DLはコチラから!
v1.1.4 更新情報ということで更新情報です。
不具合修正
ポップアップ画面からチケットの確認、福引などが行えなかった不具合を修正しました。
一部チャンネル動画(URLにsoID表記のない動画)でニコニ広告がポップアップで出てしまう不具合を修正しました。
軽微な修正
「ニコニ広告ex.」特設サイトのURLが変わったため、各所修正しました。
現在確認済みの不具合
soでないチャンネル動画で貢献度ランキングが表示されない 詳細
上記不具合に関して、不具合を直すには動画IDの取得方法をまるごと見直す必要が出てきてます…そこらへんも含めて対応検討中なのでもう少々お待ち下さい。なにかいい案ある方は GitHubのissue へコメントお願いします。
また、こんな機能欲しい!、バグってるから直して!っていう連絡は以下までお願いします。
@nekozuki_dev
特設サイト専用フォーム
AyumuNekozuki/nicoad-ex
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});
サークルサイトをリニューアルしました。
当記事はサークルニュースです。
サークルページをリニューアルしました。
一部アイテムページなど、過去デザインのままになっていますが、少しずつ統一していくので気長にお待ちいただけると幸いです。
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});
XSplitからN Airに移行しました
ども、猫月あゆむです。放送しながら記事書いてます。
N Air配信テスト
タイトル通りです。XSplitからN Airに移行しました。
なぜ変えるの?色んな理由があるんですが、
その1:PCが変わったのでN Airの仕様に縛られることがなくなった前のPCは、ゲーミングノートPCでした。そのため、「統合型グラフィックス」で起動しないと一部映像が真っ黒になってしまいました。
ちなみに統合型グラフィックスというのはグラボ(GTX 1050など)ではなく、CPUの映像出力のやつでやってるので、CPUの使用率が上がり…最終的には固まる、強制終了、PCが落ちるなどがありました。
ですが先日(といっても12月ですが)、PCを新調してノートではなくなったのでこの仕様に縛られることがなくなりました。
その2:XSplitはお金がかかるこれまでお金払って使ってきたんですが、最近、
放送頻度が少なくなってきてる
YouTubeとのサイマル放送をやることがなくなった
ので、いいかなって。月800円ちょい、3ヶ月で3000円ないぐらいかかるので出費を抑えるのにもいいかなって思いました。
なぜ、N Airに?基本、自分はニコ生しかやらない人間なので、他のOBSとかSteamlabsとかを使うメリットがそこまでありませんでした。
以前使ってたときと比べて、バグは減り、コメント閲覧など便利な機能が追加されたそうなのでN Airにしました。
さいごに放送頻度が増えるわけじゃないですが、ときたま放送来ていただけると幸いです
【ニコニコ動画】ねこが集まる放送局 【ニコニコ動画】ねこづきあゆむのさぎょうべや
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});

4月の近況報告
どうも猫月あゆむです。4月の近況報告+先月忘れていた3月の近況報告です。
3月の近況報告3月11日:超会議中止・ネット超会議開催発表その日、バイト終わってカラオケ行こうとしてたところで通知が。カラオケ歌える気分じゃなかったけれど、「ぼくとわたしとニコニコ動画」や「超会議メドレー」とか放送しながら歌いました。
3月15日:東京行き中止3月中旬、とある予定(niconico関連)で東京に行く予定でしたが、コロナ影響でやむなく中止に。とある予定については、運営さんからもうちょいすれば発表される…はず…?
上記予定がなくなったので、「Beats Studio3 Wireless」を購入。レビューはこちら
3月下旬:nasne(中古)を衝動買い“名機” nasneを中古で購入しました。17000ぐらいでした。
4月からのアニメ録画用で使っていますが、今の所「邪神ちゃんドロップキック2期」と「LISTENERS」しか使えてないです。他はdアニメニコニコ支店で済んでいるので…
ニコニコ実況コメ、面白いw後日レビューします。
3月下旬:「バーチャル中曽根OFF」撮影開始3月下旬~4月上旬(ネット超会議始まるまで)はこれ関係しかしてなかったです。良かったらご覧ください。
【Full ver.】#バーチャル中曽根OFF【#ネット超会議2020 ユーザー企画】
3月総まとめ年度末ですが、N高行事は特に無く。コロナの影響で予定を全部壊された1ヶ月でした。
ちなみに開発系は何一つ進んでいません。
4月近況報告4月上旬:「バーチャル中曽根OFF」編集作業3徹ぐらいしてようやく動画が完成しました。
本当はもっと余裕ある状態で完成するはずだったんですが、Premiereがバグりまくりで…しかも、使っているのがN高生申請すれば無料で使えるプランなんですが、バグの件サポートに申請したら、
サポート「学校側で聞いてください」自分「・・・は?」学校の先生「・・・なぜ学校・・・」
先生も困惑してました。結局原因わからず、過去バージョンのダウングレードでなんとか編集できるレベルにはなりましたが、画質がなぜか悪くなってしまいました…(ごめんなさい)
次回は、ちゃんとPremiereが動くことを確認してから撮影編集をすると心に誓った猫月あゆむでした。
4月中旬:ニコニコネット超会議2020超インフォから始まり、超打ち上げ2次会で終わったネット超会議。いろいろな思い出ができました。
見ているこちらもどれを見るか、どんなユーザー企画を立てるか大変でしたが、それ以上に大変だったのは運営さんでしょう。このご時世の中、できる限りリモートでできる企画を練り直し、企画によってはずっとネットに張り付いていなければならない。本当にお疲れさまでした。そしてありがとうございました…!
また、自分のユーザー企画に参加していただいた皆様もこの場を借りまして。ありがとうございました!
4月下旬:hexoでブログを立てるシリーズ タグ:hexoでブログを立てるシリーズ
紆余曲折しましたが、なんとか完成しました。細かいところは使いつつ、調節していきます。
これまで、普通のhtml/cssといったウェブページ作成はいろいろなところで応用が効くので身についてきた部分があります。(ニコニコ大百科編集など)ですが、git(cui操作)とかは学校の教材しかあまり触ってこなかったので、しっかりと身についていない部分が多かったです。それを今回のhexoブログ構築である程度は”慣れる”ことができたと思います。
「習うより慣れろ」ということわざ(?)もありますが、それを実感した下旬でした。
何かありましたら Pullreqest , issue よりお待ちしております。
AyumuNekozuki/blog_nekozuki_me
4月総まとめバイトがコロナ影響でお休みになったことで、本当はバイトで楽しみ半減だったネット超会議を思う存分楽しむことができました。
ですが、技術系がhexoブログのみで終わってしまったので少しペースアップしないとなと思っています。
5月目標
GW中にできることを進めていく!というのも、一応GWが終わるとバイトが再開します(予定)。なのでそれまでに日頃できないことをじゃんじゃんやりたいです。
学校の教材終わらそう!高校3年生です。さっさと終わらさないと大変なことになるぞはよやれ。
プログラミング教材も進めていけ~卒業と同時にN予備校の利用権限が消えます。卒業後やるには月1000円の課金だぞはよやれ。(いうて1000円そこまでじゃないけど、東京での新生活できるだけ出費を抑えたい)
ざっとこんな感じです。5月というよりも、今後を見極めて動いていく必要があるかなと思っています。
今月はここまで。先月のようにサボらないようにしたいね。(1ヶ月何をやったのかしっかり把握するためにも。)
と、最後に。フレカフェ1周年おめでとうございます!!!!(ブログ書きながら記念生放送見てた)
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});

プリコネR、復帰しました
どうも、猫月あゆむです。プリンセスコネクト!Re:Dive 復帰しました。
というのも、アニメ見てたら久々にやりたくなったんです1話&最新話無料なのでぜひ
プリンセスコネクト!Re:Dive 第1話「冒険の始まり ~夕焼け空にきのこのソテー~」
もともと、半年前ぐらいまでちょこっとやってたんですけど、いつの間にかログインしなくなっちゃって。
この前ログインしたら…
189日ぶりジュエル x18000スタミナ x2536
やべぇwwそしてこれを約3日で溶かしましたwww
いまスタミナなくて困ってます… 😣
ちなみに、コッコロたん推しです★6コッコロの素材集め(メモリーピースとか)終わったけれど、シャドウコッコロが強すぎて今のレベルじゃ倒せない…
パーティーはこんな感じ。
いろいろ足りてないですね頑張ります
こんな僕にフレンド組んでくださる方いればお願いします…!(残り29人分枠空いてます)
クランは、ちょっと入りたいクランあるんで、そこのクラン落ちてたら拾ってください…!
プリコネ復帰したっていうお話でした。
ちょっと宣伝!
バーチャルキャストラジオ企画、略して「Vラジ!」新しく運営メンバーに就任しました!
次回放送は 5/14 (木) 21:30~ 予定です!ぜひ御覧ください!!
放送コミュはこちらから。
【ニコニコ動画】Vラジ(仮)放送局
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});

過去記事をインポートしました
どうも、猫月あゆむです。一気に投稿数増えましたねw
それもそのはず、WordPressとブロマガから過去記事をインポートしました。
なぜインポートしたの?過去の自分の記事を1箇所で確認したかったからです。
数年前、自分はどんなことをしていたのか、この出来事はいつだったのか。たとえ黒歴史であっても、(よっぽどじゃなければ)数年後笑って過ごせると思いますw
どうやったの?WordPress編こちらを利用させていただきました。
WordPress管理ツールのエクスポートから記事データをxml形式で全て引っ張り出し、↑のツールを使ってインポートします。
あとは、全記事のカテゴリ・タグを自らの手で修正して、全記事の上部にインポートした旨のメッセージを入れました。
ブロマガ編ブロマガには「エクスポート」機能は存在しません。なので全て手動です。疲れました。
最後に全手動はきつい。
一応過去ブログも消えてるわけではないのでよかったら見てね
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});
【レビュー】Beats Studio3 Wireless を1ヶ月半ほど使ってみた話。
どうも、猫月あゆむです。初のレビュー記事です。画像は無いです。
初のレビュー記事となる今回は Beats Studio3 Wireless を書いていこうと思います。
なぜ買ったのか実を言うと、3月中旬にとある用事で東京に行く予定でした。ですが、コロナの関係でその予定がなくなってしまったので、その余った旅費で買いました。
自分が買ったときは Amazonで税込 ¥37,959 でした。(旅費の残りは貯金)
今思うと、なぜ買ったの!?って気もしますが、買ってよかったです。
買ってよかったと思える面その1:iPhone/iPadとのペアリングが楽これはApple傘下にいることならではでしょう。
まじで初回のペアリングが楽だった。beats起動 → iPhone画面に接続文字が出てくる → タップ → 終わり!
まじでこれは神仕様ですわ。
その2:バッテリーの持ちが良いくっそ良いです。24時間ずっと聞いててほぼ1日持たないぐらいです。ただ、普通に考えてずっと聞いてることなんて滅多にないと思うので大丈夫でしょう。
ちなみに↑の持ち時間は「ノイズキャンセリング」オン時なので、オフにすればもっと持つはず。
その3:ワイヤレスなのに音がいいAirPodsと比べ物になりません(当たり前だ)
その4:有線でも使えるこれ強いのでは。
付属(市販でもOK)のAUXで繋げば普通に音が聞けます。ただしバッテリーがないと動きません。(ノイキャンとかあるんで…)
イマイチだった点その1:長時間つけると耳が痛い3,4時間ほど付けてると耳が痛くなってきます。このヘッドホン自体の重さがある程度あるんで、結構つらいです。
たぶん、多少頭の大きい、ヘッドホンにフィットする人なら大丈夫かなと思います。
その2:ノイキャンがそこまで…完全なノイキャンではないです。まぁ完全なノイキャンだと逆に危険なのでまぁ良い点なのかもしれませんが。
普通に車通りの多い道を歩いていると、ぶーんっていう音が聞こえてきます。そこまで車通りないなら全然大丈夫。
飛行機は試す機会がなかったのでまた今度。
個人的には、昔持ってた ウォークマンS10シリーズ のノイキャンのほうが優秀でした。
その3:WinPCの電源を付けると強制的にWinPCに持っていかれるこれは完全に誤算でした…
こういうシチュエーションで起こります。
iPhoneで音楽を聞いていて
bluetoothペアリング済みのWindowsPCの電源を付けると
iPhoneとの通信が切れ、WinPCと強制的に接続される
これ、なんとかならんかね……
その4:値段が高いそりゃね…
こんな人にオススメ!身の回りの環境をApple製品で揃えている人ペアリングのしやすさ・各端末の切り替えやすさはダントツですね
AppleWatchを持っている人ヘッドホン本体にボリューム、再生・一時停止ボタンはありますが、Prev/Skipボタンがないです。出先で、スマホを取り出さずに、ささっと曲を切り替えたいならばAppleWatchが必須でしょう。
ちなみに、AirPodsのようなジェスチャー機能はないです。
総評個人的総評 ★★★★☆ (星4つ)
かなり良い製品だけど、あと1歩が…って感じ。ただ、身の回りをApple製品で揃えている人で、AirPods/AirPodsProで物足りない、イヤホンよりヘッドホン派という人は選択肢に入れても良いかも。
Android派の人は、別にこれじゃなくても感。
自身の財布としっかり相談しましょう。
いかがだったでしょうか。また1ヶ月後ぐらいに、次は中古で買った “名機”nasne と ニコニコ実況 のお話をしようと思います。
それでは~~ノシノシ
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});
しもやけ、つらい。
どうも、猫月あゆむです。昨日寝たら、めっちゃ足が痒くて途中で目が覚めました;;
ということで、朝になって真っ先にマツキヨに行って薬を買って塗りました。
しもやけって寒暖差で起こるんですね。自分、年中末端冷え性なので結構辛いのです。
去年そこまで起こらなかったので大丈夫かなぁと思ったんですけどね。
今夜も鹿児島は寒くなるらしいです。暖かくして寝ます。
今日は短いですがここらで。(昨日3本上げたので…
ノシノシ
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});
自作Webフォントを導入したお話。(詳細版)
どうも猫月あゆむです。ブログ構築2日目の記事 で、自作フォントを導入したよ!っていうお話をしたと思います。ツイッターで質問が来てたのでそれの詳しい解説です。
導入方法導入方法自体は結構簡単でした。
参考:Webアイコン「IcoMoon」の使い方とアイコンの追加方法
まず、フォント化したい画像、アイコンとかを SVG 形式で用意します。画像が用意できたら、icomoon というサイトを利用してフォント化します。
フォント化方法ざっとこんな感じ。わからないことあったらコメント欄へGO
右上インポートからSVGを読み込む
入れたいアイコンを選択し、右下「Genelate font」をクリック
アイコン名、大きさなどを調整
画面右下ダウンロードの隣の をクリック
項目を以下のように改変
理由としては、
Class Prefix fontawesomeとの競合避けその1
Use i hexoで色んな所で使うにはfontawesomeと合わせないと、_config.ymlから編集できない(うまく反映されない)
って感じです。
設定できたらダウンロード。
hexoへ導入ここから先は、利用しているテーマによってかなり変わってきます。当ブログでは「Icarus」を利用しているのを前提に解説します。
まず、DLしたファイルを以下のように配置します。
12345678910blogdir/ └ themes/ └ icarus/ └ source/ ├ css/ ├ img/ └ fonts/ //なければmkdir ├ style.css //DLファイル ├ selection.json //DLファイル └ fonts/ //DLファイル
次に、head.jsx を編集します。head.jsxは以下の場所に格納されています。
1...blogdir/themes/icarus/layout/common/head.jsx
そして以下のように書き換えます。
head.jsx1234- <link rel="stylesheet" href={iconcdn()} />+ <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.13.0/css/all.css" /> + <link rel="stylesheet" href="/fonts/style.css" />
_config.ymlで指定している fontawesomeを切って、直で読み込ませます。あと、さっきの自作フォントも読み込ませます。
直で読み込ませてるのは競合対策です。
これで、<i class="icon2-niconico"></i> ってすると 読み込めます。
おまけ:プロフィールに自作フォントを使うthemes/icarus/_config.yml12345678910111213social_links: Github: icon: fab fa-github url: 'https://github.com/AyumuNekozuki' Twitter: icon: fab fa-twitter url: 'https://twitter.com/nekozuki_2525' niconico: icon: icon2-niconico url: 'https://www.nicovideo.jp/user/45048152' RSS: icon: fas fa-rss url: /atom.xml
以上。何か質問あったらコメント欄へどうぞ。
最後に一言。アウトプットは大事。
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});
hexoを使ってブログを立ててみる【4日目】
3日坊主にならなくてよかったよ。どうも猫月あゆむです。
今日はトップに画像はありません。画像貼っちゃうとトップページに乗ったときにくっそ長くなってしまったので…
ということで、画像を貼ります。ペタリ
そう。今日はスマホです。docomoユーザーで、充電が84%で…とか言う話ではなくて、
PWA のお話です。
PWAとはなんぞや?
PWA(Progressive Web Apps)はグーグルがモバイルユーザーのユーザー体験向上を目的とし、今までのWebアプリ(サービス)にWebとアプリの両方の利点を兼ね備えた仕組みのことです。
引用元 : Webディレクターが知らないとマズい!Googleの注目プロジェクトPWAって何?
らしいです。簡単に言うと、Webサイトをアプリケーション化すると言ったほうがわかりやすいでしょうか。
Twitterとか、ニコ厨だったらわかるビビットアーミー(広告がうるさいやつ)なんかも対応してます。
PWAの利点利点としてはこんな感じ。
・アドレスバー、タブボタンとかがないので、誤タップが減る・各OSのアプリストアを使わなくて良い → 審査で引っかかることがない・GPS取得ができる(IPアドレス補足じゃなくてガチのGPS)・プッシュ通知ができる
利点でも欠点でもない(人による)・ブラウザ → メニュー → ホーム画面に追加しないと使えない
欠点・https(SSL)じゃないと使えない
ざっとこんな感じです。
利点でも欠点でもないやつは、アプリストアを使わなくて良いという利点と、ホーム画面に追加が初見勢にとってはわかりにくいという欠点が合わさってできているから。
なぜ導入したの?ねころぐに導入したのは、単に興味本位です。簡単に導入できるライブラリがあったので、入れてみました。
一応Aboutにも書いてますが、GPSなどの位置情報は取得してないし、今の所プッシュ通知も行かないと思うので大丈夫です。
他の変更点その1、GitHub Emoji を導入しました。😄ホントはTwemojiを導入したかった。いずれTwemojiに変わってると思います。
その2、リポジトリに MIT License を付与しました。詳しくは About ページ、メインリポジトリのRead.mdをご確認ください。
当ブログに書いた、猫月あゆむ個人の発言は CC BY-ND 4.0 で利用可能です。
また、後術するGitHubリポジトリに記載されている当サイトのデータは MIT ライセンスで利用可能です。
引用元 : ねころぐについて
おわりに今日で、カスタム絵文字以外のブログ構築が終わりました。カスタム絵文字は、絵文字データを登録するだけ(GitHubEmojiさんにカスタム機能がついてた)なので、暇なときにでも追加していくと思います。
せっかくここまで、連日ブログを書いてるので、明日以降も何かしらのブログを書こうと思います。
明日からは、今年度のポートフォリオを作成します。デザイン案とかは結構前にできてるので、中身をバンバン作っていくよ~~お楽しみに。
後でもう1本ブログ上げるかも。ノシノシ
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});
hexoを使ってブログを立ててみる【3日目】
どうも、猫月あゆむです。3日目です。明日以降、3日坊主にならないことを祈って書いてます。
今日は、細かいけどでかい変更祭りです。
今日の機能追加今日は色々追加したので、一つずつ説明します。
① 共有ボタンを追加しました。この記事の一番下とかに共有ボタンができてます。よかったらここから拡散よろしくね。
② コメント機能を追加しました。DISQUSというコメント機能を追加しました。記事ごとにコメントを付けれます。コメント書くときのマナーは守ってね
コメント機能について - About
③ 404 ができましたできてしまいました。ページがないところに行くと自動的に404に飛ばされます。404に共有ボタンはないけど、コメント機能あえて残してるので、雑談にでも自由に使ってくださいww
404 - Page not found
④ RSS / サイトマップができましたテレビちゃんの右のアイコンからRSS見れます。
RSSリーダーをお使いの方はご利用ください。
サイトマップもできました。検索から人が来やすくなる…はず…(たぶん)
⑤ Googleアナリティクスを導入しました導入したところで…ほぼ見ないと思う。気になる方はCookieをオフにお願いします。
データ収集について - About
⑥ トップページに「お知らせ」を作りました。無理やり感半端ない。
日付10年後になってるしwwいつか、初来訪時のデフォルトをナイトモードにしたいです。(今はライト)
今日の変更変更点はそこまで無いです。
① フォントを変更しました。「今」とかの漢字の中国感がなくなったと思います。
② カテゴリページへの動線を消しました
どうせカテゴリ設定しないし。タグ乱用するひとなので、タグ一覧からどうぞ。
タグ一覧 カテゴリ一覧 ←からっぽ
③ 記事最後のタグ表記を # から に変えました一番下、共有ボタンの上です。後で見てみてね
おわりにざっとこんな感じです。変更点の羅列だけで結構長くなっちゃいました…
今後の予定今後の予定はこんな感じ。
・カスタム絵文字の追加
hexoブログの作成がある程度終わったあと・今年度の新ポートフォリオ作成・猫月あゆむPORTAL(β)の改修
ブログ改修も残り少しとなりました。その後何しようかなって考えとかないとですね…
というわけで今日はココまで。ノシノシ
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});
hexoを使ってブログを立ててみる【2日目】
ども、猫月あゆむです。
だいぶデザイン変わりましたね。それもそのはず。テーマを変えました。
個人的に、いわゆる「ダークテーマ(ナイトモード)」が好きで、最初に入れた「gal」というテーマと、「Amazing」というライト&ダークが切り替えられるテーマ。どちらにするかめっちゃ悩んでました。
▼ 昨日のスクショ(テーマ「gal」のリメイク)
なんで変えたの?前回お話した、「背景チカチカ問題」が修正できず、ただ時間だけが流れてしまっていたので、いっそテーマを変えてみようということになりました。
当初悩んでいた「Amazing」はダークモードへの切り替えができたんですが、「Icarus」というテーマをベースに追加追加してできていたものだったので、日本語への翻訳・細かい箇所の修正ができませんでした。
そんなとき、「Amazing」ダークモード変更の根幹部分のものを見つけたんですが、確認してみたら、Amazing入れるよりよっぽどやりやすい!ということで、結果「Icarus」+ night をテーマとして選択しました。
サイト右上の電球をクリックで明るくなります。
「Icarus」nightの導入方法はコチラ ※ 英語&中国語
今日やったこと今日は、上述した テーマの変更・導入・各所修正 をしました。
次に、「サイトロゴ」「ファビコン」を設定しました。サイトの上下にある「ねころぐ」っていうやつと、タブのところにあるアイコンです。なぜかSVGで作ったら読み込んでくれなかったので、仕方なくpngです…..
それともう一つ。お気づきの人もいるかと思います。自作Webフォントを追加しました。
今回導入したのはこの2つ。
ニコニコテレビちゃんと新しい生放送のアイコンの子。
fontawesomeさんと競合しちゃってずっと奮闘してましたが、なんとか導入できました!!右上フォローボタンの下にずっといる予定です。
今後の予定ざっとこんな感じです。
・記事下共有ボタン追加・Aboutページの作成・カスタム絵文字の追加・RSSの追加・サイトマップの追加・フォントを日本語ベースに(特に漢字)
hexoブログの作成がある程度終わったあと・今年度の新ポートフォリオ作成・猫月あゆむPORTAL(β)の改修
って感じです。昨日よりは減りましたw
というわけで夜も遅いので今日はココまで。ノシノシ~
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});
hexoを使ってブログを立ててみる【1日目】
※ 現在各所調整中なので、背景チカチカしたり、ところどころ崩れちゃったりしてます。後日治すのでそれまでお待ちを….!
はじめまして。猫月あゆむです。普段はニコニコ生放送で放送してたり、バーチャル空間で遊んでたりしています。リアルでは、高校3年生です。
これまで、ブロマガ → WordPress → ブロマガ と使ってきたんですが、なかなかオリジナリティを出せず、あまり書けていませんでした。そんなとき、友人の一人がhexoでブログを立てているのを見て、これちょっとやってみようということで作っています。
「hexoでブログを立てるシリーズ」では、このブログを作る上で起こった小話をちょこちょこ投稿できたらなと思っています。技術寄りのやつはQiitaに持っていくので、そこまで難しくないよ~~
と、ここまで書きましたが。hexoでまともなブログ文章書くの、これが初めてなんです。いざプレビューしてみたら、フォントが変!なに、タイトルのちっちゃい「つ」ww 大きくなってるしwまぁテーマが中国の方のものをお借りしているので、自力で修正するしかないんですけどね….(後日やります)
とりあえず、話を戻しますw
その1:数回リセットした話。というのも、試行錯誤の繰り返しでした。
1度目。導入に成功するものの、GitHub Pagesで正常に公開できない。なんでだろ~と小4時間探した末、わからなかったので全消去して再度入れ直しました….
2度目。↑でダメならnetlifyを使おう!ってことでセットアップ始めて、1度目終わりのところまで来たんですが、その後がエラー祭り。頭の中が全て???で埋まって思考停止したので、その日は諦めました。
ネット超会議が過ぎ、昨日。
そう言えばということで3度目の構築をはじめました。やはりエラー祭りでしたが、なんとか構築できた~よかったねという話でした。
その2:背景がおかしい現在進行系でおかしいです。
背景、スライドショーになってて(PC/Tabのみ)、特定ディレクトリ内をランダムで流してくれるんですが、はっきりいって鬱陶しい。ということで切りたいんですが、今の所切り方を見つけられてません。
なので代替策で、白画像用意して1枚だけにすれば…!って思ったんですけど、なぜかブラウザが落ちる(←なぜ???)
1枚ダメ、2枚ダメ….というふうにしていって現在6枚で動作中です。
なんとかしてスライドショー切りたい….
その3:これはココ!っていうのを探すの楽しいwhexo って普通のHTMLブログのいわば “ジェネレーター” なんですよ。なので、サイドパネルのところとかバッラバラに分散してて、それがどこにあるのか探すの楽しかったです。
そして案外、簡単な仕組みで書かれていることを知ったので、数分でTwitterとかも埋め込んでみましたw
結構オリジナリティ出せそうですが、流石にテーマ1からというのはレベルが高そうです。
おわりに。今後の予定ということで簡単な小話でした。
今後はこんなことをやる予定です。
表示崩れ/バグ修正・背景のチカチカ・フッターが読みづらい・検索ボックス入力時、表示がうるさい・検索システムが動いてない・中国語→日本語の翻訳作業
仕様変更・各リンクなどのベース色をきみどりに・フォントを日本語ベースに(特に漢字)
追加機能・カスタム絵文字の追加・RSSの追加・サイトマップの追加・ロゴ/ファビコン作成・各記事からのSNS拡散ツール導入
hexoブログの作成がある程度終わったあと・今年度の新ポートフォリオ作成・猫月あゆむPORTAL(β)の改修
やることたくさん……バイトがコロナの影響でお休みになってる今、できるだけじゃんじゃんやりたいことをやっていこうと思います!!
それでは今日はここらへんで。ノシノシ
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});

メインブログをコチラに戻します
この記事はブロマガから移行した記事です。
元記事はこちらhttps://ch.nicovideo.jp/nekozuki_blog/blomaga/ar1873503
お久しぶりです。猫月あゆむです。
先日まで(というかさっきまで)WordPressのブログをメインにしていたんですが、メインブログをコチラに戻すことにしました。
今回の動機はコチラから。
○今後の動向現在、「nekozuki.me」のドメイン移管を行ってます。
というのも、ドメインと同時にブログを買ってたので、WordPressにくっついてたんです。それを切り離して、ドメイン単体をお名前.comに移管、旧ブログは無料ドメイン(nekozukime.wordpress.com)でアーカイブとして残す予定です。
移管したドメインは、GitHubPagesかなんかで「猫月あゆむポータル」的なものを作ろうと思ってます。
こちらのブロマガでは、これまでどおりのブログとしての運用をする予定です。また、前のブログでできなかった、iframeを埋め込んでボカロ曲紹介とかもやろうかなと思ってます。
○終わりにほぼいつも思いつきで行動してるので急な発表(?)になったかもしれませんが、今後も猫月あゆむをよろしくお願い致します。
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});

WordPressブログをブロマガへ移管します
この記事はWordPressから移行した記事です。
いままでご愛読していただいた皆さん、ありがとうございました。
決断理由はいくつかありますが主にこんな感じです。
・iframeを埋め込むにはビジネスプラン以上出ないと使えない ボカロ曲の紹介とかしたいので…
・そこまで更新しないブログにお金払う必要ある?
・そもそも契約理由はドメインのみ
こんな感じです。
今後の流れとしては
①こちらのブログは別ドメインで維持予定(無料プランのため広告が表示されるかも?)
②メインブログをブロマガに戻す
以上2点です。
今までご愛読していただいた皆さん、ありがとうございました。
ブロマガでもよろしくお願い致します。
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});
AppleWatch買ったよっていうお話。
この記事はWordPressから移行した記事です。
お久しぶりです。
先日、AppleWatchを買いました。
普通は9月(新機種発表会)まで待つんだけどね、待てなかったww
てことで簡単なレビュー的なものです。
買ったのはこれ。
Series4 GPS 40mm スペースグレイアルミニウム + ブラックスポーツバンド
まず、一言。買ってよかった。
買ったのはGPSモデルなんでiPhoneないと使いものにならないけど、この時代、スマホを持ち歩かないことなんてないと思うので全く問題はないです。
支払いもこれだけで….って言いたいところなんだけど、LINE Pay派で、しかも鹿児島(市バス市電はSuica使えない)なのであんまりそこらへんは役に立ってないです。(たま~にJR乗るときにSuica使えるくらい)
あと結構使ってるのが「再生中」と「タイマー」。
再生中はスマホ置いてアニメみたりってときにわざわざスマホ持って音量調節しなくても手元でできるからめっちゃ楽。歩いてる時とかもカバンから出さずに音量調節できるのでめっちゃ重宝してます
タイマーはカップラーメン作る時に楽です。
HEY Siri タイマー3分 で勝手にやってくれるのでw
まぁそんな感じで使ってます
気になる人は買ってみてね
余談
WWDC2019見ましたか?Watch OS 6が来るらしいです
個人的に計算機アプリと、watch単体でAppStoreが使えるようになるとこが嬉しいです
ついでに、iOS13。ダークモードキターーー!!
気長に待ちましょう。以上、猫月遥歩でした。
document.querySelectorAll('.twemoji')
.forEach(el => {
if (!el.dataset.src) { return; }
const img = document.createElement('img');
img.style = 'display:none !important;';
img.src = el.dataset.src;
img.addEventListener('error', () => {
img.remove();
el.style.color = 'inherit';
el.style.backgroundImage = 'none';
el.style.background = 'none';
});
img.addEventListener('load', () => {
img.remove();
});
document.body.appendChild(img);
});