このページの本文へ

日曜プログラマー大歓迎 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 Neo A18 Proチップ搭載13インチノートブック:AIとApple Intelligenceのために設計、Liquid Retinaディスプレイ、8GBユニファイドメモリ、256GB SSDストレージ、1080p FaceTime HDカメラ - シルバー
Apple 2026 MacBook Neo A18 Proチップ搭載13インチノートブック:AIとApple Intelligenceのために設計、Liquid Retinaディスプレイ、8GBユニファイドメモリ、256GB SSDストレージ、1080p FaceTime HDカメラ - シルバー
¥95,768
2
【整備済み品】富士通 ARROWS Tab V727/V 12.3型 タブレットPC 第7世代 Core m3 メモリ4GB SSD128GB Windows11 Office2019搭載 1920×1280 高精細液晶 LTE対応 無線LAN タッチペン付属 カメラ搭載 初期設定済み
【整備済み品】富士通 ARROWS Tab V727/V 12.3型 タブレットPC 第7世代 Core m3 メモリ4GB SSD128GB Windows11 Office2019搭載 1920×1280 高精細液晶 LTE対応 無線LAN タッチペン付属 カメラ搭載 初期設定済み
¥11,800
3
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
4
【整備済み品】富士通 ノートパソコン 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
5
【整備済み品】NEC ノートパソコン VX-9 VKT16 15.6型 FHD 第10世代Core i5-10210U(最大動作4.2GHz) /Windows11 Pro/MS Office2021/WIFI内蔵/Webカメラ/DVD-ROM/テンキー/Bluetooth/HDMI/Type-C/有線静音マウス付属(Corei5-10210U, メモリ8GB,SSD256GB)
【整備済み品】NEC ノートパソコン VX-9 VKT16 15.6型 FHD 第10世代Core i5-10210U(最大動作4.2GHz) /Windows11 Pro/MS Office2021/WIFI内蔵/Webカメラ/DVD-ROM/テンキー/Bluetooth/HDMI/Type-C/有線静音マウス付属(Corei5-10210U, メモリ8GB,SSD256GB)
¥36,860

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,374
2
KIOXIA(キオクシア)【日本製】USBフラッシュメモリ 32GB USB2.0 国内サポート正規品 KLU202A032GL
KIOXIA(キオクシア)【日本製】USBフラッシュメモリ 32GB USB2.0 国内サポート正規品 KLU202A032GL
¥1,080
3
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
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
エレコム 電源タップ 6個口 3m 雷ガード 個別スイッチ ほこりシャッター付 耐熱 PSE技術基準適合 ホワイト T-K6A-2630WH
エレコム 電源タップ 6個口 3m 雷ガード 個別スイッチ ほこりシャッター付 耐熱 PSE技術基準適合 ホワイト T-K6A-2630WH
¥1,690
7
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
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
¥5,645
9
NIMASO ガラスフィルム iPad 第11世代(A16) 2025用/iPad 10.9インチ 第10世代 2022用 衝撃吸収 強化 ガラス 保護フィルム 指紋防止 ガイド枠付き NTB22I574
NIMASO ガラスフィルム iPad 第11世代(A16) 2025用/iPad 10.9インチ 第10世代 2022用 衝撃吸収 強化 ガラス 保護フィルム 指紋防止 ガイド枠付き NTB22I574
¥1,599
10
エレコム 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

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

デジタル用語辞典

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