Visual Studio Live Shareを試してみた

[速報]「Visual Studio Live Share」パブリックプレビュー開始。リモートでのペアプログラミング、ペアデバッギングを実現。Build 2018

マイクロソフトがVS Codeでペアプログラミング環境を構築できる拡張機能をパブリックベータ開始を発表した。

リモート環境同士のコードの同時編集にはこれまで、Cloud9がAWS化したり、PaizaCloudなどのIDEが登場していたが、VisualStudio Code上で利用できるこの機能拡張の登場でより強力なIDEがリモート学習などのシーンでも活躍することが容易に想像できる。

インストール方法

VisualStudio Codeの拡張機能タブで検索窓に「Visual Studio Live Share」と入力すると「VS Live Share」と表示されるので、インストールをクリックする。

※今回検証のため、手元の二台のPC上のVS Code両方に拡張機能をインストールしました。

再読み込みをクリックした後、ステータスバーの「Sign in」をクリックしてログインする。

Microsoftアカウントか、Githubアカウントを利用できる。

コラボレートする準備ができました。

ログイン後、コラボ元のVS Codeからステータスバーの「Share」をクリックしてセッションを作成する。

「Share」クリック直後、InfomationメッセージとしてFirewallを超えて自動で接続する旨のメッセージが表示されるので「OK」をクリック。

 

その直後に、接続元のVS Code側にクリップボードに招待リンクを含んだURLがコピーされたことを知らせるメッセージが表示されます。

以下のようなURLがコピーされているので、Slackやメールなどで、コピーされたURLを接続先のPCに送りましょう。

「https://insiders.liveshare.vsengsaas.visualstudio.com/join?xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx」

このURLをブラウザで開くと、コラボレーションのためのセッションに参加した旨が表示され、VS Codeが自動で開きます。

開いた後は、同じコードを開いてどこに相手のカーソルがあるかわかるので、同時に同じ行を編集することもできる。

▲kenta fujiwara アカウントによる編集行を、▼ fk_2000 アカウントによって追記している様子。※ステータスバーには自身のアカウントが表示されているので、相手が何を書いているかリアルタイムで把握できる様子がわかる。

また、VS Live Shareには、相手PCに自PCのポートを共有させる「Share Server」の機能が備わっている。すなわち、一緒に編集したコードを接続元のローカルWebとしてブラウザで参照できるので、開発環境として同じPCのWebサーバを使ったデバッグが可能となっている。

 

ステータスバーの自身のアカウント名をクリックすると、接続中のコラボレーターに対して何を行うかのメニューが現れる。

その中から「Share Server」をクリックすると自PCのデバック用のWebアドレスの入力が求められる。(ここでは仮に「localhost:80」を入力した)

入力後、Enterを押すと、コラボレーションセッションにローカルTCPが公開された旨を示すメッセージが表示され、接続先から接続元のWebサーバに接続でき、あたかもローカルWebを表示するようにデバッグできる。

他にも、ターミナルを共有したり、3人以上招待したるすることもできるが、ここでは省略する。

まとめ

接続元のVS Codeでワークスペースにフォルダを追加しておくことで、Share時にワークスペースごと共有することとなるが、接続元のワークスペースから削除すると下記のメッセージが表示され、コラボレーションのセッションごと切断される。チャットツールなどで連絡しながら作業を行っていれば突然切断となっても対処にしようがあるが、編集中の状態が保障できな状態にもなりかねないので、コラボ接続中のワークスペースの取扱いには注意したい。

参考

すでにプレビューβ中に試している記事がQiitaにあった。

Visual Studio Live Share preview をつかってみる

 

Scrimbaというサービスがやべー

https://scrimba.com/

なにがやばいって、VRが二次元から三次元への進化だとして、Scrimbaは高さじゃなくて時間軸を追加したサービスってこと。

これまで、プログラミングを動画で学習するなら、スクーやドットインストール、Paizaなどを参照したり、

それらを学習した後は、コードを書いてすぐに試したいので、JSFiddlejsdoitCodePenなどでさくっと試した。

ところがScrimbaというサービスは動画参照中に、プレイグラウンドを開くことができ、ひととおり動きを確認したら、また中断したところから再生ができるサービスなのである。

トップページにはコンテンツが並ぶが、「Staff picks」にスタッフのおすすめが並んでいる。

このサービスを知るきっかけとなったQiita記事が以下である。

Bootstrap4をマスターしたいか? ならばこのコースを修めるがよい

チュートリアルや習得コースに向いたこのサービスならば、日ごろの学習コストを下げつつ、自身でもどのように習得したかのキャストをすぐに作ることができそう。

あとは、これらのキャスト編集情報をgithubなどにpushできて、履歴情報やプロダクトのサービス向上につなげられるのではなどと妄想がたいへん捗った。

 

参考

CodePenだけじゃない!ブラウザー上でサクッとコードを書けるプレイグラウンド7選

yoursはじめてみた

yoursはじめてみた

yours.orgとは?

これから流行るであろう マイクロペイメントプラットフォーム です。
日本ではnote.muとか有名ですが、ブロックチェーン技術でペイメントできるのがyoursです。
簡単に有料コンテンツが作成できるのでこれから注目です。

 

Mediumも有料コンテンツが作れるようになるとうれしいのに。

春からおすすめのブログサービス

2018年の春がはじまりました。新社会人の方におすすめするブログサービスをご紹介させていただきます。
おすすめ順に書いていきます。

1. Medium

URL

https://medium.com/

メリット

  • なんといってもおしゃれ
  • 独自ドメインも対応している。

デメリット

  • デザインが変えられない。

2. WordPress(ここ)

URL

配布版WordPressSaaS版のWordPress

メリット

  • プラグインが充実。デザインテーマも豊富。
  • なんといってもソフトウェアとして配布されているので、オンプレでもクラウドでも自分で構築できる。
  • WordPress.comのSaaS版もある。
  • わたしはAWSに建てて、 Pluginの「Medium WordPress plugin」を使って上のMediumに同時投稿しています。

デメリット

  • メリットが大きすぎてなかなかデメリットを見つけられません。
  • 構築するにはPHPやその他の知識と経験が必要。(かんたんに立ち上げられるスクリプトも配布されている)
  • 普及しすぎていて脆弱性を狙う悪意のある攻撃が存在している。

3. note

URL

note ――つくる、つながる、とどける。

メリット

  • 有料記事として投稿できる。(マネタイズ化がシンプル)
  • 投稿操作がMediumに似ている
  • コードが書けるようになった

デメリット

  • デザインが変えられない。

4. LineBlog

URL

LineBlog

メリット

  • 投稿前に表示フォントが選べる
  • スマホアプリからしか投稿できない(スマホからしか投稿できないのでよりリアリティが増す)

デメリット

  • PC版が無い

5. はてなブログ

URL

http://hatenablog.com/

メリット

  • 独自ドメイン、はてなキーワード、はてなスターなど機能満載

デメリット

  • 強いてあげると「はてなー」などと揶揄される

番外編