at backyard

Color my life with the chaos of trouble.

GatsbyのサイトにGoogle AdSenseの審査を受けるためのコードを追加する

GatsbyJS Google AdSense 備忘録

自分用備忘録。

以下の公式サイトを参考にする。

www.gatsbyjs.com

gatsby-ssr.jsが存在していなければルートに追加する。

以下のコードを貼り付ける。 Google AdSenseのコード というところに自分のコードを入れる。

import React from 'react';

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <script
      async
      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client={Google AdSenseのコード}"
      crossOrigin="anonymous"
    />,
  ]);
};

これでGoogle AdSense側に審査を依頼する。

HEIC形式の画像ファイルをPNGへ変換するPythonスクリプト

Python asyncio 個人開発

Pythonで大量のHEIC形式の画像ファイルをPNGへ変換する必要に迫られたので、過去に非同期の書き方をメモしておいた自身のブログを読み返していた。

shinshin86.hateblo.jp

HEICファイルをPNGファイルに変換するためのPythonスクリプト

上のポストを参照しながら実装したのが、以下。
（ひとまずソースコードだけ上げていますが、READMEなどは後日追加します）

github.com

下記のように実行すれば対象ディレクトリ内のHEICファイルをPNGに変換する処理が動く。

git clone https://github.com/shinshin86/heic2png.git
cd heic2png

# 仮にtestディレクトリ内のHEICファイルを処理したいとした場合
python heic2png.py test

パフォーマンスについて

自身のM1 MacBook Airにて3000ファイルの画像を処理させて、1時間かからないぐらいの時間で処理が完了した。

M1 MacBook Airのコア数は以下で、アクティビティモニタで監視しているとだいたいスレッドは 13~20 ぐらい利用していたようだ。

8（パフォーマンス: 4、効率性: 4）

ちなみにPythonでasyncioを使った非同期処理を行う場合のスレッドプールなどの仕様は以下の通り。
（ただ、下記の説明を見ると8コアだと最大で12スレッドが動く形となりそうなので、 13~20 動いていたという自身の見解は誤りかも？一応アクティビティモニタのスレッドの数を参照していたが、仮想スレッドとかそういうのがあって実際のコア数よりも多かったりとかするのか？ちょっとここらへんは理解が浅いので適当なのことを言っているかもしれません。ご存じの方がいればコメントいただけると幸いです）

concurrent.futures -- 並列タスク実行 — Python 3.10.6 ドキュメント

Default value of max_workers is changed to min(32, os.cpu_count() + 4). This default value preserves at least 5 workers for I/O bound tasks. It utilizes at most 32 CPU cores for CPU bound tasks which release the GIL. And it avoids using very large resources implicitly on many-core machines. ThreadPoolExecutor now reuses idle worker threads before starting max_workers worker threads too.

同期処理だと途方も無い時間がかかる処理だったので、こういう形で一気に処理できるのはやはり気持ちいいなと思ったのでした。

M1以降のmacでnode-sassをインストールしようとした際にエラーになったので対応したメモ

GatsbyJS node-gyp 備忘録 sass Node.js

メインの作業マシンはすでにM1以降のMacBook Airに移行しているが、唯一Gatsby関連のプロジェクトではまだIntelチップのMacBook Proでないと yarn install が成功しない状態となっていた。

今回は重い腰を持ち上げて、M1以降のmacでもGatsby関連のプロジェクトをセットアップできるようにした際の個人的なメモとなる。

目次

長いので目次をおいておく。

macとNode.jsとGatsbyのversion

M1以降のmacでは、Gatsbyに関しては共通してnode-sass(node-gyp)絡みのインストールに成功していない。
そして今回作業するマシンは M1 MacBook Air となる。

macOSのバージョンは 12.6.1

Node.jsのバージョンは

node -v
v16.14.0

Gatsbyは

"gatsby": "^2.23.7",

となっている。

他にも影響している依存ライブラリがあるかもしれないが、ひとまずこれだけ載せる。

最初に結論：node-sass ではなく sass を入れることで解決。

最初に結論を書いておくと、以下のように node-sass ではなく sass を入れることで解決した。

yarn remove node-sass
yarn add sass

node-sassをインストールするために python 2 を入れたり、不必要に古いバージョンを利用するということはせずに対応できたので良かった。

エラーの内容（Python 2が見つからない。だが、Python2を入れたくない）

プロジェクト内で yarn install した際のログは以下となる。

※関係ありそうなところを抜粋している

gyp info using node-gyp@3.8.0
gyp info using node@16.14.0 | darwin | arm64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` failed Error: not found: python2

python2 が見つからない？

また以下のようなエラーメッセージも出ていた

gyp ERR! stack   File "<string>", line 1
gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
gyp ERR! stack SyntaxError: Missing parentheses in call to 'print'. Did you mean print(...)?

内容的にはPython 2前提で処理が走るようになっているのか？

ちなみにエラーの発生源は node-sass で、 node-sass に依存している node-gyp 内でエラーになっているように見える。

package.json を見るとたしかに node-sass も利用していた。

"node-sass": "^4.14.1",

node-sass のために python2 をわざわざ入れたくない...

node-sassのバージョンを上げてみる？

で、ちょっと調べてみた感じ node-sass のバージョンを上げると対応されているかも？と思ったので試してみた。

github.com

GitHubのREADMEを見た感じだと、node v16系にはversion 6系が対応していそうだったので、

yarn add node-sass@6

で6系を入れる。

するとインストールは完了した。

これでうまく行ったか？と思いきや、buildしてみると今度は以下のようなエラーがWebpackから出ていた。。

 ERROR #98123  WEBPACK

Generating JavaScript bundles failed

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.

node-sass ではなく sass で解決

関係ありそうな情報を探してみると以下のようなissueを見つけた

github.com

そこで見つけた記述に node-sass を削除して代わりに sass を入れてみると良い、というものがあったので試してみた。

yarn remove node-sass
yarn add sass

インストールした sass のバージョンは以下。

"sass": "^1.57.1"

で、これで問題は無事に解決した！

というわけで、同じような事象で困っている方がいらっしゃいましたら、node-sass ではなく sass が解決の糸口になるかもしれません。

VoiSonaをLogic Proで使うまでの手順

VoiSona Logic 備忘録 楽曲制作

VoiSonaをLogic Proで使うまでの手順を備忘録として残しておく

目次

VoiSonaのダウンロード

まずはVoiSona自体をダウンロードし手順に従ってインストールする。

ダウンロードは下記から。
アカウントを作成する必要があるが、無料で試すことが可能で、個人・法人、商用・非商用を問わず無料で利用できる、というのがかなりインパクトある

Download | VoiSona

最初から 知声 というボイスライブラリを利用できて、これを利用するだけであれば無料となる。
追加のボイスライブラリはサブスクリプション形式の支払いとなる。そちらもVoiSonaのサイトから試聴できるが、良い感じ。

Logic ProからVoiSonaを呼び出す手順

VoiSonaは現在はAudio Units (AU)に対応しているので、Logic Pro上からも読み込める。
（以前はAU未対応だったため、少し古い記事だと別のプラグイン経由で読み込むという記載があるが、現在はそのようなことは必要ない）

実際にVoiSonaを読み込む際の手順を記載する。

まずはトラック上の音源を選択

下にある AU音源 の中に Techno-Speech があり、その下に VoiSona Song Editor があるのが確認できる。

起動して利用できることを確認。

Logic Pro上で打ち込んだMIDIをVoiSonaに歌わせるまでの手順

まずは適当にMIDIを打ち込む

MIDIを打ち込んだところ

MIDIを打ち込む際に重要なポイントがあり、ノートがかぶっているとVoiSonaで認識した際に正常にMIDIデータ（ノートデータ）がVoiSona側に移行されないので気をつけること。

ここで重要なのはMIDIのノートがかぶらないこと

VoiSona用のトラックを新規作成。
（外部MIDI音源を選択しているが、ソフトウェア音源とかでもいけるかも？）

外部MIDI音源を選択

打ち込んだMIDIデータ（リージョン）をVoiSona側に移動させる。

移動させた側のトラック（先ほど作成したトラック）でVoiSonaを起動し、VoiSona画面の Transfer というところをクリックする。

あとはこの状態で再生を実施する。
ノートをVoiSona側に移動させている関係で再生させても音は出ないが、再生が完了するとVoiSona側にMIDIデータ（ノート）が読み込まれていることが確認できる。

Logic Proで打ち込んだMIDI情報をVoiSona側に読み込ませる手順は以上となる。

商用利用可能な音楽のサイトについて

久しぶりに楽曲制作系のポストなので、ついでに宣伝を。

以下のツイートにも書いてあるように、商用利用可能な音楽を無料で提供している下記のサイトのドメインが変わりました。
サイトの内容などは変わりませんので、今後ともよろしくお願いします！

サイトへのリンクはこちらです。

sound-factory.net

M1 mac環境で pyheif をインストールしようとした際に fatal error: 'libheif/heif.h' file not found が出たときの対応方法

pyheif 備忘録

M1 MacBook Airで pyheif をインストールしようとしたら fatal error: 'libheif/heif.h' file not found というエラーになった。

ググるとすぐに解決策は見つかった。
（このPRがマージされれば、この手法も必要なくなる？）

github.com

以下のコマンドでインストールすることで成功を確認した。

pip install git+https://github.com/guillaumegenthial/pyheif.git@m1-support

以上、備忘録。

Amazonでカートを入れるボタンを押した際にエラーになるときの対応方法

Amazon 備忘録

Amazonの商品ページで『カートに入れる』ボタンを押したときに、下記のような画面になった。

調べてみると、カートに入れずにそのまま購入するボタンの方を押せば買えるという意見も見たが、私は宅配指定日などを設定したかったので、どうしても一度カートに入れたかった。

というわけで、こういうエラーが出たときでもカートに入れて購入する方法を備忘録として書いておく。

まず私の環境だが、 M1 MacBook AirのChrome となる。

環境が異なると再現できない可能性もあるので一応書いておく。

Amazonでカートを入れるボタンを押した際にエラーになるときの対応方法

カートに入れたい商品を開いている状態で command + option + i を押す

（ここは右クリックから 検証 でも良い）

すると、Chromeの開発者ツールが開くので、ツール上部にある下記赤枠のボタンを押す

このボタンが押された状態で画面をリロードする。

するとスマフォ表示の状態で表示されるので、スマフォ表示のままカートに入れ、最後まで決済を完了させる。

PCからスマフォ表示のまま購入完了させるというのも違和感ありまくりだが、一応これで問題なく購入ができたのでメモとして残しておく。

React Draggableのexample

react-draggable 備忘録

react-draggableというReact上でアイテムをいい感じにドラッグできるツールがある。
このツールの中身を調べたくて、色々作業した際のメモ。

github.com

最新のexampleをCode Sandboxで動かしたもの

Coda Sandboxで最新のexampleコードを動かしたもの

（GitHub側でホスティングされているデモが最新のexampleコードを動かしたものではないので、挙動を確認したくて作成した）

codesandbox.io

このexampleコードはclassコンポーネントの書き方で書かれているので、そちらを関数コンポーネントで書き換えたものがこちら。

github.com

TypeScriptで書いているが、細かな型などは後回しにしてしまっているのであしからず。