他人のプロフィールをみんなで好き勝手に編集できるプロフィールサイト「 Watakusi 」をローンチしました

tl; dr

昨日の夜、他人のプロフィールをScrapboxみたいなノリで編集できるWebアプリケーションを公開しました。

Scrapboxみたいなノリ」とは言いつつも複数人同時編集とか現状は対応していなくてアレなんですが、思ったより好評で、結果的にfirebaseの有償プランを契約することにまでなりました。嬉しい限りです。

ぜひ使ってみてください。よろしくお願いします。

Watakusiができるまで

この記事には本来技術的に頑張ったことなどを書くつもりだったんですが、ちょっと路線変更してどうしてこのサービスを作ろうと思ったかについて書こうと思います。技術的なところは複数人同時編集やアーカイブページのSSRなどに対応したら書こうと思います。

イデア

ここ1ヶ月くらい、何か作って公開するなら今は比較的時間があるし絶好のチャンスだなと考えていて、アルバイトの通勤途中に考えた色々なアイデアを帰ってからA4のコピー紙に書き殴る日々を送っていました。(一時期はその場でGoogle Keepに書いておいたりもしたんですが、忘れちゃうくらいなら大した発想じゃないやろという自己啓発書にありがちな考えからやらなくなりました。)

f:id:E_ntyo:20190120180612j:plain
地球の限りある資源を大切に

  • ピンクちゃんねるに代わる、えっちな話題で盛り上がるための場所
  • WebGLを使って、nanoblockをブラウザでシミュレーションできるようにするツール
  • 「折りたたんで小さくできるトートバッグ」みたいな、普通に使っても便利でかつ原価もかからなさそうなアイテムを使ったSUZURIみたいなサービス

など色々と出てきて、そもそも没になったものもあれば途中まで作ってイケてないなと思うものもありました。この活動の一番最後にポンと出てきたのがWatakusiだったというただそれだけです。

実装

思いついた時、これはいいアイデアだなと我ながらに思ってニチャついていました。だから作っている途中で同じようなことを他の人にやられたら嫌だなと思って、とにかく早く出そうとめちゃめちゃ雑な実装で作って公開したら案の定盛大にバグってしまいました。今はあらかた直したつもりですが未だに不具合が残っていて心の底から後悔しています。

早く作るために、Firebaseを使いました。使う度に便利になっていてしかも無料なので、本当にすごいなと思います。バイト後や土日の休みを使ってだいたい10日くらいで作りました。

もう本当に早く出したくて、faviconもElectron製の簡易ロゴ作成ツールみたいなものを発見してそれで10分くらいでつくりました。今見返したらDotgridという名前でした。

f:id:E_ntyo:20190120180336p:plain
ロゴデザイン

途中誰かにアイデアを話してブラッシュアップしようかなとか、仲の良いオタクでアルファリリースとかやろうかなとか思ったんですが、絶対にパクられたくなかったのでやりませんでした(やるべきでした)。

あと、Twitterを見ないようにしました。プログラマとしてもアイデア太郎としても自分よりすごい人がいっぱいいるので、「俺がやらなくてもこの人たちだけで事足りるじゃん」となりそうだったので。それにもうTwitterはマウンティングと誰かの批判で溢れかえっていて、創作の時間をそういうのを見ることに奪われたくないなと思っていました。この判断だけは正解だったなと思います。結果バグりましたが。

おわりに

以上になります。ほとんどはてなユーザさんへの告知目的で書いたので中身がスカスカですみません。

繰り返しになりますが、 https://watakusi.info をよろしくお願いいたします。

www.watakusi.info

転バ(転バイト)エントリ

tl; dr

今年の四月に拾っていただき、以来半年間お世話になっていたトゥギャッター株式会社を退職して、まもなく株式会社HERPで働き始めます。

togetter.com

herp.co.jp

以降は、働いてみてわかったトゥギャッター株式会社のいいところを書いていこうと思います。

Togetterのいいところ

たくさんあります。

面白いタスクをアサインしてくれた

基本的にプログラマの学生アルバイトというのは勝手な生き物で、週に二、三日しか勤務しない上にリモートで勤務したがったり、大学の試験だの好きなロック・バンドのライヴだのを理由に休もうとしてきます。そういう人間に適切なタスクを振るというのは明らかに大変なのですが、にもかかわらず、Togetterでは自分のスキルに合った楽しい仕事をたくさんやらせてもらえました。たとえば、

  • ツイートをTwitter for Webから直接まとめられるようにするためのChrome拡張の開発
  • ソーシャル連携だけで応募が完了する求人サイトの開発
  • モバイルアプリ(React Native製)のTypeScriptのコードの割合を増やす作業
  • ヘルプページのキーワード検索機能の実装

などです。これらのタスクは以下の共通点があります。

  • TypeScriptで書けたのでありがたかった
    • 入社時にTypeScriptを普段使っていることを説明したらTypeScriptのタスクだけが振られるようになった
  • Togetter本体と違って他の人と同期的にコミュニケーションを取る必要がなかったので、自分のペースで開発できた(アプリは例外)
  • 人の目につく変更であるため、「コレ俺が実装しました!」ができて自己顕示欲が満たされる

こういった特徴のタスクが振られると僕はすごくやりやすいというか、気持ち良く仕事をすることができて、結果やることがなくて暇な時にとりあえず仕事をするか…と意識するようになっていました。

これは誰が偉いかというと、僕に(というかアルバイトのプログラマ全員に)仕事をアサインしてくれる社長(id:yositosi)はもちろん、僕がやるタスク以外の、例えば地味で目立たないけれど必須のタスクや難しくて何時間も悩むことになりそうなタスクを引き受けてくれている社員の皆々様が偉いのです。本当に感謝しております。

スタッフはみんなインターネットがすき、Twitterがすき

僕はなんだかんだでインターネットが好きなのですが、インターネットが好きだという人は実はあまり周りにいなくて、Togetterでインターネットが好きな人と一緒に働くことができてすごくありがたかったです。自分と似た価値観の人ばかりがいる環境はとても居心地が良いものです。

yositosiさんと仕事ができる

これが僕にとって一番良かったと思っている点ですが、趣味でWebサービスをつくっている人間として、 id:yositosi さんと仕事ができたというのはすごく貴重な経験だったと思います。どうして貴重なのかというのはこの記事を読むとわかります。

note.mu

尊敬、羨望、そして、嫉妬…

TOHOシネマズで映画がタダで観られる

これが僕にとって二番目に良かったと思っている点ですが、福利厚生でTOHOシネマズの映画チケットが月数枚まで無料で使えます。ふつうこの手の福利厚生の対象は社員ですが、Togetterではアルバイトも対象となっていました。この前はJOKERを観てきました。

そんなにいい会社なのに、どうしてやめてしまうの

一ヶ月くらい前にHERPの社員さん(Twitterのフォロワー)から「あなたのアウトプットを普段からみています。つくばにオフィスができるから来ない?」みたいな感じのDMが来たことがきっかけでした。僕はブログ記事にモナドが便利そうだ〜とか書いてみたりちょっとしたプログラムにモナドライブラリを使ってみたりしたことはあるものの、FPや圏論に対する理解はかなり怪しく、HERPのみなさんと肩を並べて仕事ができる自信がありませんでした。その旨を返信しましたが、「まあ大丈夫やろw」みたいな感じだったのでこれを機に本格的に勉強していくことに決めました。

それと、事業を良くしていく上で僕みたいなよくわからない人間が一人くらいいてもいいのかなとも少しだけ思っています。給料泥棒にならないようがんばります。

さいごに

Togetterはいい会社なのでぜひ一度ご検討ください。

en-jp.wantedly.com

bosyu.togetter.dev

それと、Togetterは今年で10周年になるそうです。個人開発からはじまったWebサービスがみんなに愛されて10周年、素晴らしすぎるしめでたすぎるのでみんなでお祝いしましょう。

game.togetter.com

ちなみに僕は今月で22周年になります。これはべつにめでたくないですね。慰めになにかください。

Amazonほしい物リストを一緒に編集しましょう

ヴォイスチェンジャーを使って匿名で音声を投稿するWebサービスをつくりました

tl; dr

nanimonoca - 匿名音声投稿サービス

表題の通り、「nanimonoca」というWebサービスをローンチしました。経緯としては、今年の一月に「他人のプロフィールを勝手に編集できるプロフィールサイト」をつくったところ思いの外好評で、これに味をしめて大学の夏休みでまたWebサービスをつくろうという気持ちになったというところです。

e-ntyo.hatenablog.com

はてなにも匿名日記サービスがありますが、あれ以上に面白いコンテンツが投稿される場所になってほしいと切に願っております。ぜひぜひご利用くださいませ。

つかいかた

音声を録音・再生するサービスなのでイヤホンを使用することを強くおすすめします。 また、当然マイクのないデバイスでは録音機能が利用できません。それとiOSでは色々あってまだ録音機能が使えません…ごめんなさい。

https://nanimonoca.online/post にアクセスすると、まずマイクの使用を許可するように要求されるので許可してください。トップページから画面右上の「投稿画面」をクリックして遷移することもできます。

f:id:E_ntyo:20191011102218p:plain
許可しないとトップページに遷移します

f:id:E_ntyo:20191011102513p:plain
許可するとこういう画面が表示されます

この時点で自分の声がヒストグラムで可視化されます。マイクの入力が大きすぎたら、シークバーを動かして音量を調整してあげてください(入力の音が大きすぎると音が割れてしまいます)。ヴォイスチェンジャーをクリックすると、声が高くなってテレビ東京の警察24時に出てくる悪い人みたいな声になることができます。「録音開始」をクリックすると録音が開始されますが、 録音された声はこの時点ではインターネット上に公開されません ので安心してください。録音に失敗しても録り直すことができますし、気が変わってやっぱり投稿しないということも出来ます。

f:id:E_ntyo:20191011103144p:plain
録音が完了するとこの画面が表示されます

録音を終えたら、最初から音声を再生して確認することができます。このとき、波形の任意の場所をクリックすると音声を途中から再生することができます。内容に問題があれば「録り直す」ボタンを押して録り直すことができます。問題がなければ、タイトルと説明文を設定して投稿します。このタイトルと説明文は、SNS上でシェアされた時の見え方にも影響します。

f:id:E_ntyo:20191011103705p:plainf:id:E_ntyo:20191011103702p:plain
投稿のタイトル・説明文はTwitterでシェアされた時に展開されます

また、投稿時にサインイン(現在はTwitter連携による認証にのみ対応しています)して投稿することで、自分の投稿に新着コメントがついたときに通知を受け取ったり、過去の投稿一覧を管理したりすることができます。他の人の投稿をお気に入りして管理することもできます。適時利用してください。

f:id:E_ntyo:20191011104642p:plain
サインインするとこういう画面が使えるようになります

以上が使い方になります。時間に余裕があればサイト上にもまとめようと思います。質問があればこちらのコメント欄か https://twitter.com/e_ntyoまでお願いいたします。

[プログラマの方へ] 実装についての質問を募集しています

このサービスはFirebaseで実装しています。ココはどうやって作ったの?とか興味があることがあればぜひ気軽にご質問ください(このブログのコメント欄でもTwitterでも結構です)。例えば、

  • 波形データをmpeg形式に圧縮するのってどうやってブラウザ上で実装したの?

  • ヴォイスチェンジャーってどう実装したの?

  • Twitter for Webで投稿のURLをツイートしたらTL上で動画として再生できるみたいだけれど、これってどう実装したの?

などなど。ドヤ顔で「それはねっ…!」とお答えしたいと思います。

また、逆に皆さんからサービスに対するアドバイスももらいたいと思っています。

こういうのを求めています。よろしくお願いします。

tweet2img.web.app を使ってネットアート作品をつくりました

tl;dr

大学のメディアアートをつくろう!みたいな授業でつくった作品を紹介します。こちらです。

近くで見てみないとよくわからないと思うので現物を見てみてください。今日と明日のお昼から18:00くらいまでの間、筑波大学春日キャンパス7B棟206教室で展示されています。他の学生の作品や、担当教員である落合陽一先生の作品もあってにぎやかです。

ネットアート

私はメディアアートを作ったことがなかったので、まずメディアアートとは何ぞやというのを掴むために好きなメディアアート作品を100個見つける作業をしました。

hackmd.io

この作業の過程で、自分は http://exonemo.com/works/http://0100101110101101.org/works/ に代表されるネットアートという芸術領域に興味があるのだということがわかりました。多分インターネットオタクだからだと思います。   私はちょうどその頃「バズった/面白いツイートをテンプレ化して、その流行りに便乗して自分の言いたいことを言う風潮」が気に入らなくて謎のフラストレーションが溜まっていたところだったので、これを題材にしようと思い立ちました。

どう作ったか 

ちょうど tweet2img.web.app というツイートのきれいなスクショ画像を生成するやつをつくっていたので、これを使ってツイートを物理的な媒介で表現することは先に決めました。

あとは指導教員と相談して「便乗感」のあるミディアムを決めて適当に並べました。候補として第三のビールとかラーメン二郎っぽいコンビニのラーメンとか色々出たのですが、ツイートをステッカーにしてそういう製品のラベル部分に直接貼れたらいいよねということで、ツイートのステッカーをつくりました。

f:id:E_ntyo:20190810124914j:plain
なんだこれ
f:id:E_ntyo:20190810124925j:plain
これはなに?
f:id:E_ntyo:20190810124937j:plain
なんですか?これ

さいごに

便乗ツイートの「便乗して作ったもののオリジナルよりクオリティが落ちている」ところが伝われば幸いです。展示会にきてね!

近況

大学の試験が一段落したので近況報告を。まだ提出課題が山のように残っているのは秘密である。

1. AnyGma リリース

"お気持ちを共有するためのテキストサイト"であるところの"AnyGma"というテキストサイトを大学の人たちとつくった。

動機は、大学の課題でWebサービスを作らないといけなかったから。ふとオタクがいわゆる「お気持ち」をbase64エンコーディングしたテキストをツイートをしていたことを思い出して(オタクだから陰湿なのだろう)、

twitter.com

これについて、「お気持ちツイートをする専用の場所」があってもいいんじゃないかと思ってつくった。お気持ちツイートにはパスワードを設定して知っている人しか読めないようにしてみた。鍵垢でオタクにパスワードと投稿URLを共有して、「フォロワー(お前ら)のフォロワーまでになら共有していいよ」みたいな使い方ができたら便利かなと思って。

使い勝手(投稿ごとにパスワード覚えるのだるくない?)とかセキュリティ(パスワード総当りで破られたりしない?)のこととか全く考えてないけれど、使ってくれる人がいたらそのへんは改善するのでよければ使ってみてほしい。無料で広告なし。

技術的に面白かったのは、「質問箱」とか「DAICON」みたいにお気持ち(投稿の本文)の画像プレビューがog:imageに設定されたら面白いなと思って実装してみたところ。テキスト→画像のアプローチは色々あると思うんだけれど、今回はGCPのCloud Functionsで動かさなきゃいけなくて wkhtmltoimage が使えなかったこととか色々あって以下のやり方になった。

  1. お気持ち本文のテキストをHTML+CSSで書かれたテンプレート(質問箱では本文の周りを囲っている外枠の部分とテキスト本文が入る内側の部分から構成されている)に埋め込む
  2. そのHTMLファイルを puppeteer でレンダリングしてスクリーンショットを撮る

地獄みたいなやり方である。何が地獄かというとchromiumが起動したりHTMLをレンダリングしたりするので鬼のように遅いところ。まあまともに使われるようになったらベターなやり方を考えることにする。

2. Togetter Clip! リリース

前回の近況報告でも触れていたが、4月から新しいバイトを始めた。

togetter.com

業務の一つとして、Togetterでまとめをつくる作業を便利にするChrome拡張をリリースした。ツイートのURL取得をシュッとできるようにするツールである。このブログにツイートを貼り付けるときも使ったが、本当に便利なのでぜひ使ってほしい。

togetter.com

3. サブカル

忙しいとは言いつつもちゃっかりライブハウスには足を運んでいて、前回の近況報告後、蘇我ロキノン系フェス、今年30周年の東京スカパラダイスオーケストラのワンマン2公演、KEMURIのツアー1公演に行った。

KEMURIのツアーの対バンがSHADOWSで、終演後にHiroさんが物販の端っこの方に何とも言えない表情をしながら体育座りで座っていて、それが本当に印象的で今もずっと脳味噌に焼き付いている(怖くて話しかけられなかった)。今までフェス(最後のWarped Japanだった気がする)とか対バンでしか見たことがなかったので今度ワンマンに行こうと思う。

近況

  • 大学に入学した

    • 前の大学の三年生から年度をまたいで今の大学の三年生になったため、1年遅れになっている
    • キャンパスが静かで人口密度が低いところがイイです
    • 他学類の講義でSchemeを教わったりできてうれしいです
    • 近くに飯屋がないことが悩みです
  • LÄ-PPISCHを聴いている

  • fp-tsを使って、大学のポータルサイトから休校情報をスクレイピングしてメール通知するbotをつくった

    • モナドへの理解を深めたい気持ちがずっとあって、自分以外の人が書いたWeb上の記事を読んでそこに書いてあったHaskellのサンプルコードを動かしてみたりしたけれど、難しいやつだといまいちピンと来なくて、「いきなりHaskellをやるから未知の概念がコードにたくさん出てきてわからないのであって、手に馴染んだプログラミング言語モナドが表現されていたら少しはわかりやすいのでは」という発想から最近はfp-tsを使っている
    • fp-tsに慣れてきたらまたPureScriptにもどって何かをつくりたい
  • 新しいバイトをはじめた

    • これで新しいバイト先が決まった(ありがとうございます)
    • 待遇(家のこととか)はまだハッキリ決まっていないので、ハッキリしたら公開します
      • それまで社名も伏せておきます
    • 仕事は楽しくて、もうデプロイさせていただいた機能もあります

半年間のフリーター生活

tl; dr

  • 半年間のフリーターとしての最高の生活が終わり、大学生になります
    • 大学の近くの居住地を探しています、よろしくお願いします

TypeScriptを書くので、茨城県つくば市周辺に住まわせてください!!! · GitHub

半年間のフリーター生活はどうでしたか?

バラ色の日々でした。いっぱい遊びました。これが俺の人生の夏休みやという感じでした。

www.youtube.com

半年間で何をしましたか?

  • 株式会社カブクで働いていました

    • 既存のAngularアプリケーションに手を入れることが主な業務でした

      • Angular 4.xのプロジェクトを6.xに移行して、そのやり方を会社のブログにまとめました
      • ↑とは別のプロジェクトで、Angular 7.xのアプリケーションの開発をしていました
    • カブクでは、リモートで今後もしばらく仕事を続けるつもりです

    • カブクはプログラマにとって本当に良い会社だと思います

      • インターン(アルバイト)として働く上で、業務内容的にも業務時間的にも比較的自由にやらせてもらえました
      • いわゆるスタープログラマというか、憧れのあの人と仕事ができる!が叶いました
      • 開発合宿に連れて行ってもらいました
      • 技術書の購入申請が可能でした
      • コードがかなり健全で、ライブラリ・フレームワークのバージョンも新しく、快適に開発できました
      • メカ系の方も含め(カブクは製造業xITの会社なので)、社員のエンジニア率が高く居心地が良かったです
  • PureScriptで既存のAngularアプリケーションを書き直して、そこでわかったことなどについてHTML5 Conference 2018で発表しました

  • WatakusiというWebサービスをローンチしました

    • 少しずつですが、時間を見つけて改善しています。複数人同時編集はもう少し待ってください 🙇
    • Twitterアカウントをつくったので、よければフォローしてください twitter.com

これから(入学後)の予定は?

とにかく金と居住地を手に入れるために動こうと思います。

さいごに

入学祝い(と大学の近くの居住地)をお待ちしております。

www.amazon.co.jp

他人のプロフィールをみんなで好き勝手に編集できるプロフィールサイト「 Watakusi 」をローンチしました

tl; dr

昨日の夜、他人のプロフィールをScrapboxみたいなノリで編集できるWebアプリケーションを公開しました。

Scrapboxみたいなノリ」とは言いつつも複数人同時編集とか現状は対応していなくてアレなんですが、思ったより好評で、結果的にfirebaseの有償プランを契約することにまでなりました。嬉しい限りです。

ぜひ使ってみてください。よろしくお願いします。

Watakusiができるまで

この記事には本来技術的に頑張ったことなどを書くつもりだったんですが、ちょっと路線変更してどうしてこのサービスを作ろうと思ったかについて書こうと思います。技術的なところは複数人同時編集やアーカイブページのSSRなどに対応したら書こうと思います。

イデア

ここ1ヶ月くらい、何か作って公開するなら今は比較的時間があるし絶好のチャンスだなと考えていて、アルバイトの通勤途中に考えた色々なアイデアを帰ってからA4のコピー紙に書き殴る日々を送っていました。(一時期はその場でGoogle Keepに書いておいたりもしたんですが、忘れちゃうくらいなら大した発想じゃないやろという自己啓発書にありがちな考えからやらなくなりました。)

f:id:E_ntyo:20190120180612j:plain
地球の限りある資源を大切に

  • ピンクちゃんねるに代わる、えっちな話題で盛り上がるための場所
  • WebGLを使って、nanoblockをブラウザでシミュレーションできるようにするツール
  • 「折りたたんで小さくできるトートバッグ」みたいな、普通に使っても便利でかつ原価もかからなさそうなアイテムを使ったSUZURIみたいなサービス

など色々と出てきて、そもそも没になったものもあれば途中まで作ってイケてないなと思うものもありました。この活動の一番最後にポンと出てきたのがWatakusiだったというただそれだけです。

実装

思いついた時、これはいいアイデアだなと我ながらに思ってニチャついていました。だから作っている途中で同じようなことを他の人にやられたら嫌だなと思って、とにかく早く出そうとめちゃめちゃ雑な実装で作って公開したら案の定盛大にバグってしまいました。今はあらかた直したつもりですが未だに不具合が残っていて心の底から後悔しています。

早く作るために、Firebaseを使いました。使う度に便利になっていてしかも無料なので、本当にすごいなと思います。バイト後や土日の休みを使ってだいたい10日くらいで作りました。

もう本当に早く出したくて、faviconもElectron製の簡易ロゴ作成ツールみたいなものを発見してそれで10分くらいでつくりました。今見返したらDotgridという名前でした。

f:id:E_ntyo:20190120180336p:plain
ロゴデザイン

途中誰かにアイデアを話してブラッシュアップしようかなとか、仲の良いオタクでアルファリリースとかやろうかなとか思ったんですが、絶対にパクられたくなかったのでやりませんでした(やるべきでした)。

あと、Twitterを見ないようにしました。プログラマとしてもアイデア太郎としても自分よりすごい人がいっぱいいるので、「俺がやらなくてもこの人たちだけで事足りるじゃん」となりそうだったので。それにもうTwitterはマウンティングと誰かの批判で溢れかえっていて、創作の時間をそういうのを見ることに奪われたくないなと思っていました。この判断だけは正解だったなと思います。結果バグりましたが。

おわりに

以上になります。ほとんどはてなユーザさんへの告知目的で書いたので中身がスカスカですみません。

繰り返しになりますが、 https://watakusi.info をよろしくお願いいたします。

www.watakusi.info