IT系ブラック企業で過労死しかけたので4年分のタイムカードと実態を暴露する

突然だが、みなさんは「会社に殺されかけた」ことはあるだろうか？
某居酒屋チェーン店の女性社員、某コンビニエンスストアの店長、某広告代理店の新卒女性社員をはじめ、多くの尊い命が失われたことも記憶に新しいだろう。

そんな私も新氷河期を乗り越え新卒で入社した中堅SI会社で、長期間におよぶ過重労働を強いられ、文字どおりブラック企業に殺されかけた。

当記事では、ブラック企業の実態を知ってもらうため、入社2年目から退職までの4年分のタイムカードを公開しようと思う。当時どんな思いで働いていたのか、体調を崩したのはいつか、精神を病んだのはいつか、などタイムカードをもとに暴露する。今ブラック企業で働いている人や会社を辞めようか悩んでいる人の参考になり、1人でも多くの命が救われることを願っている。


※ 文中に登場する社名やプロジェクト名、人名のイニシャルには、とくに意味はありません。
※ 長文なので時間がない方は、「で、結局どうすればよかったのか？」まで飛ばしてください

【JavaScript】Safariでファイルを強制ダウンロードさせようとしてハマった

フロントエンドを生業としていると、クロスブラウザ対応という悪魔の作業がまっている。現在主に使われているブラウザは、Internet Explorer、MS Edge、Chrome、Firefox、Safariが挙げられる。（Opera? そんなブラウザは知らない）

これらのブラウザでファイルのダウンロードをさせようとすると、Safariでつまずく。IEですらできるのに、Safariだとできない。新しいタブにダウンロードするファイルの内容を表示して、ユーザにコピペさせるという最悪の動作しかできない。そのようにクライアントサイド（JavaScript）だけでファイルをダウンロードさせる方法を試しているうちにSafari沼にハマってしまった。


ということで、試した内容をまとめようと思う。

1. aタグにdownload属性を追加する
2. Content-Typeにapplication/octet-streamを指定する
3. Content-Dispositionを指定する（サーバサイドの実装が必要）

検証環境は以下のとおり。

• macOS Yosemite
• Safari 10.0.2

ソシャゲのガチャみたいなキラキラ星エフェクトをjsとcssで表現する

クリスマスも近いし、雰囲気だけでもとりあえずキラキラさせとけと思い、JavaScriptとCSSだけで星の煌めきみたいなエフェクトを実装した。ライブラリは何も使っておらず、IE11、MS Edge、Fireox、Chrome、Safariで動作確認済みだ。

タイトルにはソシャゲだのガチャだの書いてあるが、実際ソシャゲをやったこともないし、どんなものなのか見たこともない。ガチャなんて幼少期に100円のカードダスをやったくらいしか経験がない。

なので、自分が思うキラキラエフェクトをつくった。
イメージはこんな感じ。

vuex-router-syncを使ってgettersやactions,mutations内からroute情報を取得する

Vuexとvue-routerを共存させて、gettersやactions、mutations内でrouterの情報（パスやクエリパラメータなど）を使いたい場合がある。しかし、実現するにはViewModelからdispatchやcommitの引数にthis.$routeを渡さないとできない。gettersの場合は、そもそもパラメータを受け取ることができないので、route情報を使うことはできない。（グローバル変数でrouteを持つというバッドプラクティスもあるけど…。）

そんなときに便利なのが「vuex-router-sync」というライブラリ。
これを使うとstore.state.routeでroute情報にアクセスすることができる。

ということで、vuex-router-syncを使ったサンプルコードを書いてみた。
記事の最後に、vuex-router-syncの詳細仕様をまとめておく。

Vue.js+Vuex、Express4、Dockerなどを使ってさくらのクラウドのAPIクライアントを作った

この記事は「さくらインターネット Advent Calendar 2016」の6日目の記事です。

---

さくらのクラウドのAPIドキュメントはご存知だろうか？
ドキュメントにはAPIの一覧やパラメータの詳細などが載っている。curlコマンドのサンプルも載っているので、APIを実行することはできるのだが......。


なんかイケてない。


macOSやLinuxを使っている人は問題ないが、Windowsユーザに優しくない。curl？なにそれ？
もっとインタラクティブでダイナミックに動かせるドキュメントだったらいいのに…。


ということで、さくらのクラウドのAPIをブラウザから実行できる「sacloud-api-tester」をつくった。

APIキーを入力し、左のAPIリストから試したいリクエストを選択、実行するだけでリソース操作やレスポンスを確認できる。
※「SwaggerやPostmanを使え」はNGワード

【SVG】Raphael.jsとSnap.svgの比較と実装してみた感想（サンプルコードあり）

JavaScriptでSVGを扱いたくてググったら、Raphaël.jsとSnap.svgというライブラリに出会った。
両者ともDmitry Baranovskiy氏が作成したもので、Snap.svgの方が後発だ。順当にいけばSnap.svgを使うのが良さそうだが、せっかくなので両者を比較した。

まずは両者の特徴。

比較項目	Raphaël.js	Snap.svg
リリース	2009年12月	2013年 10月
最新バージョン	v2.2.7	v0.4.1
更新頻度	定期的に更新されている	2015年4月からほとんどなし
ブラウザサポート	IE6.0+, Firefox3.0+, Safari3.0+, Chrome5.0+, Opera9.5+	IE9.0+, 最新のブラウザ
特徴	レガシーブラウザをサポートしている（VMLが使える）	SVG仕様（マスキングやクリッピング、グラデーションなど）がフルで使える

※ 2016/11/30 現在

次に、実際にサンプルコードを書いて比較する。