Tech Sketch Bucket of Technical Chips by TIS Inc.

Consulクラスタ上で順序制御を行うツール「Metronome」を作ってみた

Pocket

多数のサーバで構成されたシステムというのは一般的になっており、これらを管理・運用するためのソフトウェアも充実してきています。OSSでもHashiCorpのserf, consulといったオーケストレーションツールが公開されており、各サーバの状態を把握したり、ユーザからのイベントや台数の増減に合わせて各サーバで必要な処理を実行したりと、一括しての運用・管理が行えるようになっています。

しかし、これらのツールを使って処理を行う場合、全サーバで並行して処理が行われてしまいます。もちろん独立して処理を行えるサーバであればそれで良いのですが、1つのシステムを構成するサーバ群であるため、中には他サーバの終了を待ってから処理を行いたいなどの、順序制御を行いたい部分も出てくるかと思います。 この記事ではそういった場合に使用できる順序制御ツール「Metronome」について、実際にサーバのセットアップを行いながら見ていきたいと思います。

今日から使えるbash/zshショートカットキー

Pocket

昨今の開発ではLinux上に開発環境を構築することも珍しくなくなりました。こういった環境で作業を行う場合、必然的にbashやzshといったシェルを使うことになるかと思います。今後の開発を加速するためにも、実際の使用例を見ながらショートカットキーを覚えていきましょう。一度覚えれば一生物なので、新しく黒い画面を使うことになった新人の方にもオススメです。

Jasmine/QUnitのテスト中にスクリーンキャプチャするプラグイン

Pocket

JavaScriptに対する自動テストツールも充実し、Jenkinsなどを用いてCIをまわす人も増えてきました。
しかし、レスポンシブレイアウトや、Floatのレイアウト崩れなど、人間が見ればすぐに分かる「見た目」に関する問題は、自動テストによる判定がし辛いのが実情です。
この記事では、この問題を解決するために作成した、テスト中にスクリーンキャプチャを取るためのプラグイン「phantom-capture」を紹介します。

Google Maps APIを利用して花粉飛散データを可視化する

Pocket

特定の場所に紐づいたデータの見せ方を考えるとき、地図というのは有力な選択肢になりえます。
この記事ではGoogle Maps JavaScript API v3を用いて、地図上にデータをプロットし、データを視覚的に分かりやすく表現する例を示します。

Greasemonkey ScriptをChrome Web Storeに公開する

Pocket

過去のGoogle ChromeはFirefox用Greasemonkey Scriptに標準対応していましたが、現在ではセキュリティ上の問題によりWebからのインストールは非対応となっています。この記事ではFirefox用Greasemonkey ScriptをChrome拡張に置き換え、Chrome Web Storeで公開するまでの手順を示します。

AWS Management Consoleのタイトルを変更する拡張機能

Pocket

AWS Management ConsoleのタイトルはEC2, S3といったレベルでしか切り替わらない為に、Instance一覧ページとSecurity Groupのページの見分けがつきません。この問題をGreasemonkey Script/Chrome Extensionを使って解決します。

JavaScriptでバイナリファイルを扱う方法

Pocket

HTML5によって、<audio>や<video>などメディアファイルを扱う機能が拡充され、JavaScriptからも音声ファイルが取り扱えるようになりました。
各ブラウザ毎に対応状況は異なりますが、これらの機能を有効活用するためAjaxリクエストによって音楽のバイナリファイルを取得し、再生するまでのJavaScriptをまとめてみました。

jQuery mobileの動作確認用Bookmarklet for Chrome

Pocket

はじめに

jQuery mobile 使ってますか?

同一ソースでPC用ブラウザからiPhone、Androidまで対応できる便利なフレームワークですが、開発中は基本的にGoogle Chromeを用いて動作確認や画面の確認を行なっています。
スマートフォンの通信・CPUが早くなったとはいえPCには敵いませんし、キーボードから手を離すのも億劫ですから、こうしてGoogle Chromeで確認している人は多いのではないでしょうか。

# 個人的には普段はFirefoxを使っていますが、iPhone/Android向けWebサービスを作る場合には、同じWebkit系ブラウザ(Safari, Chrome, etc.)で動作確認した方が良いように感じます。

画面サイズの問題

さて、Google Chromeで確認する方法は大抵の場合うまくいくのですが、時々「これ、iPhoneの画面サイズで見たらどう見えるの?」と気になることがあります。
もちろんiPhone実機/エミュレータで表示を確認しても良いのですが、手軽にやるのであればChromeのウィンドウサイズを変えてしまうBookmarkletはどうでしょう。
力技ではありますが、それだけに結構有効だったりします。

  • iPhone、標準ブラウザ、上部のアドレスバーが出た状態(320 × 356 px)にChromeのサイズを調整するBookmarklet
  • iPhone、標準ブラウザ、上部のアドレスバーが隠れた状態(320 × 416 px)にChromeのサイズを調整するBookmarklet
  • iPhone、フルスクリーンモード(320 × 460 px)にChromeのサイズを調整するBookmarklet

動的なページを開発している最中はブラウザを更新することが多い為に使いづらいですが、静的ページのレイアウト確認であれば、「Responsive Design Bookmarklet」も便利です。
開発中はこの記事に載せた「Chromeのサイズを調整するBookmarklet」を用い、確認には「Responsive Design Bookmarklet」を使うなど、上手く使い分けていきましょう。

Responsive Design Bookmarklet [http://responsive.victorcoulon.fr/]

使い方

1. Google Chromeで上記のリンクをD&Dしてブックマークバーに登録します
2. サイズを変えたいページでBookmarkletを実行すると、新しいWindowが指定したサイズで立ち上がります

続きには実際に試してみた画像と、iPhoneの各部のサイズを載せておきますので、参考にどうぞ。

Meteorの仕組み(Live page update/Session)

Pocket

Templateの更新タイミング

前回の記事 ではTemplateとしてrooms, input, commentsの3つを用いました。
これらはデータが変更されると画面の表示も自動的に更新されていましたが、今回はその仕組みを追いかけてみたいと思います。

JavaScriptによるDOMの動的生成

Meteorではbodyの中にある要素は全てJavaScriptによって動的生成されます。
chat.html の6行目にはTemplateではなく、静的に見えるh1タグが存在しますが、これも例外ではありません。
meteor run した時点で各プロジェクトのディレクトリに自動生成される .meteor/local/build/app.html を見てみると以下のようになっています。

Meteorを使ったリアルタイムチャットアプリケーション

Pocket

はじめに

デモ動画 が何とも印象的なJavascript Framework 「Meteor」 を使ってシンプルなチャットアプリを作ってみました。
現状ではDBに対して変更を加える際に認証ロジックが存在しないため、実用的なアプリを作ることは難しいですが、DB=ソース=画面表示が常に同期している感覚と、クライアントブラウザからDBを変更しているかのような感覚はなかなか新鮮です。時間の無い人はデモ動画だけでも見てみると 頭を抱えられる 面白いかと思います。
#自分はデモ動画を見た後、頭を抱えてなんだこれ・・・と呟いていました。

Meteorの特徴については綺麗にまとまっている記事があるので、ここで改めて解説はせず、以下の記事に任せたいと思います。

リアルタイムチャットアプリ

さて、Meteorの特徴を掴むためにサンプルアプリを作ってみました。
Meteorの性質を考えるとリアルタイム性が高い物が向いていると思われる為、部屋毎に別れて話し合えるチャットアプリを作り、meteor.com上で公開しています。

Simple Chat: http://simple_chat.meteor.com/

Simple Chatのソースコード: https://github.com/tech-sketch/meteor_chat

複数のブラウザで同じページを開いておくと、1つのブラウザで投稿した内容が、リアルタイムに全ブラウザに反映されるのがわかるかと思います。
また、毎時00分にはサーバ側から部屋Aに対して自動的に時報が配信されます。1時間に1回なのでちょっと確認しづらいですが、部屋Aを表示しておくとサーバ側から配信されたメッセージがリアルタイムに反映されるのが分かるかと思います。

続いてコードを見てみたいと思います。