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タグで頑張っているみたい

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