music search

iTunesにある楽曲などを楽曲名や楽曲名以外のキーワードから検索できます。「作品を編集」をクリックしてから編集画面に移動して「実行」をクリックしてください。

エディタ

プログラム

//==========================================================
//作品を編集をクリックしてから実行(F9)をクリックしてください

// =========================================================
// 1. グローバル変数・基本UIの作成
// =========================================================
全検索結果＝[]
現在ページ＝1
ページ内件数＝20

「---------------------------------------------------------------------------------------------------------------」のラベル作成。
改行作成。

「music search」のラベル作成。
それの「文字サイズ」に「20px」をDOMスタイル設定。
それの「style」に「font-weight: bold; color: #1a365d;」をDOMスタイル設定。

改行作成。改行作成。

「キーワード: 」のラベル作成。
検索語入力＝「」のエディタ作成。
検索語入力の「style」に「font-size: 16px; padding: 6px; margin-right: 8px; width: 200px;」をDOMスタイル設定。

検索ボタン＝「検索」のボタン作成。
検索ボタンの「style」に「font-size: 16px; padding: 6px 16px; background-color: #2563eb; color: white; border: none; border-radius: 4px; cursor: pointer;」をDOMスタイル設定。

改行作成。改行作成。

状態表示＝『検索したいアーティストや楽曲名を入力して「検索」を押してください。』のラベル作成。
状態表示の「文字サイズ」に「14px」をDOMスタイル設定。
状態表示の「style」に「color: #475569; font-weight: bold;」をDOMスタイル設定。

改行作成。改行作成。

// 上部ページ操作コントロール
前ボタン上＝「◀ 前の20件」のボタン作成。
前ボタン上の「style」に「font-size: 14px; padding: 4px 12px; margin-right: 8px; display: none;」をDOMスタイル設定。

次ボタン上＝「次の20件 ▶」のボタン作成。
次ボタン上の「style」に「font-size: 14px; padding: 4px 12px; margin-left: 8px; display: none;」をDOMスタイル設定。

ページ表示上＝「」のラベル作成。
ページ表示上の「style」に「font-weight: bold; font-size: 14px; color: #1e293b;」をDOMスタイル設定。

改行作成。

「---------------------------------------------------------------------------------------------------------------」のラベル作成。
改行作成。

// カード一覧を表示するコンテナ枠
カード表示エリア＝「」のラベル作成。
カード表示エリアの「style」に「display: flex; flex-direction: column; gap: 16px; margin-top: 16px; width: 100%; box-sizing: border-box;」をDOMスタイル設定。

改行作成。

// 下部ページ操作コントロール
前ボタン下＝「◀ 前のページ」のボタン作成。
前ボタン下の「style」に「font-size: 14px; padding: 4px 12px; margin-right: 8px; display: none;」をDOMスタイル設定。

次ボタン下＝「次のページ ▶」のボタン作成。
次ボタン下の「style」に「font-size: 14px; padding: 4px 12px; margin-left: 8px; display: none;」をDOMスタイル設定。

ページ表示下＝「」のラベル作成。
ページ表示下の「style」に「font-weight: bold; font-size: 14px; color: #1e293b;」をDOMスタイル設定。

// =========================================================
// 2. ページ表示処理
// =========================================================
●ページ描画処理
    全件数＝全検索結果の要素数
    総ページ数＝「Math.ceil({全件数} / {ページ内件数})」をJS実行
    
    もし、現在ページ > 総ページ数ならば
        現在ページ＝総ページ数
    ここまで
    もし、現在ページ < 1ならば
        現在ページ＝1
    ここまで

もし、全件数＝0ならば
        カード表示エリアに「」をHTML設定
        ページ表示上に「」をテキスト設定
        ページ表示下に「」をテキスト設定
        前ボタン上の「style」に「display: none;」をDOMスタイル設定
        次ボタン上の「style」に「display: none;」をDOMスタイル設定
        前ボタン下の「style」に「display: none;」をDOMスタイル設定
        次ボタン下の「style」に「display: none;」をDOMスタイル設定
        戻る
    ここまで

// ページ範囲の計算
    開始インデックス＝(現在ページ - 1) * ページ内件数
    終了インデックス＝開始インデックス + ページ内件数
    
    HTML出力＝「」
    
    // 表示範囲のループ
    iを開始インデックスから(終了インデックス - 1)まで繰り返す
        もし、i >= 全件数ならば
            抜ける
        ここまで
        
        対象＝全検索結果[i]
        曲名＝対象[「trackName」]
        歌手名＝対象[「artistName」]
        アルバム名＝対象[「collectionName」]
        画像URL＝対象[「artworkUrl100」]
        試聴URL＝対象[「previewUrl」]
        詳細URL＝対象[「trackViewUrl」]
        
        もし、画像URL≠未定義ならば
            画像URL＝画像URLの「100x100」を「600x600」に置換
            画像URL＝画像URLの「http://」を「https://」に置換
        ここまで

もし、曲名＝未定義ならば
            曲名＝「タイトル不明」
        ここまで
        もし、歌手名＝未定義ならば
            歌手名＝「アーティスト不明」
        ここまで
        もし、アルバム名＝未定義ならば
            アルバム名＝「シングル / アルバム情報なし」
        ここまで
        
        オーディオタグ＝「」
        もし、試聴URL≠未定義ならば
            オーディオタグ＝「<audio src='{試聴URL}' controls style='width: 100%; height: 32px; display: block;'></audio>」
        ここまで
                
        // 高さとレイアウトを完全に固定し、はみ出しを防ぐため overflow: hidden を指定
        カードHTML＝「<div style='width: 100%; height: 230px; flex: 0 0 230px; background-color: #0f172a; border: 2px solid #38bdf8; border-radius: 16px; padding: 18px; font-family: sans-serif; color: white; box-shadow: 0 8px 18px rgba(0,0,0,0.3); display: flex; gap: 20px; box-sizing: border-box; overflow: hidden;'>
            <div style='width: 194px; min-width: 194px; height: 194px; min-height: 194px;'>
                <img src='{画像URL}' style='width: 100%; height: 100%; object-fit: cover; border-radius: 12px;'>
            </div>
            <div style='flex: 1; display: flex; flex-direction: column; justify-content: space-between; height: 100%; overflow: hidden; box-sizing: border-box;'>
                <div>
                    <b style='color:#38bdf8; font-size:17px; display:block; margin-bottom:4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;'>{曲名}</b>
                    <span style='color:#cbd5e1; font-size:14px; display:block; margin-bottom:2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;'>{歌手名}</span>
                    <span style='color:#94a3b8; font-size:12px; display:block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;'>{アルバム名}</span>
                </div>
                <div style='width: 100%;'>
                    <div style='margin-bottom: 6px; width: 100%;'>{オーディオタグ}</div>
                    <a href='{詳細URL}' target='_blank' rel='noopener noreferrer' style='display: block; text-align: center; color: #fde047; font-weight: bold; text-decoration: none; background-color: #1e293b; padding: 6px 0; border-radius: 8px; border: 1px solid #fde047; font-size: 13px;'> Apple Musicで開く ➔</a>
                </div>
            </div>
        </div>」
        
        HTML出力＝HTML出力＆カードHTML
    ここまで
    
    カード表示エリアにHTML出力をHTML設定
    
    ページテキスト＝「 ページ {現在ページ} / {総ページ数} （全 {全件数} 件） 」
    ページ表示上にページテキストをテキスト設定
    ページ表示下にページテキストをテキスト設定
    
    もし、現在ページ > 1ならば
        前ボタン上の「style」に「display: inline-block;」をDOMスタイル設定
        前ボタン下の「style」に「display: inline-block;」をDOMスタイル設定
    違えば
        前ボタン上の「style」に「display: none;」をDOMスタイル設定
        前ボタン下の「style」に「display: none;」をDOMスタイル設定
    ここまで
    
    もし、現在ページ < 総ページ数ならば
        次ボタン上の「style」に「display: inline-block;」をDOMスタイル設定
        次ボタン下の「style」に「display: inline-block;」をDOMスタイル設定
    違えば
        次ボタン上の「style」に「display: none;」をDOMスタイル設定
        次ボタン下の「style」に「display: none;」をDOMスタイル設定
    ここまで
ここまで

// =========================================================
// 3. iTunes Search API 取得処理
// =========================================================
●iTunes検索処理
    検索語＝検索語入力のテキスト取得
    検索語＝検索語のトリム
    
    もし、検索語＝「」ならば
        状態表示に『検索キーワードを入力してください。』をテキスト設定
        全検索結果＝[]
        現在ページ＝1
        ページ描画処理
        戻る
    ここまで
    
    状態表示に「『{検索語}』を検索中...」をテキスト設定
    全検索結果＝[]
    現在ページ＝1
    ページ描画処理
    
    エンコード語＝「encodeURIComponent('{検索語}')」をJS実行
    
    URL＝「https://itunes.apple.com/search?term={エンコード語}&country=JP&entity=song&attribute=songTerm&limit=200」
    
    URLにAJAX送信。
    データ＝それをJSONデコード。
    
    件数＝データ[「resultCount」]
    もし、件数＝0または件数＝未定義ならば
        状態表示に「❌ 『{検索語}』に該当する結果が見つかりませんでした。」をテキスト設定
        戻る
    ここまで
    
    状態表示に「{検索語}』の検索結果が見つかりました。」をテキスト設定
    
    全検索結果＝データ[「results」]
    現在ページ＝1
    ページ描画処理
ここまで

// =========================================================
// 4. イベント割り当て
// =========================================================
検索ボタンをクリックした時には
    iTunes検索処理
ここまで

検索語入力の「onkeydown」に「キー判定処理」をDOMイベント設定。

●(イベントの)キー判定処理
    もし、イベント[「key」]＝「Enter」ならば
        iTunes検索処理
    ここまで
ここまで

前ボタン上をクリックした時には
    現在ページ＝現在ページ - 1
    ページ描画処理
ここまで

前ボタン下をクリックした時には
    現在ページ＝現在ページ - 1
    ページ描画処理
ここまで

次ボタン上をクリックした時には
    現在ページ＝現在ページ + 1
    ページ描画処理
ここまで

次ボタン下をクリックした時には
    現在ページ＝現在ページ + 1
    ページ描画処理
ここまで

// =========================================================
// 5. リンク作成関数と末尾リンクの生成
// =========================================================
●(txtでURLの)リンク作成
    ELとは変数＝「a」のDOM要素作成。
    ELの「href」にURLをDOM属性設定。
    ELの「target」に「_blank」をDOM属性設定。
    ELの「style」に「margin-right: 15px;」をDOMスタイル設定。
    ELにtxtをテキスト設定。
    DOM親要素へELをDOM子要素追加。
    ELで戻る。
ここまで

改行作成。改行作成。
「https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/iTuneSearchAPI/index.html」の「iTunes Search API」でリンク作成。

実行結果

保存

プログラムを保存

表示ページ

直前に実行または一時保存した内容を復元

実行環境

なでしこバージョン

素材

画像・音声・データ

ログインすると素材をアップロードできます。

🍯 プログラム貯蔵庫

プログラム

プログラムを保存

なでしこバージョン

画像・音声・データ