Jiro Laboratory

C#、ASP.NET、JavaScript、Androidとか

404.11対策 URLのPath に (+) 記号を含めたい場合

ASP.NET IIS

HTTP Error 404.11 - Not Found
要求フィルター モジュールが、ダブル エスケープ シーケンスを含む要求を拒否するように構成されています。

これは + をエスケープして %2B にしても結果は変わりません。
ASP.NET では以下の設定で回避できます。

<system.webServer>
  <security>
    <requestFiltering allowDoubleEscaping="true" />
  </security>
<system.webServer>

※参考
c# - Is Enabling Double Escaping Dangerous? - Stack Overflow
WindowsのIISでURLにプラス記号を含むページが404エラーになるのを解消する：Tech TIPS - ＠IT

asp.net mvc C#7 ValueTuple でコンパイルエラーが出た

Visual Studio ASP.NET Azure C#

コンパイル エラー メッセージ: CS0012: 型 'System.Object' が参照されていないアセンブリで定義されています。アセンブリ 'System.Runtime, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a' への参照を追加してください。

NuGetで
NuGet Gallery | CodeDOM Providers for .NET Compiler Platform ("Roslyn") 1.0.3
NuGet Gallery | Microsoft.Net.Compilers 2.0.1
をインストールしたら解決しました。
（順序が大事＾＾）

※参考
c# 7.0 - C# 7 ValueTuple compile error - Stack Overflow
asp.net - NuGet Package for Tuples in C#7 causes an error in my views - Stack Overflow

Visual Studio Community 2017 を常に管理者権限で起動する

Visual Studio

Visual Studio Community 2015 から 2017 に変更したついでのメモ。
レジストリを変更することで常に管理者権限で起動できるようになります。

キー HKEY_CURRENT_USER\Software\Microsoft\Windows NT\CurrentVersion\AppCompatFlags\Layers

新規 > 文字列値

名前 C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Common7\IDE\devenv.exe
値 RUNASADMIN

Youtube IFrame Player API のプレイヤーをページ背景にする（ミュート）

JavaScript Youtube

css でプレイヤーサイズをウィンドウサイズと同じにします。
また、z-index を指定してプレイヤーがメインコンテンツの背景になるようにします。
onPlayerReady イベントで mute() を呼び出せばミュートになります。

コードサンプル

背景動画に「ドット画像」を被せているサイトがありますが、以下ではその手法も実装してみました。
gist.github.com

YouTube Data API (v3) でデータを取得する

JavaScript Youtube

少なくとも２種類の方法があります。

  • Google APIのクライアントライブラリを使う
  • $.ajax を使う

クライアントライブラリを使用するサンプルコードはOAuth2認証を行うサンプルしかありませんでしたので、APIキーを使って認証なしで実行できるサンプルコードを記載しておきます。
アップロードした動画のリストを表示するサンプルです。

事前準備（Google API Console ）

Google API Console の「認証情報」でAPIキーを作成します。プロジェクトが未作成の場合はプロジェクトを作成してから。
「ライブラリ」の「YouTube Data API」をクリックし、APIを有効にします。

クライアントライブラリを使う

googleApiClientReady() が処理の始まる箇所になります。
Google APIのクライアントライブラリを読み込む箇所に注意が必要。
gist.github.com

$.ajax を使う

Google APIのクライアントライブラリは不要です。
gist.github.com

参考

JavaScript コード サンプル
https://developers.google.com/youtube/v3/docs/?hl=ja

YouTube Player API を使った動画の再生

Youtube JavaScript

YouTube Player API を使うと JavaScript でYoutubeプレイヤーの操作を行うことができます。
動画の再生に必要な最小限のコードは以下になります。

<div id="player"></div>
<script src="https://www.youtube.com/iframe_api" async></script>
<script>
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      videoId: 'M7lc1UVf-VE', // Youtube動画のID
      events: {
        'onReady': onPlayerReady,
      }
    });
  }
  function onPlayerReady(event) {
    player.playVideo(); // 再生を開始
  }
</script>
プレイヤー作成時のパラメータ
  • width（数値） – 動画プレーヤーの幅。デフォルト値は 640
  • height（数値） – 動画プレーヤーの高さ。デフォルト値は 390
  • videoId（文字列） – Youtube動画のID
  • playerVars（オブジェクト） – プレーヤーのカスタマイズに使うパラメータ（後述）
  • events（オブジェクト） – オブジェクトのこのプロパティは、API が起動するイベントと、これらのイベントが発生したときに API が呼び出す関数（イベント リスナー）を識別します。
イベントの種類
  • onReady – プレーヤーが読み込みを完了し、API 呼び出しの受信を開始する準備ができると起動します。
  • onStateChange – プレーヤーの状態が変わると起動します。
  • onPlaybackQualityChange – 動画の再生画質が変わると起動します。
  • onPlaybackRateChange – 動画の再生速度が変わると起動します。
  • onError – プレーヤーでエラーが発生すると起動します。
playerVars に指定できるパラメータ

https://developers.google.com/youtube/player_parameters?playerVersion=HTML5&hl=ja
playerVars を使った例。

<div id="player"></div>
<script src="https://www.youtube.com/iframe_api" async></script>
<script>
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      width: 1280,
      height: 720,
      videoId: 'M7lc1UVf-VE',
      playerVars: {
        'autoplay': 1, // 自動再生
        'start': 10, // 00:10から開始
      },
    });
  }
</script>