質問編集履歴

2 マークダウンのリストのマークアップのし忘れを修正しました。

MRK

MRK score 4

2017/10/05 15:14  投稿

PHPとJavascriptを使って、Youtube Player API経由で動画を複数埋め込む方法
PHPとJavascriptを使って後述する仕様のページを作ろうとしているのですが、どうしてもうまくいかない部分があり、質問させて頂きます。
###使用言語とAPI
- HTML、CSS
- PHP
- JavaScript
- [Youtube > IFrame Player API](https://developers.google.com/youtube/iframe_api_reference?hl=ja)
###目指している仕様
- Youtube Player APIを使用して動画を複数埋め込む。
- サムネイル画像をクリックするとモーダルウィンドウが出現し、動画再生開始。
- 1つの動画につき、最初の一回の再生時に、10秒間の広告が流れる。
- 広告は5秒後にスキップ可能。
- モーダルウィンドウは「Close」ボタン、或はモーダルウィンドウの外側をクリックすると閉じ、動画も一時停止する。
- 閉じたモーダルウィンドウのサムネイル画像を再度クリックすると、モーダルウィンドウが再度開き、動画の続きが自動的に再生される(広告は流れない)。
###コード
現在、以下のようなコードを書きましたが、後述する問題点が発生し、解決できずにいます。
- [デモサイト](http://publicop.jp/youtube_player_api/sample.php)
```lang-JavaScript, php
<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="utf-8">
   <title>Modal Window</title>
   <link rel="stylesheet" href="styles.css">
</head>
<body>
<?php $youtube_id_list = array("vH_hAucdcQM", "g-FpDQ8Eqw8", "H2aW5V46khA"); ?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<?php foreach ($youtube_id_list as $key => $youtube_id): ?>
<div>
   
   <div id="open_<?php echo $key; ?>" class="open"><img src="http://i.ytimg.com/vi/<?php echo $youtube_id; ?>/sddefault.jpg" width="200px"></div>
   <div id="mask_<?php echo $key; ?>" class="mask hidden"></div>
   <div id="modal_<?php echo $key; ?>" class="mask hidden">
       <div id="sample_<?php echo $key; ?>"></div>
       
       <!--広告スペース-->
       <div id="ad_<?php echo $key; ?>" class="ad" style="display:none;">
           <div id="count-down_<?php echo $key; ?>" class="count-down"><span id="timer_<?php echo $key; ?>">05.00</span>秒後にスキップ可能</div>
           <button id="skip_<?php echo $key; ?>" style="display:none;">広告をスキップ</button>
       </div>
       <div id="gaugeBack_<?php echo $key; ?>" class="gaugeBack" style="display:none"></div>
       <div id="gauge_<?php echo $key; ?>" class="gauge" style="display:none"></div>
       <!--/広告スペース-->
       
       <div id="close_<?php echo $key; ?>" class="close">Close</div>
   </div>
</div>
<?php endforeach; ?>
<script>
<?php foreach ($youtube_id_list as $key => $youtube_id): ?>
(function() {
   'use strict';
   
   var open = document.getElementById('open_<?php echo $key; ?>');
   var close = document.getElementById('close_<?php echo $key; ?>');
   var modal = document.getElementById('modal_<?php echo $key; ?>');
   var mask = document.getElementById('mask_<?php echo $key; ?>');
   
   open.addEventListener('click', function() {
       modal.className = 'modal';
       mask.className = 'mask';
   });
   
   close.addEventListener('click', function() {
       modal.className = 'modal hidden';
       mask.className = 'mask hidden';
   });
   
   mask.addEventListener('click', function() {
       close.click();
   });
})();
<?php endforeach; ?>
</script>
<script>
// IFrame Player API の読み込み
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// YouTube ID と埋め込むエリア
var youtubeData = [
   <?php foreach ($youtube_id_list as $key => $youtube_id): ?>
   {
       youtubeIid: '<?php echo $youtube_id; ?>',
       embedArea: 'sample_<?php echo $key; ?>'
   }
   <?php
   if($youtube_id != end($youtube_id_list)) {
       echo ",";
   }
   ?>
   <?php endforeach; ?>
];
// サムネイルの埋め込み
function onYouTubeIframeAPIReady() {
 for (var i = 0; i < youtubeData.length; i++) {
   //document.getElementById(youtubeData[i]['embedArea']).innerHTML = '<img id="yt-thumb' + i + '" src="http://i.ytimg.com/vi/' + youtubeData[i]['youtubeIid'] + '/sddefault.jpg">';
   // 埋め込んだサムネイルにイベント追加
   embedYoutube(i);
 }
}
// YouTubeの埋め込みの準備
var ytPlayer;
function embedYoutube(num) {
   var i = 0;
   
   // サムネイルクリック
   document.getElementById('open_' + num).addEventListener('click', function() {
   
       if(i == 0) {
           $("#ad_" + num).show();
           $("#gaugeBack_" + num).show();
           $( "#gauge_" + num ) . animate( { width: 'toggle',}, { duration: 10000, easing: 'swing', } );
           
           setTimeout(function() {
               $("#count-down_" + num).hide();
               $("#skip_" + num).show();
           }, 5000);
           
           // スキップボタンがクリックされた時の処理
           $('#skip_' + num).click(function() {
               $("#ad_" + num).hide();
               $("#gauge_" + num).hide();
               $("#gaugeBack_" + num).hide();
               clearTimeout(playVideoTimer);
               
               ytPlayer = new YT.Player(
                   youtubeData[num]['embedArea'], // 埋め込む場所の指定
                   {
                       width: 640, // プレーヤーの幅
                       height: 390, // プレーヤーの高さ
                       videoId: youtubeData[num]['youtubeIid'], // YouTubeのID
                       events: {
                           'onReady': onPlayerReady,
                           'onStateChange': onPlayerStateChange // プレーヤーの状態が変更されたときに実行
                       }
                   }
               );
               
               return;
           });
           i++;
           
           // 10秒後に動画再生
           playVideoTimer = setTimeout(function(){
           
               $("#ad_" + num).hide();
               $("#gauge_" + num).hide();
               $("#gaugeBack_" + num).hide();
               
               ytPlayer = new YT.Player(
                   youtubeData[num]['embedArea'], // 埋め込む場所の指定
                   {
                       width: 640, // プレーヤーの幅
                       height: 390, // プレーヤーの高さ
                       videoId: youtubeData[num]['youtubeIid'], // YouTubeのID
                       events: {
                           'onReady': onPlayerReady,
                           'onStateChange': onPlayerStateChange // プレーヤーの状態が変更されたときに実行
                       }
                   }
               );
           },10000);
       }
       
       
       else {
           document.getElementById('open_' + num).addEventListener('click', function() {
               $("#ad_" + num).hide();
               $("#gauge_" + num).hide();
               $("#gaugeBack_" + num).hide();
               
               ytPlayer = new YT.Player(
                   youtubeData[num]['embedArea'], // 埋め込む場所の指定
                   {
                       width: 640, // プレーヤーの幅
                       height: 390, // プレーヤーの高さ
                       videoId: youtubeData[num]['youtubeIid'], // YouTubeのID
                       events: {
                           'onReady': onPlayerReady,
                           'onStateChange': onPlayerStateChange // プレーヤーの状態が変更されたときに実行
                       }
                   }
               );
           });
       }
       
       
       document.getElementById('close_' + num).addEventListener('click', function() {
           clearTimeout(playVideoTimer);
       });
       
       document.getElementById('mask_' + num).addEventListener('click', function() {
           document.getElementById('close_' + num).click();
       });
   
   });
}
// プレーヤー読み込み後の処理
function onPlayerReady(event) {
   event.target.playVideo();
   
   <?php foreach ($youtube_id_list as $key => $youtube_id): ?>
   document.getElementById('close_<?php echo $key; ?>').addEventListener('click', function() {
           ytPlayer.pauseVideo();
   });
   
   document.getElementById('mask_<?php echo $key; ?>').addEventListener('click', function() {
       document.getElementById('close_<?php echo $key; ?>').click();
   });
   <?php endforeach; ?>
}
// プレーヤーの状態が変更されたとき
function onPlayerStateChange(event) {
  // 現在のプレーヤーの状態を取得
  var ytStatus = event.data;
 // 再生終了したとき
if (ytStatus == YT.PlayerState.ENDED) {
    console.log('再生終了');
     // 動画再生
    event.target.playVideo();
  }
  // 再生中のとき
  if (ytStatus == YT.PlayerState.PLAYING) {
      console.log('再生中');
  }
  // 停止中のとき
  if (ytStatus == YT.PlayerState.PAUSED) {
       console.log('停止中');
  }
  // バッファリング中のとき
 if (ytStatus == YT.PlayerState.BUFFERING) {
    console.log('バッファリング中');
 }
  // 頭出し済みのとき
if (ytStatus == YT.PlayerState.CUED) {
     console.log('頭出し済み');
}
}
</script>
</body>
</html>
```
###問題点
- Closeボタン(或はモーダルウィンドウの外側)をクリックし、動画を一時停止にするプログラムが、2回目までは正常に作動するのですが、3回目以降はコンソールログに下記のエラーが発生し、正常に作動しない。
> sample.php:425 Uncaught TypeError: ytPlayer.pauseVideo is not a function
> at HTMLDivElement.<anonymous> (sample.php:425)
> at HTMLDivElement.<anonymous> (sample.php:268)
広告を表示中にCloseボタン(或はモーダルウィンドウの外側)をクリックし、広告の表示時間(10秒以内)中に再度サムネイルをクリックしてモーダルウィンドウを出すと、広告終了後、動画の再生が始まらない。
- 広告を表示中にCloseボタン(或はモーダルウィンドウの外側)をクリックし、広告の表示時間(10秒以内)中に再度サムネイルをクリックしてモーダルウィンドウを出すと、広告終了後、動画の再生が始まらない。
- コードの下記の部分を削除すると、上記のCloseボタンの問題は起きないのですが、広告が自動で消えてくれないのと、動画の再生が自動的に始まらない(該当コードを削除しているので当然ではありますが)。
```lang-JavaScript
else {
   document.getElementById('open_' + num).addEventListener('click', function() {
       $("#ad_" + num).hide();
       $("#gauge_" + num).hide();
       $("#gaugeBack_" + num).hide();
       
       ytPlayer = new YT.Player(
           youtubeData[num]['embedArea'], // 埋め込む場所の指定
           {
               width: 640, // プレーヤーの幅
               height: 390, // プレーヤーの高さ
               videoId: youtubeData[num]['youtubeIid'], // YouTubeのID
               events: {
                   'onReady': onPlayerReady,
                   'onStateChange': onPlayerStateChange // プレーヤーの状態が変更されたときに実行
               }
           }
       );
   });
}
```
###補足
- Javascriptの中にPHPのコードが埋め込まれていたり、関数化すべきところができてなかったりといった、質問事項以外でのツッコミどころも多々あるかと思いますが、何分未熟者故に、ご容赦頂けましたら幸いです。勿論、そういった点のアドバイスも頂ける場合も、私としましては大歓迎です。
- Closeボタンを押してモーダルウィンドウを閉じて動画を一時停止した後、再度モーダルウィンドウを出した際に、自動で動画が再生されるようにしたいのですが、上記の問題が発生したため、この部分は未実装状態となっています。いずれ実装する予定です。
###参考にしたサイト
- [JavaScriptでモーダルウィンドウを作ろう (全8回) - ドットインストール](https://dotinstall.com/lessons/modal_js)
- [YouTube Player APIを使って色々やってみる](https://www.tam-tam.co.jp/tipsnote/javascript/post6217.html)
- [YouTube Player APIを使う時のtips集](https://www.tam-tam.co.jp/tipsnote/javascript/post9896.html)
  • PHP

    25009 questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    21496 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • YouTube API

    116 questions

    YouTube APIはYouTubeのビデオコンテンツと機能性をウェブサイト、アプリケーション、デバイスに統合することを可能にします。

1 質問タイトルを本文中に書いてしまったため削除しました。

MRK

MRK score 4

2017/10/05 15:13  投稿

PHPとJavascriptを使って、Youtube Player API経由で動画を複数埋め込む方法
PHPとJavascriptを使って、Youtube Player API経由で動画を複数埋め込む方法  
 
 
PHPとJavascriptを使って後述する仕様のページを作ろうとしているのですが、どうしてもうまくいかない部分があり、質問させて頂きます。
###使用言語とAPI
- HTML、CSS
- PHP
- JavaScript
- [Youtube > IFrame Player API](https://developers.google.com/youtube/iframe_api_reference?hl=ja)
###目指している仕様
- Youtube Player APIを使用して動画を複数埋め込む。
- サムネイル画像をクリックするとモーダルウィンドウが出現し、動画再生開始。
- 1つの動画につき、最初の一回の再生時に、10秒間の広告が流れる。
- 広告は5秒後にスキップ可能。
- モーダルウィンドウは「Close」ボタン、或はモーダルウィンドウの外側をクリックすると閉じ、動画も一時停止する。
- 閉じたモーダルウィンドウのサムネイル画像を再度クリックすると、モーダルウィンドウが再度開き、動画の続きが自動的に再生される(広告は流れない)。
###コード
現在、以下のようなコードを書きましたが、後述する問題点が発生し、解決できずにいます。
- [デモサイト](http://publicop.jp/youtube_player_api/sample.php)
```lang-JavaScript, php
<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="utf-8">
   <title>Modal Window</title>
   <link rel="stylesheet" href="styles.css">
</head>
<body>
<?php $youtube_id_list = array("vH_hAucdcQM", "g-FpDQ8Eqw8", "H2aW5V46khA"); ?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<?php foreach ($youtube_id_list as $key => $youtube_id): ?>
<div>
   
   <div id="open_<?php echo $key; ?>" class="open"><img src="http://i.ytimg.com/vi/<?php echo $youtube_id; ?>/sddefault.jpg" width="200px"></div>
   <div id="mask_<?php echo $key; ?>" class="mask hidden"></div>
   <div id="modal_<?php echo $key; ?>" class="mask hidden">
       <div id="sample_<?php echo $key; ?>"></div>
       
       <!--広告スペース-->
       <div id="ad_<?php echo $key; ?>" class="ad" style="display:none;">
           <div id="count-down_<?php echo $key; ?>" class="count-down"><span id="timer_<?php echo $key; ?>">05.00</span>秒後にスキップ可能</div>
           <button id="skip_<?php echo $key; ?>" style="display:none;">広告をスキップ</button>
       </div>
       <div id="gaugeBack_<?php echo $key; ?>" class="gaugeBack" style="display:none"></div>
       <div id="gauge_<?php echo $key; ?>" class="gauge" style="display:none"></div>
       <!--/広告スペース-->
       
       <div id="close_<?php echo $key; ?>" class="close">Close</div>
   </div>
</div>
<?php endforeach; ?>
<script>
<?php foreach ($youtube_id_list as $key => $youtube_id): ?>
(function() {
   'use strict';
   
   var open = document.getElementById('open_<?php echo $key; ?>');
   var close = document.getElementById('close_<?php echo $key; ?>');
   var modal = document.getElementById('modal_<?php echo $key; ?>');
   var mask = document.getElementById('mask_<?php echo $key; ?>');
   
   open.addEventListener('click', function() {
       modal.className = 'modal';
       mask.className = 'mask';
   });
   
   close.addEventListener('click', function() {
       modal.className = 'modal hidden';
       mask.className = 'mask hidden';
   });
   
   mask.addEventListener('click', function() {
       close.click();
   });
})();
<?php endforeach; ?>
</script>
<script>
// IFrame Player API の読み込み
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// YouTube ID と埋め込むエリア
var youtubeData = [
   <?php foreach ($youtube_id_list as $key => $youtube_id): ?>
   {
       youtubeIid: '<?php echo $youtube_id; ?>',
       embedArea: 'sample_<?php echo $key; ?>'
   }
   <?php
   if($youtube_id != end($youtube_id_list)) {
       echo ",";
   }
   ?>
   <?php endforeach; ?>
];
// サムネイルの埋め込み
function onYouTubeIframeAPIReady() {
 for (var i = 0; i < youtubeData.length; i++) {
   //document.getElementById(youtubeData[i]['embedArea']).innerHTML = '<img id="yt-thumb' + i + '" src="http://i.ytimg.com/vi/' + youtubeData[i]['youtubeIid'] + '/sddefault.jpg">';
   // 埋め込んだサムネイルにイベント追加
   embedYoutube(i);
 }
}
// YouTubeの埋め込みの準備
var ytPlayer;
function embedYoutube(num) {
   var i = 0;
   
   // サムネイルクリック
   document.getElementById('open_' + num).addEventListener('click', function() {
   
       if(i == 0) {
           $("#ad_" + num).show();
           $("#gaugeBack_" + num).show();
           $( "#gauge_" + num ) . animate( { width: 'toggle',}, { duration: 10000, easing: 'swing', } );
           
           setTimeout(function() {
               $("#count-down_" + num).hide();
               $("#skip_" + num).show();
           }, 5000);
           
           // スキップボタンがクリックされた時の処理
           $('#skip_' + num).click(function() {
               $("#ad_" + num).hide();
               $("#gauge_" + num).hide();
               $("#gaugeBack_" + num).hide();
               clearTimeout(playVideoTimer);
               
               ytPlayer = new YT.Player(
                   youtubeData[num]['embedArea'], // 埋め込む場所の指定
                   {
                       width: 640, // プレーヤーの幅
                       height: 390, // プレーヤーの高さ
                       videoId: youtubeData[num]['youtubeIid'], // YouTubeのID
                       events: {
                           'onReady': onPlayerReady,
                           'onStateChange': onPlayerStateChange // プレーヤーの状態が変更されたときに実行
                       }
                   }
               );
               
               return;
           });
           i++;
           
           // 10秒後に動画再生
           playVideoTimer = setTimeout(function(){
           
               $("#ad_" + num).hide();
               $("#gauge_" + num).hide();
               $("#gaugeBack_" + num).hide();
               
               ytPlayer = new YT.Player(
                   youtubeData[num]['embedArea'], // 埋め込む場所の指定
                   {
                       width: 640, // プレーヤーの幅
                       height: 390, // プレーヤーの高さ
                       videoId: youtubeData[num]['youtubeIid'], // YouTubeのID
                       events: {
                           'onReady': onPlayerReady,
                           'onStateChange': onPlayerStateChange // プレーヤーの状態が変更されたときに実行
                       }
                   }
               );
           },10000);
       }
       
       
       else {
           document.getElementById('open_' + num).addEventListener('click', function() {
               $("#ad_" + num).hide();
               $("#gauge_" + num).hide();
               $("#gaugeBack_" + num).hide();
               
               ytPlayer = new YT.Player(
                   youtubeData[num]['embedArea'], // 埋め込む場所の指定
                   {
                       width: 640, // プレーヤーの幅
                       height: 390, // プレーヤーの高さ
                       videoId: youtubeData[num]['youtubeIid'], // YouTubeのID
                       events: {
                           'onReady': onPlayerReady,
                           'onStateChange': onPlayerStateChange // プレーヤーの状態が変更されたときに実行
                       }
                   }
               );
           });
       }
       
       
       document.getElementById('close_' + num).addEventListener('click', function() {
           clearTimeout(playVideoTimer);
       });
       
       document.getElementById('mask_' + num).addEventListener('click', function() {
           document.getElementById('close_' + num).click();
       });
   
   });
}
// プレーヤー読み込み後の処理
function onPlayerReady(event) {
   event.target.playVideo();
   
   <?php foreach ($youtube_id_list as $key => $youtube_id): ?>
   document.getElementById('close_<?php echo $key; ?>').addEventListener('click', function() {
           ytPlayer.pauseVideo();
   });
   
   document.getElementById('mask_<?php echo $key; ?>').addEventListener('click', function() {
       document.getElementById('close_<?php echo $key; ?>').click();
   });
   <?php endforeach; ?>
}
// プレーヤーの状態が変更されたとき
function onPlayerStateChange(event) {
  // 現在のプレーヤーの状態を取得
  var ytStatus = event.data;
 // 再生終了したとき
if (ytStatus == YT.PlayerState.ENDED) {
    console.log('再生終了');
     // 動画再生
    event.target.playVideo();
  }
  // 再生中のとき
  if (ytStatus == YT.PlayerState.PLAYING) {
      console.log('再生中');
  }
  // 停止中のとき
  if (ytStatus == YT.PlayerState.PAUSED) {
       console.log('停止中');
  }
  // バッファリング中のとき
 if (ytStatus == YT.PlayerState.BUFFERING) {
    console.log('バッファリング中');
 }
  // 頭出し済みのとき
if (ytStatus == YT.PlayerState.CUED) {
     console.log('頭出し済み');
}
}
</script>
</body>
</html>
```
###問題点
- Closeボタン(或はモーダルウィンドウの外側)をクリックし、動画を一時停止にするプログラムが、2回目までは正常に作動するのですが、3回目以降はコンソールログに下記のエラーが発生し、正常に作動しない。
> sample.php:425 Uncaught TypeError: ytPlayer.pauseVideo is not a function
> at HTMLDivElement.<anonymous> (sample.php:425)
> at HTMLDivElement.<anonymous> (sample.php:268)
広告を表示中にCloseボタン(或はモーダルウィンドウの外側)をクリックし、広告の表示時間(10秒以内)中に再度サムネイルをクリックしてモーダルウィンドウを出すと、広告終了後、動画の再生が始まらない。
- コードの下記の部分を削除すると、上記のCloseボタンの問題は起きないのですが、広告が自動で消えてくれないのと、動画の再生が自動的に始まらない(該当コードを削除しているので当然ではありますが)。
```lang-JavaScript
else {
   document.getElementById('open_' + num).addEventListener('click', function() {
       $("#ad_" + num).hide();
       $("#gauge_" + num).hide();
       $("#gaugeBack_" + num).hide();
       
       ytPlayer = new YT.Player(
           youtubeData[num]['embedArea'], // 埋め込む場所の指定
           {
               width: 640, // プレーヤーの幅
               height: 390, // プレーヤーの高さ
               videoId: youtubeData[num]['youtubeIid'], // YouTubeのID
               events: {
                   'onReady': onPlayerReady,
                   'onStateChange': onPlayerStateChange // プレーヤーの状態が変更されたときに実行
               }
           }
       );
   });
}
```
###補足
- Javascriptの中にPHPのコードが埋め込まれていたり、関数化すべきところができてなかったりといった、質問事項以外でのツッコミどころも多々あるかと思いますが、何分未熟者故に、ご容赦頂けましたら幸いです。勿論、そういった点のアドバイスも頂ける場合も、私としましては大歓迎です。
- Closeボタンを押してモーダルウィンドウを閉じて動画を一時停止した後、再度モーダルウィンドウを出した際に、自動で動画が再生されるようにしたいのですが、上記の問題が発生したため、この部分は未実装状態となっています。いずれ実装する予定です。
###参考にしたサイト
- [JavaScriptでモーダルウィンドウを作ろう (全8回) - ドットインストール](https://dotinstall.com/lessons/modal_js)
- [YouTube Player APIを使って色々やってみる](https://www.tam-tam.co.jp/tipsnote/javascript/post6217.html)
- [YouTube Player APIを使う時のtips集](https://www.tam-tam.co.jp/tipsnote/javascript/post9896.html)
  • PHP

    25009 questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    21496 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • YouTube API

    116 questions

    YouTube APIはYouTubeのビデオコンテンツと機能性をウェブサイト、アプリケーション、デバイスに統合することを可能にします。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る