まだプログラマーですが何か?

プログラマーネタ中心。たまに作成したウェブサービス関連の話も https://twitter.com/dotnsf

2020/09

普段、あまり Windows サーバーを使うことがない中でクラウド上の Windows サーバーにリモートデスクトップ接続をして作業する、という機会がありました。そこで遭遇したトラブルと、その解決方法の自分向け備忘録です。


まずは発生したトラブルの状況を説明します。某クラウド上に Windows サーバーインスタンスを作成・用意しました。ログイン時のクレデンシャル(ユーザー名&パスワード)も分かっていて、サーバー・ネットワークへの VPN も接続したのでプライベート IP アドレス宛で接続することができるはず、という状況です:
2020091501


いざリモートデスクトップ接続を試みます。コンピューター欄に IP アドレス、そしてユーザー名にはログイン用のクレデンシャルで確認したユーザー名(図では Administrator)を指定して「接続」します:
2020091502


するとログインパスワードを聞かれます、ここまでは想定通り。同様にしてクレデンシャルで確認ずみのログインパスワードを入力して「OK」をクリック。これでリモートデスクトップ接続できるはず・・・:
2020091503


・・・だったのですが、エラーが発生してログインに失敗してしまいました。入力ミスはしていないし、ネットワーク的に繋がっていない相手だとしたらパスワードを聞かれることもないし、、、原因はなんだろう?? と、よく見るとユーザー名が入力した "Administrator" ではなく "Administrator@xxx.xxx" となっていました。なお "@xxx.xxx" 部分は会社のドメイン名です。何度か同じ手順を実行したのですが、常にこのドメイン名部分が自動的に(というか勝手に)付加されてしまい、正しいログインユーザー名ではなくなっていました。ログインエラーの原因はおそらくこれでしょう:
2020091504


作業に使った Windows PC は会社貸与のもので、詳しくはわかりませんが会社の運用ポリシーに従って集中管理されているものです。おそらくですがその関係でリモートデスクトップ接続時のログインユーザー名に "@xxx.xxx" というドメイン名までが(自動的に)付与されてしまっているのだと思います。この辺りあまり詳しくないのですが、そう考えるとこの挙動自体は納得できるものではあります。

ただログインユーザー名が勝手に変更されてしまっては、いつまでたってもクラウドの Windows サーバーにログインすることができません。会社側の運用ポリシーに原因があるのだとすれば、その運用ポリシーを変更することでも解決できるかもしれませんが、残念ながら(多くのケースがそうであると想像しますが)自分は運用ポリシーを変更できるような立場ではありません。直接の原因の究明も去る事ながら、この状況を Windows ユーザー側の操作だけで解決する方法はないか? というのが今回のブログテーマでした。


で、その応急処置的な解決方法がわかりました。先程のエラー画面内の「その他」と書かれた箇所をクリックします:
2020091505


するとログインユーザーを選択する箇所が表示されるので、まずはここで「別のアカウントを使用する」を選択します:
2020091506


改めてログインユーザー名とパスワードを入力する画面に遷移します。ここでログインユーザー名の頭に .\ を付けたものを指定します(パスワードは本来のものをそのまま指定します)。そして「OK」を押します:
2020091507


環境によってはセキュリティ証明書に関する警告ダイアログが出ることがあるかもしれませんが、その場合は「はい」を選択します:
2020091508


すると無事にリモート先の Windows デスクトップが表示されました!:
2020091509


運用ポリシーによって会社ドメインが強制されてしまうようなケースでも、ログイン名の頭に .\ を付けることでログインユーザー名のドメインを強制指定して上書きすることでなんとかエラーが回避できるようでした。


CSS だけで画像やブロック要素にぼかしを入れることができます。説明の前に、実際に試せるウェブページを作って公開したので、こちらを御覧ください:
https://dotnsf.github.io/blur_change/

アクセスすると以下のような画面が表示されます。これはある画像がかなり強めにぼかされて表示されています。この時点では「なんとなく人間?」くらいはわかるかもしれませんが、性別や表情、姿勢など、どのような画像が表示されているのか、まだわかりませんよね:
2020090701


画面下にスライダーバーがあり、これでぼかしのレベルを調整できます。最初はスライダーの一番右(最大ぼかし)に設定されていて、これを左に移動させることでぼかしを少なくすることができます:
2020090702


だんだん元の絵が見えてきます:
2020090703


スライダーを一番左まで移動させるとぼかしはゼロになり、元の絵が表示されます:
2020090704


なお元の絵はいらすとや様の「ブレザーとネクタイの女子学生のイラスト」を使わせていただきました:



このようなぼかしを実現するには、CSS で対象要素(今回の場合は <img> 要素)に以下のようなスタイルを指定します:
#img{
  -ms-filter: blur(100px);
  filter: blur(100px);
}

この blur 属性の指定でぼかしを実現しています。上例では blur(100px); という指定をしていますが、この 100 の部分の数字が大きいほど強いぼかしが入り、0 だとぼかしもゼロになって元の画像のままで表示されます。

上述のサンプルページでは、スライダーバーの動きに従ってスタイル指定を書き換えることで動的にぼかしのレベルが変わるような JavaScript を実装しています。具体的には jQuery を併用して以下のような HTML および JavaScript を実装しました:
<script>
$(function(){
  var t = $('#img')[0];
  t.style['-ms-filter'] = 'blur(100px)';
  t.style['filter'] = 'blur(100px)';
});

function changeBlur(){
  var b = $('#rng').val();
  var t = $('#img')[0];
  t.style['-ms-filter'] = 'blur(' + b + 'px)';
  t.style['filter'] = 'blur(' + b + 'px)';
}
</script>
</head>
<body>

<div class="container">
  <img id="img" src="https://1.bp.blogspot.com/-anFajTcy3CM/XxU0nhH2UyI/AAAAAAABaOA/Fovyifhdjvs8HRvHhNZrOWXEDcTN1_E5gCNcBGAsYHQ/s450/school_blazer_girl_necktie.png" width="80%"/>
  <br/>
  <input id="rng" type="range" value="100" min="0" max="100" step="5" oninput="changeBlur()" width="100%"/>
</div>

この例ではスライダーバーの値に合わせてぼかしのレベルを変えていますが、他に setTimeout を使ったり、クリックイベントハンドラを使うなどして少しずつぼかしを薄くする、といった使い方ができると思っています。


なお、JavaScript で動的にスタイルを書き換える手法については以前のブログエントリで解説しているので、こちらも参照ください:
JavaScript でスタイルを動的に書き換える






このページのトップヘ