まだプログラマーですが何か?

プログラマーネタとアスリートネタ中心。たまに作成したウェブサービス関連の話も http://twitter.com/dotnsf

タグ:programming

このエントリの続きです:
Visual Studio Code Live Share でモブプログラミング(1)


前回 VSCode LiveShare を使うまでの準備段階とその手順を紹介しました。今回は実際に VSCode LiveShare を使ってモブプログラミングを行うまでの手順と、使っている時の様子を紹介します。

なお VSCode LiveShare を使う場合、開発画面を提供する人(ホスト、1名)と、ホストの開発画面を使って開発に参加する人(ゲスト、1名以上)それぞれで手順が異なります。以下順を追って紹介しますが、ホスト側の手順はこの色で、そしてゲスト側の手順はこの色でそれぞれ紹介していきます。


【ゲストの招待】
まずはホストとなる人からゲストとなる人へ、Live Share に参加するための URL を送信する必要があります。このホストとなる人の VSCode の環境(ファイルシステム、ファイル)を共有することになる点にご注意ください。この手順は前回紹介した準備手順が全て完了している状態から続けて以下を行います。


まず VSCode を開き共有するプロジェクトを1つ作成して開きます。ここで開いている画面を共有することになる点に注意してください。したがって関係のないプロジェクトフォルダが含まれるような画面ではなく、共有するプロジェクトフォルダだけが開いているような画面にしておくのがよろしいと思います:
2020042008


なお、この例ではフォルダの中に README.md ファイル1つだけが入っている状態からスタートする例を紹介します:
2020042105



プロジェクトの準備ができたら VSCode 画面左下の、ログインしている自分のアカウント名をクリックします:
2020042006


メニューが表示されたら一番上の Invite Others(Copy Link) と書かれた部分をクリックします。これで招待用 URL がクリップボードにコピーされた状態になります:
2020042007


そのままメールやメッセンジャーなどを使って、招待するゲストの人達全員に先程コピーした内容をペーストして共有 URL を送信します:
2020042009


ホスト役の人の作業はいったんこれで完了です。次はゲスト役の人達の作業となります。


【ゲストとしてプロジェクトに参加】
ゲスト役の人達は上述の最後の手順で送信された共有 URL 付きのメッセージを受け取ったら、そのリンクをクリックします:
VSCLS00



ゲストのログインが環境していない場合、ウェブブラウザで VSCode LiveShare を使うためのアカウントログインを行います。以下は GitHub を使って OAuth ログインする場合の画面です。必要であればアカウントにログインします:
VSCLS01


そして OAuth を行うため、内容を確認して Authorize ボタンをクリックします:
VSCLS02


ログインが完了すると以下のようなダイアログが表示され、Visual Studio Code が選択されていることを確認して「リンクを開く」ボタンをクリックします:
VSCLS03


この際に Live Share プラグインがこの URI を開くことを許可するか?と聞かれたら、OK をクリックして許可してください:
VSCLS04


またゲストが Windows を使っている場合、初回だけは Visual Studio Live Share Agent の実行をファイアウォールに許可する必要があります。以下の画面が出たら「アクセスを許可する」を選択してください:
VSCLS05


ここまで成功すると、ゲストの VSCode でホストの VSCode プロジェクトが共有されている状態になります。ホストが共有したプロジェクトをゲストの VSCode 内でも開いていることを確認してください:
20200421001


【ゲストがプロジェクトを編集】
ここから先の作業はホストでもゲストでもいいのですが、今回はゲストがプロジェクトを中心的に作っていくものとして紹介します。というわけで引き続きゲスト側の作業となります。

ゲストの VSCode 内で新規にファイルをプロジェクトに追加したり、そのファイルを編集したり保存したりすることができます。これらの変更はあくまでホストのファイルシステムに対する変更ですが、その作業はゲスト側から行うことができるようになっています:
20200421002


なお、このゲストが行った変更はホスト側の VSCode でもリアルタイムに変更が反映されます:
2020042101


更に同時にホストも、また他のゲストもプロジェクトの同じソースコードに対して変更を行うことが可能です。Google Drive の同時編集機能を使ったことがある人であれば、あれのソースコードプロジェクト版だと理解いただくとわかりやすいかもしれません。また他のファイルを編集することも可能ですが、共有される画面はあくまで1つ(ホストのもの)であることに注意してください。

このような共同作業を通じてプロジェクトを作っていきます。


【ターミナルの共有】
ある程度プロジェクトができあがると動作確認をしたくなります。VSCode LiveShare ではホストのターミナル(Shell や PowerShell)を共有してコマンドを実行することで動作確認作業を共有することが可能となっています。

実際にターミナルを共有するにはホスト側で再度画面左下の自分の名前をクリックし、表示されるメニューから Share Terminal を選択します:
2020042102


ターミナルに対するゲストの権限を指定します。"Read-only" はターミナル自体はホストだけが作業をして、ゲストはターミナルの様子を見ることができる、というモードです。一方 "Read/write" はゲストもターミナルに対してコマンドを実行することができるモードです。ターミナルはかなり強い権限で実行され、想定外のコマンドを指定されてもそのままホストのPC上で実行してしまうので、よほど信頼できる相手と共有している場合のみ後者を選ぶべきだと思います:
2020042103


ターミナルを共有すると、ホストの PC が Windows であれば PowerShell、それ以外であれば Shell 画面が VSCode 画面内に表示されます(ターミナルアプリを WSL などにを変更することも可能です 参照):
2020042104


同時にゲストの VSCode 画面内にも同じターミナルが表示されます。モードによってはゲストからこのターミナルにコマンドを指定して実行することも可能です:
20200421003


このターミナルから Node.js などのコマンドを実行するなどしてテストや動作確認を行い、その結果を全員が共有することが可能です。



と、このような形で VSCode LiveShare を使うことができます。実際にはこの機能とウェブ会議システムを併用して、ホスト役の人が行う内容をプレゼンテーションと音声で共有しつつ、実際のプログラミング時には VSCode LiveShare の画面を共有する形でモブプログラミングを進める、といったことができそうです。

この方法であれば、従来の画面共有だけを使ったモブプログラミングと比較して、エラーが発生した時の内容を共有しやすいという大きなメリットが挙げられます。ホスト役でない人の PC で発生したエラーの内容をホストやサポート役の人が把握するのが難しいのですが、VSCode LiveShare を使っていると、エラーの様子も共有されることになり、その内容からどこをどう直せばよいか、というアドバイスもしやすくなると考えられます。


普段のエディタは Vi(m) か ATOM(+vi プラグイン)を気に入って使ってます。軽量で使いやすく、vi の慣れたキーバインドで使えるという点にメリットを感じています。 が、最近になって Visual Studio Code(以下 VSCode)を vi キーバインドで使うという選択肢も気になっています。特に後述する Visual Code Live Share(以下 VSCode LiveShare)は、今日のようなオンライン中心のイベントや勉強会で使える共同開発ツールとしてポテンシャルを感じています。そんなわけで、このブログでも VSCode LiveShare を使ったモブプログラミング(共同開発作業)を紹介しようと思いました。まず今回は環境準備の説明です。


【前提条件】
Windows 7 以上、64 bit Linux、 または macOS 10.13 以上 を使っている必要があります。VSCode 自体は Raspberry Pi などの他環境向けにも提供されていますが、後述する VSCode LiveShare プラグインは動作環境が限られているようで、現時点(2020/04/20)では Windows, Linux または macOS を使う必要があるようです。


【VSCode のインストール】
VSCode の公式サイトから VSCode をダウンロードして(普通に)インストールしてください。なお、VSCode LiveShare を使う場合はバージョン 1.22 以上が必要です。


【VSCode LiveShare プラグインのインストール】
VSCode LiveShare は VSCode を使ったコーディングの共同作業を行うツールです。それを実現するための拡張機能が VSCode LiveShare プラグインです。このプラグインは共同作業におけるホスト役の人(自分のコードを他の人に編集させる人)だけでなく、ゲスト役の人(他の人のコードを編集する人)の環境にも両方にインストールが必要です。

インターネットに接続された状態で VSCode を起動し、画面左のメニューから Extension タブを選び、検索フィールドに Live Share と入力して検索します。その名の通りの Live Share プラグインが見つかるのでこれをインストールします:
2020042001


プラグインのインストールの最後にリロードを促されるのでリロードします。この後バックグラウンドで依存ライブラリのインストールが始まり、完了まで少し待ちます。

プラグインのインストールが完了すると画面左下が以下のようになり、Live Share が利用可能になっていることがわかるようになります:
2020042002


なお、VSCode に(日本語化パックや VIM など)他のプラグインを使う場合はこのタイミングで必要なものを導入しておいてください。


【ログイン】
VSCode LiveShare で共同作業する際、「誰が」コードを編集しているのかがわかりやすいようにログインする必要があります。VSCode LiveShare の場合、Microsoft アカウントまたは GitHub アカウントで OAuth 認証を行う必要があります。以下は GitHub アカウントを使ってログインする例を紹介します。

上述画面の Live Share と白抜きで表示されている部分をクリックしてログインします。下図のような表示になるのでログインに利用するアカウントを選んで進めます(以下は "Sign in with GitHub" を選んだものとして説明を続けます):
2020042003


選択したアカウントの OAuth 認証の画面が表示されます。内容を確認して、許可(Authorize)するボタンをクリックします:
2020042004


プログラムを起動するダイアログが表示されたら、"Visual Studio Code" が洗濯されていることを確認して「リンクを開く」をクリックします:
2020042005


再び VSCode の画面に戻ります。この時点で画面左下にログインしたアカウントのユーザー名が表示され、VSCode LiveShare を利用するための準備も完了しています:
2020042006


これで VSCode LiveShare を使う準備ができました。次回はこの続きで実際に VSCode LiveShare を使う様子を紹介する予定です。


(2020/04/23 追記 続きはこちら)
http://dotnsf.blog.jp/archives/1077356596.html


先日の IBM XCITE イベントの中で、IBM BlueMix のアプリケーション開発コンテストの開催が発表されています:
IBM BlueMix Challenge
2014052501



このブログでも何度か触れてきましたが、IBM BlueMix は、いわば「IBM 版 CloudFoundry」です。IBM の提供するクラウド上に CloudFoundry 環境が構築されており、現在は無料ベータ版という扱いで誰でも利用することができるようになっています。素の CloudFoundry と異なるのは IBM ソフトウェア製品も利用可能なサービスとして統合されているので、BlueMix 上で Java アプリケーションサーバーや DB2 を始めとするデータベースサーバーなども利用できるようになっている点です。BlueMix 上で稼働する IBM 製品については原則的に IBM からの製品サポートが提供され、それ以外のものについても一部はサードパーティからの製品サポートが提供される、という形態になっています。

この BlueMix 環境上でアプリケーションを開発/構築するというコンテストです。なお、コードそのものの良し悪しだけで判断されるわけではなく、用意されたサービスをどのように組み合わせて、どのようなイノベーションを実現するか、という総合的な判断に基づくコンテストのようです。

気になる商品は Mac Book Pro やルンバといった、デベロッパー(やその家族)が喜びそうなものが用意されています。実際にはこれらの中でも上位機種が準備されているとの噂も・・・


参加する場合、6月30日までにそのための登録申請を行う必要があります。アプリケーションそのものは申請の段階で開発されている必要はなく、アプリケーションの提出期限は8月12日となっているようです。


注目の PaaS 環境である Cloud Foundry のアプリケーションを開発するいい勉強の機会にもなるし、あわよくば Mac Book Pro も手に入れるチャンスです。普通にアプリを開発できれば BlueMix(Cloud Foundry)対応はさほどハードルが高いとは思わないので、多くの開発者にチャンスがあると思います。


「興味はあるけど、まだあまりよく BluxMix(Cloud Foundry) 分からないんだよなあ・・・」という方は、拙作ですが、以下の僕のブログエントリがお役に立てれば幸いです:

- BlueMix を使う
- BlueMix のダッシュボードとデータベースサービスを使う
- BlueMix 上で PHP アプリを動かす
- BlueMix を使ってみて
- BlueMix で Twilio を使う
- BlueMix 向けに(Java)アプリを開発するといいことはあるか?
- BlueMix 向け Twilio アプリのサンプル
- BlueMix 開発コンテストが開催されるらしい
- BlueMix のデータストア比較
- BlueMix の cf コマンド
- BlueMix 上の DB2 をハック
- MySQL が 3306 番以外のポートで動いている時の WordPress 設定
- モバイル向けdeveloperWorks ページを作ってみた





 

・・です。

IBM 開発コンテスト「IBM BlueMix Challenge」開催


詳細は5月21日~22日開催の「IBM Software XCITE Spring 2014」で発表されるらしいので、詳しい条件や規定、基準、そして気になる賞品(笑)については後日発表を待ちましょう。

まあ、でも、BlueMix のサーバーやサービスを使って面白いアプリを作りましょう、というものだとは思います。このブログでも紹介しているように、色んなプログラミング言語を選べるし、サーバー構築は簡単だし、敷居はそんなに高くないと思ってます。また以前に CloudFoundry 環境で作ったアプリがあれば、それを持ってきちゃえば動くかも(苦笑)しれないので、そういう手もあるのかな。

先日のこのブログエントリの続きであり、こちらのブログからのリレーブログでもあります。

ちょっとした隙間時間や空き時間をプログラミングに活用したい、そんな想いから先日の「通勤プログラミング」を書きました。 今回のテーマはその上級編、「脳内プログラミング」です。
nonai


私は暗算とか苦手ですが、あんな感じなんでしょうかね。与えられたテーマに対してプログラミング環境や(ケースバイケースですが)紙&鉛筆もなしに、頭の中だけでアルゴリズムを組み立ててコードに書き起こしていく、という作業です。

私自身、コードに書き起こすとなるとそれなりの準備というか道具が必要になりますが、「ランニングしながらアルゴリズムを考える」のは結構やってます。走る苦痛を妄想でごまかしているだけですけど。 あと会議中の「明らかに自分は関係ないなあ・・」という話題の時も、脳内ではシステムの設計してたりアルゴリズムを考えたりしてることはあります、はい。

悪く言えば職業病なんでしょうけど、よく言えば刺激的で楽しいから自然とやってる、という感覚です。その意味ではソリティアとかクロスワード、クイズに近い感覚なのかもしれません。


で、そんな脳内プログラミングですが、「そもそも何をプログラミングするの?」という方もいると思います。 もちろん脳内でできる範囲のプログラミングなので大規模な内容のは無理でしょう。上でも触れましたが、ちょっとしたクイズ感覚で空いた時間を健全な妄想で過ごす、というものです。この「ちょっとしたクイズ感覚」になるようなプログラミングのネタを探すのが簡単ではないのかもしれません。


で、そんなみなさんに私から提案。「CodeIQ やってみませんか?」

CodeIQ(コードアイキュー)はエンジニア向けのプログラミングチャレンジサイトです。与えられたお題に(多くの場合で)プログラミングで回答します。プログラミング言語の条件があるものやないものもあり、単に解ければいいものだったり、その実行速度が求められたり、なるべくコンパクトなコードに仕上げる必要があったり、、、と多くの問題から自分が解けそうなものを選んで挑戦できます。その結果フィードバックを見て、エンジニアとしての自分のスキル確認もできます:
https://codeiq.jp/

各設問の難易度にもよりますが、CodeIQ の問題を解くこと自体は(回答条件を満たしているかどうかはともかく)かなり簡単だと思っています。出題内容そのものは覚えられる程度で、そのロジックを頭の中で考えて、で時間のある時にコードに書き起こす、と。言ってみれば「脳内プログラミングにピッタリ!」だと思っています。

以上、僕が少し関わっている CodeIQ の宣伝でした(笑)。









このページのトップヘ