ビール片手にプログラム ~ そうだ!遊ぼう! ~

ただ飲みながら遊んでいる話。まじめなこととかはしません。

Node.jsのアップデートをして遊ぼう。

今回はWindows環境にインストールしてある、Node.jsのアップデートをしようと思います。
Node.jsインストールしたのいつだっけ。。。

1. 今日のお供

ビール買い忘れたのでハイボールです。
我が家はトリスクラシックの2.7リットルを常備しています。 サントリー ウイスキー トリス クラシック [日本 2700ml ]

2. 今回参考にしたサイト

私はただ備忘録として、遊んだ結果を書きたいだけなので、本気でやりたい方はこちらを参考にされたほうが良いかと思います。 qiita.com qiita.com

3. まずは現在のバージョン確認

全然いじってなかったのでとっても古いです。

f:id:front-end:20190601101430p:plain
2019年ですよ。

4. nodistのインストール

nodistはNode.jsのインストールやバージョン管理が行えるツールです。
githubにあがっているnudistをダウンロードし、インストールしていきます。 github.com

ますはダウンロードします。

f:id:front-end:20190601102100p:plain
nudistダウンロード

ダウンロードできたらインストールしていきます。

f:id:front-end:20190601102322p:plain
インストール画面①
f:id:front-end:20190601102511p:plain
インストール画面②
f:id:front-end:20190601102554p:plain
インストール画面③
f:id:front-end:20190601102624p:plain
インストール中

PATHの更新に失敗したようです。

f:id:front-end:20190601102956p:plain
PATHの更新失敗

ひとまずインストールを完了させてPATHの更新を手動でしていきたいと思います。

f:id:front-end:20190601103132p:plain
インストール完了

インストール先のbinのパスを環境変数に追加します。
今回の場合は「C:\Program Files (x86)\Nodist\bin」

f:id:front-end:20190601103704p:plain
PATHの追加

システム環境変数を新規追加していきます。

f:id:front-end:20190601105244p:plain
NODIST_PREFIXの追加
f:id:front-end:20190601105356p:plain
PATH
f:id:front-end:20190601105434p:plain
NODE_PATH

nodistが使用できるようになりました。

f:id:front-end:20190601105606p:plain
設定完了

5. Node.jsのアップデート

インストール可能なNode.jsのバージョンの一覧を表示します。

nodist dist

f:id:front-end:20190601111104p:plain
12.3.1が最新

12.3.1が最新版とのことなので、それをインストールしていきます。

nodist + 12.3.1

f:id:front-end:20190601111143p:plain
インストール完了

使用するバージョンを指定します。

nodist 12.3.1

f:id:front-end:20190601111219p:plain
バージョン選択

設定の確認!アップデート完了しました!

node -v

f:id:front-end:20190601111309p:plain
アップデート完了!

6. npmのアップデート

npm update -g npm

f:id:front-end:20190601111516p:plain
npm

7. Node.jsアップデート完了!

nodistを使って、Node.jsのアップデートが完了しました。
次回はNode.jsとかやりたいなぁ。

VSCodeをインストールして遊ぼう。

今日は巷で話題のVSCodeをインストールして、
HTMLを書くところまでやっていこうと思います。
最近全然新しいエディタとか触っていなかったので楽しみです。

1. 今日のお供

最近ちょっと気に入ってます。
炭酸で割るだけで簡単にゆずレモンサワーの完成です。

小正醸造 小鶴サワー専用ゆずレモン 瓶 25度 1800ml [ リキュール ]

2. 公式サイトからダウンロード

まずは公式サイトからダウンロードします。 code.visualstudio.com

f:id:front-end:20190531111923p:plain
公式サイト

3. インストール

ダウンロードしたexeファイルを実行し、インストールしていきます。

f:id:front-end:20190531112135p:plain
インストール①
f:id:front-end:20190531112247p:plain
インストール②
f:id:front-end:20190531112425p:plain
インストール③
f:id:front-end:20190531112506p:plain
インストール④
f:id:front-end:20190531112550p:plain
インストール⑤
f:id:front-end:20190531112646p:plain
インストール⑥
f:id:front-end:20190531112754p:plain
インストール⑦
f:id:front-end:20190531112819p:plain
インストール完了!

4. 起動!&日本語化

起動すると、まぁシンプルな画面が登場します。

f:id:front-end:20190531113030p:plain
VSCode

英語のままでも良いのですが、やっぱり分かりにくいので、ここは日本語化しましょう。 画面左側のアイコンの一番下(Extensions)をクリックします。

f:id:front-end:20190531113403p:plain
Extensions

拡張機能検索用の入力エリアに「Japanese Language Pack」と入力すると、Visual Studio Code用の日本語化パックが検索結果として表示されます。
そこのInstallをクリックし、インストールが完了したらVSCodeを再起動します。

f:id:front-end:20190531113929p:plain
日本語化パックのインストール

日本語化が出来ました。

f:id:front-end:20190531114134p:plain
日本語化完了

5. Emmet使ってHTMLでも書いてみましょう。

Ctrl+nで新規作成を実施すると、まぁシンプルなエディタが開きます。

f:id:front-end:20190531114622p:plain
エディタ

htmlとして認識してほしいので、まずは保存し、htmlと入力してみるとびっくり、
コードスニペットでEmmetがでる!(びっくり

f:id:front-end:20190531114949p:plain
コードスニペットに!

もちろん選択すると展開されます。

f:id:front-end:20190531115100p:plain
展開

ではEmmet記法で書いて。。

f:id:front-end:20190531115442p:plain
展開されるかなぁ

Tabを押下したら。。展開されたー!

f:id:front-end:20190531115503p:plain
展開!

6. langはjaがいいですよね。

というわけで設定していきましょう。 メニューから「ファイル(F)」>「基本設定」 > 「設定」をクリックします。

f:id:front-end:20190531115744p:plain
設定

右上の{}のアイコンをクリックします。

f:id:front-end:20190531120138p:plain
設定(JSON)を開く

setting.jsonが開きますので、そこに下記を追記し,保存します。

  "emmet.variables": {
     "lang": "ja"
  }

f:id:front-end:20190531120304p:plain
setting.json

VSCodeを再起動して再度、html:5を展開してみると。。
lang="ja"になりました!

f:id:front-end:20190531120700p:plain
jajaja

7. VSCodeインストール完了!

Emmetが標準で入っているのは本当に良いですね。
今後はVSCodeをメインエディタとして使っていこうかなぁ。。

AzureでSQL Server2016を建てて遊ぼう。

今回は、AzureにSQL Server2016を建てて遊びたいと思います。
前回WEBサーバーを建てたので、今回はDBサーバーを!
これが終わったら新しいVisual Studio2019ダウンロードしてあるので、 それを使って遊べたらいいなと思っています。

1. 今日のお供

なんかさっぱりしたいので、今日はウーロンハイです。
中身はやっぱ金宮ですよね。
宮崎本店 キッコーミヤ焼酎 [ 焼酎 25度 720ml ]

2. 今回参考にしたサイト

私はただ備忘録として、遊んだ結果を書きたいだけなので、本気でやりたい方はこちらを参考にされたほうが良いかと思います。 docs.microsoft.com

3. 仮想マシンの作成

まずはSQL Server2016が搭載された、Windows Server2016の仮想マシンを作成していきます。

(1) リソースの作成→対象マシンの検索

まずはリソースの作成を押下します。

f:id:front-end:20190505132803p:plain
リソースの作成

検索フィールドに「SQL Server 2016 on Windows Server 2016」と入力してEnterを押します。

f:id:front-end:20190505132913p:plain
SQL Serverの検索

(2) SQLServerの選択→作成

一覧に出てきた「SQL Server 2016 SP1 on Windows Server 2016」を選択します。

f:id:front-end:20190505132943p:plain
SQL Serverの選択

作成ボタンを押下します。

f:id:front-end:20190505133109p:plain
作成!

(3) 設定情報の入力

仮想マシンの基本情報を入力し、「SQLServerの設定」タブを押下します。

f:id:front-end:20190505133332p:plain
基本情報の入力

SQL Serverの設定情報を入力し、「確認および作成」ボタンを押下します。

f:id:front-end:20190505133425p:plain
SQL Serverの設定情報を入力

「作成」ボタンを押下します。

f:id:front-end:20190505133511p:plain
作成!

(4) 仮想マシンのデプロイ

デプロイ中。。

f:id:front-end:20190505133546p:plain
デプロイ中。。

約10分ぐらいでデプロイが完了しました。

f:id:front-end:20190505133615p:plain
デプロイ完了!

4. 日本語化&SQL Serverに接続

接続と日本語化の方法は下記記事参照。 uchiko.hatenablog.com

サーバーのSQL Server Management Studioで接続してみます。

f:id:front-end:20190505171511p:plain
SSMSの選択

ログイン情報を入力します。

f:id:front-end:20190505171556p:plain
ログイン情報の入力

接続完了!

f:id:front-end:20190505171621p:plain
接続完了!

5. SQL Server2016構築完了!

これまたあっさりと完了しました。
以前上司から聞いた「Azureだと簡単に建てられちゃうから勉強にならない」という言葉の意味が身にしみました。
本当、食わず嫌いでハードルが高かったのですが、超簡単でした。。

Azureで建てたWindows Server 2016にWEBサーバを建てて遊ぼう。

今回は、前回Azureに仮想マシンとして建てたWindows Server 2016にWEBサーバを建てて遊びたいと思います。
WEBサーバ建てると一気にできることが広がりますよね。楽しみです。

1. 今日のお供

大好きな華みやびです。
これ居酒屋でおいてくれるところが増えたらうれしいなぁ。。 2017年度版 サッポロ ヱビス 華みやび [ 350ml×24本 ]

2. 今回参考にしたサイト

私はただ備忘録として、遊んだ結果を書きたいだけなので、本気でやりたい方はこちらを参考にされたほうが良いかと思います。 www.atmarkit.co.jp

3. IISのインストール

サーバーマネージャーの管理メニューにある「役割と機能の追加」を押下します。

f:id:front-end:20190504133548p:plain
サーバーマネージャから役割と機能の追加

開始する前にの説明がでるので「次へ」ボタンを押下します。

f:id:front-end:20190504133616p:plain
開始する前に

インストールの種類の選択画面で「役割ベースまたは機能ベースのインストール」を選択し、
「次へ」ボタンを押下します。

f:id:front-end:20190504133645p:plain
役割ベースまたは機能ベースのインストール

対象サーバーを選択して「次へ」ボタンを押下します。

f:id:front-end:20190504133714p:plain
サーバーの選択

役割の一覧から「Web Server(IIS)」を選択します。

f:id:front-end:20190504133746p:plain
サーバーの役割の選択

選択すると、「必要な機能を追加するか」とメッセージが出てくるので追加します。
優しいですね。

f:id:front-end:20190504133821p:plain
IISに必要な機能の追加

サーバーと役割の選択画面の「次へ」ボタンを押下します。

f:id:front-end:20190504133853p:plain
機能選択へ

機能の選択画面では、とりあえず、デフォルトのままで「次へ」ボタンを押下しました。

f:id:front-end:20190504133918p:plain
機能の選択

Webサーバーの役割の説明が出てくるので、読んで「次へ」ボタンを押下します。

f:id:front-end:20190504133943p:plain
WEBサーバーの役割

役割の選択画面では、とりあえず、デフォルトのままで「次へ」ボタンを押下しました。

f:id:front-end:20190504134023p:plain
役割サービスの選択

インストールオプションの確認画面で、オプションを確認し、「インストール」ボタンを押下します。

f:id:front-end:20190504134059p:plain
インストールオプションの確認

インストール中。。

f:id:front-end:20190504134122p:plain
インストール中

インストールが完了しました。

f:id:front-end:20190504134204p:plain
インストール完了

インストールが出来ているか確認するために、
サーバー上のIElocalhostにアクセスすると。。インストールできてました!

f:id:front-end:20190504134226p:plain
インストールの確認

4. コンテンツの配置

デフォルトでは、「C:\inetpub\wwwroot」がルートディレクトリとのことなので、
そこに資産を配置して確認したいと思います。
Windows同士ならコピペで追加できます。すごい。

f:id:front-end:20190504140458p:plain
コピペで追加

もう一度、サーバーのIEで確認すると、配置できました!

f:id:front-end:20190504140746p:plain
配置できました!

5. サーバー以外からも見れるようにする

今のままではサーバー外から見ることは出来ないので、
外部からも見れるようにしていきたいと思います。 見れない原因としては、前回のリモートデスクトップが接続できなかった原因と同様、
HTTP通信用のポートが開いていないことが原因なので、あけて行きたいと思います。 すべてのリソースからネットワークセキュリティグループを選択します。

f:id:front-end:20190504152806p:plain
ネットワークセキュリティグループを選択

「受信セキュリティ規制」を押下します。

f:id:front-end:20190504152928p:plain
受信セキュリティ規制

「追加」を押下します。

f:id:front-end:20190504153040p:plain
受信セキュリティ規制の追加

受信セキュリティ画面の「Basic」を押下します。

f:id:front-end:20190504153123p:plain
受信セキュリティ規制の追加画面

サービスにHTTPを選択して、そのほかを入力して追加を押下します。

f:id:front-end:20190504153212p:plain
HTTPの追加

ポートが開いているかを確認するために、自分のパソコンからアクセスすると。。
接続できました!

f:id:front-end:20190504153306p:plain
Hello IIS!

6. WEBサーバー構築完了!

構築というか、ただボタンを押しただけのような気もするというぐらい、
あっさり、WEBサーバの構築が完了しました。
実際使用する上で、他に細かい設定は色々必要でしょうが、 そこらへんはこれから遊びつつ学んでいけたらと思います。

Azureに仮想マシンで建てたWindows Server2016を日本語化して遊ぼう。

今回は、前回Azureに仮想マシンとして建てたWindows Server2016の日本語化をして遊びたいと思います。
リモートデスクトップで入ってGUIでサーバの設定を変えることってほとんどしたことが無いので、楽しみです。

1. 今日のお供

今日のお供は、さっそくビールじゃないのかよって話ですが、カンパリソーダです。
ビールを裏切ったわけではないですよ! カンパリ CAMPARI [ リキュール 1000ml ]

2. 今回参考にしたサイト

私はただ備忘録として、遊んだ結果を書きたいだけなので、本気でやりたい方はこちらを参考にされたほうが良いかと思います。 www.atmarkit.co.jp

3. まずはリモートデスクトップ接続をしてみよう

ダッシュボードから対象の仮想マシンを選択して、
概要ページの接続ボタンを押下します。

f:id:front-end:20190504115345p:plain
仮想マシン管理画面

RDP(リモートデスクトッププロトコル)ファイルをダウンロードします。

f:id:front-end:20190504115452p:plain
RDPファイルダウンロード

ダウンロードしたRDPファイルをクリックすると、
リモートデスクトップ接続のダイアログが表示されるので、接続ボタンを押下します。

f:id:front-end:20190504115652p:plain
リモートデスクトップ接続

あれ?接続できない。

f:id:front-end:20190504115948p:plain
接続できない。。だと。。

なんか古い?情報だと仮想マシン作成時にはリモートデスクトップ
ポート開いてるとかあいてないとかいろいろ出てくるので、確認すると、
やっぱ開いてないので追加しましょう。

f:id:front-end:20190504120153p:plain
ネットワークの確認

こちらのサイトを参考にして設定しました。 docs.microsoft.com

f:id:front-end:20190504120316p:plain
リモートデスクトップ接続できますように

そして再チャレンジ!接続できました。

f:id:front-end:20190504120505p:plain
接続できた!

4. 日本語化しよう

(1) 日本語言語パックを追加しよう。

コントロールパネルから言語パックの追加(Add a langage)を選択します。

f:id:front-end:20190504122028p:plain
言語パックの追加①

Language画面が開くのでそこでも言語パックの追加(Add a language)を選択します。

f:id:front-end:20190504122122p:plain
言語パックの追加②

日本語を選択し、追加ボタンを押下します。

f:id:front-end:20190504122320p:plain
日本語の追加

Language画面に追加された日本語の優先順位を上げて、Optionsを押下します。

f:id:front-end:20190504122436p:plain
日本語を優先に

日本語の言語パックをダウンロードインストールします。

f:id:front-end:20190504122539p:plain
言語パックのダウンロード・インストール

ちょっと時間かかりますが、完了しました。

f:id:front-end:20190504122645p:plain
言語パックインストール完了

(2) タイムゾーンを変更しよう。

言語の日本語化の準備は整いましたが、時刻が日本時間ではないので、
コントロールパネルから設定を変更します。

f:id:front-end:20190504123031p:plain
本の時間でお願いします。

(3) リージョンを変更しよう。

時間は日本になったのですが、場所が日本じゃないので、こちらも日本に設定しましょう。

f:id:front-end:20190504123558p:plain
日本ですよ①
f:id:front-end:20190504123619p:plain
日本ですよ②

再起動を促すダイアログが表示されるので、再起動します。

f:id:front-end:20190504123657p:plain
再起動しますか?します。

10分ぐらい待ってから、再接続すると、日本語になってました!

f:id:front-end:20190504124647p:plain
日本語化完了

5. 日本語化完了!

以上、Windows Server 2016の日本語化でした。
設定がGUIで出来るって本当、すごいですね。便利。
慣れ親しんだWindowsなので、大体どういう構成かも分かりやすいですし。
はじめてCUIUbuntu設定したときの自分に教えてあげたいなぁ。。

Azureで仮想マシンを使って遊ぼう。

今回は、表題の通り、Azureに仮想マシン建てて遊びたいと想います。
Azureはほとんど触ったことないので楽しみです。

1. 今日のお供

今日のお供は、サッポロ 復刻特製ヱビスです。 サッポロ 復刻特製ヱビス [ 500ml×24本 ]

2. 今回参考にしたサイト

私はただ備忘録として、遊んだ結果を書きたいだけなので、本気でやりたい方はこちらを参考にされたほうが良いかと思います。 www.atmarkit.co.jp

3. まだなにもない、ポータル画面

契約したばかりのポータル画面なので何もないです。

f:id:front-end:20190503161854p:plain
Azureポータル画面

仕事で見た画面と違う気がしたので設定を見てみたら、色が変えられるんですね。
VisualStudioやEclipseとかは長時間使われるものなので、カスタマイズできるのは分かりますが、
管理画面まで色が変えられる時代なんですね。すごい。

f:id:front-end:20190503162328p:plain
Azureポータル画面 色変更

4. 仮想マシンを作ろう

参考サイトによるとGUIでもCUIでも作れるとのことなのですが、今回は参考サイトどおりGUIで作ろうと思います。

(1) リソースの作成→Compute

左カラムにあるメニューから「リソースの作成」を押下後、右カラムに現れるAzure Marketplaceの一覧の中から「Compute」を選択しました。
すると、おすすめの一覧が表示されました。 今回は、WindowsServer 2016が使いたいので、「すべて表示」リンクを押下します。

f:id:front-end:20190503164841p:plain
リソースの作成→Compute

たくさんのOSやテンプレートが表示されました。 AzureといえばWindows Serverでしょ的な先入観があったのですが、想像以上にたくさんあって、こんな先入観を持っててごめんなさい。って気持ちになりました。

f:id:front-end:20190503165542p:plain
たくさんのOSやテンプレートが!

(2) Windows Serverの選択

プルダウンから、Windows Srever2016を選択したところ、
検索結果にはWindows Serverが全部出てきて困惑しましたが、
そもそものWindows Serverをクリックした後、次のページでバージョンの選択なんですね。

f:id:front-end:20190503170151p:plain
Windows Server2016を選択したんだけどなぁ。。

Windows Server2016を選択し、作成ボタンを押下しました。

f:id:front-end:20190503170606p:plain
Windows Server 2016作成!

(3) 基本情報の入力

基本情報を入力します。
今回はとりあえずテスト的にあまり中身にはこだわらずに入力していきます。

f:id:front-end:20190503173414p:plain
基本情報の入力

確認および作成ボタンを押下すると検証が開始され、
検証がOKとなると作成ボタンが押せるようになります。
作成ボタンを押下します。

f:id:front-end:20190503225708p:plain
入力情報の確認

(4) 仮想マシンのデプロイ

作成ボタンを謳歌すると、デプロイが開始されます。

f:id:front-end:20190503225536p:plain
デプロイの実行

開始された時点で料理を始めてしまったので、どれくらいかかったのか覚えていないのですが、 完了したらこういった画面となります。

f:id:front-end:20190504043558p:plain
デプロイ完了

ダッシュボードを開き、設定した仮想マシン名をクリックすると、仮想マシンの情報が表示されます。

f:id:front-end:20190503225333p:plain
一応起動していたのですが、停止してます。

5. 仮想マシン作成完了!

以上、仮想マシンの作成でした。
話には聞いてましたけど、早いですね。構築。
VM WareとかVirtual BoxとかXen Serverを使って、Linux系のOS突っ込むの、こんなにさくっとできなかったけど。。
と驚きを隠せませんでした。 次はこの仮想マシンに色々なサーバー建てていけたらと思います。