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

photo by Daniel Ramirez

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


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


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

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

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

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

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

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

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

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

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

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

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

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


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

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をスリムにしようと思う。

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

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

JavaScriptでアイデンティコンを生成するツールをつくったので、その説明をする。
具体的な処理は、以下の3つだ。

• 文字列からハッシュ値を取得する
• ハッシュ値からアイコン（SVG）を生成する
• SVGのアイコンをPNGで保存する