Fire HD 8 Tablet を「画面付きAlexa」として使える Alexa Show mode を試す

Posted 18 days ago by yoosee.
  alexa amazon smartspeaker review

Amazon Fire HD 8 タブレットを画面付きAlexaとしてセットアップした。安価で手に入ったタブレットの活用としてはかなり便利で気に入っている。但し現状は Amazon.com USアカウントのみ対応。

Fire HD 8 Alexa Show mode

先日の Amazon プライムデーで何か買い物してやろうと思い、とは言え特段なにもないなーと眺めつつ折角なので Fire HD 8 Tablet を1つ購入した。通常でも安い 8,980円が 3,500円引きで 5,480円と、もうタブレットの値段じゃないよねと言う安さ。

Fire HD 8 の下には Fire 7 Tablet が三千円台で出ていたのだけどあえて HD8 にしたのは、別にタブレットが欲しかったからではなく Alexa Show Mode を使ってみたかったからである。Show mode は現状 7 では対応しておらず、HD 8 か 10 の 5.6.2.0 以降のファームウェアでのみ対応している。ファームウェアは最新版に更新すれば済むので、現状の最新版 HD 8 を買えば問題なく利用できる。

Amazon.com Help: Show Mode on Your Fire Tablet

Alexa Show mode とはなにかというと、Amazon のタブレットを画面付き Alexa として使う 事が出来る Amazon 公式の機能である。画面付き Alexa である Echo Spot もリリースされたが、見ての通りで Fire HD 8 の方が安いし画面も大きい(機能に違いはあるかもしれないが)。

Fire HD 8 で Alexa Show mode を使う方法は簡単というか基本的に標準機能なので、タブレットに電源を繋いだ状態で通知エリアのプルダウンメニューから Show mode をトグルするか、Alexa に Alexa, switch to Show mode とボイスコマンドを送るだけでいい。ただ現時点では US版アカウントのみ対応で、日本で買った Fire HD 8 でも使えるのだけど Amazon.co.jp ではなく Amazon.com のアカウントを使う必要がある。日本でも Echo Spot がリリースされたので、日本でも近いうちには使えるようになりそうだが、現時点では注意が必要。

Alexa Show mode で出来ること

Show mode は通常の Echo Dot のようにボイスコマンドで大体同じ命令をこなせるが、画面付きなのでビデオ再生もできる。また Show me Calendar や Tell me weather のような情報を聞くコマンドではカレンダーの予定や天気予報を画面にも表示してくれるのが想像以上に便利。Play music での音楽再生時もアーティストと楽曲名を表示してくれるので大変分かりやすい。タイマー設定も残り時間が画面表示されたりと地味に便利なことは多い。

Fire HD 8 は普通のタブレットとしてカメラもついているので、Alexa の機能でビデオ電話をかけることもできる。Alexa から Alexa, video call to Dad などで起動できるので子供からの連絡などにも使える。またこれは別に Show mode は関係がないが、家の中の Alexa 同士で Drop in として通話ができるので、インターフォンとしても使えるのも地味に便利(但し現状の Show mode は Drop-in の発信は出来るが着信は未対応)。

Show mode は Alexa のボイスコマンドが無い時にも常時表示として登録したアルバムの個人写真をスライドショーで表示させたり、カレンダーの内容を表示させたりもできる。書き忘れたが Alexa のカレンダーは Google アカウントや Outlook/Office 365 、Apple iCloud のカレンダーなどを使うことが出来るし、Alexa からそれらへの予定の追加もできる。うちは Google Home 用に家族共有の Google アカウントを一つ作っていて、そこに個人のカレンダーを共有して一括表示させているが、これと Alexa を相互運用が可能なのはありがたい。

Alexa を使う人が周りに誰もいない際は画面をダークアウトして時計だけ表示するモードになってくれて、近接センサーで近くに人がくると画面を復帰する動作になっていて、ここもよく出来ている。また既に Echo Dot など別の Alexa 端末を同じ・近い部屋で使っている場合は、ボイスコマンド発声者の近くにいる Alexa が返事をするようになっていて、たまに意図しない方から返事が返ってきたりはするものの、まあまあちゃんと機能しているようだ。

一点だけちょっと困ったのは、Amazon Music Unlimited for Echo Single Device という Amazon Music の音楽聞き放題を Echo 1台での再生限定で月額 $3.99 、日本でも 380円で契約できる安いプランがあるのだけど、当然ながらこれだと Tablet の方では Unlimited の再生ができない。そもそも Echo Dot の方をアンプとスピーカーに繋いであることもあり、Tablet への Alexa, play music を Echo Dot にリダイレクトできる方法があれば便利なのだけど、今のところそう言った設定は見当たらない。Show mode での Amazon Music は Lyrics (歌詞の表示)対応なのが大変便利なので使えれば使いたいのだけど…。

とは言えそれをのぞけば Alexa Show mode は安価で画面付き Alexa を使えるようになる大変便利な機能で家族で気に入っている。正直最近は日本語で使っている Google Home の方が存在感があったのだけど、これを導入してからは Alexa がだいぶ復権している感じだ。日本語版対応がいつになるかは分からないが、対応が出たら次のプライムデーあたりで Fire Tablet を狙ってみるのも良いのではないかと。

追記

Kazuyoshi Kato on Twitter: “"Play music on Echo Dot” とかでリダイレクトできるはずです https://t.co/4JPHVL52Th > Alexa, play music を Echo Dot にリダイレクト… “

この通り、Play music on Echo Dot でタブレット側から Echo Dot で音楽再生できて、しかもその際は Echo Dot 側の Unlimited 契約も使えている。完璧。感謝します。あ、ただ lyric は表示されないかな。

Amazon.com Help: Play Music on Multiple Echo Devices

この記事にはたどり着いてたんだけど、タブレットと Echo Dot で Group を作れなかったので駄目なのかと思ってそれ以上試していなかった。

 

財布の中のEDC: コームとミラー

Posted 23 days ago by yoosee.
  edc cardtool

久しぶりにEDCの話として、普段から財布に入れているEDCをご紹介。財布にはいるEDCというとやはりカード型ツールというのがいくつもあって、以前にも1つ記事を書いたことがある。

野生で餓死しないためのクレジットカードサイズのサバイバルツール READYMAN Wilderness Survival Card - W3er

今回はそういったものとはちょっと毛色が違い、意図せずしてだが身づくろいの道具が入っている。見ての通り、櫛(コーム)と鏡である。

財布に入っているEDC コームとミラー

コームの方は Go Comb という商品で幾つもバリエーションがあるが、これはステンレス製でコームのみのシンプルなもの。日本だと以前は MOMA Store でも取り扱いがあったのだが最近見当たらなくなった。米国ならば Amazon.com などで売っている。Amazon.co.jp にも取り扱いはあるがかなり高いので、似たような商品 をトライした方がいいかもしれない。使っていないのでお勧めはできないが。

Go-Comb - Wallet Comb - Sleek, Durable Stainless Steel Hair + Beard Comb

ステンレス製なので静電気で髪が絡まるなどはなく、ちょっとした身だしなみを整えたいときにくしが手元にあるのは意外と重宝する。うちの場合はどちらかと言うと自分のよりも子供の髪をとかすのに使うことが多いけど。穴が多いデザインなのでサイズにしては軽量だけど剛性は結構しっかりしていて折れ曲がったりはしないし、エッジがきちんと丸めてあるので髪をとかすときに引っかかる感覚もなく、よくできている。

もう一つはこれもステンレス製なのだが、MoMA ステンレススチールミラー である。これは国内の MOMA ストアや Amazon.co.jp でも取り扱いがある。

MOMA ステンレススチールミラー

ステンレスをポリッシュして作られているらしきミラーなので反射率は多少低いし色味も普通の鏡と比べると少しくすんだ感じだが、手鏡としてちょっとしたチェックに使うくらいであれば細部までクリアに見えるし十分きれいな鏡として使える。またなによりガラスの部分がないので財布に入れて持ち入れても割れる心配をしなくていいのがよい。

ミラーはホイッスルと並んで遭難時にシグナルを送る用途で持っておいた方が良いものなので、EDCキーチェインに付けているチタン製のホイッスルと合わせて防災用品としても役立ちそうだ。なにより財布に入れられると自動的にどこにでも持ち歩く状態になるのが素晴らしい。

 

FitBit Versa 用の 8-bit Grayscale PNG 作成

Posted about 2 months ago by yoosee.
  versa fitbit

FitBit Versa SDK に Image Grayscale Magic! という「8-bit Grayscale PNG を用意してSVGから <image> で読み込むと fill プロパティで色指定が出来るよ!」とうのがあってですね、実際に ImageMagick で変換したんだけどまあうまくいかなくて軽くハマったのでメモ…

% convert original.png -colorspace gray tmp.png
% convert tmp.png -background white -flatten tmp.png

要は Alpha channel があるとちゃんと表示されないらしい。将来のSDKでは直るのかもしれないけど…。

ちなみに FitBit SDK の SVG で fill で塗られる色はどうやら白色らしいので、元が白(ないし透明)地に黒のアイコンの場合は白黒反転させる。

% convert tmp.png -negate dest.png

なお結果はこんな感じになるのが正解っぽい。

% identify dest.png
dest.png PNG 64x64 64x64+0+0 8-bit Gray 256c 1619B 0.000u 0:00.000
% file dest.png
dest.png: PNG image data, 64 x 64, 8-bit grayscale, non-interlaced

before convert

after convert

ここで gray+alpha になってたりするとうまくいかなかった。8-bit Grayscale Gray じゃなく 8-bit Gray 256c の方が問題なく動く気がするけど気のせいかも。なんにしてもこんなのはすんなり使えて欲しい。

おまけでサイズ変更もする場合。ここでは元の画像を縮小し、正方形の 64x64 アイコン画像にしている。

% convert original.png -colorspace gray tmp.png
% convert tmp.png -resize 64 -background white -flatten tmp.png
% convert tmp.png -gravity center -extent 64x64 tmp.png
% convert tmp.png -negate dest.png

この辺、ImageMagick の常ではあるんだけど、コマンド引数や実行の順番を守らないと画像が何故か2値になって色がつぶれたり Versa で認識できなくなったりなんだりあってきっと理由はあるんだけど黒魔術をこれ以上追う元気がない。なお複数ファイルに一括で処理を回すなら convert の代わりに mogrify を使うなり shell 内で for / foreach で回すなりしましょう。

 

FitBit Versa 用ウォッチフェイスの開発

Posted 2 months ago by yoosee.
  programming versa fitbit

FitBit Versa 用ウォッチフェイス Obsidian を書いた際に使った FitBit Dev の開発概要を以下にざっくり記載する。基本的には dev.fitbit.com がそれなりに充実しているので (痒い所に手が届かない感はあるのだが) そちらを参考すればよい。

FitBit Versa 向けの開発環境

FitBit Versa (とIonic) 向けの開発環境は dev.fitbit.com にSDKやReferenceなどの開発情報がまとまっていて、 Pebble のようにオンラインの開発環境 FitBit Studio が用意されているので開発自体は簡単に始められる。Cloud Pebble と比べると、Github などへの連携がないことと、シミュレーターが外付け(Windows用アプリがある)なこと等が違いで、特に Github 連携は早く対応して欲しい。なお開発は全て FitBit アカウントに紐ついて利用できる。

FitBit Studio

開発自体は Pebble と比べるとだいぶ今どきで、基本は全て JavaScript で、UIはSVG(XML)で記載する。UI の操作は基本的にSVGに対するJavaScriptによるDOM操作で行い、画像や文字、Shape などオブジェクトの操作を行う。色やフォントなどはCSSで設定できることもあり、感覚的にはほぼHTML UIのプログラミングだ。JavaScript も最近の版、少なくともES6相当で、const, let や fetch() なども普通に使える。

実機デバッグ

開発は基本 Simulator をインストールすれば実施できるが、timing issue などで実機に入れると動かなくなったりすることがあったので一応実機確認した方がよいかも。実機試験はスマホ側で FitBit App から Developer Menu の Developer Bridge を有効にするのと、Versa の設定から同じく Developer Bridge を有効にしてから FitBit Studio で接続先を選択すればよい。この際、スマホだけでなく Versa も Wifi 接続している必要があるようなので要注意。また FitBit Gallery App Manager に .fba ファイルをアップロードすると作成されるアプリのリンクを使ってインストールすることもできる。この直接リンクは FitBit が Review for Publish を Approve する前から利用できる。

フォルダとファイル構成

基本的にどのファイルがどういう用途で呼ばれるかのディレクトリ構成が決まっていて、概ね以下のようになっている。これ以外のファイルのおき場所は任意で、相対パスで呼び出せばよろしい。

  • app/index.js : アプリ起動時に呼ばれる main ファイル。他の実行時ファイルは基本的にここから呼び出す
  • companion/index.js : スマホ側で実行されるコンパニオンのファイル。インターネットアクセスや設定呼び出し時の処理など
  • resources/ : GUI関係のファイル用フォルダ。画像ファイルなどのリソースも一般的にはこの下
    • resources/index.gui : GUI設定のSVG定義
    • resources/widgets.gui : GUI設定時に外部からの import や、<use> で再利用する定義を記載
    • resources/styles.css : SVGの id や class 定義用CSSファイル。x, y などの座標もCSS側で設定可能
  • settings/index.jsx : 設定画面の定義ファイル。React っぽく書く。Companion 側での処理記載が必要
  • packages.json : 謎の拡張子JSON。Permission や UUID などを記載する。FitBit Studio であればUIで設定可

例えばSVGファイルの resources/index.gui で秒針を定義して

<g id="secs" pointer-events="visible" transform="translate(50%,50%)">
   <rect x="$-2" y="-120" width="2" height="120" class="secondhand" />
</g>

動作は app/index.js (及びそこから呼ばれるファイル)で定義して ”tick” イベントからの Callback で秒針を動かす。

let secHand = document.getElementById("secs");
...
const clockCallback = (data) => {
...
  secHand.groupTransform.rotate.angle = data.secondsAngle;
};

アイコンなどの画像素材は Fitbit/sdk-design-assets から利用可能になっている。イメージファイルは 8-bit grayscale png で作るとsvgでの色指定が適用されるので、アイコンや時計の数字などはそうしたフォーマットで作るといいっぽい。

固有の部分としては Versa 本体とスマートフォン側の Companion に処理分割があり、アプリの設定やインターネットへの接続が必要な場合などは Companion 側に処理を message を使って投げ込み、また message で受け取ってやり取りする。message 処理を含め非同期処理が結構多いので、予め用意された Event 処理や、EventListener に callback を登録していく形が多い。

  clock.addEventListener("tick", tickHandler);
messaging.peerSocket.addEventListener("message", function(evt) {   
  console.log("Weather in weather/main onmessage: " + JSON.stringify(evt.data));
  weather.update(evt.data);
  onweatherupdated(weather);
})

とかこんな感じ。

実装のサンプルコード

実際のこの辺りは FitBit がサンプルコードを公開しているのでそれを参考にするのが手っ取り早い。ヘルス情報付きの時計は Fitbit/sdk-moment に大体の機能があるのでこれを基本にいじっている。天気の取得などは Pebble のコードを流用しつつ書いているが、OpenWeather を使った実装もサンプルがあるのでさほど難しさはない。

などと書いているが実際には本来 Callback で書くべきを平たく書いたせいで呼び出しのタイミングがおかしくなって動かなかったり、onmessage() のような Singleton を複数定義してしまって定義が上書きされて挙動がおかしくなったり、 Simulator では動いたのに実機テストで動かなくて四苦八苦したりと、いろいろとハマりポイントはあったのだった。実機の接続がまた不安定だったり side loading が失敗したりとか問題だらけでこれが…

とは言え複雑なことをしなければ時計を書くこと自体は大変簡単なので、興味ある人はトライしてみるとよいかと。自分のデザインした時計が自分の手首で動いているのは結構楽しくて、画面を表示させてはニヤニヤしてしまうよ。

 

FitBit Versa 用のウォッチフェイス Obsidian を公開

Posted 2 months ago by yoosee.
  smartwatch versa fitbit

スマートウォッチを使う楽しみの一つは自分で作ったウォッチフェイスを使えることだと思っていて Pebble 用にも
Obsidian Watchface for PebbleZirconia Watchface for Pebble などを作って自分で使っていたが、FitBit Versa を買ったのでそちら用にもひとつ作ってみた。正直なところ Pebble に比べても時計のバリエーションが少なくて(実際こんな感じなので)かつヘルス情報を前面に出したものばかりで気に入った時計がなかったのが動機のひとつではある。

作ったのは「アナログ時計 + 天気と気温 + ヘルス情報」という Pebble でもやっていた組み合わせで、同じ Obsidian という名前にした。Pebble と比べてヘルス情報の種類が増えているので ‘‘cycleview`` でタップ時にローテーション表示するようにして、心拍数は別途表示した。画面が四角いので四角い角丸フェイスを作るのが一番面倒だった気がする。別途 ruby でスクリプト書いてSVGを作ったけど画像で作ったほうが早かったかも。コードは以下の Github で公開してある。

FitBit App Gallery へのリンクは以下。Android なりの FitBit App が入った環境で開くと時計のインストール画面に飛ぶはず。

Obsidian
FitBit App Gallery (Obsidian clockface) へのリンク

デジタルウォッチも作ろうかと思ったのだが、FitBit SDK は今のところ未だカスタムフォントが使えないようなので保留している。まあ数字とアルファベット程度ならフォントから画像(8bit grayscale png)化して使えばカスタムフォントと同様に使えるのでひと手間だけの問題ではあるので、そのうちやるかも。

開発関係の話は “FitBit Versa 用ウォッチフェイスの開発- W3er” に別途記載した。