このページの本文へ

日曜プログラマー大歓迎 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
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 - スカイブルー
¥176,566
2
【整備済み品】富士通 ノートパソコン 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,129
3
【整備済み品】ノートパソコン 東芝 Dynabook G83 13.3インチ FHD 軽量 Webカメラ 第11世代 Corei5-1135G7/Windows 11 Pro/MS Office 2021搭載/初期設定不要/Wifi 6/Bluetooth/HDMI/Type C/LANポート/SDカードスロット/有線静音マウス付属(メモリ8GB,SSD256GB)
【整備済み品】ノートパソコン 東芝 Dynabook G83 13.3インチ FHD 軽量 Webカメラ 第11世代 Corei5-1135G7/Windows 11 Pro/MS Office 2021搭載/初期設定不要/Wifi 6/Bluetooth/HDMI/Type C/LANポート/SDカードスロット/有線静音マウス付属(メモリ8GB,SSD256GB)
¥33,048
4
【整備済み品】富士通 LIFEBOOK U939 13.3型 フルHD モバイルノートPC Core i5-8265U メモリ8GB SSD256GB Windows11 Office2019搭載 1920×1080 無線LAN対応 カメラ搭載 初期設定済み 軽量薄型 ビジネス 学習 在宅ワーク
【整備済み品】富士通 LIFEBOOK U939 13.3型 フルHD モバイルノートPC Core i5-8265U メモリ8GB SSD256GB Windows11 Office2019搭載 1920×1080 無線LAN対応 カメラ搭載 初期設定済み 軽量薄型 ビジネス 学習 在宅ワーク
¥26,180
5
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

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,680
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
エレコム 電源タップ 6個口 3m 雷ガード 個別スイッチ ほこりシャッター付 耐熱 PSE技術基準適合 ホワイト T-K6A-2630WH
エレコム 電源タップ 6個口 3m 雷ガード 個別スイッチ ほこりシャッター付 耐熱 PSE技術基準適合 ホワイト T-K6A-2630WH
¥1,690
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
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
6
KIOXIA(キオクシア)【日本製】USBフラッシュメモリ 32GB USB2.0 国内サポート正規品 KLU202A032GW
KIOXIA(キオクシア)【日本製】USBフラッシュメモリ 32GB USB2.0 国内サポート正規品 KLU202A032GW
¥1,680
7
エレコム USB Type C ケーブル 1m 100W PD対応 高速充電 シリコン素材 なめらか やわらか 【 MacBook/iPad/Galaxy/Android スマホ タブレット 等対応 】 ブラック 【iPhone 16 シリーズ 対応検証済】 MPA-CCECSS10BK
エレコム USB Type C ケーブル 1m 100W PD対応 高速充電 シリコン素材 なめらか やわらか 【 MacBook/iPad/Galaxy/Android スマホ タブレット 等対応 】 ブラック 【iPhone 16 シリーズ 対応検証済】 MPA-CCECSS10BK
¥980
8
NIMASO ガラスフィルム iPad 第11世代(A16) 2025用/iPad 10.9インチ 第10世代 2022用 衝撃吸収 強化 ガラス 保護フィルム 指紋防止 ガイド枠付き NTB22I574
NIMASO ガラスフィルム iPad 第11世代(A16) 2025用/iPad 10.9インチ 第10世代 2022用 衝撃吸収 強化 ガラス 保護フィルム 指紋防止 ガイド枠付き NTB22I574
¥1,519
9
キヤノン 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
¥5,645
10
【Amazon.co.jp限定】バッファロー 外付けハードディスク 4TB テレビ録画/PC/PS4/4K対応 バッファロー製nasne™対応 静音&コンパクト 日本製 故障予測 みまもり合図 HD-AD4U3
【Amazon.co.jp限定】バッファロー 外付けハードディスク 4TB テレビ録画/PC/PS4/4K対応 バッファロー製nasne™対応 静音&コンパクト 日本製 故障予測 みまもり合図 HD-AD4U3
¥17,980

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

デジタル用語辞典

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