RIS形式の書誌引用データをSIST02形式に変換するツールをつくった

tl; dr

表題の通りです。SIST02形式の書誌引用を必要としている人にとってはかなり便利だと思います。

f:id:E_ntyo:20200320193040p:plain
スクリーンショット

ris-sist02.web.app

モチベ

ResearchGate(http://researchgate.net/)やJ-STAGE(https://www.jstage.jst.go.jp/browse/-char/ja)に掲載されている論文は書誌引用データがRISやBibTexなどのフォーマットで提供されています。が、私は諸事情によりSIST02形式のものを必要としており、これまでCitation Machine(https://www.citationmachine.net/sist02)や「『引用・参考文献の書き方』作成テンプレート (http://inyo.nichigai.co.jp/)」などを利用してきました。こういったCLIツール(https://github.com/himkt/sist02-cli)なんかも開発されているようです。

しかし、この手のツールは手動で書誌的事項を適切なフィールドに入力していく必要があり、私はしばしば入力内容を間違えてしまいます。Citation Machineには記事タイトルを入力するとWeb上からそれっぽい記事を見つけてきて書誌引用データを自動で生成してくれるという最強の機能がありますが、当該記事がヒットせず結局人手で入力することになってしまうことがしばしばあります。仕組みをよくわかっていないので何とも言えませんが、なぜかResearchGateやJ-STAGEに掲載されている論文でもそういうことが起こるのです。

なので、ResearchGateやJ-STAGEが提供しているRISの書誌引用をコピー/ダウンロードしてきて、あとはそれをSIST02に変換するツールをつくってそいつに投げればいいなという発想に至りました。

技術

FableというF# -> JSなAltJSを使っています。FFIサードパーティのReactコンポーネントを使ったりとかも簡単にできてよかったです。かなりオススメです。 コードはここにあります。

github.com

よいところ

  • 入力のRISに不足(例えば開始のページ番号SPや終了のページ番号EPがない場合がよくある)があったとしても、ライブプレビューを利用して追加・修正することができる
  • 直接入力とファイルアップロードの両方に対応している
  • 広告なし(普段Citation Machineを使っている人には嬉しいニュースですね)

ぜひ使ってくださいね。

機械学習で「はてな匿名ダイアリー」の投稿の著者の性別を当てる

tl;dr

何をトチ狂ったのか、ここ一ヶ月くらい「はてな匿名ダイアリーに投稿された記事のタイトル及び本文から機械学習で著者の性別を当てる」という試みをしていました。結果、こんな感じで「人気記事アーカイブ」のページに推定された著者の性別を表示する Chrome 拡張ができました。

chrome.google.com

例えば、同一の男性による投稿(とされている)「彼女できないぞ日本死ね」と「皆さんへのご報告、やっぱりダメでした日本死ね」はどちらも男性と推定されました。

また、「保育園落ちた日本死ね!!!」は女性と推定されました。一方で、「おっさんが流行りのゲームを作るやってみた結果」は男性と推定されてほしかったのですが、女性と推定されてしまいました。

今後の展望としては、今より分類精度を向上させたいのと、年代など他の著者情報も推定してみたいです。

以降の文章には、分類モデルやシステムの実装について詳しく書いてあります。興味があればぜひ。

モチベーション

一般的なブログサービスでは、ふつう、ブログの記事本文を読む前に書き手の情報を知ることができます。本人の公開設定によりますが、例えば名前、性別、年代、職業、家族構成などが考えられます。

当然、はてな匿名ダイアリーでそれらの情報を知ることはできません。しかし、できないと言われたらよりやりたくなるのが男の子のサガです。性だけに!*1

とは言いつつも、本当にできないことをしようとするのは時間が勿体無いので、できそうかどうかの見通しを立てる必要があります。文章から著者の性別を当てるということは、そもそも可能でしょうか?

いいんちょチャン、オハヨウ〜😄😃✋(^з<)😍お弁当のおにぎり🍙が美味しくて、それと一緒にいいんちょチャンのことも食べちゃいたいな〜❗😚😆ナンチャッテ(^з<)❗😘 #おじさん文章ジェネレーター

この文章は「おじさんがLINEやメールで送ってきそうな文を生成するサービス」であるところの「おじさん文章ジェネレーター」で自動生成された文章です。

oji.netlify.com

確かに、我々はこの文章から「めんどくさい中高年の男性感」を色濃く感じられますが、それは何故でしょうか?おじさんっぽさとの因果関係はさておき、この文章には以下の特徴があります。

  • 二人称が〇〇チャン
  • 絵文字が多用されている
  • 下ネタが使われている

もし、これらの特徴がおじさんっぽさと関係しているとすれば、文章からこれらの特徴がどの程度表れているかを定量的に求めることで「文章の著者がおじさんかどうか」をプログラムで判断することができそうです。わかりやすい例としておじさんを挙げましたが、著者が女性(男性)かどうかを判断する場合についても、特徴が何かさえわかれば同じことが言えるでしょう。

リサーチ

大抵、自分が思いついたことというのは他の人が先に考えているもので、今回も例に漏れず国内外で多くの似たような研究が既に行われていました。

例えば池田ら(2006)*2は、日本語で記述されたブログ記事を男女で分類するために以下を素性としています。

Yahoo! Blogなどから大量の男女のブログ記事を収集し、記事からこれらの素性を抽出してLinear SVMで学習したところ、88.9%の精度で自動分類可能な分類モデルが作成されたことを報告しています。また、実際に素性として使われることはなかったものの、「甘いお菓子は女性の方が好む」といった意味論的な分析に踏み込むことも有効であろうとのことです。

財津ら(2017)*3はblog記事本文からの著者性別推定に有効な素性は何かを調査し、カイ二乗検定・t検定の結果から、ひらがな・片仮名・漢字の使用率、読点の使用頻度、小書き文字の「っ」、「ゃ」などが有用であることを報告しています。また、池田らの研究をはじめ多くの先行研究でSVMによる分類が採用されていましたが、ランダムフォレストとSVMで分類の精度を比較したところランダムフォレストの方が明らかに良い精度が得られたことも報告しています。

泉ら(2008)*4は10代・20代・30代のブログ記事を大量に収集し、提案手法で重要度が高いとされた2-gramを特徴量として、ナイーブベイズで未知のブログ記事を10代・20代・30代・その他にF値71%で分類できたことを報告しています。

さて、先行研究のありがたい報告の数々をふまえて、以下のように実装の見通しを立てました。

  1. 性別の推定は年代の推定と比べて分類の精度が高く、よりシンプルなので、まずは性別の推定に挑戦する
  2. 素性には池田ら、泉らの報告で有用とされたものを組み合わせて使う。どの組み合わせが最も良いかは実際に訓練および評価して確認する

分類モデルを実装する

先行研究の内容を参考に、データセットを構築し、特徴量を抽出して訓練することで分類モデルを生成し、そしてモデルを評価します。

今回使うプログラムはすべてF#というプログラミング言語で実装しました。.NET環境では機械学習のためのフレームワークとして最近ML.NETなるものが出てきたそうなので、これをF#から使うことにします。

またまた余談ですが、F#は素晴らしいプログラミング言語だと思うので、プログラマの方はぜひ一度使ってみてほしいと思います。F#がどのようなプログラミング言語でどんなシーンで活躍するのかについては以下の記事が詳しいです。

qiita.com

データセットの構築

分類モデルを生成するために、まずデータセットを用意する必要があります。データセットとはすなわち、分類モデルの訓練および評価に利用する男女別のブログ投稿です。当初ははてな匿名ダイアリーから記事をスクレイピングすることを検討しましたが、はてな匿名ダイアリーでは著者のユーザプロファイルが不明であり、いわゆるラベル的な情報が存在しません。記事を一件ずつ人手で読んで、性別のラベリングをしなければならないのです。これはつらそうです。日本死ね!みたいな記事を読み続けたらつらい気持ちになることは間違いないでしょう。

 ここでまたもや先行研究が道標をくれました。池田らは、Yahoo!ブログおよび楽天ブログにおけるブログから選択した612件のブログうち、著者のプロフィール欄の性別がブログ本文から読み取れる性別と一致した割合は95.3%であったと報告しています。かなりの高確率です。そこで、今回は簡単のために、はてな匿名ダイアリーではなく、プロフィール欄から著者の性別がわかる他のブログサービスから収集したブログ記事をプロフィール欄の性別情報を信用してそのままデータセットに使うことにしました。Amebaブログから男性・女性のブログ投稿をそれぞれ4000件ずつスクレイピングし、1:4で訓練データとテストデータに分類しました。

訓練

関連研究を参考に、分類につかう素性とアルゴリズムを以下の通りに決定しました。

一部の素性について追加で詳しく説明します。

データセットにおいて、男女間でカイ二乗値の高い形態素を調べる

「男女間でカイ二乗値の高い形態素」は、まずデータセットにおいて30回以上出現する形態素をリストアップし、それらの形態素についてカイ二乗検定を行うことで求めました。データセットに出現する全形態素についてカイ二乗検定を行うことは、計算量的に現実的でないためです。池田らは、カイ二乗値の高い形態素上位10・50・100・500個の出現頻度を素性として分類したところ、上位50個を使った場合に最も高い精度を得られたことを報告しています。したがって今回は上位50個の形態素を素性に組み込みました。

実際の「カイ二乗値の高い形態素ランキングtop50」はこんな感じでした。

  1. ワタシ
  2. ケド
  3. チャ
  4. アワセ
  5. コンナ
  6. ハート
  7. キラキラ
  8. タラ
  9. オイ
  10. ノデ
  11. ナー
  12. クレ
  13. タノシ
  14. マシ
  15. ッテ
  16. タリ
  17. アワ
  18. ステキ
  19. カッ
  20. トイアワセ
  21. オイシ
  22. デス
  23. トモダチ
  24. テル
  25. ハシ
  26. チャウ
  27. アエ
  28. トッテモ
  29. エミ
  30. タベ
  31. タチ
  32. ハシッ
  33. キモチ
  34. ココロ
  35. カエ
  36. アッ
  37. カワイイ
  38. イッパイ
  39. モーシコミ
  40. デキ
  41. シアイ
  42. ムスコ

女性がよく使いそうな形態素が並んでいることがわかります。これは期待通りの結果です。読みのデータを利用したため、少々見づらいですが…🙇‍♂️

池田らが2003年当時のYahoo! Blogの記事中の形態素に対してカイ二乗検定を行った際と同様、「ワタシ」が最もカイ二乗値の高い形態素となりました。面白かったのは、「ダンナ」「ダンセイ」などの形態素カイ二乗値が高くなりそうな形態素であり、「前述のデータセットにおいて30回以上出現する形態素」にも存在していたものの、ランクインは果たされなかったという点です。私のミスで具体的に何位だったのかのデータを取り忘れてしまったので、時間のある時に確認しておきたいです。「50位以内には入っていないけれど51位〜100位の間に入っていて、上位50位ではなくそれらの形態素を含むように上位80位くらいを使うようにしたほうが精度が上がる」ということも考えられます。

先行研究で有用とされていたが、今回のデータセットではそうでなかった素性

財津らの報告によると、男女間でカタカナの使用頻度に有意な差があるとされていますが、今回のデータセットでは確認できなかったため除外しました。また、読点「、」や小書き文字「っ」「ゃ」の出現回数が有効と報告されていて、実際に女性の記事ではこれらの形態素の出現回数が男性の記事における出現回数より高かったのですが、カイ二乗値の高かった形態素上位50個にこれらの形態素が含まれていなかったため、さほど重要でないと判断し素性には組み込みませんでした。

分類アルゴリズム

分類アルゴリズムには先行研究で用いられていたSVMとRandom Forestに加えてLogistic Regressionを検討しましたが、結果的に最も精度の良かったRandom Forestを採用しました。この結果は財津らの報告と一致しています。

分類モデルの評価

前項で説明した内容で訓練し生成されたモデルを、テストデータを用いて評価しました。なお、1(Positive)の場合は男性、0(Negative)の場合を女性としています。モデルの評価結果は以下のようになりました。

男性の記事を男性として分類できた割合は0.74で、女性の記事を女性として分類できた割合は0.79でした。全体の正解率は76.31%でした。

考察

モデルの評価でNegative PrecisionがPositive Precisionより高くなりました。これは先行研究でも報告されているように、女性のほうが「私」「~ちゃ」などのカイ二乗値の高い形態素をよく使う傾向にあり、判別されやすいためだと考えています。

また、76.5%は先行研究で報告されている精度より7%ほど低い値となりました。その理由の一つは、先行研究が特定のユーザの過去のブログ投稿すべてを推定に利用できた一方で、今回の取り組みでは投稿一つのみから推定したためと考えています。ただし、はてな匿名ダイアリーの人気記事アーカイブ全記事の文字数の中央値は831であった一方で、今回利用したデータセットの文字数の中央値は279でした。したがって「文字数が少ないから精度が低かった」という仮説が正しければ、はてな匿名ダイアリーの人気記事アーカイブの記事に対しては、テストデータ中の記事より高い精度で性別を推定できることが期待できます。

そして、これは一番悔しかったことですが、「人間が読んだら書き手の性別が数秒でわかってしまうような記事でも、今回の分類モデルでは分類できなかった」というケースが多く存在しました。例えば、旦那の話をしているのに男性と推定してしまったり、嫁の話をしているのに男性と推定してしまったりすることが多くありました。本来、「嫁」「旦那」は先の「カイ二乗値の高い形態素ランキング」にランクインするはずなのですが、今回私が楽をしてデータセットを構築したことで(はてな匿名ダイアリーではなくべつのブログサービスのデータを使ってしまったので)こうした残念な結果を招いてしまったのかもしれません…。

また、今回は文章の書き方的な特徴を学習して分類するアプローチを取りましたが、文章中で触れられている話題を解釈して分類する、という方法も考えられます(池田らもこのアプローチが有用であろうとしています)。もしそれが可能なら、嫁/旦那問題にも対応できそうです。あくまで予想ですが、話題の解釈などの意味論的なアプローチと、今回試した書き方の特徴から分類するアプローチをいい感じに組み合わせるとすごく高精度になる予感がしています。

Chrome拡張の実装

さいごに、作成した分類モデルをつかって、著者の性別推定結果を実際のanondのページ上に表示する仕組みをつくっていきます。

直感的に実装を考えると、今話題のtensorflow.jsなどをつかってブラウザ上で推定を行うなどが思い浮かびます。しかし、今回はML.NETでモデルを作成してしまったため、tensorflow.jsでモデルを使うことはできません*5。なので、すこし面倒ですが以下のようなアーキテクチャを組むことにしました。

f:id:E_ntyo:20191224174116p:plain

あらかじめ記事を推定し結果をデータベースなどに永続化しておき、ブラウザではその結果を取得するだけというアーキテクチャです。あらかじめ過去の人気記事をすべてまとめて推定しておき(10時間くらいかかりました)、あとは一日ごとに定期実行で、新着記事や人気記事を取得し推定して結果をデータベースに挿入していくようにしています。

さいごに

僕は機械学習NLPも素人なので、この手の取り組みに詳しい人がいたら教えてください 🙇‍♂️

また、僕は承認欲求が強い方なので、このブログやはてなブックマークのコメント欄に「すごい」とか肯定的なことを書いてもらえたりすると励みになります。そうなるとそれに味をしめて、今後またこういう取り組みをする可能性が高まります!

最後までご覧いただきありがとうございました。増田ユーザの方は、去年はてなインターンでつくったAlexaスキル「はてな匿名ダイアリーのいい話」もよろしくお願いいたします。こちらは公式です。

gigazine.net

*1:この記事の著者の性別は男です

*2:Daisuke, Ikeda. blog の著者の性別推定. 言語処理学会第12回年次大会発表論文集. 2006. p. 356–359.

*3:亘 財津, 明哲 金. ランダムフォレストによる著者の性別推定 -犯罪者プロファイリング実現に向けた検討-. 情報知識学会誌. 2017, vol. 27, no. 3, p. 261–274.

*4:Izumi, Masataka, Miura, Takao, Shioya, Isamu. Entropy-Based Age Estimation of Blog Authors. Computer Software and Applications Conference (COMPSAC), IEEE Annual International. 2008, p. 795–800.

*5:どうやらML.NETでは内部でTensorflowを使っているようなので、自分でTensorflowのモデルのファイルフォーマット -> Tensorflow.jsのモデルのファイルフォーマットなプログラムを書くことで使えるようになるのかもしれないです。そんなことできるのか?

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

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
なんですか?これ

さいごに

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

他人のプロフィールをみんなで好き勝手に編集できるプロフィールサイト「 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

「?でわっしょい」してきたぞ - はてなインターン2018参加記 -

?でわっしょい

?でわっしょい

「超ひだまつり」以外でひだまりスケッチの話をたくさんしたこと。同い年のオタクとあっちこっちの話で盛り上がったこと。毎日ホテルの自室に誰かが来ていて、中学校の修学旅行の時のようなテンションが1ヶ月続いたこと。タイトなスケジュールでWebアプリケーションのコードを書きまくったこと。毎日のように美味い酒を飲み、飯を食べたこと。いろいろなことが新鮮で、あっという間に過ぎていった1ヶ月だった。

応募

フォロワーの id:spring_raining さんや id:upamune さんの記事を読んでいたので、4月あたりから今年ははてなインターンに応募しようと決めていた。ので、募集が始まってすぐに応募した。rot13のデコーダを書くように言われたため爆速で書いて出した

その後審査にパスして面談へ進み、東京オフィスで id:motemen さんと30分くらい話をした。motemenさんは部屋へ入るとすぐ僕の顔を見て「Monad in TypeScript の人ですよね?」とおっしゃった。はてなのCTOに自分の書いた記事が読まれているということが衝撃的で、この経験はいまだにモチベーションになっている。

面談の結果、無事に参加できることになった。普段お世話になっているインターン先にはお休みを頂戴し、千葉から新幹線で京都へと向かった。

初日

初日はアイスブレイクの日だった。各自がLT形式で自己紹介をしていった。id:YaaMaa さんの自己紹介が最高だった。

前半課程

はてなインターンは前半過程と後半過程に分かれており、前半過程では「はてなダイアリー」を模した日記のWebアプリケーションの開発を通していろいろな知見を得ることができた。講義・演習形式で全インターン生が共通のカリキュラムをこなし、各回の演習にはコードレビューや講評を通じて丁寧なフィードバックが返ってきた。

前半過程は今年からカリキュラムが刷新されたらしく、Perl & Scalaだった内容がGo & TypeScriptな内容になっていた。個人的にはPerlを書いたことがなかったため、今年からのカリキュラムのほうがスムーズに進めることができてよかったと思う。(逆にPerl & Scalaだったらそれはそれで勉強になったとは思う。)

Webアプリケーション開発と一言で言っても、GraphQL API, Session + Cookieによる認証, React.js + TypeScriptによるSPA開発, AWS(中の人が来て、ECSとかFargateの使い方を教えてくれた), 機械学習入門(はてブのコメントに対して悪意のあるコメントかどうかを判定する単純パーセプトロンを実装した)と本当に幅広い内容だった。各回の講義はそれぞれ別のエンジニアが担当されていて、人によって教え方や考え方に色があって面白かった。

前半過程を振り返ると、自分がカバーできている知識の範囲というか、基礎力がまだ足りていなかったなと実感した(この点は最終日の面談で id:motemen さんにも指摘していただいた )。特にデータベースと認証周りの知見が足りないので、時間がある学生のうちに手を動かして理解を深めておきたい。あとは講義では触れられなかったけれどWebサーバの設定(ネットワーク周りとかキャッシュとか)もある程度知っておきたいなという気持ちになった。次のISUCONに出ることにしたのでそこでまとめてキャッチアップしたい…

後半過程

後半過程では1~2人ずつ5つのチームに配属され、チームごとに機能追加や改善等のタスクに取り掛かった。私ははてなブログの開発をしてみたくてコンテンツプラットフォームを志望したが、ブログチームは忙しく受け入れができなくなり、僕の配属先は今年から新設された社長コース(特命!社長とWebサービス開発コース)になった。相方は id:turtar_fms だった。

社長コースは、はてなの代表の id:chris4403 さんとCTOの id:motemen さんと一緒に新規サービスを作っていこうというコースだった(超豪華!)。新規サービス開発ということで他チームよりも圧倒的にインターン生の裁量があり、自分たちの作りたいものをお二人の超強力なサポートのもと開発していく、という流れだった。

今回は"はてな匿名ダイアリーのいい話"というAlexa Skill(AmazonスマートスピーカーAlexaのアプリ)と"無常はてな"というWebサービスの2つを企画・開発した。

はてな匿名ダイアリーのいい話

はてな匿名ダイアリーに投稿された記事のうち、いい話をAlexaが読み上げてくれるというAlexa Skillを開発した。現在ストアに申請中でもうすぐ公開予定(4回くらいリジェクトされた)。 リリースされました!!!

labo.hatenastaff.com

gigazineさんに取り上げられました!しかも利用例の動画つき!!!

gigazine.net

youtu.be

朝起きてすぐや寝る前など、好きなタイミングで「いい話だな…」という気持ちになることができる。いい話の取得にははてなブックマークでつけられたタグ・ジャンルなどのメタデータを利用した。

工夫したのはいい話のフィルタリングで、いい話かどうかというのは官能評価なので判別が難しい。機械学習を使っても良さそうだったけれど時間がかかりそうなのでやめた。今回は夜寝る前に聞きたいタイプのいい話に絞ることにして、特定のジャンル・タグの投稿( 男女 タグはドロドロしていてつらいのでやめる等)や、極端に文字数が長い/短い投稿は切り捨てるようにした。

Amazonスマートスピーカーということで、AWS Lambdaでシュッと書くことができた。全体の構成はこんな感じ。

f:id:E_ntyo:20180907184546p:plain
はてな匿名ダイアリーのいい話」の裏側

無常はてな

無常はてなは、id:turtar_fms が土曜日の朝4時に投稿したジャストアイデアのリスト(のちに 遺言 と呼ばれる)から産まれたWebサービスインターン最終日に社内リリースをした。重要な機能がいくつか実装できず外部向けにリリースするには至らなかったのが悔しい。

f:id:E_ntyo:20180907181211p:plain
遺言

ユーザ投稿型のWebサービスで、特徴はこうだ。

  1. 投稿の検索ができず、トップページに投稿がランダムで数件表示される
  2. トップページで出会った投稿は共有用URLを発行することができるが、そのURLは5分で失効する。ただし、共有用URLのページから再度その投稿を共有することができる。

f:id:E_ntyo:20180907183458p:plain
トップページ

f:id:E_ntyo:20180907183734p:plain
投稿の全文を確認できる画面。リロードすると読めなくなる。

f:id:E_ntyo:20180907183836p:plain
記事をシェアしてから5分経つと読めなくなる

読む側は、面白い記事が話題になると「消えちゃうから早く読まなきゃ」となり、書く方は「5分で消える」という制約のもとでいかに多くのインプレッションを得られるかというゲームを楽しむことができる。

id:motemen さんと相談して GAE/Go環境で作ることにした。フロントエンドは前半過程でReact.js + TypeScriptの構成を触ったのでそれを採用した。状態管理はrxjsで実装した。デザインフレームワークにはTypeScript CompatibleなAnt Designを使った。

f:id:E_ntyo:20180907184350p:plain
無常はてなの裏側

最終日の今日は後半過程の成果を発表し、社員の投票でランク付けがされた。社長コースは4位(5チーム中)だった。せめてどちらか一方でもリリースできていれば…

待遇

往復の交通費,1ヶ月のホテル代,ホテルでの朝食, オフィスランチが提供される。最高!夜は頻繁に飲み会に連れて行かれるため夕飯代も浮く…!

京都観光企画や id:onishi さん, id:chris4403 さんと飲みに行く会なんかもあって、楽しくて時間があっという間に過ぎてしまう。

所感

はてなインターン、噂には聞いていたけれど最高だった。id:motemen さんが初日に「インターネットへ還元するつもりでインターンをやっている」と仰っていたが、まさにそのとおりだと思う。講義の準備や教材の用意など、社員が結構な時間を使って準備をしていた様子が伺えたし、社内の雰囲気からインターン生への愛みたいなものも感じた。こんなにいたれり尽くせりなインターンは初めてだった。

以下はインターン生&社員さんへのメッセージです。本当にお世話になりました!!!

  • id:motemen マジで格好良かったです。自分が詰まっているところをVSCodeのLive Shareでササッと編集していって自分の仕事に戻っていった時はビリビリシビれました。最終日の懇親会中に黙々と無常はてなにコミットしてくれていたのも格好良かったです。Suzuriで売っているTシャツが比較的リーズナブルなのも格好良かったです。買いました。本当にお世話になりました。

  • id:chris4403 ほたて(成果発表の投票をするときに使った社内ツール)で謝辞を書いていなくてすみませんでした許してください。エンジニアとして未熟な僕と id:turtar_fms を冷静な視点で支え、軌道修正してもらえてとても助かりました。またB'zの話をしたいです。烏丸FM(社内Podcast)にもまた呼んでください!お世話になりました!

  • id:albacore 神崎蘭子。ホテルの部屋のテレビのリモコンを返してくれ。トランプとUNOとワインを持って帰ってくれ。俺をLGTMカメラで撮って勝手にツイートしないでくれ。君が毎日部屋に押しかけるせいでとても迷惑でした。でも楽しかった。

  • id:NoahOrberg アユニ・D。女性関係で黒歴史がある(俺もある)。Goが好き。よく部屋に来ていたけれど id:albacore より行儀が良かった。メ社のインターンも頑張ってくれ!

  • id:mizdra 日向 縁。React.jsとWASM。俺とサブカルの趣味が一緒な気がする…東京の大学に通っているのでまたすぐ会える気がする!体調に気をつけて!!!

  • id:turtar_fms 野々原ゆずこ。御庭つみき。相棒。普段はメディアプログラミングで素敵な作品をたくさん作っている。Alexaのインタラクション周りや無常はてなのデザイン周りを特に頑張ってくれた。清潔感があるイケメンなので絶対にモテる気がする。

  • id:YaaMaa 服部平次。前半課題のクオリティが毎回すごくて(丁寧で)スゲーと思った。最終発表でも id:mizdra が病欠の中ちゃんと発表していてすごかった。よく寝ている。

  • id:gazimum なんか失礼なことばかり言ってしまってすみませんすごく尊敬しています!!!大学でもよろしくお願いします!!!!!最後の発表での受賞コメントが格好良かったです!

  • id:guni1192 いつもツッコミ役をさせてしまってすみませんでした…東京へ来た時は酒飲もうな!!

  • id:cohalz 大学の先輩。たくさんご飯をごちそうになりました…ありがとうございます!就業後によく絡みに来てくださって嬉しかったです。ありがとうございました!!

  • id:hitode909 とにかく会話が上手でめちゃめちゃ面白かったです。ステッカーをたくさんもらえて嬉しかったです。発表にもたくさん質問をくれてありがたかった。

  • id:susisu 大宮忍。Kyoto.なんか #4でBuckle Scriptの話をしていてスゲー!!!となりました。実はブログをよく読んでいます。

  • id:riko 素敵な講義&講評をありがとうございました。インターンでユーザコミュニティについて学んだのは初めてで非常に有意義だったと思っています。懇親会でも無常はてなについて色々意見を頂けて嬉しかったです。

  • id:onishi 個人的に一番好きな講義でした。ビールを飲むのが早くて格好良かったです。カラオケに行けなくて残念でした。

  • id:Hasesann 2つのサービス両方に、本当に最高なアイコンとロゴを提供してもらいました。髪色とかネクタイ+シャツのファッションが素敵でした。機会があればまた最高なコンテンツをつくってください!!!お願いします!!!!!

他のインターン生の記事

albacore.hateblo.jp

tomoyaf.hatenablog.com

yaamaa-memo.hatenablog.com

↓同じチームの id:turtar_fms の記事

turtar-fms.hatenablog.com

noahorberg.hatenablog.com

www.mizdra.net

guni1192.hatenablog.com

社長の記事

chris4403.hateblo.jp