クリエイター:メタボ兔

ウェブやアプリの開発者で利用する色な技術やサーバーや開発環境の設定について共有する場

使用しなくなったGoPro3をウェブカメラ化

開発環境

在宅ワークが長くなったことで、部屋の端っこに作業スペースを作りました。利用しているMacProのカメラでMTGに参加しましたが、以前ダイビング・スノーボード等で使用する目的で買ったGoPro3を利用する方法がないかと調べました。

必要な物

GoPro3

使わなくなった物ですが、状態は良い物です。

www.motozen.jp

GoPro フレームマウント

GoPro3の基本で入っているフレームは水中で使用する物ですが、ケーブル（充電とMicro HDMI）を繋げないので新しく買いました。

GoPro フレームマウント、CamKix製 – GoPro Hero 4 / 3 / 3+ カメラに互換性あり - USB、HDMI、SD スロット 完全にアクセス可能 – アクションカメラ用に軽くてコンパクトなハウジング - 中身: つまみねじ（大） 1ヶ / 三脚マウント 1ヶ / ゴムレンズキャップ 1ヶ / UVフィルターレンズプロテクター 1ヶ (標準サイズ)

GoPro フレームマウント、CamKix製 – GoPro Hero 4 / 3 / 3+ カメラに互換性あり - USB、HDMI、SD スロット 完全にアクセス可能 – アクションカメラ用に軽くてコンパクトなハウジング - 中身: つまみねじ（大） 1ヶ / 三脚マウント 1ヶ / ゴムレンズキャップ 1ヶ / UVフィルターレンズプロテクター 1ヶ (標準サイズ)

  • メディア: エレクトロニクス

Mini Usbケーブル

MiniUsbで充電するための物です。

Amazonベーシック USB2.0ケーブル 0.9m (タイプAオス - miniBオス)

Amazonベーシック USB2.0ケーブル 0.9m (タイプAオス - miniBオス)

  • メディア: Personal Computers

Micro HDMIケーブル

動画をHDMIへ出力するための物です。

Micro HDMI - HDMI ケーブル 1m (マイクロタイプDオス - タイプAオス) 4K @60Hz ハイスピード マイクロHDMI HDMI ケーブル GoPro/テレビ/デジカメ/ビデオ/アクションカメラなどに対応 ナイロン編み保護

Micro HDMI - HDMI ケーブル 1m (マイクロタイプDオス - タイプAオス) 4K @60Hz ハイスピード マイクロHDMI HDMI ケーブル GoPro/テレビ/デジカメ/ビデオ/アクションカメラなどに対応 ナイロン編み保護

  • メディア:

HDMI キャプチャーボード

これがメイン部品でMicro HDMIケーブルだけだとテレビ等のHDMI機器へ出力は可能ですが、それをウェブカメラとして認識させるのはできないようです。

GoPro4以上からだとアプリをインストールしてそのままウェブカメラとして利用できるようですが、自分が持っているのはGoPro3。残念！！！

gopro.com

それで買ったものがこれです。

KINGONE HDMI キャプチャーボード [2021最新進化版]ゲームキャプチャー USB3.0 60fps 1080P ゲーム実況生配信、ライブ会議、ライブビデオ配信、画面共有、録画に適用 フルHDキャプチャーカード switch、Xbox One、OBS Studio対応 電源不要

KINGONE HDMI キャプチャーボード [2021最新進化版]ゲームキャプチャー USB3.0 60fps 1080P ゲーム実況生配信、ライブ会議、ライブビデオ配信、画面共有、録画に適用 フルHDキャプチャーカード switch、Xbox One、OBS Studio対応 電源不要

  • メディア: エレクトロニクス

固定用の自撮りボー

こちらは家にあった物でデスクの上にそのまま立てるものです。好みで買うか既に持っている小さいカメラの三脚でも良いかと思います。

注意点

GoPro3のケーブル接続の端子

Micro HDMIケーブルとMini Usbケーブルを同時に接続するので差し込みする先頭が大きすぎるとGorPro3の横幅的に出来ない場合がありますので、出来るだけ小さいのが良いかと思います。

上記の商品リンクはギリギリ刺せる大きさでした。

Mini Usbケーブルは充電のみ

上記のケーブルは値段で安い物ですが、通信も出来るものでしたのでHDMIケーブルが繋がっていてもUSBの通信モードが活性化されるので、別途のUSB充電器に繋げました。もしケーブルが充電のみだけ出来る物でしたら、別にMacに刺してもよかったかもです。

完成したイメージ

GoPro3本体の画像 f:id:FattyRabbit:20210323120739j:plain

Google Meetの画像 f:id:FattyRabbit:20210323120841p:plain

Meetでは720Pで設定しないと動画の比率が合わないです。 f:id:FattyRabbit:20210323120918p:plain

Blimpupの使用

Docker 開発環境 Laravel

お題「MacでDockerの速度改善」

f:id:FattyRabbit:20210310105619p:plain

クラウドにDockerのコンテイナーを実行するサービスです。自分が確認したところ、「ネット構成ができない」とかエラーの解決方法（ドキュメント）がまだ少ないなどの問題がありました。

でも、Localで「docker-sync」をしても同期する負荷も無視できなかったので都度試して見たいと考えています。

blimpup.io

Cloud Container Development

Blimp is a drop-in replacement for Docker Compose that enables development in the cloud. Laptop struggling to keep up? It’s time to blimp up and get your Docker containers in the cloud.

Docker Compose in the Cloud

Make your day to day development process less heavy by running containers in the cloud. Blimp is a drop-in replacement for Docker Compose that speeds up traditional local development by going remote.

バッテリーが膨らんできたNexus9をバッテリーレス化

開発環境

バッテリーが膨らんできたNexus9をずっとバッテリーを外したままで持っていました。ネットで他の機種をバッテリーレス化について記事とかあったので時間がある時やって見ようかと思いました。

gigazine.net

実際ネットの記事を元に色々試して起動まではできましたが、すぐ電源が落ちるところから可決が出来ずずっと放置していました。

先週、壊れても（すでに壊れている）いいかなと思いまして大胆な行動を起こしたところ成功しました。USBの電圧等関係があるかとは思いますが、MacPCと家で使用しているUSB電源では正常に動くことが確認出来ました。

Yeeeeee！！！

f:id:FattyRabbit:20210210122254j:plainf:id:FattyRabbit:20210210122316j:plain

Slackを使ってないタブレットへ移行！！

開発環境

概要

MacのOSをBigSurにアップデートしたことでPCが遅くなったために使ってないNexus7(2012)を利用してSlackはタブレットでやってみようかとの内容です。

前提条件

ファイルの共有はクラウド

Slackの利用でファイルのアップロードはあまり行ってなく、クラウド上にアップロードしてリンクなどで共有することです。

複数のワークスペースはお勧め出来ない

iOSは分かりませんが、Androidのアプリだとワークスペースを切り替えないと新しいメッセージがあるかどうかが分かりずらいです。

別途Bluetoothのキーボードなし

接続先を切り替える機能があるBluetoothのキーボードを使わずにMacProのキーボードを利用して、タブレットの入力を行うことです。

作業開始

Macのキーボードの共有方法

MacのキーボードをBluetoothキーボードとして提供するために調査を行いまして、リストアップしたアプリです。

Across

acrosscenter.com

Android, Mac等も対応出来てマウスとキーボードが共有できる等機能が多く無料版もありますが、無料版でテストをしてみようとしたがうまく出来ませんでした。また、AppleStoreになく公式サイトでダウンロードする形です。

1Keyboard

1Keyboard

1Keyboard

  • Eyal Wiener
  • ユーティリティ
  • ¥1,220
apps.apple.com

公式サイトの説明画像ではAndroidも書いていたので購入して試しましたが、iPhoneは接続して使用可能でしたがAndroidは出来ませんでした。無料版もなかったので購入＆返品申請した形にしました。

mocha Keyboard

Mocha Keyboard

Mocha Keyboard

  • MochaSoft
  • ユーティリティ
  • ¥730
apps.apple.com

無料版テストした時だと一度接続した後にMac側の操作のみで再接続が出来なくて毎回タブレット（Nexus7)からも操作が必要で面倒でした。タブレット側の問題かもです。

Typeeto

Typeeto: remote BT keyboard

Typeeto: remote BT keyboard

  • Eltima
  • 仕事効率化
  • ¥980
apps.apple.com

価額面と使い方＆Android対応できるのでこちらに決定しました。公式では文字のコピー＆ペーストも出来ると書いていますが、うまく出来ませんでした。

タブレットの設定

Google 日本語入力をインストール

play.google.com

最近Gboardってキーボードアプリにキーボードが全部使えるようになったようですが、Gboardを使うと日本語の切り替えがキーボードで出来ないようです。

Google日本語入力アプリのAndroid版に、2016-07-27のアップデートで日本語入力切替の新ショートカットキーが追加されました。

SHIFT+CTRLで日本語入力切替が出来るようになったようで、それが実際のBluetoothキーボードで日本語切り替えが出来るようです。

既存のキーボードを削除するか使用しないようにして「Google 日本語入力」のみ使用するように設定しました。

【2021-03-03】Gboardも日本語切り替えが[Shift + Space]でらしく、テスト完了です。

キーマップ変更アプリのインストール

自分が今回インストールしたキーマップ変更アプリは以下のものです。

play.google.com

GooglePlayStoreでの説明画像と最新Versionと差がありまして自分の場合アプリが実装された後のアプリの画面がこちらです。

f:id:FattyRabbit:20210205131254p:plain

Typeetoを利用してタブレットと繋げてキーボードの連携が出来る状態にして起きます。その後にこの画面で「物理キーボード設定」のリンクをクリックするとAndroidの設定画面が開きます。

自分が設定した内容はこんな感じです。ロシア？のMacはありましたが、Macの日本語キーボードはなかったです。

f:id:FattyRabbit:20210205131654p:plain

赤いところはBluetoothキーボードとして接続されたPC名が表示されます。

設定がおわたら上部のバックボタンをクリックしてキーマップ変更アプリの画面に戻り、「入力テスト用テキストエリア」でテストしてください。

まとめ

かなりいい感じでMacのキーボードを利用してタブレットの文字が書けるようになりましたが、マウスとかも出来ると一番いいかもです。www

これでMacの負荷が減るといいですが、タブレットが７インチなので文字を小さくしているので目が疲れるかも他の大きいタブレとがあれば〜〜〜

iTermの背景にsshログイン情報を表示

開発環境

f:id:FattyRabbit:20210201221004j:plain

概要

iTerm2をsshクライアントツールで愛用していますが、たまに複数のサーバーへ接続しているとどこがなんなのか分からなくなる場合があります。

その場合、接続情報を可視化したら良いかと思いまして色々調べて改善した内容です。（まだ、課題点はあり〜〜〜）

いきなりソース

自分も色々なところのソースを利用したので一旦ソースを共有した方が良いかと思います。

「~/bin/ssh-change-bg.sh」を作成します。

#!/bin/bash

# SSH with host name and IP address in background (only in iTerm.app)

# First, check to see if we have the correct terminal!
if [ "$(tty)" == 'not a tty' ] || [ "$TERM_PROGRAM" != "iTerm.app" ] ; then
  /usr/bin/ssh "$@"
  exit $?
fi

function __calculate_iterm_window_dimensions {
  local size=( $(osascript -e "
tell application \"System Events\"
    tell application process \"iTerm2\"
      get size of window 1
    end tell
end tell" | tr ',' ' ') )

  local w=$(( ${size[0]} - 15 )) h=$(( ${size[1]} - 44 ))
  echo "${w}x${h}"
}

# Console dimensions
DIMENSIONS=$(__calculate_iterm_window_dimensions)
BG_COLOR="#000000"       # Background color
FG_COLOR="#C68080"       # Foreground color
GRAVITY="NorthEast"      # Text gravity (NorthWest, North, NorthEast,
                         # West, Center, East, SouthWest, South, SouthEast)
OFFSET1="20,10"          # Text offset
OFFSET2="20,80"          # Text offset
FONT_SIZE="60"           # Font size in points
FONT_STYLE="Normal"      # Font style (Any, Italic, Normal, Oblique)
# Font path
FONT="$HOME/.bash/resources/SimpleLife.ttf"

HOSTNAME=`echo $@ | sed -e "s/.*@//" -e "s/ .*//"`

configInfo=`pcregrep -M 'Host '$HOSTNAME'([\s\S](?!Host ))+' ~/.ssh/config`
if [ ! -z "$configInfo" ]; then
  RESOLVED_HOSTNAME=$HOSTNAME
  CONFIG_HOSTNAME=`echo -e "$configInfo" | grep -oEi 'hostname\s+(.+)' | sed -e "s/ \+/ /g" |cut -f2 -d" "`
  output=`dscacheutil -q host -a name $CONFIG_HOSTNAME`
  RESOLVED_IP=`echo -e "$output"|grep '^ip_address:'|awk '{print $2}'`
  RESOLVED_USER=`echo -e "$configInfo" | grep -oEi 'user\s+(\S+)' | sed -e "s/ \+/ /g" |cut -f2 -d" "`"@"
else
  output=`dscacheutil -q host -a name $HOSTNAME`
  RESOLVED_HOSTNAME=`echo -e "$output"|grep '^name:'|awk '{print $2}'`
  RESOLVED_IP=`echo -e "$output"|grep '^ip_address:'|awk '{print $2}'`
fi

function set_bg {
  local tty=$(tty)
  osascript -e "
    tell application \"iTerm2\"
      tell current session of current window
        set background image to \"$1\"
      end tell
    end tell"
}

on_exit () {
  if [ ! -f /tmp/iTermBG.empty.png ]; then
    convert -size "$DIMENSIONS" xc:"$BG_COLOR" "/tmp/iTermBG.empty.png"
  fi
  set_bg "/tmp/iTermBG.empty.png"
  rm "/tmp/iTermBG.$$.png"
}
trap on_exit EXIT

convert \
  -size "$DIMENSIONS" xc:"$BG_COLOR" -gravity "$GRAVITY" -fill "$FG_COLOR" -style "$FONT_STYLE" -pointsize "$FONT_SIZE" -antialias -draw "text $OFFSET1 '${RESOLVED_HOSTNAME:-$HOSTNAME}'" \
  -pointsize 30 -draw "text $OFFSET2 '${RESOLVED_USER}${RESOLVED_IP:-}'" -alpha Off \
  "/tmp/iTermBG.$$.png"
set_bg "/tmp/iTermBG.$$.png"

/usr/bin/ssh "$@"

実装権限を与えます。

% chmod +x ~/bin/ssh-change-bg.sh

~/.bash_profileに以下を追記してsshコマンドでssh-change-bg.shが実行されるようにします。

alias ssh='~/bin/ssh-change-bg.sh'

~/.bash_profileを読み込みましょう。

% source ~/.bash_profile

ソースを見るとわかる方もいるかと思いますが、「convert」を使用するために「ImageMagick」をインストールする必要があります。

ImageMagickのインストール

思ったより簡単です。

% brew install imagemagick

一応converterコマンドの参考URLです。

利用可能範囲

iTerm2のPaneサイズの取得不可

現在のソースの「__calculate_iterm_window_dimensions」部分ですが、Window(Or Tab)のpixelサイズしか取得できない状態です。Apple Script?的な仕様上paneとかsessionにはSizeの属性がないためです。

sttyコマンドでライン数やカラム数の取得できますが、それをpixelで取得する方法がまだ見つかってないです。

That's stty size | cut -d" " -f1 for the height/lines and stty size | cut -d" " -f2 for the width/columns

stackoverflow.com

現在右上に情報が見えるようにしていますが、左上に表示するようにすれば解決されるかなと思います。ただ、邪魔でした。(ㅠㅠ)

~/.ssh/configの参照

~/.ssh/configで定義されたパターン（自分が使っているパターン）を読み込んで情報として利用するようにしています。

こんな感じです。大文字小文字、英数字とかが関係すると思います。

Host raspi-of-local
  HostName 172.16.221.18
  IdentityFile ~/.ssh/id_rsa
  User pi

上記のソースはここら辺です。

configInfo=`pcregrep -M 'Host '$HOSTNAME'([\s\S](?!Host ))+' ~/.ssh/config`
if [ ! -z "$configInfo" ]; then
  RESOLVED_HOSTNAME=$HOSTNAME
  RESOLVED_IP=`echo -e "$configInfo" | grep -oE 'HostName\s+([0-9\.]+)' | sed -e "s/ \+/ /g" |cut -f2 -d" "`
  RESOLVED_USER=`echo -e "$configInfo" | grep -oE 'User\s+(\S+)' | sed -e "s/ \+/ /g" |cut -f2 -d" "`"@"
else
  ...
fi

課題

やっぱりpaneのサイズを正確に取得したいですね。ww