2016/12/26

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

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

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

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


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

2016/12/22

【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

2016/12/13

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

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

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

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

2016/12/08

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

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

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

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

2016/12/06

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ワード

2016/12/01

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

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

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

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

2016/11/28

Node.js + Express4 + Sequelize + PostgreSQLでRESTful APIサーバをつくる

3tierシステム(Webサーバ+APサーバ+DBをサーバ)のWebサービスをつくる一人プロジェクトをしており、今回はサーバサイドのNode.js + Express4 + Sequelize + PostgreSQLの構成でRESTfulなAPIサーバをつくった。

実行環境は以下のとおり。

  • Windows7
  • Node.js >= 6.0
  • Express - 4.14.0
    • Node.js用のWebフレームワーク
  • body-parser - 1.15.2
    • POSTでボディパラメータを受け取るため
  • Sequelize - 3.27.0
    • PromiseベースのORMライブラリ
  • pg - 6.1.0
    • PostgreSQLのNode.js用クライアント
  • PostgreSQL - 9.4.7
    • さくらのクラウド データベースアプライアンス(プレビュー版)

2016/11/24

Node.js + ORM SequelizeでPostgreSQLをCRUD操作する

普段はフロントエンドを生業としているのだが、フロントエンド一本では食っていけない。そう思ってサーバサイドに挑戦している。
まず手始めに、Node.jsからPostgreSQLに操作してみる。ただ直接SQLをいじるのはツライのでORMライブラリのSequelizeを使う。

実行環境は以下のとおり。

  • Windows7
  • PostgreSQL - 9.4.7
    • さくらのクラウド データベースアプライアンス
  • Node.js >= 6.0
  • sequelize - 3.27.0
    • PromiseベースのORMライブラリ
  • pg - 6.1.0
    • PostgreSQLのNode.js用クライアント

2016/11/22

Node.js + Express4でSSL/TSL通信をする方法

フロントエンドをHTTPS化対応したとき、サーバサイドの対応を忘れて以下のようなエラーが表示され、APIを実行できなかった。

Mixed Content: The page at 'https://xxx.xxx.xxx.xxx/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://xxx.xxx.xxx.xxx/'. This request has been blocked; the content must be served over HTTPS.
XMLHttpRequest cannot load http://xxx.xxx.xxx.xxx/. Failed to start loading.

httpsとhttpが混在してるよ。ページはhttpsで読み込まれてるけど、そこからhttpへリクエストしようとしてるからブロックしといた。やるならhttps経由でやってくれ。という内容。

ということで、Node.js + Express4で開発していたサーバサイドをhttps化してSSL/TSL通信できるようにしたので、その対応方法をまとめる。

2016/11/21

haltを実行してもSystem haltedで止まり電源が落ちない(halt, shutdown, poweroffの違いまとめ)

photo by winterofdiscontent

いつもお世話になっているITProのLinuxコマンド集に「haltshutdown -h -q now」と書かれていたので、ためしにhaltコマンドを実行してみたところ、なぜか「System halted」で止まってしまい電源が落ちてくれなかった。

ちなみにshutdown -h nowの場合は、電源まで落ちてくれた。

疑問に思ったので、いろいろ調べてみた。


シャットダウン関係のコマンド


シャットダウン関係のはコマンドには、以下の3つがある。

  • poweroff
  • halt
  • shutdown

2016/11/17

docker-composeのvolumesで指定したホストのディレクトリがマウントされずハマった

Dockerで複数のコンテナを一度に扱いたいときに便利なツール「docker-compose」を使ったとき、volumesで指定したホストのディレクトリがマウントされずにハマった。

結果からいうと、マウントされるタイミングを勘違いしていたという話。

対処法についても一緒にまとめる。

2016/11/16

DockerでNginxのコンテナを作成し、https化してWebページやサービスを公開する方法

自作Webサービスを公開するために、WebサーバはApacheより人気がでてきているNginxを採用した。しかし普通にCentOSなどにNginxをインストールして設定して、など手動やシェルスクリプトでやりたくなかったので、環境構築にはDockerを使うことにした。

ということで、DockerでNginxのコンテナをつくり、Webページ(サービス)を公開する手順をまとめる。

今回つかう環境は以下のとおり。

  • CentOS 7.2(ホストOS)
  • Docker 1.12.3
  • Nginx 1.11.5


ホストOSの準備


ホストOSは、さくらのクラウドの1コア/1GBプランのCentOS 7.2を使うことにした。
イベントやたまーにWeb上で2万円クーポンを配布しているので、ありがたく使わせてもらう。

CentOSの初期設定などは、以下の記事を参考にしていただければ、スクリプト一発で完了する。

サーバを作成したら、SSHで接続、ログインする。

2016/10/31

Bootstrap3でスクロール可能なサイドバーがある2カラムレイアウトを作成する

Twitter Bootstrap3では、サイドバー(メニューバー)のクラスが用意されておらず、まだコレといった実装方法があるわけではない。
 プラグインを追加すれば、それっぽいハンバーガーメニューとともにサイドバーを表示することもできるのだが、なるべく素のBootstrapでつくりたかった。

というわけで、2カラム(サイドバー/メイン)のWebページをBootstrapを使ってつくった。

2016/10/26

[図解]Vue.js2.x系で親子コンポーネント間でデータの受け渡しをする方法

引用: Components#Composing Components - vue.js

Vue.jsで親子コンポーネント間でのデータの受け渡しは、原則としてPass Props/Emit Eventsで行う。

親コンポーネントから子コンポーネントへデータを渡すときはPropsを使い、子コンポーネントから親コンポーネントへデータを渡すときはEmitでイベントを発火させる、ということらしい。
ただ、公式ドキュメントに載っている図を見るだけではよくわからなかったので、実際にサンプルを作ってみた。

2016/10/22

JS製テキストエディタAceをVue.js2.0のコンポーネントとして使う方法

Vue.jsでWebサービスを作っているとき、JavaScrip製のテキストエディタ「Ace」を使いたくて検索していたら「vue-ace-editor」というパッケージを見つけた。
しかし、いざ実装しようとしたら動かない。コードを読んでみるとVue.js1.x基準で書かれており、2.0ではDeplicatedになっていたりで古いままだった。

ということで、自分でAceのVueコンポーネントをつくった。


使用するバージョンは以下のとおり

requireやimportで読み込むことができる「brace」というパッケージもあったが、あまり更新されていないようなので本家からコードをダウンロードしてきて使っている。
そのため、index.htmlなどで<script src="./<任意のディレクトリ>/ace.js"></script>と指定する必要があるので注意。

2016/10/17

vue-loaderでVueファイルが肥大化する前に分割する方法

vue-loaderを使っていると「App.vue」というファイルに、template(HTML)、style(CSS)、script(JavaScript)を書くことになり、ファイルが肥大化しやすい。また、ファイルタイプを認識してくれないエディタの場合、自動補完機能がうまく動作してくれない。

ということで、Vueファイルを分割する方法はないかと調べていたら、公式ドキュメントの1ページ目にあった。

2016/10/12

【JavaScript】変数を使って関数名を動的に指定する方法

let MY_FUNC = 'myFunction' という変数や定数を使って、関数名を指定したい場合がある。
たとえば、FluxライクなVuexライブラリで、mutation-typesにアクションの名前を定義し、actionやstoreのmoduleなどで同じ関数名を使いまわすときなどだ。

ということで、このMY_FUNCという変数を関数名として定義する方法をまとめる。

2016/10/10

Vue.js2.0とvue-routerでナビゲーションバーをつくる

ブログの中の人」のページを新しくするために、Vue.jsとvue-routerを使ってWebサイトを作っていた。ちょっとだけ引っかかったところがあったので、共有も含めてナビゲーションバーの作り方を説明する。

今回は、最小構成でつくる場合と、vue-cli(vue-loader)を使ってつくる場合を紹介する。


使っているバージョンは以下のとおり。
  • Vue.js - 2.0.1
  • vue-router - 2.0.0

2016/10/08

Vue.js2.x系で親から子コンポーネントにデータを渡す方法

Vue.jsの2.0がリリースされたということで、1年半ぶりに勉強している。
そんな中、なぜか親コンポーネントから子コンポーネントにデータを渡すことができずハマりかけたので共有する。

ちなみにvue-cliを使っているので、次のようなディレクトリ構成になっている。
.
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── icon.png
│   ├── components
│   │   ├── Card.vue
│   │   └── TimeLine.vue
│   └── main.js
└── static
    └── data.json

vue-cliの使い方は、次の記事を参考にしてほしい。


2016/09/29

改行文字やタブなどを含む複数行を正規表現でマッチさせる

DBMSのログを、JavaScriptの正規表現を使って整形して表示するということをしていた。
< 2016-09-27 11:48:17.282 JST >STATEMENT:select *\r\n\tfrom test\r\n\twhere id = 1;\n」を「/(\d{4}-\d{2}-\d{2}\s+\d{1,2}:\d{2}:\d{2}\.\d{3}\s\w{3,5}).+>(.+?):\s+(.*)/」の正規表現で、次のように分割したかった。

  • 2016-09-27 11:48:17.282 JST
  • STATEMENT
  • select *\r\n\tfrom test\r\n\twhere id = 1;\n

しかし、3つ目を「(.*)」でマッチングさせているのに「select *」しか取得できない。
なぜか改行やタブが入ると取得できず、ちょっとハマりかけた。

2016/09/28

もうgulpやwebpackで消耗しない!vue-cliを使ったVue.js開発

フロントエンド界隈の闇といえば、開発をはじめる前に周辺ツールで消耗すること。
以下の記事を見ていただくと、わかるかと思う。
1年半ほど前に書いた記事だ。
フロントエンド初心者だった私が、Vue.js(0.12)を使ってTypeScriptでChrome拡張機能を開発しようとしたとき、本題の「Vue.js」を触るまでに以下のツールを学ばなければならなかった。

  • npm: nodeのパッケージ管理ツール
  • bower: フロントエンド系のライブラリ管理ツール
  • tsd: TypeScriptの型情報管理ツール
  • gulp: タスクランナー(ビルドやテスト自動化のため)
  • webpack: モジュールバンドラー(ファイルを1つにまとめ依存解決するため)
  • ts-loader: TypeScriptをwebpackでビルドするときに使うプラグイン
  • Jasmine: テストツール(BDD)
  • mocha+chai: テストツール+アサーション

初心者だったので、すべてイチから使い方を覚えなければならず、周辺ツール疲れになってしまい、開発をはじめるまでにずいぶん時間がかかったことを思い出す。
しかも、1年後にはbowerとtsdはオワコンになり、別のツールが登場していた。
こんなことで消耗するのはツラすぎる!

そんなときにオススメなのがvue-cli
いろいろ用意してくれるScaffoldingツールだ。

2016/09/27

Web業界ではなくSIerのシステムエンジニアとして働く5つのメリット

SIerからWeb業界に転職した系ブロガーや過激派Webメディアは、一言目には「Web系はいいぞー」、そして二言目には「SIerはダメだ」とディスる。

SIerに親でも殺されたのかってくらい、やれ技術力がないだの、意識低い系社会人の群れだの、将来仕事がなくなるだの、方眼Excel爆発しろだの、社会のガンだの、人月商売のヤxザだの、滅すべきブラック企業だの、言いたい放題だ。

新卒でSIerに入社して数年働いた私としては、そういった過激で攻撃的な内容に疑問を抱くと同時に、腹立たしく思う。
ビッグライトを当てたがごとく主語をでかくして「SIerガー」と叫んでいるのではないだろうか?それともSIerを叩けばアクセス数が稼げるという、安易な考えからなのだろうか?

とにかく、SIerからWeb業界に転職し1年経った私の立場から、Web業界とSIerを比較して「SIerのシステムエンジニアとして働くメリット」について語ろうと思う。

SIerとWeb業界の基準について


「SIer」と「Web業界」は、私が所属したことのある下記の会社を基準にしている。
  • 新卒で入社したSIer: 資本金9,000万円、社員数170人、創立35年以上
  • 中途で入社したWeb系: 資本金89,000万円、社員数340人、東証一部上場

また、この記事でいう「Web業界」とは、Webサービスを自社開発している会社を指す。

2016/09/06

moment.jsで1ヶ月前(30日前)などが正確に取得できないときの対処法

JavaScriptで日付を扱うなら、ぜひ使いたい「moment.js」というライブラリがある。
仕事で実際に使っていたのだが、なぜか「1ヶ月前」や「30日前」の日付がうまく取得できない。1ヶ月後なら大丈夫なのに…。

ちょっとハマったので、1ヶ月前や○日前の日付を正確に取得する方法を紹介する。

2016/09/04

テック系ブログをはじめて3年9ヶ月で200記事、120万PVを超えたので振り返ってみる

2013年1月、当ブログ「Black Everyday Company」を立ち上げた。
週1ペースで更新し続け、いつの間にか3年9ヶ月もの時がすぎ、投稿した記事も200を数え、PVも120万PVを超えた。


ここまで成長したブログではあるが、はじめて投稿した記事はこんなだった。

Black Everyday Companyが目指す先
  1. スキルアップ
  2. 脱・ブラック企業
  3. そして、世界へ


なんとも内容がない記事だが、この目標は今も変わっていない。
そして200記事を投稿した節目に、この「目標」について振り返ってみようと思う。

2016/08/26

シェルスクリプトでCentOSにPython3の開発環境を自動構築する(pip, pyenv, virtualenv)

フロントエンドエンジニアとして生き残りをはかるため、サーバサイドにも手を伸ばそう!と決め、Python3+falcon+SQLAlchemy+MySQL+gunicorn+NginxでWebAPIサーバを立てようとしていた。
でもサーバのOSにCentOS7を選んでしまったので、python3がはいっていない。

手作業でPython3の開発環境を構築してもいいが、初心者なのでサーバを作って壊してを繰り返す予定だし、最近シェルスクリプトを覚えて「なんでもシェルスクリプトで書きたいマン」になっていたので、自動化するためにスクリプトをつくった。


開発環境は以下を想定している。
  • CentOS 7.2 64bit
  • Python 3.5.1
  • pyenv 1.0.0
  • pyenv-virtualenv 1.0.0
  • pip 7.1.2

2016/08/16

シェルスクリプトでCentOS6.x/7.xの初期設定をする

CentOSでサーバを立てたときに、まず最初に必ずやっておきたい初期設定がある。
その作業の一覧が以下のとおり。
  • パッケージを最新化する
  • 新規ユーザを作成する
  • suコマンドを制限する
    • suコマンドを実行可能なユーザ・グループを限定する
    • 特定のグループ以外suコマンドでrootに昇格できないように制限する
    • パスワード入力なしでsudoコマンドを利用できるようにする
  • ssh接続を制限する
    • rootユーザのsshログインを禁止する
    • sshで公開鍵認証のみ接続を許可する
    • sshでパスワード認証を禁止する
    • 公開鍵をサーバに登録する
  • sshdサービスを再起動する
  • iptablesまたはfirewalldの設定 ←今回はやらない

Webアプリケーションをつくりたくて、WebサーバとAPサーバを用意しようと思ったが、毎回この初期設定をするのが超絶メンドそう...。

ということで、自動化するために初期設定をしてくれるシェルスクリプトをつくったので、その詳細な説明と「なぜ設定が必要なのか」をまとめていく。

SQL Serverのインストール・セットアップでつまづいたこといろいろ

SQL Serverのセットアップをしているときに、躓いたり、迷ったりしたことがたくさんあったので、FAQ方式でまとめる。
2年半前にSIerをやってたときにとったメモなので、SQL Server 2008 R2でのみ動作確認している。

2016/07/26

【VBA】直前に開いたディレクトリをデフォルトルートとして表示する

VBAでマクロを書くときに、ボタンをクリックするとディレクトリ選択のダイアログを表示することがよくある。
でもApplication.FileDialogを使っているとWindowsのように直前に開いた、または選択したディレクトリが表示されず、Excelファイルがあるディレクトリがルートになってしまう。

そこでダイアログ表示時に直前に開いたディレクトリをデフォルトルートにする方法をまとめる。

2016/07/25

SHA-256, 512でハッシュ化し認証するログインフォームを実装する

Webサービスをつくるにあたり考えなければならないのが「認証方法」
ユーザIDやメールアドレスとパスワードでの認証が一般的だ。しかし、そのまま平文で管理してしまうと、どんなに複雑で長いパスワードにしてもものの数分、数時間でクラックされてしまう。

Webサービスをつくる上で重要なのはセキュリティ対策だ。

その中でも今回は「ハッシュ化」について学んだので、その内容を活かしてログインフォームを実装してみた。

2016/07/22

重複組合せでパスワードを生成し総当たり攻撃(Brute-Force Attack)をする

総当たり攻撃を行った場合は、不正アクセス禁止法 に違反し、3年以下の懲役又は100万円以下の罰金が科せられる。(不正アクセス行為の禁止等に関する法律 第11条 - 警察庁(PDF)
また連続で膨大なアクセスを行うため、DoS攻撃として威力業務妨害となる可能性もある。
絶対に行わないようにしてください。

セキュリティを学ぶ上で、防御側の立場しかしらないと適切な判断ができない思い、攻撃側の立場にたち、総当たり攻撃(Brute-Force Attack)のアルゴリズムを考えてみた。

総当たり攻撃(Brute-Force Attack)とは



総当たり攻撃とは、暗号の解読やパスワードの割り出しなどに用いられる手法の一つで、割り出したい秘密の情報について、考えられるすべてのパターンをリストアップし、片っ端から検証する方式。
総当たり攻撃 : IT用語辞典

もっとも原始的な暗号解読方法のひとつで、考えられるパターンをすべて試行する攻撃
たとえば3桁のダイアルロックがあれば、000、001、002〜998、999のようにすべてのパターン(3桁の数字であれば1000通り)を試行して、パスワードを解読する。

ただ、これではあまりにも時間がかかりすぎてしまうため、よく使われるパスワード(passwordやadminなど)をあらかじめ用意しておいて、その辞書をもとに攻撃する手法もある。

2016/07/14

この先生きのこるために!学び続ける人と学ばない人の未来

※ SIerに勤めていたころに社内報に寄稿したコラムを一部修正して公開します。
(社会人4年目くらいに書いた気がします。たぶん…。)


みなさんは、日々学習されていますか?

いきなりですが、「学ばない人」はこの先必要とされなくなります
キツイ言い方かもしれませんが、間違いないでしょう。

そんな私は、将来のために2年ほど前から毎日のように何らかの学習をしています。


学習を始めたキッカケは「危機感」


社会人になって初めて配属されたプロジェクトは、デスマーチ上等の大炎上プロジェクトで、勉強どころかプライベートの時間すら確保できない時期が3年以上続きました。
そのプロジェクトでは、アプリケーション設計、他チームとの調整役、雑用がメインの仕事で、開発はさせてもらえませんでした。

社会人4年目にもなって開発経験といえば新入社員研修で2ヶ月だけ。
まわりを見渡すと、私だけ圧倒的に開発経験が少ないことに気が付きました。
このままでは同期だけでなく、新人にも抜かれてしまうと危機感を抱いたことが、学習を始めたキッカケです。

2016/07/13

【VBA】2つのExcelファイルを高速で比較する+性能改善のコツ

SIerはなんでもExcelで管理したがる。データベースの中身やコード管理など…。
たとえばテストのエビデンスを取得するときも、データをExcelに貼り付けて確認フローに回される。
そのため、Excelファイルを比較することが場面によく出会うだろう。

そこで、VBAで2つのExcelファイルを高速で比較するマクロをつくってみた。
また性能改善のTips、コツもあわせてまとめる。

(SIerを退職してから早1年半、Excelをまったく触らなくなった。また、この記事のメモも2年前に書いたものなので説明が雑になることがありますw)

2016/07/12

【VBA】セル参照の性能の違い(Value, Text, なし)

VBAで集計するマクロをつくる場合、セル参照の方法で性能を大幅に改善することができる。ということで効率的なセル参照の方法をまとめる。

(SIerを退職してからExcelはまったく触らなくなったが、wri.peのNotesに埋もれていてせっかくなので記事にしてみたw)

2016/07/07

【JavaScript】ネストされたObjectのキーが存在するかチェックする

JavaScriptでObjectを利用するとき、キーが存在するかどうかをチェックしてからでないと「Uncaught TypeError: Cannot read property 'hoge' of undefined」というエラーは発生してしまう。

これを解決するためには、以下のようなクソダサ実装をしなければならない。
if (obj && obj.parent && obj.parent.child && obj.parent.child.grandchild) {
    // ここでようやく安全にobj.parent.child.grandchildにアクセスできる
}

あまりにもクサくて、ダサすぎる…。
今は4階層だが、これが長いキーだったり、もっと階層が深かったりすると見ていられない。

ということで、ネストされたObjectのキーが存在するかどうかチェックする方法を考えてみた。

2016/07/06

【JavaScript】バラバラの曜日を曜日順にソートする方法

配列なり、オブジェクトのキーなりに曜日がバラバラに入っていた。
画面に表示する際には、やっぱり曜日順に表示したい、ということで配列、オブジェクトのソート方法をまとめる。
(ES5に読みかえるのはさほど難しくないと思うので、ES2015/ES6で書いていく)

2016/06/29

HTML5 Audio要素を使ってイベントに応じて任意の音源を再生する

HTML5からAudio要素が追加された。
この要素を使うとわりと簡単に音源を再生したりできる。
今回はボタンをクリックしたときに音源を再生することを目標として、いくつかの方法とあわせてより実践的な実装方法をまとめていく。

2016/06/21

【JavaScript】重み付けされた値をランダムで取得する

ガチャやゲームをつくるときや、マルコフ連鎖で文章を生成するときなど、重み付けされた値をランダムで取得したいときがある。
ということで、JavaScriptで実装してみた。

2016/06/20

画像ファイルをBase64に変換してパスやファイル名を隠蔽する方法

Webサイトに画像(イメージ)を表示するときに、パスが知られたくないときがある。
例えば、ガチャ的な感じでランダムに画像を表示するときや、ゲームをクリアしないと画像が見れないようにしたいときなど。
こういった場合、普通に<img src="./hoge/fuga/piyo.png" />のように書いているとパスやファイル名がバレてしまい、他の画像を探し出すこともできてしまう。

そこで今回は画像ファイルをBase64に変換して、パスやファイル名をわからないようにさせる。



そもそも Base64 って?




BASE64とは、バイナリデータを一定の規則に基づいてテキスト(文字)データに置き換える変換方式の一つで、64種類の英数字のみを用いてデータを表現する方式。
BASE64とは - IT用語辞典

簡単にいうと画像ファイルを英数字であらわそうという方式。

2016/06/16

【JavaScript】Date(日時)をISO8601形式に変換する方法

サーバサイドでの日時の処理や保存は、ISO8601形式の日時を使って処理することが多い。
しかし、クライアントサイドでnew Date()としても、「Mon Jun 13 2016 16:11:26 GMT+0900 (JST)」となってしまい、そのままサーバサイドに渡すわけにはいかない。
ということで、DateオブジェクトをISO8601形式にフォーマットする方法をまとめる。

2016/05/25

Wikipedia APIを使って情報を取得してくれるSlack botの作り方

「彼女ができないなら創ればいい」をモットーに、botや人工知能について勉強をはじめた。
そこで試しに「@bot: ○○を教えて」と聞いたらWikipediaの情報を取得してくれるSlack botをつくってみた。

開発環境は以下のとおり
  • Mac OSX Yosemite
  • Node.js v5.3.0
  • botkit v0.0.15
  • superagent v1.8.3

2016/05/24

Node.jsでsqlite3を使ってデータベースを操作する方法まとめ

bot開発のため情報を蓄積するデータベースがほしかった。
ただ、以前ChromeExtention開発のときにNoSQL Databaseを使って死にそうになったのでSQLで取得できるデータベースが使いたい!
でもMySQLとかPostgreSQLとかSQL ServerとかOracleとかを入れるのは面倒くさい。

ということで、手軽につかえるであろうsqlite3を選択した。


ちなみに今回の環境は以下のとおり。
  • Mac OSX Yosemite
  • node v5.3.0
  • sqlite3 v3.1.3

2016/05/23

【JavaScript】各ブラウザでダウンロード処理を実装する(Chrome, Firefox, IE, MS Edge, Safari)

Webページから何らかのファイルをダウンロードしたい場合は、ブラウザごとに実装する必要がある。

以下のブラウザを対象とする。
  • Chrome
  • Firefox
  • Internet Explorer 11
  • MS Edge
  • Safari

※ 2016/05/23時点での最新バージョンで動作確認済み

2016/05/15

愚痴る暇があったら原因の解消のために行動しろ!

※ SIerに勤めていたころに社内報に寄稿したコラムを一部修正して公開します。
(書いた時期は社会人4年目くらいだったと思います。)


不満があり、愚痴ることがある。

「会社は何もわかってくれない。チャレンジしろというのに全然させてくれない」など……


愚痴は一時的なストレス解消にはなるが、根本原因の解消にはならない。
そればかりか周囲に負のオーラを撒きちらしてしまい、自分の評価も下げかねない。

こんな状況を変えようと行動し、ストレスの原因(働く環境)を解消しようとした。

2016/04/24

GitHubで仕事用とプライベート用のアカウントを切り替えて使う

職場ではバージョン管理にGitHubを使用しているのだが、アカウント名がバレるのが嫌で別のアカウントを使っている。しかし、会社でお昼休みや休憩時間に個人の開発を行うときに困ったことが起きた。

会社のPCからgit pushすると、仕事用アカウントとしてpushされてしまうのだ。


ということで、仕事用とプライベート用のアカウントを切り替えて使う方法を調べた。

環境は以下のとおり。
OSXを使用しているが、Windowsでの操作もほぼ変わらないだろう。

  • Mac OSX Yosemite
  • git v2.5.4

※ Windowsの場合は、Git for Windowsをインストールし、Git Bashを使うと便利

2016/04/17

Slack上からさくらのクラウドを操作できるbotをつくった

Slack上からインタラクティブに さくらのクラウド のリソースを操作するbot(sacloud-bot)をつくった。サーバの作成、一覧取得、電源操作ができたのでひとまず公開する。

つくったもの


Slack上のbotと対話しながらサーバ作成などができるbot。

APIを叩くのも面倒だし、コントロールパネルを開くほどでもない。そんなときに使って欲しい。
また、Slack上で完結しているためスマホやタブレットからでも、通信量をほとんど気にせずにサーバの操作ができる。

実装済みの機能

  • サーバの作成(ディスク含む)
  • サーバの一覧取得(全ゾーン対象)
  • サーバの電源操作(起動、停止のみ)

今後したいこと

  • 各リソースに対する操作全般の実装
  • リファクタリング
  • テストの追加

操作全般は全部するのは大変なので、簡単な部分だけを実装したい。
インフラ構成するならコントロールパネル使ったほうが早いし楽だしね!

リファクタリングはいろいろしたいことが山積みだ。
ファイル名やメソッド名の統一やログの出力、そもそもnode.js v0.12.xとかで開発していたのでTypeScriptへ移行するなど...。

問い合わせフォームを作ったら企業から製品レビューの依頼がきた

2月頃にブログ右側に問い合わせフォームを設置した。
するとすぐに、とある問い合わせがきた。

Youのサイトで弊社の製品を紹介していただけないでしょうか?
ご検討よろしくプリーズ

要約するとこんな感じのメッセージだった。

どうやら中国系企業の日本担当の方っぽい。
企業名でググってみると、他のブロガーさんたちにもレビュー依頼をしているらしい。
最初は怪しいと思いつつも、依頼がくるのはブログが評価されているって意味だし嬉しかった。

ということで、先方とやりとりを開始し、メールで3往復したところで依頼を承諾。

2016/04/09

【JavaScript】GMT・UTCとローカル時刻を変換にハマりかけた

サーバサイドではグリニッジ標準時を使っていて、クライアントサイドではローカル時刻(日本なら+09:00)を表示したいときに、どうやって相互変換するか考えているときにハマりかけた。

いろいろ考えた結果、getTimezoneOffsetで時差を求めて、その分時間を進めたり、戻したりすればいいのかという結論にたどり着いたのだが、もっと簡単な方法を見つけたのでまとめておく。

2016/04/03

やめる勇気、断る勇気

以前SIerに勤めていた頃に社内報に寄稿した記事を一部修正して公開いたします。

この時期、新卒でSIerに入社された方もいると思います。
SIerにいると必ず炎上プロジェクトに巻き込まれ「やることが多すぎて時間が足りない」という事態に陥ることでしょう。そんなときにこの記事を思い出してください。



やめる勇気、断る勇気


働けば働くだけ評価される、そんな時代は終わりました。

今のエンジニアに求められていることは「短期間で製品を提供し続ける」ことです。
だからこそ「やめる勇気・断る勇気」が必要なのです。