「日本時間の今って、西海岸時間だと何時だっけ?」というのなら複数のTimezoneを表示できるアプリでもあればそれで問題ありません。 Chrome Extensionには便利なのがいくかあって、今までは、Chrome Extension(拡張機能)のWorld Clocksを使ってました。このアプリだと現在の時間を元にした各地の時間は分かるのですが、ではスケジュールを調整するとき、

  • 日本時間で13:00って、米国西海岸時間だと何時?
  • 米国西海岸時間で20:00って、日本時間だと何時?そして更に、米国東海岸時だと?ロンドンは?

とかなると、考える必要がありました。(少なくとも私の場合ww)ここを何とかしたいと思って作り始めたのが「Timezon Clocks」です。見た目は今まで使っていたWorld Clocksとほぼ同じにしています。

モチベーションとなった「Timezoneが複数またがる時間を同時に表示する機能」にいてはこう解決しました。

「同時に時間をババっと動かす」

です。こんな感じ↓。

無駄に動かすのも気持ち良いですw

Timezoneの設定はインストールされているChrome毎にではなく、ChromeにGoogleアカウントでログインしていれば、他のコンピュータのChromeとも共有されるようになっています。

ということで、もしよかったらお使いください〜!

インストールはこちから → [ Timezon Clocks (Chrome Web Store) ]

Wikipediaで調べて、引用のためにURLをコピペすることがよくあります。

でも例えば、現在開催中のワールドカップ。WikipediaのURLは大抵のウェブブラウザだとURLバーには

https://ja.wikipedia.org/wiki/FIFAワールドカップ

と見えている。そう、こんな感じで。

なのですが、そのURLをコピペするとこうなっちゃうんです。

URLエンコードってやつですね。ありがたいことに、ブラウザさんは人の目に優しく表示してくれてるのですがコピペするにはやっぱり困ります。

というのがキッカケでWikipedia URL ShortenerっていうChrome Extensionを作ってみました。

Wikipedia URL Shortener

さっきのFIFAワールドカップのWikipediaのページのURLはこうなります。

https://ja.wikipedia.org/?curid=288053

URLが短く、そしてシンプルになります。
(モバイルのブラウザではExtension自体がサポートされていないので利用できません)

動作している状態がこちらです。

WikipediaのIDでURLを取得したいページを表示して、地球儀みたいなボタンを押す、以上です。

動作に関して

WikipediaのURLをIDを使って短くする仕様上、wikipedia.orgのドメインでしか動きませんので、インストールして「あれっ??動かない。。。orz」となって、すぐに削除せずに以下の手順で試してみてくださいね。

  1. FIFAワールドカップ を表示
  2. URLバーの右隣に出てくるであろう、地球みたいなExtensionのアイコンをクリック

こんな手順でお願いします!!

経緯:他にも方法はあるのですが、、、

GoogleさんのURL Shortenerとかbitlyさんのとかあるので、単純に「URLを短くしたい」という要望ならばこういった既存のサービスを使うのも手ですし、またテキストのみのフォーマットで文書を書いていない限り「ハイパーリンクにしてしまう」というのも可能です。なのですが、何となく他に頼らないでよいようなのがいいな〜、と思い調査を始めたところ、この記事に行き着きました。

WikipediaのURLを短縮する方法

「おおっ、なるほど。できるじゃん。」ってなったけど、使いたい時にこのサイトに来るのも現実的じゃないし、ということでChrome Extensionにしてしまったという流れです。

おわりに

久しぶりだったのでこのチュートリアルからはじめました。楽しかったです!次はTimezoneに関わる不自由なのを解決できるのでも作ってみようと思います。

前回のエントリーから8日目にしてやっと公開。 以下↓が今回公開した2つのClock Face。(写真はVersaのだけどIonicにも対応しています)デジタルだけでいいや、と思ってたけどアナログも欲しくなって結局作ってしまった。そして、今使ってるのはアナログです。

FitbitのアプリのClock FaceからはSecondary Timezoneで検索すると速いです。

Fitbitのアプリがインストールされてるスマホからしか起動しないけどリンクはこちら。

公開までに時間がかかった理由

不備があった為に時間がかかってしまいました。その度に「ガイドラインはここにあるから読んでね」という通知が登録したメールアドレスにやって来ました。ちなみに不備が複数あってもまとめては教えてくれませんでした。

またレビューはReviewに出した日を入れて2〜3日かかると考えてください。

今回指摘された不備の内容を以下に書き出します。

Display Nameが不一致だった

画像の中の赤の四角の中の文字列が一致している必要があります。

Build Targetsでチェックを入れた種類のスクリーンショットの準備不足

以下の2つの項目を揃えましょう。

スクリーンショットは実機、またはSimulatorを接続してから、下の画像の(2)から撮ることが可能です。

もちろん実機がなくてもスクリーンショットはSimulatorを接続することで撮ることが可能です。SimulatorはFitbit Studioからダウンロードしてください。下画像の(1)。

おわりに

開発から、レビュー、公開までの一通りを体験して満足しています(笑)やっぱりJavaScriptでの開発って手軽でよいですね。

ちなみに現在公開されているSecondary Timezone for Analog v1.0.0、Secondary Timezone v1.0.3にはバグがあるのでご注意ください。土曜日から日曜日になる部分の計算をミスっています。現在(2018年6月4日23:00)修正版をレビューには出していますので、今週中には公開できるようになるはずです。

おまけ

開発しているシステムクロックを現在より前に設定する場合は注意してください

特に今回はTimezoneの時計の開発だったので時間をずらしてバグの発生しやすそうな境界条件を試したりしたのですが、コンパイル後にサーバ側から降ってくるソースは開発しているローカルコンピュータのシステム時間の直前のコードになります。「あれっ?更新してるはずなのに、更新されない!」って場合はローカルコンピュータのシステムクロックも疑う対象にしましょう。

Fitbit Versaを買って1ヶ月くらいとっても便利に使ってて満足なんだけど「タイムゾーンを2つ表示できるClock Faceがあったらもっと便利だな〜」とは思ってはいて、ググってみたらJavaScriptで開発できるって書いてったので試してみました。

Fitbit Versaとは

所謂スマートウォッチで、心拍計、歩数計、睡眠計(と表現したらよいのかな?)とかがついてて、基本的にフィットネス向けです。スマホのアプリからユーザログインを行い、スマートウォッチのセンサが取得した時系列のデータはペアリングしているスマホからクラウドにアップロードされる、というよくある仕組みです。

デバイス自体に関して、デザイン的にもスッキリしていて、それでいて軽く、交換用ベルトも豊富でとても好印象です。

開発のいろは

Fitbit OSとはFitbit社の開発しているOSで、現在のところFitbit社のFitbit IonicとFitbit Versaに搭載されています。ここからはこのOS上での開発について、Clock Faceを開発した経験から少しご紹介します。

開発に関してデバイス周辺の接続図を簡単に描くと以下のようにつながります。母艦となるスマホとはBluetoothで接続されていますが開発はBluetooth経由で行うわけではなく、それぞれの機器がインターネットにWi-Fiで直接接続してFitbit社が用意したクラウドを経由することでやりとりが行われます。

Fitbit Studioの準備と、開発、そして実機へのデプロイ

アプリにせよ、Clock Faceにせよ開発はFitbit Studioというブラウザで動作するIDE上で行います。コードのアップロードがドラッグ&ドロップでしかできないところが不便だった(2018年5月27日現在)ので、CLI(Command-line interface)が提供されることを期待しています。(開発中かも)。

実機(スマホとスマートウォッチ)にFitbit Studioからコードを送る準備は以下のような手順です。実機側からFitbit社のクラウドへの接続を行います。Fitbit Studioはユーザログインが必要になっており、このユーザログインで利用したメールアドレスとスマホでログインしたメールアドレスとが同じである場合に紐付けられ、先ほどクラウドに接続した実機がFitbit Studioの接続メニューにリストされ、開発者がFitbit Studioから接続を行う、という準備をします。

デプロイはFitbit StudioでRunをクリックすると開始されます。コンパイルされて、上記の図のCode(青色の矢印)の流れでFitbit Studioに接続された実機(スマホとスマートウォッチ)にデプロイされます。

開発言語

Fitbit OS上のアプリはJerryScriptで開発することになります。JerryScriptとは、ハードウェアからの制約が大きな、例えばIoTデバイスで使われることを想定しているLightweightなJavaScriptです。Fitbit OSがJerryScriptを使ったことがJS Foundiationの記事にもなっています。 スマホ側で設定画面を用意する場合はJSXを使います。ちなみに、ES6 Modules, Arrow Function、Classは利用することができました。

開発に関しての公式ドキュメントはこちらです。気になる方はご覧になってください。

デバッグ

デバッグする場合のログはFitbit Studioへ送られ、Consoleとして表示されます。(Logの流れは上図のオレンジ色のLogの矢印)Chrome DevToolsのコンソールのようにArray、Objectがすべて展開されての表示ではないので、少し勝手が違うところはあります。

アプリ、Clock Faceの公開

開発したアプリ、Clock Faceは公開してFitbit Gallery(以下「ギャラリ」と略)に並べることが可能です。 Fitbit Gallery App Manager(GAM)に以下の項目をを入力して、Fitbit社のレビュー受けて通過すると公開されるようです。以下はClock Faceの公開時に記入、アップロードが必要だった項目です。

  • タグ(Analog, Digital, Status Heabyの3つから1つ以上を選択)
  • サポート情報(メールアドレス、または、サポートウェブサイトのURL)
  • アプリ名
  • アプリの説明
  • スクリーンショット(Clock FaceはFitbit Studioから取得可能)
  • コード本体のアップロード(Fitbit Stusioから所得したhoge.fbaというファイル)
  • コードのVersion情報

今回の開発したClock Face

以下のようなClock Faceを作りました。

特徴は心拍計、歩数計、消費カロリーと同時に2つのTimezoneの時間を同時に表示できる、というところです。メインのTimezoneはスマホ側の時間に合わせられ、その下に表示される時間のTimezoneはスマホから任意の時間が設定できるようになっています。改善の余地はいろいろあると思っていますが、重要なのをリストすると以下かなと思っています。

  • メインのTimezoneの時間の文字の色を変更できるように
  • 12時間表示、24時間表示をユーザが指定できるように

コードはこちらで公開しています。このブログを書いている時点ではFitbitのレビュー中で、ギャラリには並んでおりませんで、リンク等は書けませんが、問題なく無事に並べられることを祈っています・・・。

感想

開発自体はいつも通りで楽しかったです。提供されているSDKのAPIにはバグがあるみたいでドキュメント通り動かないところがある(このSettings APIは動きませんでした公式回答)のですが、JavaScriptだけでここまで開発できるのは明らかに便利だし、分かりやすいし(個人的に・・・)、いい時代だな〜、と思いました。

積み残しは、いつか実装したいと思っています。

要望とか

以下の2つが強化されると快適になると思いました。

  • ファイルアップロード用のCLIの提供
  • Fitbit StudioとFitbit Gallery App Managerが統合しシームレスな公開作業を提供

リンク

ちょっと古いネタですが、やっとImpossible Burgerを食べてきました。

Impossible Burger(インポッシブルバーガー)とは

Impossible Food Inc.(インポッシブル・フーズ)が製造する植物肉を使ったハンバーガー用のパティを使ったハンバーガーのこと。

例えばマクドナルドのパティをこの植物肉にすれば、それはImpossible Burgerになります。つまり、ハンバーガー全体が特別な訳ではなくて、パティが特別(植物肉)なバーガーということです。

注文してみた

San MateoのJack’s PRIME(公式サイト)(Yelp)で試食しました。

店員さんとの注文方法についてのやりとり。

  • 「どうやってImpossibleを注文したらよい?」
  • 店員さん 「Impossibleはパティが違うだけだから、Burger MenuのならどれでもImpossibleにできるよ」
  • 「じゃあJACK’S PRIME CLASSIC HAMBURGERをImpossible、そして野菜全部載せで。」

と、無事に注文完了。(すべてのお店でこの対応なのか分かりませんので聞いてみてください)

そして待つこと5分くらい。出てきたのがこれ↓

見た目は普通のハンバーガーで、あえて違いを言えば「旗が刺さってて、Impossibleと書いてある!」くらいでしょうか(笑)とはいえ、眺めてるとパティが脂でキラキラしていないことに気が付きます。

眺めるのも終わったし、すぐにでもかぶりつきたい、という衝動を押さえつつ内部の撮影。

カットしたところ↑

上からみるとこんな感じ(バンズ手前の中心を崩してます)↑

食べてみた感想

一言で表現すると「淡白な味で、ツナサンドイッチを食べてる感じ」でした。

肉好きが大きく影響しているかもしれませんが、パティに脂感がほぼなくて、パサパサ感が目立ったのが残念でした。それ故にサンドイッチ感が強くハンバーガーとしては物足りなさを感じてしまったのでしょう。

人口増加に伴う食料不足、健康志向の強まりの予想もあり、注目されている植物肉ですが、まだまだ改良の余地があって今後は面白い分野になりそうで近い将来の可能性を感じました。

蛇足ではありますが、別のテーブルに座っていた体の引き締まったビジネスマンな雰囲気の2名組が店員さんに「コレ何だっけ?あ〜っ、あの肉ね。本物のがいいや。」と会話していたのも印象的でした。

とはいえ、機会があれば、未来の可能性を感じる為に是非お試しくださいねっ!

文中でもご紹介していますが、今回お邪魔したのはJack’s PRIME(公式サイト)(Yelp)です。 非常に感じのよいアメリカンなレストランでした。

リンク