2017/09/25

栄養不足解消のためランチを完全食COMPにかえて1ヶ月たった感想

昼食を完全食COMPにかえて1ヶ月たったので、経緯や感想を綴ろうと思う。
完全食COMPパウダー、グミだけでなく、Natural Healthy Standard.、SAVASホエイプロテインとの組み合わせについても書く。



栄養がほしい。
バランスのとれた食事がしたい。
結婚したい。

IT業界に従事するエンジニアたちの多くは、このような悩みを抱えながら不健康な生活を送っている。
私もその中の1人だ。



ランチ問題を改善したい


不健康な生活の要因には、長時間労働や精神的ストレスの他に「食事」がある。
IT業界に身を置く人は基本非モテで独身なので不摂生な人が多い。

私の場合は、会社にいるときの「昼食」に問題があった。
ランチメイト症候群、昼休みの時間、栄養バランス……。

意識が高かったころは、毎日手作りお弁当を持参していた。
ランチに出かけたり、社内販売のお弁当を買ったりしていた。

しかし、栄養バランスとはかけ離れた食事しかとれない。


この問題を解決するために、完全食COMPの購入を決意した。

2017/09/21

vue-cliを使ってとにかく楽してVue.jsでTypeScriptを使いたい

2年以上前にVue.jsでTypeScriptを使ってChrome拡張機能をつくった経験がある。
フロントエンドについて学びはじめた頃なのでTypeScriptはv1.4、Vue.jsはv0.11とかそんな時代。当時、相当苦労した思い出がある。

今では、Vue.jsも公式で型定義を提供している。TypeScriptのサポートも手厚くなり、型のある環境での開発が楽になっているらしいが……。
  • gulp書きたくない
  • webpack触りたくない
  • *-loaderの設定したくない
  • その他細かな設定をしたくない


だから、とにかく楽したい!!!


かといって、いわゆるget startedのような最小構成にはしたくない。

ということで、vue-cliのwebpackテンプレートをベースに、とにかく楽してVue.jsプロジェクトでTypeScriptを使えるようにする。

環境は以下のとおり。
  • Mac OSX
  • npm v5.3.0
  • vue-cli v2.8.2
  • vue.js v2.4.2
  • typescript v2.4.2

2017/09/19

[HTML5]Canvasで画像をズームイン・アウト、ドラッグで移動させる方法

Twitterのアイコン・ヘッダー画像のアップロード機能のように、画像を読み込み、ブラウザ上で簡単な編集・トリミング加工し、画像ファイルとして出力したい。

いろいろ調べてみると、HTML5のCanvasを使えばできることがわかった。
ということで、Canvasで画像のズームイン・アウト(拡大縮小)、トリミング(切り取り)する方法をまとめる。


↓こんな感じのを実装する。


※ ちなみにTwitterのアップロード機能はCanvasは使われておらず、imgタグで頑張っているみたい