thrakt's tech blog

コードとかやってる事の話。エモい話とかも含める。

はてなブックマーク数を表示させるWebExtensions対応のfirefoxアドオン作った

addons.mozilla.org

機能は、ツールバーはてなブックマークのボタンを出し、今開いているタブのはてなブックマーク件数を表示します。

f:id:thrakt:20170830200646p:plain

という感じ。1,000件以上の場合 HOT と表示します。温度感高目ですね、ええ。

また、ツールバーのボタンを押したときにポップアップではてブページを表示します。

ツールバーに出すアイコンは公式で公開されている物を利用。

hatenacorp.jp

httpsのページでも件数を表示するようにしているので注意

元々のはてブ拡張とかの仕様では、httpsページでは件数を取得しません。

これは、はてブ件数を取得する時にはてなにURLを送る必要があるためで、httpsの場合は秘匿情報となるURLが外部に漏れるためだと考えられます。はてなは大丈夫でも経路が問題で、公衆無線LANだとダダ漏れとかそういう事になる。昔はcookieが使えない環境でURLにセッションIDが入っていた事もあり、センシティブな情報が含まれる可能性はある。

ただ、webの全ページSSL時代に突入する昨今この仕様は合っていないのではという印象があり、自分は不便だったのでこのように変えました。

背景

はてなはてなブックマークfirefox拡張を全くメンテしておらず、マルチプロセスとか有効にならなくて困っていたため。

元々の拡張が機能的にかなり充実しているけど、そこははてブ件数をすぐ確認できる事だけできればいいと割り切った。サイドバーで自分のブクマ見れるのとか地味に使ってたんですが、まぁサイト開けばいいかと。

e10s有効になったらめちゃめちゃ早くなった。いままでこんなにスロウリィだったのかという驚き。やったぜ!

はてブページがポップアップで開くの使いづらい

自分も本当は別タブで開く形にしたかった。ただ、firefoxのWebExtensionsのAPIでタブを作ると、どうも順序とか崩れて使いづらくなってしまう。あと自分はツリー型タブを使ってるけど、うまくマッチしないという問題があった。

developer.mozilla.org

これでopenerTabIdというのを指定すればいい感じにいけそうだけど、firefoxが対応してない。なので常に親子関係のないタブを開かれ困る。このオプションにfirefoxが対応したら、普通に別タブで開くように戻します。

ポップアップ、雑に出してみたら意外とマッチしたのでイケる! と思ったけど、何かとスクロール位置がトップに戻ってしまう。どうも新しい要素が増える(例えば、全てのコメントで追加でコメントを取る時)とダメのようでした。はてブAPI読んでコメント一覧取得して自前で表示すれば解決するけど、そこまで労力をかける気も今のところなく。じっくりみたい時は別タブで開いて見てください。xxx users のリンクから別タブで開けます。

コード

github.com

思いついている機能追加はissueにあげてます。(やるとは言ってない)

ITエンジニアとして生き残るための「対人力」の高め方

コミュニケーションの取り方に関する本で、いろいろなコミュニケーションの例を会話形式であげて解説していく本でした。わかりやすい。社内編・社外編でわかれていて全部で30ケース、社外編は交渉や折衝が多く、社内編はチームビルディング的な内容でした。

SIer的な価値観がベースなのでちょっと引いてしまう所もありましたが、わりと当たり前の事が書いてあります。それがなかなかできていない。リーダブルコード的に、もう一度当たり前に立ち返って見直すのに良い内容だったと思います。


以下印象に残ったものをピックアップ。

case03 提案書は誰のため?
“文書は、相手に何らかの行動を起こしてくれることを目的として作成するもの”

つい情報を置いとくためだけに書いてしまいがちなので気をつけたい。

case05 技術者視点で説明しても伝わらない
“教育学者ジョン・ケラーのARCSモデル Attention(注意喚起: おや? と思わせる)、Relevance(関連性: 自分に関連があると思わせる)、Conidence(自信: 自分 にもできそうだと思わせる)、Satisfaction(満足: 自分にもできた!と思わせる)”

相手の立場に立ってとか、言うだけなら簡単だけどなかなか難しい。難しいで終わらせず、こういうテクニックを取り入れていくのが良いと思いました。AとRで、まず関心を持ってもらう事はできそう。

case08 中途半端に理解しない
“ついつい「わかった気」にならないよう、自分を戒めなければなりません。”

これは自分はやってしまいがちでした。虚栄心もあるし、安心感を与えたいという思いもある。気をつけよう。

今何やってるのと言われた時のための記事 2017/06/19週

ニャオス

新幹線の券売機はどうすれば使ってもらえるか

www.yutorism.jp

b.hatena.ne.jp

えー、下手の考え休むに似たりと昔から申しまして。忙しい時ほどこういうどうでもいい話を掘り下げてしまうものですな。

自分も席の変更で窓口を使ったことがあり、ああこういう時に窓口を使うんだと腑に落ちた記憶があります。そもそも例外ケースが多く、1件あたりの処理時間も長いから並んでるように見える、という感じではないかと。ただ、じゃあ仕方ないで終わらせるのも惜しい。

ここで最近流行りのAIですよ。ある程度複雑でもINとOUTがわりとはっきりしているので、適用できるのではないだろうか。そこで次の2フェーズを考えた。

  1. 窓口業務をビデオ通話ごしにやるようにして、遠隔化する。
  2. 簡単なパターンからAIに切り替えていく。

1.の段階で、コールセンターみたいな所から一括でやる形になるので、全ての駅で人が余ることがなくなり人件費削減の効果がある、はず。そして、やり取りが音声としてデータ化できるので、それでAI用の学習データを収集する。その上で順次AIに切り替えていくというわけ。

でも切符や現金のやり取りが難しいな、と思ったけどそれも券売機のインターフェースをそのまま使えるのか。あれ、行けるのでは? とはいえまずは現場のヒヤリングかなあという感じです。不正防止とかも気になる。

あとこの世界観で行くと最終的には、自動音声にキレる人みたいに人間を出せ! みたいな展開になるかもしれない。アッ! AIの遺伝子で見たやつだ!

相手に「伝わる」話し方 ぼくはこんなことを考えながら話してきた : 池上 彰

面白かった。池上彰氏のこれまでの経験から、どのような試行錯誤をしていったかが書かれている本。それを通して、伝わる話し方とは? という問に答えていく内容でした。池上彰といえば、模型を使ったわかりやすい説明。自分も週刊こどもニュースを見て育ったので、なかなか楽しめる内容でした。

実用書というよりは自伝に近い内容でした。"わかりやすく説明する方法を身につけ"たい人に100%ハマるかというと微妙な印象。アナウンサーの話とかはアナウンサーの技術論な感じがあり、わりと読み飛ばしてしまった。とはいえ、経験談を通して話されるTIPSには見るべきものがあると思います。

個人的には、税金を取られると言ってしまった時の対応の話が


以下振り返り用メモ

  • 抽象的な物言い(丸めた物言い)はわかったような気になったり、「これで相手もわかるだろう」と思ってしまったり、結局伝わらない。

身も蓋もない言い方の方がいい場合もある。相手に伝わっているか考えるように。

  • ひとつの文章は、ひとつの要素だけを伝える。

長い文章を書きがちなので注意。言いたいことを絞る、とも言えそう。

  • 一方的なお知らせでなく、相手の立場に立って語りかけるように

親近感を与え、興味を持ってもらう。

  • 人は互いに共通体験があると話しやすい。
  • 共通体験は、相手に教えを請うことでも得られる。相手を信頼し、尊敬して教えを請う。

  • 相手が何を知りたいかを考える。そこから話す内容に優先順位をつけ、組み立てる。

全く正論なのですが、なかなか難しい。ここにも相手への理解と尊敬が必要なんだなあという感。

  • まずは「とにかく大変なんです」というコメントから始まる文章を考える。話の「つかみ」を作る。

これは面白いなと思った。自分の伝えたいメッセージをまず持ってきて、相手の興味を考えて関心を引くつかみを作る。すぐ使えるのも良い。

  • 専門用語を外部の人に対して安易に使うのは配慮にかける。

  • まず言葉にする。言葉にすることで自分の考えをまとめる。

  • 抽象論より具体論。具体論は相手に興味を持ってもらえる。

  • 相手に何かを尋ねられたら、なぜこの質問をしたか判断する。そうすると適切な回答ができる。

今何やってるのと言われた時のための記事 2017/06/12週

ニャオス

Headless chrome で帳票が作れるのでは

developers.google.com

帳票(納品書や請求書)をシステムから紙で出すみたいな話はよくあると思う。前にそれでSVFというソフトを入れてやっていたりしたんですが、初期導入費が大きく運用コストもかかる。委託するにしても、やはりかなりの費用がかかる。自前でやる方法もあり、HTMLからPDFを作れるような物もあるみたいだが……。

そこでheadless chromeレンダリング結果をPDFで出力できるらしい。そしてディスプレイなしでコマンド打てば実行できる。

chromeから印刷イメージを出せる事の良い所は、何と言ってもシンプルである事。chromeだけ入れてしまえば、後はライブラリを入れたり、使い方を調べる必要がなく、ページと同じように出していけば良いはず。コマンド一発で片付くのも良い。

さらに、ブラウザの表示結果になるはずなので、確認も楽だし再利用もできる。普段はバッチ処理でPDF作って配るけど、いざとなればブラウザでURL開いてそのままプリンタから出すとか。

レイアウトがどれくらいできるかは試してみないとわからない。印刷用CSSとか見るのかな。文章の折り返しとかはどうなるか。webfontとか使えれば、アセットがかなり楽になりそうな気がする。SVFはデザイン用のツールもあったりしてよかったけど、ブラウザでやるとなるとある程度ハードルは出てきてしまい、そこは課題かもしれない。

という事で、できるのでは! という期待が今自分の中で高まっている。場合によっては結構な削減効果見込めるぞ!

問題はPDF作った後、それをどうやってプリンタに持っていくかなんだけど……。プリンタのベンダごとの違いとか気にするのはもう嫌だ。印刷代行の業者使うしか。

AWS内部DNS

今はAWSを使っていて、踏み台サーバを通して各サーバにアクセスするみたいな事をしている。この時都度IPをインスタンス一覧から見ていて、本当になんでこんな無駄な事をやってるんだろうかと。

前にやってた環境でも同様の課題があり、その時はconsulを導入していた。

qiita.com

ただこれは、当時使っていたIaaSが貧弱で、DNSは一度ホスト名を登録するとずっとIPが変わらない、LBを使うと設定変更時に瞬断が起きて本番系に影響が出る、という事情があったため。AWSなら……! と当時は思ったものでした。

そして今はAWS。R53のprivate DNSを使って解決できそう、なんだけど、サーバの増減は手で反映しないとだめそう。結局awscliの呼び出しをどっかに書いたり、別の所で処理がコケた時にゴミが残ることを気にしたりしないといけなくなる。(そう、デプロイ時に動かすシェルに書いてるアレの事ですよ)

その点、consulはよかった。設定ファイル置いてバイナリ立ち上げればあとは全部やってくれるし、プロセスが落ちたら勝手に離脱する。いわゆるサービスディスカバリ的な用途には結構良いなと改めて思った。

今何やってるのと言われた時のための記事 2017/06/05週

ニャオス

時間があるなら仕事を進めなければッという圧があるが、まぁ手が進まず結局時間が無駄になるという悪循環があり、どうしたものか。

正しいreact

react、構造化できるjQueryぐらいの気持ちで使ってしまっているので、正しさの不在を感じている。あとfluxで処理書く場所がよくないのでは? という気持ちをずっと持ちながら書いてしまっている。(とはいえ同じプロジェクトで書き方が混在するのは避けたい気持ちもある)

こういう時はコードリーディングだ、という事である程度見繕ってはいるんだけれど。そのうちチェックしたい。

ESLint

Rubyはrubocop先生に教えられながら書いているが、ES2015側はわりと無法地帯になってしまっている。ということでESLintをやるべきだろう。

eslint.org

今何やってるのと言われた時のための記事 2017/05/29週

ニャオス

GASとかGoogleスプレッドシートを書いているうちに時が過ぎていく