Above & Beyond

日々のアウトプット記録

VS Code Conference Japan に参加してきました

11/21(土) は「VS Code Conference Japan」に参加しました。

オンラインでの開催なので、全国どこからでも参加可能。ありがたいことです。 量が多いので、資料とか拡張機能へのポインタだけ、纏めておきます。

f:id:kabukawa:20201122122850p:plain

vscode.connpass.com


目次


セッションの資料

タイトルと資料 講演者
オープニング
職業「戸倉彩」
【初級 / Beginners】
はじめての VS Code and Codespaces
speakerdeck.com
Nori Suzuki
【初級 / Beginners】
AI/MLエンジニアに伝えたい
令和時代のVS Code使いこなし術!
speakerdeck.com
もっちゃん / mochan_tk
【初級 / Beginners】
アプリ開発&チーム管理で役立った拡張機能など
www.slideshare.net
makky12
【初級 / Beginners】
Fortran が拓く世界、VS Code が架ける橋
www.slideshare.net
degawa
【初級 / Beginners】
Visual Studio Code 拡張機能の活用
~適切に組み合わせてマイクロサービスアプリ開発
全プロセスを一つのツールで管理してみよう!
www.slideshare.net
Shotaro Suzuki
【中級 / Intermediate】
Remote Development with Podman
speakerdeck.com
Shion Tanaka / 田中司恩
【上級 / Advanced】
最強の Dev Container を考える
docs.google.com
Atsushi Morimoto(@74th)
【LT】EmacsおじさんのVS Code挑戦記
[資料は公開されしだい追加します]
nakayoshix
【LT】VS CodeSQL クライアントになる ~ DBにVS Codeで接続する
github.com
まっぴぃ
【LT】お気に入り拡張機能について
www.slideshare.net
shiro-kujira
【LT】この日のために拡張機能を開発してみた(仮)
docs.google.com
Colloid
【LT】お勧めされたので REST Client を使ってみた
www.slideshare.net
放浪軍師
クロージング VS Code Meetup Organizer

セッション内で紹介されていた拡張機能

だいたい拾えていると思いますが、拾えてなかったらコメントなどで教えてもらえれば追加します。

marketplace.visualstudio.com この拡張機能を使用すると、開いたマークダウンドキュメントから直接reveal.jsプレゼンテーションを表示できます。

marketplace.visualstudio.com 選択した行をバナーに変換します-figletを使用してヘッダーにコメントします。 (コメントタグで自動的にラップされます!)

marketplace.visualstudio.com Visual StudioCode用のシンプルなテキスト読み上げ拡張機能

marketplace.visualstudio.com Remote-Containers拡張機能を使用すると、Dockerコンテナーをフル機能の開発環境として使用できます。

marketplace.visualstudio.com コンテナー、リモートマシン、またはWSL内の任意のフォルダーを開き、VSCodeの全機能セットを利用できるようにする拡張パック。

marketplace.visualstudio.com GitHubのプルリクエストと発行プロバイダー

marketplace.visualstudio.com Jupyterノートブックのサポート、Intellisense、デバッグなどをサポートするインタラクティブなプログラミングとコンピューティング。

marketplace.visualstudio.com GitHub Gistを使用して、設定、スニペット、テーマ、ファイルアイコン、起動、キーバインドワークスペース拡張機能を複数のマシン間で同期します。

marketplace.visualstudio.com お気に入りのツールを使って、リアルタイムの共同開発ができます。

marketplace.visualstudio.com インタラクティブマップビューでARMテンプレートをグラフィカルに表示

marketplace.visualstudio.com Swagger Viewerを使用すると、Visual Studio Codeに入力するときに、Swagger2.0ファイルとOpenAPIファイルをプレビューして検証できます。

marketplace.visualstudio.com アマゾンウェブサービスを操作するための拡張機能

marketplace.visualstudio.com ESLint JavaScriptVSCodeに統合します。

marketplace.visualstudio.com prettierを使ったコードフォーマッタ

marketplace.visualstudio.com Grammarlyを使ったVisual Studio Codeの文法チェック。

marketplace.visualstudio.com ソースコードのスペルチェッカー

marketplace.visualstudio.com Visual Studio Codeに組み込まれたGit機能をスーパーチャージ - Git注釈とコード・レンズを使ってコード・オーサリングを一目で可視化したり、Gitリポジトリをシームレスにナビゲートして探索したり、強力な比較コマンドを使って価値ある洞察を得たり、その他にも多くのことが可能です。

marketplace.visualstudio.com リポジトリのGitグラフを表示し、グラフからGitアクションを実行します。

marketplace.visualstudio.com Visual StudioCodeワークスペース内でExcelスプレッドシートCSVファイルを表示します。

marketplace.visualstudio.com この非公式の拡張機能は、Draw.ioをVSCodeに統合します。

marketplace.visualstudio.com VSCode内で16進編集を許可します

marketplace.visualstudio.com VisualStudioCode用のRESTクライアント

marketplace.visualstudio.com 構文の強調表示やエラー検出など、最新のFortran言語のサポート。

marketplace.visualstudio.com FORTRAN言語サーバーへのVSCodeインターフェース

marketplace.visualstudio.com fortranブレークポイントサポートを追加

marketplace.visualstudio.com Fortranフォーマッター

marketplace.visualstudio.com VisualStudioCodeのCMake言語サポート

marketplace.visualstudio.com SSHを使用してリモートマシン上の任意のフォルダーを開き、VSCodeの全機能セットを利用します。

marketplace.visualstudio.com ガッターとホバーで画像のプレビューを表示します。

marketplace.visualstudio.com ES6構文のJavaScriptコードスニペット

marketplace.visualstudio.com VSCode用のVueツール

marketplace.visualstudio.com Visual StudioCodeの豊富なGo言語のサポート

marketplace.visualstudio.com SpringBootアプリケーションを開発するための拡張機能のコレクション

marketplace.visualstudio.com コンテナ化されたアプリケーションの作成、管理、およびデバッグを容易にします。

marketplace.visualstudio.com Kubernetesアプリケーションを開発、デプロイ、デバッグする

marketplace.visualstudio.com vscode用のKibanaコンソールのようなElasticsearchクライアント

marketplace.visualstudio.com YAML形式でスニペットを編集する

marketplace.visualstudio.com Microsoft SQL Server、Azure SQLデータベース、SQLデータウェアハウスをどこでも開発できます

marketplace.visualstudio.com Azureでグローバルに分散されたマルチモデルデータベースを作成、参照、更新します。

marketplace.visualstudio.com どこでもPostgresを開発する

marketplace.visualstudio.com vscode用のMySQLクライアント

github.com 退勤のときに音楽を流す

Twitterのタイムラインで紹介されていた拡張機能

marketplace.visualstudio.com VSCodeのMarpMarkdownで記述されたスライドデッキを作成します。 スライドデッキライターとしてVSCodeを強化します。

marketplace.visualstudio.com Visual StudioCodeの豊富なPlantUMLサポート。

marketplace.visualstudio.com 選択したテキストをすばやくbase64エンコード/デコードします。

marketplace.visualstudio.com 選択したテキストをすばやく変換できるVisualStudioCodeの拡張機能

marketplace.visualstudio.com vscodeに移植されたMarkdownPreviewEnhanced

marketplace.visualstudio.com クロージングブラケットにブラケットヘッダーを表示します。

marketplace.visualstudio.com Excelデータをコピーし、Markdownテーブル形式に変換します

marketplace.visualstudio.com VSCode上のPrometheus'.rulesおよびPrometheus2'.rules.ymlファイルの構文のハイライトとスニペット

marketplace.visualstudio.com OracleDatabaseおよびOracleAutonomousDatabaseを使用してSQLおよびPL / SQLを開発する

marketplace.visualstudio.com SQLiteデータベースを調べてクエリします。


ツイート

ハッシュタグ #vscodejp で絞ると当日の雰囲気などもつかめるかと思います。 (そのうち公式の方が纏められるんではないかと思いますので、検索URLだけ貼っておきます)

twitter.com

当日の模様

カンファレンス開催に先立ち、プレイベントも開催されています。 こちらの動画を見てから本編を見ると、どういう想いで開催されているのかといったことも分かって二度美味しいと思います!


VS Code Meetup #7 - VSCodeConJPプレイベント

Youtube Liveでの配信で、動画も公開されています。参加できなかった方もこちらから是非! (6時間くらいありますけど)


VS Code Conference Japan

こちらはマイクロソフトVS Code Teamからのメッセージの動画です。


konichiwa VS Code Day

興味を持ったら、こちらのチャンネル登録もどうぞ!

www.youtube.com

重大発表!

f:id:kabukawa:20201122122902j:plain


まとめ

で、自爆ツイートなんですが、こんなことを呟いたので、次回の勉強会でLTすることになりました。

お時間があればぜひこちらもよろしくお願いします!

vscode.connpass.com

ありがとうございました!

家のネットワーク再構築(だいたい完了)

あれから色々要らないものを捨てつつ再構築して、だいたいこんな感じになりました、という内容です。

前回までのあらすじ

前回の記事を読んでください(ぇ

kabukawa.hatenablog.jp

2020年9月末の構成

前回書いたものとは少し変わっています。

f:id:kabukawa:20200928232825p:plain

変わったところ

IP電話が復活

プロバイダの提供していたIP電話サービスが無料とか言っていたのに実はルーターのレンタル料金の名目で取られ続けていたことに腹を立て(爆)、配線の切り替えを期にIP電話の契約をやめました。そこで終わりにするつもりだったのですが、やはり家に固定電話が有ったほうが、という家族の声に押されて、月の基本料金が0円のIP電話サービスで電話を復活することにしました。

契約したのはこれ。昔はフュージョンコミュニケーションズという会社だったのにいつの間にか楽天傘下になっていて、楽天モバイルのサービスになっています。楽天かぁ、と思ったものの、実は昔スマフォに入れて使っていたことも有るので、まぁいっか、みたいな感じで契約。 ip-phone-smart.jp

ただ、昔登録したID(メールアドレスで登録)が消えていないらしく、再登録のメールが来ない。仕方ないのでサブ垢のメアドで登録してアカウント作成。 なお、契約するには電話認証が必要なので、電話がかけられる何かを持っていないと契約ができない模様。

クレカと電話があれば、だいたい30分もあれば契約自体は完了です。簡単。

で、電話をどうやってIP電話化するか。自分はこれを買いました。

本当は電話口は1個で良かったんですが、1個のやつが売り切れだった(注文したのに期日までに配送できないからとキャンセルされた)ので、仕方なく2個口に。2個のSIPアカウントを使えるようになっているだけで1このやつと機能は変わらないので、普通は1個でいいと思います(そっちのほうが安いし)

で、電話とこれを繋いで、その後でLANに繋げる。 実はこの製品、マニュアルすら入ってないという素人は相手にしないぞという圧の高いものなんですが、先人が色々試した結果の手順を公開してくれているので、機種名で検索すると手順が結構簡単に出てきます。自分は以下のページを見て、ほぼこの通りにやっただけで繋がりました。

seji-drive.com

月数百円の基本料金を払うことを考えれば1年位で元は取れるので、まぁ、悪くないかな、と思います。USから直接買うと5千円くらいで買えるようですが、日本で買えるやつは一応電源周りをPSE対応にしていたりするようなので、何か有ったときの保険、ということで納得してます。これで携帯ではない電話が家に復活しました。IP電話、固定で使う分には結構安定している感じなので、自分の部屋にもつけようかな、、、(今までは電話線の引き回しのことを考えて断念してた)

ファイルサーバー的なものを追加

自分で全然気づいていなかったのですが、Wi-FiルーターにUSBの口がついていて、USBメモリを挿すとSambaで共有ドライブとして使える機能がありました。早く言ってよ、と思ったものの、まぁ、ちゃんとマニュアル読まない自分も悪いか。。。

で、ディスクはどうするかって話ですが、古くなって使わなくなったスマフォに大容量のSDカードが付いているので、これを使えば良いじゃない、と。そんなにアクセス頻度は高くないし、所詮USB 2.0なのでアクセス速度もそんなに期待しなくていい。写真とかを撮りためるために64GBと128GBのSDがスマフォに入ったままなのを思い出し、中のデータをPCに移動してバックアップしてからフォーマット。取り敢えず64GBの方をルーターに挿しました。SDを直接させないので、以下のリーダーを購入。これにしたのは小さいので挿していることに気づかないくらい、ということ。せっかくSDカードで音のしない省電力なデバイスなので、ルーターのUSBポートにさりげなく突いている感じがいいかな、という理由です。

ちなみに、これがうちに到着するまでは100均のマルチカードリーダーを使っていたんですが、なんの問題もなく使えてて結構感動しました。サイズが少し大きめなので今回の用途では交代しましたが、普段遣いには悪くないな、と思います。

で、せっかく家の中にファイルサーバーができたので、今まで何も考えずにGoogleDriveに置いていたようなものを、家の中においておけばいいもの(マニュアルPDFや請求書PDF、給与明細PDFなど)をそこに置いて、GoogleDriveには家の外でもアクセスしたいものを置くように変えています。写真はGooglePhotosに上げれば良い(高画質モードであれば容量は無制限になる)ので一旦SDカードに全部移して、家の中だけで共有する方法を考えています。こうやって整理してみると、色々無駄なことが多かったなと改めて気づいた次第。

ところで光配線化してどのくらいの速度になったの?

0時くらいの、そこそこ回線が重くなる時間でこんな感じです。

[f:id:kabukawa:20200929001842p:plain:w300px]

朝は350M位出ます。時間帯によって波があるものの、以前は85M位が最高だったので、数字だけ見れば3倍から4倍位になっています。 体感としては、速くなったというよりは遅くなってもそんなにイラッとはしない感じ、と言えば良いですかね。そんな感じです。

まとめ

何もまとめることはないですが、単に速くなったネットワーク、だけじゃない何かを色々得られた気がしてます。 うん、そういうことにしておこう。

家のネットワークを再構築している

タイトルの通りなんですが、家の中のネットワークが結構構成が古くなってきたのと、WFHで家から接続する回線の帯域が結構大事になってきたので、再構築をしています。

2020年8月より前の状態

家の中までの回線はフレッツのマンションタイプ(VDSL配線)なので最大100Mbps(実際は機器の性能も有るのでいいとこ90Mbpsというところ)。 ルーターVDSLモデムはNTTのレンタル品をずっと使っています。 家の中はPCが増えたりする度に少しずつ追加したりしながら構築してきたので、去年までは100Mbpsの有線+無線アクセスポイント2台の構成でした。

ルーターの3つの口は100Mbpsなんですが、そろそろギガビット化したいよねと思い立ち、その先(家の中)は去年末にギガビット化しています。

設置場所 機器
リビング側Wi-Fiアクセスポイント
リビング側スイッチングハブ
書斎側Wi-Fiアクセスポイント |

自分は以下の図で言う書斎で仕事をしており、ルーターのあるリビングから15mのLANケーブルを自分で張ってます。 コレ自体は今の家に引っ越してからずっとこのままですね。 自分では普通だと思っているけど、こういう構成は逸般の誤家庭、に入るのかな。

f:id:kabukawa:20200906221236p:plain

で、今回の再構築のきっかけですが、やっぱりWFHですね。 仕事の事情で家から会社のPCにリモートデスクトップ接続せざるを得ないのですが、PPPoE接続でフレッツの網終端装置の混雑などに左右されやすく、日によって使うに耐えないこともありました。 なので、まずは速度が落ちるのを回避したい、ということで外との入り口をIPoE化したかったので、そこから着手。

2020年8月の構成

幸い、プロバイダのOCNはIPoE接続オプションを6月から無料提供していて、IPoE接続できるルーターがあればすぐにでもIPoE化できそう。 ところが、OCNはDS-Liteとかではなく独自のOCNバーチャルコネクトというのを採用しているので、これに対応したルーターが意外に限られる事が発覚。 あまりお金はかけたくないので、IIJ mioのサプライで以下のルーターを購入。

IIJ mioのサプライで買ったのは、価格が一番安かったのと、プロバイダの乗り換えも考えた時にIIJで売っているやつなら大丈夫では?という期待から。 さてこれでめでたしめでたしとなればよかったんですが、もちろんそうはならなかったのです。 実はIPoEにしてしまうと、OCNが会員向けに提供しているOCNドットフォンというIP電話が使えなくなるのです。 急に切り替えると、固定電話として使っていた番号の変更通知をいろいろなところに出さないといけないので、家族から反対をされました。 さて困った。ということで、以下のような構成に。

f:id:kabukawa:20200906222519p:plain

VDSLモデムとルーターの間にスイッチングハブを噛まして、IP電話用に古いルーターを残しつつ、外への接続は新しいルーター経由でという形。 これで両方のニーズを無理くり満たす構成になりました。噛ませたのはこのハブ。ギガビットでそこそこ安い金属筐体で5口のやつ。

ひどいときは10Mbpsを切ることがあった接続速度も、IPoE化によって安定して80Mbps以上で繋がるようになりました。 これで自宅側回線起因での速度低下に悩まされることはなくなりました。 (勘のいい人は気づいているかもしれないけど、会社側の回線速度も上がらないと効果は半減なんですけどね)

2020年9月末の構成(予定)

で、残っていたVDSL配線による100Mbps縛りも、7月からNTTの工事費が無料になるキャンペーンが始まっているので、光配線化をすることにしました。 うちは古い団地なんですが、分譲なので宅内の回線を光配線にするのに誰かの許可を得る必要もなく、ここは割とサクッと決まりました。 家族を説得してIP電話も廃止して良いことになり、ネットワークのギガビット化もあと少しで完成です。 (下の図のVDSLモデムはホームゲートウェイに変わる予定ですが、ブツが無いので絵は変えてません)

f:id:kabukawa:20200906224745p:plain

これに向けて、家の中に張り巡らせていたLANケーブルもカテゴリ7まで上げて、高速化に備えたものにしています。

部屋と部屋を結ぶやつは壁の色を考えて白の15m。(結局配線カバーに入れちゃったので色は関係なかったんだけど)

ルーター間とかPCとの接続は黒を選択。2m、3mあたりで配線を取り回し。

古いPCをごっそり廃棄したので、100M接続じゃないと駄目なのはFireTV、テレビ、複合機くらい。 この辺も次の買い替えのときには新しい環境に合うように変えていかないとね。

おまけ

今回のネットワーク図はVSCodeに以下の拡張を入れて書きました。

marketplace.visualstudio.com

デフォルトでは画像ファイルにエクスポート出来なかったので、以下のページに書かれている変更をしています。

qiita.com

アイコンが統一感がないものが多かったりするものの、慣れれば結構便利ですね、これ。