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

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円で命を守れるよ!」ということではありません。

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

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

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