ニコニコ動画のマイリスト登録を動画視聴ページ内で完結できる拡張機能 Nico Mylist Add Contener

chrome.google.com

ニコニコ動画はマイリスト登録のときに別タブに左遷させるのをやめろ

これに尽きる

概要

ニコニコ動画の動画視聴ページから画面左遷をすることなく、マイリスト登録ができます。もちろんマイリストコメントつき

f:id:naari_3:20170630231345p:plain

f:id:naari_3:20170630231429p:plain

flash版は対応が雑です。ページの作りがよくわからなかったからです。

chrome.google.com

経緯

人間だったら一度はマイリスト登録したい時ってあるとおもうんですけど、ニコニコ動画のマイリスト登録というのは、別タブや別ウィンドウに飛ばされて、その先で登録する場所、登録時コメントを入力することになります。

この飛ばされた先の画面って全く情報がなく、一つのセレクトボックス、一つのテキストエリア、二つのボタンだけで出来ているんですが、わざわざ別ページとして設ける必要があるのか?と常々疑問に思っておりました。

さて、ニコニコ動画なのですが、例えば http://www.nicovideo.jp/my/mylist を開いた際に、ソースコード内に NicoAPI.token とかいうのが記述されています。

これは本当にそのままで、ニコニコ動画の各種アクションを行う際に必要なものになっているようです。(公式にはなんの記述もされてないです)

もちろんのこと、マイリスト関連の操作(e.g. http://www.nicovideo.jp/api/mylist/add)もできるわけなので、僕らで何かを設けてあげれば、それはもう自由自在にマイリスト登録ができるのではないかと考えました。

それで作ったのがこの拡張機能です。

実装

jQueryでDOMをゴリゴリと追加しているだけです。

今日のドワンゴエンジニアのハッカソンで色々手直ししようと思っていたのですが、本当に読みづらいコードになってしまっており、とても暫定的な雑な手段で一番気になっていた変な挙動を修正しました。

というエピソードができたくらいとても雑で、時間とモチベがあるなら1から書き直したいくらいです。

一つの完結した機能を持ったものなので、Vue.jsとか使ってゴリゴリさせたいという気分があるのですが、如何せん詳しくないので知見を溜めつつ実装したいなと思います。

あとはcookieを取得するという動作はbackgroundを使わないと実現できない(語弊ありそう)らしいので、sendMessageとaddListenerでうまくcookieをフロントに渡すようにしています。よくできた機構だなあと思います。

Contenerというのは自分が英語に弱いことが原因で発生したtypoです。

なんで今公開したのか

実はこのコードですが、去年のクリスマスイブに一気に書き上げたもので、chromeのstoreには公開していませんでした。

今回、ドワンゴエンジニアのハッカソンがあると聞いて、黙々と趣味プログラミングができるのであれば何か公開できるものがいいなと考えた所、まだ公開していないこの拡張機能があったので、先程言及したバグ取りをした後に手書きアイコン*1を追加して公開することで、ハッカソンの成果とすることにしました。

実質3行の修正とアイコン*2を描いたくらいの変更なので、時間が余ってしまいましたが、その部分は別のスクリプトを書くことで時間の消費をしていました。

理由はどうであれ、個人的にとても好きで、いつも使っている拡張機能なので、公開まで踏み切れて少し嬉しいです。

もしよければ使ってください。

chrome.google.com

また、OSSなので勿論PRも受け付けています。汚いコードが好きな方は見てみると良いかと思います。そのうちガラッと一新するので汚いのも今のうちだけですよ

github.com

ほんとにつかいやすいので是非

chrome.google.com

*1:f:id:naari_3:20170630233316p:plain

*2:f:id:naari_3:20170630233316p:plain

固定回線がないという孤立感

さいしょに

仕事のため、東京で一人暮らしをすることになったので引っ越しました。

それにまつわるゴミみたいな出来事です。

インターネットがない

引っ越したので固定回線がなかったです。

契約したのがだいぶ後だったので、4月はほとんど丸々一ヶ月間ずっと固定回線でのインターネットは楽しめませんでした。

携帯回線の規制に引っかかる

僕はスマホの通信にはIIJmioというドコモ系統のところの回線を契約して使っています。

IIJmioのサービスでは、通信容量がクーポンという形で配布され、それを消費していくというものになっています。

通信容量についてなんですが、専用のアプリで高速通信をON/OFF切り替えることができ、OFFの場合は低速(最大200kbps)になる代わりにクーポンが消費されないという概念があります。
ON時は下り最大225Mbps、上り最大50Mbpsといったところです。

自分の契約しているプランでは、一ヶ月に10GBのクーポンが配布され、弟と僕の二人で共有して使っています。

弟の学校はスマホ禁止なので基本的に外でインターネットを活用せず、ありがたいことに基本的にOFFで生活しているようです。
弟1人で一ヶ月に200MB使うか使わないかといった感じでした。

自分も基本的に外で動画を見るなどの重い使い方はしないので、使っても一ヶ月で7GB使うかどうかといった感じでした。

しかし、今回はちょっと事情が違いました。固定回線がないので、すべての通信をスマホテザリングを介して行う必要がありました。

何が起こったかというと、10GBを全て使い切ってしまいました。

使い切ったのは4/10あたりで、月の半分以上は低速な状態で過ごしていました。

ここからがとても大きな問題でした。

低速時通信規制

皆さんは基本的に三大キャリア(ドコモAUソフトバンク)と契約している方でしょうからわからないと思うのですが、IIJmioのサービスには低速時の通信規制というものが存在しています。

こちらなんですが、IIJmioのクーポンがOFFの状態の通信容量が3日間で366MBに達した場合になってしまう状態のことを指しています。

早い段階でクーポンを使い切ってしまった上にそれでもインターネットに依存していた僕はもちろんこの状態になったわけなんですけど、話に聞いていたよりもひどい状態が続いてしまいました。

速度

詳細な値は公表されていないっぽいのですが、Twitter上の皆様曰く、「最大50kbpsではないか」とのことでした。

しかし、僕の環境は最悪で、

  • 日本のバンド帯に対応しきれいていないsimフリースマホ
  • 窓際でしか通信できない建物に囲まれた建物

であるため、計測したところ、10kbps以上の数値を確認することができませんでした。

基本的に1kbpsとか、800bpsとか。

しかし速度なんてものは待っていればいずれ解決する問題なんですよね。次の問題に進みましょう。

HTTP等のハンドシェイクがまともに行われない

憶測なのですが、HTTP等TCPの上に乗っかっているプロトコルを使った通信が殆どうまくいってませんでした。

基本応答が帰ってこないためにタイムアウトにしかなりませんでした。

何度も何度も再接続を繰り返し、たまにうまくいったような素振りを見せたら永遠放置といった具合で画像などを表示していました。

そんな状態だったのですが、LINEの通話などのSIPのものは全く途切れることもなく通信ができていました。
基本的に仲間内とはLINEのグループ通話等を使って交信しているので、この点ではとんでもなく助かりました。LINEは神

テザリングがまともに動いてくれない

こちらは正直端末の不備を疑うべきかもしれないのですが、端末のテザリング通信が全くうまくいっていませんでした。

こちらは上の問題と被ってしまいますが、もちろんのことpingは殆どがタイムアウトになってしまう状態で、何もできませんでした。

また、仕様なのかもしれないんですが、きちんとしたTCPでの接続ができてないためか、勝手に端末側がテザリングをオフにしてしまいました。

こちらで何度でもトライするのでとにかく繋がってほしかったのですが、とても残念でした。

そんな状態の中で繰り広げられたAndroidOSアップグレード

テザリングがうまく行かなかった件で、もしかしたら端末がおかしいのかもしれないと思い、なんとROMごと焼き直すことにしました。

ROMのダウンロードにおいて、まずは公共無線LANを探していました。

公共無線LANレビュー

スタバ

最悪でした。

普段行かないようなところだったので全然想像がつかず、きっと人は少ないだろうと思っていました。

そんな気持ちで一番近いスタバ(池袋)に行ったらものすごい人で溢れかえっていて、公共無線LANはログインの画面にすらたどり着くことが難しかったです。

帰りました。

東京メトロ

こちらは帰り道に最寄り駅で試していました。

電車から降りた後、ちょっと落ち着いてから接続を開始、ログインしました。

なんとなくいい感じのスピード(500kbps)が出ていたと思います。

そこまではよかったのですが、電車が来た途端に大量の人が訪れ、なんとコネクションが切断されてしまいました。

中断した後に再開することができず、イラっとしてしまって帰りました。

マクドナルド

このときで22:00くらいでした。人がぜんぜんいない空間になっていました。

ちょっと昔と比べて安くなったナゲットを買ってから試したのですが、とても安定していました。

速度の方も東京メトロよりちょっと遅いくらいの速度で、とてもいい人権環境だなと思いました。

そうとは言ってもほかの客はいたので、大体30分くらいで500MBくらいのROMのイメージを落とし終わりました。

脳死ROM焼き

なんとアプリのバックアップを取らずにROM焼きをしました。

なんとなくやっていたゲームのデータが消えました。さようなら。

テザリングは治らなかった

以上

LineageOS 14.1 評価

普通にいいと思いました。

マルチウィンドウみたいなのに最初から対応してるのも(動作的な安定を見て決定されたのかと思うのですが)よかったです。

あとは同じアプリからの通知のまとめ方が天才かな?と思ってしまいました。

イースターエッグはつまらなかったです。そんなことより消えてしまったねこあつめを返せ。

会社に長く居座るようになる

僕が務めている会社なんですが、とてもインターネットの環境が安定している上に早いので、当時の僕にとってとても良い環境でした。

このことに気づいたのが20日くらいでちょっと遅かったですね。

早めに仕事を切り上げてから23:00くらいまでずっと残るような生活を繰り返していたのですが、とても最高でした。人権はとてもいい。いいぞ。よい

ラストラン

最後のあたりに友人が泊まりに来たため、少しだけ電波を拝借してgemのインストールなどしてました。

vagrant up とかやりたかったけど勘弁してやりました。

そんなこんなで、開通日が来たのでインターネットが解禁されました。GWには間に合ってとてもよかったです。

公共無線LANについて

これについてなんですが、運営元が安心できるからって言ってすごく安直に接続していたのですが、よく考えなくてもヤバすぎるものだなと思いました。

まずAPに接続するのですが、適当なhttpリクエストに中間者攻撃することで専用のログインページに飛ばされます。

こちらなんですが、https、そしてHSTSによる強制的なhttpsでの接続を要するサイトが多くなったためにログイン時に警告が出るページが多くなりました。
このような場合にニコニコ動画は神サービスとなるのかなと思いました。

Androidだと「Wi-Fiネットワークにログイン」的な通知が来て、タップすると標準ブラウザで http://www.google.com/gen_204 にアクセスされることによってログインフォームに飛ばされるというワザップを見ることができました。

https://android.googlesource.com/platform/frameworks/base.git/+/master/services/core/java/com/android/server/connectivity/NetworkMonitor.javaandroid.googlesource.com github.com

天才かな?

こんな感じでログインさせるのですが、例えば駅構内に自分でアクセスポイントを設けてプロキシ的な働きをさせることによって何らかのハニーポッド的なことが容易にできてしまうのではないかと思っています。
簡単なところだとAmazonのアソシエイト用タグを自分のものにしたりだとか、全てのサイトのやりとりを全てロギングしたりだとか、いろんなことが思い浮かべられるかなと思います。

https通信の覗き見に関してですが、多分自分の持っているスマホに充分詳しくない人もいるだろうし、適当なタイミングで証明書をインストールさせることとかもできるんじゃないかなと思います。それっぽい画面作って誘導すれば余裕でしょ。

さいごに

インターネットの開設工事は今後の生活を考え、最短で来てもらうように頼みましょう。インターネットがない生活って本当に不便です。何もできなくなります。
僕はなんでもできるようになったので、世界の神になってこようと思います。

学生を終えました

高校生活が終わりました

これまで3年間高校生として生きてきましたが、もう卒業式をして、高校生じゃなくなりました。

一年前、高校二年次までは進学校に入っていたため、「高校が終わったら大学に進学するもの」かと思っていました。

今となっては、いろいろなことがあったため、進学校ではない学校に進学し、来年からは社会人として、社会の人とバチバチのバトルを繰り広げないといけないらしいです。

高校三年生としての一年間は、おそらく二年次時点では全く想像のできないほど濃度の高い、充実した一年間だったと思います。そもそも生き方がだいぶ変わったわけだし当たり前なんですが・・・

高校三年生

僕はこの一年間、ずっと東京に通うような一年間をしていました。
この一年でいろんなことを学び、来年度からはインターネットサムシングな会社で働こうと思っています。

学んだことはインターネットとかプログラミグユとかのことだけじゃなくて、遊び的なこともちょっとだけ含んでるんですが、それはまたいつか自分のためにもまとめたいと思います。

他にも学んだことはあって、例えば一年間は寮で暮らしていたのですが、やはり誰か(例えば家族)と一緒に生活するというのがとんでもなく貴重で、重要だということもなんとなく理解できました。
誰かが生活している音というのは、自分の生活リズムを整える上でとても重要なものでした。

というか、一年間こういう生活させてもらったっていうことが本当に贅沢だったのに、それでもたまに連絡してくれたり、仕送りをくれたりしたり、一言で済ませないくらい感謝の気持ちです。

なんでこんなに自分に尽くしてくれるのか、本当に不思議ですが、それが親なのでしょうか。

ご飯を作ってくれる親は偉大でした。

新しい生活の不安

これから自分は寮生じゃなくて、ほんとに一人暮らしになってしまいます。

ご飯

寮のときは朝と夜のご飯を作ってくれるので、起きることと寝ることを制御すれば他はどうにかなるような生活だったのですが、これからは自分でご飯も作らないといけなくなってしまいます。

自炊とかしたことないので、すごい楽しみなんですけど、絶対めんどくさいだろうなので嫌です。

というかたぶん一日一食が増える。どうにか一日三食やっていきたい。

働き

自炊がめんどくさいのもそうなんですけど、会社で仕事してから家に帰れる自信もそんなにないです。
めっちゃつかれそうだし、すごくつらそうだしめんどくさそう。

でも働くことに関してはお金がたくさんもらえるので、どうせ大変ならそれ以上に頑張って金を大量に生み出したいです。

金がたくさんあったら金の力が使えそうだし、そのうち金で黙らせることを覚えたいなと思っています。

まあどのみち頑張っていろんな力をつけたいです。

自分は恵まれている

きっかけを作ってくれた前の学校の方々、全方面の支援をしてくれた家族、教えてくれた先生方、一緒に高まった生徒の方々、SNSとかで自意識を満たしてくれた方々、いくらでも連ねていくことができるのですが、この一年だけでも大量の人の支援があると実感でき、認識できた一年でした。

これからも僕は頑張っていきます。すべての方に何かの形で恩返しをしていきたい。

a

このくらい意識が高く、気色の悪いポエムが書けるくらいには感謝しています。みなさんありがとうございました。これからもよろしくお願いします。

朝起きる方法ついて少しだけ

 

おそらく自分は夜型で、ちょっと気を抜くとすぐに寝る時間が後ろ倒しになっていってしまう。

 

長期の休みの時は大体04:00〜05:00くらいに寝始めることが多く、起きる時間は14:00〜15:00くらいで、平均で10時間近く寝てしまう。

長期の休みでないにしても、休日は平日の疲れからなのか、12時間〜13時間くらい寝てしまうことも珍しくない。

しかし、半日寝たとしても、行動する時間はいつもと変わりないのである。

そのため、23時に寝始めて11時に起きたが次に寝る時間は4時になるとか、4時に寝始めて15時に起きたが次に寝る時間は5時になるとか、そんなことで結局月曜日に起きるのは16時でした〜なんてことが繰り返されてしまう。

 

前までは家族がいたため、家の中に響く生活音等のおかげで遅くに寝始めたとしても07:00くらいには起きることができていたのだが、一人暮らしを始めてからは、どうにも自分の眠気に甘えてしまい、そのまま寝過ごしてしまう。

 

そんな感じでいつも朝起きれないのだが、これは基本的によくないことであり、昼型人間の多い社会においては「生活のリズムが崩れている状態」である。

 

例えば、コアタイムのない裁量労働制を取り入れている会社だったら、「昼過ぎ出社して夜遅くに帰る」ような自分のタイプに合わせた生活をおくることができるだろう。

しかし、そんな会社そうそうあるわけもなく、結局は自分が頑張って治すしかない。

 

考えることはたくさんあるが、今回は「遅刻する」ということに絞って考える。これを解決したい。

 

実は、朝、どうにか起きてしまってから行動を開始さえすれば、体は無理にでも活動を開始してくれて、「遅刻する」ことはなくなるのだ。

 

朝起きてればいいのだから、起きる時間が極端に遅くなった日には作業をし続けながら次の朝を待つ、いわゆる「オール」をすることでも解決できる。

大抵何かの作業をしていれば、体は起きようとしてくれるので、行動の質が落ちようともなんとか頑張りをみせることが出来る。しかも、帰ったら眠いのでいい時間に寝始めることが出来る。

自分の場合、オールをしようとすることで何が起こるかというと、出発する前くらいの時間帯で寝始めてしまうのだ。

どうやら自分の体は眠気にとても弱いらしく、眠気があるとすぐに寝てしまう。

 

 

次にどうするかを考えた時、とにかく寝てしまえばいいのだということに気づいた。

夜起き続けてる時というのは、基本的に作業をし続けている時だというのが自分で、本当に何もしなければ、やることがなく寝てしまうのではないか?と考えた。

一日中寝ることができる自分にとっては、この方法も考えられる選択肢の一つなのだろうが、作業は大体楽しいもので、途中で区切るには何らかの強い理由がないといけないだろう。

 

他の選択肢を模索していると、薬に頼るというものが出てきた。

薬は万能で、服用するだけで大体はその効果が現れてくれるが、一方で、薬に頼ってしまうことが悪いことのように思えてしまう筋もある。

自分の場合は、一回リズムを整えれば、その後数日気をつけるだけで昼型のような生活リズムに端正できるらしく、そのきっかけづくりとして薬を服用してしまうくらいだったら、体にもそんなに負担をかけないだろうし、問題が少ないのではないか?と認識している。

実際に今さっき服用した状態なのだが、だいぶ久々の服用であり、もう薬の効果が見え始めているようだ。今日は17時に起きたので、とても都合がいい。

 

僕の中では「薬に頼る」という選択肢は悪いものではなく、それなりに考えれば充分ありえる選択肢だと思っている。

今回はこんな終わり方になってしまうが、この話題については継続して考えていきたい。

フォーンプラグとかいうやつについて

はじめに

使ってたヘッドフォンの左が急に死んだ

急過ぎるし、綺麗に聞こえなくなったので、ヘッドフォンの故障かと不安になったが、ケーブルを変えたらすぐ治った
リケーブル万歳!!!!!

そのときに気づきがあったのでまとめておく

フォーンプラグとかいうやつ

ヘッドフォンは線を変えたら普通に使えるようになったので、気になって調べたときにわかったことをまとめる

フォーンプラグとは

3.5mmとか2.5mmのいつも使ってるような音のケーブルの端子をフォーンプラグと言うらしい

3.5mmのものを「ミニ」、2.5mmのものを「マイクロ」、たまに見るような6.5mmのでかいやつは「標準」と呼ばれるらしい

極について

プラグ部分に入っている黒い横線+1をした数が極の数で、モノラルのものだと黒い横線は1本だけ入っており二極、ステレオだと三極、マイクがついてるやつとかは四極だったりする

それ以上に横線が入ってるものもあるらしい

今回の故障原因は、単純に使っていたケーブルの左担当が断線していただけっぽい

f:id:naari_3:20170107054926j:plain

上が三極で下が四極

四極について

四極のマイクがついてるやつについては、CTIAというものとOMTPというものの二つの規格があり、CTIAが最近の主流らしい

これについて面白いことを見つけたんだけど、例えばリケーブルできるヘッドフォンを使っている場合、CTIAを採用していてそれ自体にマイクがついているようなケーブルがあったら、そのケーブルを使うことで、マイク付きのヘッドフォンみたいな感じになるってことに気づいた

お手軽ヘッドセットの完成だ
リケーブル万歳!!!!!

iPhone買ったときについてくるイヤフォンのマイクみたいなイメージ

AKG-Y55についてきたケーブルがそんなケーブルだった

あと、ちゃんと調べてないんだけど、曲の再生/停止を切り替えたりするボタンがついてるケーブルとかも四極っぽいし、CTIAの規格に準じたものなのかもしれない

以上

TornadoとWebSocketとふれあう

前回の↓の記事の続きです。

naari.hatenablog.com

今回はTornadoを使い、WebSocketともふれあいます。

TornadoとWebSocket

WebSocket

WebSocketはHTTPとは違うプロトコルで、HTML5から使えるようになったらしいです。

双方向通信が可能で、Ajaxとは違い、一度コネクションを貼るだけで全てのデータの送受信が可能になります。

Tornado

前回の記事でも書きましたが、TornadoはノンブロッキングなWebフレームワークです。

非同期処理をさせるならTornadoが向いてるので、今回はTornadoでやっていこうと考えました。

今回作るアプリ

今回作ろうと思うものはWebSocketを使ったチャットですが、なんかつまらないので、受信した日本語の文字を形態素解析し、文節ごとに空白を挟んでからみんなに送信するようなものにしたい思います。

コードを書く

こんな感じで書きました。

# -*- coding: utf-8 -*-
import os
import random

from pypugjs.ext.tornado import patch_tornado

import tornado.httpserver
import tornado.ioloop
from tornado import template
import tornado.web
import tornado.websocket
from tornado.web import url

patch_tornado()

from janome.tokenizer import Tokenizer
import json


class IndexHandler(tornado.web.RequestHandler):
    def get(self):
        self.render("index.pug")


class TokenizeHandler(tornado.websocket.WebSocketHandler):

    users = set()

    def open(self):
        self.users.add(self)
        print('Session opened by {}'.format(self.request.remote_ip))

    def on_message(self, message):
        message = json.loads(message)
        t = Tokenizer()
        tokens = t.tokenize(message["text"])
        message["text"] = ""
        for token in tokens:
            message["text"] += "{} ".format(token.surface)
        for user in self.users:
            user.write_message(message)

    def on_close(self):
        self.users.remove(self)
        print('Session closed by {}'.format(self.request.remote_ip))

class Application(tornado.web.Application):
    def __init__(self):
        BASE_DIR = os.path.dirname(os.path.abspath(__file__))
        handlers = [
            url(r'/', IndexHandler, name='index'),
            url(r'/tokenize', TokenizeHandler, name='tokenize'),
        ]
        settings = dict(
            template_path=os.path.join(BASE_DIR, 'templates'),
            static_path=os.path.join(BASE_DIR, 'static'),
            debug=True,
        )
        tornado.web.Application.__init__(self, handlers, **settings)


if __name__ == '__main__':
    app = Application()
    http_server = tornado.httpserver.HTTPServer(app)
    http_server.listen(8000)
    tornado.ioloop.IOLoop.instance().start()

tornado.websocket.WebSocketHandlerを継承している、TokenizeHandlerが今回の主役です。

openメソッドはコネクションが確立したときに発火されるもので、on_messageメソッドはクライアントからのメッセージ受信時、on_closeメソッドはコネクションが閉じられたときに発火されるものです。

ユーザーからのテキストの形態素解析には簡単に使用できて手軽だったJanomeを使用しました。

ailaby.com

ハンドラーの中にusersという集合を設け、コネクションが来たらそのコネクションを追加しています。

誰かの発言を受け取ったところで処理をし、集合の中身をfor文で回して全員にテキストを送っています。

そんなTokenizeHandler/tokenizeで待ち受けておくというコードになっています。

また、write_messagesメソッドなんですが、文字列でないものが渡るとjsonの形になおしてから送ってくれるようです。便利ですね。

これだけです。とても簡単に書くことが出来ました。

あとはこれをクライアント側で受け取るコードを書くのですが、今回は割愛します。あとでgithubリポジトリを貼るので気になる方はそっちで見て下さい。

f:id:naari_3:20161205004034p:plain

おわりに

今回のGithubリポジトリです。Helloworldは前回の分です。

github.com

とても簡単にWebSoketのサーバーを書くことが出来ました。

便利な上にきれいなコードになるTornadoですが、けっこういい印象を持つことが出来ました。

小規模なアプリ開発でもTornado使ってしまっていいんじゃないか?と思えるくらいいい感じです。

他にもTornadoにはログイン処理に関する機能だったり、ログだったり、多機能かつ高機能らしいです。

またいろいろ使ってみてもいいかなーと思えました。