ねこづきあゆむのブログ

みすきーねこづき（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、情報がなさすぎて、調べようにも、欲しい情報が見つからないのが辛いですね……。

備忘録的な何かです。環境はこんな感じ。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くん「マイク入ったで」ワイ「っしゃああ！」おわり

お前しょっちゅうリニューアルしてんなって言われそうな気がしてます、猫月遥歩（ねこづきあゆむ）です。この記事を見に来て、大半の人が気づいてると思いますが、（初めて見に来た人がいたらごめんね）このブログをリニューアルしました。びふぉーあふたーびふぉーあふたーリニューアル後の変更点開発言語を Nuxt(Vue) から Nextjs(React) に変更しました各種情報を、ページにアクセスしてから都度取得ではなく、ブログ記事が公開されたタイミングの情報を拾ってくるようになりました。そのため、閲覧スピード（ページ間移動時のレスポンス）が上がりました。UI、デザインをリニューアルしました元のアイコン（ゆかりさん）から、新しいねこづきのバーチャルアバターをベースに、配色し直しましたサムネイル画像サイズを小さくし、可読性を上げました各種UIサイズを調整しました広告を減らしました（サイドバーにあるやつだけになったよ）Twitterタイムラインウィジェットを削除しました新機能と今後追加したいなって思ってる機能たち新機能目次機能をリリースしましたPC版で右サイドバーに出てきます技術系ブログでよく使うと思います今後追加したいなって思ってる機能コメント機能丸2年ぶりぐらいにDisqus復活させます。TOPICS機能ポータルサイト（nekozuki.me）のTOPや、生放送の配信画面下に出てくるTOPICS・お知らせをブログにも表示させたいなって思ってますついでに、ニコ生配信中の時に自動でWEBに「配信中！」みたいな表示を出したいな〜って軽く思ってますが、どっかからAPI探してこないとなので、時間かかる気がします。ニコ生の埋め込みプレーヤー、あれ使ってもいいんだろうか...限定公開記事機能・課金機能Pixiv FANBOXみたいな記事ごとや月払いの課金制の記事を出せるようにしたいなって思ってますFANBOX更新忘れるので、自分のサイトにデータがあった方が楽というかなんというか....w使ってるCMSの規約周りとか諸々確認が必要なのでこれも結構先になると思いますざっとこんな感じでやりたい機能みたいなのを書いてみました。まぁ当分、1年ぐらいはリニューアルはしないと思いますが、ちょくちょく機能追加とかしていったり、もちろん記事も書いていきますのでぜひ、今後ともねころぐをよろしくお願いします！次回更新はたぶん、配信画面・素材について、動画化してそれの補足的な記事を上げると思いますーではでは〜

どうも、ねこづきあゆむです。タイトル通り、このブログ、以下の更新をしました。公開日時と改訂日時を分けて表示「技術部」タグを整理サムネがない記事のOGPがちゃんと表示されるようにしました公開日時と改訂日時を分けて表示しました元々、公開日時だけ表示してたのを、とあるタイミングから改訂日時だけ表示するようにしていました。ですが、このブログ、過去のWordPressとかブロマガで書いていた記事を移行してきた都合上、改訂日時＝移行日の日付になってしまってました。その為、その記事がいつ公開されたのかわからない状態でした。なので、以下のように、公開日時と改訂日時を分けて表示するように改修しました。カレンダーマークが公開日時、鉛筆マークが改訂日時です。これで色々楽になるよ！やったね！「技術部」タグを整理しましたもともと、「技術小話」というタグだったものを「技術部」タグに直して、技術関連の記事は全てここに纏まるようにしました。このブログ自体、自分がただ記事を書いて個人ブログとして運用していたのですが、色々と技術系の記事も流すようになり、まとまっていた方が色々楽だなと気づいたので、タグでまとめました。そのうちカテゴリも再編すると思います。サムネがない記事のOGPがちゃんと表示されるようにしました（当記事みたいに）サムネを設定してない記事をTwitterに共有した際になぜかOGP画像がFaviconになって見た目的にもSEO的にもよろしくなかったので、ちゃんとOGPが設定されるようにしました。元々設定していたはずなんですが、なぜか、meta_imgにどこかのタイミングでfaviconが代入されるらしく...まぁ治せたので良かったです

今回、ブログとポータルサイトを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で受け取ってデプロイ させてます。とりあえず覚え書きでした。

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

どうも、猫月遥歩です。先日、ポータルサイト 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で複数箇所から取ってくる場合の最適化１ページで複数から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を選択して調節すると楽に書けると思います。

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

この記事は 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が、とある１つの記事になっているではありませんか！！なんで...？こちらも、結局解決策がわからず、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' ],感想約２週間の突貫工事だったため、まだ色々と足りていない部分があります。先ほどあげたつまづきも、力技でなんとかしているだけなので、いつかちゃんとした解消法を見つけて直していきたいです。今後について今後は、ページ移動時のレスポンスの遅さを解消Disqusの再導入あたり進めていきたいなと思っています。おわりにいかがでしたでしょうか。作っていて楽しかったです。みなさんもぜひ、Nuxt.js × microCMSでブログを作ってみてはいかがでしょうか。N・S高等学校 Advent Calendar 2021 、明日以降もまだまだ続きますので、ぜひ、引き続きご覧ください。以上、猫月遥歩（ねこづきあゆむ）でした。Thank you for Reading!

どうも、お久しぶりです。猫月遥歩です。ブログ、更新止まっててすいません。まぁ動画の更新も止まってるんですが。色々と、某組織の生放送を作ったり、某フェスのWebサイトを作ったりとか。いろいろ裏方のお仕事をがんばってます。今月末から「近況報告」再開しようと思うので、またよろしくお願いします。さて、ブログをリニューアルしたお話です。今回はただの報告ですが、後日また詳しい構成や作った時のポイント等話そうと思います。なぜリニューアルしたかというと、更新がめんどかったからです。というのも、前のブログシステム（Hexo）は、記事データをMarkdownで書き、それをGitHubに上げると更新されるというめんどくさいものでした。しかもデザインファイルが詰まったリポジトリと、記事データ・構成データのリポジトリが別になっていたのでそれはそれで面倒。ということで「microCMS」というものを利用する形でリニューアルしました。こんな感じでブログが更新できるのでめっちゃ便利なのです。そんなこんなで、今後もブログ更新していくのでよろしくお願いします！

※ 現在各所調整中なので、背景チカチカしたり、ところどころ崩れちゃったりしてます。後日治すのでそれまでお待ちを….！ はじめまして。猫月あゆむです。普段はニコニコ生放送で放送してたり、バーチャル空間で遊んでたりしています。リアルでは、高校3年生です。 これまで、ブロマガ → WordPress → ブロマガ と使ってきたんですが、なかなかオリジナリティを出せず、あまり書けていませんでした。そんなとき、友人の一人がhexoでブログを立てているのを見て、これちょっとやってみようということで作っています。 「hexoでブログを立てるシリーズ」では、このブログを作る上で起こった小話をちょこちょこ投稿できたらなと思っています。技術寄りのやつはQiitaに持っていくので、そこまで難しくないよ～～ と、ここまで書きましたが。hexoでまともなブログ文章書くの、これが初めてなんです。いざプレビューしてみたら、フォントが変！なに、タイトルのちっちゃい「つ」ww 大きくなってるしwまぁテーマが中国の方のものをお借りしているので、自力で修正するしかないんですけどね….（後日やります） とりあえず、話を戻しますｗ その１：数回リセットした話。というのも、試行錯誤の繰り返しでした。 1度目。導入に成功するものの、GitHub Pagesで正常に公開できない。なんでだろ～と小4時間探した末、わからなかったので全消去して再度入れ直しました…. 2度目。↑でダメならnetlifyを使おう！ってことでセットアップ始めて、1度目終わりのところまで来たんですが、その後がエラー祭り。頭の中が全て？？？で埋まって思考停止したので、その日は諦めました。 ネット超会議が過ぎ、昨日。 そう言えばということで3度目の構築をはじめました。やはりエラー祭りでしたが、なんとか構築できた～よかったねという話でした。 その２：背景がおかしい現在進行系でおかしいです。 背景、スライドショーになってて（PC/Tabのみ）、特定ディレクトリ内をランダムで流してくれるんですが、はっきりいって鬱陶しい。ということで切りたいんですが、今の所切り方を見つけられてません。 なので代替策で、白画像用意して1枚だけにすれば…！って思ったんですけど、なぜかブラウザが落ちる（←なぜ？？？） 1枚ダメ、2枚ダメ….というふうにしていって現在6枚で動作中です。 なんとかしてスライドショー切りたい…. その３：これはココ！っていうのを探すの楽しいｗhexo って普通のHTMLブログのいわば “ジェネレーター” なんですよ。なので、サイドパネルのところとかバッラバラに分散してて、それがどこにあるのか探すの楽しかったです。 そして案外、簡単な仕組みで書かれていることを知ったので、数分でTwitterとかも埋め込んでみましたｗ 結構オリジナリティ出せそうですが、流石にテーマ１からというのはレベルが高そうです。 おわりに。今後の予定ということで簡単な小話でした。 今後はこんなことをやる予定です。 表示崩れ/バグ修正・背景のチカチカ・フッターが読みづらい・検索ボックス入力時、表示がうるさい・検索システムが動いてない・中国語→日本語の翻訳作業 仕様変更・各リンクなどのベース色をきみどりに・フォントを日本語ベースに(特に漢字) 追加機能・カスタム絵文字の追加・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); });

ども、猫月あゆむです。 だいぶデザイン変わりましたね。それもそのはず。テーマを変えました。 個人的に、いわゆる「ダークテーマ（ナイトモード）」が好きで、最初に入れた「gal」というテーマと、「Amazing」というライト＆ダークが切り替えられるテーマ。どちらにするかめっちゃ悩んでました。 ▼ 昨日のスクショ（テーマ「gal」のリメイク） なんで変えたの？前回お話した、「背景チカチカ問題」が修正できず、ただ時間だけが流れてしまっていたので、いっそテーマを変えてみようということになりました。 当初悩んでいた「Amazing」はダークモードへの切り替えができたんですが、「Icarus」というテーマをベースに追加追加してできていたものだったので、日本語への翻訳・細かい箇所の修正ができませんでした。 そんなとき、「Amazing」ダークモード変更の根幹部分のものを見つけたんですが、確認してみたら、Amazing入れるよりよっぽどやりやすい！ということで、結果「Icarus」+ night をテーマとして選択しました。 サイト右上の電球をクリックで明るくなります。 「Icarus」nightの導入方法はコチラ ※ 英語＆中国語 今日やったこと今日は、上述した テーマの変更・導入・各所修正 をしました。 次に、「サイトロゴ」「ファビコン」を設定しました。サイトの上下にある「ねころぐ」っていうやつと、タブのところにあるアイコンです。なぜかSVGで作ったら読み込んでくれなかったので、仕方なくpngです….. それともう一つ。お気づきの人もいるかと思います。自作Webフォントを追加しました。 今回導入したのはこの２つ。 ニコニコテレビちゃんと新しい生放送のアイコンの子。 fontawesomeさんと競合しちゃってずっと奮闘してましたが、なんとか導入できました！！右上フォローボタンの下にずっといる予定です。 今後の予定ざっとこんな感じです。 ・記事下共有ボタン追加・Aboutページの作成・カスタム絵文字の追加・RSSの追加・サイトマップの追加・フォントを日本語ベースに(特に漢字) 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); });

どうも、猫月あゆむです。３日目です。明日以降、３日坊主にならないことを祈って書いてます。 今日は、細かいけどでかい変更祭りです。 今日の機能追加今日は色々追加したので、一つずつ説明します。 ① 共有ボタンを追加しました。この記事の一番下とかに共有ボタンができてます。よかったらここから拡散よろしくね。 ② コメント機能を追加しました。DISQUSというコメント機能を追加しました。記事ごとにコメントを付けれます。コメント書くときのマナーは守ってね コメント機能について - About ③ 404 ができましたできてしまいました。ページがないところに行くと自動的に404に飛ばされます。404に共有ボタンはないけど、コメント機能あえて残してるので、雑談にでも自由に使ってくださいｗｗ 404 - Page not found ④ RSS / サイトマップができましたテレビちゃんの右のアイコンからRSS見れます。 RSSリーダーをお使いの方はご利用ください。 サイトマップもできました。検索から人が来やすくなる…はず…（たぶん） ⑤ Googleアナリティクスを導入しました導入したところで…ほぼ見ないと思う。気になる方はCookieをオフにお願いします。 データ収集について - About ⑥ トップページに「お知らせ」を作りました。無理やり感半端ない。 日付10年後になってるしｗｗいつか、初来訪時のデフォルトをナイトモードにしたいです。（今はライト） 今日の変更変更点はそこまで無いです。 ① フォントを変更しました。「今」とかの漢字の中国感がなくなったと思います。 ② カテゴリページへの動線を消しました どうせカテゴリ設定しないし。タグ乱用するひとなので、タグ一覧からどうぞ。 タグ一覧 カテゴリ一覧 ←からっぽ ③ 記事最後のタグ表記を ＃ から に変えました一番下、共有ボタンの上です。後で見てみてね おわりにざっとこんな感じです。変更点の羅列だけで結構長くなっちゃいました… 今後の予定今後の予定はこんな感じ。 ・カスタム絵文字の追加 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); });

３日坊主にならなくてよかったよ。どうも猫月あゆむです。 今日はトップに画像はありません。画像貼っちゃうとトップページに乗ったときにくっそ長くなってしまったので… ということで、画像を貼ります。ペタリ そう。今日はスマホです。docomoユーザーで、充電が84%で…とか言う話ではなくて、 PWA のお話です。 PWAとはなんぞや？ PWA（Progressive Web Apps）はグーグルがモバイルユーザーのユーザー体験向上を目的とし、今までのWebアプリ（サービス）にWebとアプリの両方の利点を兼ね備えた仕組みのことです。 引用元 : Webディレクターが知らないとマズい！Googleの注目プロジェクトPWAって何？ らしいです。簡単に言うと、Webサイトをアプリケーション化すると言ったほうがわかりやすいでしょうか。 Twitterとか、ニコ厨だったらわかるビビットアーミー（広告がうるさいやつ）なんかも対応してます。 PWAの利点利点としてはこんな感じ。 ・アドレスバー、タブボタンとかがないので、誤タップが減る・各OSのアプリストアを使わなくて良い　→ 審査で引っかかることがない・GPS取得ができる（IPアドレス補足じゃなくてガチのGPS）・プッシュ通知ができる 利点でも欠点でもない（人による）・ブラウザ → メニュー → ホーム画面に追加しないと使えない 欠点・https（SSL）じゃないと使えない ざっとこんな感じです。 利点でも欠点でもないやつは、アプリストアを使わなくて良いという利点と、ホーム画面に追加が初見勢にとってはわかりにくいという欠点が合わさってできているから。 なぜ導入したの？ねころぐに導入したのは、単に興味本位です。簡単に導入できるライブラリがあったので、入れてみました。 一応Aboutにも書いてますが、GPSなどの位置情報は取得してないし、今の所プッシュ通知も行かないと思うので大丈夫です。 他の変更点その１、GitHub Emoji を導入しました。😄ホントはTwemojiを導入したかった。いずれTwemojiに変わってると思います。 その２、リポジトリに MIT License を付与しました。詳しくは About ページ、メインリポジトリのRead.mdをご確認ください。 当ブログに書いた、猫月あゆむ個人の発言は CC BY-ND 4.0 で利用可能です。 また、後術するGitHubリポジトリに記載されている当サイトのデータは MIT ライセンスで利用可能です。 引用元 : ねころぐについて おわりに今日で、カスタム絵文字以外のブログ構築が終わりました。カスタム絵文字は、絵文字データを登録するだけ（GitHubEmojiさんにカスタム機能がついてた）なので、暇なときにでも追加していくと思います。 せっかくここまで、連日ブログを書いてるので、明日以降も何かしらのブログを書こうと思います。 明日からは、今年度のポートフォリオを作成します。デザイン案とかは結構前にできてるので、中身をバンバン作っていくよ～～お楽しみに。 後でもう１本ブログ上げるかも。ノシノシ 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日目の記事 で、自作フォントを導入したよ！っていうお話をしたと思います。ツイッターで質問が来てたのでそれの詳しい解説です。 導入方法導入方法自体は結構簡単でした。 参考：Webアイコン「IcoMoon」の使い方とアイコンの追加方法 まず、フォント化したい画像、アイコンとかを SVG 形式で用意します。画像が用意できたら、icomoon というサイトを利用してフォント化します。 フォント化方法ざっとこんな感じ。わからないことあったらコメント欄へGO 右上インポートからSVGを読み込む 入れたいアイコンを選択し、右下「Genelate font」をクリック アイコン名、大きさなどを調整 画面右下ダウンロードの隣の をクリック 項目を以下のように改変 理由としては、 Class Prefix　fontawesomeとの競合避けその１ 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); });

どうも、猫月あゆむです。一気に投稿数増えましたねｗ それもそのはず、WordPressとブロマガから過去記事をインポートしました。 なぜインポートしたの？過去の自分の記事を１箇所で確認したかったからです。 数年前、自分はどんなことをしていたのか、この出来事はいつだったのか。たとえ黒歴史であっても、（よっぽどじゃなければ）数年後笑って過ごせると思いますｗ どうやったの？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); });

タイトル通りです。編集中にファイルが逝って、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); });

猫月あゆむです。以前から開発しているブラウザ拡張機能「ニコニ広告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); });

はじめに環境は以下の通り。 Windows 10 Google Chrome 81.0 通知がうるさい自分は、niconicoやYouTubeの通知をPCのChromeでオンにしている。というのも、スマホよりPCのほうを多用しており、PCに来たほうが何かと確認が楽なのである。 だが、いつだっただろうか。Chromeの通知がWindows10のネイティブ通知として来るようになってしまい、心底うんざりしている。というのもいくつかデメリットが有るのだ。 ネイティブ通知のデメリットその１：音が鳴るうるさい。表示するだけでいいのに音がなるせいでうるさい。 その２：表示が遅い、複数個出ないブラウザ起動後、起動までに溜まっていた通知がダダダダと表示される。表示するのは良いのだが、複数個出ない。 しかもこの際、まいどまいど音がなるのだ。まじうるさい。 その３：通知が溜まるスマホでは通知が溜まるのは当たり前だ。見逃した通知を後から見れるようになっている。 Windows10にも同様の機能がついているのだが、イマイチ使いづらい。スマホと違い、1個1個の通知が多少の大きさがあるため、4,5個通知が溜まっただけで表示範囲からはみ出てしまう。こうなるとスクロールして見るほかない。 その４：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); });

ねこづきあゆむです。今日は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とマッチしすぎてやばいｗ おわりに２・３時間で完成させるつもりが、色々ハマってしまって結局まる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); });

どうも猫月あゆむです。AWS Educateを触ってみたのでその感想です。 前提まず、今回話すのは AWS Educateという教育機関向けのAWSです。 そして、今回はN高のアカウントで触るので、加盟校（高校）の利点が利用できる状態のお話です。まぁこれ以上のプランはEducateには無い（たぶん）と思います。 使ってみて今回、Mastodonのインスタンスを建てました。Mastdon構築で詰まったこととかはまた後日。 メリットえっと。利点わからない…..学校に所属する間はいろんな機能が無料ってことぐらいですかね…？あと100ドルぐらいクレジットが付いてくる デメリットその１：いろんな機能が「使えない」「vocareum」という外部サイトを経由して入るんですが、そのせいでいろいろな機能が使えません。 例えば「アカウント情報」。メールアドレスとかの変更とかできません。SES（メール関連）とかも全然ダメでした。 その２：メリットが状況次第ではほぼ無いというのも、先程「学校に所属する間はいろんな機能が無料」といいました。ですが、通常の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); });

オリジナルインスタンスを立てました！！！ 知識なくても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); });

猫月あゆむです。以前から開発しているブラウザ拡張機能「ニコニ広告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); });

タイトル通りです。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); });

今日はアップデートのお知らせです。ニコニ広告ex. v2.0.0を、6/9~10にリリース予定です。 変更の無い点・変更に伴う注意点以下の機能は変更なしです。ご安心ください。 動画／生放送の広告機能を新しいウィンドウではなくコメント欄上に表示させる機能 6/9に「ニコニ貢献」リリース後、現行バージョンが動作しなくなる可能性もありますが。v2.0.0にて修正・リリースしますので気長にお待ち下さい。 v2.0.0 の変更点（予定）新サービス「ニコニ貢献」に対応します。もちろん対応します。 ロゴ・アイコンリニューアルニコニ貢献のリリース、ニコニコのロゴ更新などもあった為、ニコニ広告ex.のロゴ・アイコンをリニューアルします。

近々、みんなで「近くの人と喋れる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); });