このページの本文へ

日曜プログラマー大歓迎 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]

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

カテゴリートップへ

本記事はアフィリエイトプログラムによる収益を得ている場合があります

この連載の記事
1
【整備済み品】富士通 ノートパソコン LIFEBOOK U9310 13.3型FHD(1920x1080) 超軽薄 ノートPC/第10世代 Core i5-10310U@1.7GHz/ 8GB メモリ/高速ストレージ SSD/Webカメラ/WIFI/Type-C/HDMI/win11&MS Office 2019 搭載 ビジネス 在宅勤務向け パソコン (メモリ:8GB/SSD:256GB)
【整備済み品】富士通 ノートパソコン LIFEBOOK U9310 13.3型FHD(1920x1080) 超軽薄 ノートPC/第10世代 Core i5-10310U@1.7GHz/ 8GB メモリ/高速ストレージ SSD/Webカメラ/WIFI/Type-C/HDMI/win11&MS Office 2019 搭載 ビジネス 在宅勤務向け パソコン (メモリ:8GB/SSD:256GB)
¥35,130
2
Apple 2026 MacBook Air M5チップ搭載13インチノートブック:AIとApple Intelligence、13.6インチLiquid Retinaディスプレイ、16GBユニファイドメモリ、512GB SSDストレージ、12MPセンターフレームカメラ、日本語キーボード、Touch ID - ミッドナイト
Apple 2026 MacBook Air M5チップ搭載13インチノートブック:AIとApple Intelligence、13.6インチLiquid Retinaディスプレイ、16GBユニファイドメモリ、512GB SSDストレージ、12MPセンターフレームカメラ、日本語キーボード、Touch ID - ミッドナイト
¥177,333
3
【Amazon.co.jp限定】ASUS ノートパソコン Vivobook 15 M1502NAQ 15.6インチ AMD Ryzen 7 170 メモリ16GB SSD 512GB Windows 11 重量1.7kg Wi-Fi 6E クワイエットブルー M1502NAQ-R7165BUW
【Amazon.co.jp限定】ASUS ノートパソコン Vivobook 15 M1502NAQ 15.6インチ AMD Ryzen 7 170 メモリ16GB SSD 512GB Windows 11 重量1.7kg Wi-Fi 6E クワイエットブルー M1502NAQ-R7165BUW
¥98,800
4
ESBOOKノートパソコン 【MS Office 2024搭載&Windows 11 Pro】14インチIPS液晶/1920×1080FHDディスプレイ カメラ付き/薄型PCノート高性能CPU/初期設定不要/8Gメモリ/無線LAN/大容量SSD/初心者向け・パソコンノート/日本語キーボードフィルム付き/ワイヤレスマウス付き(256G SSD, ローズゴールド)
ESBOOKノートパソコン 【MS Office 2024搭載&Windows 11 Pro】14インチIPS液晶/1920×1080FHDディスプレイ カメラ付き/薄型PCノート高性能CPU/初期設定不要/8Gメモリ/無線LAN/大容量SSD/初心者向け・パソコンノート/日本語キーボードフィルム付き/ワイヤレスマウス付き(256G SSD, ローズゴールド)
¥38,999
5
【整備済み品】 富士通 タブレット ノートパソコン ARROWS Tab V727 12.3インチ 中古 タブレット【Windows 11 】【MS Office2019 H&B 搭載 】第7世代 Core M3/ メモリ 4GB / SSD 128GB /無線LAN/HDMI/LTE/タッチペン 付属(整備済み品)
【整備済み品】 富士通 タブレット ノートパソコン ARROWS Tab V727 12.3インチ 中古 タブレット【Windows 11 】【MS Office2019 H&B 搭載 】第7世代 Core M3/ メモリ 4GB / SSD 128GB /無線LAN/HDMI/LTE/タッチペン 付属(整備済み品)
¥11,800

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

ASCII倶楽部

注目ニュース

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

プレミアム実機レビュー

ピックアップ
1
KIOXIA(キオクシア) 旧東芝メモリ microSD 128GB UHS-I Class10 (最大読出速度100MB/s) Nintendo Switch動作確認済 国内サポート正規品 メーカー保証5年 KLMEA128G
KIOXIA(キオクシア) 旧東芝メモリ microSD 128GB UHS-I Class10 (最大読出速度100MB/s) Nintendo Switch動作確認済 国内サポート正規品 メーカー保証5年 KLMEA128G
¥2,386
2
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
3
KIOXIA(キオクシア)【日本製】USBフラッシュメモリ 32GB USB2.0 国内サポート正規品 KLU202A032GL
KIOXIA(キオクシア)【日本製】USBフラッシュメモリ 32GB USB2.0 国内サポート正規品 KLU202A032GL
¥1,080
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
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, ブラック)
¥1,299
6
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
7
NIMASO ガラスフィルム iPad 第11世代(A16) 2025用/iPad 10.9インチ 第10世代 2022用 衝撃吸収 強化 ガラス 保護フィルム 指紋防止 ガイド枠付き NTB22I574
NIMASO ガラスフィルム iPad 第11世代(A16) 2025用/iPad 10.9インチ 第10世代 2022用 衝撃吸収 強化 ガラス 保護フィルム 指紋防止 ガイド枠付き NTB22I574
¥1,519
8
エレコム 電源タップ 6個口 3m 雷ガード 個別スイッチ ほこりシャッター付 耐熱 PSE技術基準適合 ブラック T-K6A-2630BK
エレコム 電源タップ 6個口 3m 雷ガード 個別スイッチ ほこりシャッター付 耐熱 PSE技術基準適合 ブラック T-K6A-2630BK
¥1,690
9
【Amazon.co.jp限定】 ロジクール 静音 ワイヤレス トラックボール マウス M575SPd Bluetooth Logibolt 無線 windows mac iPad OS Chrome トラックボールマウス ブラック M575 M575SP 国内正規品 ※Amazon.co.jp限定 壁紙ダウンロード付き
【Amazon.co.jp限定】 ロジクール 静音 ワイヤレス トラックボール マウス M575SPd Bluetooth Logibolt 無線 windows mac iPad OS Chrome トラックボールマウス ブラック M575 M575SP 国内正規品 ※Amazon.co.jp限定 壁紙ダウンロード付き
¥5,980
10
KIOXIA(キオクシア)【日本製】SDカード 128GB SDXC UHS-I Class10 読出速度100MB/s 国内正規品 メーカー保証5年 KLNEA128G
KIOXIA(キオクシア)【日本製】SDカード 128GB SDXC UHS-I Class10 読出速度100MB/s 国内正規品 メーカー保証5年 KLNEA128G
¥2,680

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

デジタル用語辞典

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