2017/12/12

[Vue.js]contenteditable属性を使って100マス計算アプリをつくる

きっかけは忘れたけどcontenteditable属性というものを知った。
contenteditable="true"を付与した要素を編集可能にする属性で、Dropbox Papercacooなど、主にオンラインエディタ的なサービスでよく使われている。

「contenteditable属性を使った何かをつくる」という目標を掲げて、100マス計算アプリを作ったので、それをサンプルにcontenteditableについて書こうと思う。

2017/12/11

「遊び心を実現する技術」と「リリースする度胸」

さくらインターネット Advent Calendar 2017」の11日目の記事です。


SIerからフロントエンドエンジニアにジョブチェンジして早2年。
主な仕事内容は、さくらのクラウドのネタ機能開発自社サービスのエゴサをすること。

前職とはうってかわって、楽しみながら仕事をしている!

ということで、当記事ではいままでにリリースしてきたネタ機能の紹介と、リリースまでこぎつけた「遊び心を実現する技術」について書こうと思う。

※若干ポエミーですが許してください。

2017/12/06

Quagga.jsを使ってブラウザ上からJavaScriptでバーコードを読み取る

Mac Book Proのインカメラを使ってバーコード(QRコードではない)を読み取れないか考えていたところ、Quagga.jsというライブラリを見つけた。

このライブラリは、画像ファイルだけでなくカメラを使ってリアルタイムでバーコードを読み取ることもできる。

今回はQuagga.jsを使って画像ファイルからバーコードを読み取れるようにする。
※ MBPのカメラだと認識率が悪いのでどうにかしたい。

2017/12/01

Web Audio APIとVue.jsで複数音源をミックスしコードを鳴らす

初期のシンセサイザーは、単音しか発音できなかった。いわゆる管楽器みたいなポジション。なのでコード(和音)を鳴らしたい場合は複数台のシンセサイザーが必要だった。

ということで、今回はコードを鳴らすために複数のオシレーターを使い、それらの音源をミックスして鳴らそうと思う。


OscillatorNodeやGainNodeの詳しい説明は、以下の記事を参照してほしい。


2017/11/28

Web Audio APIとVue.jsでADSRエンベロープ(VCA)をコントロールする

前回までにキーボードをつくったりオシレータをつくったりオシロスコープをつくったりした。
今回は音の三要素の最後の1つ、音量をコントロールする。
エンベロープジェネレータを用い、ADSR(Attack/Decay/Sustain/Release)をコントロールするとともに、エンベロープをグラフ表示する。



ADSRとは?


Attack/Decay/Sustain/Releaseの頭文字をとったもので、音量をコントロールする機能。
  • Attack(立ち上がり)
    • 発音(打鍵)されてから最大音量になるまでの時間
  • Decay(減衰)
    • 最大音量になってからSustainのレベルになるまでの時間
  • Sustain(保持)
    • Decay後の音量。発音中はずっとSustainレベルが保持される
  • Release(余韻)
    • 離鍵されてから音量が0になるまでの時間
この4つのパラメータを弄ることで「ドンッ!!」とか「ほわぁ〜ん」とかいう音を作ることができる。

2017/11/22

Web Audio APIとVue.jsで波形を見るためのオシロスコープをSVGとCanvasでつくる

前回、いろんな音がだせるオシレーターをつくった
音が出せるようになったら、やっぱりどんな波形か見たくなるのが世の常。

ということで、今回はWeb Audio APIとSVG/Canvasをつかってオシロスコープをつくる。
パフォーマンス検証のためSVGとCanvasの双方をつかったが、サンプルが小さかったこともあり違いは見られなかった。(詳細は後述する)

2017/11/21

Web Audio APIとVue.jsでオシレーターをつくる(カスタム波形、正弦波、矩形波、ノコギリ波、三角波)

前回、Web Audio APIとVue.jsでシンプルなシンセサイザーをつくった。ただ「シンプル」ということで正弦波(サイン波)しか鳴らせない。

もっといろんな音を鳴らしたい!

ということで正弦波はもちろん、矩形波、ノコギリ波、三角波、カスタム波形をだせる
オシレーターをつくる。

機能としては以下のとおり。

  • 出す波形を選択できる
    • 正弦波(Sine wave)
    • 矩形波(Squere wave)
    • ノコギリ波(Sawtooth wave)
    • 三角波(Triangle wave)
    • カスタム波形(Custom)
  • 鳴らす周波数を変更できる
  • セント単位で変更できる

2017/11/17

Web Audio APIとVue.jsでシンプルなシンセサイザーをつくる

ブラウザで使えるMinimoogとかいいじゃん!そんなことを思い立ち、Web Audio APIを勉強しはじめた。

今回は、その第一歩として88鍵のキーボードを表示し、クリックしたら音がなるものをつくろうと思う。Vue.jsを使っているのは、要素の生成やイベントハンドリングを楽にするためだ。

2017/11/13

Node.js+Botkit+localtunnelでSlack Interactive Messageを試す

ずいぶん前にSlackにInteractive Messageという機能が追加された。この機能はBotやAppからのリプライにリストやボタンを含めて返すもので、Bot/Appの表現の幅が広がった。

ということで、実際にNode.js+Botkitで試してみようと思う!

ただ、実装しようとググっても、BotkitのExampleを使ってもどうにも動かなくてかなりハマったので、なるべく丁寧に解説しようと思う。


今回使う環境は以下のとおり。
  • Node.js@8.x
  • Botkit@0.6.6
    • Botアプリケーションをつくるためのフレームワーク
  • localtunnel@1.8.3
    • httpsの外部連携(OAuthやリクエストを受け取る)するためにローカル環境を外部に公開するツール
    • HerokuやngrokなどでもOK


2017/11/01

[Vue.js]Vuexを使わずにコンポーネント間のデータやり取り・状態管理する方法3パターン

Vue.jsで小規模なSPAを開発している。Vuexを導入するほどでもなく、Vue.jsの標準機能でコンポーネント間でデータをやりとりする方法がないか考えていた。

親子コンポーネント間についてはProps down/Events upでデータのやりとりができる。
子子コンポーネント間(いわゆる兄弟間)はどうするのが良いのかを3つのパターンを紹介する。

  • $on/$emitでのイベントによるやり取り
  • 親コンポーネントをコントローラにして子コンポーネント間を取り持つ
  • Storeパターンの適用


親子コンポーネント間のデータのやり取りについては、以下の記事を参照してほしい。

2017/10/27

Vue.jsのフォームバリデーションはHTML5 input要素の設定で十分かもしれない

Vue.jsでフォームバリデーションをするとき、以前ならvue-validatorという公式コンポーネントがあった。しかし、vue@2.0のリリースにともない公式から外れてしまった。

そのため、何か良いFormValidatorがないか調べていたのだが、HTML5 input要素のバリデーション用の属性を思い出した。

ということで、HTM5 input要素の設定でフォームバリデーションを行う。

2017/10/26

[Vue.js2.x]ページ番号付きのページネーション(ページナビゲーション)を実装する

2年ほど前に以下のような「Vue.jsでページネーションをつくる」系の記事を書いた。


2年前の記事なのでVue.jsのバージョンもv0.12とかなり古い。
これらの記事を参考にしてくだっている方の中に、バージョンが違うことでハマっている方がいらっしゃった。

ということで、Vue2.x系で書き直す。
動作イメージは以下のとおり。


使用してるバージョンは以下のとおり。
  • vue@2.5.2
  • bootstrap@4.0.0-beta.2(←なくても大丈夫)

2017/10/23

golangでSlack Real Time Messaging APIを使ってメッセージに応答するまで

以前、Node.js+botkitでSlack用botを作成した。
もう一度Slack botを作ってみたい欲が湧いてきたのだが、いつもどおりNode.jsで書いてしまうと他の言語が全然勉強できないので、今回はgolangを使って書いてみた。

この記事では、Slack Appの登録・設定・作成し、ユーザからのメッセージに対して応答するシンプルなbotを作成する。

Slack APIのページが完全に迷いの森で、慣れるまでどこで何が設定できるのかわかならい。そのため、スクリーンショット多めで説明する。

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などだ。

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