2017/10/18

vue2.5でTypeScript統合が改善されthisが推論されるようになったので試してみた

2017年10月13日に、ついにvue 2.5(コードネーム: Level E)がリリースされた。
今回のリリースの目玉はなんといってもTypeScript統合の改善! TypeScriptのアップデートにともない、vueの憎きオブジェクトリテラルの中で、なんと「thisが推論される」ようになったのだ!

vue 2.4以前は、vue-class-componentのデコレータを使いクラスベースで実装しなければならなかったのが、vue 2.5からはvue.jsのAPIのままTypeScriptで開発できるようになった。

vue 2.4以前のTypeScriptでの開発については、以下の記事を参照してほしい。

ということで、今回はvue 2.5を使ってTypeScriptで実装する方法をまとめる。
ついでにvue 2.4から2.5へのアップデート方法もまとめる。

実装するにあたりハマった点があるので、参考になればと思う。

2017/10/17

Canvasに表示したオブジェクトに当たり判定(衝突判定)をつける方法

HTML5 Canvas APIをつかってゲームをつくろうとしている。もちろん自作ゲームエンジンで!
ということで前回Canvas上に表示したオブジェクトをキーボード操作で移動させる方法をまとめた。

今回はその続きで、移動させたオブジェクトが他の何らかのオブジェクトに当たったときの判定(当たり判定、衝突判定)を実装する。


2017/10/12

[Vue.js]imgタグのsrcをバインドして404NotFoundになったときの対処法

Atomic Designの原則を取り入れ開発しており、イメージ用コンポーネントを作っていた。そして親コンポーネントから子コンポーネントに画像ファイルのパスを渡し、動的に画像を表示させたかったのだが、imgタグのsrcに画像ファイルのパスをバインドすると「404 (NotFound)」というエラーになってしまった。

Vue.jsのGitHub上にあるIssueの内容も古く(Vue1.x系)対応できなかったが、いろいろ試したら解消できた。

そこで、対処法をまとめる。

2017/10/05

Canvasに表示したオブジェクトをキーボード操作で移動させる方法

Canvas+JavaScriptでゲームをつくろうとしている。もちろん自作ゲームエンジンで!
その第一歩として、Canvasに表示したオブジェクト(Player)をキーボード操作で移動させる方法をまとめる。



ゲームエンジンの基本は無限ループ


ゲームの基本は無限ループなので、以下のような流れで処理していく。
  1. Canvasをクリアする(白紙に戻す)
  2. キーボード操作などを受け付る
  3. オブジェクトの座標や画像を変更する
  4. Canvasに描画する
  5. 1に戻ってループする

このループをfps30なら1秒間に30回、fps60なら1秒間に60回繰り返す。
ループ内でキーボード操作(keydownkeypresskeyupなど)を取得し、オブジェクトの座標を変更することで、移動させることができる。

2017/10/02

Canvasを用いた9つの画像処理フィルターとそのアルゴリズムの解説

頭の体操のためにCanvasを用いたフィルタリングを学びはじめた。
当記事では、画像フィルターの中でも(独断と偏見で選んだ)代表的な9つの画像処理アルゴリズムを解説する。

  1. グレースケール
  2. 色調反転(ネガポジ変換)
  3. 二値化
  4. ガンマ補正
  5. ブラー(ぼかし)
  6. シャープ化(輪郭強調)
  7. メディアンフィルタ
  8. エンボス
  9. モザイク

たたみ込み演算を知らなくても、理解していただけると思う。

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

2017/08/25

golangでSQLite3を使ってデータベースを操作する方法まとめ

golangでツールをつくるためにデータベースがほしかった。
MySQLやPostgreSQL、SQL Server、Oracleなど多種多様なDBMSがあるのだが、環境構築に消耗したくないということでSQLite3を選択。

小規模、もしくは大規模なサービスをつくるならORMを使うより直接SQLite3を操作したほうが問題が少なくすみそう。
ということで、当記事ではgolangからライブラリなどを使わずSQLite3を操作する方法をまとめる。
※ ただしSQLite3のドライバは使う


環境は以下のとおり

  • Mac OSX
  • go v1.8.3
  • sqlite3 v3.8.5

2017/08/18

[Blogger]SyntaxHighlighterからhighlight.jsに移行しDropboxでホスティングする

当ブログ(Blogger)ではシンタックスハイライトを実現するために、SyntaxHighlighterを使っている。「Blogger シンタックスハイライト」でググるといっぱいでてくるので、多くのBloggerユーザに使われていると思う。

しかし、最近SyntaxHighlighterに不満を覚えてきた。

  • 読み込みファイルが多い
    • v3でダイナミックローディングが実装されたけど詳細は不明
  • httpsにするとシンタックスハイライトされない
  • 長期間メンテナンスされていない
  • 比較的新しい言語がサポートされていない
    • TypeScript
    • Golang
    • など
行番号や行のハイライト、ファイル名の追加など、機能は充実しているだけにもったいない。そこで多くの言語をサポートしているhighlight.jsに移行してみた(執筆時点では順次移行中)


ちなみにCDNで提供されているライブラリはハイライトしてほしい言語が入っていなかったので、自分のDropboxでホスティングする。

2017/08/15

テレワーク・デイで2週間リモートワークして見えてきた課題と期待を共有したい

2017年7月24日〜8月4日、総務省企画のプロジェクト「テレワーク・デイ」が開催されていたのはご存知だろうか?
きたる2020年7月24日は東京オリンピックの開会式。交通機関や道路の混雑をさけるため、始業〜10時半までは一斉にテレワークして混雑緩和に努めましょうという企画だ。

弊社もテレワーク・デイ実施企業になっており、せっかくなのでお盆の帰省も兼ねて7月24日〜8月4日までテレワーク@実家を実施した。

実際に長期間のテレワークを体験したことで課題が見えてきた。今後「多様な働き方が実現する社会」を期待して、体験したことを共有したい。

(弊社では「リモートワーク」という言葉を使っているのだが、企画にあわせて以降「テレワーク」で統一する)

2017/08/08

Go開発環境構築(VSCode, gvm, delve, dep)からHello Worldするまで

仕事でGo言語を使う予定ができたので、本腰を入れて学んでみようと思う。当記事では、私が盛大に躓いたgolangの開発環境構築、戸惑った「しきたり」とHello worldするまでをまとめる。

開発環境・バージョン

  • Mac OSX
  • VSCode 1.14.2
    • 拡張機能: go 0.6.63
  • golang 1.8.3
    • gvmでインストールする
  • gvm 1.0.22
    • golangのバージョン管理ツール
    • Pythonでいうpyenv, Node.jsでいうnvm
  • delve 1.0.0-rc.1
    • デバッグツール
    • VSCodeからgolangを実行するために使う
  • dep 0.2.0
    • パッケージ管理・依存関係管理ツール
    • JavaScriptでいうnpm

2017/08/03

CSSアニメーションでMarqueeを実装し、新幹線車内メディアの電子文字広告を再現する

2000年代のホームページで多用されていたMarquee要素(文字が動くエフェクト)の仕様はすでに廃止されており、いずれブラウザ上で表示できなくなってしまう。
しかし、文字を動かしたい需要はまだ残っている(はず)

代替としてCSSアニメーションをつかったMarqueeの実装方法がある。もちろんJavaScriptは不要だ。
ついでにサンプルで、Marqueeを使った新幹線車内メディアの電子文字広告をつくってみた。

2017/08/01

[Node.js]cheerio-httpcliでスクレイピングしてjQueryライクなDOM操作をする

会社ではジョギングサークルに所属していて、東京体育館周辺で活動している。久しぶりに活動に参加しようと東京体育館に行ったところ休館でロッカーが使えなかった。

結局その日は活動できず、1時間くらい雑談しているなかで「休館日を監視しよう!」という話になり、スクレイピングで休館日一覧を取得できないか考えた。

サーバサイドで動かしたいので、言語はNode.jsを選択。
しかしNode.jsではDOM操作ができない。そこでcheerio-httpcliをつかってjQueryライクなスクレイピングをしようと思う。

2017/07/24

Dockerのコンテナ内でNode.jsアプリを実行し処理結果だけを返す

photo by Daniel Ramirez

Node.jsでツールをつくって公開するとき、または公開されているツールを使うとき、いちいちnodeの実行環境を整え、npmで大量のnode_modulesをインストールしなければならない。
普段からNode.jsの環境を整えている人ならいいけど、ためしに使ってみようかな?と思う層にはハードルがちょっと高い気がする。


ローカル環境を汚さず、もっと簡単に実行できないか?


と考えた結果、Dockerのコンテナに実行環境をつくり、処理結果だけを返してくれるようにすれば便利なんじゃない?と思いついたので当記事で方法を紹介する。

2017/07/20

[Vue.js][CSS3]会話風吹き出しでLINE風チャットアプリをチャチャッとつくる

フロントエンドエンジニアという肩書きになってからもうすぐ2年が経とうとしているのだが、未だに思い通りにCSSを操ることができない。圧倒的CSS力の欠如だ。

CSS力を高めるために、難易度がそれほど高くなく、かつよく使われそうな会話風吹き出しを作って練習しようと思った。でも、それだけじゃ物足りないので、Vue.jsも使って動的なものを作りたい。

当記事では、会話風吹き出しをつかってLINE風チャットアプリのつくり方を解説する。
※ ただし、サーバサイド(WebSocketとかデータベース周り)については触れない

2017/07/19

[JavaScript]DNSのゾーンファイル・JSONを解析して相互変換する[dns-zonefile]

クライアント側でDNSのBIND設定が書かれたゾーンファイルを解析しようと思い、良いライブラリがないかとググったところ dns-zonefile を見つけた。
このライブラリはゾーンファイル→JSON、JSON→ゾーンファイルに変換できる。

ということで、dns-zonefileを使い方を紹介する。
CLIで実行できるが、今回はimportして利用する方法をまとめる。

2017/07/14

シェルスクリプト内でCentOS6.xと7.xのバージョンを判定する

「入門UNIXシェルプログラミング」を読んだこともあり、シェルスクリプト書きたい熱が高まっていた。そこで手始めにサーバの初期設定を行うシェルスクリプト(↓こんな感じ)を書いていた。
この記事では、CentOSのバージョンをユーザに入力してもらっていたのだが、そこも自動化するためにシェルスクリプト内でバージョンの判定できないかな?と思ったのだが、ちょっと躓いたので共有もかねてまとめる。

2017/07/11

Vue.js2.x系でInfinite Scroll(無限スクロール)を実装する


Infinite Scroll(無限スクロール)とは、TwitterやfacebookをはじめとしたSNSやモバイルアプリなどでよく使われている、スクロールすることで自動的に次のコンテンツを読み込む機能だ。
従来のページネーションでは、1ページに表示できるコンテンツが限られたり、「Prev/Next」などのボタンをクリックすることで以降のコンテンツを読み込んだり、モバイルユーザには不便な点が多い。そのため、モバイルデバイスではボタンによる更新よりも無限スクロールのほうが好んで使われている。


ということで、当記事ではVue.js2.x系(サンプルコードはv2.2.1で動作確認)でInfinite Scrollの実装方法をまとめる。

2017/07/06

Vue.jsのMixin機能でViewModelを共通化する

photo by César Astudillo

Vue.jsを開発しているとおのずとViewModel(computedやmethodsなど)が肥大化してしまう。

Vuexを使ってActionsやMutationsに処理を掃き出すこともできるが、小規模アプリケーションだと逆に面倒だ。そもそもVuexは状態管理ライブラリなので、処理の共通化を目的に導入することもおかしな気もする。

jsファイルを作成、importして使うことも考えられるが、@click="method" みたいに直接メソッド名が指定できないので結局ViewModelが肥大化してしまう。

何か良い方法はないかとドキュメントを読んでいたところ、Mixin(ミックスイン)を使うことで解消できるらしい。

ということで、Mixin機能を使ってViewModelをスリムにしようと思う。

2017/07/03

[JavaScript]GitHub風のアイコン(Identicon)を生成しダウンロードする

SNSをはじめ、個人を識別するためにユーザ名とは別にアイコンが使われることが多い。そのなかでもGitHubの初期アイコンのような、機械的に生成したアイコンを「アイデンティコン(Identicon)」と呼ぶ。

JavaScriptでアイデンティコンを生成するツールをつくったので、その説明をする。
具体的な処理は、以下の3つだ。
  • 文字列からハッシュ値を取得する
  • ハッシュ値からアイコン(SVG)を生成する
  • SVGのアイコンをPNGで保存する

2017/06/22

json-serverでREST APIモックサーバを立てテスト駆動開発する

フロントエンドの開発をやっているとAPIはできてないけど実装しなければならない、という状況が少なからずある。そんなときに便利なのがjson-serverというライブラリだ。

GitHubの説明にも「30秒以内にゼロコーディングでREST APIのモックサーバを立てる(いやマジで)」と書かれているとおり、jsonファイルを用意するだけでAPIサーバを立てられるというものだ。

当記事の目標は、json-serverの使い方を覚えて、Node.jsのテスト駆動開発をできるようにする。(もちろんフロントエンドでも使える)

2017/06/20

もう怖くない!Array.prototype.reduceを理解して実践的に使う

Array.prototype.reduceを説明する際、必ずといってよいほど以下のような数字を順に足していくだけのサンプルコードが添えられている。
const total = [0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){
  return previousValue + currentValue;
});

こういうサンプルをみて思うのが、「実際に1〜10の数字を足す場面なんてなくない?」ということ。たしかにreduceが何者なのかは理解できるのだが、実際に使われる場面がイメージできないのだ。

そんな感じでずっと腑に落ちないでいたのだが、HackerNoonの記事(Reduce your fears about Array.reduce())を読んで完全に理解できた!
ということで、自分でも理解を深めるためにreduceの使い方についてまとめる。

2017/06/12

[JavaScript]オブジェクトのすべてのキーをPascalCaseやcamelCase、snake_case、kebab-caseに変換する

JavaScriptやNode.jsでは、変数名やオブジェクトのプロパティをcamelCaseにすることが多い。しかし、APIからのレスポンスはPascalCaseであることが多いため、JavaScript内で使うとres.ExampleFieldのようになり違和感を覚える。

そこで、オブジェクトのすべてのキーをPascalCaseやcamelCase、snake_case、kebabu-caseなどに変換する関数を実装してみた。

2017/05/31

[JavaScript]オブジェクトの無効なプロパティをすべて削除する

とあるツールにJSONを渡すとき、極力ツールのデフォルトの値を使いたかった。しかし、空文字やnull、undefinedなどのプロパティがあるとデフォルト値がうまく設定されなかった。
そのため、オブジェクトに含まれる無効なプロパティ(空文字、null、undefinedなど)など任意の条件でプロパティを削除する関数をつくった。

2017/05/30

ES6のObject.assignがシャローコピーなのでディープコピーする方法を考える

ES6(ES2015)で実装されたObject.assignでディープコピーできると思っていた時期が私にもあった。
Object.assignでディープコピーして(した気になって)、プロパティの値を変更したとき、元のオブジェクトにも影響していることに気づいた。

// Object.assign.js
const obj1 = {
  hoge: 'hoge',
  fuga: {
    foo: 'foo'
  }
};

// ディープコピーのつもり
const obj2 = Object.assign({}, obj1);

obj2.hoge = 'hogehoge';

// obj1.hoge: 'hoge'  obj2.hoge: 'hogehoge' ← ディープコピーされてる?
console.log('obj1.hoge:', obj1.hoge, 'obj2.hoge:', obj2.hoge);


obj2.fuga.foo = 'foofoo';

// obj1.fuga.foo: 'foofoo'  obj2.fuga.foo: 'foofoo' ←?!?! 
console.log('obj1.fuga.foo:', obj1.fuga.foo, 'obj2.fuga.foo:', obj2.fuga.foo);

プリミティブ型はコピーされているのだが、参照型(上記の例ではObject)では参照先がコピーされていた。

2017/05/25

[JavaScript]動的なテキストの幅を取得し、スタイルを適用する

動的に生成されるテキストを、その幅にあわせてスタイルを適用したいときがある。
しかし、文字数による判定では英語や日本語による違い、等幅フォントやプロポーショナルフォントによる違いを考慮しなければならない。
バイト数による判定も、同様の違いや文字コードによる違いがある。

「テキストが表示されたときの幅」を取得し、その「幅」で判定できれば、それが一番正確だろう。
ということで、動的に表示されるテキストの幅(width)を取得し、幅にあわせてスタイルを適用できるようにする。

2017/05/23

Sortable.jsでD&Dしたときに:hoverのスタイルが残るバグの対処法

jQuery不要でドラッグ&ドロップで要素の並べ替えができるSortable.jsを使っていたのだが、Chromeで不可解なバグを見つけてしまったのでその対処法をまとめる。(※詳しくは後述するがSortable.jsのバグではない)

2017/05/22

Karma+mocha+chaiでNode.jsとブラウザで同じコードでテストする

Node.jsでもブラウザでも使えるライブラリを作っているときに、「どちらも同じテストコード(同一ファイル)を使って実行できないかなぁ?」と思い、いろいろ調べた。

Karmaがフロントエンドのテストツールで有名なので、これを使ってみる。
また、テストコードについては使い慣れているmocha+chaiのセットで書く。
(mocha+power-assertとかJasmineとかでもできるけど…)

2017/05/17

ロード中に表示するシマー効果付きスケルトンスクリーンを実装する

ロード中にユーザの離脱を防ぐためには、プログレスバーやスピナーを表示する手法が定番だ。フリーズしているわけではなくて、ちゃんと処理してますよと示すことにより、ユーザのストレスを軽減できる。

4秒未満ならスピナー、それ以上ならプログレスバー。
所要時間がわかるならプログレスバー、わからないならスピナー。

など使い分けもされている。


しかし、ここ1〜2年くらいでプログレスバーやスピナーのかわりに、スケルトンスクリーンを使っているアプリやサービスが増えた。有名どころでは、FacebookやSlack、Mediumなどだ。

今回は、スケルトンスクリーンの実装方法を紹介する。

2017/05/15

[JavaScript]外部URLから画像を読み込んで表示する(+クロスドメインを突破する)

アイコン登録機能があるWebサービスをつくっていた。
基本的な操作方法は、以下のとおり。

  1. アイコン画像を用意する
  2. 画像を選択する(<input type="file">を使う)
  3. 画像を読み込み、エンコードして表示する
  4. base64エンコードした文字列をDBに保存する

これでも必要十分な機能はあるのだが面倒くさい。
できれば画像のURLを指定したら、それを読み込んでほしい。

ということで、「URLから画像を登録」機能を実現するためにいろいろ考えてみた。

2017/05/12

TypeScript + express-openapiでOpenAPI(Swagger)準拠のRESTful APIをつくる

仕事でOpen API(旧Swagger)について調べる機会があった。せっかくなのでNode.jsでOpen APIに準拠したRESTful APIをつくろうと思う。

今回はexpress-openapiというフレームワークを使う。Express.jsを拡張し、スキーマのバリデーションをしてくれたり、コードを管理しやすくしてくれたりする。また、標準でTypeScriptをサポートしているので、チーム開発にも向いている。

使う環境やフレームワークは以下のとおり。

  • Node.js: 6.10.2
  • TypeScript: 2.2.2
  • express: 4.15.2
  • express-openapi: 0.35.0

2017/05/11

ORMをTypeScriptでサクッと実装するならtypeormがオススメ

久しぶりにTypeScriptを書いて型のある喜びを感じていた。そして以前使っていたSequelizeをTypeScriptで使ってみようと思ったのだが、深淵を覗いてしまったようだ。

Sequelizeは高機能で便利なのだが、これをTypeScriptで書こうとするとかなりツライそうだ。実際の使い方は以下の記事を参照ください。


TypeScriptで素直に書けるORMはないかな?と探したところ、typeormを見つけた。

typeormは、MySQLをはじめ、PostgreSQL、MariaDB、SQLite3、MS SQL Server、Oracle、WebSQL databaseと主要なデータベースをカバーしている。
また、ライブラリ自体がTypeScriptで書かれているため、デコレータなどを使ってサクッと実装することができる。

今回は、手っ取り早く試したいのでSQLite3で使ってみる。

2017/05/01

SlackのEmojiアイコンでスロットを作ってCSSスプライトを学ぶ

Googleのトップアイコンや、Twitterのいいねボタンのアイコン、SlackのEmojiなどで、CSSスプライトがつかわれている。複数のアイコンを1枚の画像にすることで、読み込み回数を減らしパフォーマンス向上を図る手法だ。

ということで、CSSスプライトの勉強も兼ねて、SlackのEmoji画像を利用してスロットをつくろうと思う。

2017/04/28

[CSS]背景画像を固定させてスクロールで切り替えるパララックス

背景画像は固定されていて、他の要素(文章とか)だけがスクロールされる。さらにスクロールしていくと、いつの間にか背景画像が変わっている。パララックス(視差効果)を用いたシングルページサイトをよく見かける。

そんなウェブサイトをCSSだけで実現する。

2017/04/18

CSS3 box-shadowを使って画像の輪郭(境界線)をぼかす

ウェブサイトに画像をそのまま貼ると、輪郭(境界線)が強調され浮き出てしまい、変に目立ってしまうことがある。画像の輪郭をぼかせば、「ふわっ」となり背景に馴染む。
ということで、box-shadowプロパティを使って画像の輪郭をぼかす方法をまとめる。

2017/04/14

2017/04/13

CSS3 背景画像だけにガウスぼかしをかける方法

モダンなシングルページレイアウトのウェブサイトで、背景画像をすりガラスのようにぼかしてタイトルを強調させるデザインをよく見る。多くの場合は画像自体にあらかじめフィルタをかけているのだが、CSS3を使うとfilterプロパティを使うだけでblur効果をかけられる。

ただ、ちょっと面倒だったので方法をまとめておく。

2017/04/06

HTML/CSSだけで縦書きの入力フォームをつくる

和風サイトを開発しようと思い立ち、「もちろん“和風”なんだから縦書きでしょ!」と安易な気持ちで始めたのだが、かなり苦労したのでここにまとめておく。

heading(h1タグやh2タグ)やparagraph(pタグ)などの通常のテキストは、writing-modeプロパティにvertical-rlを指定するたけで簡単に縦書きにできる。
しかし、入力フォーム(inputやtextarea、select、button)はwriting-modeプロパティの指定だけでは縦書きにできなかった。

そこで、HTMLとCSSだけで縦書きの入力フォームをつくる方法をまとめる。(かなり脳筋なやり方だけど)

2017/04/05

inputやtextarea、buttonなどにfont-familyやfont-sizeが適用されないときの対処法

ウェブサイトを開発しているとき、なぜかinputタグやbuttonタグにfont-familyやfont-sizeで指定したスタイルが適用されなかった。他にもtextareaタグやselectタグ(ドロップダウンリスト)にも適用されなかった。

調べてみたところ、MDNに答えが載っていた。

2017/03/21

OOCSS、BEM、SMACSS、FLOCSS、RSCSSを比較して自分にあった設計思想をみつける

フロントエンドエンジニアというポジションに就いて1年半、普段はJavaScriptを中心に開発している。しかし、いつまで経ってもCSSを思いどおりに使いこなせない。理由は、どんな粒度でクラスを分割し、それぞれにどんなスタイルを適用すれば良いのかわからないからだ。

以下が、CSSの闇にのまれ、筋肉に解決に糸口を見出そうとした哀れなフロントエンドエンジニアの心の叫びだ。

ということで、よく話題にされる5つのCSS設計を比較し、自分にあった設計思想を見つけようと思う。(CSSは苦手なので、おかしな点があったらご指摘ください)


今回比較するCSS設計思想は以下の5つ。
  • OOCSS
  • BEM
  • SMACSS
  • FLOCSS
  • RSCSS

2017/03/14

SQL Serverで先月、翌月、月初、月末の日付の求め方を解説する

SIer時代のメモを発掘したので、せっかくなので共有のためにここにまとめる。

SQL Serverを使っていて、伝票や請求情報、申請情報などを抽出するときに先月、翌月、月初、月末で検索したいときがある。その方法をなるべくわかりやすく解説する。
@TODAY = '2015/02/27'
-- 先月
SELECT DATEADD(MONTH, -1, @TODAY)

-- 翌月
SELECT DATEADD(MONTH, 1, @TODAY)

-- 月初 → 2015/02/01
SELECT DATEADD(DAY, 1-DATEPART(DAY, @TODAY), @TODAY)

-- 月末
SELECT DATEADD(DAY,-1,DATEADD(MONTH,1,DATEADD(DAY,1-DATEPART(DAY,@TODAY),@TODAY)))

先月と翌月の求め方は簡単で、DATEADD関数を使う。
第1引数がdatepart(YEAR、MONTH、DAY、HOURなど)を指定する。
第2引数が日付に対してどれだけ加算するかを指定する。
第3引数が基準となる日付。今回はTODAYという変数を使っているが、GETDATE関数を使えば今日のシステム日付が取得できる。

2017/03/13

さくらのクラウドのVPCルータを使って学ぶVPN接続の基礎

パブリッククラウドを使うときに一番気になるのが「セキュリティ」だ。私自身、インフラやネットワークについてはド素人なので「とりあえずVPN接続ってやつをすればいいんでしょ?」程度の知識しかない。VPNについてなんとなくわかっているが、どのような仕組みでセキュアな接続ができるか知らない。

ちょうどさくらのクラウドの2万円クーポンが手元にあるので、VPCルータアプライアンスを使って、VPN接続について掘り下げて勉強しようと思う。目標は「VPCルータにVPN接続し、クラウド上のサーバにアクセスする」だ!



VPCルータ とは


VPCルータは、VPC(Virtual Private Cloud)環境を簡単に構築できる仮想ルータアプライアンスです。
VPCルータ | さくらのクラウドニュース

ちょっと何言ってるかわかんないっす。

なので、詳しく調べた。

2017/03/08

【Node.js】amqplibをPromiseベースで利用する方法

RabbitMQのチュートリアルをやっていたとき、非同期処理はすべてcallbackで書かれていてコードがゴチャゴチャしてるな、Promiseとか使えないのかな、node-amqpのほうが良いかな、と感じていた。
が、そんなことはなくamqplibもPromiseベースで利用することができた。

CallbackとPromiseのそれぞれで実装した内容を比較しながら、使い方をまとめる。

2017/03/07

Node.js+RabbitMQでメッセージの送受信をする6(RPC)

仕事でRabbitMQまわりの一部システムを担当することになった。フロントエンド畑の人なので、Node.jsをつかってRabbitMQのチュートリアルをテキトーに和訳し、他で得た知識で補足しながら勉強した内容をまとめていこうと思う。

今回はチュートリアル6「RPC」を学ぶ。



関連記事




今回学ぶこと


  • Remote procedure call(RPC)
  • Callback queue
  • 非同期のCallbackを実行する