じまろぐ

めめ

resolve mongoose warning

version

4.12.5

warning

DeprecationWarning: open() is deprecated in mongoose >= 4.11.0, use openUri() instead, or set the useMongoClient option if using connect() or createConnection()

and

DeprecationWarning: Mongoose: mpromise (mongoose's default promise library) is deprecated, plug in your own promise library instead: http://mongoosejs.com/docs/promises.html

fix

mongoose.connect(mongoURL, {
  useMongoClient: true
})

and

mongoose.Promise = require('bluebird')

link

https://github.com/Automattic/mongoose/issues/5399

https://github.com/Automattic/mongoose/issues/4951

f:id:nakajmg:20171128172739p:plain

Upgrading is not always the best option.

lol

Nuxt.js IE11でもHMRしたい

HMRしたい

IE11にはEventSourceがないのでwebpackのHMRが動かず、そのままだと手動リロードするハメになる。

f:id:nakajmg:20171128170825p:plain

nuxt.config.js でpolyfillを読み込ませれば動くようになる。

npm i -D event-source-polyfill

指定はbuildのvendorで。👇な感じに。

module.exports = {
  build: {
      vendor: process.env.NODE_ENV !== 'production'
        ? [
          'axios',
          'event-source-polyfill'
        ]
        : [
          'axios'
        ],
  }
}

プロダクション用ビルドに入り込まないように気をつけましょう。

https://ja.nuxtjs.org/api/configuration-build/#vendor

動いてる

f:id:nakajmg:20171128170707p:plain

Nuxt.jsに限らずwebpackのHMRをIE11で効かしたいときはEventSourceのpolyfill追加すれば動く(はず

IE11でStorybookを動かす

syntax errorの解消

そのままだとsyntax errorでプレビューが動かないので.babelrcpresetを指定する。

{
  "presets": ["es2015"]
}

作成場所はルートに。

この.babelrcが読み込めている場合、起動時に次のようなログが出る

@storybook/vue v3.2.16

=> Loading custom .babelrc
=> Loading custom addons config.
=> Using default webpack setup based on "vue-cli".
  0% compiling

HMRを効かす

IE11にEventSourceがないので、polyfillを追加したい。

webpackのconfigをいじればなんかうまくできるんだろうけど、めんどくさいのでcdn経由でEventSourceのpolyfillを読み込ませる。

読み込ませるのはカスタムヘッダで。

https://storybook.js.org/configurations/add-custom-head-tags/

.storybook/preview-head.html を作成する。scriptが書けるのでpolyfillを指定する。

<script src="https://cdnjs.cloudflare.com/ajax/libs/event-source-polyfill/0.0.9/eventsource.js"></script>

f:id:nakajmg:20171128165616p:plain

works fine 👍

Slackのステータス機能を活用するためにアプリを作った

Slackのユーザーステータス、使ってますか?Slack上で絵文字+テキストによって自身の状態を示すことができる機能。

f:id:nakajmg:20171124155907p:plain

メッセンジャー系ソフトウェアの機能としては目新しいものではないが、コミュニケーションの質を向上させるポテンシャルがあるなと感じている。

リモートワークとステータス

リモートでは基本のやりとりは非同期だが、たまーに同期的なコミュニケーションが必要なときに相手がどんな状態でいるのかを知りたいときがある。

自分の状態を示したいときもある。カフェで仕事してるときとか。

この状態のやりとりにSlackのステータスがうまく機能するようにできればいいのでは?と考えた。

最近移転した弊社オフィスを作業場所として使うことが多くなってきたので、オフィスに誰がいるのかを把握するのにも使えそうだな〜と思っていたところ、次のようなエントリを読んだ。

ステータス変更を自動化する

polidog.jp

このエントリではつないでいるSSIDをもとにSlackのステータスを変更するというコマンドラインツールを作ったと紹介していた。

この方法は自身の状態を大まかに示すのに最適だなと思った。

ただコマンドラインで動作するツールというのが、同僚にインストールしてもらうのには障壁になりそうだなと思った。

Electronでアプリを作った

f:id:nakajmg:20171124155339p:plain

https://nakajmg.github.io/SlackStatusChanger/

メニューバーで動作するアプリをElectronで作った。

機能は👇のような感じ

SSIDによるステータス変更

つないでいるWi-FiSSIDによってステータスを自動で変更する。

https://nakajmg.github.io/SlackStatusChanger/ss/preference_02.png

サスペンド時のステータス変更

PCがサスペンドしたときにステータスを自動で変更する。設定はSSIDと紐付ける。

例えば、オフィスのネットワークにつないでいるときにPCを閉じたときなどに離席中といったステータスに自動で変更するように設定できる。

https://nakajmg.github.io/SlackStatusChanger/ss/preference_04.png

ステータスのリスト作成

Slackの場合、デフォルトのステータスは5個までで、チーム全員で共有される。

このアプリではアプリごとに好きなステータスのセットを保存しておけるので、よく使うステータスを1クリックで適用することができる。

https://nakajmg.github.io/SlackStatusChanger/ss/preference_01.png

アプリを活用するために

作ったアプリでステータスの変更が超カンタンにできるようになったが、メンバーのステータスを知る手段が名前の横に表示されているやつしかない。

これだとあまりステータスが有効活用できないので、botとスラッシュコマンドを作って追加した。

ステータス変更通知bot

ステータスの変更を監視して、変更があったステータスをbotに通知させるようにした。

f:id:nakajmg:20171124171311p:plain

heroku上で特定のURLを叩くとSlack APIでステータスを取得して、前回の結果との差分を取得して専用のチャンネルに流すようにしている。

URLを叩くのにはGoogle Apps Scriptの分タイマーを使ってる(herokuのschedulerがイマイチだった)。

ソース https://github.com/nakajmg/SlackStatusNotifier

ステータス一覧コマンド

メンバーのステータスを一覧で見たかったので、スラッシュコマンドを作成して追加した。

f:id:nakajmg:20171124170201p:plain

通知と一覧によってステータスの可視化ができるようになってアプリの利用価値も高まったように思う。

おわり

DLはこちらから

https://github.com/nakajmg/SlackStatusChanger/releases/tag/v2.2.0

フィードバックお待ちしております 😆

[追記] サインインとSlackへのインストールについて

アプリにサインインするにはManage PermissionでSign in with Slackを有効にする必要があります。

f:id:nakajmg:20171124185352p:plain

SlackのApp Directoryに乗せる審査を通していないので、Teamの設定でNon distributedなappのインストールが許可されてない場合にはサインインでエラーになります 🙇🏻。(PermissionのOnly allow apps from the Slack App Directoryが有効な場合)

また、インストールにAdminの許可が必要な場合(Approved Appsが有効な場合)にもサインインでエラーがでますが、インストールが許可されると使えるようになります。

サインイン以外にTokenの入力でもアプリを使えるようにするか検討中です🤔

VS Codeへの乗り換えをあきらめた話

Veturのチカラを試したくてVS Codeに乗り換えようと試みました。

nakajmg.hatenablog.com

が、Vueのアプリを書くうえでは、ちょっと耐えられないなという部分があるということで乗り換えをあきらめました。

足りない

.vueファイルへの対応

vscはintellisenseという賢いやつがパスとか色々いい感じに解決してくれますが、.vueのファイルをうまいこと認識してないようで、import fromしたファイルに飛ぶのがうまくいかないパターンがありました。ファイル名の補完も同様。

ショートカットキーの設定

ショートカットキーをWebStormに寄せるためにカスタマイズしましたが、¥ にショートカットを割り当てる方法がみつかりませんでした。cmd+¥をエディタのツリービューのトグルにずっと使っているので、これができないのがかなりのストレスになりました。

またいつか

乗り換えはあきらめましたが、それでも良いところはいっぱいあるなと思えたので、WebStorm開くまででもないなというファイルを編集するときはvscを使うようにすることにしましたとさ。

おしまい

VeturのためにVS Codeを使ってみる

長いこと開発にはWebStormを使っているが、VueのLanguage ServerであるVeturのチカラを試してみたすぎて、VS Codeへ短期間の移行を決意。

Language Serverは各種言語やライブラリの、補完や構文チェックをサポートするやつで、veturをインストールするとVS Code上でVueの補完が効きまくるようになる。

1週間くらい試してみて問題なさそうだったら本格移行も考えよう

静岡JavaScript勉強会でVue.jsへの💓を話してきた

f:id:nakajmg:20161121154915j:plain

#3のときにこのスライドで名前とアイコンだけ登場してから1年半、ついに静岡JavaScript勉強会 #4でお気に入りなJavaScriptフレームワークのVue.jsについて話してきた。

👆今回の目標

今回は参加者に「Vue.jsなんかヨサソウだしちょっと使ってみようかな〜」と思ってもらうことを目標にして資料を作った🤔

📝 使った資料

🔗 💓 Vue.js (ブラウザのコンソールを開くと喋った内容が見れる)

この資料のまとめ

  • 💪 少ない学習で大きなパワー
  • 💨 軽くて速い
  • 👐 ライブラリ/ツールでどんな規模にも対応
  • 📖 ドキュメントがすごい
  • 🇯🇵 日本語コミュニティの存在

結果

参加者の何人かに「Vue.js使ってみよう」と思わせることができたようで☺

⚙ スライド作成に使ったツール

ahomu/Talkie を使ってみた。Markdownでイケてるスライドが簡単にできて良い感じ。

でもHTMLの中にMarkdown書くのと属性値編集するのがちょっとめんどくさいなと思った。文章はMarkdownで完結させたいし、その他の設定はJSで書いて使い回せれば楽だなと思って簡単なジェネレータを作った。

nakajmg/talkie-generator

MarkdownにHTMLのコメント文でページ名を設定して、そのページ名に対応するようにJSで背景画像とかレイアウトの種類を指定して使いまわせるようにした。ページの区切りは-----とか設定できるように。

文章と設定をわけて作れるようになって文章を書くモードのままスライドが作れた。

感想

今回は40分貰ったんだけど、そんな長く話した経験がなかったのでスライド作りからなにからいい経験になった。時間ありすぎて最初はアレもこれも内容に盛り込むか〜と書いてたけど、目標を設定してからはページの流れとかに気を使った。

あと今回は@polidogと同じ会で二人とも話す側になったのが少し感慨深かった(本当に少しだけど😌

f:id:nakajmg:20161121150844j:plain

さわやかのげんこつハンバーグ美味しかった🍖

謝辞

主催&誘ってくれた@tomofさん本当にありがとうございました🙏

交通費と宿泊費を出してくれた懐の深い弊社にも感謝感謝🙏

さいごに

弊社の技術メディアCodeGridでVue.js 2系の連載はじめました。基本的な使い方からvue-routerとかVuex使ったSPAの開発までフォローする予定なので、よろしくお願いします🙏