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


vue2.5以降でvue-class-componentのデコレータを使わない方法は、以下の記事を参照ください。

2017/09/19

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

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

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


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


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

2017/09/14

[Vue.js]Callback vs Emit Events / 子コンポーネントから親のメソッドを実行する方法

Vue.jsにおける親子コンポーネント間でのデータの受け渡しの基本は、Pass Props / Emit Eventsである。親から子へはPropsでデータを渡し、子から親へはEmitでデータを渡す。

そんな面倒なことするより親コンポーネントから子コンポーネントにコールバック関数を渡して、なんらかのイベントが発生したらコールバックを実行してくれたほうがシンプルになるんじゃ?と思いついた。


ということで、CallbackEmit Eventsについて調べたので、両方の実装方法とどちらが良いのかをまとめる。

※ 以降、Callbackをコールバック方式、Emit Eventsをイベント方式と呼ぶ


親子コンポーネント間のデータの受け渡し(Pass Props/Emit Events)については、以下の記事を参照してほしい。

2017/09/13

[HTML5]Canvasを使って画像をトリミングする方法まとめ

Photo by Judy

CSSスプライトのようにbackground-positionで表示位置を調整して疑似トリミングを実現することもできるが、今回はHTML5のCanvasを使ってトリミングする方法をまとめる。

CSSスプライトについては、以下の記事を参照ください。


2017/09/04

GolangでDocker Remote APIを使ってDockerfileからイメージ作成する方法

photo by Daniel Ramirez

golangからDocker Remote APIを使ってイメージ・コンテナを操作する方法を覚えたので、次はDockerfileからイメージを作成し、実行する方法を学んだ。

Docker Remote APIの基本的な使い方は以下の記事を参照ください。


かなりハマったので、皆さんの助けになればと思う。

環境は以下のとおり。

  • Mac OSX
  • go 1.8.3
  • Docker for Mac 17.6.1-ce

2017/09/01

golangからDocker Remote APIを使ってイメージ・コンテナを操作する方法まとめ

photo by Daniel Ramirez

プログラムからDockerのイメージやコンテナの操作をして、必要に応じてコンテナを起動したり停止したりというサービスをつくろうとしていた。
いろいろ調べたので、Go言語(以下、Golangと呼ぶ)からDockerのイメージやコンテナの操作をする方法をまとめる。

Dockerはコンテナ仮想化ツールで、Golangで開発されている。
そのため、Docker Engineのクライアント(moby/client)をそのままGolangで使える。
※ Dockerの詳しい説明は省略する

今回はMobyを使ってイメージの作成・削除、コンテナの起動・停止を行う。


環境は以下のとおり。
  • Mac OSX
  • go 1.8.3
  • Docker for Mac 17.6.1-ce