  async [types.WATCH_MARKDOWN]({ commit, state }) {
    if (!es) {
      es = new EventSource('/stream')
      es.addEventListener('updated', async ({ data }) => {
        const { slug } = JSON.parse(data)
        if (slug !== state.slug) return
        const filePath = baseURL(`/${state.slug}/${state.page}`)
        const response = await request(filePath)
        return commit(types.SET_RESPONSE, response)
      })
    }
  },

これでNuxtの監視してないファイルの更新をトリガーにして再レンダリング成功

Nuxt便利

VuePressみたいなツール、Nuxt使えばわりと低コストで作れそうだなという感触。

SSR環境を自前でつくるの、思ってるより数倍はめんどくさいから、Nuxt使って楽していこう。

2018-09-25

超お高級耳栓 BOSE SLEEPBUDSでストレスが減った

f:id:nakajmg:20180924235932j:plain

BOSEから発売された眠るためのイヤホン、BOSE SLEEPBUDSを購入してから3週間ほど経ちました。このエントリは自分にはそこそこ効果があったよというレビューです。

BOSE NOISE-MASKING SLEEPBUDS ノイズマスキングイヤープラグ

出版社/メーカー: BOSE
発売日: 2018/09/06
メディア: エレクトロニクス
この商品を含むブログを見る

※ 自分は眠りにつくのが遅い＆眠りも浅めでちょっとの音で起きるタイプです。

なにこれ

入眠時に周りの音で眠りを妨げられないようにするためのイヤホン
ノイズキャンセリングではなく、ノイズマスキングで周りの音が気にならないようにする
アプリを使ってヒーリングサウンドを流し続ける（ノイズマスキング）
アラームが設定できる
決まった音しか流せない（Bluetoohイヤホンではない）

小さいワイヤレスイヤホンをつけて、音を流し続けてほかの音を気にならないようにする、というやつ。決まった音しか流せない。

f:id:nakajmg:20180924235816j:plain — 10種類の音から選んで流す

f:id:nakajmg:20180924235812j:plain — アラームが設定できる

使ってみての感想

まずこれを使うことで眠れるのかどうか、自分の場合は眠りにつく際に周囲の音で困っていたこともあり、その音への解決策として一定の効果があった。

自分が困っていた音は次の２つ。

寝室と扉1枚で隣接するリビングからの音（生活音、話し声）
深夜に動き出す上の住人の音（2時すぎ、足音とかいろいろ）

とくにリビングからの音に悩んでた。音の主は妻。いつもは一緒の時間に寝るか、自分が後から寝るので問題ないが、たまに先に寝たいときに音が気になって眠れない。

それがSLEEPBUDSをつけて音を流すと、リビングからの音が気にならなくなり眠れるようになった。これだけでも自分にとっては買った価値があったなと思えた。眠れないストレスって悪循環でさらに眠れなくなるから、ストレスを減らせるなら3万でもまぁいいかと自分は納得できた。

つけ心地

かなり小さいが、耳の穴が小さい人には合わなそう
つけて横向きになると「あるな」と思うくらいには装着感はある。枕によって変わりそう
仰向けで寝る人には合ってそう

前はどうしても寝たいときBOSEのノイズキャンセリングイヤホンで音楽流すとかもやってた。普通のイヤホンだと大きさのせいで仰向けを強制されるんだけど、SLEEPBUDSはかなり小さいので眠る体制は割と好きにできる。

寝るとき以外の使い道を模索

なにせ3万ですから。寝るときだけ使うのもアレなので試してみた。

カフェで作業するとき
家で作業するとき
オフィスで作業するとき

カフェで作業するときSLEEPBUDSつけて音を流してみると、近くの席の会話が気にならなかった。水の音とか流すと、完全にシャットダウンするほど大きい音量じゃなくても会話に耳がいかなくなる感じ。

家作業では、車の音とか、おばちゃんの話し声とか、工事の音とかが気にならなくなる感じ。

オフィスでは話し声が聞こえなくなって集中できた。

それ普通のイヤホンでよくない？

はい。

でもでも、集中したいけど曲は聴きたくないときとか、ただ話し声をカットしたいときには結構いいと思う。ノイズキャンセリングだと話し声ってカットしきれないし。

総評

入眠時の音で困ってるなら一考する価値はある
- 先に普通のイイ耳栓試したほうがいい
決まった音しか流せないのがちょっと残念
- 好きな音楽とか流せないので注意
- 作業用に使うのは割とアリな感じ
ケースがかっこよくて所有欲が満たせる

自分の場合は割とマッチしててアリかなという感じ。ただ3万円が適正価格かどうかというと何とも言えないかも。

現状これ系の選択肢がSLEEPBUDS以外になさそうなので、ほかのメーカーも参入してくれたらいいなぁと思う。特許ガチガチで無理なら、あと数ミリ小さくして好きな曲が流せるやつ出してくださいBOSEさん。

2018-09-08

Dockerでホストしてるwebページを同一ネットワークにいる端末から開きたい

Dockerでホストしてるページ、pcで localhost とかでアクセスできるやつにiOS端末実機から開こうとしたらできなかった（同一ネットワークでpcのローカルipをURLに入れて）。

webpackとかのローカルサーバだと同一ネットワーク内ならip入れればアクセスできるけど、Dockerの場合は事情が違うようで、検索したらいろいろ設定が必要とか出てきてめんどくさそうだった。

めんどくさいから localhost をそのままプロキシして公開すりゃいけるだろと思って試したらできた。

npx browser-sync start ---proxy localhost

npx でダウンロード&起動してお手軽プロキシ。すぐ思い出せたのが browser-sync なだけで、プロキシできればなんでもいい。

無事実機からページを開けて世界は救われました。fin

2018-09-03

Firebase SDKのimportでwarningが出るときは

import firebase from "firebase"

すると

It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

とwarningが出る。

使うパッケージだけimportしろってことなので

import firebase from "firebase/app"
import "firebase/auth"
import "firebase/firestore"

使うやつだけimportするとwarningは出なくなる

これで解決しなかったら次のissueを参照

github.com

2018-08-22

13インチ MBPに合わせてポータブルなモニタを買った

f:id:nakajmg:20180822200345j:plain

MBPを15インチから13インチに変えた影響で作業領域が若干せまくなりました。出先でやる気を出したいときに作業領域を広げたいので小さめなモニタを探しました。

いろいろ見た結果、購入したのはこれ。

cocopar モバイルモニタ２０１８最新13.3インチフルHDIPSゲーミングモニターゲーム/HDMI/PS3/XBOX/PS4/USB-Cモニター1080PダブルHDMI (厚さ9mm / 重さ640g)

出版社/メーカー: cocopar
メディア: エレクトロニクス
この商品を含むブログを見る

よさ

type-c対応
HDMI(mini)入力あり
13.3インチ

大きさはMBP13インチとほぼ一緒。

type-c対応で給電含めてケーブル１本で完結するのがとても良いところ。

HDMI(mini)入力があるのもよくて、type-cだけだと現状mac以外に使い道がなくなるので、HDMIでいろんな機器に使い回せるのは高評価ポイント。

あまり使わないけどスピーカーも内蔵してる。

スタンド

付属品のスタンドが若干重いので、代わりにプラ製のこれを持ち運んでる。

スマホ・タブレット用折りたたみ式薄型スタンド角度調整可能強化版(黒Black)

出版社/メーカー: 3Q forever
メディア: エレクトロニクス
この商品を含むブログを見る

ケース

画面保護用のケースが一切ついてないので、使わないときはエレコムの保護ケースに入れてる。ジャストサイズ。

ポケットがついてるのでtype-cケーブルとスタンドを入れてすっきり収納。

エレコム保護ケースノートPC 13.3インチワイド衝撃吸収 ZEROSHOCK スリム(MacBook Pro 13インチ) 12.1/12.5/13/13.3インチ ZSB-IBUB02BK

出版社/メーカー: エレコム
発売日: 2012/07/13
メディア: Personal Computers
クリック: 1回
この商品を含むブログを見る

ケーブル

type-c to type-c なケーブルは付属してないので、Ankerの50cmのやつを使ってる。MBP13インチの左側にモニタおいてMBP右側のtype-cにつなげる長さ。

Anker USB-C & USB-C Thunderbolt 3 ケーブル (50cm) 【PD対応超高速 40Gbps 100W出力 USB2.0 / 3.0 / 3.1 対応】

出版社/メーカー: Anker
メディア: Wireless Phone Accessory
この商品を含むブログを見る

いいよ

この大きさ&重さであれば普通に持ち歩ける。ケーブルも１本で済む。

おすすめです。

2018-07-12

vuex-connectでnamespacedなmoduleを使いやすくするヘルパーを作った

vuex-connectはVuexでReduxのconnectのようにstoreとコンポーネントを繋ぐやつ。

www.npmjs.com

コンポーネントとstoreを繋ぐ部分を切り離せて宣言的に書けて気に入ってる。mapStateとかVuexが用意してるやつ使わなくてもstoreの値を取り出せて注入できる。

namespacedなmoduleを繋ぐとき

たとえば次のようなstoreがあったとき

const store = new Vuex.Store({
  state: {
    foo: 'foo',
  },
  modules: {
    moduleName: {
      namespaced: true,
      state: {
        bar: 'bar',
      },
      mutations: {
        barMutation(state, payload) {
          state.bar = payload
        },
      },
      actions: {
        barAction({ commit }, payload) {
          commit('barMutation', payload)
        },
      },
      getters: {
        barbar: state => state.bar + state.bar,
      },
    },
  },
})

vuex-connectではこう、関数で書いて階層たどってreturn。

import { connect } from 'vuex-connect'
import MyComponent from './MyComponent'

export default connect({
  stateToProps: {
    foo: 'foo',
    bar: state => state.moduleName.bar,
  },
})(MyComponent)

mapXxxxxぽく書きたいからヘルパー作った

数が少なければいいんだけど多くなってくると毎回namespaceの階層まで記述するのめんどい、のでヘルパー関数作った。

www.npmjs.com

import { connect } from 'vuex-connect'
import { stateToProps } from 'vuex-connect-namespace-helper'
import MyComponent from './MyComponent'

export default connect({
  stateToProps: {
    foo: 'foo',
    ...stateToProps('moduleName', {
      bar: 'bar',
    }),
  },
})(MyComponent)

mapXxxxxとかと同じように1つ目の引数にnamespaceを指定、そのあとそのmoduleのlocal stateを指定する。

ヘルパーがやってるのは指定されたnamespaceとstate名をいい感じにマッピングして、moduleのstateを返す関数に変換してるだけ。

API

内部的にやってることはほぼ同じだけど一応わけてある。

helperFunction(namespace, options) -> Object

stateToProps
gettersToProps
mutationsToEvents
mutationsToProps
actionsToEvents
actionsToProps

vuex-connectおすすめ

VuexのmapXxxxxを無計画に使ってるとつらみになりがちで

storeと密結合になるからmapXxxxxをpresentationなコンポーネントには使いたくない
コンポーネントごとに小さなcontainerを都度作るのつらい
pageレベルのcontainerにやらせるとmapXxxxxが増えまくってつらい
コンポーネントの$emitをバケツリレーしてcontainerでmapMutationsとかした処理呼ぶのつらい

とかとか。

この辺りをスッと綺麗に書けるようになるので、Vuex使う人は一度試してみるのおすすめです。

starください。

github.com

2018-05-01

デスク付きエアロバイクがいい感じ

デスク付きのエアロバイク FlexiSpot V9 を購入した。

FlexiSpot V9 (2018 CES Innovation Awards 受賞) フィットネスバイクエアロバイクスタンディングデスク組み立て不要無段階調整移動と収納簡単 (ホワイト)

出版社/メーカー: Loctek Visual Technology Corp.
メディア: その他
この商品を含むブログを見る

運動できる環境がすぐそこに

家にデスクバイクがきたことで、運動しないことに言い訳ができなくなった。そのおかげで毎日運動するようになって、心身ともに整ってきたような実感がある。

運動しながら仕事してると、頭が冴えてきて集中力が増す気がする。リモートワークしてる人には特におすすめしたい。

値段見てたっかいなーと思ったけど、買ってよかったなと思えている。

家で仕事する人、最近ジム行けてないなって人、手軽に運動する環境が欲しいって人にはおすすめできる。

邪魔になったら売ればいいし、足を畳んでデスクを外せばめっちゃ小さい。

きっかけ

デスク付きバイクの存在を知ったきっかけは👇のレビュー記事。

gigazine.net

購入の決め手は本体のスリムさと移動が楽なキャスター式なところ。

使用感

f:id:nakajmg:20180429143222j:plain

購入してからの3週間、ほぼ毎日のように仕事or遊びながら1時間以上は漕いでる。多い日は4時間くらい。

エアロバイクとしての安定感はばっちり。デスクの大きさも丁度よい。始めのほんの数分は漕いでることに意識を少しもっていかれるが、しばらく経つと漕いでるのを忘れる。

漕いで十数分してくると汗ばんできて、少し回転を早めに漕ぐとシャツが汗びっしょりになる。汗をかいたあとの風呂最高。

大きさ

デスク付きのバイク、調べてみるとそこそこの種類が世にはあった。中にはけっこう安いやつもある。ただそのほとんどが設置スペースとして狭くないスペースを必要とするのと、本体の移動が大変そうである。

FlexiSpot v9の地面に設置してるキャスター部分の辺を測ってみると横が55cm、縦が80cm程度。

決して小さくはないが部屋に置いてあってもそこまでの圧迫感はない。

キャスターによって簡単に移動できるので、気分によって向きを変えたり場所を変えたりしてる。

f:id:nakajmg:20180429143214j:plain

f:id:nakajmg:20180429143206j:plain

本体の幅はiPhone 6Sの縦幅より細い

デスクも十分な広さ

デスクの大きさは横50cm縦58cm程。パームレストというか肘置きみたいなのが5cm~8cm程度あるので縦で使えるのは50cm程。

f:id:nakajmg:20180429150619j:plain

写真はMacBook Pro 15インチ。macの横にマウスパッド置いてマウスでの操作も問題なくできた（漕ぎながらLoLやってみた）。

パームレストがあるので手の疲れが出にくいのがいい感じ。

このデスクは高さと縦方向の位置が調整できるので最適なポジションで作業できる。

本体にドリンクホルダーがあるが、漕いでると足に干渉することがあったので別途クリップ式のホルダーを購入した。

スタンディングデスクとしても使える

デスクの高さと縦方向の位置が調整できるので、スタンディングデスクとしても使える。家の中でスタンディングやろうとすると、棚の上とか箱を積んだりとかでめんどくさいので、この使い方は意外と便利。

室内でもシューズがあったほうが漕ぎやすい

機器のペダルは自転車と同じようなペダル。室内用にゴムのカバーが付属してるが、それでも漕ぐ時の安定感を考えるとランニングシューズの用なものがあるとよいと感じた。

高負荷では連続使用可能時間が短め

大きさを考えると仕方ないが、負荷を高めの設定にした場合、機器への負担が大きいため30分程度で一旦本体を休ませる必要があるのがすこし難点。ただめちゃくちゃ筋肉付けたいとかでなければ、8段階の4くらいの負荷で長めにやればよいかなと納得してる。

デスクバイクが来てからの変化

通ってたジムを解約した。

仕事の忙しさとか引っ越して距離が遠くなったとか色々理由つけて行かなくなりがちになっていた。それでも運動はしたいというモチベだけはあって、もういっそのこと家できっちり運動すればいいかと思うようになった。

Twitchでゲームの配信を見ながら漕ぐようなときは、両手が空いてる。そういうときはダンベルかチューブを使って上半身を動かすようにしてる。

TheFitLife フィットネスチューブトレーニングチューブ超強化版天然ラテックス製 5レベル負荷強度別5本セットストレッチダイエット自宅・オフィス・公園・学校・ジムゴムチューブ筋トレ美尻ヨガリハビリシェイプアップピラティス収納ポーチ付

出版社/メーカー: TheFitLife
メディア: その他
この商品を含むブログを見る

これの影響か漕いでないときもウェイトとチューブでなるべく全身を動かすように努めるようになった。毎日筋トレしてると寝付きと寝起きがとてもよい💪

筋肉を増やしたいのでプロテインも毎回飲んでる。

これ美味しくておすすめ。今まで色々試したプロテインの中でもっとも味がよくてプロテインぽさがなかった。

チャンピオンピュアホエイプロテインスタックチョコレートブラウニー 2.27Kg [並行輸入品]

出版社/メーカー: チャンピオンニュートリション
メディア: ヘルスケア&ケア用品
この商品を含むブログを見る

ながら運動最高

ゲームばっかりしててもこれなら運動不足にならないぞ

デスクバイクが来てからの休日🚲🎮 pic.twitter.com/Bg2viaIR8m
— じまぐ (@nakajmg) 2018年4月15日

家に長時間いる人にはほんとおすすめ

じまろぐ

めめ

Nuxtが監視していないファイルの更新をトリガーに再レンダリングしたい

TL;DR

プレゼンツールの概要

もろもろ

Markdownが更新されたら再レンダリングしたい