このページの本文へ

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

プレミアムPC試用レポート

ピックアップ

ASCII.jp RSS2.0 配信中

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