ぽこひでブログ

映画や技術的なことスタートアップ事情を適当に語ります。

マーケティング初心者のエンジニアが適当にオレオレマーケティングしてみた話 その2

こんにちは、昨日(3/26)に卒業式を迎えたpokohideです。今日は、先日公開した記事の3月編です。

以前の記事↓

マーケティング初心者のエンジニアが適当にオレオレマーケティングしてみた話 - ぽこひでブログ

はじめに

Appplaの認知度を高めてもらうために今月はTwitterの運用方法の見直しを行いました。やった事とその成果の報告です。

Appla(アプラ)とは

www.appp.la

Appplaは話題のWebサービス・アプリが見つかるキュレーションサイトです。3月19日に正式リリースをしました。

話題のWebサービス・アプリが見つかる「Apppla(アプラ ) 」を正式リリース! - Appplaのプレスリリース

結果

f:id:pokohide:20180327161926p:plain

フォロワーは851人になり、1日あたり約14人のフォロワーが増えています。IT界隈のアカウントをフォローしているので、「テクノロジー情報」「テクノロジー」「ビジネス・ニュース」に興味・関心のあるユーザが8割を超えているので質の高いフォロワーが集まってきました\(^o^)/

施策

Twitterの個人アカしか運用していなかったので、先人に学ぶということで以下のブログを参考に色々と試してみました。 

2ヶ月で1000フォロワー!Twitter運用に重要なたった8つのコツ - どん底から這い上がるブログ

主に以下の4つを行いました。

  • Twitterのヘッダーを分かりやすく
  • 投稿時間の最適化
  • 人手によるツイート
  • 関連ニュースはRTや積極的にツイートする

Twitterのヘッダーを分かりやすく

f:id:pokohide:20180327163242p:plain

ツイートのエンゲージメント情報からプロフィール参照数があったのですが、明らかにフォローには繋がっていませんでした。そこで、プロフィールからどんなアカウントかを説明するようなヘッダーに変更することで少しは改善できました。デザインも初心者なので高度なデザインではないですが、確実に以前より分かりやすくなりました。

Twitterのヘッダーサイズは1500x500なので、そのサイズに合わせてSketchで作成した。また、プロフィール文に#スタートアップを入れて検索流入を狙った。

投稿時間の最適化

今までは曜日に関わらず自動投稿する時間を指定していました。

- 11 ~ 12時
- 15 ~ 16時
- 21 ~ 22時
- 24 ~ 25時

しかし、実際には平日は通勤・通学時間がアクティブ数が多かったり、土日の日中は出かけてることが多く見られる割合が少ないといった要因から以下のように投稿時間を曜日毎に場合分けしました。

- 8 ~ 9時 (平日)
  - 平日の出勤時間帯
- 10 ~ 11時 (土曜日・日曜日)
  - 土曜・日曜の午前(午後からは出かける人が多いので日中は送らない)
- 12 ~ 13時 (平日)
  - 平日の昼休憩の時間帯
- 15 ~ 16時 (平日)
  - 平日のおやつタイムの時間帯
- 20 ~ 21時 (日曜日)
  - 日曜の夜は家でゆっくりしていることが多い
- 21 ~ 22時 (平日)
  - 平日の夜。お風呂上がりやのんびりしている時間帯
- 24 ~ 25時 (平日)
  - 平日の寝る直前。意外と見ている人が多い

人手によるツイート

Appplaでは登録されたサービスをAPIを利用して自動で紹介ツイートを行ってきましたが、人手で紹介するツイートも増やしました。

これらのツイートはAPIによって機械的に投稿されたツイートよりもエンゲージメントが高かったです。個人的にもボット的なアカウントにはあまり好感を示せないので、中の人による投稿を増やしていきます。

関連ニュースはRTや積極的にツイートする

毎日、PR TIMESやTHE BRIDGE, TechCrunchなどのメディアから情報を仕入れていてサービスリリース情報ではないが、関連する(資金調達情報や、グノシーがライブクイズを開始!といった)ニュースもAppplaに興味を持ってくれている方も興味があるだろうということで、積極的にRTやツイートをすることにしました。シェア速度もあってかこちらも反応が良いです。

さいごに

Appplaを正式リリースしてから約2週間経ちましたが、色々なユーザに見ていただいて嬉しいです\(^o^)/ 毎日最新・話題なサービス情報を提供していくので、気軽に見ていただけると嬉しいです。

また、マーケティング初心者であるため、こういった書籍・ブログがいいよ!といった情報などありましたら教えていただけると幸いです!!

IT国家エストニアのスタートアップ事情を調べてみた

こんにちは、ずっと行きたかったスイスより最近はエストニアに行きたくなってきたぽこひでです。

最近何かとエストニアの話を聞くので、気になって調べたことをまとめてみました。具体的にはエストニアがスタートアップを誘致するために行っている施策「e-residency」と「スタートアップビザ」についてのまとめです。

  • エストニアとは
  • エストニアのスタートアップ事情

エストニアとは

f:id:pokohide:20180228172311j:plain

世界に代表される電子国家。2007年に世界で初めて議会選挙をインターネット上でする電子投票を行ったり、オンライン上での議会出席が認められているそうです。

政府が発行する個人IDカードは15歳以上のエストニア国民が持つことを義務としていて、このIDを用いて行政サービスの99%を個人端末から済ませることができる。また、IDカードは運転免許証やショッピングのポイントカード、健康保険証などとしても機能している。

キャッシュレス化も浸透(人口の97%)しており、上記のIDと銀行口座も直結していて、銀行の入出金まで全て管理され、税金の徴収も自動計算して引き落とされるため納税申告もなければ誤魔化すこともできないとてもクリーンなシステムを導入している。そのため、税理士や会計士という税金関連の職業が消滅した最強の国家。

こういった背景もあり、ブロックチェーン技術も積極的に取り入れているエンジニアが好きそうな国。「Skype」が生まれた国としても有名ですね。 ブロックチェーンで運営される国、エストニア 起業家を惹きつける「未来型国家」の設計思想とは?【特集 GLOBAL INSIGHT】| FastGrow

エストニアのスタートアップ事情

エストニアはその他にも面白い制度を行っていてそれが、「e-residency」と「スタートアップビザ」です。

電子居住制度「e-residency」

この制度は2014年から始まったオンライン上でエストニアの電子住民になれる制度です。電子住民になるだけでエストニアに住むことは出来ませんが、海外に住みながらエストニアで会社を設立して、銀行口座も開設できます。電子住民になることで起業家はエストニアのスタートアップコミュニティにアクセスでき、そこで投資家やエンジニアなどのネットワークを構築することができます。しかし、実際に現地に住んで働くには就労許可や滞在許可が必要でした。そこで2017年に生まれたのが「スタートアップビザ」です。

f:id:pokohide:20180228172756p:plain ウェブ上で申込みができる「e-residency」(e-residencyウェブサイトより)

スタートアップ・ビザ

欧州域外の起業家を対象にエストニアで起業を新規設立するか、会社を海外からエストニアに移転する際に、欧州域外の従業員を通常より簡単な手続きでエストニアに呼び寄せれる制度。

FAQ — Startup Estonia

あまり「スタートアップ・ビザ」関する情報がなかったのでFAQをまとめてみた。

  • スタートアップ・ビザってどんなの?
    • エストニアに最長18ヶ月住んでスタートアップで働けるビザ
    • 12ヶ月までビザを発行でき、最長6ヶ月まで延長できる(計18ヶ月)
    • 居住を許可するために従来必要だった費用(65,000€)が必要ない
  • ビザを取って移住する場合は家族はどうなりますか?
    • 家族も同じ条件でビザが発行されることがある
    • 予め申請すれば配偶者は一時的に働くことや、居留許可をもらえる
    • 配偶者、子供、家族に同様のビザが与えられ、延長時も適用される
  • スタートアップ・ビザを貰うためにはエストニアで起業しなくてはいけませんか?
    • エストニアで起業は必須ではないが、申請するための前提条件
    • 既にエストニアに企業を持っている場合は、申請すれば大丈夫
  • スタートアップ・ビザを申請する際のコストは?
    • 短期滞在ビザの申請審査には60€
    • 長期滞在ビザの申請審査には80€
  • スタートアップ・ビザ申請時に必要な資産はありますか?
    • 申請時に十分な生活を行える資金があるか提出する必要がある
    • 滞在予定の月数 x 最低130€は持っている必要あり
  • スタートアップ・ビザはシェンゲンビザですか?
    • 最長90日の短期滞在ビザはシェンゲンビザ(シェンゲン協定加盟国内を自由に往来できるビザ)
    • 最長1年(半年延長可)の長期滞在ビザはナショナルビザ
  • スタートアップ・ビザは創設者以外でも大丈夫ですか?
    • スタートアップ・ビザは創設者のためだけ
    • 従業員は短期雇用の場合は別途普通のビザを申請する必要がある
    • 長期雇用の場合は選択した都市の大使館で居留許可を申請する必要あり
  • 会社はエストニア国内に作らなければいけませんか?
    • エストニアに会社を登録するにはエストニア国内に会社を設立する必要あり
    • 別の国の方を雇用する場合はエストニアに登録する必要がある
  • 移住するための時間はどれくらいありますか?
    • ビザ申請書には滞在予定日やエストニアへの到着予定日、出発日を明記する必要あり
    • 起業家居留許可は申請書を提出してから2ヶ月以内に発行され、最大5年間有用
    • エストニアに到着してから1ヶ月以内に居住地を登録する必要あり
  • 居留許可とビザの違いはなんですか?
    • ビザは30日以内に発行され、居留許可は2ヶ月以内に発行される
    • ビザは一時的な滞在のため。エストニアに居住するためには居留許可。
    • 一時的な滞在(ビザ)の場合は居住者に数えられないので公共サービスの権利が制限される。
  • エストニアに到着してから新しいビジネスを始めるための期限はありますか?
    • 特に期限はないが、滞在の主な目的はスタートアップの設立に関わっている必要がある。
  • スタートアップ・ビザの申請には何が必要ですか?
    • 申請書を警察と国境警備局の役場に直接提出する必要がある。
    • これを印刷して記入する
    • 40x50 mmのカラー写真1枚
    • 州の手数料の支払いを証明する書類
    • 身分証明書など

Jaapani business | Jaapan | TWDC OU

もう既に各国から「スタートアップ・ビザ」の申請は来ているようですが、半数は否定的な評価が出ているとのこと。ビザ申請の期間は10日など他国に比べてかなり短いので、海外でのスタートアップに興味がある人は申請してみるのもいいかもしれない。

さいごに

amp.review

この連載は面白いので読んでみると良いと思います\(^o^)/

マーケティング初心者のエンジニアが適当にオレオレマーケティングしてみた話

こんばんは、卒業見込みが「おおよそ卒業確定」になったぽこひでです。2018年に入ってから「Apppla(アプラ)」というサービスを個人開発していて、そのサービス認知のために行ったことをまとめました。

これをマーケティングと読んで良いのかすら分からないペーペーですが、何を考えてSEO対策などを行ったかなど参考になればと思います。

Appla(アプラ)とは

www.appp.la

Appplaは話題のWebサービス・アプリをキュレーターが紹介するサービスで、リリースされたばかりのサービスや資金調達をしたなど話題になったサービスを毎日紹介しています。「色からサービスを探す」機能やアイデアを自動生成する「アイデアジェネレーター」といったユニークなミニアプリもあるので楽しんで頂けたらと思います。

Twitterアカウント(@appp_la)は2018年1月から運用していましたが、サービス自体は2月20日に私のFacebookより初めてβ運用中であることを公開しました。開発面での話は後日、Qiitaにまとめたいと思っています。

Twitter Analytics

f:id:pokohide:20180226173505p:plain

Twitterアカウントは2018年2月26日時点で

  • フォロー : 2,036人
  • フォロワー: 410人

です。主にApppla上で発信された話題のWebサービス・アプリを自動で投稿したり、サービスの機能追加の情報を発信しています。実際にTwitterアカウントを運用し始めてから行った施策は以下の通り。

  • ハッシュタグの追加
  • ツイート時間の最適化
  • @ツイートの導入
  • 関係各所を毎日ひたすらフォロー

ハッシュタグの追加

Appplaに投稿されたサービスはそのサービスが「Webサービス」か「iOSアプリ」か「Androidアプリ」か「その他」かの情報を持っています。Twitterのフィードを眺めていた所、「#Webサービス」「#iOSアプリ」といったハッシュタグを付けて投稿している人が一定数いたため、投稿されたサービス情報を元に適切なハッシュタグを付けることにしました。

この施策による効果は測定できていませんが、結果的にTwitterで「#Webサービス」「#iOSアプリ」で検索するとAppplaのツイートしか見られないくらいジャックしていたので、まあ良かったのかなって感じです。

#Webサービス hashtag on Twitter

ツイート時間の最適化

当初は適当な時間に投稿されたサービスを自動的にツイートしていたのですが、最適化を行うことにしました。

Twitterで拡散を狙うなら朝5時が穴場!100万ツイートの分析で判明したTwitterで拡散されやすい時間帯|ferret [フェレット]

現状は、10 ~ 11時、15 ~ 16時、21 ~ 22時、24 ~ 25時にツイートするように最適化しています。技術的な面で言うと、自動投稿の処理はバックグラウンドで実行しており、実行を行う予約時間をその時々で調整しています。

@ツイートの導入

他にも投稿されたWebサービス・アプリにはそのサービスの情報を発信するTwitterアカウントを持っている場合はその情報も紐付いけていました。この情報を用いて、Twitterに自動投稿する際に@メンションを付けて呟くことにしました。

この結果、自社サービスがツイートされたことをTwitter上で相手が確認することができるため、フォローバック率が格段に上がりました。リリースされたばかりであればあるほどフォローバック率が高かったので、これは有用だっとと言えます。

関係各所を毎日ひたすらフォロー

ただの大学生で資金が潤沢でもないため、広告でプロモーションを行えないだろう(それにTwitterのプロモーションは最適化されていないと感じるので見送った)と言うことで、関係各所のフォロワーをひたすら毎日フォローすることにしました。サービスのキーワードでもある「スタートアップ」「ベンチャー」「ベンチャーキャピタル」「資金調達」といったワードで検索して出て来るアカウントのフォロワーを毎日凍結しない程度にフォローしました。

その結果、フォロー数が2,000人を超え、フォロワー数は400人とフォロー数が多い何か怪しいアカウントになってきましたが、結果的にはこの地味な作業がフォロワー集めにおいて一番よかったのかなと思っています。

f:id:pokohide:20180226175434p:plain

結果的に単純にフォロワー数という数ではなく、実際に新しいサービスやニュースに興味を持ってくれた400人が集まってくれたと思うので、今後も地道にSNSマーケティング??していきます。

Google Analytics

とりあえず入れておくかということで導入したGAですが、正直使い方が全然分かりません。1ヶ月のアクティブユーザ (1日, 7日)の推移は以下のようになりました。

f:id:pokohide:20180226180603p:plain

Facebookでβリリースを告知した2/20日付近の1日のアクティブユーザは100人を超えて、7日間のアクティブユーザ数も伸びてきてはいるのでこれでいいのかなー(´・ω・`)といった感想しかありません。マーケティングの「マ」の字も分からないので、ここはもう少し勉強したいと思います。

一応、個人的にKPIは決めており、サービスのView数やシェア数ではなく、テック系プロダクト版のNewsPicksを目指していることもあり、キュレーションされる話題のWebサービス・アプリについてコメント欄で「このサービスはこうだから面白いね!」「ビジネスモデルはこうだから、新しい!」というように盛り上がって欲しいなと思っており、サービスのView数に対するコメント数やいいね数をKPIにしています。それを集計するためにGoogle Analyticsのイベントトラッキングを導入した結果が以下です。

f:id:pokohide:20180226175746p:plain

実際にどのイベントが実行されたかはここでは表示していないですが、このイベント数を目安に色々な機能改善を行っていこうと思っています。

Google Search Console

SEO対策としてSearch Consoleにも登録しました。

f:id:pokohide:20180226181559p:plain

主にSearch Consoleを追加してから行った施策は以下の通り。

  • 構造化データ化
  • タイトルや説明文の最適化

構造化データに対応

当初からパンくずリストは用意していましたが、構造化データとして認識されていなかったり、サービスの詳細ページも適切に認識されていなかったため、JSON-LDを用いて構造化データを明示することにしました。

Google推奨「JSON-LD」で構造化マークアップ - Qiita

タイトルや説明文の最適化

Search Consoleにサイトを追加してから、「重複したタイトルや詳細文が多いので変更したほうがいいよ」とSearch Consoleから指摘されたので修正を行いました。タイトルや詳細文が同じになっていたのは、検索や2ページ目のタイトルだったので、ページ数をタイトルに含めたり、何で検索した結果かをタイトルに表示することで重複を減らしました。

この結果、適切にページが読み込まれてGoogleにも認識されてきたのかなと思います。

f:id:pokohide:20180226181603p:plain

さいごに

現在「Apppla」はβリリース中です。使っていただいてバグや「こういう機能・情報が欲しいな!」などあれば気軽に言っていただけるとめちゃくちゃ嬉しいです\(^o^)/

今回の記事では主に数字やグラフにフォーカスしましたが、この他にもTwitter/FacebookのOGP対応やHTTPS化などの対応も行っています。技術的な記事は正式リリース後にまたまとめたいと思っているので、その時も読んで頂けたらと思います。

エンジニアのほのぼの開発に適した「兄者弟者」が実況するゲーム6選(2017年度)

こんにちは。iMacデュアルディスプレイとして使用するわけでもなくただ単にYoutubeを見るために使用しているぽこひでです。

本当に集中したいときはSpotifyで洋楽を適当に聞き流しながらか、無音で黙々とコードを書くのですが、夜にほのぼの開発したい時はYoutubeを見ながら作業することが多いです。今日はよく見るゲーム実況者の「兄者弟者」のエンジニアが作業用に見るのにちょうど良さげなゲームを紹介します。

※ちなみに、無音での開発効率を100%とすると、弟者のゲーム実況は大変面白いため50%以下に半減します。用法・用量を守ってご視聴ください。

おすすめゲーム6選

2BRO.,三人称+1の「Witch It」【かくれんぼ】

www.youtube.com

2018年に入ってから公開された「Which It」。兄者・弟者・おついちさんだけではなく、三人称の方も集まっての大人数でみんなでワイワイ・ゲラゲラやってるゲームです。 ゲーム内容は「ハンター陣営とウィッチ陣営に別れて物に変身できるウィッチを探して倒す」という隠れんぼ形式のゲームです。内容はシンプルですが、お互いのやりとりが面白く、耳で聞いてるだけでも笑えてきます!気付いたら開発の手が止まって動画に集中しているので注意が必要です。 このゲームは弟者視点だけでなく、兄者視点、おついち視点、三人称視点と色々な視点の動画が公開されているので何度も楽しめること間違い無し!

弟者の「Dead by Daylight YEAR3」

www.youtube.com

「Dead by Daylight」と言うキラー1人と一般人4人が一つのマップに入って脱出を試みるゲームです。見てもらうのが早いと思うのですが、YEAR3に入って大好きな「SAW」シリーズのザ・ピッグが登場しています!激熱ですね。 割と短い動画なので開発の手を止めて集中して見ましょう。ホラーというよりは表現が血が飛び散ったりと少々グロッキーなので、苦手な人は我慢して見ましょう。

弟者,兄者,おついちの「Gang Beasts」【2BRO.】

www.youtube.com

落としたら負けの超シンプルなゲームです。操作が難しいのかかなりユニークな動きをするのと、みんなのめちゃくちゃ楽しそうな笑い声に誘発されてめちゃ笑えてきます。これは動画としても楽しめますが、声だけでもかなり楽しめるので30%くらいの開発効率ダウンで済みます。

弟者,兄者,おついちの「PLAYERUNKNOWN'S BATTLEGROUNDS」

www.youtube.com

これぞ個人的には作業用動画の大本命。もう更新は終わっちゃったのですが、これから見始める人は安心してください。約40分の動画が100個あります。PUBGと呼ばれる島に降り立った100人が家にある武器・防具を拾ってバトル・ロワイアルするゲームです。 かなり広大なマップで敵と遭遇する確率が高いわけではないので比較的穏やかな場面があったり、Call of Dutyのように目まぐるしく戦況が変化するわけではないのでみんなの会話を楽しみながら開発できます。盛り上がっている所は開発の手を止めて集中して見ましょう。

弟者,兄者,おついちの「モンスターハンター:ワールド」

www.youtube.com

ついに解禁されたモンスターハンター:ワールド。これはもう開発している時間などありません。20分未満と動画自体は短いので、開発を諦めて集中して見ましょう。全く開発になりません。

弟者,兄者,おついちの「DESOLATE」

www.youtube.com

FPS視点でオープンワールドをサバイバルするゲームです。変な獣や敵が出て来る世界でミッションをクリアしながら、水やストレス、空腹、寒さにも耐えながら生き残るゲームで、これも面白いです。

さいごに

弟者のゲーム実況を見ながら開発することは不可能です。諦めて集中して見ましょう。

OthloTech代表わず

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

先日開催されたOthloHack2017を最後にOthloTechの代表を引退しました。

そして、次の代表に引き継ぎました。

今日は簡単に昔を振り返りたいなーって思います。

OthloTech創ったとき

OthloTechは2016年5月に僕と他2人の学生と立ち上げたコミュニティで立ち上げた経緯とかはここに詳しく載ってるので割愛します。

othlotech.hatenablog.com

僕自身の話をすると、学生団体やどっかのコミュニティに所属したこともなければそんなにエンジニア勉強会に出たこともあるわけではなく、名古屋にエンジニアいないって言われるけどそんなことないし、かと言って京都や東京みたいにIT系学生のコミュニティがすでに存在したわけでもなかったので、まぁ創ってみるか〜そんな感じのスタートでした。

立ち上げ当初から興味を持ってくれる学生に恵まれて運営メンバーも増えていき、月1ペースで色々な勉強会やイベントを開催していきました。当時は休学中で東京にエンジニアインターンで色々な企業に行っては、「OthloTechっていうIT系学生のコミュニティやってますー!」って名刺をばら撒きまくってました笑

なんかもうよくわかんなかったけど楽しかった。

最初のハッカソン

OthloTechを立ち上げて3か月後に最初のハッカソンOthloHack2016」を開催しました。

これは正直かなり辛かったです。立ち上げて2,3か月と経ってなくて実績も何もない学生コミュニティがハッカソンを開くから協賛金を出してくれる協賛企業を見つけたり、お金や参加者の個人情報が絡むため、承諾書や請求書などそういった所にも気を配らなくてはいけなかったり、新しいことだらけでとにかく我武者羅に頑張ってました。

集客期間も約1か月とかなり短かったりもしたんですが、何とか参加学生30名と協賛企業5社を集めれて無事開催することもできました。

f:id:pokohide:20171011153505j:plain

OthloHack2017

先日開催した「OthloHack2017」では去年の倍の約60名の学生が参加してくれてとにかくヤバかったです。去年は東海最大級の学生ハッカソン(諸説あり)だったんですが、今年こそは東海最大の学生ハッカソンを名乗れる気がします笑

個人的にはあーもう1年経ったのかっていう時間軸的な感想しか正直なかったんですが、去年のハッカソンに参加してくれてた子が今年はこのハッカソンの運営メンバーになってたり「時代が移り変わってるーー」ってなってる今日このごろです。

f:id:pokohide:20171011153518p:plain

さいごに

代表は引退しましたが、OthloTechの運営にはまだ携わるつもりです。学生期間も残り半年(※1)ですが、まだ色んなことやって名古屋のIT界隈盛り上げたいなって思うのでOthloTech含め応援していただけたら嬉しいです\(^o^)/

※1 諸説あり

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が盛り上がればなと思っています。色々なエンジニアイベントや大学の講義などで使われることを願っています。