質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

YouTube API

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

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

解決済

IFrame Player API JavascriptコードにServiceのデータをバインドさせたい

jun9
jun9

総合スコア19

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

YouTube API

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

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

1回答

0評価

0クリップ

652閲覧

投稿2021/02/13 11:12

前提・実現したいこと

当方現在monacaでAngular jsを用いた英語並び替えのクイズアプリを作成しております。
現在このアプリにYoutube apiを用いて動画を埋め込み、動画内の英語を聞いて並び替えられるようにしようとしております。

並び替える単語はquestionService.jsからデータをHTML上にバインドし、表示させております。

今回並び替え問題に合わせ、動画の再生箇所を指定させるため、questionService.jsにstartTime,endTimeを追加し、app.directive( IFrame Player API JavaScript コード)内の時間指定個所にバインドさせたいのですが、どのようにすればバインドできるかが分かりません。

app.directive内にquestionService.js内のデータをバインドさせる方法がお分かりの方がいらっしゃいましたら教えていただきたいです。

イメージ説明

該当のソースコード

JavaScript

var app = angular.module('myApp',['onsen']); app.directive('youtube', function($window){ var _link = function(scope, element, attr){ var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; $window.onYouTubeIframeAPIReady = function() { player = new YT.Player(element.children()[0], { height: 210, width: 375, videoId: scope.youtubeId, events: { 'onReady': onPlayerReady, 'onStateChange':onPlayerStateChange } }); } function onPlayerReady(event) { event.target.seekTo(**me.items.currentQ.startTime**, true); } var timer; function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING) { // 再生中の場合 timer = setInterval(repeatVideo, 1000); // 再生時間の監視開始 } else{ clearInterval(timer);           // 再生時間の監視停止 timer = null; } } function repeatVideo() { if(player.getCurrentTime() >= **me.items.currentQ.endTime**){ // 〇〇秒超えたら player.pauseVideo().seekTo(**me.items.currentQ.startTime**, true); // 〇〇秒後から開始 } } }; return { link: _link, scope: { width: "@", height: "@", youtubeId: "@" }, restrict: 'E', template: '<div></div>', }; }); app.controller('gameCtrl',function(questionsService,$scope){ var me = this; me.items = {}; me.answer = ""; me.judges = []; me.questionName = myNavigator.getCurrentPage().options.questionName; var rightNum = 0; var anserNum = null; var questions = null; var init = function(){ me.items.currentNum = 0; if(me.questionName==1){ questions = JSON.parse(JSON.stringify(questionsService.questions1)); me.items.totalNum = questions.length; questionInit(); }else{ questions = JSON.parse(JSON.stringify(questionsService.questions2)); me.items.totalNum = questions.length; questionInit(); } } var questionInit = function(){ var currentQ = questions[me.items.currentNum]; var qLength = currentQ.choices.length; me.items.currentQ = currentQ; me.answer = ""; me.items.currentQ.answers = []; me.items.currentQ.status = []; for (var i = 0; i < qLength; i++) { me.items.currentQ.status.push(false); } }; me.showAnswer = function () { var answer = ""; for (var i = 0; i < me.items.currentQ.answers.length; i++) { answer += me.items.currentQ.answers[i][1]; } me.answer = answer; }; me.choiceWord = function (index) { me.items.currentQ.answers.push([index, me.items.currentQ.choices[index]]); me.items.currentQ.status[index]=true; me.showAnswer(); }; me.getAnswer = function(){ var flag = document.getElementById('hoge').value ==me.items.currentQ.answer; var flagText = "間違い"; if(flag){ me.judges.push(['〇',me.items.currentQ.text,me.items.currentQ.answer]); flagText = "正解"; }else{ me.judges.push(['×',me.items.currentQ.text,me.items.currentQ.answer]); } ons.notification.alert({ message: '正解 :『' + me.items.currentQ.answer + '』', title: flagText, buttonLabel: 'NEXT', animation: 'default', callback: function() { if(me.items.currentNum >= me.items.totalNum-1){ myNavigator.pushPage('result.html',{judges:me.judges}); }else{ me.items.currentNum++; $scope.$apply(questionInit); } } }); }; me.backTop = function(){ myNavigator.pushPage('top.html', { animation: "none" }); }; init(); });

JavaScript

// service app.value('questionsService', { questions1 : [ { "text": "あなたは毎日英語を勉強しなければなりません。", "answer": "You must study English every day ", "choices": ["You ","English ","must ","every ","study ","day "], **"startTime":10,** ** "endTime":20,** }, ] });

試したこと

IFrame Player API JavaScript コード内の時間指定部分にme.items.currentQ.startTime(開始)、me.items.currentQ.startTime(終了)を入力しましたが、app.directive内にgameCtrl内の変数を用いることができないのでうまくいきません。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

YouTube API

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

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。