先日から始めた、Spotifyで聴いた曲を自動で記録し、検索結果と一緒に表示する仕組み(一言で何と言うのか、まだ迷っている)のプロトタイプが動き出した。画面(web)は以下のような感じだ。プロトタイプなので、トップは太古の「ホームページ」ｗのように、余りにもシンプルだ。検索結果は少し(結構)凝って、(力技でｗ)それなりにした(まだ細かい問題は多い)。
もちろん、主目的の再生履歴が出るようにした。再生した日時(自動で記録される)はもちろん(今は最初の日時のみ)、評価(今はDBに手入力する)が♥(好き)や✘(嫌い)で出るし、コメントも出る(これも今は手入力)。そして、ジャケット画像やアルバムや曲のリンクを押すと、ちゃんと再生できる(今はまだSpotifyのwebプレーヤーに飛ぶだけ → Spotifyのプレーヤーアプリで再生できるようになった → デモ動画)。
-
- 検索画面
-
- 検索結果
-
- 検索結果 (2)
-
- 再生画面 (Spotify web)
全体的な構成の概要は以下のとおりである。
Spotifyプレーヤー ⇔ ミニプレーヤー・リモコン ↑ 制御 | | ↓ | 再生曲情報の自動記録 ← (再生曲情報ファイル) |再生 ↑↓ |指示 DB (SQLite) | ↓再生履歴 検索画面(web) ⇔ Spotifyサイト 検索(API)
-
- Spotifyプレーヤー
-
- Spotifyミニプレーヤー
-
- 再生曲情報の自動記録
-
- DB (SQLite)
検索条件の指定方法は模索中だ。今は、Spotifyの条件(これが結構使えない・・・)と再生履歴の条件を別にしている。後者は、なんとSQLの条件式を入れるようにしている(画面上部の"History search"の欄を参照)。今はこの方がいろいろ試せるからいいのだが、将来的には「再生したことがない」/「−ある」といった、プリセットのようなものを選択できるようにしたい(画面中の式は「再生したことがあるアルバム中のトラック」の例)。
RDBのSQLにはなかなか苦労したが、大分使えるようになった。慣れれば便利な感じだ。でも、泥沼のように奥が深いようだｗ それ以外にも山ほど考え・試行錯誤・工夫・苦労した話があるし、「とりあえず」や"TODO"も山ほどあるｗので、あとで書きたい。まずは作るだ。
↓
その後、大分改良できた。検索結果が多い場合に画面がとんでもないことになるので、どうしたらいいものか考え、(良く見るが)開閉ボタンでアルバム中のトラック情報を表示・非表示できるようにした。アルバム情報の下の"♪"を押すとトラック情報一覧が出て、再度押すと消える。(→ デモ動画)
-
- トラック情報ボタン(♪)を押すと →
-
- トラック情報一覧が出る。
やる前は、大の苦手なJavaScriptを使うのが嫌なので、何とか別の方法がないか考えていたのだが、なかなかなくてJavaScriptでやらざるを得なくなった。もちろん、(僕の技術で)できるのか分からなかったが、その前に検索ページからSpotifyプレーヤーで曲を再生するために使った方法(なかなかトリッキーなので、あとで書きたい)がヒントになったので、意外に容易に「それなり」にできた。
こういうのは、世の中に出回っているいろいろなライブラリを使えば簡単なのだとは思うが、そもそも、何が一番使いやすいのかも分からず、選んで使うのに慣れるまでが大変な(気がする)ので、自分で「適当に」作った。きっと、どこかに落とし穴があるに違いないｗ (5/15 17:32)
(23:51 システム構成を追記; 5/15 10:40 Spotifyプレーヤーでの再生のデモ動画を追加; 5/15 17:32 トラック情報表示の件を追記)
naoki: 2019年5月14日 18:53
すっごく格好いいです。プロトタイプのトップ画面のシンプルさ、僕は震えました。
(今は)SQL文を使うところがまたカッコイイ……。
検索結果もいいですね。クリックして曲再生、「うおぉ!」という感じです。
れんと: 2019年5月14日 23:22
●うれしいです!
ごちゃごちゃさせずに、しかも、最新の技術とかにこだわらずｗ、必要最小限のものを厳選して作るってのは、結構好きです。
昔のGoogleもそんなシンプルな感じでしたね。近頃はブラウザから直接検索できるので、トップの検索ページを開かないのですが、今見たらやっぱりシンプルで感心しました。ただ、中身は超最新技術なんでしょうねｗ
再生は、Spotifyのプレーヤーでできるようにしました。つい調子に乗って、今までやってましたｗ なかなかおもしろうです。