皆様、どうお過ごしでしょうか？
前日に引き続き、YoutubeのAPIである iframe Player API を用いて、WebGL上の3DCGのパネルの表面に動画を再生する社内研修に参加しました北山です。

前日に引き続き作業を行いましたが、本日も完成に至りませんでした。
ただ、半分は成功しました。

「半分」というのは、２つの目的があるからです。

１つめはYoutubeの動画プレイヤーそのものをAPIでもってきてiframe内で表示する事。
２つめはYoutubeから動画だけと、API上で必要な情報だけを取得して再生ボタンや停止ボタンは、WebGL上に別途UIを配置して、それで引っ張ってきた動画を操作する事が目的です。

今回、１つめは成功したのですが、２つめが完了していない状況です。

前回から続く今回の社員研修の課題においては、本来は完成品と完全に同じにする必要はなく、3DCGのデータについては必要最低限の3DCGデータ（正方形のパネル）を配置し、そのデータの表面に動画を再生する事を第一の目標として行われました。

残念ながら今回、必要最低限の3DCGデータだけを配置して作成する事を目的として私が作成したプロジェクトはエラーが発生しました。
今日の午前の前半辺りまではエラーの調査を行いましたが、把握することができず、必要最低限のパターンはミーティングの場で相談させていただき、いったん中止し、手本となるソースコードや素材の配置を含め、3DCGデータなどすべてを模倣して課題を作成する運びとなりました。

結果、再度作り直しをした結果、１つめの目的は達成しました。

 

 

ですが、２つめの目的はまだ完了しておらず、この作業を引き続き行う必要があります。

 

 

２つめの目標の達成を目指す状況ですが、それとは別件の、JavaScript特有の問題と対面し、その点も個人的に調査したいと考えています。

そのJavaScript特有の問題とは、JavaScriptの「引数」と「オーバーロード」の事です。

C#やJavaなどでは、引数の型や引数の個数の違いで、同じメソッド名でも内部の仕組みや戻り値が異なる処理を実装できる「オーバーロード」の概念があります。

C#やJavaは、元々のメソッドで定義した引数と異なる型や、引数の個数を渡したりするとエラーになり、このオーバーロードを用途に応じて用意する必要があります。
ですが、JavaScriptではメソッドに２つの引数が仮に定義されているとして、そして引数を１つしか渡さなかったとしても、その時点ではエラーは起きず処理が進む特徴があります。

今回、課題の完成品のソースコードで、とある関数に定義された引数の個数と、その関数を呼び出す箇所の引数の個数が異なる箇所があり、前日ではこの辺りに苦戦し、本日も原因の発覚に至っていません。

今回、ソースコードを一から写経しなおした結果、エラーは起きなくなったのですが、これではなぜ起きたのかという点を把握できないままになってしまうので、後々に問題になると言えます。

その為、時間のある時に、この問題点の調査を行いたいと考えており、現時点での目的は引き続き２つあると言えます。

１つめは、引き続きYoutubeのAPIである Iframe API を用いて、ボタンなどのUIはWebGL側で用意した完成品。
２つめは、前述の原因不明のエラーをかみ砕いて原因を把握し、今後の類似パターンに対応できるようになる事。

社内研修でお時間をいただいている中で恐縮なのですが、取り急ぎ達成を目指し精進してまいりたいと考えております。

また、エラーの原因が完全に把握できた際には、ブログにて共有したいと考えております。
（※ただ、あいまいな理解の場合には誤った情報を発信する恐れがありますので、確信が持てない場合には共有はできない可能性もありますのでご了承いただけますと幸いです。）

ご一読いただき誠にありがとうございました。

現在
株式会社チョモランマ
株式会社シェルパ
3Dmodeljapan株式会社
ではスタッフを大募集しております！！
UNITY、Unreal Engine4、AI、プログラミングや建築パースに興味がある方！
ぜひご応募下さい！！
初心者の方、未経験の方やインターンを受けてみたい方々でも大歓迎です！！