めかぶ?すだち?

この記事はFUN Advent Calendarの11日目の記事です。 adventar.org

昨日はshirasayav5さんでした。 shiranuinui.github.io

自己紹介

Word2Vec*1を使った研究してます

来年度からは東京で働きます

はじめに

最初の予定ではコンビニのホットドッグをオススメしようと思ってましたが飽きてしまったので変えます

ちなみに個人的にはローソンのホットドッグとセブンのホットドッグが好きでパンがしっとりしたものを食べたい時はセブンでウインナーがジューシーなものを食べたいときはローソンにしています。値段はだいたい一緒です

ローソンのチリホットドッグも美味しいです

形態素解析機

本題です

みなさんは形態素解析機というものはご存知でしょうか

Mecabというものが有名だと思います。他にはRuby製のkuromojiも有名だと思います

すごくざっくりいうと単語に対して品詞などを特定するものです

例えば「会社のお金を使い込む」をMecabで形態素解析すると

会社 名詞,一般,*,*,*,*,会社,カイシャ,カイシャ

の 助詞,連体化,*,*,*,*,の,ノ,ノ

お金 名詞,一般,*,*,*,*,お金,オカネ,オカネ

を 助詞,格助詞,一般,*,*,*,を,ヲ,ヲ

使い込む 動詞,自立,*,*,五段・マ行,基本形,使い込む,ツカイコム,ツカイコム

になります

一般的な使い方としては文章を入力としてその文章に含まれる単語の品詞を特定し、名詞や動詞のみにフィルタリングするなどがあります

自然文章を対象とした研究であればかなりお世話になるツールと言えます

今回はSudachiという新しい形態素解析機のご紹介です   タスク管理アプリの方ではありません(https://dev.classmethod.jp/tool/sudachi/)

Sudachi

Sudachiとは、WorksApplicationsさんが開発した形態素解析機です

約1ヶ月前くらいにv0.1.0がリリースされました

元Chasenメンテナの高岡さんが開発しています

github.com

他の形態素解析ツールとの違いなどのスライド

t.co

Mecabやkuromojiと異なる点として省メモリであることなどがありますが、大きな1つの違いとして「正規化」というものがあります

正規化とはなんなのかというと、例えば「シュミレーション」と「シミュレーション」のような表記揺れに対して「シミュレーション」に統一することです

他にも送り仮名の違い、「使いこみ」と「使い込み」のような変換の違いを統一してくれます

この表記揺れというのはかなり複雑な問題で本来同じ意味である2つの単語が異なるものとして処理される可能性があります

例えば、

会社 の お金 を 使い込む
会社 の お金 を 使いこむ

の2つの文章は全く同じ文章であるのに漢字を変換するかしないかで類似度は0.8(4/5)になってしまいます。

本来であれば心温まる手作業で1つ1つ辞書を作り修正しなければいけないところをある程度は楽が出来ます

今回はこの超便利機能の正規化について実験を行いました

実験対象

ゲームレビューサイトmk2のnintendo 3DSのゲームレビュー

このサイトを実験対象にした理由は、ユーザーから投稿されたレビューであるため表記揺れが山ほどあるのでないかと思ったのと「シミュレーションゲーム」というジャンルがあるので「シュミレーション」と「シミュレーション」がめちゃくちゃ出てくるんじゃないかと思ったからです

SNSでも表記揺れは多く出現しがちなので良かったのですが過去の自分のツイートぐらいしかデータがなく過去のツイートを見るのは辛かったので辞めました

ちなみにシュミレーションという単語がレビューに多く含まれていたゲームは「ファイアーエムブレム 覚醒」でした

実験手順

実験手順としては 1. ゲームレビューをクローリング 1. 取得された文章をMecabとSudachiでそれぞれ形態素解析 1. 名詞と動詞、形容詞だけにフィルタリングし*2分かち書き*3 1. 分かち書きされた文章をそれぞれgensimのWord2Vecを用いて学習 1. 2つの学習結果を比較

で調査を行いました

Mecabでは正規化は行われませんので正規化なしのMecabと正規化ありのSudachiの違いを検証するものです Mecabは9日目の記事のuehara1414さんも使っていましたが拡張辞書として mecab-ipadic-neologdを使っています

未来大生のトレンドを知れるサービス「FUN TREND」を作ってみたuehara1414blog.wordpress.com

結果

いろいろ入力してみましたが面白かったもの、興味深いものを紹介いたします

「忍者」という入力に対して関連していると判断された単語

単語 類似度
固定 0.2742036283016205
降臨 0.2613376975059509
乱数 0.25779059529304504
物語 0.254666268825531
プリンセスプリキュア 0.2521257698535919
出入り 0.23701870441436768
安心 0.23156218230724335
こつ 0.22314965724945068
不向き 0.21753180027008057
SC 0.21550312638282776

プリキュアは忍者だったんですねー

  • Sudachi
単語 類似度
神器 0.2637416124343872
付け方 0.2479369342327118
box 0.24712923169136047
ace 0.2440178543329239
もったい 0.23105667531490326
マリベル 0.2295345962047577
ゼルダの伝説時のオカリナ3d 0.22730134427547455
おっさん 0.22543908655643463
パラレルワールド 0.22477799654006958
ハイスクールd×d 0.22431424260139465

おっさんが忍者でした、マリベルはドラクエですかね?

「ロボット」という入力に対して関連していると判断された単語

単語 類似度
十字 0.2513594925403595
パッド 0.2503074109554291
我慢 0.23809082806110382
鉱山 0.23738226294517517
特産 0.23582139611244202
記号 0.2356947809457779
金花 0.23352289199829102
使い 0.22769372165203094
古龍 0.22586342692375183
バースト 0.2221870869398117

古龍や鉱山、使いという単語を見るとモンハンのような気がします

  • Sudachi
単語 類似度
ロボボプラネット 0.2710425853729248
眠り 0.257391095161438
帳消し 0.24388960003852844
既存 0.2385057806968689
ゲット 0.23679396510124207
応援 0.23626789450645447
自分自身 0.23548564314842224
ほう 0.23243260383605957
分かれ道 0.2302807867527008
事件現場 0.22392229735851288

こちらはミステリーのような雰囲気が出ていますがもっとも類似度が高い単語として「カービィのロボボプラネット」が出力されています すごい

「馬」という入力に対して関連していると判断された単語

単語 類似度
些細な 0.25391948223114014
1種類 0.25197359919548035
ジュピターピクロス 0.24905437231063843
買い控え 0.23560309410095215
友情 0.2338598519563675
ソード 0.23023049533367157
託宣 0.22755567729473114
ガールズファッション3d☆めざせ!トップスタイリスト 0.22588399052619934
進入 0.219329833984375
こまめ 0.219301238656044

牝馬ってことなんでしょうか

  • Sudachi
単語 類似度
パール 0.25727373361587524
開示 0.2508084177970886
底上げ 0.23834645748138428
マリア 0.23764677345752716
é·¹ 0.23431171476840973
順当 0.22846585512161255
検事 0.22205126285552979
不思議 0.21848949790000916
ダービースタリオン 0.21799950301647186
現状 0.21797946095466614

ダービースタリオン!

まとめ

人間の目で見るとMecabよりもSudachiの方が関連している単語を出力出来ているような気がします

多分、正規化によって本来学習に含まれていなかった単語が正しく学習されたのが良かったのだと信じたいです

パラメタの調整などをもっと頑張ればもっとよい精度が出る可能性はあります

3DSとかだけじゃなくてSwitchやプレステのゲームも混ぜた方が良かったかも

もし余力があれば挑戦しまた記事にしたいと思います

明日は_manohitoさんです お楽しみに

余談

データを集めて形態素するまでよりもWord2Vecのパラメータを調整する方が辛かった

あと心温まる手作業とかも結構しました

最終的なパラメータは size=200, window=6, min_count=3, sg=1です、Skip-gramで学習しました

min_countはこの数字よりも出現頻度が低い単語は無視するオプションですがデフォルトの5とかだとかなり単語が失われてしまいました

*1:単語の分散表現を得る技術 QiitaやWebに分かりやすい記事が多くあります

*2:最終的な語彙数はMecabの方が11,057個、Sudachiの方が10,093個になった 正規化している分Sudachiの方が語彙数が少ない

*3:分かち書きとは単語ごとにスペースを入れる(「会社 の お金 を 使い込む」のように)。

Markdownでタスク管理が出来るウェブサービスを作った

きっかけ

  • Markdownでタスク管理が出来るウェブサービスを作りました
  • GitHubでissueやPRのタスクを管理するときに使っている人もいると思います
- [ ] タスク全消し
  • と書くとf:id:ichir9n1:20170201004817p:plainこのようにチェックボックスになります
  • スペース含めて5個の記号だけでチェックボックスが出来るので大変便利です
  • これを日常的にタスク管理に使いたいと思ったのがきっかけです
  • GitHub上でも似たようなことが出来ますが、いちいちGitHubのissueを建てるのがめんどくさいウェブサービスでやりたいという思いです。(多分既存サービスはない?一応調査しました)

2017/2/1 追記

  • ktMarkDown.jsというマークダウンパーサがありました。機能的にはこちらのほうが細かく期日などを定められるようです
  • ktMarkDown.js

  • こちらのtasklist.jsもMarkdownで書いたものをコンバート出来るようです

  • qiita.com
  • GitHub - increments/tasklist.js: Converts tasklist in Markdown.
- [ ] A
 - [ ] B
  - [ ] C
  • のようにAの作業のサブタスクとしてBがあってそのBのサブタスクとしてCがある。みたいな状況を再現したかったのです。

使い方

  • 使い方についてはできるだけ直感的に行えるようにしたつもりです
  • 主な使い方はメインタスクを追加してそれにサブタスクを紐付けていき、完了したらチェックを付けると言う形になります。

  • まず↑に貼っているリンク先に飛ぶと f:id:ichir9n1:20170201005243p:plain

  • こういう画面が出ます。最初サンプルデータが入っています。
  • 飛んだ状態はPreviewモードです。モードはMarkdownモードと2つあります。切り替えは上部にある[Preview]、[Markdown]を押します

Previewモード

  • Previewモードはボタンとキーボード入力で進捗バー付きでタスク管理が行えるモードです。
  • [Add Parent Task]を押すとメインタスクを追加出来ます。 f:id:ichir9n1:20170201010020p:plain
  • すると下にカードが追加され、このような画面になったと思います(入力フォームの中のテストは手動で入力しました)
  • 入力フォームの横に3つのボタンがあります。
  • 左から、サブタスク追加ボタン、コメント追加ボタン、タスク削除ボタンです。
  • サブタスク追加ボタンはメインタスクにサブタスクを追加することが出来ます。下に入力フォームが増えます。
  • 追加したサブタスクに対してサブタスク追加ボタンを押すとサブタスクのサブタスクを追加することが出来ます
  • f:id:ichir9n1:20170201010421p:plain
  • コメント追加ボタンはメインタスクにコメントを追加することが出来ます。下にテキストエリアが増えます。
  • コメントはテキストエリアの右についている×ボタンで削除することが出来ます。隠しているわけではなくて完全に削除します。
  • f:id:ichir9n1:20170201010536p:plain
  • タスク削除ボタンはメインタスクを削除します。この時、紐付いていたサブタスクやコメントも消えます。
  • メインタスクであれば、3つのボタンの隣に進捗バーがあると思います(サブタスクがあるサブタスクにも出現)
  • チェックを付けると進捗バーが変化します。f:id:ichir9n1:20170201010719p:plain
  • 直近のサブタスクの状況を見ているので、サブのサブにチェックを付けた場合(上の画像の場合)はサブの進捗バーのみ変化します。なので、メインタスクの進捗バーは変化していません。

Markdown

  • MarkdownモードはMarkdownを記述してPreviewモードに反映させることを目的として設けています。
  • f:id:ichir9n1:20170201011151p:plain
  • サンプルデータの状態でMarkdownモードにするとこんな感じです。
  • メインタスクがありサブタスクが1つ右に下がっていて、サブタスクのサブタスクが2つ右に下がっています。
  • コメントはついているタスクの下についています。
- [ ] Main
 - [ ] Sub
  - [ ] Sub Sub
  • この形式でMarkdownを書いてPreviewモードに切り替えるとMarkdownに合わせてPreviewモード画面を再構築します。
  • あとはMarkdownモードは現状では機能がないです。タブはスペース2です
  • 今のシステムでは、タスク状態を保存することが出来ないので、Markdownの文字をファイルに保存すると良いと思います。

全体

  • 今後、ほしいと思った機能は実装していくつもりですが、何か致命的なバグなどありましたら、このブログかGitHubのリポジトリまで報告して頂けると幸いです。

https://github.com/ichiren1/markdown-task-manager

開発についてだらだらと

  • 思いついたのを実装してみて、使い心地を確かめたかったので凝ったことはしていません。
  • 今後、使ってみてイケそうだなと思ったら(便利だと思ったら)React.jsで書き直したいと思います。今はゴリゴリのJS(一応ES)です。
  • サーバーはbottleで建てて、テンプレートエンジンはMako、CSSコンポーネントはbulma、Markdownエディタの部分はAceを使いました。

https://bottlepy.org/docs/dev/

http://www.makotemplates.org/

http://bulma.io/

Ace - The High Performance Code Editor for the Web

  • bottleはルーティングのみ
  • Makoは殆ど使っていない
  • bulmaはめっちゃ使いました
  • Ace最高! CodeMirrorはちょっとうまく行かなかったです

Preview画面について

  • ESでクラスが使えるということでTaskクラスを作り、Taskクラスの子要素としてTaskクラスを付けていくという形で実装しました。
  • Taskクラスに完了しているかの状態も持たせて、Taskクラスベースで描画を行っています。
  • サブのサブの個数もメインタスクの進捗バーに入れても良かったのですが(実装的には問題ない)、サブのサブが1つ終わったこととサブが1つ終わったことが同価値だと思えなかったのでこういう実装にしました。
  • 進捗バーの挙動はかなりデバッグしたので多分矛盾がない動きになっていると思います。
  • メインタスクしかない時にチェックをしても完了になる
  • 子要素が全て完了したときに親要素を完了にする
  • 既に完了していたタスクにサブタスクが増えたときにメインタスクの完了が外れる
  • 完了していないサブタスクが削除され、それにともなってメインタスクの全てのサブタスクが完了になっているときにメインタスクを完了にする

Markdown画面について

  • Ace最高!なんでも出来る

HTML ⇔ Markdownについて

  • Marked.js https://github.com/chjj/marked というMarkdownをHTMLに変換してくれるものがありました。
  • しかし、これで変換するとネストした部分は同階層になってしまいます
- [ ] A
 - [ ] B
  - [ ] C

と書くと得られるHTMLは

<ul>
 <li>A</li>
 <li>B</li>
 <li>C</li>
</ul>
  • になってしまうのでネストしたデータが失われてしまいます。なので、正規表現です。
  • 正規表現でネストを保ったままTaskクラスを生成し、Previewモードで描画するという流れです。
  • 逆(Preview->Markdown)はTaskクラスがあるのでそれを基にHTMLを生成します。

終わりに

  • さくっと実装しようと思いましたが、4日はかかりました。
  • まだまだデザイン的にも機能的にも不十分ではあると思っているので開発を続けたいと思います。
  • それでも最低限使える段階には鳴っていると思うので使ってみていただければと思います。
  • GitHubのリポジトリもあるので機能的な要望などありましたらご意見いただけると幸いです。実装するかは話が別だとして

2017/07/31 追記 - Atomの拡張で以下のようなものがありました。 atom.io

スマートウォッチを買って変わったこと

  • この記事はFUN Advent Calendar 2016の4日目の記事です。

www.adventar.org

  • 昨日は主催でもあるおれおくんでした

oreo.hateblo.jp

  • FUN Advent Calendarについては昨年度のこちらの記事が良いです

  • 今年買ったデバイスの紹介をしようと思って思い出してみたらスマートウォッチみたいなものを買ったので使用感やらを書き連ねて、後続の人の敷居を下げるのが本記事

  • 比較のために先に持ってたスマートウォッチを紹介します

持ってたスマートウォッチ

  • Pebble f:id:ichir9n1:20161204020528j:plain

Pebbleについて

  • Kickstarterから生まれたスマートウォッチ

良さ

  • iOSとAndroidのどっちでも使える
  • Moto 360やApple Watchと違って電子ペーパーを使っているので電池の持ちがいい(1週間ぐらい)
  • iPhoneに来た通知をPebbleでも受け取れる(Slackとか, Googleマップとか)
  • 当時1万6000円とスマートウォッチで比較すると格安
  • WatchFaces(時計のテーマ), Appを8つまで時計に保存でき、切り替えることができる
  • 防滴
  • WatchFacesを自分で開発出来る(C言語、JSでも出来るけど確か機能が制限される)

悪さ

  • WatchFacesを切り替えまくると時間が分からないぐらいノイズが乗る(致命的)
  • ちょっとでかくて四角なのでおもちゃ感がある
  • ゴムバンドがゴミバンド(夏蒸れる)
  • 机の上においてるときに通知が来るとうるさい

総合

  • 上記の点からかなり満足をしていたのですが、ある程度使っているとノイズが入ってどうしようもなくなる
  • 日本のコミュニティがあるのでそこもちょくちょく覗いていたが解決せず...
  • 放置されていた

今年買ったスマートウォッチ

  • Pebble Time Round f:id:ichir9n1:20161204172650j:plain

Pebble Time Roundについて

  • 強い丸いPebble

良さ

  • Pebbleの良さはそのまま
  • 革バンドになった
  • Pebbleより小さくなった
  • ノイズが出ない
  • カラー

悪さ

  • WatchFacesが切り替えられなくなった(OSっぽいものが変わったからしょうがない)
  • カラーになったけど充電の持ちが2日ぐらいになった
  • 充電するところが手首と接しているところにあって机で充電しにくい(端子が外れる)

総合

  • めっちゃ良くなった

比較

f:id:ichir9n1:20161204172646j:plain

  • 写真ではわかりづらいですが、大きさがかなりコンパクトになりました

  • Time Roundは500円玉4枚くらいの薄さです f:id:ichir9n1:20161204172657j:plain

  • Pebbleは6枚ぐらいでした f:id:ichir9n1:20161204172653j:plain

スマートウォッチを買って変わったこと

  • 通知内容を手元で確認するのでスマホを見なくなった(スマホの充電がなくなりにくくなった)
  • 前はスマホを開いて内容を確認する際についゲームを開いたりまとめサイトを見ていたがそれがなくなった
  • 電車で音楽を聞いているときに曲を変えるとか音量を変えるときにいちいち取り出さなくてもよくなった
  • 通知でバイブレーションが来るたびに時計を見るので時間を気にしている人みたいになった

まとめ

  • Pebble Time Roundを買いました
  • Pebbleで不満に思っていたことのいくつかが解決していたので満足度高いです
  • スマホを見る機会が減りました

備考

  • Pebble 2誰か買った人いたら感想聞かせてください
  • Pebble 2は今見たら$130でした

  • 以上ですありがとうございました

  • 明日は@t0oo0fuさんです お楽しみに

p5.jsのすゝめ

おしながき

  • あらまし(省略可能)
  • p5.jsとは
  • p5.jsを触る
  • p5.jsで作ったものを公開する

  • この記事では、p5.jsについて知ってもらい、最終的にはGithub Pagesで公開しだれでも見れるようにするまでを目指します

  • この記事のターゲットとしては本学の学部1,2年生とします

あらまし

  • おれおくんから誘われて何か記事を書くことになりました。
  • テーマについて考えた結果、以前講義で某教授が話していた「本学生はデモ力が低い」ということについて考えました。
  • この記事では、デモ力が高いとは自分の研究を視覚的に分かりやすく伝える力として考えます。
  • デモ力を上げるための講義として私はJavascriptとhtmlを学習しましたが、1,2年生の忙しい時期にプログラミング言語をいくつも学習することは難しいと思います。
  • そこでProcessingの知識を使いウェブで動くものを作って公開することで1,2年のうちから視覚的な表現に慣れようというのが本記事の目的です。拙い文章ですが見ていただければ幸いです。

p5.jsとは

  • 基本的にブラウザで見れる何かサービスをつくるときはHTMLやJavascirptを記述します。
  • でもp5.jsを使えばProcessingのコードを書くだけでHTMLやJavascriptは""あまり""書かなくても簡単に描画や音声を扱う事ができますf:id:ichir9n1:20151208123747p:plain

  • 公式サイト

  • ドットインストール

p5.jsを触る

  • 公式サイトのDownloadを押してください f:id:ichir9n1:20151208121338p:plain
  • すると、いろいろなボタンがあると思います
  • Complete Libraryはアドオンやサンプルが入っているやつです
  • Single Filesはp5.jsを使うなら最低限これらのどれか1個あればいいです
  • EditorはProcessingのように再生ボタンを押すと出力画面が出るエディタです、あってもいいし、なくてもいいです。MacとWindowsどちらもあります
  • 今回はp5.jsをメインで使うのでp5.jsをダウンロードして進めますf:id:ichir9n1:20151208122011p:plain
  • 今回はHTML記述とp5.jsを使ったJavascriptの記述を分けるために主に書き換えていく部分はファイルを分けていきます
  • デスクトップでもドキュメントでのいいのでフォルダを新しく作成し、p5_test.html(ファイル名はなんでも良い)とscript.jsというファイルを作成しそこにダウンロードしたp5.jsをコピーします f:id:ichir9n1:20151208123747p:plain
  • p5_test.htmlにメモ帳やエディタで開いて以下を記述します
<html>
<head>
  <script src="./p5.js" type="text/javascript"></script>
</head>
<body>
  <script src="./script.js" type="text/javascript"></script>
</body>
</html>
  • タグの中でダウンロードしてきたp5.jsを読み込みます
  • タグの中で今から主に書き換えて行く部分を読み込みます

  • あとはp5_test.htmlは保存して閉じてもらっても問題ないです

  • script.jsにコードを書いていきます
function setup() {
  createCanvas(200,200);
}

function draw() {
  rect(0, 0, 100, 100);
}
  • Processingとちょっと違うところはvoid setup()ではなくfucntion setup()になっているところです
  • createCanvasで画面の大きさを指定します Processingではsize(200,200);に相当します
  • rectはProcessingと一緒です rect(x, y, width, height);です
  • あとはscript.jsを保存してブラウザにドラッグアンドドロップとかすると確認できます
  • 要素の検証をしてみるとタグで書かれており、canvasタグを学習する必要なくcanvasを扱えていることがわかります(個人的にcanvasタグで楕円を書くのはtranslateしたりscaleしなきゃいけないのでellipseだけでかけるのはいいです) f:id:ichir9n1:20151208124922p:plain
  • あとは微妙に書き方がProcessingと違う部分があるのでドキュメントを確認するといいです
  • リファレンス
  • もちろん純粋なJavascriptと一緒に書くこともできます
  • 変数宣言はvar hoge;です。

作ったものをウェブに公開する

デモ

  • サンプル作りました 2のべき乗が現れたら色が変わる時計です
  • 2のべき乗時計