2019年11月30日土曜日

手入力した HTML を即座にプレビュー表示する HTML の作り方

HTML Previewer in web browser

当ブログの著者は HTML を手入力する機会が多いのですが、入力した内容を確認するために
  • HTML テキストエディターに入力する
  • テキストファイルを保存する
  • Web ブラウザーでテキストファイルを開いて結果を確認する (2回目以降はファイルをリロードする)
という手順を踏んでいました。
PC にプリインストールされているメモ帳と Web ブラウザーさえあればすぐに Web ページを作ることができるのですが、 メモ帳と Web ブラウザーの往復が面倒でした。
そこで、Web ブラウザーだけで HTML を即座にプレビュー表示する HTML を作って上記の手順を不要にしました。
文字の置換機能付きです。
必要としている方がいらっしゃったらご自由にお使いください。
blog.fujiu.jp 手入力した HTML を即座にプレビュー表示する HTML


環境

  • Windows 10
  • Firefox 70 と Internet Explorer 11 で確認済み


ソース



使い方

画面上部のテキストエリアに HTML を入力すると画面下部にプレビューされます。
Firefox や Internet Explorer の F12 キー開発ツールと併用するとデバッグがはかどります。
「保存する」ボタンで入力した内容をファイルに保存できます。
Web ブラウザーを終了したりリロードすると入力した内容が消えてしまう点は要注意です。


関連ブログ

JavaScriptをWebコンテンツを見ながらデバッグする [Intenet Explorer] [firefox]
JavaScript でグラフを作る方法 (Chart.js)
HTMLソースのミスやエラーを素早くチェックする


2019年11月3日日曜日

Visual Studio で WebException が起きた時の直し方

How to fix a WebException error

過去に Visual Studio で作った ASP.NET 用の Web アプリを久しぶりに起動したら WebException や SocketException の例外が発生して起動できなくなってしまいました。
原因と解決の手順をまとめました。


環境

  • Windows 10
  • Visual Studio 2017


症状

何度実行しても同じ場所でIoException と WebException と SocketException の3種類の例外が同時に発生します。
System.Net.WebException: '接続が切断されました: 送信時に、予期しないエラーが発生しました。。'
SocketException: 既存の接続はリモート ホストに強制的に切断されました。
blog.fujiu.jp Visual Studio で WebException が起きた時の直し方

内部例外 1:
IOException: 転送接続からデータを読み取れません: 既存の接続はリモート ホストに強制的に切断されました。。
内部例外 2:
SocketException: 既存の接続はリモート ホストに強制的に切断されました。


TLS 1.2 を有効にしたら解決した

ネット上の多くの Web サーバーがセキュアな通信のために TLS 1.0 や TLS 1.1 をサポートしていましたが、現在は TLS 1.2 に移行し TLS 1.0 や TLS 1.1 のサポートをやめる傾向があります。
今回の WebException が起きたアプリはネット上の Web サーバーが提供する Twitter API にアクセスする際に発生したのですが、まさに Twitter API が TLS 1.1 のサポートをやめた直後でした。
Visual Studio で開発したアプリは初期状態では Web サーバーへの接続に TLS 1.2 が無効にされていることが原因でした。
そこでこのアプリを次の方法で TLS 1.2 に対応したところ解決しました。

プロジェクトのターゲットフレームワークを.NET Framework 4.5 以降に設定しておきます。
次のコードを追加します。
エラーが起きるコードの前に実行する必要があります。



試してみたけど効果がなかったこと

エラーメッセージからリモートの Web サーバーに接続できないことが原因と推測し、以下のことを確かめましたが効果ありませんでした。
  • PC や Visual Studio を再起動する
  • Web ブラウザーなどでインターネットの Web サーバーに接続できることを確かめる
  • ファイアウォールやセキュリティソフトを停止する
  • IIS Express を削除して再インストールする

Microsoft Network Monitor で Visual Studio の接続の様子を見てみましたが、そもそもサーバーに何かを送受信している様子はありませんでした。


イベントビューアーの記録を調べた結果

TLS 1.2 に対応する前にイベントビューアーの記録を確かめてみました。
スタートボタンを右クリックしてイベントビューアーをクリックし、
Windows ログ -> Applictaion
を開くと例外が発生した時刻にイベントが記録されていました。
圧縮されたコンテンツ %USERPROFILE%\AppData\Local\Temp\iisexpress\IIS Temporary Compressed Files\Clr4IntegratedAppPool のキャッシュ用に指定されたディレクトリは無効です。静的な圧縮は現在無効です。

エクスプローラーで確かめたところ、このディレクトリは存在しませんでした。
このイベントのおかげで TLS が原因であることに気がつくまで時間を要しました。



参考にしたコンテンツ

.NET Framework で TLS1.1 および 1.2 を有効化する方法 -まとめ- – Japan IE Support Team Blog
https://blogs.technet.microsoft.com/jpieblog/2018/10/11/net-framework-tls11-12-2/


関連ブログ

Visual Studio 2017 を全部ダウンロードしてからインストールする方法
古い Visual Studio をまとめてアンインストールする方法