まだプログラマーですが何か?

プログラマーネタとアスリートネタ中心。たまに作成したウェブサービス関連の話も http://twitter.com/dotnsf

Google Fit は Google のヘルスケア関連プラットフォームと、その SDK を提供しています:
https://developers.google.com/fit/

2020062600


Google Fit SDK は Android 標準アプリである Google Fit を操作するものです。簡単に言えば「Android の歩数カウント情報を取得する」ための SDK といえます。

この SDK の1つがブラウザ用の JavaScript で提供されており、ウェブアプリケーションに組み込んで使うことが可能です。データを取得するまでを実際に作ってみたので、その準備手順を含めてまとめてみました。


【Google APIs Console へのプロジェクト登録】
この Google Fit SDK を使う上で最初に必要な作業は Google APIs Console へプロジェクトを登録して Client ID を取得することです(SDK は Client ID を指定して動かすことになります)。
https://console.developers.google.com/flows/enableapi?apiid=fitness&pli=1

Fitness API を使うことになるアプリケーションプロジェクトとして、既存のプロジェクトを流用するか新たにプロジェクトを作成します。そして「使用する API」は「Fitness API」を選択し、「使用する場所」は「ウェブサーバー」を選択、更に「アクセスするデータの種類」は「ユーザーデータ」を選択します。最後に「必要な認証情報」をクリックして、クライアント ID を取得します:
2020062601


次の画面で OAuth 認証用のドメイン登録をします。「承認済みの JavaScript 生成元」と「承認済みのリダイレクト URI」に以下のアプリを動かす URI を指定します。ローカルで動作確認する場合であれば両方に "http://localhost:8080" を追加して保存します※:
2020062602

※以下で紹介するサンプルを https://localhost:8080/ という URL にアクセスして参照する場合の設定です。異なるホスト名やポート番号を使う場合は適宜変更してください。

これで Google APIs Console 側の準備は完了です。



【サンプルアプリケーションで動作確認】
動作確認用の Node.js 向けサンプルアプリケーションを以下に公開しておきました。Node.js がインストール済みの環境であれば実際に動かして動作を確認することが可能です:
https://github.com/dotnsf/google_fit


zip をダウンロードして展開するか、git clone して、自分の PC 内にプロジェクトファイルを展開します。実質的に public/index.html ファイルを 8080 番ポートで公開するだけの Node.js アプリケーションです。

実際に動作させる前に、public/index.html ファイルをテキストエディタで開き、8行目の client_id 変数の文字列値(初期値は 'your_client_id' )を上記で取得したクライアント ID の文字列値に書き換えて保存します:
2020062609


これでサンプルアプリケーションを動作させる準備ができました。以下のコマンドを実行してアプリケーションを稼働状態にします:
$ cd google_fit

$ npm install

$ node app


稼働状態になったアプリケーションは 8080 番ポートでリクエストを待ち受けています。ウェブブラウザで http://localhost:8080/ にアクセスしてみます。正しく動作していると最初に OAuth 認証が実行されるので、Android スマホで利用しているものと同じ Google アカウントでログインします:
2020062604


Google アカウントを選択してログインし、正しく処理が実行されると(このコードでは)2019/03/01 以降の歩数記録を取得します。何種類かの dataSource ごとの記録が表示されるはずです:
2020062608


どれか1つの dataSource をクリックすると、その dataSource に関して更に詳しく日時やその時の歩数が表示されます:
2020062609


↑自分は Android をメインスマホにしていないため、歩数が少ない・・・



実際に使っているコードは OAuth 認証のための authorize 関数と、そのコールバック先で実行している dataSource 一覧のフェッチ、そして各 dataSource ごとの歩数カウントのためのデータセットのフェッチです。JavaScript 自体はかなりシンプルになっていると感じました。



(参考)
https://qiita.com/feb19/items/383848119ba1bdfe5110


人気のテキストエディタである Visual Studio Code(以下 "VSCode")の機能を独自に拡張するプラグインの開発に挑戦してみました。以下で紹介するプラグインの開発は主にこのページにかかれている内容を参照し、参考にさせていただきました。ありがとうございます:
Visual Studio Codeの拡張機能を一通り触って自分用に公開するまで


作った拡張機能は MOTD(Manhole of this day) といいます:
https://marketplace.visualstudio.com/items?itemName=dotnsf.manholeofthisday

2020062305


機能は名前そのままですが、拙作マンホールマップの機能の1つである「今日のマンホール」を VSCode 内に表示する、というマンホーラー向けのものです。

VSCode にこのプラグインをインストールするには左ペインから「拡張機能」を選ぶか、Ctrl + Shift + X を押して拡張機能画面に移動し、検索バーに "manholeofthisday" と入力します("manholeof" あたりまで入力すると、検索候補が一つになります)。そして「インストール」と書かれた箇所をクリックしてインストールします:
2020062301


インストール後、実際に MOTD 機能を利用する場合は Ctrl + Shift + P でコマンドパレットを開き、このパレットに "MOTD" と入力してコマンドを検索し、最後に見つかった MOTD 部分をクリックします:
2020062302


MOTD コマンドを実行した日(月&日)のマンホールがマンホールマップの「本日のマンホール」に記録されて存在していた場合は VSCode 内の新しいタブが一つ追加され、その中で「本日のマンホール」画像と説明が表示されます。なおこの機能の実現には Webview API を使っています:
2020062303


画像部分をクリックすると、ブラウザで該当マンホールのマンホールマップ内ページが開き、より詳しい情報を参照することができる、というものです:
2020062304



この MOTD プラグインのソースコードはこちらで公開しています。開発言語として TypeScript を選ぶこともできましたが、今回は JavaScript で開発しました。この手軽さもハードル低くていいですね:
https://github.com/dotnsf/manholeofthisday

 

最近マイブームになっている「『あつまれ どうぶつの森(以下『あつ森』)』のマイデザイン」ネタです。いままではエンターテイメント色が濃い内容でしたが、ちょっとだけ業務に寄せてみました(ほんのちょっとだけ)。


『あつ森』の「マイデザイン」は 32x32 のピクセルデータになっています:
EYXVHfAUwAAz0tb


このサイズはノーツ/ドミノのデータベースアイコン(以下『DBアイコン』)と同じです:
2020061500


・・・ということは!! というわけで(?)インポートツールを作ってみました。データが流れるロジックとしてはこんな感じ:
  1. ノーツ/ドミノのデータベース(サーバーとファイルパス)を指定
  2. 指定データベースからアイコン情報を取り出す
  3. 取り出したアイコン情報を『あつ森』のマイデザイン情報に変換
  4. 変換したマイデザイン情報を QR コード化して画面に表示
  5. Nintendo Switch Online アプリで QR コードを読み取り
  6. 『あつ森』からマイデザインにダウンロード

このうち4以降の部分は過去のブログで紹介したものと同じですが、1~3部分が今回挑戦した部分です。内容が内容ということもあってググってもサンプルコードや役立ちそうな情報が見つからず、ほぼ独自実装でした。

で、この1~3部分を実現するウェブアプリケーションを作ったわけですが、そのシステム構成はこのようになります:
2020061500


ご覧のように2つのシステム(赤字部分2つでツールとして成立)から成り立っています。理想を言えば①の Domino Servlet(Java Servlet)のみで QR コードを生成できればよかったのですが、現時点では実現できていません(理由は後述)。Java Servlet のみで実現できなかった部分を補足する②のアプリケーション・サービスを別途足すことで実現しています。


作ったシステムはこちらです。ソースコード含めて MIT ライセンスで公開しています:
https://github.com/dotnsf/nsficon2qr


以下、このシステムのセットアップ方法です。ドミノサーバー環境がある方で『あつ森』ユーザーの方(加えて Nintendo Switch Online 加入済みの方)はぜひ試してみてください。ちなみに自分は CentOS 7.8 上の Domino v10.0.1 で動作確認しています。


まず上記リポジトリを git clone するか zip ダウンロード&展開して、nsficon2qr プロジェクトソースコード一式を手元に用意します。このプロジェクトフォルダには java フォルダと node フォルダが含まれており、それぞれ上述の①、②システムを構成するパーツになっています:
2020061501


では順にセットアップしていきます。まずは①ですが、こちらは Domino 環境側にも事前準備が必要です。管理者 ID で Domino サーバーに接続して Domino ディレクトリのサーバー文書を開きます。そして "Internet Protocols" タブの "Domino Web Engine" を選び、その中の "Java Servlets" カテゴリー内を以下のように設定して保存し、サーバーを再起動します:
  • Java Servlet Support : "Domino Servlet Manager" を選択
  • Servlet URL path : "/servlet" と入力※
  • Class path : "domino/servlet" と入力※

2020061502

※これらの設定をすることでデータディレクトリ(CentOS 版だと /local/notesdata)以下の domino/servlet というフォルダの中に存在しているサーブレットのクラスファイル(例えば a.class)を "/servlet/a" という URL パスで指定して実行できることになります。

加えて、Class path に指定したフォルダ(この例だと /local/notesdata/domino/servlet)はデフォルト状態では存在していないため、このフォルダを作成しておきます:
$ sudo mkdir -p /local/notesdata/domino/servlet

$ sudo chown notes.notes /local/notesdata/domino/servlet


これで Domino Servlet Engine が動くようになりました。改めて github からダウンロードした nsficon2qr プロジェクトを開き、java フォルダ内の nsficon2qr.class ファイルをサーブレットフォルダ(上述の例であれば /local/notesdata/domino/servlet/)にコピーします:
$ cp nsficon2qr.class /local/notesdata/domino/servlet

$ chmod 755 /local/notesdata/domino/servlet/nsficon2qr.class

そして、Domino サーバーコンソールから HTTP タスクを再起動します:
> tell http restart


これで①部分のセットアップは完了です。続いて②部分もセットアップします。なお ②は Domino と同じシステム上に作ってもいいですし、①の Domino サーバーに接続可能な別のシステム上に構築しても構いません。動作確認目的であれば、 localhost (つまり自分の PC )上であっても構いません。

②を構築する環境上に Node.js 環境を構築します。リンク先を参照して、各自のシステムに合わせて最新モジュールをインストールしてください(V10 以上であれば動くはず)。

次に node/settings.js ファイルをテキストエディタで編集します。実質1行だけのファイルですが、この中で定義されている exports.servlet_url の値が①で用意したサーブレットにアクセスするための URL となるように編集して(要するに IP アドレス部を変え、必要であればポート番号を追加して)保存します:
exports.servlet_url = 'http://192.168.xx.xx/servlet/nsficon2qr';

その後、ターミナル(コマンドプロンプト)を開いて node/ フォルダに移り、以下のコマンドを実行して②のアプリケーションを起動します:
$ cd node

$ npm install

$ node app

これで②も準備完了です。ウェブブラウザで②が動いているシステム(自システムであれば localhost)の 8080 番ポートにアクセスしてください。以下のような画面になればセットアップは成功です:
2020061503


実際に2つのデータベースを使って動作確認した様子を紹介します。以下ではこの2つのデータベースをマイデザイン化しています:
2020061509


まずは "Node API Demo" というタイトルのデータベースです。こちらはアプリケーションアイコンが設定されているデータベースです:
2020061504


ちなみにもう1つの "デフォルトアイコン" というタイトルのデータベースではアプリケーションアイコンは設定されておらず、クラシカルアイコンが表示されています。こちらも後で試します:
2020061505


まずは前者のデータベースをマイデザイン化してみましょう。②のアプリケーションにアクセスして、Domino サーバーから見たデータベースファイルを指定します。サーブレットが動いている Domino サーバー上のデータベースを対象とする場合であれば "Domino Server" 欄は空のままとなります。また "FilePath" 欄はデータベースファイルのパスを指定します(通常のデータベース指定方法と同じです)。なおこの機能はサーブレットが動いているサーバーの ID を使って動くため、この ID でデータベースの設計要素にアクセスできる権限が必要です。最後に "NSFICON2QR" と書かれた青いボタンをクリックします:
2020061506


データベース容量や複雑さによってパフォーマンスが変わりますが、数秒で解析が終わり、QR コードが画面内に表示されます:
2020061507


この QR コードをスマホにインストールした Nintendo Switch Online アプリケーションのタヌポータル画面から読み取ります。この QR コードを読み取る箇所から先の手順はこちらで紹介した手順と全く同じなので、必要に応じてこちら(の後半部分)も参照ください。

タヌポータルで読み取って保存した後に Nintendo Switch の『あつ森』を起動し、マイデザインからダウンロードを試みると、QR コードで読み取ったデザインが見つかります。「オッケー!」を選択することで『あつ森』ゲーム内で利用することができるようになります:
EaiWUQ6U8AAQsr2


"Node API Demo" という、データベースタイトルと同じ名前のマイデザインが、アプリケーションアイコンをインポートした形でダウンロードできました:
EaiWUROU0AI6-dL


ダウンロードしたマイデザインを地面の模様として貼り付けてみました。これ以外にアバターのトップスとして身につけたりすることもできます:
EaiWURXUEAAq_wq



同様にしてアプリケーションアイコンのない(クラシカルアイコンだけの)データベースも指定して、QR コードを生成してみました。これもスマホの Nintendo Switch Online アプリ内タヌポータルで読み取って、『あつ森』内にダウンロードできます:
2020061508


クラシカルアイコンのマイデザインも取り込むことができました:
EaiWUQ4UYAADIbh


(注 ↑よく見るとクラシカルアイコンを取り込んだ結果の左右が反転していました。現在のソースコードでは修正済みです)


あらためて元のデータベースアイコンと見比べてみます。ちゃんとエクスポートできていますね:
2020061500




以下に現時点での制限事項などをメモしておきます。

まず、上述の「本来はサーブレットのみで実現したがったができなかった」点について。最終的に表示する QR コード(の画像)をサーブレットの実行結果として返すことができるのが自然だし、理想的な挙動だと思っています。一方でこの『あつ森』マイデザイン用の QR コードは(URL などの文字列ではなく)バイナリ配列データを示す QR コードとなっていて、その意味でも少し特殊な仕様となっています。Java で利用できる QR コード生成ライブラリは有名な ZXing をはじめいくつかありますが、このバイナリ配列データを示す QR コードを生成可能な Java ライブラリを見つけることができなかったため、理想的な挙動を断念したという経緯があります(②がデータ入力部分と QR コード生成部分を担当しています)。もしどなたかバイナリ配列の QR コードを生成可能な Java ライブラリをご存知であれば改良に挑戦したいのでぜひ教えてください。

次にマイデザイン化するアイコンについて。上述のように1つのノーツデータベースには最大2つのアイコンが定義されています:
2020061504


これはノーツ v8.5.2 からの新仕様で、それ以前は特定のカラーパレットから選択した16色(+透明な背景色)だけが利用できるもの(以降「クラシカルアイコン」と呼びます)でした:
2020061500


v8.5.2 からは 32x32 のサイズであれば各種画像ファイルを指定して取り込むことができるようになりました(以降、こちらを「アプリケーションアイコン」と呼びます)。実際にワークスペースなどに表示されるアイコンは
 ・アプリケーションアイコンが設定されている場合はアプリケーションアイコン
 ・アプリケーションアイコンが設定されていない場合はクラシカルアイコン
  (クラシカルアイコンにはデフォルト画像が設定されている)
のように判断されて表示されます:
2020061509


このアプリケーションでも同様の判断基準でアイコン情報を取り出してマイデザイン化しています。ただここでマイデザイン特有のカラーパレットの問題が生じます。

簡単に説明すると、『あつ森』マイデザインに利用できる色は自由に選べるわけではなく、特定の 159 色から選択する必要があります。また1つのマイデザインの中で最大15色(+背景色)までしか選ぶことができない、という制約があります。

一方、ノーツアイコンですが、クラシカルアイコンの場合は16色から選択、アプリケーションアイコンの場合はより自由度高く利用できる、という違いがあります。

今回、このツールを作るにあたり、このカラーパレットの違いを吸収する必要がありました。以下のような仕様にしています:
・背景色は強制的に白
・アプリケーションアイコンの場合はカラーパレット内の利用頻度の高い15色に減色
・クラシカルアイコンの場合は2つの灰色を同一視する形で15色に減色
2020061500


これらの仕様の違いによって、ノーツデータベースアイコンが 100% マイデザインで再現できるわけではない、という点をご了承ください。




このページのトップヘ