日々の思考や行動を書いた日常系がメインで社会復帰に向けての奮闘ブログです。その他発達障害関連や処方薬レポート、プログラミングなどの記事を書いてます。日常この記事をシェアするbookmarkFacebookTwitterPocketお久しぶりの投稿でございます権兵衛でございます。2019年12月19日にYoutube動画を投稿しようとふと思いつく。holdambition.hatenablog.comそこから、すぐさま前準備として行動に移したYoutube動画と連動させたブログ作りのためのカスタマイズは公開することのできるレベルまでに完成したとは思うのでテストブログから当ブログにカスタマイズをしました。カスタマイズが終わっただけで動画の方は何も手を付けていないので、これから動画制作の勉強をしつつ、気になる細かい修正などをちょくちょくしていこうと思っています。ブログのカスタマイズは、私が思っていたよりも難しい事ばかりで悪戦苦闘。完璧に完成した訳ではないものの、エラーによる処理落ちや理想の動きをしないなどの問題点は解決したので、これにて一旦閉幕にするつもりです。私のパソコンやスマホ、タブレットの環境下においてエラーがなかったり、理想の動きをするだけで、他の人の環境下においては別の形になるうるかもしれません。気になる点がございましたら遠慮なくどんどんとコメントなりで教えて欲しいです。気になるところは後から少しづつ修正予定ゆっくりとやっていく予定Youtube動画×ブログYoutube動画と連動させたブログカスタマイズも一度完成として、次の段階である動画制作に入ろうと思います。他のYoutuberさんの動画を用いてになりますが、どんなカスタマイズ結果になったのかを説明していきたいと思います。Yotube動画と連動させた記事のデモンストレーションデモンストレーションとして、カスタマイズした事を適用させた記事を制作しました。以前に記事作成したものをリライトしてます。▼カスタマイズを適用させた記事はコチラ▼holdambition.hatenablog.com是非ともアクセスしてどんなものが出来たのか見てみてください。横で動画を再生しつつ、テキストを読み進めることができます。動画内容とテキスト内容を交互に観ながら解説内容を読み進めることが出来るのは中々便利じゃないかなぁと思います。知りたい情報にすぐにアクセスできることに重きを置いてますので、ブログの項目冒頭には項目に該当する動画の再生位置箇所までスキップできるボタンを設置しています。これで、気になる項目があれば該当の再生箇所までスキップできて、すぐさまテキスト内容と動画を交互に見比べながら勉強することが可能になります。自分が見えやすい位置に動画を移動させることも可能です。機能を付けていますので簡単に説明したいと思います。別枠で用意された動画ウィンドウにはボタンを設置しています。ここでは、ボタンの説明をしていきます。ボタンの種類は全部で12種類です。スマホやタブレットはデザインは変わります。スマホの場合は、9番の10秒前に戻るボタン、10番の拡大縮小ボタン、11番の10秒先に進むボタンを除いた9種類を用意しています。音声のON・OFF3番の動画ウィンドウを移動させた際に有効となります。パソコン・タブレットは右下。スマホは上が定位置となっていて、動画ウィンドウを動かした際に指定している定位置に戻すことができます。動画ウィンドウの移動。ボタンを押している間は好きな位置に移動できるようにしています。動画ウィンドウを閉じます。ボタンを押した際は元々あった埋め込み位置に戻ります。動画ウィンドウを表示させたい場合は埋め込み位置まで戻る必要があります。再生速度の調整でボタンを押すたびに「0.75倍」「0.5倍」「0.25倍」の順で遅くすることができます。速くしていた場合は「0.25倍」ずつ遅くすることができます。再生と停止をすることができます。再生速度の調整でボタンを押すたびに「1.25倍」「1.5倍」「1.75倍」「2.0倍」の順で速くすることができます。遅くしていた場合は「0.25倍」ずつ速くすることができます。ブログの項目冒頭に動画の該当部分に当たる再生位置ボタンを複数個設置しています。現在の再生位置から一つ前の再生位置まで戻すことができます。現在の再生位置から10秒前に戻ることができます。スマホにはありません。動画を大きくしたり小さくしたりできます。現在は、「幅400px・高さ225px」の小サイズ。「幅560px・高さ315px」の大サイズの2種類のみです。スマホでは拡大・縮小ボタンは用意しておらずにスクリーンの幅に併せて表示させる様にしています。全画面表示させるには動画のフレーム内にあるYoutubeが用意している「全画面」アイコンをクリックorタップする必要性があります。現在の再生位置から10秒先に進めることができます。スマホにはありません。ブログの項目冒頭に動画の該当部分に当たる再生位置ボタンを複数個設置しています。現在の再生位置から一つ先の再生位置まで進めることができます。パソコン、タブレット、スマホで表示のさせ方に変更を加えていますが、スクリーンの幅で変更する様に設定しています。パソコンで見る場合でも表示させているブラウザのスクリーン幅が小さいとそれに併せた表示になります。動画のフレーム内にあるYooutubeが用意している機能は通常通りに処理されます。バーの移動などは、これまで通りの操作で動かす事が出来ますので、ボタンは補助的な意味合いと思ってください。技術面、デザイン面で色々と気になるところがありますが後々に修正していく予定です。再生・停止ボタンです。再生ボタンを押すと、動画が再生されて、ボタンは停止ボタンのアイコンに変わります。ボタンを押さずして動画のフレーム内から再生を押すと、私が用意したボタンのアイコンは変わらずして再生ボタンのままです。ボタンから停止するには、一度再生ボタンを押して、停止ボタンの表示に切り替わってから停止ボタンを押す。言うように2回ボタンを押さなければなりません。重大なエラーではないものの、気になる点は多いので他の活動をしながら平行して少しづつ修正していこうと思います。やっていく予定これから動画制作を始めようと思いますが、ゆっくりとやっていこうと思います。今までにやってきた一日の終わりに書く日常系の記事が作成できるぐらいの余力を残しつつ動画制作に励もうと思います。1月の中旬にはブログカスタマイズと動画公開を予定していましたが、これまた延期となります。2月中に動画を公開できる様にしようと思いますが、若干怪しい雰囲気が漂います。様子見をしてみて厳しいなと思いましたら、ブログの表示速度向上に関する記事だけでも先に作成して投稿しようかなと思います。それから、他のブロガー方々の交流もまた初めて行こうと思います。