フラットデザイン実現のためのJavaScriptフレームワーク
Webサイトデザインの新しい流行が「フラットデザイン」になりつつある。Windows 8やWindows Phoneですでにその兆候があったが、Appleが発表したiOS 7のデザインでその流れは確実になった。iOSはモバイルデバイスやタブレットデバイスで過半数を確保し、バージョンアップ率も高く同分野において支配的なポジションにある。iOSがフラットデザインへ変更することはデザインの流行に強い影響を与える可能性が高い。 フラットデザインをまとめたサイトや、フラットデザインを実現するためのJavaScriptフレームワークなどの情報がDailyJSの記事「jQuery Roundup: Go Flat!」に掲載された。フラットデザインを実現するための資料サイトとして参考になる。 jQuery Mobileを採用している場合、「jQuery Mobile Flat-UI Theme」が最初のと
Canvas APIの基礎
もともと、Appleが主にDashboardウィジェットの描画のためにWebKitに導入したCanvas API。サンプルコードと見比べながら、効率良く学習しよう Canvas APIの基礎 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。今回はHTML5のcanvas要素で使える2次元描画コンテキスト、俗にいう「Canvas API」を取り上げます。 Canvas APIは、もともとAppleが主にDashboardウィジェットの描画のためにWebKitに導入したものです。それがFirefoxやOpera、Internet Explorer（9以降）に実装され、現在はW3Cによって標準化が進められています。JavaScriptのメソッドで直接図形を描画するのが特徴で、ビットマップ画像の加工や、ゲームのようなインタラクティブ性の高いアプリケーションに向
Eclipse Vert.x
import io.vertx.core.AbstractVerticle; public class Server extends AbstractVerticle { public void start() { vertx.createHttpServer().requestHandler(req -> { req.response() .putHeader("content-type", "text/plain") .end("Hello from Vert.x!"); }).listen(8080); } } import io.vertx.core.AbstractVerticle class Server : AbstractVerticle() { override fun start() { vertx.createHttpServer().requestHandler {
クライアントワークでよくお世話になっているjQueryプラグインいろいろ
私が仕事で Web制作をする時に、よく利用させてもらっている jQuery のプラグインをまとめてみました。ライセンスは MIT、GPL のものばかりです。デザイン、レイアウト的に汎用性のあるものになっています。また、IE 特有のバグ（透過PNGの黒ずみなど）対策についても少し触れてみました。 Webサイトを作る時に、何かとお世話になっている jQuery のプラグイン。HTML と CSS だけでは表現できないことも、Javascript を使うことでいろいろできるようになりますよね！インターネットを見ていると、本当にたくさんの jQuery のプラグインが公開されています。feed を読んでいても、1日一個くらいは新しい jQuery のプラグインに出会います。どれを使ったらいいか迷うくらい … 。 今回は、そんな数ある jQuery のプラグインの中から、 私がクライアントワーク（仕
Excel同等とは言わないけれど十分高機能なWebベースのテーブル表示ライブラリ·KoGrid MOONGIFT
KoGridはハイレベルなWebベーステーブル表示ライブラリです。フィルタ、ソート、ページネーションなどがあります。 業務システムではよくあるWeb上でのデータの一覧表示。得てしてExcelと同等レベルの機能が求められて大変な思いをしますが、そのベースにできそうなハイレベルなグリッド表示を行うのがKoGridです。 ソートができます。範囲外は中でスクロールして表示させられます。 チェックボックスをつけるとハイライト表示します。 カラムに色をつけたり、セルごとに色を設定できます。 数値は桁数を意識したソートができます。 フィルターを表示できます。 サーバサイドのページネーションもあります。 10,000行のデータも軽快に操作できます。 テーブルで選択したデータの詳細を右側に表示するデモです。 KoGridはカラム幅の変更やカラムの移動はできないものの、大抵のニーズには応えられると思われます。
JavaScriptでHTMLをレンダリングするDSL·blingbling DSL MOONGIFT
blingbling DSLはJavaScriptでHTML構造をレンダリングするDSLです。 HTMLでは表示（HTML）とデザイン（スタイルシート）、そしてプログラミング（JavaScript）が混在して動作します。それらを全て一つにまとめあげ、高速に動作するDSLがblingblin DSLです。 デモのコードです。Hello Worldと表示されています。 HTMLソースです。出力の記述はありません。 出力はJavaScriptで行っています。JavaScriptがそのままHTML構造と出力内容を兼ねています。 出力されたHTML構造です。一つ前のコードの内容が出力されています。 blingblin DSLにはblingbling HTMLとblingbling CSSの二種類があります。blingbling CSSを使えばより可読性の高い構造化されたスタイル記述ができるでしょう。
表現力の高さに驚き。HTML5/Canvasグラフライブラリ·Flotr2 MOONGIFT
Flotr2はHTML5/Canvasを使ったグラフ描画ライブラリです。 これまでグラフと言えばFlashや画像出力が多かったですが、HTML5が使われるようになったことでぐっと表現力の高いグラフをWeb標準の技術で実装できるようになっています。その表現力を知るのにお勧めしたいのがFlotr2です。 たくさんのサンプルが用意されています。一気に紹介します。 線グラフです。 途中で途切れた曲線のグラフも描けます。 棒グラフです。 マウスオーバーで値を表示できます。 積み上げグラフです。 円グラフです。 レーダーチャート。 範囲グラフ。 ローソクチャートです。 滑らかな曲線のグラフです。 マウスオーバーでグリッドが表示されます。 マウスズームのデモです。 マウスで一部の範囲を指定できます。 折れ線グラフです。 マイナスの値にも対応。 クリックでリアルタイムにグラフを描きます。 画像ダウンロード
HP製のJavaScriptフレームワーク·Enyo MOONGIFT
EnyoはHPがリリースしたWebアプリケーションフレームワークです。モバイル、デスクトップ双方で動作します。 EnyoはHPがwebOSのオープンソース化ロードマップとともに発表されたHTML5のWebアプリケーションフレームワークになります。特にスマートフォンに適したオブジェクト指向のフレームワークになります。 サンプルです。左側がコード、右側がその実行結果です。 ボタンを押すとテキストが追加されます。 同様に色が変わるサンプルです。 消したり表示したりします。 ボタンを追加していくサンプルです。 Flickr画像検索&ビューワーのデモです。 こちらはYouTubeの検索&ビューワーです。 ボールが落下するデモです。 WebKitに最適化されたモックです。 頭文字ごとにグループ化されたリストです。 ボタンです。 日付ピッカーです。 サンプルゲームです。同じ動物を縦横に3つ並べると消えま
大型Webアプリケーションを開発する際に使えるJavaScriptフレームワーク·AngularJS MOONGIFT
AngularJSはMVCモデルを徹底したJavaScript製のWebアプリケーションフレームワークです。 Webアプリケーションを開発する際にJavaScriptを素のままで使うのはナンセンスになってきました。JavaScript用Webフレームワークを活用して手早く組み立てていくべきです。そのためのソフトウェアとしてAngularJSを紹介します。 まずごくシンプルなデモから。 クリックでビューが切り替わります。 node.js製のWebサーバも付属しています。 HTMLソースはこんな感じです。 JavaScriptのコードです。ルーティングやテンプレート、コントローラを指定してます。 Hello Worldのサンプルコード。JavaScriptによるハンドリングが見当たりません。 入力チェックを含めたフォームサンプル。こちらもごくシンプルなコードです。 入力チェックはリアルタイムに
Google製のクライアントサイド、JavaScript製テンプレートエンジン·JsTemplate MOONGIFT
JsTemplateはGoogleが開発したJavaScript製のテンプレートエンジンです。 Webアプリケーションがさらに開発されていくために必要なのが高機能なJavaScriptテンプレートエンジンの存在です。幾つか出てきていますが今回紹介するのはかなり有力です。なぜならGoogleが開発したテンプレートエンジンだからです。それがJsTemplateです。 デモです。左上がテンプレート、右上がJSONの元データになります。 そして左下が実際に生成されたHTMLで、右下がレンダリング結果になります。 idを使ってテンプレート名を定義しています。 こういう風にデータがない場合のチェックもできます。 実際のコードです。jsdisplayのところに検証が入っているのが分かります。 データがある場合はもちろん繰り返し表示します。 実際のコードです。 JsTemplateは再帰処理ができたりev
リッチなWebアプリケーションを開発するフレームワークSproutCore後継プロジェクト·Ember.js MOONGIFT
Ember.jsは旧SproutCoreの後継プロジェクトです。リッチなWebアプリケーションフレームワークになります。 SproutCoreがFacebookに買収されました。SproutCoreはリッチなWebアプリケーションを開発できるフレームワークですが、今後の開発についてはEmber.jsとして継続される模様です。 スマートフォンに特化している訳ではありませんが利用できます。 デスクトップ向けでHello World。 コードを見ると分かりますが、HTMLを直接ではなく、テンプレートです。 デモのTodoアプリです。 登録したりチェックして削除したりできます。データは保存していないので再読み込みすると消えます。 Todoアプリのコード。こちらはビュー側です。 こちらはコントローラ、モデル側。コードは見やすいです。 Ember.jsはMVCに分かれており、コードも見やすく使い勝手が
多彩な表現をご覧あれ。JavaScriptによるデータビジュアル化ライブラリ·JavaScript InfoVis Toolkit（JIT） MOONGIFT
JITはJavaScriptを使ったデータビジュアル化ライブラリです。 JavaScriptを使ってWeb上でデータを多彩にビジュアル化するライブラリがJavaScript InfoVis Toolkit（JIT）です。その多彩な表現をご覧ください。 積み上げのエリアグラフです。表示の際にはアニメーションが実行されます。 実際のコードです。 棒の積み上げグラフです。 横向き、2Dのグラフです。 関連グラフです。マウスで動かせます。 マウスオーバーで説明が表示されます。 こんなグラフもあります。 星形。格好いいです。 カスタマイズにも多様に対応しています。 容量の表示などによく利用されるツリーマップです。 こちらもパターンが色々用意されています。 グラフを組み合わせたパターンです。 こんな表現も可能です。 派生していくアニメーションが格好いいです。 円グラフです。アニメーションやマウス操作に
要チェック！Webベース、Ajaxを使った表計算ソフトウェア·dhtmlxSpreadsheet MOONGIFT
dhtmlxSpreadsheetは多数のWebブラウザに対応したWebベース表計算ソフトウェアです。 WebベースでもExcelのような編集がしたい、そんなニーズに応えるのがdhtmlxSpreadsheetです。PDFやExcelでのエクスポートにも対応した、すごいソフトウェアです。 まさに表計算といった感じの画面です。 計算式の埋め込みももちろんできます。 値を更新すれば計算式の入ったセルも更新されます。 セルの背景、文字色の変更もできます。 右寄せ、中央寄せも可能です。 計算式も多数用意されています。 マウスのドラッグで範囲選択可能です。 PDFエクスポート（実際には外部サービス利用）できます。日本語は表示されません。 同様にExcelでの出力にも対応しています。こちらは日本語に対応しています。 設定です。 セルの幅は変更できますが、カラムをクリックして全体選択といったことはできま
JavaScriptに便利なメソッドを盛り込んだライブラリ·mofmof.js MOONGIFT
mofmof.jsはJavaScriptを積極的に拡張したライブラリで、Number/Array/Stringに便利なメソッドを追加しています。 JavaScriptは今やWebだけでなく、様々な環境で使われるようになっています。そこで基礎になりえるライブラリとして紹介したいのがmofmof.jsです。かゆい所に手が届く、便利なメソッドがたくさん追加されています。 コード例です。コピーメソッド。 日付周りの拡張も多いです。 Hashを取り扱うメソッドも多数用意されています。 二つのHashをミックスします。 Hashからキーと値を取り出します。 Hashのキーだけを抽出します。 mapメソッドです。 実行するたびにインクリメントされるユニークな値を返します。1秒間に100万回実行したとしても285年間ユニークであり続けます。 一気に配列を生成します。 文字列を置換しつつ生成します。 検索メ
リアルタイムプレビューのついたWebベースのJavaScript/HTMLエディター·JS Bin MOONGIFT
JS BinはWebブラウザ上でJavaScriptとHTMLコードを編集しつつ、その結果をプレビューできるエディターです。 JavaScriptは単体で使うというよりもHTMLと組み合わせて使うことのが多いかと思います。そんな時にWebブラウザ上でコードを試しためし実行できるのがJS Binです。 デフォルトの表示です。左側がJavaScript、右側がHTMLとなっています。 レンダー表示です。先ほどのJavaScriptとHTMLを合わせて実行した結果です。 右側にリアルタイムプレビューを追加しました。JavaScriptを修正すると即座にプレビューに反映されます。 HTMLにJavaScriptライブラリを追加できます。 jQueryを追加した場合です。HTMLソースにscriptタグが追加されています。もちろんJavaScript側もjQueryの関数が使えるようになります。 保
Webの表現力はここまで来た。Canvasタグを使ったアニメーションライブラリ·CAKE（Canvas Animation Kit Experiment） MOONGIFT
CAKEはCanvasタグを使ってグラフィカルなアニメーション描画を行うJavaScriptライブラリです。 HTML5のCanvasタグによってWebの表現力は格段に増したと言えます。今回紹介するCAKE（Canvas Animation Kit Experiment）はCanvasタグを使ってアニメーションを実現します。多彩なデモがあるのでぜひ公式サイトでチェックしてみてください。 最もシンプルなデモです。サークルが回転します。 それを描いているHTMLタグです。結構複雑ですが、見がたい訳ではありません。 色々なデモあります。 流れるような動きが格好いいです。 マウスで大きさを変えられます。 大きなモデルの周囲を小さなモデルが回ります。 ベジュ曲線調に光が下りていきます。 枝が進んでいくデモです。 四角が回転するデモです。 SVGを表示するデモです。 デモ動画です。 CAKEはアニメー
CoffeeScriptがWebの世界を制する？HTML/CSS/JavaScript生成·coffee-world MOONGIFT
coffee-worldはディレクトリを監視してCoffeeScriptからHTML/CSS/JavaScriptを生成するソフトウェアです。 最近、JavaScriptを素のままで書くことが減ってきています。CoffeeScriptから変換した方がコーディング量も少なく、かつ可読性の高いコードが書けるようになってきました。そんなCoffeeScriptは既にJavaScriptだけの壁を越えて動き始めています。そんな人にお勧めなのがcoffee-worldです。 インストールはnpmからできます。コマンドにしないといけないので実際には-gをつけます。 コード例。これはCoffeeScriptでCSSを生成するccssフォーマットです。 後はcoffee-worldを起動すると現在のディレクトリまたはパスを指定してそのパス以下のファイルをコンパイルしてくれるようになります。 CoffeeS
jQueryで作られた本格的表計算ソフトウェア「jQuery.sheet」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
jQuery.sheetはjQueryで作られたWebベースの表計算ソフトウェアです。 業務システムなどではWeb上にテーブルを表示するというケースがよくあります。さらに一歩進んで表計算のように集計したり並び替えたりしたいという無茶な要望が出るかも知れません。そんな時に使ってみたいのがjQuery.sheetです。jQuery製の表計算ソフトウェアです。 カラムはもちろん、グラフの表示までできてしまう本格的な表計算ソフトウェアです。 最大化表示。セルの値を参照することもできます。 テキストだけではなくラジオボタン等も使えます。 関数も多彩に用意されています。 編集しているところ。 文字装飾を変更します。メニューから選択できます。 HYPERLINKはその名の通りリンクを埋め込みます。 データにはHTML/XML/JSONが使えます。エクスポートも各フォーマット向けに可能です。 JavaSc
Webブラウザ上でデモをする際に。HTML5/JavaScriptコードをその場で実行·CoderDeck MOONGIFT
CoderDeckはWebスライドツールに組み込んで使えるソフトウェアで、表示しているコードをそのまま実行して結果を確認できるJavaScriptライブラリです。 プログラマーの技術系プレゼンテーションにおいてコードのデモを見せて、その実行結果もその場で実演する時があります。そんな時、もし実行言語がHTML5/JavaScriptであれば試してみてもらいたいのがCoderDeckです。 左側に書いてあるのは単純なHTML5のコードです。 Runボタンを押すと書かれている内容がそのままコードとして実行されて右側に表示されます。 種明かしをすると、左側に書かれているテキストエリアの内容がiframeタグの中に展開されて表示するという仕組みです。 テキストエリアの内容を書き換えて再度Runボタンを押すと実行結果も変わります。リンクを一つMOONGIFTに変えたのが分かるでしょうか。 仕組みはとて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ShiftEdit - Online IDE | ShiftEdit