あいつの日誌β

人生はお酒があれば何とかなります。 drunkard.tokyo

Nuxt.js で buefy を試す方法 version 2018-10-11

あらすじ

いくつかハマった点があったのでメモ

vue init nuxt-community/starter-template

以前記事にもしましたが isClient というメソッドは現在ご利用できません。

vue init nuxt-community/starter-template practice-nuxt-buefy && cd $_  
yarn

nuxt.config.js を以下のように修正します。

-    extend (config, { isDev, isClient }) {
-      if (isDev && isClient) {
+    extend (config, { isDev }) {
+      if (isDev && process.client) {

動作確認

yarn run dev

buefy

上記のプロジェクトに buefy を追加します。

yarn add buefy

add plugin: create plugins/buefy.js

import Vue from 'vue';
import Buefy from 'buefy';
import 'buefy/dist/buefy.css';

Vue.use(Buefy);

edit nuxt.config.js

         })
       }
     }
-  }
+  },
+  plugins: [
+    { src: '~plugins/buefy', ssr: false }
+  ],
 }

どうやら buefy が内部で File オブジェクトを使用してるようですが、これは Node.js にはない、ブラウザのみのインターフェースなので ssr: false にしないと最初のリクエスト(一番最初のレンダリングは Node.js 側で行う)で以下のようなエラーが発生します。

error ReferenceError: File is not defined

こちらからは以上です。

Github API で自分が作業した内容をとりだすスクリプト

作業内容の報告書を書く時に URL が必要になったので書いた。

const axios = require('axios')
const qs = require('qs')
const moment = require('moment')

const BASE_URL = 'https://api.github.com/'
const TOKEN = 'YOUR_TOKEN'

async function getCommits(owner, repo, queryParams) {
  
  const q = qs.stringify(queryParams)

  return axios.create({
    baseURL: BASE_URL,
    timeout: 3000,
    headers: {
      'Authorization': `token ${TOKEN}`,
    },
  }).get(`/repos/${owner}/${repo}/commits?${q}`).catch(console.error)
}

async function main() {
  const res = await getCommits('okamuuu', 'practice-rails-app-docker', {
    author: 'okamuuu',
    since: moment().add(-90, 'days').format('YYYY-MM-DDTHH:MM:SSZ'),
    until: moment().format('YYYY-MM-DDTHH:MM:SSZ')
  });

  const commitObjects = res.data

  const commitsOf = {}
  commitObjects.forEach(obj => {
    const date = moment(obj.commit.author.date).format('YYYY-MM-DD');
    if (commitsOf[date] === undefined ) {
      commitsOf[date] = []
    }
    commitsOf[date].push(obj.html_url);
    // console.log(obj.commit.author.date)
    // console.log(obj.commit.url)
  })

  for (let date in commitsOf) {
    console.log(date)
    const commits = commitsOf[date]
    console.log(commits.join("\n"))
  }
}

main();

access_token の取得方法は Creating a personal access token for the command line - User Documentation を参照。

実行結果。

2018-08-21
https://github.com/okamuuu/practice-rails-app-docker/commit/f8eeac0d87e31e20bbfbca6d3b0c6e18c6225d62
https://github.com/okamuuu/practice-rails-app-docker/commit/2f3fe1f253962842cd010988714e1c98c007b5f3
https://github.com/okamuuu/practice-rails-app-docker/commit/c95d453762be8dc2aa95cab3af2ab4ca517f0a29
https://github.com/okamuuu/practice-rails-app-docker/commit/352e50785ae218f555d91cbe3d72eabed474faf4
https://github.com/okamuuu/practice-rails-app-docker/commit/69adab4e9c1b547a1a1a9c73764fe66c0ccf3671
https://github.com/okamuuu/practice-rails-app-docker/commit/111021a00eed75ca0b7beec0c249275c767d273c
https://github.com/okamuuu/practice-rails-app-docker/commit/397974b760a87cca2f4faeeb7d19fe70a8ec1d8f
https://github.com/okamuuu/practice-rails-app-docker/commit/1e45ad2fe316336e22a026c6bedde8db674d593a
https://github.com/okamuuu/practice-rails-app-docker/commit/6e6fb4a943e7074db71dbbec5398f7bc4c2c1f73
https://github.com/okamuuu/practice-rails-app-docker/commit/c4e7ca1f2618bf77743cbb780e3e8b632d7fd789
https://github.com/okamuuu/practice-rails-app-docker/commit/64bd5a4200eb4a46bd3ca08e641e49249b604466
https://github.com/okamuuu/practice-rails-app-docker/commit/79a497d98a4771e602abac7f5d0b4a810f95b354
https://github.com/okamuuu/practice-rails-app-docker/commit/cab4949876176986108a909da0fe8eecc6bc3fce
2018-08-20
https://github.com/okamuuu/practice-rails-app-docker/commit/4c5659e87401a12a010478747fb973772460fa1d
https://github.com/okamuuu/practice-rails-app-docker/commit/3ca6b776830ba71f4b981b40a10c9c47d62dac57
https://github.com/okamuuu/practice-rails-app-docker/commit/4d2e4cca9a358252d309dea41d19594dcdb76e19
https://github.com/okamuuu/practice-rails-app-docker/commit/ae721effdb9d81943e9b002d9db89a522de0e51e
https://github.com/okamuuu/practice-rails-app-docker/commit/960e652dd1af962543ef07e13ec932c9a0fd1893
https://github.com/okamuuu/practice-rails-app-docker/commit/b4ea70149edae79ae5edf49bb76269d6d3dbd9c0
https://github.com/okamuuu/practice-rails-app-docker/commit/6a2c20a69655bf4e3e87666d11655d75e5e9df96
https://github.com/okamuuu/practice-rails-app-docker/commit/0976b5773c743a301f1fc249aec87d9fc0c90ddc
https://github.com/okamuuu/practice-rails-app-docker/commit/96e3678374f3fd2a7f2689683abeb8440378ca99
https://github.com/okamuuu/practice-rails-app-docker/commit/6a72b60c7ab0bfeb34bd84fdf10e57e432af5a48
https://github.com/okamuuu/practice-rails-app-docker/commit/ea4d1f2547fe0e5932254cc9c64942fb8a7b0c0a
https://github.com/okamuuu/practice-rails-app-docker/commit/d3ffe90738e7219e294736ecc82cf63623022d6b

表示する内容は以下を参考にして各自で調整するとよいでしょう。

developer.github.com

Nuxt.js で yarn run dev で TypeError: Cannot read property 'eslint' of undefined と言われる場合の対処

以下のように nuxt.js を始めようと思った時に

vue init nuxt-community/starter-template my-project 
cd my-project
yarn
yarn run dev

http://localhost:3000 にアクセスすると以下のようなエラーが表示される

ERROR in ./.nuxt/client.js
Module build failed (from ./node_modules/eslint-loader/index.js):
TypeError: Cannot read property 'eslint' of undefined
    at Object.module.exports (/Users/okamuuu/prj/practice/my-project/node_modules/eslint-loader/index.js:148:18)

どうやら nuxt.config.js の isClient が deprecated として前から警告されており、使用できなくなったようです。

https://github.com/nuxt/nuxt.js/issues/2527

という事で以下のように修正しましょう。

-    extend (config, { isDev, isClient }) {
-      if (isDev && isClient) {
+    extend (config, { isDev }) {
+      if (isDev && process.client) {

めでたし。

岡山城天守閣でライトニングトークして来ました

天守閣でLTした。ただそれを言いたかった。

f:id:okamuuu:20180929213112j:plain

とある pm で開催が発表された

主に八王子で開催される怪しいエンジニアが集まる会があるのですが、そこに参加した日に主催者より「天守閣でテックカンファレンスを開く」と発表がありました。*1

https://connpass.com/event/98976/

connpass.com

というわけで岡山城

f:id:okamuuu:20180930111911j:plain

日程の関係上私は第二部から参戦しました。主催者より「何かを破損させたものは斬る」とのお達しが告げれた後、宴が始まりました。

天守閣にて

f:id:okamuuu:20180930112034j:plain

第二部が始まってからすぐに「最上階で飲まねば!」という事で天守閣での飲酒一番乗りを果たしました。

LT

その後何名か同じ事を考えている人がいたので天守閣で飲んでいたらLTが始まっており、LT を聞き逃してしまったので今回聞いたLTは以下の3つだけ

  • makamaka - せっかくだから俺はこの杓文字2.0で同人誌をつくるぜ
  • codehex - 侍が作る1ボタンキーボード
  • catatsuy - ISUCONの情報共有にはこれ!notify_slack!

makamaka

Acme モジュールの話。Acme::Math::Josan っていう josan(12, 4) を実行すると 3 か 48 が返って来るっていう、乗算なの?除算なの?っていうモジュールや土一揆する時に便利なモジュールなどを紹介。

codehex

電子工作でキーボードを作成する話。モールス信号(2進法)でキーボード作りました!でも家に忘れて来ました!なので急遽徹夜で作りました!動きませんでした!

期待感と勢いのあるトークで最後結局動かなかったというオチまでとてもライトニングトークらしくて聞いててとても楽しかったです。

catatsuy

ISUCON の実力者が使っているツールの紹介。サーバー側で出力される文字列をそのまま slack に流して情報共有したい人には便利。どうやら負荷が高くならないように1秒間に一度だけまとめて Slack API に POST したりだれが操作したコマンドのログなのかが分かるといった便利機能があって良さげ。チームで戦うには情報共有大事ですよねえ。

okamuuu(私)

Contentful という Headless CMS を使ったので感想を述べました。だんだんサーバーサイドでコード書かなくても開発ができる時代が来ている気がします。全く不要というわけにはいかないと思いますが、手を動かす時間が減っていく予感。

https://speakerdeck.com/okamuuu/2018-09-29-dot-okayama

台風襲来したけど楽しかった

そんなわけで翌日台風がやって来るので飛行機や新幹線が無事動いたのかどうなのか定かではないのですが、みなさん無事に帰れるといいですね。

というわけで今回お城を借りて頂いた主催者のお陰で楽しい1日を過ごす事ができました。聞くところによると予約してから開催するまでのやりとりが結構大変だったらしいです。*2

あと岡山城を貸す側も実際に城を貸したら乱暴に扱う人も稀にいるらしく、貸す側も借りる側も結構大変だったと思います。運営してもらった人たちに感謝です。

*1:岡山城天守閣を貸切で利用

*2:基本的に電話かFAX

スポル品川大井の人工的に波を発生させてサーフィンができる citywave を体験してきた

オカムラさん(@okamuuu2014)がシェアした投稿 -

※スタッフさんから許可をもらって撮影しました。

あらすじ

動画を見た瞬間にやりたくなりました。ということで今年の夏もっとも旬なスポーツ施設であるスポル品川大井の citywave で平日の 15:30-16:20 の初級コースのセッションに参加しました。

私はサーフィン経験は無いがすんなり立つ事ができた

私はサーフィンやった事がないのですが、去年ぐらいからスノボを始めていまして、たぶんそのおかげで結構簡単に立ち上がる事ができました。といってもスノボに数回行っただけなので、その程度の人でも簡単にできました。

初級コースは最初コース内に鉄棒を設置するのでそこに摑まりながら波に乗る練習をします。参加者はもう本当に老若男女だったのですが全員手放しで波の上に乗れるようになりました。

その後鉄棒をはずしてコースの端からボードに乗るのですがこれも思った以上に簡単でした。安定した波のおかげでボードに立つのはとても簡単。この時は最大5人までコースに入って練習できます。

そこから少しずつ体を倒したり、向きを変えたりしてコースの端から端まで移動する練習がはじまるのですが、この辺りで個人差があって上手に移動できる人とできない人がいました。この辺りから一人ずつコースに入るので失敗してもだれにもぶつからないから心配ありません。

怖くないのか?

ちなみに初級コースでは全員ヘルメットを装着します。かなり水流があるのでサーフボードから落ちるとかなり体が回転します。慣れない間は鼻に水がはいったり、プール底でやや体を打ちつけると思います。

私は痛いのと苦しいのが嫌なのでしばらく練習したら水流が弱まる場所まで(波が一番高いところ)移動してから後方に倒れる(もしくはそのまま後ろに流される)という技をマスターしたのであんまり嫌な思いしなかったのですが、2名ほどここでリタイヤしていました。たぶん 怖がってしまう -> 水流の強いところでバランスを崩す -> 波にもまれて体を打ったり鼻に水が入って苦しい -> 怖がってしまう の連鎖が生まれてしまったのではないかと思います。肩の力抜ければなんとかなるんでしょうけど。

気分はまるでドラゴンボール

そんなわけではじめてサーフィン*1をしてきたのですが永遠に波が安定しているせいか、とても気持ちがよかったです。きっと筋斗雲に乗るとこんな感じなんじゃないかな。

初級コースは人気があって、今の所あんまり空きが無いのですが、たぶんほとんどの人が1、2回で卒業できると思います。なので空いているうちに初級コースを一度でも体験しておけば次回から中級コースを予約できるので割と空いています。今がチャンスです。

ちなみに動画はセッションの合間にスタッフが波乗りしていたので撮影の許可をもらいました。すっごく楽しそうですね。

そんなわけですっかりお気に入りの遊びになってしまったので終わった後にすぐに次回の予約をいれてしまいました。みなさんも「はやく行った方がいい」と思います。

こちらからは以上です。

*1:海のサーフィンとはまた違うと思いますが

Re:dash を Uninstall したい

以前 MacOSX に Re:dash を install したのですが docker の container が消えない。どうやら restart オプションが作動しているらしい。

% docker container ls
CONTAINER ID        IMAGE                   COMMAND                  CREATED             STATUS              PORTS             
            NAMES
868ecc6330b0        redash/nginx:latest     "nginx -g 'daemon ..."   4 months ago        Up 50 seconds       0.0.0.0:80->80/tcp
, 443/tcp   redash_nginx_1
764aa13baef1        redash/redash:latest    "/app/bin/docker-e..."   4 months ago        Up 50 seconds       0.0.0.0:5000->5000
/tcp        redash_server_1
38e3ee72d655        postgres:9.5.6-alpine   "docker-entrypoint..."   4 months ago        Up 50 seconds       5432/tcp          
            redash_postgres_1
dc7501fbd634        redash/redash:latest    "/app/bin/docker-e..."   4 months ago        Up 50 seconds       5000/tcp          
            redash_worker_1
40d0ce760000        redis:3.0-alpine        "docker-entrypoint..."   4 months ago        Up 50 seconds       6379/tcp          
            redash_redis_1

どうやればいいんだろうということで調べたところ、以下のようにすれば良いらしい。

% docker update --restart=no 868ecc6330b0 764aa13baef1 38e3ee72d655 dc7501fbd634 40d0ce760000
868ecc6330b0
764aa13baef1
38e3ee72d655
dc7501fbd634
40d0ce760000
% docker rm -f `docker ps -a -q`

おしまい

【第3回】JSフレームワーク(またはライブラリ)× ビアバッシュ 初心者勉強会 in秋葉原 に行ってきた

お酒を飲みながらの勉強会、交流会!楽しくフロントエンド開発を語りませんか!と書いてあったので行ってきました。

f:id:okamuuu:20180805002952j:plain

ビアバッシュ とは

ビアバッシュ(Beer Bash)とは、懇親会の一種としてビールやピザを食べながら語らう形のイベントで、シリコンバレーなどでよく開催されてとかいうなんかそんなの。

どうだった?

一応 LT は各自5分間という事だったのですが、しゃべりたい事があればずっと喋っていられるのでその辺は私が東京のはずれによく行く某PMと同じノリかもしれません。会場を抑えている時間がたぶん18時から21時の3時間ぐらいまでだったので結構お酒飲みながら歓談する時間が短くて残念でした。

なので LT 終わった後すぐに目当ての人に話しかけないとすぐにタイムオーバーになると思います。

詳しいタイムスケジュールは以下のような感じです。

https://sakeganaito.connpass.com/event/92540/?utm_campaign=event_reminder&utm_source=notifications&utm_medium=email&utm_content=detail_btn

あとご飯は各自食べていかないとお腹空きます。

LT の内容

  • 既存のレガシーシステムをモダンにするためにしているこ
  • Apolloの紹介とこれから
  • Blazor C# から始める Web フロントフレームワーク
  • 個人サービスをローンチして、本当にあったここだけの話
  • カスタムフィルタを階層化してテンプレートエンジンを使い倒す
  • react-dnd と react-easy-state
  • LTでマサカリに備える盾としての心得

既存のレガシーシステムをモダンにするためにしていること: @comuttun

10年以上の歴史のあるサービスのレガシーな Web Service を一部 SPA 化したお話。常に改修のタスクが発生する為リプレースする人的なリソースはないが試しに局所的に SPA 化したところすんなり適用できた模様。

興味深い話だったのですが Controller と Template Engine の従来のページの一部(参照系)を WebAPI + nuxt.js で適用したという事なのですが、元々あった Controller と Web API の関数は共通化できたのか、それとも別々にメンテする必要があるのか、元々あった Controller は削除したのでその心配はないのか、という質問をしたかったです。

実はLTが矢継ぎ早で質疑応答の時間がなかったのと交流会の時間が短すぎて聞けなかったのが残念です

Apollo の紹介とこれから: @kdnk

GraphQL を実際に使ったお話。たぶんこの話は聞きたい人多かったんじゃないかと思います。この後 GraphQL をお題にして、話したい人たちで GraphQL について語りました。

Tip for OSS: @kuwahara_jsri

npm publisher になるためのお話。ひと昔前は module を公開しないと1人前でないと思ってた時期が自分にもありました。でもそれは決して間違いではないと思うのでそういうメッセージは時折発信してもらうのはありがたいです。

VueJSで工事写真報告ツールをサーバレスで作ったけどだんだん辛くなってherokuに移行した話: @rsooo

サーバレスが流行っているので逆に Heroku に戻る話なのかと思って不思議に思って聞いていました。

最初は画像を雑に S3 に投げ込んでいたがだんだん履歴を追いたいという要望が増えたので機能を増やしたがサーバレスにしなくてもいいじゃないかと思えるようになったので Heroku に移行したとのこと。不慣れなツールを使わなくても良いとし、その都度チームに最適なツールやミドルウェアを選定するほうが賢いなと思いました。

Blazor C# から始める Web フロントフレームワーク

実はこのときトイレに行ってしまい*1話を聞いてなかったです。すいません。

個人サービスをローンチして、本当にあったここだけの話: @Fujiyama_Yuta

個人的に一番印象に残ったトーク。ビンゴゲームを Firebase で作ったそうです。Firebase Realtime Database の特性をうまく活用したナイスアイデアの上にビンゴゲームは地味に用意大変なので結構需要があるのではないかと思っています。

https://the-bingo.jp/

交流会の時間が始まって真っ先に話しかけたのですが、交流会の時間少なすぎてあっという間にお話が終わってしまいました。

カスタムフィルタを階層化してテンプレートエンジンを使い倒す

SPA にするほどの場面でもないのでテンプレートエンジンを使うという話。結構もっともな話だなと思いました。個人的には何をしたいかによって使うツールを使い分けるべきだと思うので SPA がいくら流行っているからといってそれをすると too much になる場面はあるのでこういう昔ながらの作法を聞かせてもらうのは結構大切なんじゃないかなと思います。

react-dnd + react-easy-state: @okamuuu

以前書いた記事(http://okamuuu.hatenablog.com/entry/2018/05/23/231836)をもう一度頭の中で整理して LT してきました。

で、発表したスライドはこちら: https://speakerdeck.com/okamuuu/2018-08-04-dot-js-beer-bash

ざっくり説明すると react で Drag and Drop するときに react-dnd っていう便利なライブラリがあるんだけど結構 state を引き回すのが大変だからそんなときは react-easy-state っていうモジュールの事を思い出すといいですよ。

state を component と切り離して管理するのはもちろん redux などでもできるんですが、そんなに大げさな事したくない時にとっても便利です。

LTでマサカリに備える盾としての心得: @FruitRiin

タイトルのとおり、登壇者にとってはマサカリのような言葉が生まれてしまう、その背景はエンジニアとして正しい情報をみんなで共有したい。まあそんなんですけどねえ。というお話。まあ個人的にはみんなの幸せを守るためならマサカリになっても仕方ないと思うのですが、自己満足なマサカリになってしまったら悲しいですよね。

パネルディスカッション

というわけで LT の中から一つ議題を選んでそれについて興味がある人たちで話し合うのをみんなで生暖かく見守る時間となりました。

GraphQL について話し合ったんですがフロントエンドの人たちは概ね GraphQL を 好意的に捉えていたんですが、サーバーサイドのエンジニアが異議をとなえていました。というか主に私ですが。

Beer Bash ということもあってお酒を飲んでいたため若干記憶が遠のいているのですが「わざわざ GraphQL に変えるコストに見合う成果があるの?」っていうような事を言った気がします。マサカリをなんとかしようというエモい話の直後に思いっきり投げた気がしますけど。

最終的には色々な意見が出てきてなかなか良い着地ができたと個人的には思っています、たぶん。記憶をなんとか回収して別の記事でまとめたいと思います。

まとめ

JS の勉強会に参加したのは初めてだったんですが、想定していたよりも勉強になりました。あとビール飲みながら、だと気楽でいいですね、とはいえ運営がかなり真面目にやっているのでちゃんとしている勉強会でした。また次回も開催されるらしいです。

あとそれから

私はフリーランスのエンジニアで絶賛お仕事募集中です。フロントでもサーバサイドでもAnsible から React まで対応できます。

*1:この会は休憩は各自が適宜にとる方式