HTTP負荷テストをしよう·Vegeta MOONGIFT
VegetaはGo製のオープンソース・ソフトウェア（MIT License）です。 HTTPの負荷テストツールは幾つかありますが、今回は最も新鋭と思われるVegetaを紹介します。コマンドラインで動作するのでインストールも簡単ですぐに使い始められます。 オプションです。基本的にはアクセス先のURLをファイルに記述するのみです。 実行例。デフォルトで10秒間に500リクエスト行います。 アクセス先のURL指定はメソッドとURLを指定します。GETはもちろんPOSTやHEADアクセスによる負荷も計測可能です。レポートはテキストの他、SVGでの出力もできます。VegetaはGoで作られており、Goのプログラム中でライブラリとして呼び出して使うこともできます。 MOONGIFTはこう見る WebサービスがメディアであればGETリクエストが最も多くなります。コミュニティサービスであればGETはもちろ
フォームの入力をもっと快適にする·jq-idealforms MOONGIFT
jq-idealformsはjQuery/JavaScript製、GPL/MIT Licenseのオープンソース・ソフトウェアです。 Webサイトでフォーム入力を行う機会はとても多いです。だからこそ変な作りのフォームでは入力途中で嫌になってしまって閲覧者が逃げてしまいます。そんな勿体ない取りこぼしのようにできるフォームがjq-idealformsです。 レスポンシブWebデザインなフォームです。入力時にリアルタイムチェックしてくれます。 OKだと青くなります。 カレンダーは選択式です。 チェックボックスなどのデザインがカスタマイズされています。 ドロップダウンも色がついています。 jq-idealformsではステップごとに表示を分けたり、キーボードの入力をリアルタイムにサポートしていたりと便利な機能がたくさんついています。ブラウザはIE8以降の他メジャーなブラウザに対応し、Android
ソートやフィルタにも対応したレスポンシブなテーブル·FooTable MOONGIFT
FooTableはレスポンシブなテーブルデザインを行うライブラリです。 レスポンシブWebデザインにおける最大の難関はテーブルかも知れません。PCならば幅広く表示できたカラムがスマートフォンではうまく表示しきれません。そこで使い勝手を維持しつつ見栄えもいいテーブル表示にFooTableを使ってみましょう。 PCで表示したテーブル。 スマートフォン向けに縮めた場合。+記号が表示されています。 +記号をクリックすると、追加情報が表示されます。 HTMLを組み合わせた行。 こちらでもスマートフォンで表示できます。 タブレットでも調整されて表示されます。 ソート機能版。 もちろんスマートフォンでもソートが使えます。 フィルタリング。インクリメンタルに適用されます。 PCでももちろん使えます。 ソートとフィルタリングは同時に使えます。 FooTableを使う際にはタブレットやスマートフォンで表示する
JavaScriptを使ったリアルタイムA/Bテスト·Abba MOONGIFT
AbbaはJavaScriptを使ったUIのA/Bテストを行うソフトウェアです。 Webサイトの良いところは変更コストがとても小さい所にあると思っています。ちょっとしたテストを行うのが簡単で、戻すのもそれほど難しくありません。そこでWeb上でA/Bテストを行う際に遣ってみて欲しいのがAbbaです。 管理画面です。この右側に出ているコードを実行することでA/Bテストを行えます。 測定結果はリアルタイムに反映されます。 Aの方が反応が良いといった結果が簡単に分かります。 Abbaの仕組みとしては、A/BそれぞれについてJavaScriptを実行します。例えばボタンの配置を変えたり、CSSのクラスを変えて見た目を変更できます。そしてその結果クリックなどのイベント対してテストが完了したというアクションを実行する仕組みです。 AbbaはRuby製、MIT Licenseのオープンソース・ソフトウェア
これはいい！ドロップダウンに画像と説明文を追加·ddSlick MOONGIFT
ddSlickはドロップダウンメニューにアイコン、説明文を追加できるjQueryライブラリです。 常々HTMLのコンポーネントは貧弱だと思っていた。特にドロップダウンの使い勝手の悪さったらない。テキストしか表示できず、情報選択のUIとしてあまりに粗雑ではなかろうか。そしてみんなが望んでいたライブラリが登場した。それがddSlickだ！ 見よ、この格好いいドロップダウン！テキストに加えて画像が表示できるようになっています！ ダイナミックに変更も可能です。まず普通のドロップダウン。実にいけてない。 じゃじゃーん！ もちろん普通のドロップダウンライクに値が取得できます。選択した項目のデータも取れます。 外部から値を与えて表示項目を変更することもできます。 コールバック対応！ デフォルトの選択もできます。 画像を右に寄せられます。 さらに説明をつけて行ごとに高さを可変にもできます。 画像がない場合
こんな手が…。Dropbox上で動的システムを動かす「Drapache」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
DrapacheはDropbox内のファイルを読み込んで動的に動かすWebサーバです。 DropboxではPublicに入れたファイルをHTTPを通じて読み込めるようにしています。この機能を使って静的なWebサイトを提供している人もいます。しかしそれで十分ではありません。時代は動的システム、Dropbox内のファイルを動的システムに対応させるソフトウェアがDrapacheです。 まずドメインを取ります。 次にDropboxをコネクトします。 接続を許可します。 完了です。そうするとアプリフォルダの中にDrapacheフォルダができあがります。 ファイル構成はこんな感じです。 サンプルのスクリプトです。確かに動的ファイルが動いています。 動的です。もちろん修正すれば若干のタイムラグはあれど反映されます。 Drapacheの仕組みとしては登録したユーザのデータを読み込み、DrapacheがWe
1行のコードで既存のテーブルにソート機能を追加·Table Sorting MOONGIFT
Table Sortingは既存のHTMLテーブルにソート機能を追加するJavaScriptライブラリです。 業務システムなどでテーブルを表示すると常に足らない機能を求められます。その第一が並べ替え機能でしょう。DBを操作しても良いですが、もっと単純に解決したいならTable Sortingを使ってみても良さそうです。 デモです。 カラムのクリックでソートが実行されます。 金額部分もきちんとソートされます。 JavaScriptのコードです。単純にクラスを指定するだけ。 HTMLのコードです。数値部分にも特に設定を行っていないところに注目。 Table Sortingは既存のテーブルを渡すだけで自動的にソート機能を追加してくれます。オブジェクトの型も判断して並び替えてくれるので手間いらずです。 Table SortingはJavaScript製、GPL v3のオープンソース・ソフトウェアで
試そう！Windowsのフォントを奇麗に·MacType MOONGIFT
MacTypeはWindowsのフォントを滑らかにして奇麗なフォントを表示してくれるソフトウェアです。 Windowsにおいてフォントを滑らかに表示するソフトウェアとしてGDI++が知られていますが、2010年のリリース以降あまり積極的に開発が行われていません。そこで立ち上がったのが後継プロジェクトと言えるMacTypeです。 インストーラーを使います。その際の言語は中国語になっています。 起動しましたメイン画面では日本語が表示されています。 モードを選んだ後、プロファイルを選択します。 確認ダイアログが出ます。OKで開始します。 エクスプローラの表示。反映は即行われます。 Firefoxの表示。メニューからレンダリング結果まで全て滑らかな表示になっています。 タスクトレイのメニュー。 プロセス単位の状態も見られます。 MacTypeはレジストリモード、サービスモード、トレイモードの3つが
小規模なWebサイトにぴったり。PHP製のメールフォーム·TransmitMail MOONGIFT
TransmitMailは日本製の汎用型メールフォールソフトウェアです。 Webサイトにメールフォームの設置というのはよくあることです。そんな時に使える日本語対応のメールフォームソフトウェアがTransmitMailです。 デモです。多数の入力項目、入力チェックに対応しています。 必須チェックのエラーです。画面上と項目の横と二つ表示されます。 メールアドレスフォーマットのチェックもできます。 半角英数などの文字種チェックもあります。 入力の後、確認画面が表示されます。 完了ページです。 確認メールも送信されて、入力内容の確認ができます。 TransmitMailはPHP5.2以上で動作します。また、マークアップエンジニアが開発したとのことで、Dreamweaverやマークアップエンジニアにとって優しい作りになっています。セッションによって重複送信を防ぐ仕組みがあります。静的サイトにメールフ
リアルタイム描画に対応したJavaScriptテンプレートエンジン·Tmpltr MOONGIFT
TmpltrはHTML/JSON/CSSを組み合わせたJavaScriptのテンプレートエンジンです。 Webアプリケーションを作る際にテンプレートエンジンとしてチェックしたいのがTmpltrです。HTMLだけでなく、スタイルシートにも考慮されているのが特徴です。 左上がJSON、中央がHTMLテンプレート、下がCSSになります。それらを組み合わせた結果が右側の表示になります。 フッターです。{{#fotter}}〜{{/footer}}といった区切りを設けています。 スタイルや構造を変更すればリアルタイムに右側のコンテンツが変更されます。 スタイルの内容はheaderタグの中にstyleとして出力されています。 Tmpltrは単純な文字列出力の他、配列やハッシュでの表示にも対応しています。元データの内容が書き変わると同時にレンダリング結果がリアルタイムに修正されるのが特徴です。 Tmpl
無茶しやがる…JavaScriptだけでZipファイルを生成、ダウンロード·JSZip MOONGIFT
JSZipはWebブラウザ上、クライアントサイドだけでJavaScriptを使ってZipファイルを生成するソフトウェアです。 JavaScriptでできることがどんどん増えています。そんな中、注目したいのがJSZipです。なんとJavaScriptだけでZipファイルを作ってしまうというとんでもないソフトウェアです。 デモページです。コードを見て分かる通り、テキストファイルと画像をZip圧縮しています。 実際ダウンロードされたZipファイルを解凍すると確かにフォルダやファイルが入っています。テキストの内容を変えればダウンロードされたファイルの中身も変わっていました。 JSZipが面白いのは動的にZipファイルを作成できることではないでしょうか。ユーザにコンテンツをダウンロードさせたいという時にその場の内容をそのまま圧縮して送れるようになります。アイディア次第で色々な使い方ができそうなソフト
アイディア次第で使い道色々。フリック入力対応のギャラリーライブラリ·flickGal MOONGIFT
flickGalはiOSのフリック操作に対応したギャラリーライブラリです。デスクトップ向けWebブラウザでも表示できます。 Webサイトにフリック操作で画像を切り替えられるギャラリー機能を追加したいと思ったらflickGalを使ってみましょう。jQueryプラグインで手軽に導入できます。 フリック操作なので主にiOS向けです。でもSafariやGoogle ChromeなどのデスクトップWebブラウザも問題なく利用できます。 写真の切り替えはタブをクリックする他、フリック操作でも大丈夫です。 フリック操作でアニメーションしながら写真が切り替わります。 大きな画像を表示している場合です。prev/nextのリンクでも写真を切り替えられるようになっています。 Yahoo! Japanのトップページにあるのに似た表示形式です。写真だけではなくアイコンを並べて機能を選択するといった使い方も考えられ
Web上でヒートマップを簡単に実現するHTML5/JavaScriptライブラリ「heatmap.js」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
heatmap.jsはWebベースのヒートマップ表示ライブラリ。 heatmap.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。グラフには様々な種類があるが、とりわけ作るのが難しそうなグラフにヒートマップがある。一定の範囲における影響度を表現したり、ユーザの動きを可視化するのに使われたりする。 デモ 動線を可視化することによってサイトの流れを変えたり、店の商品配置を変えるデータにもなりえる。そんなヒートマップを表示するためのライブラリがheatmap.jsだ。 heatmap.jsはWebブラウザ上で指定した範囲（画像など）の上にヒートマップを表示するライブラリだ。マウスの動きに合わせたり、クリックでヒートマップデータを作ることが出来る。クリック場所をトラッキングしておけば、元データを集積することができるだろう。 地図との組み合わせ 画像だけでなく、地図の上にレイ
Google Analyticsの解析をパワーアップする·gaAddons MOONGIFT
gaAddonsはJavaScript製のオープンソース・ソフトウェア。自社または個人のWebサイトの解析にGoogle Analyticsを使っている人は多いだろう。標準のままでもWebサイトを運営するのに十分なデータが収集できるので、より良いサイトを目指すのに便利なツールだ。 埋め込むコード しかしAnalyticsのコードが埋め込めないような場所に対しては解析が難しいのが事実だ。例えばダウンロードサイトで、Zipファイルがどれくらいダウンロードされたかなどという測定は難しい。そこで使ってみたいのがgaAddonsだ。 gaAddonsは主に二つの機能をGoogle Analyticsに追加する。一つは外部流出の際にどのリンクへ行ったかが検知できるようになる。各外部リンクに対してoutboundというイベントが追加される。そして二番目にダウンロードの検出だ。デフォルトでオフィス系ファイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
