サーバサイドとの通信を行うWebアプリケーションの場合、Ajax/JSONPを介してデータの授受を行うと思います。それに対してローカルに全てのデータがある場合、それらを変数に入れて処理するというのが多いのではないでしょうか。 そんなWebアプリケーションの組み立て方を変えてくれるかも知れないフレームワークがLocal.jsです。ローカルでもAjaxを使ってデータ取得を行えるようになります。 ローカルでAjax！ Local.jsの使い方 例えばこんな感じのコードになります。 local.addServer('hello-world', function(req, res) { res.writeHead(200, 'OK'); res.end('Hello, world!'); }); local.GET('httpl://hello-world') .then(function(res)

こんにちは、ムックです。 今回は、php、morris.jsを使ってSQLの結果を簡単にグラフ表示してみたいと思います。 背景：統計データをグラフに表示したい とあるソーシャルゲームの統計データをグラフ表示させたい。 例えば、各ガチャ回転数 実装方法 具体的な実装方法は以下の3つになります。 1.SQLの作成 2.結果をJSONに変換 3.morris.jsを使って任意のグラフを作成 １．SQLの作成 今回は単純に以下の様なログテーブルがあるとします。 [sourcecode lang="sql"] mysql> show create table log_gacha\G *************************** 1. row *************************** Table: log_gacha Create Table: CREATE TABLE

自動というのがいいですよね！ レスポンシブWebデザインは一つのHTMLコードで複数のウィンドウサイズに対応できる便利な技術ですが、幅が変更されることで予定外の表示になることがあります。単純にデザインが統一化されるだけでなく、それぞれに合わせたテクニックが必要です。 今回はツールチップに注目したライブラリ、Offscreen.jsを紹介します。ウィンドウ幅を読み込んで表示位置を調整してくれます。 Offscreen.jsの使い方 HTMLは次のように記述します。 $( document ).ready(function() { $('.tooltip__content').offscreen({ smartResize: true, rightClass: 'right-edge', leftClass: 'left-edge' }); }); smartResize を trueにすると

レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。 【追記　2014.03.19】 元々のタイトルは「レスポンシブWebデザインに対応した横メニューの作り方」でしたが、よく考えるとスマホ対応になったら縦メニューになりますのでタイトルを変更しました。 id名「toggle」の部分は横幅が480px以下の場合に表示するボタンです。481px以上の場合表示させません。その他はごく普通の横メニューです。 CSS 続いてCSSです。まずは全体を載せます。 #menu{ width: 100%; max-width: 960px; margin: 0 auto; padding: 0; } #menu li{ display: block; float: left; width: 12.5%; margin: 0; paddi