揚げログ

Karaage(krgpi)の技術開発関連のブログです

側面12ボタンのRazer Nega TrinityをMacでフル活用する

今回は、側面12ボタンのゲーミングマウス Razer Nega Trinity をエンジニアである私が愛用する理由を、説明したいと思う。

Razer Nega Trinity

www2.razer.com

f:id:krgpi:20191226154810j:plain

MacユーザーならMagic Mouseを使えばいいのでは?と思うかもしれないが、長期間あのマウスで作業をすると、使いにくさを感じるようになる。

Magic Mouse が使いにくい理由

薄すぎる

Magic Mouseは親指の太さ程度しか厚さがない。したがって、マウスを操作する際は、親指と薬指でマウスを挟んで動かすことになる。Magic Mouseは前半分がタッチパッドになっているので、余った人差し指と中指でタッチパッドジェスチャー操作をする設計になっている。

f:id:krgpi:20191226134205j:plain
Apple Magic Mouse

バッテリー駆動なのに充電しながら使えない

Magic MouseiPhoneと同じLightningケーブルで充電を行う。Lightningポートはマウスの裏側についているので、充電しながら使えない。

一般的なマウスとMagic Mouseの違い

タッチパネルがない

Magic Mouse で出来る, デスクトップ移動, 戻る進むが出来ない

f:id:krgpi:20191226155022j:plain

そこで多ボタンマウスがおすすめ

ボタンにコマンドを割り当てられる

例えば、右のデスクトップに移動するには、Magic Mouseでは2本指でスワイプをするが、このマウスの3番に右にスワイプする。といった風に設定できる。

私の場合、デスクトップの左右の移動を1, 3、mission control (複数デスクトップを一覧する画面)に2, を割り当てている。

f:id:krgpi:20191226134200j:plain
Razer Nega Trinity

個人的に特にRazer Nega Trinityがおすすめな理由

手の形に完全にフィット

ポイントとして高いのは、薬指を置く場所があるところである。手に力を入れない状態で宙に浮かせ、そのままの形でマウスに載せるとちょうど、その形のままマウスにフィットする。

f:id:krgpi:20191226155842j:plain

サイドパネルが3種類から選べる

12個もボタンがあるのは多すぎる、という人も安心。12キーがついている左側面は着脱式のパネルになっており、2ボタン、7ボタンのパネルと交換することができる。もちろん、2、7ボタンのパネルは付属している。

おすすめ設定

私は、Magic Mouseで使えるタッチジェスチャを中心に割り当てている。

f:id:krgpi:20191226134550p:plain

また、MagicMouseにはないジェスチャーで、ウィンドウを閉じる操作(cmd+w)に12 、4, 6で曲送り、 5で一時停止・再生 などを割り当てている。

ネットサーフィンしてる時って、あまりキーボードに触らなかったりするので、マウスだけで戻る・進む、曲送り・一時停止とか出来ると、すごい楽ですよ! YouTubeの動画も、これで一時停止出来ます!

愛用してます

Nuxt.jsで作ったSSRなwebサービスをfirebaseにデプロイする

環境

  • node v10.16.3
  • npm v6.9.0
  • nuxt v2.10.2

Nuxt.jsで作ったSSRなwebアプリをfirebase Hosting, functionsにデプロイするために行った設定の一覧です。すでにSSRモードでwebアプリができている前提で話を進めます。

1 firebase CLIの開発環境へのインストール

Firebase CLI リファレンス  |  Firebase

ここを参考に導入していきます。

2 プロジェクトの初期化を行う

$ firebase init

をプロジェクトルートで叩き、

  1. 自分のGoogleアカウントと紐付け
  2. 自分のFirebase プロジェクトと紐付け

を行います。それ以外の設定は、あとで変更するので、適当に進めます。

3 [プロジェクトルート]/firebase.json を編集する

プロジェクトルート直下に、 firebase.json というファイルが生成されているはずです。後ほど使うfirebase serve, firebase deploy のコマンドは、このファイルで設定を読み込んで実行されます。これを編集します。

{
  "functions": {
    "functions": {
      "source": "functions"
    }
  },
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "ssr"
      }
    ]
  }
}

functionsで、Firebase Functionsで動作するSSRの実行関数(js)部分の場所を指定しています。

hostingで、Firebase Hostingで静的配信するhtmlがある場所を指定しています。

rewritesで、静的ルートへのアクセスをSSRのルートへ飛ばします。sourceでどのページを飛ばすか、functionでどの関数に飛ばすかを指定しています。ここでは、"**"(全て)を"ssr"(あとで定義する関数)へ飛ばすことにしています。

4 [プロジェクトルート]/functions/package.jsonを編集する

プロジェクトルート直下に functionsというディレクトリが生成されいるはずです。firebase Functionsには、ここにあるファイル群がデプロイされます。

さらに、/functions/package.json も生成されていると思います。

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "serve": "firebase serve --only functions",
    "shell": "firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
+  "engines": {
+    "node": "10"
+  },
  "dependencies": {
    "firebase-admin": "^8.6.0",
    "firebase-functions": "^3.3.0",
 +   "nuxt": "^2.10.2"
  },
  "devDependencies": {
    "firebase-functions-test": "^0.1.6"
  },
  "private": true
}
  1. firebase Functionsで実行するnodeのバージョンを指定します。ここでは、 v10を指定します。ちなみに、Firebaseの制約で8か10しか指定できません(2019.11.25現在)
  2. また、firebase Functionsで実行する際に必要なNuxtを依存に追加します。
  3. 追加したあとで、npm install を実行してnuxtをインストールします。

5 [プロジェクトルート]/functions/index.jsを編集or作成する

functionsディレクトリの中に index.js というjsファイルを作成します。4で編集したpackage.jsonと同じ階層です。

このファイルは、Firebase Functionsで一番初めに実行されるファイルになります。3のrewritesで指定した"ssr"はここに作成する exports.ssr です。

const functions = require('firebase-functions');
const { Nuxt } = require('nuxt');
const nuxt = new Nuxt({
    buildDir: 'ssr',
    dev: false
});

exports.ssr = functions.https.onRequest(async (req, res) => {
    await nuxt.ready()
    return nuxt.render(req, res)
})

buildDir で指定する 'ssr' は、[プロジェクトルート]/functions/ssr ですが、この次の5でこの場所に必要なファイルをコピーする設定をします。

6 [プロジェクトルート]/package.jsonを編集する

[プロジェクトルート]/package.json には、nuxtが使う依存関係や npm run dev でプレビューが起動するようなスクリプトが記載してあります。

{
  "name": "MyProject",
  "version": "1.0.0",
  "description": "My shining Nuxt.js project",
  "author": "krgpi",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build && npm run build:copy:ssr",
    "build:copy:ssr": "rimraf functions/ssr && mkdirp functions/ssr && cp -R .nuxt/dist functions/ssr/dist",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
   ...(省略)
    "nuxt": "^2.10.2",
  },
  "devDependencies": {}
}

ここで、scripts→ build:copy:ssrを追加し、build で追加したbuild:copy:ssr も実行するように修正します。

build:copy:ssr に書いてあるコマンドで、nuxt buildで生成された出力ファイルを、先ほど3で指定したパスにコピーしています。

7 ローカルでプレビューする

プロジェクトルートで $ firebase serve を実行してみましょう。 $ firebase serve -p 3000 とかするとポート番号を指定することができます。

ここでは、3000にポート番号を指定したとします。コマンドを叩くと、以下のようなログが出てくると思います。

✔  functions: Using node@11 from host.
✔  functions: Emulator started at http://localhost:3001
i  functions: Watching "/[プロジェクトルート]/functions" for Cloud Functions...
i  hosting: Serving hosting files from: dist
✔  hosting: Local server: http://localhost:3000

8 Firebaseにデプロイする

ここまでできれば、プロジェクトルートで $ firebase deploy を叩くだけです。

参考

nuxt.js + firebase (cloud functions) で最小構成SSR | 丸ノ内テックブログ

SSR モードの Nuxt.js を Firebase に Deploy する Tutorial - Qiita

ローカルでテストしてサイトにデプロイする  |  Firebase

最後に

現状、firebaseのfunctionは、USリージョンしか使えなく日本からアクセスする場合、すごい遅い。東京リージョンがあるGCPのCloud Build→Cloud Runを使うのが良いと思います。

AR kit ImageTracking - トラッキング画像が画面外に出たことを検出

デリゲートメソッド didUpdate に以下のように書く。

didUpdateはARAnchorが更新される(TrackingImageの座標が変化する)間、呼ばれ続けるデリゲートメソッドである。

TrackingImageが画面外から出ると当時に、ARAnchorは更新されなくなり、このデリゲートメソッドは呼ばれなくなる。

が、画面外に出る瞬間までは、ARanchorがアップデートされるので、Trackingが終わる瞬間が最終アップデートになる

つまり、以下のコードでは、TrackingImageが画面外に出た時に一度だけPrintされる。

func renderer(_ renderer: SCNSceneRenderer, didUpdate node: SCNNode, for anchor: ARAnchor) {
     if let imageAnchor = anchor as? ARImageAnchor{
          if !imageAnchor.isTracked {
             print(imageAnchor.referenceImage.name) //画面外に出たTrackingImageの名前をPrint 
            } 
        } 
    }