WebスライドにリアルタイムでリアクションできるChrome拡張「Recho」をリリースした【開発編】

こんにちは、ぽこひでです。

先日公開した「Recho」というChrome拡張の開発編。

pokohide.hatenablog.com

「Recho」はWebスライドにTwitterハッシュタグを指定して起動すると、そのハッシュタグを含むツイートをニコニコ動画のようにスライドに流すChrome拡張です。また、Recho内のQRコードからスマホで操作可能なスライド操作ページに移動でき、そこからスライドの操作を行えます。

技術

今回開発したRechoは主に「Recho API」と「Recho Extension」の2つから構成されています。

f:id:pokohide:20170905143812p:plain

Recho API

Recho APIChrome拡張として埋め込むフロント部分のRecho ExtensionとWebSocketでの接続を行ったり、Twitterのツイートのストリーミング配信などを行うAPIです。このAPIは以下の技術で構成されています。

  • Node.js
  • Heroku
  • socket.io

特に難しいことはやっておらず、フロントからWebSocketの接続を受け付けて、Rechoを起動するとtwitというモジュールを使用して指定したハッシュタグを含むタイムラインをストリームで取得します。

const Twit = require('twit')
const twit = new Twit({
  consumer_key   : process.env.TWITTER_CONSUMER_KEY,
  consumer_secret: process.env.TWITTER_CONSUMER_SECRET,
  access_token   : process.env.TWITTER_ACCESS_TOKEN,
  access_token_secret: process.env.TWITTER_ACCESS_TOKEN_SECRET,
})

let stream = twit.stream('statuses/filter', { track: '#hogehoge' })

// ツイートイベント検知
stream.on('tweet', (tweet) => {
  if ('retweeted_status' in tweet) console.log('Retweet')
  console.log(tweet)
})

// いいねイベント検知
stream.on('favorite', (event) => {
  console.log(event)
})

ただし、このストリームは必要なくなった時に、止めておかないとどんどん受信してしまうので、注意が必要です。

strem.stop() // ストリーミングを中止

参考:https://github.com/ttezel/twit

Recho Extension

Chrome拡張として利用者にインストールしていただくフロント部分です。ちなみに「Recho」は以下のリンクからインストールできます。

Recho Extension - Chrome Web Store

使った技術は以下の通り。

Chrome拡張をes6を用いて開発したかったのですが、自分で準備するのは面倒だったので調べてみると「generator-chrome-extension-kickstart」というものがあったのでそれを使用しました。

qiita.com

それでChrome拡張の雛形を作ると、そこから適当に作っていきました。このフロント部分は公開しているので、汚いコードですが、Chrome拡張を作ろうと思っている方は参考にしていただけると嬉しいです。

GitHub - hyde2able/Recho-extension: Rechoはスライド上にリアルタイムにリアクションを流すChrome拡張

また、今回のメイン機能でもあるツイートをニコニコ動画のように流す部分は「Flowly-js」という名前でnpmパッケージとして公開しました。

GitHub - hyde2able/Flowly-js: JavaScript library to stream text, image

https://github.com/hyde2able/Flowly-js/raw/media/flowly-js.gif

スライド操作機能について

スライド管理機能とは「Recho」上のQRコードを読み取ることで行けるスマホサイズのページで、ここから同期しているWebスライドのページ操作やコメントの表示の有無などを操作できます。

これを実現するのにWebSocketのroom機能を用いています。スライド管理ページにアクセスすると、Webスライドと同じページルームIDでWebSocketに接続するためこのルームIDを用いてRecho APIを経由することで、スライド管理ページとWebスライド(RechoExtension)とのフロント同士を同期させています。

これによって、スライドの操作を可能にしています。

さいごに

この「Recho」を使って世の中のLTに新しい文化が加わればなと思っています。みなさんLTする機会があるときは使ってみてください\(^o^)/

ハンズオン中とかでもいいですね。

WebスライドにリアルタイムでリアクションできるChrome拡張「Recho」をリリースした

こんにちは、ぽこひでです。

最近、スライド上でリアルタイムでリアクションができるChrome拡張「Recho」をリリースしたので、そのお話。

ここではRechoとは何か、どのように使うかについて紹介したいと思います。

Rechoとは

RechoはSlideShareやQiitaスライドなどのスライド上でリアルタイムにリアクションを表示するChrome拡張です。

登壇者がTwitterハッシュタグを指定することで、そのハッシュタグで呟かれたツイートをリアルタイムでニコニコ動画のようにコメントとして流します。

LT(ライトニングトーク)の新しい文化になればなと思っています。

強み

正直、このようなサービスは既に存在していて、その一つにドワンゴが運営する「ニコナレ」というサービスがあります。

niconare.nicovideo.jp

ただし、このサービスではスライドをニコナレ上にアップロードしたり、コメントをするにも専用のアプリなどが必要だったり、と登壇者も視聴者も参加の敷居が高い問題がありました。

Rechoでは登壇者はSlideShareやQiita上のスライドに、ハッシュタグを指定してRechoを起動するだけです。また、視聴者側も指定されたハッシュタグTwitterで呟くだけで自分のつぶやきが流れるので、気軽にLTに参加できます。

使用方法

Rechoの使い方を説明します。

インストール

Rechoは以下のリンクからインストールできます。

Recho Extension - Chrome Web Store

Recho起動

インストールしたRechoはSlideShareやQiitaスライドのみ現在は対応しております。そのサイトのスライドページに移動すると、Rechoは起動可能になり、Rechoをクリックすると、設定画面が表示されるので、そこで呟いてほしいハッシュタグを指定して、「有効にする」ボタンをクリックすることで、スライドモードが起動できます。

f:id:pokohide:20170829190422p:plain

その他の機能

Rechoを起動すると、画面右上にハッシュタグと現在のツイート数、いいね/RT数が表示されます。これによって、プレゼン中も視聴者は迷うことなく指定されたハッシュタグで呟くことができます。このナビゲーションは消すことができます。

f:id:pokohide:20170829190728p:plain

また、Rechoではスライドのリモート操作も可能にします。Rechoの設定画面に表示されているQRコードを読むことで、スマホからスライドの操作やコメントの非表示などの設定を行うことができます。

f:id:pokohide:20170829191308p:plain

さいごに

このRechoはまだ開発途中ですが、このサービスを使ってさらにLTが盛り上がればなと思っています。色々なエンジニアイベントや大学の講義などで使われることを願っています。

There was an error while trying to load the gem 'sass-globbing'

こんにちは、ぽこひでです。

rubocopを導入して--auto-correct機能を使用して自動修正をしたことによって引き起こされたエラーです。そのエラーは以下のようなものです。

There was an error while trying to load the gem 'sass-globbing'. (Bundler::GemRequireError)
Gem Load Error is: uninitialized constant Sass::Importers
Backtrace for gem load error is: ...

--auto-correct機能によってGemfileのgemの順序までアルファベット順に修正されたことによるエラーでした。理由は単純でsass-globbingというgemがsass-railsというgemに依存していたのに、アルファベット順に自動修正されたことで、順序が逆転してしまい、Sassが導入されていないよ!というエラーを吐いていただけでした。

対応としては適切な順序に戻せばいいだけなので

rubocopの監視対象からGemfileを外すことで解決しました。

適切なメールタイミングを教えるBOT「Growbots Email Timing Optimizer」2017/7/13のProductHuntトップ5サービス

こんにちは!ぽこひでです。

まだ今日のデイリートップサービスが公開されていなかったので、今日は2017/07/13のProductHuntトップ5サービスを紹介します。

※この記事は10時に書かれたものです。

今日の1位は「Growbots Email Timing Optimizer」

Votes 884
Comments 80
分類 TECH

https://growbots.com/best-time-to-send-email

送信相手のステータスに沿った適切なメールを送るタイミングを教えてくれるサービスです。

このサービスはGrowBotsというボット上の一つの機能としてリリースされたもののようで、そのため機能はシンプルで分かりやすく使いやすかったです。

東京時間で200名規模の会社のIT Directorにメールをするのに一番良い時間帯は水曜日と木曜日の10:15分で以下のような折れ線グラフになりました。

f:id:pokohide:20170715095738p:plain

レスポンス率低くないですかね。。

今日の2位は「CoBook」

Votes 501
Comments 22
分類 TECH

https://cobook.io/

気になっている会社で働く人を知れるサービスです。

「このサービスを使えば会社探しやそこで働く人を知れる!」と言っている割には、見てみた感じ、各会社に1人しかメンバーを登録されておらず、プロフィールを見ても役職のみしか書かれていませんでした。

ただ、会社と人の繋がりをどんどん辿っていけるのは面白いなと思いました。ただ、特に転職とかに繋げているわけでもなさそうなので、知れる!に特化したサービスでした。

今日の3位は「Keyword Tool & Content Assistant」

Votes 641
Comments 29
分類 SEO TOOLS

https://cognitiveseo.com/keyword-tool/

サイトのパフォーマンスを向上されるキーワードを提案するサービスです。

キーワードを入力して検索してみると、その検索ワードとよく検索されるワードだけでなく、その検索の比率やCPCまで教えてくれます。また、キーワードでTOPに出てくるサイトのパフォーマンスなども一気に見れるので、SEOツールとしてかなり面白いものになっています。

海外のサービスですが、日本にも対応しているようです。

今日の4位は「Referral Programs」

Votes 372
Comments 12
分類 PRODUTIVITY

https://www.referralprograms.org/

公共のデータやコミュニティの投稿から人気の高い企業の紹介制度を集めたサービスです。

例えば、BitBucketやTrello, JIRAを開発するAttlasianでは社員紹介からの採用率は21%で、採用時には$2,000が貰えるなどの情報が載っています。

ちょうど今読んでいる「How Google Works」でも「優れた人」の採用は採用担当者だけの仕事ではない。社員全員が「デキる!」と思う優秀な人を採用すれば良いとも言っていたので、これからもリファラル採用は必須ですね。

サイトUIのカードコンポーネントな感じ可愛い。

今日の5位は「Luminar for Windows Beta」

Votes 487
Comments 46
分類 TECH

https://macphun.com/beta

Luminarと呼ばれる元々Mac専用のフォトエディターであったサービスのWindows版がβリリースされたものです。

メールアドレスを入力すればβ版を使えるとのことなので、Windowsでフォトエディタを探している人は使ってみるといいかもしれませんね。

さいごに

今日もトップ5サービスを紹介しました。

昨日同様UIが綺麗で可愛い!のは言うまでもないですが、今日紹介したサービスはとてもシンプルで英語に慣れていない僕でも特に説明もされずに使えるほどでした。

こうしたシンプルさ、とりあえず使ってみるか感が大事かもしれませんね。

エンジェル投資家とつなぐサービス「Datastarta」 2017/7/14のProductHuntトップ5サービス

こんにちは!ぽこひでです。

英語と海外のサービス事情の勉強のためにProductHuntのデイリートップサービスを紹介して行こうかなと思います。

※この記事は17時に書かれたものです。

今日の1位は「Datastarta」

Votes 109
Comments 9
分類 TECH

http://datastarta.com/

2400人のエンジェル投資家を場所や、投資のスコアや条件でフィルタリングできるサービス。彼らに連絡を取って、スタートアップにシード資金を調達するためにピッチをしたりすることができます!

投資のスコアはこのDatastarta自身が独自のアルゴリズムで算出したもので、その投資家の影響力等を考慮した値になっています。

実際にサービスを利用するには$49/month$89/monthがあります。サービス自身は本当にちょっとキレイなデータベースのような感じ。

今日の2位は「Box UI Elements」

Votes 33
Comments 1
分類 DESIGN TOOLS

https://developer.box.com/page/box-ui-elements

わずか数行のコードで最適化されたUXを持つ要素を自分のアプリに持ち込んで、ニーズに合わせてカスタマイズができるサービス。

WEBやアプリに最適化されていて、導入方法はSDKが用意されていて、かなり充実しているよう。

WEB SDKs - Java - .NET - Node.js - Python - Ruby - Chrome - Salesforce

Movile SDKs - iOS - Android - Windows

ドキュメントもしっかりしていそうなので、ちょっと気になりますね。

今日の3位は「PSD to Sketch Design Converter - by Avocode」

Votes 126
Comments 3
分類 DESIGN TOOLS

https://avocode.com/convert-psd-to-sketch

PhotoshopのファイルをSketchのファイルに変換するツール。

PSDファイルとメールアドレスを送ればSketchファイルに変換して返してくれるそうです。しかし、一度メールアドレスを取得して返信するという手間を踏むということは半分自動化出来ているが、残りは手作業だからなのか、はたまた全自動化できてるけどメールアドレスが欲しいのか、全自動化できてるけど外部にアルゴリズムは公開したくないのか…

この方式を取っている理由は分かりませんが、今後もアプリやWEBのUI設計にはSketchが使われていきそうな気がする反面、PhotoShopもまだまだ使われているのでこの手のツールは重宝されそうですね。

今日の4位は「Citus add-on for Heroku」

Votes 25
Comments 1
分類 TECH

https://elements.heroku.com/addons/citus

安心してPostgresのスケールアウトを可能にするHerokuプラットフォーム上のアドオンです。

Postgresでのシャーディングや、メモリなどをWEB上でいつでも制御でき、各インスタンスの監視などのモニタリングもできるようです。

$129.99/moからと少しHerokuのアドオンにしては高い気がしますが、僕自身インフラ面は詳しくないので、こういう痒い所に手がとどくサービスは知っておいて損はないですね。

今日の5位は「Rype German」

Votes 20
Comments 1
分類 TECH

https://www.rypeapp.com/start

$95/mから日常言語の個人レッスンを受けられる忙しい人向けのサービスです。

毎日一対一のビデオレッスンを受けれたり、相手によってプログラム内容を変更したり、忙しい人向けということもあり、色々と柔軟に変更できる語学学習サービスのようです。

今対応中の言語は Spanish, French, German, Italian, and English とのことなので、日本人でもやる価値ありですね。

世の中がIT化されて色々なものが自動化されていく中、自動化やショートカットができないこういったサービスはどの時代でも重宝されそうですね。

個人的にはこのサイトのスクロールがJSで制御されていて、スクロールした感触が何かやだということだけ印象に残りました。

さいごに

今日はこれでおしまい。

初めてのまとめでしたが、英語の分量としても対して多くはなく初日でも1時間で書き終えれたので、いきなり毎日は厳しいですが、習慣化していけれたらなと思います。

ここまで読んでいただきありがとうございました。5つのサービスを見て思ったのは、どれも「見た目が何かかっこいい」でした。

サービスもですが、このUIも真似たいですね。

たった100円でバス事故を防ぐ方法

こんにちは、ぽこひでです。

去年はインターン期や休学中だったので、東京にちょくちょく言っていました。しかし、お金があるわけでもないので、新幹線ではなくて夜行バスで東京-名古屋間を行き来していました。

ちょうどその時期は「東京ディズニーランド帰りの夜行バスが事故」とかバス会社の雑な運営体制とか色々なことが取り上げられていました。

mainichi.jp

毎週夜行バスに乗って東京に行っていたので、これでは死ぬリスクが高いと思い今回のタイトルでもある、100円でバス事故を防ぐ方法を考えました。

このタイトルは正直釣りかもしれません。本当は防げないかもしれません。でも、たった少しのことでリスクは下げれると信じているのでここで紹介させてください。

f:id:pokohide:20170610155322p:plain

100円でバス事故を防ぐ方法

それは

途中のサービスエリアで運転手に、100円でコーヒーをあげる

ことです。これで、本当に守れるかは知りません。検証もしていないです。ただ、少なからず効果はあると思っています。

  • コーヒーをでカフェインを摂取して、居眠り運転をする可能性は下がるかもしれません
  • 運転手が「よーし、安全に届けよう!」と意気込んでくれるかもしれません

これはエゴかもしれません。運転手はコーヒーを欲しくないかもしれません。しかし、「コーヒー」をあげることが目的ではありません。「いつもご苦労様です」という思いを込めて、それを行動に表した手段でしかないと思っています。

なので、普通に「いつもご苦労様です。」と直接言うだけでもいいかもしれませんね。

さいごに

この記事で言いたいことは、「100円で命を守れるよ!」ということではありません。

当時のニュースで言われていたのは、バス会社の低賃金や過酷な労働状況が原因で、ロクに睡眠も出来ずに国が補助金を出すわけでもなく、どうにかしてくださいという無理な要求をするだけの今の日本の実態でした。

飛行機のパイロットは命を預かる仕事だからと高い給与で雇われているのに対して、同じく命を預かる仕事のバス運転手には過酷な労働環境が待っている。(もちろん技術的な話もあるだろうが)このような現状を打開するために国が動くのを待つのではなく、自分で何か出来ることがあるかもしれない。

ということを伝えたいです。

一人で何でもすることはただの怠惰

こんにちは、ぽこひでです。

僕は今、とある学生団体の代表をやっています。その学生団体はちょうど1年ほど前に3人で立ち上げた団体です。主に、学生エンジニア/デザイナー向けにイベントを企画・運営をしていて、1年で参加者の合計が450名、ユニーク数で160名は超えました。

周りからは「1年でこれだけ認知されるのはスゴイね!」とか「1人で何でもやっちゃうしスゴイね」とか言われます。自分がやりたいと思ったことを団体として立ち上げて、実際に活動することで色々な人に認知してもらっていることはとても嬉しいです。

しかし、後者の方にはずっと違和感を感じていました。

f:id:pokohide:20170603002723j:plain

今、僕は大学4年で来年には就職を考えているので、団体の代表を引き継がなければなりません。

団体を立ち上げた当初は正直、「一人で何でもできること」が正しいと思っていました。そして、今は「一人で何でもやることは怠惰」と思っています。その思いを今日はぶちまけたいと思います。

経緯

団体の代表をやっていて、学年も4年なので作った当初に比べてたくさんの後輩が出来ました。そんな中、Twitterで弊団体の運営メンバーのこういう呟きを見つけました。

f:id:pokohide:20170602193645p:plain

これはまさに最近、僕自身が悩んでいることでもありました。

来年には就職して学生団体から離れる身です。自分一人でやっても今は良いかもしれない。でも、来年には何も残りません。団体もある程度は落ち着きを見せてきたので、そろそろ僕の経験やノウハウを後輩に引き継がなければいけない時期です。

そんな矢先のつぶやきでした。

これを見た時、たしかに一人で頑張ることの方が多かったのかなと思いました。これから色々と持論を述べていくのですが、結論を先に述べておくと今回のタイトルでもある

一人で何でもすることはただの怠惰

です。


一人で頑張る理由とは

その理由は

  • 仲間を頼ることがとても難しい
  • そして、一人の方が楽

だからです。

※ちなみに「頼る」とはタスクを丸投げすることではありません。 ( 参考: 上司に仕事を「丸投げ」された時の対処法 | ライフハッカー[日本版] )

仲間を頼る

「このタスクならこの人に振ったほうが良いな❗」とその人のタメを思ってタスクを振ることは大変難しいです。

その人の特性、得意なことなどを知っておく必要があります。

UNIXという考え方―その設計思想と哲学

UNIXという考え方―その設計思想と哲学

最近読んだ本に「UNIXという考え方」があります。この本の第5章「これこそ梃子の効果!」にある文章を抜粋します。

いくら頭が良くても、行動的でも、エネルギーに満ちあふれていても、自分は一人しかいない。ものすごく成功したいのなら、世界に働きかける力を何倍にもしなくちゃならない。IQが高いだけじゃダメ。ハワイで毛皮の外套を売る腕があっても、それだけじゃだめ。大勢の人間を動かして、自分の才能と能力を何倍にもして、世界中に行き届かせなさい。1時間働いたら、5時間分、100時間分、いや1,000時間分の結果を生み出すようにしなさい。

この文章では

「一人でできることには限界があるので、出来る人の才能と能力を共有することが価値を生み出す最善策」

ということを言っています。この考えからすれば、一人で頑張ることは最善ではありません。

では、何故一人でやってしまうのでしょう。

一人でやるほうが楽

それは一人でやるほうが圧倒的に気が楽だからです。信用する必要もない、へんに悩む必要もない。

  • 「このくらい自分でやった方が早そう」と教えるのを放棄したり
  • 「これを任されたら嫌だろうな」と思ったり
  • 「この日までにお願い」と振ったタスクが終わらなかったらどうしよう…と心配するくらいなら自分で確実にそのタスクを終わらせたほうが気が楽❗

という感じに。自分一人で頑張るのは面倒くさいけど気は楽なのです。

最後の例に至っては、これは同時に相手を信用していないことも意味します。これは絶対に合ってはいけないことです。何のための代表かと今になっては思います。

数ある団体の中からこの団体を手伝ってくれているのに信用もせず、その結果自分でやったほうが早い・楽という理由で教育を放棄する。

一人で何もかもをやることは怠惰です。

誰のためにもなりません。

さいごに

代表としてあるべき姿は、仲間を知って、その仲間に適切なタスクを振って、万が一失敗してもどんとその責任を全て負う人だと今は考えています。

かと言っても全てを頼ることが正解でもありません。

今、迷走しています。答えやヒントを探しています。

とりあえず

一人で何でもすることは怠惰

この言葉を絶えず思いながら、これから改めて頑張っていきたいと思います。