へっぽこびんぼう野郎のnewbie日記

けろけーろ(´・ω・`)!

reduxよくわかんなかったのでPythonでredux実装した

class createStore:
    """ほんとはシングルトンにしないといけないけどわかりづらくなるのでやめた

    関数にした場合は、Pythonだと "JavaScriptでは全然考えられてないローカルスコープ" で大変そうなのでクラスにした"""
    def __init__(self, reducer):
        self._state = None
        self._listeners = []
        self._reducer = reducer

    def subscribe(self, listener):
        self._listeners.append(listener)

        def unsubscribe(listener):
            self._listeners.remove(listener)

        return lambda: unsubscribe(listener)

    def dispatch(self, action):
        # Python特有の書き方
        if not self._state:
            self._state = self._reducer(action)
        else:
            self._state = self._reducer(action, self._state)
        # 特有の書き方ここまで
        for listener in self._listeners:
            listener()

    def getState(self):
        return self._state


# 実装ここまで(`・ω・´)
# あとは使い方だけ


# (state=0, action)という書き方はPythonではエラー
def counter(action, state=0):
    """いわゆるreducer。実際はこれをいっぱい書いてcombineReducersとかでまとめる"""

    # Pythonにはswitch文はない
    if action.type == "INCREMENT":
        return state + 1
    elif action.type == "DECREMENT":
        return state - 1
    else:
        return state


store = createStore(counter)


def printListener():
    """render()とかって名付けてReactDOM.render()呼べば幸せになれるリスナー"""
    print(store.getState())


store.subscribe(printListener)


# JSのObjectに相当するものをつくるだけ
class Action:
    def __init__(self, type, **kwargs):
        self.type = type
        for k, v in kwargs.items():
            setattr(self, k, v)

print("がんばるぞい!")
store.dispatch(Action(type="INCREMENT"))
store.dispatch(Action(type="INCREMENT"))
store.dispatch(Action(type="DECREMENT"))
store.dispatch(Action(type="DECREMENT"))
store.dispatch(Action(type="DECREMENT"))


# おまけ
def increment():
    """Action Creator"""
    return Action(type="INCREMENT")


store.dispatch(increment())
$ python3 redux.py
がんばるぞい!
1
2
1
0
-1
0

蛇足な解説

reduxって何するものなの?

状態を一元管理したい!!!!!!!!!
いろんなところに、いろんな状態が散らばってるの最悪だ!!!!!

だからなんとかしよう
ってやつ

reactとはどう関係するの?

作る動機がreact関連のFluxだっただけで、reactは関係ない

reactと連携するには?

react-redux とかいうのを使う
それはこのソースには入ってないので注意!

react-reduxっていっても、Providerと、connect関数しかないのでかんたん……かと思いきやよくわかんなかった
……(´・ω・`)

reduxのしくみ
  • storeというところでstateを一元管理
  • stateを変えるには、Actionを実行するしかない
  • Actionとは、stateを変更するために何を起こすのかを書いたJSのPlain Object(Plain Objectについて知らない人はググってください。lodashの中のソースがおすすめです)
  • Actionと、現在のstateから、どうstateを変更するのか(要はActionに書いたものの具体的な中身)を決めるのがReducer
store.dispatch(アクション)

こう書いてstore.dispatchすると、reducerに処理が委譲されて、storeの中のstateが変更される。

  • combineReducers()すると、reducerの関数名がstateのキーになる
  • storeに入ってるstateを取るにはstore.getState()すればいい
  • store.subscribe(リスナー)で、「stateが変更されたときに(詳しく言うとstore.dispatch関数が呼ばれたときに)呼びたい関数」を登録する

あとはオマケ

react-redux
  • store.subscribe(リスナー)の部分をconnect()という関数で隠蔽した。変更されたstateをpropsに渡してreactのレンダーまでしてくれるだけ(たぶん)

コメント

reduxはわかったけど、なんかまだもやもやってしてるので、react-reduxとか詳しい人や、プロジェクト走らせてる人から話がききたいです

ツイートをフィルターして見えなくするChrome拡張つくりました

目的

ぼくはTwitterの公式ページを普段使用しているんですが、

最近、キングコング西野とその絵本たちの話題がタイムラインにあがってきてて、まあ別にどうでもいいなと思ってたんですが、これに言及するツイートもタイムラインで増殖しはじめていて、全員不愉快だったのでフィルターしたくなったんですが、探してもいいエクステンションが見つからなかったので「自分でつくればいいや」と思ってつくりました。

どういうものなの?

こういうページがあって、『Iraqi』とかいう文字死んでもみたくないなと思ったら

f:id:haruharu1:20170122224148p:plain

こう入力して

f:id:haruharu1:20170122224136p:plain

見えなくしてしまうぜ!

f:id:haruharu1:20170122224214p:plain

というやつです。

インストール方法

ここからインストールしてください。

chrome.google.com

使い方

Google Chromeの右上にある『F』のマークをクリックします。

f:id:haruharu1:20170122222156p:plain

こんな感じで『オプション』と出るのでクリックします。

f:id:haruharu1:20170122222336p:plain

こういうページが出るので、『Input regex(JavaScript) here to filter tweets.』の欄にフィルターしたいテキストを入力してください。

f:id:haruharu1:20170122222636p:plain

書いたら『Save』ボタンを忘れずに押してください。

これで終わりです。

複数フィルターしたい!!

『|』で区切ると複数フィルターすることができます。半角スペースや全角スペースではないことに注意してください。

f:id:haruharu1:20170122222815p:plain

応用編

正規表現という書き方を使って、まとめることができます。

くわしい正規表現については公式のドキュメントを見てください。多少のプログラミングの知識があるとわかるかもしれません。

ドキュメント → 正規表現 - JavaScript | MDN

f:id:haruharu1:20170122222945p:plain

『Filter tests for text』で、ちゃんとフィルターできるかどうかチェックすることができます。ご活用ください。

f:id:haruharu1:20170122223419p:plain

バグ報告について

できればGitHubのissuesにあげてもらえると嬉しいかもですが、ここのコメントに書いてくださっても大丈夫です。 もっとできればBugFixしてからPR出してもらえると最高です(๑•̀ㅂ•́)و✧

ソースについて(開発者向け)

github.com

その他

  • Firefox向けに作る予定は一切ありません。

はてブのアプリを消して3ヶ月が経ったのでその影響を報告します

はじめに

以前までぼくははてなブックマークのヘビーユーザーで、毎日ニュースやらブログやら、何らかの記事にコメントしていました。
これはもはや習慣化していて、大して見たくもない日にもホットエントリに上がっている話題を見ていました。
そうしてぼくは「はてブやってて辛いな」という点をいくつかあげて、そうして消したほうがいいことを見出して、アプリを消すことを決意しました。

1

個人的な意見ですがはてブの傾向は、批判的なコメントが多く、「それは確かにそうだ」とうなずけるような意見であっても上から目線で語っているようなものが多く、そして単なる誹謗中傷も多いという「三拍子揃ってドン!」な感じであるような気がしています。

逆に「これは見事だ」と言える記事には不思議とコメントが無く、単にブックマークがついているだけの記事が多くありました。

統計をとったわけではなく、ぼく個人の経験談なので、別の視点・別の記事・別の分野の人からすると「そんなことないけどな」と思われるかもしれませんが、
ぼくの観測範囲では、「文章の巧さで隠蔽してるけどやってることは罵倒なんじゃないのか」と思えるようなコメントが多く目につき、そしてぼくもその一員でした。

「罵倒が嫌になった」の主原因は、お付き合いしている人の性格がぼくより数段良いのが影響したためなのかもしれないと思っています。
要約すると「ひとのわるぐちをいうのはよくない」ということに気付いたので、「人の悪口を言うひとたちと距離を置きたくなった」ということです。

2

次にぼくが考えたことは、「単に批判的なコメントをするだけでは何も変わらない」ということでした。
言い方は悪いですが、村の中でおばちゃんたちが愚痴ってるだけなのとモデルがほぼ同一で、とても社会に影響をもたらすレベルではなく、生産性がないなと感じたこともアプリをやめたくなる原因でした。
ぼくはどちらかと言うと遅筆だったので、コメントを書くだけだというのに、はてブには最低1日1時間滞在していました。
これも良くなく、依存状態に陥っているくせに生産性がないという最悪の事態でした。

3

ホットエントリに上がってくる話題の2割か3割ほどは、ブックマーク数が多いものが上がってくるという仕組みゆえに、大衆に左右されていて信頼性がなく、炎上・炎上手前の見たくもない記事記事でした。
日本にはマジキチしかいないんじゃないかというレベルで毎日マジキチ記事・マジキチコメントを見かけていたので、「世界がそういうもの」のような錯覚を受けていました。
世界はそういうものではないので、錯覚から抜け出したかったのもアプリをやめる原因になりました。

4

逆にはてブをやっていてよかったこともありました。
日本のエンジニアではてブをやっている人は多くいるので、その人たちの記事への反応が見れることだったり、ホットエントリに「良記事」があがってきたりだとかで、最低でもなんとなく雰囲気くらいはつかめるといったことです。
コメントは見ず記事だけ見てコメントしたあとは放置すればいい話ではありますが、記事に対して何らかの意見を表明してどこかに記述し、他人の思考様式を見てほほうと思うことができるというのは魅力的なもので、なかなか逆らえるものではありませんでした。

まあただこれはTwitterでもできるなと思っていたので、断腸の思いでしたがこのメリットは捨てることにしました。

5

それらをいろいろまとめて、はてなブックマークのアプリを消すことにしました。
もともとPCでははてなブックマークをほとんど使っていなかったので、スマホアプリを消せば触ることもなくなるだろうと思っていて、そして事実そうなりました。

現在でははてブではなく、Twitterをメインに使っていて、ニュースや人のツイートを見てふんふん言っている生活を送っています。
はてブと決定的に違うのは、関わる人々がはてブより匿名ではなく、どちらかと言えば友好的であるという点だと思っています。

6

はてブを消してよかったことは、まず「罵倒」を目にする回数が大幅に少なくなったということです。
おかげで煽り耐性に弱い人間になってしまった感もありますが、それはそれとして、これは精神衛生上非常に良いことでした。

次に、めちゃくちゃ暇になりました。
今までどのくらいの時間を費やしていたのかわかりませんが、ともかく時間が空きました。
これを他の作業に充てられることは大変よろこばしいです。

デメリットは、情報が若干得られなくなったことだと思いますが、ちゃんと計測していなかったので、それがどのくらいの損だったのかというのはいまいちわかりません。ただ、たぶんデメリットはあんまりないです。

それから「アプリを消すという5秒ほどの操作の結果、感情・思考・行動形態・習慣が変わった」という事実に衝撃を受けました。

以前に
heppoko.hatenadiary.jp
という記事をぼくは書いていて、まああんまりこの通りうまくいっているわけではないんですが、コア部分だけが最適化されたため、特に努力もなんにもせず勝手に習慣になっていて、ゴミをちゃんと捨てることができているようになっている自分に感動しました。
そしてたまにある「ゴミを捨てられない日々」は、どうやらぼくは部屋に引きこもっている日々である、というようなことがわかってきたので、引きこもりをやめさえすればぼくはゴミ捨てというタスクに困ることはないわけです。

7

そんなわけで、そんな感じなんですが、
「自分ではなく環境を変化させて、その結果自分が勝手に変化する」というのに光明を見出し、過去の自分が整備してくれたレールの上で、行き先に書いてある通りに何も考えず行動すれば、楽してるのになんかうまくいっていてすばらすぃということが、最近の僕の思考によってわかったようで、これがたいへん良い成果だったのではないかなあというのが、僕の中で話題です。

おわり。

ChromeやSafariではform.submit()できるのにFirefoxやIEだとできない問題

<html>
    <body></body>
    <script>
    var form = document.createElement("form");
    var input = document.createElement("input");
    form.action = "https://google.com/search"
    input.name = "q";
    input.value = "Hello";

    form.appendChild(input);
    // ↓を外すとChromeやSafariでしか動かない
    document.body.appendChild(form);
    form.submit();
    </script>
</html>

bodyの中に入れないといけないっぽい

なんでかは知らん

[参考]
stackoverflow.com

Chromeで立ち上げる際に出る「デベロッパーモードの拡張機能を無効にする」のポップアップがうざかったので消した

Chromeのバージョン

55.0.2883.95(64bit)

f:id:haruharu1:20161228112501p:plain

現象

↓このポップアップが、起動時に毎回出てくる

http://cdn-ak.f.st-hatena.com/images/fotolife/t/takuya_1st/20160508/20160508225258.jpg

(解決してしまって再現できなかったので、自前Chrome拡張機能がオフにされるのを防ぐ。強制オフされるのを避ける。 - それマグで!から引用させてもらいました)

原因

自分で開発中の拡張機能があっても、「デベロッパーモード」だとポップアップが出てしまう。

解決の指針

デベロッパーモードをやめる

解決方法

  • 拡張機能管理画面で、パッケージ化されてない拡張機能をパッケージ化する(*.crxファイルになる) f:id:haruharu1:20161228112442p:plain
  • デベロッパーモードをOFFにする
  • パッケージ化された*.crxファイルを、拡張機能管理画面でドラッグ&ドロップする(なんか権限とか聞かれたあとインストール完了する)
  • おわり

リファレンス

Disable developer mode extensions pop up in Chrome - Stack Overflow Chromeを立ち上げると毎回、『この拡張機能は Chrome ウェブストアで提... - Yahoo!知恵袋

暇をもてあましていたので、0.9円から2177兆円までのいろんなものの値段の比較表つくってみた

なぜやったのか

  • 500億円、3000億円、2兆円、30兆円とか聞いても全然ピンと来ないので、金銭感覚を手に入れるためにいろいろ調べてみた。
  • とりあえず教育関連費安いとか、税収すくないとか、国債やべぇとか、NTTパネェとか、たばこ多いとか、そういうことがわかったのでよかった。

スマホなどで見にくい方は直接どうぞ→値段の比較 - Google スプレッドシート

免責等

  • 間違っている箇所があるかもしれませんが、いずれの場合でもそれに伴う損害については一切責任を負いません
  • 間違ってるよーという箇所があれば指摘していただけると幸いです
  • 「名称」については不適切な名称があるかもしれませんが、あくまでわかりやすさを優先しました
  • 随時更新するかもしれません
  • ニコニコ動画とかで関連動画つくりたかったけどめんどくさいので誰かやってください
  • もしも過剰に不適切な部分があれば削除いたします

gitのコミットメッセージを、コミットするときに考えるのがつらいので、そもそも作業前にメッセージを考えて作ることにした話

ぼくのかんがえ

  • ( ^o^) 良いコミットメッセージ書くぞ
  • ( ˘⊖˘) 。o(まてよ、そもそもどうしてファイルを編集したあとにコミットメッセージを考えないといけないんだ?)
  • |documentation| ┗(☋` )┓三
  • ( ◠‿◠ )☛ そこに気付いたか…… 貴様には実装してもらおう
  • ▂▅▇█▓▒░(’ω’)░▒▓█▇▅▂ うわああああああああ

作業のワークフローはこんな感じ

f:id:haruharu1:20161117010952p:plain

べんりかもしれない

やったこと

Gitのhooksをつかったりしてみた

ソース

github.com

インストール方法

makeでインストールできるはず
デフォルトは/usr/local/binに入るようになってるので、気に入らない人はMakefile見てかえてください

おまけ

テスト書いてないのでバグがあったらごめんなさい。PR待ってます

チケットみたいな感じで作れるので嬉しいのと、自分が何やってるか明確にできるので嬉しい
ゴミコミットみたいなのが減ってるので、個人的につくってよかったかなと思っている

持論

  • 作業がかなり明確で短い場合は、最後にコミットメッセージを考える方が楽(自分の頭の中で「どういう作業してどうなったか」を絶えず考えておけるので)
  • 試行錯誤系のものについては、作業はあくまでも指針だから明確に決まっているわけではない。なので「とりあえずコレやる」だけ書いて、書いたものと若干違う作業が出たらコミットメッセージを変えてコミットすれば、コミットごとにタスクがしっかり分解されて、コミットメッセージもあんまり考えなくてよくなる。試行錯誤の様子がコミットメッセージに現れるが、それはそれでよいのではないか
  • 「コミットメッセージをあとで書く」ようにしていると、気が付かないうちに別の作業もしてしまい、あとでいろいろ混ざったコミットになるが、これの場合最初に「コレをやる」と決めてるので、あんまり混ざらない

追記[2017/06/23]

結局使ってない/(^o^)\