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を実行する

2017/03/06

2017/03/02

集団の中で生きる人間として各々が過ごしやすい環境をつくる努力をすべし

Photo by DG EMPL

みなさんは満員電車の中でリュックを背負ったままの人、大股を開いたり足を組んだりする人、大音量で音楽を聞く人、大きな声でおしゃべりする人たちを見てどう感じるだろうか?
会議で攻撃的な言葉を吐く人、否定的な意見ばかり言う人、発言しないのに後で愚痴る人、マウンティングしたがる人たちを見てどう感じるだろうか?

そして、張本人たちはどう思っているだろうか?


私は先にあげた人たちが嫌いだ。
なぜなら、他人の善意にあぐらをかいて、自分だけが過ごしやすい環境をつくっているからだ。

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

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

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



関連記事




今回学ぶこと


  • RoutingKeyによるメッセージの振り分け
  • Direct Exchange

2017/02/28

Node.js+RabbitMQでメッセージの送受信をする3(Publish/Subscribe)

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

今回はチュートリアル3「Publish/Subscribe」を学ぶ。



関連記事




今回学ぶこと


  • Publish/Subscribeメッセージモデル
  • Exchange
  • Temporary Queues
  • Binding

2017/02/27

JavaScriptでJSONをRailsのRansack用DSLに変換する

いろいろあってAPIサーバはRails+Ransackなのに、フロントエンドはRailsのビューテンプレートを使わずJavaScript+フレームワークのSPAを開発することがあった。

だから検索条件をAPIに渡すときに、むりやりRansackのDSLに変換しなければならなかった。これがまた不便で、複雑で、ツラすぎるので、なんとか汎用的にできないかとJavaScriptの連想配列をRansackのDSLに変換する方法を考えた。


そもそもRansackとは?


Ruby on Rails用に検索機能を簡単に実装するためのgemで、シンプルでかつ簡単に実装できる。
参考: ransack/GitHub

2017/02/24

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

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

今回はチュートリアル2「Work queues」を学ぶ。



関連記事




今回学ぶこと


  • Work Queues
  • タスクの負荷分散
  • キューとメッセージの永続化

2017/02/22

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

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

今回はチュートリアル1「Hello World!」を学ぶ。



関連記事




今回学ぶこと


  • RabbitMQの導入方法
  • Node.jsの導入方法
  • 基本的なメッセージのやりとり


2017/02/14

CentOS7.3にRabbitMQをインストールしてGUIで管理できるようにする

仕事でRabbitMQを使う機会があった。私自身はフロントエンド畑の人なので、メッセージングシステムの意味はわかるけど使ったことがなかったので、実験用サーバ(CentOS7.3)を用意して勉強してみようと思う。

今後、数回にわけてRabbitMQの基本、インストール、設定、使い方などをブログに書いていく。

今回は、インストール~設定までして、最終的にRabbitMQを使える状態にする。その過程でハマりにハマったので手順として残しておく。



RabbitMQ とは


いきなり「RabbitMQをCentOSにインストールした」と書き出したが、そもそもRabbitMQがなんなのか、どんなときに使われるのか説明する。

RabbitMQはAMQPを使用したメッセージ指向ミドルウェア。処理の命令をいったんキューイングして、逐一実行するためのメッセージングシステムのひとつ。

呼び出し側(Producer)がRabbitMQにメッセージを登録しておく。そして、呼び出される側(Consumer)がそのメッセージを受け取り実行する。このようにメッセージングシステムを間に挟むことで、呼び出し側と呼び出される側を完全に分離することができる。

呼び出し側はメッセージを登録しておくだけなのでレスポンスを待つ必要がなく、また呼び出される側もメッセージをひとつひとつ受け取り実行することで負荷分散ができる。またアプリケーションが万が一落ちたとしてもメッセージは残っているので、再起動後に実行できるなど障害にも強くなる。

※Producer/Consumerと書いたが、一般的にはPublisher/Subscriberという

2017/02/06

【JavaScript】オブジェクトの配列をKeyで集計(グルーピング)する方法

配列内のオブジェクトのキーを使って、抽出したり、集計したり、グルーピングしたいときがある。
// 元データ
[
  { name: 'taro', age: 10 },
  { name: 'jiro', age: 20, email: 'jiro@example.com' },
  { name: 'saburo', age: 30, email: 'saburo@example.com' }  
]

// 欲しいデータ(ユーザごとではなくそれぞれのフィールドでグルーピングしたい)
{
  name: ['taro', 'jiro', 'saburo'],
  age: [10, 20, 30],
  email: ['jiro@example.com', 'saburo@example.com']
}

このようにデータを変換するため、lodash(underscore.js)、ES2015(ES6)、ES5のそれぞれの実装方法をまとめる。

2017/02/01

【JavaScript】配列のシャッフルする(要素をランダムに並び替える)

重複なく、かつランダムな値がほしいときがある。たとえばトランプのカード(1〜13)をランダムに取得したい場合などだ。
そんなときに使える関数を、lodash、ES2015(ES6)、ES5(レガシーブラウザ対応)でそれぞれ実装してみた。

ちなみに今回シャッフルさせるために使ったアルゴリズムは「Fisher-Yatesのシャッフル」という名前がついているらしい。

2017/01/29

ES2015(ES6)の分割代入でCannot set property of undefinedやis not definedというエラーがでる

AとBの値を入れ替えるときに分割代入(Destructuring assignment)構文をつかうと、テンポラリ変数を使わなくてすむ。
ということで、配列の中身をシャッフルする関数で分割代入構文を使ったのだが「Cannot set property 'hoge' of undefined」や、定義したはずの変数が「'hoge' is not defined」というエラーがでてしまった。

いろいろ調べたので結果をまとめる。

2017/01/23

Docker初心者でも安心!Portainerを使ってイメージやコンテナを管理する

初心者にとってDockerのイメージやコンテナをCLIで操作するのは大変だ。覚えるコマンドはたくさんあるし、操作だって手間がかかる。
単純にDockerfileを用意して、イメージつくって、コンテナ立ち上げるくらいなら簡単だが、コンテナの数が増えてくると手に負えない。

そこでPortainerというツールをオススメする。
PortainerはDockerホストをブラウザから操作するための軽量な管理ツールだ。LinuxだけでなくWindowsでもmacOSでも使う使うことができる。
※ Windowsのみ、Portainerが動いているDockerホストを管理することができない

もともとはUI for Docker(a.k.a. DockerUI)だったのが、Portainerに名前を変えて開発が継続されているらしい。

2017/01/22

2016年活動報告と2017年行動指針

2016年はお世話になりました。
2017年もひきつづきダーシノ、当ブログともによろしくお願いします。


2016年のBlack Everyday Company


まずは当ブログについての総括を。

ブログ 71万PV

2016年の1年間で、715,867PVあった。
60記事投稿し、1月には50,562だったPVが12月には87,812PVまで伸びた。しかし、12月はとある記事がバズっただけなので、平常時の11月で考えると62,519PV。1.2万PV/月 分伸びた。

そして、9月時点で200記事を突破した。