2017年10月28日土曜日

Visual Studio Code で Angular の開発環境を構築する方法

How to make Visual Studio Code adapt for Angular

最近のはやりのWebアプリケーション開発ツール Angular を Visual Studio Code で利用する方法を調べてその結果をまとめました。


環境

  • Windows 10
  • Visual Studio Code 1.17.1


Node.js をインストールする

Node.js は Angular で使われるWebサーバーやツールが含まれている実行環境です。
Node.js を公式サイト https://nodejs.org/en/ からダウンロードしてインストールします。
今回は Recommended For Most Users のインストーラーをインストールしました。
blog.fujiu.jp Visual Studio Code で Angular の開発環境を構築する方法


Angular CLI をインストールする

Angular CLI はAngularを利用するためのツール集です。
Node.js に含まれる npm コマンドが必要です。
コマンドプロンプトから次のコマンドを入力します。


%USERPROFILE%\AppData\Roaming\npm にファイルがインストールされました。

Angular プロジェクトを作成する

Cドライブのルートにサブフォルダーを作り、そこに開発するプロジェクトを作成します。
コマンドプロンプトから次のコマンドを入力します。


1行目はカレントフォルダーの移動、3行目が Angular プロジェクトを作成するコマンドです。
ng は Node.js に含まれるコマンドです。


ang-app というフォルダーに "Welcome to app!!" というAngularアプリケーションのひな形が作られるので次のコマンドで起動します。


ng serve はAngularプロジェクトをWebサーバーで起動させるコマンドです。
下の画像のように Compiled successfully と表示されたら

Webブラウザーで http://localhost:4200/ を開くと次のような画面が表示されれば成功です。

コマンドプロンプトに Compiled successfully と表示されている間は"Welcome to app!!"が起動したままですが、コマンドプロンプトで Ctlr + C を入力すると停止できます。

Visual Studio Code で Angular プロジェクトを開く

コマンドプロンプトに次のコマンドを入力するとVisual Studio Code で Angular プロジェクトのフォルダーを開けます。



Angular開発するために Visual Studio Code に拡張機能をインストールする必要があると思ったのですが、デフォルトでシンタックスハイライトやコード補完が機能していました。
F12キーで「定義に移動」もできました。

ng serve を開始して app.component.ts を編集して上書き保存したら自動で再コンパイルされWebブラウザーがリロードし、結果を即座に確認できました。


結論

Visual Studio Code は Angular の開発環境としてそのまま使える
ただしHTMLを WYSIWYG でコーディングできないので、HTMLをプレビュー表示する拡張機能をインストールするかほかのエディターとの併用すると良さそうです。
今回はコマンドラインの入力にコマンドプロンプトを使いましたが、Visual Studio Code のターミナルを使うと効率が上がりそうです。


参考にしたコンテンツ

Angular JavaScript Tutorial in VS Code
Home · angular/angular-cli Wiki · GitHub


関連ブログ

Vsiaul Studio Code のターミナルを Bash に設定する方法
WindowsでUnix用GUIツールを実行する方法
Unity3D のC#スクリプトを Visual Studio Code で編集する方法

2017年10月21日土曜日

インターネットが100倍以上速くなった方法 (NDプロキシ)

How to speed-up Internet connection on So-net

前回のブログ プロバイダーの裏メニューでインターネットを高速化出来るか (IPoE・IPv6) ではルーターがNDプロキシに対応できないため、1Gbps の契約にもかかわらず 0.0006Gbps 程度の速度しか出ないことがわかりました。
早速NDプロキシ対応のルーターを購入したのでその結果をまとめました。
blog.fujiu.jp インターネットが100倍以上速くなった方法 (NDプロキシ)


環境

  • Windows 10
  • Wi-Fiルーター Buffalo WXR-1750DHP2


NDプロキシ対応のルーターを調べる方法

NDプロキシが使えるルーターを購入したいわけですが、カタログに「NDプロキシ対応」と書いてある製品が見当たりませんでした。
そこで各メーカーがWebサイトで公開している製品マニュアルを調べました。

調べた結果、Buffalo WXR-1750DHP2 の Webサイトからダウンロード出来るPDFマニュアルにNDプロキシを使用する方法が記述されて、値段も1万円以内だったのでこの製品を選びました。
同社のWSRシリーズはPDFマニュアルにNDプロキシの記述がないので要注意です。


セットアップ

PPPoEの設定をしてNDプロキシで接続する設定にします。
運用方法に応じて暗号化キーやSSIDやMACフィルタリングも設定します。


結果

いつも遅くなる夜間に Download Speed で回線速度を測った結果 0.0727Gbps ほどになりました。
NDプロキシ対応前は 0.0006Gbps だったので、121倍速くなりました。
1Gbpsの契約なのでまだ遅いですが、以前に比べ待ち時間が少なくなったので及第点だと思います。


So-net 高速化のまとめ

Wi-Fiルーターを使って So-net を高速化するには次のことが必要でした。
  • So-net のサポートに IPoE・IPv6 開通の希望を申し出る
  • NDプロキシ対応のWi-Fiルーターを使う (購入するかレンタルする)


関連ブログ

プロバイダーの裏メニューでインターネットを高速化出来るか (IPoE・IPv6)
インターネットプロバイダーの変更がお得にできた話
不安定なオンラインゲームを安定させる方法
[Android] Lynx3DをWi-Fi接続するとAirStationが再起動する

2017年10月7日土曜日

プロバイダーの裏メニューでインターネットを高速化出来るか (IPoE・IPv6)

How to open IPoE / IPv6 on So-net

数ヶ月前まで地元企業が運営するインターネットプロバイダーを利用していましたが、引っ越しのためやむなく So-net に変更しました。
So-netの同系列のグループ企業が PSNow というゲームストリーミングを提供しているのでそれに実用的な速度が出るだろうと期待していました。
ところが利用を開始したら以前利用していたプロバイダーに比べて夜間の回線速度が非常に遅いことがわかりました。
Webサイトは表示されるまで長時間待たされ、動画見放題のU-NEXT for So-netは数秒再生するとロード待ちで止まり、オンラインゲームは時間切れによる強制終了が頻繁に起きます。
1Gbps の契約ですが Download Speed を測定すると 0.0006Gbps 程度の速度しか出てません。
blog.fujiu.jp プロバイダーの裏メニューでインターネットを高速化出来るか (IPoE・IPv6)

回線速度を改善するため IPoE・IPv6 を申し込んだのでその経緯と結果をまとめました。


環境

  • Windows 10
  • Wi-Fiルーター NEC Aterm WG1800HP2 (IPv6ブリッジ対応、NDプロキシ非対応)


プロバイダーにIPoE・IPv6の開通を申し込む

IPoE・IPv6はIPv6に対応しているサイトへの接続速度が改善される可能性があるサービスです。
IPoE・IPv6を提供するプロバイダーは多いようですが、So-netでは開通を申し込んだ利用者にだけに提供する裏メニューのような扱いです。
申し込みはSo-netのサポートWebサイトから行いました。


ルーターの設定を変更する

現在使用しているルーターはIPoEに未対応ですが、IPv6ブリッジを有効にするとパソコンやスマートフォンがIPoE・IPv6で接続が出来るようになります。
他社のルーターでは「IPv6パススルー」と呼ばれる機能です。


IPoE・IPv6を導入した結果

IPoE・IPv6開通しても、体感速度も変化ありませんでした。
よく利用するWebサイトのほとんどがIPv6非対応だったようです。
同じ時間帯にDownload Speedを測定したところ、0.0010Gbpsほどでした。誤差の範囲の変化です。


今後の対策

回線速度改善のためにこれからできる方法を考えてみました。
  1. プロバイダーを変える
  2. ルーターのNDプロキシを有効にする
  3. プロバイダーや回線事業者が提供するレンタルWi-Fiルーターを使う
プロバイダーを変える方法ですが、現在住んでいる地域では利用客が多い大手プロバイダーしか選べないため解決しそうにありません。

ルーターの設定をNDプロキシ有効に変更する方法ですが、残念ながら現在使用しているルーターはNDプロキシに未対応で、対応している市販品も多くありません。

レンタルWi-Fiルーターを使う方法ですが、月額300円程度で使えますがIPoEやNDプロキシに対応しているか不明です。
速度が改善しなければレンタルをやめればそれ以上の出費はありませんが解決したことにはなりません。

レンタルWi-Fiルーターについて問い合わせてNDプロキシに対応していればレンタルを、していなければNDプロキシ対応ーターを買うのが最善策に思います。


関連ブログ

インターネットプロバイダーの変更がお得にできた話
不安定なオンラインゲームを安定させる方法
Firefox の動画の自動再生を禁止にする方法