技術部メンバー
最新記事 by 技術部メンバー (全て見る)
- 2023夏季休業のお知らせ - 2023年8月6日
- 八仙閣ビアガーデン2023年7月の記録！ - 2023年8月1日
- SE求人！福岡のIT企業がPL候補募集 - 2023年6月20日
Jquery入門編！ついに完結？
みなさんこんにちは！
今回も編集担当しました原です。
毎週掲載していた７月限定企画Jqueryを学ぼうの連載も今回が最後になってしまいました。
Jqueryが初めての人にもわかりやすくをモットーにうちのPG橋浦が丁寧な説明で解説していますのでぜひまだ見ていない方は１回からお読みください。
それでは最終回いってみましょう！橋浦さんお願いします。
どうも、技術部の橋浦です。
Jqueryを学ぼうシリーズも今回で最終回となります。早いですね。
最後ですから、私の趣味である音楽鑑賞にちなんだJqueryに関する記事を皆様に展開させていただきます。
本日は、私がJqueryで作れるジュークボックスを紹介したいと思います。
今回のポイント
〇音楽を再生できる
〇ボタンを押したらランダムで音楽が選択される
〇初期表示した時もランダムで音楽が流れる
以上のポイントを踏まえて、Jqueryを使用して実際に作っていきましょう。
まずは完成した全体像がこちらです。
上記画像がHTML部分とフォルダ構成です。Jqueryという一つのフォルダの中にそれぞれ、音楽をいれる「audio」、CSSをいれる「css」、Jqueryを入れる「ｊｓ」、そしてHTMLファイルを格納しています。統合開発環境を持っている方は、これと同じ構成にして中身をそのまま記述すれば、すぐにでも音楽再生ジュークボックス画面が出来上がるので、ぜひやってみてください！（曲などは自分で用意してください）
次はJqueryです。こちらは、この後に詳しく説明していきますね。
こちらはｃｓｓです。これは音楽タイトルを表示する部分のスタイルとなります。ｃｓｓは今回のテーマではないので、詳しく説明はしませんが、背景の色、ほかのタグとの間にもうける余白の設定等をしています。
最後に、このHTMLを開いた際の実際のページ画面です。
上の画像の通りに記述すると、このような形で音楽再生ジュークボックスを作ることができます。
では、次からポイントの詳しい説明を順にしていきます。
音楽を再生できる
これを実装するのはとても簡単です。HTML５にはaudioというタグが存在します。
そのタグを使うことで簡単に音楽ファイルを読み込み、それを再生することが出来てしまいます！
これを埋め込むことで、実行結果画面のような音楽再生機能の実装が可能になります。コードの内容はsrcの部分に音楽ファイルがあるフォルダを指定して、controlsという属性を設定してあげるとその音楽を再生できます。便利ですね！これで、音楽の再生機能は完成です。
ボタンを押したらランダムで音楽を選択する
ここからJqueryの出番です。ボタンを押すたびに、複数ある曲からランダムで選ぶようにします。そのやり方は以下のようになります。
まず、曲の置き場所を配列に格納します。今回は上記の三曲をあらかじめ音楽フォルダに入れてあるので、そこを示す文字列を格納しています。（趣味全開の楽曲ですね笑）
次にそれをランダム関数で抜き出します。格納した個数からランダムで数字を取得（今回であれば１～３のどれか）し、それをrandSongs変数に格納、その変数の中身でaudioタグのsrc（曲の場所指定）を書き換え、その曲を読み込んでもらうようにします。あとは、autoplay属性にtrueを指定してあげると、ランダムで曲を選択したのちにそれを自動で再生するという動きをつけて完成です。
この実装で、ボタンを押すたびにランダムで曲が変わり、それを再生してくれるようになります。
初期表示した時もランダムで音楽を選択する
最後に、初期表示した時もランダムで曲を選んでくれる処理の説明です。
これは、上記画像のようにreadyメソッドを使えばすぐにできます。
先ほどの２で作ったランダムで取得する処理をページが開かれた時に実行するのでこれで、初期表示した時もランダムで曲を選び、再生させるという処理が実装できました。
それでは最後に完成したものを実際に動かしてみましょう。
最初に曲が選ばれて、再生されます。
次にボタンを押すと…
ランダムで曲が選ばれて、自動再生されます。ボタンを押すたびにランダムで選曲されて、自動再生するようになります。
さらに、もう一度この画面を開くと・・・
先ほどとは別の曲が選択され、自動再生されています。
これで、実現したい動きを実装したジュークボックスが完成しました！（ぱちぱち
いかがでしたでしょうか。このようにJqueryを使うと、HTMLだけでは難しいことが比較的簡単にできるのです！このほかにも、非同期処理をするajaxというものや、もっと動的な処理を行う方法などたくさんあります。このジュークボックスも、曲を外部から持ってくる、再生している間はアニメーションをつけるなど拡張できることはたくさんあり、そのほとんどがJqueryで実現できてしまいます。
まだまだ伝えるべきこと、伝えたいことは多いのですが、今回のシリーズはこの辺で終了としておきましょう。皆様も、このブログをきっかけに、Web系の道に進んでみたり、趣味で作ってみたり、いろいろとやってみてください。では、次回また会えるときを楽しみにしております！僕からは以上！
７月毎週更新という難題を見事にクリアしてくださった橋浦さん本当にありがとうございました。今回のこの連載で少しでもJqueryに興味を持った方はぜひ自分でチャレンジしてみてください。PGの入口になれたら光栄です。では今回はここらへんで終了としましょう。最後まで読んで頂きありがとうございました。 原