【VSCode】Live Shareの導入と簡単な使い方

　VSCodeにはLive Shareという拡張機能があります。

　これを使えば画面共有などが簡単にできるので、今回はその導入方法と簡単な使い方の説明をしていきます。

　では始めます。

１：Live Shareをインストールして使えるようにする
　VSCodeを立ち上げ、左側の拡張機能アイコンをクリックして検索欄に「live share」と入力して出てきた一番上のものをインストールします。

　次にLive Share Extension Packもインストールします。

　上記のインストールが終了したら、VSCodeを再起動させます。

　再起動後、VSCodeの左下の部分に「Live Share」という項目が追加されているのでここをクリックします。

　するとブラウザが立ち上がり、以下のようにMicrosoftのアカウントかGithubのアカウントでのサインインの画面になるのでどちらか選んでサインインします。

　Microsoftアカウントでサインインした場合は以下のような画面になるので「はい」のボタンをクリックします。

　サインインが完了したら以下のような画面になるのでブラウザを閉じます。

　これでVSCodeでLive Shareを使う準備は完了です。
　

２：Live Shareのセッションを開始する
　準備ができたのでLive Shareを実際に使っていきます。

　使い方としては最初にVSCodeの左下にある「Live Share」ボタンをクリックします。
　

　初回起動時には以下のようなメッセージが出る場合があるので「OK」をクリックします。

　共有したいフォルダかワークスペースを選択して開きます。

　すると左下に以下のようなメッセージが出ます。この時点でセッション用URLがコピーされていますが、もう一度コピーしたい場合は「Copy Again」ボタンをクリックします。

　ちなみにセッション用URLは以下のようになっており、毎回別のURLになります。

https://prod.liveshare.vsengsaas.visualstudio.com/join?XXXXXXXXXXXXXXXXXXX

　このURLをチャットなりメールなりで共有したい人に伝えます。

　セッションに参加する人はこのURLを使って参加します。

　セッションを終了させたい場合は、以下の赤枠のボタンを押すと終了できます。

３：Live Shareのセッションに参加する
　２でセッションURLを共有された側は、そのURLのブラウザで開きます。

　するとページが開いて以下のようなポップアップが出るので「Live Share for VSCode.appを開く」をクリックします（画像はMacOSの場合）。

　VSCodeが立ち上がってしばらく待つとセッションに参加できます。

　以上がLive Shareの導入と簡単な使い方になります。

　セッション中は参加している全員がファイルを編集したり編集した箇所を確認できるので、リモートでのペアプログラミングもできてとても便利です。

おまけ：Live Shareのボタンを押してエラーになる場合
　Live Shareのボタンを押しても以下のようなエラーが出る場合があります。

　その場合は一度PC自体を再起動させてからVSCodeを立ち上げると直っている場合があります（自分は再起動でこのエラーが直りました）。
　

・参考資料

• VS Codeの神拡張機能「Visual Studio Live Share」のご紹介 | 技術は生もの

【映画鑑賞】海獣の子供の感想（ネタバレあり）

www.youtube.com

　STUDIO4℃と米津玄師の主題歌で話題の映画「海獣の子供」についての個人的な感想をつらつらを書いていこうかと思います（ちなみにこの記事を書いている時点で2回鑑賞しています）。また原作は未読です。

　基本的には「ネタバレを気にしない」方向でいくので注意してください。

　この記事で取り上げている画像は全て参考資料にある予告などからのキャプチャになります。

　では始めます。

１：作品の見方
　CMでは一般向けのエンタメ作品のような印象を受けますが、実際に鑑賞するとどちらかといえばアートに近い作品だと思う人が多いかと思います。
　一見すると難しいかもしれませんが作品のテーマだったり大事にしている部分については全てセリフで説明されているので、それらを拾っていけばなんとなくでも「こういう作品なんだな」と理解はできるかと思います。

２：メタ構造
　基本的にこの海獣の子供という作品はメタ構造になっています。
　祭りの時にデデのセリフであった「生物も宇宙も同じ、地球は子宮で隕石は精子」という言葉のように、主人公の琉花の日常と宇宙も繋がっているような構造になっています。そしてそれは琉花だけでなく、全ての生命についても同列に語られています。
　以下のシーンではクジラの白い斑点一つ一つが銀河のようにも見えます。作中にも「人間は宇宙」というような会話もあり、これは演出的にも生命の中に銀河があることを示していると思います。

　また1つの物事も2つの視点から描かれてもいます。
　死ぬことは生まれること、見つけることは見つけられること、食べることは受け継ぐこと。
　作中で「見つけて欲しいから光る」という内容のセリフが出てきますが、光ることで他の生物に気づかれ食べられてしまうこともあります。見つけられるということは、逆に食べられてしまうというリスクもあるということです。

　琉花が巨大クジラに食べられた体内で、タツノオトシゴの光を食べようと魚が群がってきたシーンもあります。

　もはや人でなくなった状態の海を目で見つけて、海が生み出す銀河を食べるシーンもあります。

　食べた者は食べられた者の命を受け継ぐこと。だからこそ作中に出てくる食事シーンは印象的に描かれており、祭りの最後で海の欠片である銀河を手にした琉花はそれを飲み込んだのだと思います。

　連綿と受け継がれる生命の壮大な物語の最後は、琉花の日常に戻ってきます。
　デデの「あなたはあなたで良い」という言葉を受け取った琉花は、怪我を負わせた相手と坂を登って向き合います。これは琉花も相手も「互いの気持ちに気づいた」からこそ、球を投げ返すというコミュニケーションに繋がったのだと思います。

３：テーマ
・「海で起きるほとんどの事は、誰にも気づかれない」

　予告に出てくるこの言葉もテーマの一つになっていると思います。
　誰にも気づかれない中でも海で行われている生命たちの活動は確実に存在しています。主人公の琉花も自分の気持ちが他人に気づいてもらえないことに悩みます。琉花は海と空と出会って自分と世界との関係に踏み込んでいくわけですが、
　琉花が水族館で海と出会うシーンでは、最初は海が映像に映っていません。琉花が「誰！？」とちゃんと相手を認識した時に初めて画面に海の姿が映ります。シュレディンガーの猫みたいに「琉花が海の存在に気づいた」から海が存在できたという映像的な演出なのではないかと思います。
「気づく、見つける」ことで初めて「存在」することがわかる。そしてそれを知ろう、理解しようとする、いわば人間だけでなく他の生命や宇宙といったものとのコミュニケーションも描いているのではないかと思います。

・「宇宙の内の1割しか人間は理解できていない」
　こちらは作中に出てきたセリフです。同じように「言葉にすると本来の気持ちがなくなってしまう、表現できない」というようなセリフも出てきました。
　風の音もクジラの音も気持ちそのままを伝えようとしており、言葉だけでは伝えられないものを伝えようとするいわばコミュニケーションの物語でもあると思っています。「見つけて欲しいから光る」というのも一種のコミュニケーションであり、繋がりたいから「存在」に「気づいて」欲しいのです。
　だからこそ琉花は冒頭で怪我を負わせた選手やチームメイト、先生、両親とのディスコミュニケーションから始まっており、海と出会うまでは光の当たらない日陰に隠れるような行動をしています。しかし最後には怪我を負わせた相手にちゃんとボールを投げ返すコミュニケーションをするようにまでなっています。

・「生命の衝動を瞠目せよ」

　予告にあるように宇宙の誕生までを想像させる祭りの映像はとにかく圧巻で、それこそ主題歌にある「大切なことは言葉にならない」映像の連続です。セリフはあまりなく抽象的な映像表現が多いですが、受精だったり受精卵の細胞分裂だったりと割とわかりやすい表現も多く取り入れられていました。
　生命が生まれるのと同じように宇宙や銀河も生まれている、そう予感させる壮大な映像が繰り広げられるその様はまさに生命の衝動と言える体験でした。
　そしてエンドロール後に描かれる琉花が母親と赤ちゃんのへその緒を切るシーン。「命を絶つ音がした」というセリフは母親のお腹の中という海から赤ちゃんを断ち切り（死）、新たに肺呼吸をする陸上の生命として産み落とされた（生）ということを表していると思います。出産と赤ちゃんの産声も身近な生命の衝動なのです。

４：その他気づいたところ
・琉花の膝の怪我
　冒頭で琉花も膝に傷を負ってしまい、それから何度か膝の傷に注目するカットが出てきます。これは琉花の心の傷も表しているような気がします。
　海に誘われて見た光る流星のシーンから少しずつ膝の傷が治っていき、空と出会う頃には完全に膝の傷が治っています。海と陸に出会うことで琉花の心の傷も癒えているという表現なのかもしれません。

・琉花という名前
　原作未読なので申し訳ないのですが、海と空が出てくるのにその間である「陸」が出てこないのはおかしいと思っていました。琉花という名前は「陸（りく）」を50音表で見て「り」を一つ下げて「る」、「く」を二つ上げて「か」にして女の子っぽい名前にしたのかな、とか思いました。

　以上、長々と書いていたら感想なのかなんなのかよくわからなくなってしまいました。

　とにかく感想を一言では言い表せないほどの内容と表現がものすごい映像で迫ってくる作品でした。個人的にはなんども見直したくなる作品だったので早くメディア化して欲しいですね。

・参考資料

• 【6.7公開】 『海獣の子供』 予告1（『Children of the Sea』 Official trailer 1 ） - YouTube
• 【6.7公開】 『海獣の子供』 予告2（『Children of the Sea』 Official trailer 2 ） - YouTube
• 米津玄師 MV「海の幽霊」Spirits of the Sea - YouTube

【ESP-32/Arduino】Windows10にESP-32の環境を構築する

　以前の記事でMacOSにESP-32の開発環境は作成しました。

• 【備忘録】ESP-32 DevKitCの環境構築方法 - ソースに絡まるエスカルゴ

　今回はWindows10に同じようにESP-32の環境を構築してみた備忘録になります。

　使用するESP32のボードは以下という前提で進めます。

• ＥＳＰ３２−ＤｅｖＫｉｔＣ ＥＳＰ−ＷＲＯＯＭ−３２開発ボード: 無線、高周波関連商品 秋月電子通商-電子部品・ネット通販

　では始めます。

１：Arduino IDEをインストールする

• Arduino - Software

　上記のページからArduino IDEをダウンロードしてインストールします。

２：Arduino IDEでESP-32の設定を行う
　あとの手順は以下のページにある通りに進めていけばよいです。

• arduino-esp32/boards_manager.md at master · espressif/arduino-esp32 · GitHub

　
　Stable release linkと書かれた部分のリンク(赤枠の部分のURL)をコピーしておきます(2019/10/21:リンクが変更になっていたので修正)。

　Arduino IDEを起動させて「ファイル」→「環境設定」を選択します。

　赤枠部分にコピーしたURLをペーストしてOKボタンをクリックします(2019/10/21:リンクが変更になっていたので修正)。

　その後「ツール」→「ボード」→「ボードマネージャ」を選択します。

　検索欄に「esp32」と入力して出てきたものをインストールします。

　INSTALLEDと表示されていればインストールが完了しています。

３：ESP-32にテストスケッチを書き込む
　２までの準備ができたら、USBケーブルを使ってESP32-DevKitとPCを接続します。

　Arduino IDEの「ツール」→「ボード」→「ESP32 Dev Module」を選択します。

　その後以下のようにアップロードスピードを設定し、接続しているESP32-DevKitのシリアルポートを選択します。
　

　以下のテストスケッチをコピペして保存します。

・serial_test.ino

void setup() {
  Serial.begin(115200);
}

void loop() {
  Serial.println("test");
  delay(1000);
}

　左上の矢印のボタンをクリックしてESP32-DevKitにスケッチを書き込みます。

　書き込みが終了したら左上のシリアルモニタのボタンをクリックします。

　アップロードスピードと同じ値に設定すると、1秒ごとにtestという文字列が表示されます。

　以上がWindows10でのESP-32の環境を構築する方法です。

　MacOSの時よりもスケッチを書き込む時間がかかるのがちょっと気になりました…。

・参考資料

• esp32-wroomDevkitCをarduino IDEでセットアップからサーボ駆動まで(Windows) - Qiita
• arduino-esp32/boards_manager.md at master · espressif/arduino-esp32 · GitHub

【python】Windowsにdlibをインストールする

　以前の記事でMacにdlibをインストールしました。

• 【python】MacOSにdlibをインストールする - ソースに絡まるエスカルゴ

　今回はWindowsでもdlibのインストールをやってみたのでその備忘録です。

　では始めます。

０：前提条件
　以下の記事を参考にしてWindowsにpythonとOpenCVを入れて使える状態にしておきます。
rikoubou.hatenablog.com

１：CMakeのインストール
　最初にCMakeをインストールします。

• Download | CMake

　CMakeのダウンロードページからインストーラを選択してダウンロードします（ここでは3.15.0の64bit）。

　インストーラを起動させて指示通りにインストールしていけばOKです。

　CMakeがインストールできたかはPowerShellを立ち上げ、以下のコマンドを入力します。

$ cmake --version

　エラーなくCMakeのバージョンが表示されればインストールできています。

２：Visual Studioのインストール
　次にCMakeのバージョンに合ったVisual Studioのコンパイラを入れる必要があります。
　１でCMake 3.15.0をインストールしていた場合は、Visual Studio 2019のコンパイラが必要になります。

• ダウンロード | IDE、Code、Team Foundation Server | Visual Studio

　個人利用なのでCommunityを選択してダウンロードします。

　インストーラを起動させて色々やっていくと途中で以下のような画面になりますが、コンパイラさえ入ればいいので「C++によるデスクトップ開発」にのみチェックを入れてインストールします。

　これでVisual Studio 2019のコンパイラが入ります。

３：pipを使ってdlibをインストールする
　ようやくdlibをインストールする準備ができたのでPowerShellを立ち上げて、以下のpipコマンドでdlibをインストールします。

$ pip install dlib

　インストールにしばらく時間がかかりますが、エラーなく終了していれば大丈夫です。

　PowerShellを立ち上げpythonでimportしてエラーが出なければちゃんとインストールできています。

$ python
>>> import dlib # ここでエラーがでなければOK
>>> exit()

おまけ：自分が嵌ったエラー
　dlibのインストールコマンドでエラーになる場合があります。
　自分の場合はCMakeもVisual Studioも入れているのに以下のようなエラーが出ました。

Collecting dlib
  Using cached https://files.pythonhosted.org/packages/05/57/e8a8caa3c89a27f80bc78da39c423e2553f482a3705adc619176a3a24b36/dlib-19.17.0.tar.gz
Installing collected packages: dlib
  Running setup.py install for dlib ... error
--- 中略 ---
    -- Building for: Visual Studio 16 2019
    CMake Warning (dev) in CMakeLists.txt:
      No project() command is present.  The top-level CMakeLists.txt file must
      contain a literal, direct call to the project() command.  Add a line of
      code such as
    
        project(ProjectName)
    
      near the top of the file, but after cmake_minimum_required().
    
      CMake is pretending there is a "project(Project)" command on the first
      line.
    This warning is for project developers.  Use -Wno-dev to suppress it.
--- 中略 ---
    -- Found PythonInterp: C:/xxxxx/Python/Python37-32/python.exe (found version "3.7.3")
    CMake Error at C:/xxxxx/pip-install-ykd_q9zp/dlib/dlib/external/pybind11/tools/FindPythonLibsNew.cmake:122 (message):
      Python config failure: Python is 32-bit, chosen compiler is 64-bit
--- 以下略 ---

　このエラーの中で重要なのは「Python config failure: Python is 32-bit, chosen compiler is 64-bit」の部分で、要は「Pythonは32bitだけどコンパイラは64bitなのでエラー」ということです。

　pythonのインストール時に64bitか32bitかを確認しておく必要があります。
　もちろんCMakeのインストール時にも64bitか32bitかを確認して合わせるようにしましょう。

　以上がWindowsにdlibをインストールする方法です。

　Macの時とは違ってVisual Studioのインストールが必要だったりと色々と大変でした…。

・参考資料

• DlibをWindowsに導入する
• Install Dlib on Windows | Learn OpenCV
• Visual Studio のインストール | Microsoft Docs
• ダウンロード | IDE、Code、Team Foundation Server | Visual Studio

【python/OpenCV】Windows10にpythonとOpenCVの環境を構築する

　今まで以下のようにDebianとMacOSでのOpenCVの環境構築をやってきました。

• 【TinkerBoard/OpenCV】TinkerBoardにOpenCVの環境を構築する - ソースに絡まるエスカルゴ
• 【python/OpenCV】MacOSにpythonとOpenCVの環境を構築する - ソースに絡まるエスカルゴ

　今回はタイトルにある通りWindows10でもpythonとOpenCVを入れるところまでやってみたのでその備忘録です。

　では始めます。

１：pythonのインストール

※2019/06/17：色々間違っていたので修正しました。

　まずは公式ページからpythonをインストールします。

• Welcome to Python.org

　公式ページのDownloadのところからWindowsを選択します。

　Downloadのページにある中からバージョンと32bitか64bitかを選んでダウンロードします（今回は3.7.3の64bitを選択しました）。

　ダウンロードしたインストーラを起動させると以下のような画面になるので、左下のチェックボックス2つにチェックを入れます。

　あとはインストーラーの指示に従っていけばpythonのインストールは終了します。

　インストールが終了したらPower Shellを起動させて、以下のバージョン確認コマンドでエラーがなければインストールが完了しています。

$ python -V

　エラーが出た場合はチェックボックスの両方にチェックが入ってなかった（環境変数のパス設定をしていない）可能性が高いので、一度アンインストールしてからやり直すと良いかと思います。

２：pipの最新化
　実は公式のインストーラにはpipも含まれています。なのでOpenCVなどもpipで入れることができます。

　はじめに以下のコマンドでpipのバージョンを確認します。

$ pip --version

　最新化されてない場合があるので、以下のコマンドでpipを最新化します。

$ python -m pip install --upgrade pip

　もう一度pipのバージョン確認のコマンドを実行してバージョンアップされていることを確認します。

３：OpenCVのインストール
　pythonとpipが入ったので、以下のコマンドでOpenCVをインストールします。

・拡張機能なしの場合

$ pip install opencv-python

・拡張機能ありの場合

$ pip install opencv-contrib-python

　上記のどちらかのコマンドを実行したあと、Power Shellからpythonを起動させてimport cv2をやってエラーが出なければインストールできています。

$ python
>>> import cv2
>>> exit()

　以上がWindows10でpythonとOpenCVの環境を構築する方法です。

　思っていた以上に環境構築が楽だったので少し感動しました。

おまけ：その他pipでインストールしたもの
・matplotlib

$ pip install matplotlib

・参考資料

• 3. Windows で Python を使う — Python 3.7.3 ドキュメント
• windows10でpipが使えるようになるまで(python3.6) - Qiita
• Python 3.6 に OpenCV 3.4 など環境を構築する - Qiita

【VSCode】ファイルを比較して差分表示させる方法

　VSCodeを使っていて「ファイルの差分を表示させたい」と思って調べたら簡単にできたのでそのメモです。

・ファイル差分表示方法
　最初に比較したいファイルをVSCodeで開いておきます。

　メニューの「表示」→「コマンドパレット」を選択します。

　入力欄に「>compare」と入力して一番最初に出てくる「Compare Active File With...」を選択します。

　比較したい対象のファイルを選択します。（ここではsave.csvとnew.csvを比較）

　すると結果画面で差分のあるところが色付きで表示されます。

　以上がVSCodeでファイルの差分を表示させる方法です。

　デフォルトでこのような機能があるのはとても便利ですね。

・参考資料

• VS Codeでファイルを比較し、差分（diff）を表示するには：Visual Studio Code TIPS - ＠IT

【git】よく使うコマンド集

　普段からgitを使っているのですが、そういえばgitについての記事を一切書いていないことに気がついたので今回は備忘録として自分がよく使うコマンドをまとめておこうと思った次第です。

　ほぼコマンドを羅列していくだけになります。

　では始めます。

■コマンド

• gitの設定を確認

$ git config -l [スコープ名]

スコープ名	優先度	説明
local	高	特定のリポジトリにおける設定
global	中	現在のユーザ共通の設定
system	低	システム共通の設定

・例：現在ユーザの共通の設定を確認

$ git config -l --global

• gitの設定を変更

$ git config [スコープ名] [対象名] [設定値]

・例：現在ユーザの改行設定を一切変更しないモードに変更

$ git config --global core.autocrlf false

• git用のリポジトリに設定

$ git init

• リモートリポジトリのクローン

$ git clone [リモートリポジトリのアドレス]

• 変更のあったファイル一覧を確認

$ git status

• ファイル/フォルダ名を変更

$ git mv [変更前] [変更後]

• ブランチ一覧を確認

$ git branch # ローカルブランチの一覧
$ git branch -a # リモートブランチの一覧

• ローカルブランチの新規作成

$ git branch [ブランチ名]

• ローカルブランチの削除

$ git branch -d [ブランチ名]

• ローカルブランチの削除(強制)

$ git branch -D [ブランチ名]

• ローカルブランチの切り替え

$ git checkout [ブランチ名]

• ローカルブランチを切り替えてリモートブランチの内容にする

$ git checkout -b [ローカルブランチ名] [リモートブランチ名]

・例：リモートブランチ名がdevの場合

$ git checkout -b dev origin/dev

(※ちなみにローカルブランチも同じ方法でコピーできる)

• 変更差分を確認

$ git diff [ファイル名] # ファイル単体の差分
$ git diff [ローカルリポジトリ名] # ローカルリポジトリの最新との差分

• 差分のあったファイルをコミットできるようにする

$ git add [ファイルパス] # ファイルパスを「folder/*」のように指定も可能
$ git add -A # 差分のあるファイル全て

• git addしたファイルをコミット

$ git commit -m "コミットコメント" # ""の文字列部分でコミットコメントをつけられる

• コミットログの確認

$ git log

• ローカルブランチの直前コミットを取り消してコミット前の状態にする

$ git reset --hard HEAD^

• 以前のコミットの状態に戻す（未addの場合）

$ git checkout [ファイル名]

• 以前のコミットの状態に戻す（add済の場合）

$ git reset HEAD [ファイル名]
$ git checkout [ファイル名]

• コミット内容をリモートブランチにプッシュ

$ git push -u origin [リモートブランチ名] # 現在のローカルブランチのコミット内容をリモートブランチに追加

• ローカルコミット内容をリモートブランチに強制プッシュ(強制上書き)

$ git push -f origin [リモートブランチ名]

(※コンフリクトやログの内容など、すべて関係なくローカルの内容で強制上書きされる)

• ブランチのマージ

$ git merge [対象ローカルブランチ名] # 現在のローカルブランチに対象のローカルブランチをマージ
$ git merge [マージされるローカルブランチ名] [対象ローカルブランチ名] # マージされるローカルブランチに対象ローカルブランチをマージ

※コンフリクトが起こった場合はこちらのページを参考に解消する。

• 現在のローカルブランチをリモートブランチの最新のものに更新

$ git pull

• ローカルブランチの内容をリモートブランチで強制上書き

$ git fetch origin
$ git reset --hard [リモートブランチ名]
$ git pull # リモートブランチの一番最初の状態なのでgit pullで最新化

• タグ一覧を確認

$ git tag

• 既存のコミットに対してtagを作成

$ git tag -a [タグ名] -m [コメント] [コミットID]

・例：コミットIDがaaaa1111のものにタグ名として「v0.1」をつける場合

$ git tag -a v0.1 -m 'コメント内容です' aaaa1111

• タグのpush

$ git push origin [タグ名]

• pushしてないタグの削除

$ git tag -d [タグ名]

(※pushしたタグは原則削除はしない)

• Gitのアップデート(Windowsの場合)

$ git update-git-for-windows

　以上が個人的によく使うコマンド一覧です。

　特にローカルブランチの強制上書きなどは時々必要になったりするので、知っておくとよいと思います。

・参考資料

• Git - Reference
• git tagの使い方まとめ - Qiita
• Git 設定のスコープ (local/global/system) を理解する - まくまく Git ノート
• 【Git】インストール済みのGitをアップデートする【Windows環境】 | かずさプログラマーの雑記帳
• 【Git】ローカルの修正を前回のcommitまで戻す方法 - Qiita