ShortcutKey2URLのFirefox WebExtensions版をリリースしました

[programming] [software] Firefox

もともとFirefoxで提供していたShrotcutKey2URLという拡張機能ですが、WebExtensions版を実装するうえで課題となっていた部分がFirefox60で解決したので、やっとWebExtensions版をリリースすることが出来ました。

ShortcutKey2URL は、ショートカットキーを使用してURLを開いたり、移動したり、JavaScriptを実行できる拡張機能です。

スタートアップキー(デフォルトはCtrl+Period、MacはCommand+Period)であらかじめ設定しておいた動作の一覧を表示し、次のキーでその動作を実行します。この2段階動作が、ShortcutKey2URLの特徴です。

f:id:onozaty:20180529001824p:plain

キーとして設定しておける文字は1文字に限定されません。2文字以上で設定することも可能です。これによって、キーの自由度が高まります。たとえば、Googleのサービスは先頭1文字は"G"として、2文字目で各サービスを表すといったような、階層を持たせることができます。

また動作として設定できるものには、下記のようなものがあります。

  • URLへの移動。既に開いているURLの場合は、そのタブへ移動し、開かれていない場合には、新しいタブとして開く。
  • 新規タブとしてURLを開く。
  • 現在のタブにURLを開く。
  • 現在のタブで指定したJavaScriptを実行する。
  • 新規タブとしてURLを開いて、その後に指定したJavaScriptを実行する。

アドオンのIDはWebExtensions以前と同じものにしていますので、もしも古いものが入ったままで無効となっている人は、更新していただければ新しいもの(バージョン4.0.0)が入ります。なお、実装が大きく変わっていることもあり、設定は引き継がれません。申し訳ありません。

一部Firefox用に調整した部分もありますが、機能的には下記Chrome版と同じです。

Firefox 60 で解決したもの

ShortcutKey2URLのWebExtensions版を実装するうえで課題となっていたのは、下記の2つに関するものでした。

1番目は、browser actionで開いたポップアップウインドウにフォーカスが設定されないといった問題で、ShortcutKey2URLは、ポップアップウインドウ上でのキー入力を拾うようになっているため、これができないと先に進めない状態でした。

2番目は、拡張のショートカットキーを変更する仕組みです。ShortcutKey2URLの起動キーは自由に変えられないと使い勝手が悪すぎるので、とても重要な機能です。

なお、Chromeではショートカットキーを変更するUIがありますが、Firefoxはいったん上書きするAPIだけ提供されました。UIの部分は、下記で検討されています。

UI的なものを1から実装するのはかなり面倒なため、今回はPiroさんの下記ライブラリを利用させていただいています。ありがとうございます。

Elevator Saga にチャレンジしてみた ＆ 自動実行できるようにした

[programming]

Elevator Sagaが社内で再度話題になっていたので、いまさらながらですが、チャレンジしてみました。

Elevator Sagaは、エレベータを操作するプログラムをJavaScriptで書いて実行できるゲームです。全18面あって、クリアの条件が異なります。

f:id:onozaty:20180526123259p:plain

最終的なコードは下記になりました。アロー関数使ってたりするので、IEだと動かないです。

成功率は下記のような形となりました。各Challenge200回実行しています。同じChallengeでも実行毎に難易度がかなり異なる印象で、200回でも収束しているのかちょっと怪しい感じです。

All         :  84.03 (3025/3600)
Challenge  1: 100.00 (200/200)
Challenge  2:  83.50 (167/200)
Challenge  3:  96.50 (193/200)
Challenge  4: 100.00 (200/200)
Challenge  5:  93.00 (186/200)
Challenge  6: 100.00 (200/200)
Challenge  7:  95.00 (190/200)
Challenge  8:  99.00 (198/200)
Challenge  9:  99.50 (199/200)
Challenge 10:  58.50 (117/200)
Challenge 11:  97.00 (194/200)
Challenge 12:  86.50 (173/200)
Challenge 13:  37.50 (75/200)
Challenge 14:  45.00 (90/200)
Challenge 15:  95.00 (190/200)
Challenge 16: 100.00 (200/200)
Challenge 17:  86.50 (173/200)
Challenge 18:  40.00 (80/200)

上記はSeleniumで自動実行するプログラム作って検証しています。プログラムの評価するのに、ある程度繰り返し実行しないと判断できなかったので作りました。

書いてみてかなり楽しめました。ただ、これ以上良くする方法が今のところ思いついていないので、ぜひもっと良いアルゴリズム書けるぜ！！って方は教えてください。

自分の辿った考え方は下記にまとめてあるので、ご参考まで。

RUANN - SCRAMBLE 14

[music]

ほんとはライブ行ったあとに書きたかったのだけど、1月、3月、4月とことごとくチャンスを逃した(都合がつかなかったり、当選しなかったり、、)ので、いまのうちに書いておきます。

【Amazon.co.jp限定】SCRAMBLE 14 (18cm×18cmW紙ジャケット豪華パッケージ)(ピクチャーCD+20Pフォトブック付)

【Amazon.co.jp限定】SCRAMBLE 14 (18cm×18cmW紙ジャケット豪華パッケージ)(ピクチャーCD+20Pフォトブック付)

2018年3月6日にリリースされたRUANN(大山琉杏)の初のCDです。今までもSpotifyなどでオリジナルの楽曲を配信していましたが、CDとしては初となります。

収録曲は5曲で、それぞれが全然違った雰囲気の曲で、とても魅力的なEPです。

1曲目のGET THE GLORYはアップテンポな元気な曲で、若さあふれる！って感じで、2曲目の I AM STANDING はちょっとしっとりした感じ。どちらもタイアップ曲で、この2曲は先行でデジタルシングルとしてリリースされていた曲です。

3曲目のThe beautiful girl is about u - TeddyLoid ver. - は以前から配信されていた曲をアレンジ変えてちょっとテクノポップ？っぽくした感じで、4曲目のJennyは、アコースティックなギターに英語の歌詞がすごく心地良くて、一番好きな曲です。洋楽アルバムにある1曲だといわれても違和感ないくらい。最後の2月14日午後3時45分もアコースティックでしっとりとした声で歌い上げてます。

まだ若干14歳だとか、英語、韓国語をしゃべれるとか、ギターやピアノ、ダンスにもたけているとか、ONE OK ROCKのTakaに認められていてライブにゲスト出演したとか、いろいろ語れるポイントがありますが、とにかく声が好きです。特に英語の歌詞を力強く歌うときの声が好きです。

最初に知ったのも、娘がアコースティックギターでテイラースイフトのWe Are Never Ever Getting Back Togetherを練習するってことで、YouTubeで参考になる動画探していて、下記の動画を見たのが最初でした。

で、気がついたら、YouTubeにあがっているカバー曲を全部聴いてました。洋楽好きな人はぜったいはまると思います。

まだ若いのにすごい！とかじゃなく、年齢関係なく魅力的なシンガーソングライターなので、これからもとても楽しみです。あと8月のライブのチケットをとったので、初めて生で聴けるのをこれから楽しみにしています。

POPSPRING 2018 (2017年3月24日@幕張メッセ)

[music]

POPSPRING 2018 幕張公演に、嫁さんと2人で参加してきました。昨年に引き続きの参加となります。

今年もGOLDチケットだったのですが、昨年よりさらにエリアが拡大していて、余裕を持って近くで見ることができました。

タイムテーブル

ラインナップも(個人的には)昨年よりさらに良かったと思いました。Liam Payne(リアム・ペイン)とLittle Mix(リトル・ミックス)だけでも、十分すぎますよね。

POPSPRINGタイムテーブル | POPSPRING 2018 より

ライブ内容

まずは Poppy(ポッピー) で始まりました。ダンサー含めきゃりーぱみゅぱみゅに似ているな、、と思いました。とにかく可愛かった。こういったデジタルな感じの好きです。

続いてRuel(ルーエル)。歌がうまくて、イケメンで、背も高い、しかもまだ15歳って、、いろいろうらやましくなりました。生で聴くとさらに好きになるアーティストだと思います。

PRETTYMUCH(プリティマッチ)は、今回POPSPRINGに来るということで初めて聴いて、とても好きになったアーティストです。Teacher大好き。

みんなほんと楽しそうにパフォーマンスするし、さらに好きになりました。歌もうまいし、これからもっと人気出るだろうなぁ。

Sofia Carson(ソフィア・カーソン)。

きゃりーぱみゅぱみゅ。今回唯一の日本人でしたが、何気にすごい楽しみにしていました。

実際ヒット曲ばっかりでとても楽しかったです。某CMの影響もあってか、ファッションモンスターのダンスが頭から離れません。

SUPERFRUIT(スーパーフルーツ)。Mitchの声すごいなぁ。

Nick Jonas(ニック・ジョナス)。昨年兄さん(ジョー)も来てたね。

待ちにまったLiam Payne(リアム・ペイン)。どれも好きな曲なんですよね。というか声が好き。

タイムテーブルの時間みて、持ち曲で足りないよな、、って思っていたら、Ed SheeranやCharlie Puthのカバーしたり、1D時代の曲をやってくれました。

Little Mix(リトル・ミックス)。とりを飾るだけあって、圧巻のパフォーマンスでした。あのダンスで、あそこまで歌えるなんてすごい。

ライブで観て、さらに好きになりました。また来日してくれたら観にいきたいです。

ほんと最高な一日になりました。来年も楽しみです。

社内勉強会で「WebSocketでカメラの映像を共有してみた」というタイトルで発表しました

[programming]

社内勉強会でこないだ作ったWebSocket＋カメラを使ったアプリケーションについて発表してきました。

www.slideshare.net

Herokuにデプロイしてデモをやりましたが、自分が試したとき以上に遅延がおっきくて、接続数にも依存してそうだなといった感じでした。

次は何やろうかな、、

Rocket.Chatでチャンネル毎にデザインを変える

[programming]

Rocket.Chatでチャンネルが複数あったときに、発言先のチャンネルを間違えてしまうといったことがあります(少なくとも自分は)。結構恥ずかしいです。

発言する際に、どのチャンネルなのかもっと識別しやすいようにできれば間違え減らせるのでは！ということで、チャンネル毎にデザインを変えてみます。

Rocket.Chatの画面構成

まずはチャンネル毎にid/class属性が振られているか確認します。最初はチャンネル名で検索して見つからなかったのでこれは残念ながら、、と思いましたが、チャンネル名とは別の識別子で振られていました。 下記の例のchat-window-ZC2nnBTZTPLBTLPKwといったように、selection要素のid属性にchat-window- ＋ 識別子といった形で振られていました。識別子のルールはまったくわからなかったので、実際にデベロッパーツールなどで振られているidを確認するのが良いかと思います。

f:id:onozaty:20180204123552p:plain

デザインを変える

チャンネル毎に識別できる情報が振られているので、あとはCSSで自由にいじるだけです。

Custom CSSで全ユーザ向けに

Rocket.Chatには、Custom CSSという機能があって、管理画面からCSSを追加することができます。これで全てのユーザに対してデザインを変えることができます。

f:id:onozaty:20180204150551p:plain

chat-window-ZC2nnBTZTPLBTLPKw に背景色で薄い黄色のグラデーションを付けてみます。

#chat-window-ZC2nnBTZTPLBTLPKw {
  background: linear-gradient(#ffffff, #ffff99);
}

こんな感じになりました。これでどのチャンネルか判断する情報が増えるので、識別しやすくなりそうです。(色じゃなくて、画像背景にしたりとか、いろいろやり方はあると思います)

f:id:onozaty:20180204150841p:plain

ブラウザ拡張機能を使って自分だけに

Custom CSSだと、全ユーザ向けなので、いろいろ調整が面倒かもしれません。管理者権限がないとそもそもいじれないし。ということで、手っ取り早く他人を気にせずに自分好みのデザインで！ってなると、ブラウザの拡張機能を使うのが良いでしょう。

Stylish を使って設定してみます。StylishはChrome、Firefoxともに提供されている拡張機能です。

Rocket.Chatが動作しているURLを適用先にして、先ほどと同様のCSSを書くだけです。

f:id:onozaty:20180204153604p:plain

簡単ですね！ これで間違えが減らせるはず、、、

ブラウザ拡張機能 Online Bookmark Incremental Search を Firefox と Chrome で同一のものを提供するようにしました

[programming] Firefox Google Chrome

もともと公開していたChrome版も、先日公開したFirefoxのWebExtension版と同じものにしました。

ソースコードも同一になります。

FirefoxのWebExtensionは、Chromeとの互換性を意識していて、chromeネームスペースもサポートしています。なので、chromeネームスペースを使うことによって、どちらでも動くコードで書くことができました。

これでメンテナンスが楽になりました。