いま mac で gif 動画をキャプチャをするなら Kap がおすすめ

Catalina になってから 32bit のアプリが動作しなくなったので、LICEcap の代わりに Kap を使うのが良さげ

インストール手順

1. Kap の TOP ページにアクセスし、「Get Kap」 をクリック

   

   Kap トップページ

2. dmg から展開した app ファイルをアプリケーションディレクトリにドラッグアンドドロップ

3. Kap を起動すると、画面収録の許可が求められるので許可し、アプリを再起動

使い方

mac のメニューバーに出現する Kap のアイコンをクリックすると、録画のプレビュー画面が表示される

デフォルトで全画面が録画範囲になっているが、マウスで収録範囲を選択することも可能

なんと特定のアプリのキャプチャもできる

録画ボタンをクリックし、収録開始。

収録を終了する場合は、メニューバーをクリックする

最後に動画サイズ、解像度、出力形式、保存方法を指定する（バリエーション多くて最高）

オープンソースで、有料機能などは特に無いのでご安心を！

Zoom で気軽に VTuber になってミーティングを盛り上げる

リモートワーク解禁

新型コロナウイルスの影響が勤務先でも出ていて、フレックスタイムでのリモートワークが解禁になった。

Zoom での ミーティングで自分の顔を映して、背景にビーチや、某猫みたいに宇宙を感じるような背景がセットできるのだが、VTuber みたいなことできないかなと思ったのがきっかけ。

VTuber になる

調べてみると、Mac でお手軽に VTuber になれる方法があった。

facevtuber.com

FaceVTuber は、ブラウザ上でWEBカメラから顔認識を行い、顔の動きや表情に合わせて3D モデルが動いてくれるサービス。

さらに、自分で用意した 3D モデルも読み込んでくれる。最高じゃないか…

しかし、FaceVTuber に表示されている 3D モデルをどうやってカメラ上に出力させるか。

画面共有という手段もあるが、それだと自分以外のメンバーが画面共有できなくなるので、会議の進行の妨げとなってしまう。

仮想カメラを作成する

そこで、仮想カメラを作ってくれる CamTwist を使ってみた

camtwiststudio.com

インストール後、次のように設定

Settings の項目に仮想カメラで出力したい画面をセレクトボックスから選べるので、FaceVTuber が起動しているウィンドウを選択する。 FaceVTuber はポップアップウィンドウから開くのがオススメ

QuickTime Player で動作確認

QuickTime Player を起動 → ファイル → 新規ムービー収録 の順にクリック

録画マークの右隣にあるアイコンをクリックし、出力先のカメラをCamTwist(2VUI) にする

すると……

仮想カメラに FaceVtuber の映像が出力できた！

Zoom に出力

最後に会議中の Zoom で、QuickTime Player と同じように出力先のカメラを CamTwist(2VUI) に変更する。

自分のカメラには FaceVTuber の映像が出力されて、他のメンバーの画面共有が観れることを確認。

楽しい！！！！

仕事はしよう

アイスブレイクとして使えるなと思いました。 ちゃんと会議に集中します。

GeoJSON で遊んでみる

GeoJSON

GeoJSON とは、JSON を用いて GIS データ構造を表現(エンコード)するためのフォーマット。

Point や、Polygon などは GeoJSON だと以下のように表現できる。

記法

まずは簡単な Points (点) から

{
  "type": "Point",
  "coordinates": [139.74543, 35.65858]
}

GeoJSON は地理座標の定義が 軽度, 緯度 らしく、Google Maps Platform の地理座標をそのまま使うと全く違う場所にピンが刺さったりするので注意。

続いて Polygon (多角形)

{
   "type":"FeatureCollection",
   "crs":{
      "type":"name",
      "properties":{
         "name":"urn:ogc:def:crs:OGC:1.3:CRS84"
      }
   },
   "features":[
      {
         "type":"Feature",
         "properties":{

         },
         "geometry":{
            "type":"Polygon",
            "coordinates":[
              [[139.72271155844004,35.73018546378905],
              [139.7216762257603,35.72903145841217],
              [139.7226686430958,35.72833904716046],
              [139.72336065302164,35.72904016794933],
              [139.72310852537424,35.72918387517501],
              [139.723591322996,35.72976741094241],
              [139.72271155844004,35.73018546378905]]
            ]
         }
      }
   ]
}

Github 上で Preview が確認できる

GIthub は GeoJSON のプレビュー機能に Mapbox を採用しているらしく .json かつ定義内容が type: "FeatureCollection" の GeoJSON だとよしなに表示してくれるみたい。

以下 Gist から gist.github.com

Nuxt 2.11.0 では core-js@3.X がサポートされていないらしい

ポートフォリオサイトの Nuxt プロジェクトに firebase を導入したところ、core-js のモジュールが不足しているとのエラーが出ていたので、最新バージョンの core-js をインストールしたところ、再びエラーが発生してハマった。

 ERROR  Failed to compile with 39 errors                                                    friendly-errors 01:13:23

These dependencies were not found:                                                          friendly-errors 01:13:23
                                                                                            friendly-errors 01:13:23
* core-js/modules/es6.array.find in ./.nuxt/client.js                                       friendly-errors 01:13:23
* core-js/modules/es6.array.iterator in ./.nuxt/client.js, ./plugins/firebase.js            friendly-errors 01:13:23
* core-js/modules/es6.date.to-string in ./.nuxt/utils.js, ./.nuxt/components/nuxt.js        friendly-errors 01:13:23
* core-js/modules/es6.function.name in ./.nuxt/client.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/SkillList.vue?vue&type=script&lang=js&
* core-js/modules/es6.object.assign in ./.nuxt/client.js, ./plugins/firebase.js             friendly-errors 01:13:23
* core-js/modules/es6.object.keys in ./.nuxt/client.js                                      friendly-errors 01:13:23
* core-js/modules/es6.object.to-string in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
* core-js/modules/es6.promise in ./.nuxt/client.js, ./plugins/firebase.js                   friendly-errors 01:13:23
* core-js/modules/es6.regexp.constructor in ./.nuxt/utils.js                                friendly-errors 01:13:23
* core-js/modules/es6.regexp.match in ./.nuxt/client.js                                     friendly-errors 01:13:23
* core-js/modules/es6.regexp.replace in ./.nuxt/utils.js, ./.nuxt/components/nuxt.js        friendly-errors 01:13:23
* core-js/modules/es6.regexp.search in ./.nuxt/utils.js                                     friendly-errors 01:13:23
* core-js/modules/es6.regexp.split in ./.nuxt/utils.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/components/nuxt-build-indicator.vue?vue&type=script&lang=js&
* core-js/modules/es6.regexp.to-string in ./.nuxt/utils.js, ./.nuxt/components/nuxt.js      friendly-errors 01:13:23
* core-js/modules/es6.string.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
* core-js/modules/es6.string.iterator in ./.nuxt/client.js                                  friendly-errors 01:13:23
* core-js/modules/es6.string.repeat in ./.nuxt/utils.js                                     friendly-errors 01:13:23
* core-js/modules/es6.string.starts-with in ./.nuxt/utils.js                                friendly-errors 01:13:23
* core-js/modules/es6.symbol in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js   friendly-errors 01:13:23
* core-js/modules/es7.array.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
* core-js/modules/es7.object.get-own-property-descriptors in ./.nuxt/index.js               friendly-errors 01:13:23
* core-js/modules/es7.promise.finally in ./.nuxt/client.js, ./plugins/firebase.js           friendly-errors 01:13:23
* core-js/modules/es7.symbol.async-iterator in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
* core-js/modules/web.dom.iterable in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
                                                                                            friendly-errors 01:13:23
To install them, you can run: npm install --save core-js/modules/es6.array.find core-js/modules/es6.array.iterator core-js/modules/es6.date.to-string core-js/modules/es6.function.name core-js/modules/es6.object.assign core-js/modules/es6.object.keys core-js/modules/es6.object.to-string core-js/modules/es6.promise core-js/modules/es6.regexp.constructor core-js/modules/es6.regexp.match core-js/modules/es6.regexp.replace core-js/modules/es6.regexp.search core-js/modules/es6.regexp.split core-js/modules/es6.regexp.to-string core-js/modules/es6.string.includes core-js/modules/es6.string.iterator core-js/modules/es6.string.repeat core-js/modules/es6.string.starts-with core-js/modules/es6.symbol core-js/modules/es7.array.includes core-js/modules/es7.object.get-own-property-descriptors core-js/modules/es7.promise.finally core-js/modules/es7.symbol.async-iterator core-js/modules/web.dom.iterable

Issue でもいくつか同様の事象が起票されていることが分かり、どうやら core-js 3系のサポートがまだ未完了とのことだった。

core-js 2系をインストールしたところ、無事アプリケーションが動くようになった。

また、以下の PR で、core-js 3系へのサポートを行っているとのこと。

github.com

ブログ始めました

はじめに

こんにちは、nekoze(@nekoze_da) です。

2019年では技術書典、技書博などに参加し、技術同人誌を3冊も作ることができました。

2020年からは同人誌だけでなく、ブログ媒体でも継続的に技術発信を行っていきたいなという想いから、はてなブログの方を作成しました。

このブログをこんな風にしたい

note でもたまに執筆していますが、おそらくこんな風に使い分けていこうと思っています。

• まとめ記事、職種関係なく多くの人に見てもらいたい内容 → note
• 技術的な内容(もといメモ) → はてブ

内容的に、はてなブログでの投稿数は多くなるかと思います。 少しでも私の知見がお役に立てれば幸いです。

継続は大事

to 自分へ

2020年12月31日にこの記事しか無い最悪な展開になっていないことを心から祈っています。(ちゃんとやれよ)

本年もどうぞよろしくお願いします！