○ Mithril A Javascript Framework for Building Brilliant Applications Guide Download v0.1 Light-weight Only 3kb gzipped, no dependencies Small API, small learning curve
サーバサイドとの通信を行う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を使って任意のグラフを作成 1.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にすると
http://blog.angularjs.org/2014/03/angular-20.html 1 comment | 0 points | by noto ■ comment by noto | 約1時間前 クライアントサイドの JavaScript フレームワークである AngularJS の公式ブログで Angular 2.0 の実装が始まったことがアナウンスされ、設計に関しての考え方、なぜ変更しようとしているか、詳細な変更点などについて述べてられています。Angular のもともと持っている特徴もおさえつつ説明されているので、Angular の復習にも良さそうです。 Angular 2 は mobile apps のためのフレームワーク (デスクトップにも利用できる)。data-binding、extensible (拡張可能な) HTML、テストのしやすさの重視については変
HTML5でもXHTMLのどちらでもvalidなHTMLで、a要素にclassを加えるだけでリンクを別窓で開いたり、モーダルウインドウを表示したり、通知パネルを表示したり、ページ内アンカーへアニメーションでスクロールさせたり、ページの印刷ボタンとして機能したりなど、a要素にさまざまな機能を加えるjQueryのプラグインを紹介します。 デモページ デモでは、a要素をトリガーとするさまざまな機能がclassで設定できます。対応している機能は以下のようにたくさんあります。 リンクを別窓(タブ)で開く リンクを開く前に確認ダイアログを表示 iframeを使ったダイアログを表示 Ajaxを使ったダイアログを表示 モーダルウインドウを表示 フレーム内にリンクを表示 通知パネルを表示 印刷を表示 ページ内アンカーへアニメーションでスクロール スクロールのスピード設定 スクロールの位置設定 ※それぞれ細か
レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。 【追記 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
スマフォアプリ用のさまざまなUIエレメントが用意されたベクターベースのワイヤーフレーム素材を紹介します。 App Wireframes Kit ダウンロードできる素材のフォーマットは、2種類。 .psd .ai どちらもベクターベースで作られているので、サイズ変更やカラー変更なども簡単にできます。 App Wireframes Kitには、スマフォアプリ用のさまざまなコンテンツが収められています。 素材の利用にあたってはロイヤリティフリーで、個人でも商用でも無料で利用できる、とのことです。詳しくはダウンロードファイルの「License.txt」をご覧ください。 ダウンロードはページの下の方からです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く