このページの本文へ

日曜プログラマー大歓迎 JavaScriptの部屋 第5回

趣味のプログラミングはお気楽で楽しい!

思い出の写真を思い出のBGMにのせてスライドショーにしたい

2017年02月21日 18時00分更新

文● 加藤兄 プログラム作成・監修●松下浩則

  • この記事をはてなブックマークに追加
  • 本文印刷

尾地定数(おじ・さだかず) 自称「日曜プログラマー」。芽衣のおじ。

開発芽衣(かいほつ・めい) 尾地のめいで、近所に住む中学生。

めい ふぅーっ。
おじ どうした?
めい いや、今回の週刊アスキー(2月21日発売No.1115)の連載『JavaScriptの部屋』は、難しくてちょっと疲れちゃった。
おじ BGM付きのスライドショーを作ったんだけど、ちょっとしたウェブアプリケーションだったよね。これの大規模になったものが、Gメールとかグーグルマップなんだよ。

めい おおー、そう考えると結構すごいことやってるのかも、私たち? みたいな。
おじ まぁプロ野球と、消しゴムを使った野球ごっこくらい違うと思うけどな。
めい あ、野球は興味ないのでいいです。
おじ いや、そういう話じゃなくて。プログラムを覚えると、グーグルマップのようなものも作れるってことが言いたかったんだ。
めい 私はゲーム作ってみたい。
おじ ところで、今回のスライドショーがどんなプログラムだったか覚えてる?
めい 長いプログラムだったし、機能がいっぱいあったので全部は覚えてないけど……スライドショーの写真を切り替えているのは、HTMLタグの「img」の“src”をジャバスクリプトで設定しなおしてるとかいう話だった、気がする。
おじ そう。松下師匠が「ウェブページは一度表示したら終わりってわけじゃないんだ」的なこと言ってたよね。ジャバスクリプトを使えばあとからどんどん変えていける。
めい あと、BGMの鳴らし方を教えてもらった。なんかタグで音楽ファイルを指定して、ジャバスクリプトのメソッド?で鳴らしたり一時停止したりできるんだった、気もする。
おじ 「audio」タグとplay()メソッドなどだな。ホント、覚えるの苦手だな、めいちゃんは。
めい だって長いプログラムだったし。
おじ 長いったって、たった158行だよ。しかも3分の1くらいは空白やコメントだし。それで、こんなスライドショーが作れるって、やっぱプログラミングはすごいし、楽しいね。
めい いや、だってこれ見てよ。週刊アスキー3ページ分の長さだよ。

おじ まぁあとで読み直して復習しておくんだな。
めい それから、今回はhtmlファイル以外に用意しなくちゃいけないファイルがたくさんあった。

おじ あ、これはスライドショーで流れるBGMとか写真とかの素材だね。こればっかりは、こちらから提供できないので、試してみる人は自分で用意してほしい。その際、ファイル名をプログラムに合わせて“sample0”みたいな名前にする必要があるので注意ね。
めい 逆に、持ってるファイル名に合わせてプログラムの方を変えるっていう手もあるんじゃないの?
おじ そうだね。もちろん、それでもいい。むしろ、プログラムを改造してみるっていうのは、とても勉強になるから、積極的にやったほうがいいよ。
めい そして、おもしろいプログラムができたら……
おじ ぜひ投稿してくださいね。詳細は下記に書いてあるウェブページから。お待ちしていまーす。

★アスキーの有料会員サービス「ASCII倶楽部」会員の方は、下記リンクをクリックすると直接ページが開きます。

日曜プログラマー大歓迎
JavaScriptの部屋

週刊アスキーNo.1115はBOOK☆WALKER、Kindle、kobo等電子書店で発売中!

週刊アスキー No.1115(2017年2月21日発行)[Amazon]

電子版週刊アスキーの購入はこちらから

カテゴリートップへ

この連載の記事

ASCII倶楽部

注目ニュース

  • 角川アスキー総合研究所

プレミアム実機レビュー

ピックアップ
1
Anker PowerLine III Flow USB-C & USB-C ケーブル Anker絡まないケーブル 240W 結束バンド付き USB PD対応 シリコン素材採用 iPhone 17 / 16 / 15 / Galaxy iPad Pro MacBook Pro/Air 各種対応 (1.8m ミッドナイトブラック)
Anker PowerLine III Flow USB-C & USB-C ケーブル Anker絡まないケーブル 240W 結束バンド付き USB PD対応 シリコン素材採用 iPhone 17 / 16 / 15 / Galaxy iPad Pro MacBook Pro/Air 各種対応 (1.8m ミッドナイトブラック)
¥1,890
2
KIOXIA(キオクシア) 旧東芝メモリ microSD 128GB UHS-I Class10 (最大読出速度100MB/s) Nintendo Switch動作確認済 国内サポート正規品 メーカー保証5年 KLMEA128G
KIOXIA(キオクシア) 旧東芝メモリ microSD 128GB UHS-I Class10 (最大読出速度100MB/s) Nintendo Switch動作確認済 国内サポート正規品 メーカー保証5年 KLMEA128G
¥1,980
3
Anker USB Type C ケーブル PowerLine USB-C & USB-A 3.0 ケーブル iPhone 17 / 16 / 15 /Xperia/Galaxy/LG/iPad Pro/MacBook その他 Android 等 USB-C機器対応 テレワーク リモート 在宅勤務 0.9m ホワイト
Anker USB Type C ケーブル PowerLine USB-C & USB-A 3.0 ケーブル iPhone 17 / 16 / 15 /Xperia/Galaxy/LG/iPad Pro/MacBook その他 Android 等 USB-C機器対応 テレワーク リモート 在宅勤務 0.9m ホワイト
¥740
4
Anker iPhone充電ケーブル PowerLine II ライトニングケーブル MFi認証 超高耐久 iPhone 14 / 14 Pro Max / 14 Plus / 13 / 13 Pro / 12 / 11 / X/XS/XR / 8 Plus 各種対応 (0.9m ホワイト)
Anker iPhone充電ケーブル PowerLine II ライトニングケーブル MFi認証 超高耐久 iPhone 14 / 14 Pro Max / 14 Plus / 13 / 13 Pro / 12 / 11 / X/XS/XR / 8 Plus 各種対応 (0.9m ホワイト)
¥990
5
KIOXIA(キオクシア)【日本製】USBフラッシュメモリ 32GB USB2.0 国内サポート正規品 KLU202A032GL
KIOXIA(キオクシア)【日本製】USBフラッシュメモリ 32GB USB2.0 国内サポート正規品 KLU202A032GL
¥1,100
6
UGREEN USB Type Cケーブル PD対応 100W/5A 超急速充電 USB C ナイロン編み 断線防止 iphone17/16/15シリーズ/iPad/MacBook Pro/Galaxy S24/Matebook/iPad/Xperia等USB-C各種対応(1m, ブラック)
UGREEN USB Type Cケーブル PD対応 100W/5A 超急速充電 USB C ナイロン編み 断線防止 iphone17/16/15シリーズ/iPad/MacBook Pro/Galaxy S24/Matebook/iPad/Xperia等USB-C各種対応(1m, ブラック)
¥743
7
エレコム 電源タップ 6個口 3m 雷ガード 個別スイッチ ほこりシャッター付 耐熱 PSE技術基準適合 ブラック T-K6A-2630BK
エレコム 電源タップ 6個口 3m 雷ガード 個別スイッチ ほこりシャッター付 耐熱 PSE技術基準適合 ブラック T-K6A-2630BK
¥2,111
8
キヤノン Canon 純正 インクカートリッジ BCI-381(BK/C/M/Y)+380 5色マルチパック BCI-381+380/5MP 長さ:5.3cm 幅:13.9cm 高さ:10.75cm
キヤノン Canon 純正 インクカートリッジ BCI-381(BK/C/M/Y)+380 5色マルチパック BCI-381+380/5MP 長さ:5.3cm 幅:13.9cm 高さ:10.75cm
¥4,918
9
【Amazon.co.jp限定】バッファロー microSD 128GB 100MB/s UHS-1 U1 microSDXC【 Nintendo Switch 対応 】V10 A1 IPX7 Full HD RMSD-128U11HA/N
【Amazon.co.jp限定】バッファロー microSD 128GB 100MB/s UHS-1 U1 microSDXC【 Nintendo Switch 対応 】V10 A1 IPX7 Full HD RMSD-128U11HA/N
¥3,080
10
エルパ(ELPA) 扉付タップラン 電源タップ 延長コード 125V 3m 3個口 ホワイト WBT-N3030B(W)
エルパ(ELPA) 扉付タップラン 電源タップ 延長コード 125V 3m 3個口 ホワイト WBT-N3030B(W)
¥652

Amazonのアソシエイトとして、ASCII.jpは適格販売により収入を得ています。

デジタル用語辞典

ASCII.jpメール デジタルMac/iPodマガジン