Above & Beyond

日々のアウトプット記録

Win-sshfs

モチベーション

VS CodeのRemote SSHはとても便利なんだけど、接続先のOSが古いとかサポートされていない環境だと使えない。 じゃぁ、nfs、っていうのもroot権限がないと設定とかできないし、共用の開発サーバーだと勝手に設定を変えることもできない。

そういう場合に、sshfsを使ってWindowsエクスプローラーでサーバーのディレクトリをマウントして使うという方法がある。 この方法だとssh接続ができるホストであればOKなので、上記のような古の環境でもGUIエディタで編集などができるようになる。 ということで久しぶりにインストールと設定をしたのでそのメモ。



セットアップ

インストール

以下の2つをインストール

起動

スタートメニューからwin-sshfsを検索して起動

設定

  1. 起動したらタスクトレイに常駐(黄色いアイコンのやつ)するので、アイコン上でマウス右クリック
  2. Show Managerを選択して設定画面を開く
  3. ダイアログの左下に有る Add ボタンをクリック
  4. ホストへのsshでのログインなどの情報を入力 f:id:kabukawa:20210209235746p:plain
    • DriveName:接続先の名前(区別するのに使うだけなので任意の名前でOK)
    • Host:ホスト名もしくはIPアドレス
    • Port:22
    • Username:ssh接続する時のユーザーID
    • Password:パスワード認証の場合。ドロップダウンで鍵認証も可能
    • Directory:ホスト上のマウントしたいディレクト
    • DriveLetter:ローカルPCのドライブレター
    • Mount at Login:チェックを外すのを推奨(後述)
  5. Save ボタンをクリックして保存

マウント

Mount ボタンを押すと DriveLetter で指定したドライブとして Host の Directory がマウントされる。 あとはWindows上で使うのと同じ。エクスプローラ上でコピーしたり編集操作も可能

アンマウント

使い終わったらunmountしておく。

注意点

とても便利なsshfsなんだけど、Windowsのネットワークドライブとしてマウントするというところで注意点が有る。 それは、ウィルススキャンがネットワークドライブに対してもかかるようになっていると、sshfsで接続したホストもスキャンされることになる、ということ。 スキャンされるということはファイルを読んで結構なデータが転送されることになるので、例えばクラウド仮想マシンに対してマウントをしていると クラウドからのデータ転送料金だけで大変な金額になったりする。そういう経験をしたことが有るので、Mount at LoginオプションはOFFを推奨しています。

とはいえ、そこそこのパフォーマンスで使えるし、ローカルのPCへのインストールだけなので敷居はそこそこ低いかなと思います。 こういう方法もあるということで、何かのときに役に立ってくれるといいなと思います。

オンラインのカメラ周りの話

事の起こり

昨年の緊急事態宣言のあたりで、家でビデオ会議をするのにWebカムが無いなということに気づいたのですが、 時すでにお寿司🍣、もとい遅しで、Amazonを見ると品切れで入荷日未定か転売ヤーが結構な高額でWebカムを売っている状態でした。

f:id:kabukawa:20210124183358p:plain

目次

どうしたか

Webカムは買えない。じゃぁどうするかって話ですが、ググってみるとこんな記事が見つかりました。

pc.watch.impress.co.jp

をを、スマフォのカメラをWebカムに使えるようにするアプリとな。 うちにはちょうど ASUSのZenfone2 Laserという少し古めのスマフォがあるし、これをWebカムにしてみるか。 ということで、早速入れてみたわけです。

iVCam

使っているのはこれです。

www.e2esoft.com

PC側にWebカムとして認識させるためのソフトウェア、スマフォ側にカメラの映像を転送するためのアプリを入れます。 カメラ画像に iVCam と入るのを許容できれば無料で使えますが、$ 24.95で永続ライセンスが買えて、PayPal払いができるので自分は買っちゃいました。

www.e2esoft.com

何が良かったか

  • Webカムとして、古いスマフォを活用できる。
  • スマフォのカメラは結構性能がいいので、下手なWebカム買うより良い映像が出る。
  • 試してみてから購入なので、うまく動かなければ消せるというのが手軽でいい。
  • USBケーブル経由で使えば遅延も無く安定してWebカムとして使える。
  • 映像を明るくしたり、といったちょっとした加工も可能。(ただし、効果は弱め)
  • リモートじゃない日はカメラにしているスマフォを会社に持っていって、会社のPCでも使える。

今はWebカムの価格も落ち着いて、わざわざスマフォをカメラにする理由はあまりなくなりましたけど、古いスマフォを活用できているので自分的にはこれはこれで満足です。

ちなみにUSB経由での接続方法に関する手順も公開されています。(但し英語)

www.e2esoft.com

参考までにグーグル翻訳でざっくり日本語にしたテキストを貼っておきます。

USB経由で接続

iVCamは、USB接続を介して携帯電話からPCにビデオを転送できます。
これにより、より安定して高速になります。

■ iOS
 最新のiTunesをPCにインストールし、iPhoneをUSBケーブルでPCに接続します。
USBケーブルを差し込むと、iVCamは自動的に接続してUSB経由でビデオを転送します。
簡単ピーシー!
注: USBが機能しない場合は、Appleデバイスドライバが正常にインストールされ、
Appleアプリケーションサポートサービスが有効になっていることを確認してください。
必要に応じてiTunesを開いたままにします。

■ アンドロイド
USBドライバー
PCに接続しても電話が認識されない場合は、電話のUSBドライバーをインストール
してください。公式のモバイルアシスタントソフトウェアを直接インストールするか、
ここからダウンロードするか、携帯電話のブランドに応じて検索できます。
たとえば、「Android USB DriverforSamsung」を検索します。

ドライバをインストールした後、電話をPCに接続すると、選択に基づいてUSB
ストレージまたはメディアデバイスとして認識されます。

USBデバッグ
携帯電話側で、[設定]> [開発者向けオプション ]で[ USBデバッグ]オプションを 有効
にします。

Android 4.2以降では、 開発者向けオプションはデフォルトで非表示になっています。
次の手順を使用して表示します。

デバイスで、[設定]> [<デバイス>について]に移動し ます。
ビルド番号を7回タップして、  [設定]> [開発者向けオプション]を使用 できるよう
にします。
次に、USBデバッグオプションを有効にし ます。
方法がわからない場合の詳細については、Googleの「AndroidデバイスでUSBデバッ
グを有効にする」を参照してください。

ヒント:  USBポートに接続している間、Androidデバイスがスリープ状態にならない
ように、[スリープ解除]オプション を有効にすることも できます。

USBモード
USBケーブルが接続されている場合は、ファイル転送(MTP)または写真転送(PTP)
にUSBを使用するを選択します。

iVCam PCクライアントを実行し、しばらく待ちます。電話機を初めて接続する場合
は、USBデバッグを許可するように求められます。
[ OK]を選択して動作させます。

■ iVCam
電話機が適切に構成され、USBデバッグモードでUSBケーブルを使用してPCに接続
されている場合、iVCamは自動的にUSB経由でビデオを接続および転送します。

おまけ

最初の頃はスマフォをディスプレイの上にフックで固定したりして使っていたのですが、いまいち使いづらい。 それに窓に近いせいで顔が暗くなる(スマフォのカメラが逆光を絞りでなんとかしてくれているんですが、それでも暗い)ので、こんなものを買いました。

www.3coins.jp

ショボいながらも女優ライト風のものが付いていて、なんとなくいい感じの場所にカメラを固定できる。 300円ショップですが、これは1000円(税別)で買えます。

設置したものがこんな感じになってます。机が狭い(幅60cm)ので、ディスプレイの横から無理やりカメラとライトを前に出して設置している感じです。

f:id:kabukawa:20210124182456j:plain

まとめ

こうやって見ると、ここまでやるなら素直にWebカム買ったほうが安かったのでは?と突っ込まれそうですが、まぁ、気にしない気にしない。 古いものを活用しながら、そこそこいい感じにできる、というのが良いのです。 ノートPCについているカメラよりきれいに撮影できるのも良いなと思っています。 Webカムをそろそろ買おうと思っているんだけど、という人にこういう選択肢もありますというのが伝わると良いなと思います。 (但し、誰にでもお勧めできるものではない、というのも確か。)

VS Codeでプレゼン資料を書く

はじめに

みなさんはプレゼン資料作成、何でやっていますか? 自分は最近、VS Codeで作ってます。 なんでPowerPointではなく、VS Codeで作成するようになったか。 今日はそんな話を書きたいと思います。

f:id:kabukawa:20210124172159p:plain:w300

目次

VS Codeで書くようになる前

もちろん自分も、最初からVS Codeで書いていたわけではないです。

最初期 PowerPoint

最初は普通にPowerPointで書いてました。2018年頃の話です。 Officeのライセンスも持っていたし、スライド書くならこれ、という先入観だけで使っていたんですけど、 逆に言うと、スライド書くのには何の問題もありませんでした。

ただ、PowerPointで書くと、勉強会でプレゼンをするときにそのファイルをPCに置いておかないといけないわけです。 ファイルが壊れて開けないとか、そういうトラブルがあったら嫌だよなと思って、ファイルをGoogleDriveに置くようになったのですが、そこではたと気づきました。 「だったらGoogle Slidesでよくね?」

覚醒期 Google Slides

ということで2019年になるとGoogle Slidesでスライドを書くようになりました。 使い慣れると、スライドを書くには十分な機能を持っているし、デザインも結構あってよかったです。 なにより、PCじゃなくてもスライドを書けるというのは結構良いなって思いました。

これはこれで良かったのですが、こんな事を思ったのです。 「スライド、バージョン管理したいよね」

発展期

VS CodeMarkdownのドキュメントをたくさん書くようになっていたので、Markdownでスライドかけたら良いよねと思っていたら、去年参加した勉強会でこんな拡張があることを知りました。

marketplace.visualstudio.com

そうです。VS Codeで作成したMarkdownのドキュメントが、スライドになるんですね。 VS Code上でそのままプレゼンもできるし、HTMLとかPDFにエクスポートも可能。 これ、良いじゃないですか?

というわけで vscode-reveal

Markdownで書くと良いこと、実は結構あります。

  • 作成するのはMarkdownなので、新しいことを覚えなくても始められる
  • テキストファイル(Markdown)なのでGitHub等でバージョン管理して、差分の確認も簡単
  • Markdownドキュメントとして読めるので、特別なソフトウェアがなくても内容を確認可能
  • 見出し一覧を最初に作って、構成を固めてから肉付けをしていくという作成の進め方ができる
  • 画像やURL等ももちろん使用できる

デザインやアニメーションで他のプレゼン用ツールのような凝ったことをしようとすると大変だけど、 伝えたいことを纏めて発表するための資料作り、と考えれば vscode-reveal は必要十分な機能を持っていると思います。

ちなみに似たような機能を持っているものとして marp-vscode というのもあります。

marketplace.visualstudio.com

機能的には marp-vscode も同じ様なことができますし最初は marp-vscode を使ってみたのですが、テーマ指定の仕方がいまいち分からなかったので vscode-reveal を使うことにしました。 たぶんどっちを採用しても自分のような使い方なら困ることはそんなに無いんじゃないかと思います。

使用例

取り敢えず、Markdownドキュメントの最初にこんな感じの指定を入れておくと、テーマやタイトルの指定ができます。

---
title : "プレゼンのタイトル"
theme : "white"
---

組み込みテーマはここで確認できます。ここで書かれている名前を "theme :" に指定すればそのテーマが適用されます。 自分でテーマを作りたい場合はcssを書けば使えるようです。

revealjs.com

あとは本文を書くだけです。

見出しは 普通のMarkdownの見出しを指定すれば、スライドのページ見出しになります。

# 見出し1
## 見出し2
### 見出し3

列挙項目もMarkdownのリストと同様です。

* リスト1
* リスト2
    * 小リスト1
    * 小リスト2

1. 番号付きリスト1
2. 番号付きリスト2
    1. 番号付き小リスト1
    2. 番号付き小リスト2

ページ区切りは "---" です。水平線と被るので、そこだけは注意が必要です。

---

自分の作成したファイルを以下に置いています。 特に難しいことは何もしていないので、逆に「拡張機能を入れるとこんなシンプルなものでプレゼン資料を作成できるのか」と思ってもらえるのではないかと思います。

github.com

共同で発表する資料を作成するといったユースケースだと、プルリク出して修正みたいな使い方もできると思うので、悪くないかなと思います。

まとめ

今回は vscode-reveal という拡張機能を使って、VS Codeでプレゼン資料を書くという話を書きました。 同じようなことで悩んでいる人の参考になったら嬉しいです。