こんにちは。こんばんは。
こちらは散歩や旅行、映像制作、プログラミング、ダンスなどしているFTDのブログです。詳しいプロフィールはこちら。他にnote やMedium でも書いています。Twitter やInstagram もやっているのでそちらもどうぞ。
はてなブログでは主に以下のようなことを書いています（カテゴリ別）。
まずはこれ
旅行と散歩
役に立つかもしれない
その他
以上です。
「キュレーターになる! アートを世に出す表現者」を読んだ感想
さいきん図書館で本を借りるようになった。その辺の変化の話はまたの機会ということで、本の感想もブログに書いてみたいと思います。いわゆる読書ブログ的な記事を書いたことがほぼ無かったのですが、変に気負わず好きなことを書いたらええやん（という知り合いの記事を読んだ）となりました。
本日ご紹介するのは「キュレーターになる! アートを世に出す表現者」です。現代美術関連の棚を見てたらなんとなく目に入って借りてみた。
- デザインやマンガのような消費者にとって身近なもの（大量生産品）をアートの展覧会で展示することの意味的な話が良かった。これはアートなのか？な作品をアートの場で展示する意味や、非アートである（と思われている）作品にアート性を見出すキュレーターとしての目線など。
- どんな作品でもホワイトキューブ内で展示することで「これはアートである」を担保してしまう場合がある、という話があった。実空間のみならずデザイン全般にも言えるなと思った。私も白地の背景に写真や映像をぽつんと配置するのよくやる。それが良い悪いという話ではなく、意図しないコンテキストを生じさせる可能性があるなぐらいの話。
- 本文内に散りばめられているキーワードを各々調べてみると勉強になりそう。
- 「自分はキュレーターになるぞ！」的な人より「キュレーターって言葉は聞くけどなんぞや」という人向きな本である気がする。キュレーターと付き合っていこうとしているアーティストにも良いかもしれない。
- キュレーターとDJのモチベーションって近いのかな。
- 時間と体力がなくて返却期限ギリギリとなり、後半は飛ばし飛ばし読んでしまった。
以上です。
Nuxt3 + Tailwind CSS + Three.js でポートフォリオをリニューアルしGitHub Actions で自動デプロイするようにした
ポートフォリオをリニューアルしました（ドメインも取りました）。メインビジュアルとしてフラクタル図形の３次元化を試みています。
勉強がてら色々と初めてのものを導入してみたので、備忘録として記事にしておきます。Web開発って初心者向け情報だと「HTML+CSS+JSで簡単なサイト作ってみよう」から、ちょっと深掘りし出すと急に知らない言葉や概念が大量に出てきてようわからんってなりませんか。あとWordPressで稼ごう記事や怪しいオンラインスクールなど（WPが悪いわけじゃないんです）。
今回の記事は導入からデプロイまで網羅的に（雑に）書いてますので、Webは専門分野じゃないけどサイト作ってみたいなという方は参考になるかもしれません。何かしら役に立てばシェアいただけると嬉しいです。
ポートフォリオをリニューアルしました！ メインビジュアルとしてフラクタル図形の３次元化を試みています。あと初心を思い出して隠れUIを設置するなど自己満設計となりました。#nuxt3 #threejs #fractal #creativecoding https://t.co/mxXnF1bD8A pic.twitter.com/Wijk5vPktC
— ftd (@eatora22) 2023年3月22日
- Vue2 からNuxt3 へ
- Tailwind CSS を導入する
- Nuxt3 環境にThree.js を導入する
- 3Dフラクタルを描画する（マンデルバルブ）
- お問い合わせフォームを作る
- OGP の設定
- SSG でビルドしてNetlify にファイル一式をアップする
- 独自ドメインを取得する
- GitHub Actions を使ってPush 時に自動ビルド&デプロイする
- さいごに
Vue2 からNuxt3 へ
GitHub Pages でホストしていた前のポートフォリオはVue2（+Vue CLI + Vuetify）で作っていたのですが、上の記事にも書いているようにUIライブラリであるVuetify とホントに相性が悪くてミニマムな構成だけ作って放置……みたいな感じでした。せっかくCreativeCoding のような活動を昔からしているのに、やる気が消滅して見た目やインタラクションの遊び要素ゼロの残念な状態。ちょうど1年ぐらい経つということで、リニューアルするかと思ったのが今回のきっかけです。
また前回のポートフォリオ制作前後にVue3 がデフォルトになったぐらいのタイミングでしたので、今回のリニューアルに合わせてこちらもアップデートするかとなりました。あと調べてみると、Vue.js をより使いやすくするためのフレームワークとしてNuxt.js が人気らしいのでそれも試してみるかとなったのです。結果、Nuxt3 を使用してポートフォリオをリニューアルすることになりました。
Nuxt3 を導入するにあたって以下の記事を参考にさせていただきました。Nuxt2 と比べると情報が少なく開発途中でハマった点も多々あった気がするのですが、そちらは後述+気が向いたときに別記事で触れようかなと思います。
Installation · Get Started with Nuxt
Nuxt 3を使いこなすために基礎から徹底解説 | アールエフェクト
Nuxt.jsでポートフォリオサイトを作成してみた - Qiita ※こちらはNuxt2 の内容です。
あとNuxt に限らないですが、フレームワーク使ってWeb制作を効率化しようぐらいの時期になるとSPAやらSSGやら謎の文字列に遭遇することが増えます。前回と同じく全部忘れていたので改めて調べたりもしてました。その際に参考にさせていただいた記事も貼っておきます。こちら以外の記事を読んでもそうだったのですが、SPAは管理画面作成に使われやすいというのを知って「そうなのかー」などと思いました。
SPA, SSG, SSRはどんなアプリケーションに向いている？ （前編）｜ファンタラクティブ株式会社｜note
Tailwind CSS を導入する
「UI系のフレームワークは使いたくないな」「でもトレンドも知っておかないとな」という感じでCSSフレームワークであるTailwind CSS を導入しました。といっても一発でおしゃれボタン設置できます系ではなく、フレームワーク側にあらかじめ用意されているユーティリティクラスをHTML要素に適用する形で記述の手間を省くといった感じです（公式トップにあるデモがわかりやすい）。
ちなみに流れでDaisyUI もインストールしたのですがこちらはほぼ使いませんでした。やっぱり多少面倒でも自分でコーディングする方が性に合っているみたいです。
あと、公式の手順だとTailwind CLI を使用したものが紹介されていますが、Nuxt環境ならモジュール版（Nuxt Tailwind）が用意されておりそちらの方が勝手が良さそうなので、自分も後から気づいて入れ替えました。Tailwind はビルド後のサイズがデカくなりがちなのが、モジュール版だとPurgeCSS が初めから入っているので使っていないクラスを削除して容量削減できWebサイトの速度も改善できるみたいです。
その他、導入周り含め以下参考にさせていただきました。
nuxt-tailwindをmodule版に切り替える - Qiita
Tailwind CSSで独自クラス（コンポーネント）を作成する
開発過程でTailwindも使ったNuxt用コンポーネントのパターンを色々試したついでに、GitHubにも一部アップしてます。ただアニメーション付きのレスポンシブ対応ナビゲーションバーとかグリッドレイアウトを作る上で普通のCSSやSass、jQueryも使った昔のコードを移植しており、現状のサイトは記法がぐちゃぐちゃになってます。めちゃくちゃ気が向いたら整理しようかな。
GitHub - FollowTheDarkside/nuxt-components-grid-layout-example: Nuxt Components Grid Layout Example
Nuxt3 環境にThree.js を導入する
ある程度ポートフォリオの構成が出来上がってきたので、ここで良さげなビジュアルを入れ込んでいきます。今回はJSで3Dコンテンツを作るためのライブラリであるThree.js を導入します。私ですら仕事でたまに使うぐらい有名。画像は関係ないですが、Three.js 公式にも昔ウケたLee Perry-Smith モデルのデモ。なぜか海外からスカウトも来た。
ちなみにNuxt2の環境に入れるのであれば、@misaki_mofu さんの記事とコードがとても参考になりますので私のはとくに見る必要ないです。ここではNuxt3 環境に導入する上で少しハマった点を抜粋しておきます。
シェーダーを書きたい
CG処理を凝り出すと必要になるシェーダーファイル（.flag, .vert, .glsl あたり）を読み込むのにraw-loader （ファイルの中身をテキストとして読み込む）を使うことがあります。ただ、Nuxt3だとデフォルトのビルドツールがViteになってるのでシェーダーファイルのimport時「hoge.glsl?raw」のように専用サフィックスを付ければ別途ローダーをインストールする必要がありません（ちなみにnuxt.config.tsの設定でVite からWebpack に戻すこともできます）。
ViteでWebGL、Three.jsを練習するための環境構築をしてみた（TypeScript）
イベントバスの実装
ページ遷移やボタン押下時など、DOMの変化に合わせてThree.js で描画しているオブジェクトもグニョらせたい場合があります。そんな時にVue2 ではEventBus (Hubとも言う) の仕組みを使ってグローバルなイベントのやり取りができたのですが、Vue3からは公式ドキュメントにあるように$on や$off、$once メソッドが廃止されたようです。代わりにmitt あたりの外部ライブラリを使えとありますので私もそちらを導入しました。
プラグインの作成はplugins ディレクトリ内で行いますが、Nuxt2 と違いnuxt.config.ts に追記する必要はありません。Three.js側のソースではuseNuxtApp() を経由してイベントの購読を行います。あと以下の記事も参考になります。
Event bus in Nuxt3 - DEV Community
plugins/ · Nuxt Directory Structure
Vue + Mittでグローバルでイベントを取得できるようにする - さうな坊や.com
Nuxt3のsetup内ではthisの代わりにuseNuxtApp()を使用する - 独学プログラマ
3Dフラクタルを描画する（マンデルバルブ）
ここではThree.js で何を描画するかという話をします。興味がない人は飛ばしても構いません（寂しいけど）。
フラットなオブジェクトをヌルッと動かす方がモダンな感じがしてオシャレだな（コンペ受けも良いだろうな）と思いつつ、自分のポートフォリオですし好きなもん入れたいということでフラクタル図形を描画することにしました。以下は私の卒論より抜粋。
フラクタルとはフランスの数学者ブノワ・マンデルブロが導入した幾何学の概念であり、図形の部分と全体が自己相似になっているものをいう。自己相似とは、ある図形の一部分を取ってきたときにその一部分の形状と図形全体の形状とが相似であることを指している。
簡単に書くと、図形の一部を拡大していくと同じ図形が現れる的なものがありますがアレです。今回はフラクタルの中でも有名なマンデルブロ集合を描画します。さらにThree.js の利点も活かして３次元化も行います。主張しすぎず、でもある程度の存在感を持たせるための色味の調整が地味に大変でした。
正確には３次元のマンデルブロ集合は存在しないのですが、計算に用いる複素数を極座標から球面座標系に拡張して考えることで無限に発散しない点をプロットし3Dのフラクタルを描画することができます。私の理解力不足のため噛み砕いて説明するのが難しいですが、むかし参考にしたMandelbulb のwikiを貼っておきます。そして学生時代にお世話になりました山岸先生ありがとうございます。
以下はopenFrameworks で作った昔の映像です。
お問い合わせフォームを作る
お問い合わせフォームってサーバ側の処理も考え出すと地味に大変です。簡単なのはメアドのリンクを貼っておきクリックしたユーザ側のメーラーを起動させるなど。
ただ今回はちゃんと入力フォーム画面を用意したかったのもあり、Googleフォームの埋め込み機能を使いつつデザインはカスタマイズして実装しました。デフォルトの埋め込みだと見た目が残念な感じになりますが、これだとサイト全体の雰囲気を損なわず問い合わせフォームを実現できます。以下の記事が大変参考になりました。ちなみにNetlifyのForms機能でも楽に実装できるらしいです（他のホスティングサービスでも使えるように今回は採用しませんでした）。
Google FormをHTML/CSSでデザインしたフォームで運用する方法
OGP の設定
いつも忘れがちなのですがOGP設定も行います（SNS等でURLシェアしたときに出るカードみたいなやつ）。ページごとに表示内容を変えたり動的に設定する必要がない場合、Nuxt ではnuxt.config.ts にてprefixやmetaタグの設定を行います。
ちなみに私の方では、Twitterとnoteでカードが表示されないとなりだいぶハマりました（設定は合っているはずなのに）。どうもOGP設定前にシェアしようとしたときのキャッシュが残っている可能性が大きそう。note の方は意味不明です。ちなみに1日強ぐらい経過して表示されるようになりました。Twitterでは一部ページがまだ表示されないけど。
あまり関係ないですが、ChatGPTに聞いたらTwitterの古いキャッシュクリアの方法ばかり教えてくるのでめちゃくちゃストレスたまりました。この話は需要ありそうなので別記事にするかもしれないです。
Twitter、Card Validatorからプレビュー機能を削除。カード情報のキャッシュは最大7日 | gihyo.jp
SSG でビルドしてNetlify にファイル一式をアップする
ちょっと記事が長くなってますが、サイトが一通り完成しました。SSG（Static Site Generation）設定でビルドします。nuxt.config.ts は特にいじらず、「npx nuxi generate」コマンドを実行すると.output/public 以下に静的ファイルが出力されます（dist以下でも多分よいのですが公式のドキュメントに合わせています）。以下も参考。
Deployment · Get Started with Nuxt
Nuxt3入門(第1回) - Nuxtがサポートするレンダリングモードを理解する | 豆蔵デベロッパーサイト
ファイル一式が準備できましたので、ホスティングサービスにアップロードします。今回は無料枠があり使ってる人も多そうなNetlify にしました。前のポートフォリオで使ってたGitHub Pages もおすすめです（今回は勉強のため変えました）。
アップロードの仕方はファイルをドラッグするだけなので特に難しいことはありません。GitHubにアップしたリポジトリと連携させPushのタイミングでビルド&デプロイさせることもできるのですが、以下の記事を読ませていただき辞めとくかとなりました（私は無料枠を使い果たすことなさそうだけど）。ちなみに何も考えずNetlify を操作してると、しれっとGitHubへの連携を促してくるため気になる人は注意が必要です。
Netlifyに7ドル支払った話（GitHub ActionsでNetlifyにデプロイする） | Blog
独自ドメインを取得する
せっかく苦労してポートフォリオを作成したので、独自ドメインも取ることにします。私はGoogle Domains で取りました。普段は近所のスーパーでしか買い物してないのでドメイン選ぶの楽しかったです。Netlifyとの連携は以下の記事を参考にさせていただきました。
NetlifyのサイトにGoogle Domainsで購入したドメインを割り当てる | 定年後にWeb開発者目指す
Google Domainsで取得したドメインをnetlifyに設定する | hardworkers.dev
ちなみにDNSの設定にあたってよく分からない単語がたくさん出てくるのですが、ここでChatGPTが役に立ちました。明確な仕様や定義があるときはググるより意味を調べやすくて便利だなと思いました。
今日もChatGPTのお世話になるか…… pic.twitter.com/MxSyPMBEid
— ftd (@eatora22) 2023年3月17日
GitHub Actions を使ってPush 時に自動ビルド&デプロイする
ポートフォリオの公開までいけたのですが、変更のたびビルドしてファイルをアップするのは地味に面倒です。先述したようにNetlify側でビルドさせたくないので、GitHub Actions でビルドしNetlify へデプロイするようにします。後者だとパブリックリポジトリなら無料、プライベートでも月2,000分までビルド時間が使えます。私は以下の記事を参考に自動ビルド&デプロイの環境を用意しました。
GitHub Actions のクイックスタート - GitHub Docs
私だけかもしれない地味にハマった点も書き残しておきます。ビルド後の.output/publicをactions-netlify の入力パスとして指定するのですが、エラーでファイルが見つからないと言われてしまいました。実はoutput直前のピリオドを打ち忘れていただけだったのですが、デバッグしてるとパス内にリポジトリ名が重複していたので１つ上の階層を指定したり、ピリオドに気付いたけど無駄にエスケープシーケンスにしたりとめちゃくちゃ時間取られてしまいました。結果、ふつうにパス書くだけで上手くいきました。dist指定ならこんなにハマらなかった。あとChatGPTにactions-netlify のバージョン差異などを無駄に指摘され惑わされたのもデカい。
さいごに
以上、長くなりましたがポートフォリのリニューアルから自動デプロイまでの話を書きました。リポジトリも公開しておきます（※本記事の執筆時点）。Webエンジニアの皆様、よかったらアドバイスなどいただけると嬉しいです。あと何かしら記事がお役に立ちましたらシェアいただけますと幸いです。仕事もください。
ここまで読んでいただきありがとうございました。
シャニマスのライブ「THE IDOLM@STER SHINY COLORS 5thLIVE If I_wings.」DAY2 を見た
感想メモ。
【シャニマス5th】DAY2ご視聴いただきありがとうございました！！ 本日のセットリスト&告知内容まとめはこちら！ #シャニマス #シャニアニ #シャイニーカラーズ #シャニマス5thhttps://t.co/dzOfOepLr0
— アイドルマスター公式ツイッター (@imas_official) 2023年3月19日
- イルミネは三人でイルミネなんだね……
- アンティーカの目力。
- 放クラいつも元気をありがとう。
- アルストの椅子。
- ストレイライトの「Transcending The World」初めてライブで見ました。感動と鳥肌。照明ヤバイ。
- ノクチル「Catch the Breeze」ほんと良い曲だなあ。
- シーズいつも凄すぎて空気変わるな。
- ルカさんソロ歌唱からの「Dye the sky.」も圧倒されて恐怖を感じた。
- 怒涛の告知でもっとゆっくりしてもいいんやでと少し思った。
- 和久井さん氷河期氷河期のおかげでメンタル保ったままライブ見届けることができました。これが無かったら虚無でダウンしていたと思う。
みなさんありがとう。五周年おめでとうございます。
【茅ヶ崎】熊野神社にはミニチュア鳥居がある
【備忘録】初めて青色申告からの確定申告（フリーランス）
初めて青色申告からの確定申告を終えましたので（書類ミスっているかもしれませんが）、感想というか備忘録として記事にします。アフィリエイト広告ではないですよ。
確定申告ソフト楽だ〜
国税庁の確定申告書等作成コーナーなるものでオンライン上で必要書類が作成できるようになっているとはいえ、知識が無い人が１から作成するのはしんどいということで世には会計ソフトがたくさんあるわけであります。
そんな中でもfreee は初心者も直感的に操作できるというクチコミや友人からの感想を聞いてましたので、そちらの一番安い個人事業主向けプランの「スターター」を契約しました。初なので比較できませんが、会計ソフト無かったら下調べの時間も含めてヤバいぐらい手間がかかっただろうなというのがすぐ分かるレベルで作業簡略化できた気がします。他のソフトの使い勝手も気になるところですが、人によって向き不向きがあるっぽい（よかったらコメントで教えてください）。
この支出はどの勘定科目になるんだ〜というのも多発しましたが、ネットで調べるとだいたい会計ソフトのQAに載ってました。ソフトを購入して10万円以上だと「ソフトウェア」、10万円未満だと「消耗品費」とか（ソフト以外でもこの金額が１つのラインらしい）。でもこれがサブスク系のサービスになると通信費などに変わるとか。ややこしい〜。
ハガキはなんとなくジャンル分けしておくと良い
役所からなんだこれ的な税金関連のよく分からないハガキがしばしば届きますよね。何に使うのか分からないけど捨てたらダメだとは幼少期から理解していました。更にここ2~3年はジャンル分けもしていたので（色別のクリアファイルに挟むだけ）、いざ確定申告時に「この金額を入力しろ」と言われたとき役立ちました（医療費のお知らせが1枚見つからず焦りましたが）。古い書類をあさっていると埃が舞って目やノドが痛くなるので、こまめに掃除するかマスクするのがオススメです。
みんなが辛い辛い言っている理由を実感できた
個人事業主や一人社長の皆さんが「確定申告辛い辛い」と毎年言っているじゃないですか。なんとなく想像はしていましたが、実際に自分でやってみると確かにこれはしんどいなと実感できました。
1枚の請求書からこの項目はあれだこれだと会計ソフトに入力しているとき「あ〜もう辞めてえ」と何度もなりました。仕事のやり取りはほぼオンライン上で完結していたので「あの領収書（現物）どこいった？」は特にありませんでした。ただ経費扱いするつもりで購入した製品にAmazonギフト券を使っており、勘定科目が分からなくなって「あ〜辞めてえ」とはなりました。控除を受けるために謎文字列の金額を聞かれて「そんなの初めて聞いた」と何度もなりました。
去年そんなに仕事していないのに上記の感じで辛かったので（仕事ください）、ゴリゴリに働いている人はヤバいだろうなと容易に想像できました。ちゃんと稼げてる人は普通に税理士の人にお願いするのが良いでしょう。
さいごに
以上、そんな感じの確定申告でした。勉強にはなったし勉強になるだろうと思いながら我慢して作業しました。自分に当てはまりそうな税金控除の種類を調べるのも良いです。変な動画を作って現実逃避気分転換するのもオススメです。
Final Tax Return pic.twitter.com/yVPjih41V3
— MilkFan4 (@eatora22) 2023年2月20日
— MilkFan4 (@eatora22) 2023年3月6日
眠くなったら寝て目が覚めたら起きる生活をしてみた
限界個人事業主の利点を活かして、眠くなったら寝て自然と目が覚めたら起きる生活をしてみました。まだ十分に検証できていないのですが、気が変わらないうちに記事として残しておきます。
やり方
- どんな時間でも眠くなったら寝る
- どんな時間でも目が覚めたら起きる
以上です。
結果
まず良かったと思ったのは、仕事が捗っているときに作業延長できることです。いつもであれば、作業捗っていても寝る時間が来たら「あ〜もう寝なきゃ」となるのですが、寝たい時に寝るスタイルであれば作業続けたい欲のまま続行できます。
ちょっと似てますが他には、日常で時間に縛られない感じが良いです。もう寝なければ&起きなければの強迫観念に追われないため気が楽。
つぎに悪い点ですが、主に以下3つです。
- 寝たいタイミングで外が明るいと寝付き悪い
- 時間指定の予定があると合わせるのしんどい
- 曜日の感覚が無くなる
1つめは、朝や昼のタイミングで寝ようかなと思っても日差しが眩しくて寝にくいなとなる場合があることです。ただ、これは私の家のカーテンが短くて常に日が差し込んでくるのが一番の原因です。他の人はあまり気にしなくてよいかもしれない。
2つめ、当たり前ですが会議とか病院の予約とか決まった時間の予定がある時に合わせるのが大変です。めっちゃ眠いけど1時間後には外出しなきゃ〜ってときは結局時間に縛られてるなあと感じます。予定がゼロの人ほど気にしなくて良いです。
3つめ、曜日の感覚が無くなります。朝起きたり夜起きたりバラバラに過ごしていると今日何曜日？ってしばしばなります。社会不適合者の自覚が強くなり自己肯定感も下がるため精神的に良くないです。
以上のような結果で数だけで言えば「悪いじゃん！」と思われそうですが、在宅ワーク中心の私は捗りモード時に作業延長できるのはだいぶ良いです。寝たけりゃ寝るスタイルもめっちゃ楽です。このままで良いのかとマインドがキツくなる場合もありますが、このスタイルで稼げるようになったら多分気にしなくなると思います。結論、この生活スタイルは合う人or合わない人がいると思われますので、時間の融通が効く方は試してみてはぐらいの感じでした。
最後、個人的に気付いたことで私の睡眠時間が長すぎるような気がしています。寝たい時寝るスタイルで5時間前に寝たばかりなのに、また眠くなって普通に8時間寝るみたいなこともままあります（言い訳として頭使う作業が多く脳が疲れやすいためと書いておきます）。
体質的にロングスリーパーなのもありそうですが、単純に睡眠の質が悪いのではと最近思っています。窓から日が差して眩しいしマットレスも安物でペラペラなので浅い眠りを長時間続けているだけなのではと。金があるなら変な生活スタイルを試すより心地よい睡眠環境を整える方がオススメ。