at backyard

Color my life with the chaos of trouble.

今月作成したGitHubリポジトリを振り返る(2020年9月)

これと同じテーマで進めていきます。
(まだ1日残っているけど、もう書いちゃう。思い立ったときに書かなければ、たぶんもう書かないからだ)

shinshin86.hateblo.jp

今月だいぶ少ない...Dig Musicの開発などに結構時間をかけていた気がするからだ。
(と言っても集計があくまで 今月作成したGitHubリポジトリ なので、これ自体が今月の進捗を言い表せるわけではない。例えば、既存リポジトリのメンテなどもあるからだ)

特にDig Musicについては個人的には初のVercel利用サービスでもある。
Next.jsのIncremental Static Regenerationを使うため、というのが一番の理由だが、とても設定がしやすく良かった。

そういえばDig Musicについて英語での紹介記事を書いたのでこちらにも貼っておく。

medium.com

use-mini18n

github.com

Reactアプリをサクッとi18n対応するために作成したhooksライブラリ。

紹介記事を英語・日本語でそれぞれ書いた。

英語の方はdev.toに初投稿。
dev.toは初めての投稿だったが、リアクションもらえて嬉しい。
やはり何らかのリアクションがもらえると、モチベーションがアップすると思った次第。
自分もいい感じのポスト見つけたら、積極的にリアクションしていきたいなと改めて思いました。

dev.to

日本語の方はQIitaに。

qiita.com

最近Zennに書いているので、そちらもよいかと思ったけど、QIitaに書いた別の記事に対して関連をもたせたかったのでそちらに書いた。

というわけで、リポジトリから話はそれるが、Zennに2本ほど記事を書いてみた。
細かな部分だが、Zennは文章を書く上での使いやすさを感じる瞬間が多く、書いていくうち感じてくる負担的なものが少ない気がする。良い。

例えばこんなところとかも優しさを感じる。

というわけで、下記はZennに書いた記事。

zenn.dev

zenn.dev

雑談: ラジオ体操がてらのJSON parser

最近朝のラジオ体操がてら、時々JSON parserを書くようにしている。
最初JavaScriptで書いて、その後TypeScript(Deno)で書いた。

Denoは以前少し触ったことがあったが、感覚が空いていたのでまた1から触っている感じ。 一応JSONパーサ自体は書けたが、設計は微妙だ。もっと良く出来そう。と思えるので、よい筋トレにもなる。
なるべく続けていくようにしたい。

ちなみにスクリプト内でファイルを読み込む処理などがあるが、そこに関するドキュメントは下記を参照している。

builtin@stable - deno doc

Deno触る上で結構お世話になりそう。

熱を出すと、なぜ人は悪夢を見るのか?

AlubinoにてMidnight Burnという曲をSound Cloudに公開した

以前Twitterでも呟いていたが、ブログにも書く

Sound Cloudのリンクはこちら。

Midnight Burn by Alubino | Free Listening on SoundCloud

ダークな雰囲気が漂うエレクトロニカ?ドローン?
なんかウマイ言葉が思いつかないが、とりあえず熱を出した夜に見る悪夢のような音楽っぽいなと完成した曲を聴き返しながら感じていた。
熱を出した日の晩に悪夢にうなされた経験が何度もあるが、なぜ大直を崩した日に見る夢は悪夢になる確率が多いのだろうか?
それとも、そういう夢ばかりをよく覚えているだけ?

熱を出すと、なぜ人は悪夢を見るのか?

と思って、試しに調べてみたらこんな記事を見つけて、興味深く読んだ。

logmi.jp

他にも調べてみると色々な説が出てくるかもしれないが、それをするには眠すぎるのでとりあえずこの記事だけ貼らせていただく。

余談だが、最近セミの恐怖もなくなったので、少しずつ外に出れるようになってきた。
久しぶりにFitbitを充電して(※)、ゆっくり時間をかけて外を散歩するようにしている。秋の匂いを感じる瞬間、とても心が安らぐ。
※ここ数年は時計を腕につけるのを煩わしいと感じており、運動するとき以外は時計を付ける習慣がなくなってしまった。

Webページを作成するために必要となるメタタグなどのHTMLを簡単に生成できるWebツールを作った。

作ったと言っても、実は少し前から公開していた。
自分自身がこういうツールが欲しくて作ったということもあり、しばらくは自身で利用していたが、このたび日本語対応したので、ブログでもお知らせさせていただこうと思った次第。

html-generator.shinshin86.com

ツールの内容としては表題にある通りのままで、作成するサイトのtitleやdescriptionやOGP用の画像パスなどをサイト内のフォームに入れてもらえば、それ用のメタタグが追加された状態のHTMLが生成されるので、そちらをクリップボードにコピーして利用する形となる。
BootstrapとかBULMAとか、CSSフレームワークを使うケースもあったので、それ用のHTMLを生成できるようにもしてある。

あまりデザインとかも頑張っておらず、見た目以外にも荒い点があるかもしれない。
もし気になる点が見つかったら、TwitterのDMなどで気軽にフィードバックなどをいただけると幸いです🙇

追記: 以前に既に書いていた。

あとになって気づいたのですが、こちらのポストでも書いていましたね。

shinshin86.hateblo.jp

秋の虫の音が数分ひたすら流れ続けるだけの音をYouTubeにアップしました。

下記のとおりです。

そしてYouTubeはこちらでございます。

youtu.be

ちなみに似たような動画がありすぎて、YouTube内で検索しようとしても全く引っかかりませんでした!😭
まあ、そんなこんなでYouTube上では埋もれてしまっているこの動画ですが、秋の空気を感じられる癒やし要素多めな音になっているので、よかったら聴いてみてください。
眠るときに枕元で流すのもよいかと思います😪

新しい音楽に出会いたい音楽好き向けの音楽アプリ、Dig Musicを作った

Dig Musicという音楽アプリを作ったのでまずはこちらのブログでご報告。
Webアプリなので、下記のページにアクセスしてもられば、すぐに使うことが可能です。

dig-music.shinshin86.com

Dig Musicはどんな音楽アプリなのか?

f:id:shinshin86:20200918074119p:plain

ユーザにランダムに音楽をレコメンドしてくれるWebアプリです。
ただし、ユーザの嗜好には基づかない、完全にランダムな音楽を勧めます。
そのため、全く好みじゃない音楽が勧められることもあるかもしれません。

逆に言うと、アンテナを全く張っていなかった分野の音楽を開拓することができるかもしれませんし、
ものすごくマニアックな音楽に出会えるかもしれません。
(実際、開発しているとそんな音楽にわんさか出会うことが出来ます)

そのため、このアプリは未知の音楽にドンドン出会いたいと思える、音楽好きの方向けのアプリとなります。
自分のコンフォートゾーンからはみ出してまで音楽を開拓したいとは思えない人には向いていません。
Apple MusicやSpotifyが勧めてくれる音楽を聴いたほうが有意義な時間を過ごすことができるでしょう。

あと、基本的に洋楽ばかり勧めます。
邦楽も何度か勧められましたが、自分の使用した範囲だと昔の歌謡曲や、国内よりも海外で注目されているようなマニアックな音楽ばかりでした。
これは利用している音楽情報がDiscogsのAPIを利用しているというのが、たぶん理由として考えられます。
そのため、日本の音楽が好きな方も、利用対象からは外れます。

Dig Musicの使い方は?

Dig Musicはとてもシンプルなアプリです。
ページを開けば勝手に音楽を勧めてくれます。
(運営費用を抑えている関係で、最初のアクセスだけ少し待たされるかもしれません。ご了承ください!🙇)

もし音楽が好みじゃなければ、ページをリロードするか、別のアルバムを見る というボタンを押せば、別の音楽を勧めてくれます。

気持ち程度の履歴機能がついており、一応閲覧したアルバムは履歴として残ります。
が、これはブラウザの機能として提供されている記録装置に書き込んでいるため、ブラウザをシークレットウィンドウで開いたり、別のブラウザからアクセスした場合は参照できません。
もちろんアカウント間の同期機能とか、そういうものもありません。
アクセスしたら、ランダムに音楽を勧められる。提供されている機能はそれだけです。

Twitterへのシェア機能をつけているので、もし好みの音楽が見つかったらTwitterでシェアしてみてください。
シェアしてくれたら励みにもなります😭

下記は実際に自身がシェアしたときのツイートです。
(ツイート前半は自身で打ち込んだ文章ですが、後半は勝手に入力されている文章になります。もちろんこれらの文章は自由にいじってもらって構いません)

その他、過去に表示された音楽とかジャンルごとのページもあるのですが、まあ、こちらはそんなに使わなくてもよいかと思います笑。
例えばジャンルごとのページなどは、今まで表示された音楽を中心に一応ジャンルごとに分けて表示するページですが、 Dig Musicの本質はランダムに音楽を勧められる 、それだけだと思うので、そこまで重要視していません。 じゃーなぜこんなページ作ったのか?というと、あくまでSEO観点によるものです。

なんで、Dig Musicを作ったのか?

最近のレコメンドエンジンに少々嫌気が差してきたので、作りました。

私自身、毎日Apple Musicで音楽を聴いている人間であり、Apple Music内のレコメンドエンジンのおかげで沢山の未開拓の音楽を知ることが出来ています。
おそらく、この世界の誰よりも私の音楽の好みを理解しているのは、Apple Musicのレコメンドエンジンになるでしょう。

レコメンドシステムそれ自体は非常に便利なものですが、いつしか自分が好きと思えるものとしか出会えていないことに気づきました。
例えば私はアニマル・コレクティヴが好きで、彼らをフォローしている人々の音楽も好きなものが多いです。新しい発見もあるでしょう。
でも、不意に古臭いシャンソンが聴きたくなったり、ズブズブと地面に沈み込むようなどんよりとしたドゥームメタルが聴きたくなったり、モロッコの伝統音楽が聴きたくなったりします。
そういう物を探すときは、従来どおり、ググったり、それこそApple Musicの検索機能を使って調べたりして好みの音楽に辿り着こうとします。
(聴く割合が少ない音楽の場合、なかなかレコメンドのアルゴリズムには乗らないようで、おすすめしてくれません。まあ、そういうところまで汲み取ってくれ、というのは要求が高い気もしますが)

レコメンドエンジンは、いつも愉快で楽しいのだけど、付き合い続けていると、いつも同じ世界しか見ることが出来ない(時として)退屈な人間のように感じるようになってきました。
こうやって書くと批判しているようにも読めますが、レコメンドエンジンそれ自体はとても素晴らしいものだと思います。私自身は今でもレコメンドエンジンのことが好きだし、これからもフル活用していくでしょう。

ただ、それ以外の選択肢もほしいなと思いました。

また、最近はレコメンドエンジンが提供するコンテンツばかりで、少しばかりそういうものにも嫌気が差しているし、エコーチェンバー現象に常に陥っているような気もしています。 こちらについては、以前日記にも書きました。

nikki.shinshin86.com

リアルタイム性が好きだったTwitterも、今や私の嗜好を汲み取りまくってカスタマイズされまくったフィードに成り果てています。
今このフィードに現れるツイートは、Twitter側が俺が詳細を気になってツイートをクリックしそうだと認識している情報なのだよな、、といつも斜めから見てしまいます。 もちろん、実際に現れるツイートそのものは満足度が高く、そういう意味ではTwitterの行っている施策は成功していると思いますが...
(また、ビジネスなど、いくつかの理由でTwitter側がそのようにするのは理解できるので、Twitterのことを批判しようとは思いません。理解できます。が、リアルタイム性が失われたことで魅力がなくなってしまった部分が少なからずあるのは事実です)

今回はたまたまTwitterを例にしましたが、そういうものにインターネットはあふれており、ここ数年は過剰だと感じることも多いです。
そういう心境からユーザの嗜好を汲み取らないレコメンド機能というものがあってもよいのではないかという気持ち(ってか、それってレコメンドって言わないやん!!)、また、世間一般に広まっているユーザの嗜好を汲み取ったレコメンドエンジンに対するアンチテーゼ的なものとしても、このアプリを作りました。

もちろん、そんな私のドウデモイイ考えとは異なった観点から、自分自身がランダムに音楽を勧められるアプリが欲しかったということもあります。
(実際開発しながら、私はたくさんの未知の音楽に出会えました。マイナーだけどもユニークなポップミュージックから、ロシアの子供向け音楽、難解だけどもどこか耳に心地よい現代音楽などなど)

まあ、そんなこんなでDig Musicというランダムに音楽を勧めてくれるWebアプリを作ったというお話でした。

以下、メモ書き。

  • デザインとかは今後変わる予定あります。一応まだベータ版という立ち位置です。が、ベータ版と書くと自分に甘えが出ちゃうので、そういう表記は避けました。
  • 微妙な箇所などあればお気軽に私のTwitterに直接フィードバックください。
  • 今のところ、英語と日本語に対応していますが、今後他の言語にも対応していきたいところ。。。!

JavaScriptでJSON配列の特定のkeyにおける、重複数をカウントする使い捨てスクリプトメモ

開発をしていて必要になったので、書いた。
1回使えば役目を終えるコードだったため、使い捨てスクリプト的な形で書いている。
今後もまたどこかで使用するシーンがでてくると思ったので、こちらに書き残しておく。

なお、このスクリプトはこちらのQiitaでコメントされている方のコードを大いに参考している。
というか、そのまま引用させていただいている形だ。

JavaScriptで配列の重複している項目の数をカウントする - Qiita

書いたコード↓
なお、Node.jsで実行したので、下記のようなコードとなっている。

const getDuplicateCountList = (arr) => {
  return arr.reduce((counts, key) => {
    counts[key] = counts[key] ? counts[key] + 1 : 1;
    return counts;
  }, {});
};

(async () => {
  const ids = jsonArr.map(({ id }) => id);

  const duplicateCountObj = getDuplicateCountList(ids);
  const duplicateItemList = Object.keys(duplicateCountObj).filter(
    (key) => duplicateCountObj[key] > 1
  );
  console.log({ duplicateItemList });
})();

jsonArrには下記のようなデータが入っている想定。

[
  {
    "id": "1",
    "name": "hoge"
  },
  {
    "id": "2",
    "name": "fuga"
  },
  {
    "id": "3",
    "name": "piyo"
  },
  .
  .
  .
]

id が重複しているやつがあれば、ログに出力される。

create-next-appを用いてTypeScriptプロジェクトの雛形を作る

いつも忘れて都度調べている気がしたので、コマンドをメモしておく。

mkdir my-project
cd my-project
npx create-next-app --example with-typescript .
yarn dev

あとは localhost:3000 にアクセスすればOK