2018-01-26

vuexのプラグインのサンプルを書いてみた。

Vue Vuex プラグイン備忘録

動作を見てみたかったので、とてもシンプルなサンプルを書いてみた。
(ほぼほぼ、Vuexの公式ドキュメントに書いてあるものの写経版)
実行までのメモを自分用の備忘録として残しておく。

セットアップは下記。

# install
yarn add vue vuex

# dev install
yarn add --dev babel-cli babel-core babel-preset-env

実行コマンドは下記
あと、babelで変換掛ける必要あり。
(下記の実行コマンドは直接叩いた想定だが、実際はpackage.json内にscriptsととして書いて叩いている。)

# create babelrc
echo '{"presets": ["env"]}' > .babelrc

# execute
node_modules/.bin/babel-node vuex-plugin-sample.js

サンプルのコードは下記(Gist上に残した)

参照

プラグイン | Vuex

2018-01-25

【サガフロ】初期技術で最少戦闘回数クリアに挑戦、が面白い

サガフロンティアゲーム動画

最近こちらの動画をよく見ております。

youtu.be

サガフロンティアは当時遊んでいたゲームなので、純粋に懐かしいし、サウンドとかも今聴いてもやはりいいなと思う。
サウンドトラックもほしいんだよね〜

こちらの動画はいわゆる"しばりプレイ"(という解釈であっているよね？)でゲームを進める動画なのだが、己に課したルール(しばり)を守るために、ゲーム上の仕組みを上手く利用したりして攻略していく様が見ていて実に面白い。また、ここのゲーム裏側の判定ロジックってそういうふうになっていたのか！とか今更ながら驚いたりして、知的好奇心も非常にくすぐられる。
サガフロ、またやりたくなってきた。ブルーやアセルスが好きだったな。

2018-01-21

なるべく時間をかけずに、ローカル環境完結で、画面収録gifを作るときの操作フロー

gif Mac

自分用メモとして残しておく。
なお、このやり方であればローカル環境で完結できるので、ネットワーク環境がなくても出来る。

環境

macOS Sierra

使用するソフト

QuickTime Player (masOS付属)
Gifted (AppStoreでダウンロード)

Gifted

Victor Delgado
ユーティリティ
無料

gif作成のフロー

QuickTime Playerで実際の画面操作を収録する
(収録終了のショートカットはCommand + control + esc)
取った動画で不要な箇所をカットする。
(たいてい、クリップの分割機能を使って、頭をお尻をカットして見栄えを良くする程度)
編集した動画をGiftedに食わせる。
gifの出来上がり
なお、Giftedを使った場合、Picture配下のGifted.app内に保存される。
ふとした時にどこに保存したか分からなくなるので、こちらもメモ)

※いつも、保存した際に開かれるFinder画面で自分の管理しやすい場所に移動させてる。

操作に書ける時間

だいたい５分未満で作れる。
もっと短く出来ればいいのだけど。。。

2018-01-20

Chrome DevToolsでwebsocketの通信内容を見る

WebSocket Chrome

当たり前の話なのかもしれませんが、一瞬迷ったので、自分用メモとして残しておきます。

Chrome DevToolsでWebSocketの通信内容を見るには、Chromeのデベロッパーツールを開いて、"Network" -> "WS"で見れます。

f:id:shinshin86:20180120072920p:plain

2018-01-17

対して面白いことするわけでもないクソ野郎が無駄に完璧主義者な件について

エモ系ポエム Qiita

煽りっぽいタイトルですが、これは自分のことです。

今年入ってから、一番気をつけていることは
完璧主義者になって、なにも行動ができないままに終わること。
それだったら行動してみて失敗したほうがまだマシ。

最近これを意識したことの一つが、Qiitaを始めたことだと思う。
大したコード書いていないのにポスト書くなんて、、、そう思っていた去年の自分をupdate出来てよかったと思う。

ちなみにこんな感じでポストしています。
まだまだ未熟ですが、日々成長していこうと思う。

qiita.com

以上、自分語りでした。

2018-01-15

カチャカチャ、ペチペチ

MacBook Pro 環境構築

TouchBarモデルのMacBook Proが戻ってきました。起こったこととしては下記のポストに書いています。

shinshin86.hateblo.jp

一通りセットアップして、あとはVim周りを微調整するぐらいかなーという感じですが、またしばらく2012年MacBook Pro使っていたせいで、こちらのキーボードにタイピングが最適化されてしまっている。。。
2012はカチャカチャ打てる感じで、TouchBarモデル(2016)はペチペチ系なのですね、ぶっちゃけ2012年でも普通に使える感じではありましたが、ま、少しずつtouch barの方にシフトしていこうと思います。

一応自作セットアップスクリプトがいい感じに活躍してくれたおかげでMac自体の環境構築は片手間に出来ました。
が、スクリプト自体の動作は怪しい感じなので、時間みてコード整えないと思っている今日この頃💦

いつか「このセットアップスクリプト使えば、自分の環境のセットアップは一瞬で終わります。どどどーん！」と行きたいものです。
一応Githubにあげていますが、まだ人様に使ってもらう段階ではありません(スーパーベータ版)

github.com

2018-01-10

TerminalからFinderを開くという発想が今までなかった自分に衝撃が走った５分前

Mac Windows Terminal Linux

そうだよ、こういうのがほしかったんだよ、おれは(井之頭五郎風)

macでTerminal使って作業しているとき、作業しているディレクトリに対してコマンド一発でFinderでも開けたら便利だろうなーと今ふと思って、あれ！？それってたぶん行けるでしょ！と思って調べたらすぐにポストが見つかって、このタイトルを書くに至りました。
(windowsやLinuxでも同様のことが出来るみたいです！)

参考にした記事は下記。

qiita.com

sekika.github.io

実際のmacでのコマンドも載せておきます。せっかくなので５種類ほどのパターンで打ってみた(特に深い意味はない)

# 現在いるディレクトリをFinderで開く
open .

# ホームディレクトリをFinderで開く
open ~

# ルートディレクトリをFinderで開く
open /

# ~/desktopをFinderで開く
open ~/desktop

# ~/.pyenvディレクトリをFinderで開く
open ~/.pyenv

いや～なんでこの発送が今までなかったのか、、、今まで律儀にFinder立ち上げて、Terminalのディレクトリに向かってポチポチ移動させていたわー

Terminalにて、現在のディレクトリ内でatomを開く(追記)

これも一度使い出すと、かなり便利なことに気づいて、最近ちょくちょく使っている。

atom .

at backyard

Color my life with the chaos of trouble.