JavaScript製の高度なアニメーションライブラリ·tween.js MOONGIFT
tween.jsはActionScriptのTweenクラスを真似たJavaScriptアニメーションライブラリです。 かつてオンラインでアニメーションを表現しようと思ったならばFlashかGIFアニメーションを使うのが一般的でした。しかし今後JavaScriptの採用が増えていく中では別な作法を学ばなければなりません。そこで今回はJavaScript製のアニメーションライブラリtween.jsを紹介します。 デモ1。四角のエレメントが左右に動き回ります。 1,000本のバーが左右に動きます。 4096個のセルが徐々に色を変化させます。 グラフです。様々な描き方に対応しています。 動画の再生に合わせて右に動いていくデモです。同期されているのがポイントです。 デモ動画です。本当はもっと速く動きます。 tween.jsはActionScriptのTweenクラスを模して作られているとの事です。
すっきりとしたデザインが特徴。高機能なWYSIWYGエディタ·Redactor MOONGIFT
RedactorはjQuery製のWYSIWYGエディターです。 Web上でテキストコンテンツを記述する際には素のテキストエリアではなくWYSIWYGエディタを使いたいのではないでしょうか。そこで試したいのがRedactorです。jQueryを使ったすっきりしたデザインのWYSIWYGエディタです。 一行のツールバー、画像埋め込みにも対応していてすっきりとしています。関係ありませんがアナ・トーヴ（フリンジの主役で写真の方）は好きな女優さんです。 画像はプロパティを編集できます。 右側に寄せました。右でも左でもアナ・トーヴは映えますね。 全画面表示。大きくしてもやはりアナ・トーヴは格好いいです。 動画の埋め込みはEmbedタグのペーストで行えます。 コード表示モードです。 スクロールした時にツールバーを上に貼付けた状態で維持できます。 独自のCSSを追加できます。 テキストエリアがなかったと
これからHTML5をはじめるならぜひ読みたい·Dive Into HTML5 MOONGIFT
Dive Into HTML5はHTML5の何たるかを著したオンラインブックです。 これからHTML5の勉強をはじめよう、そう思い始めた人に読んでほしいのがDive Into HTML5です。HTML5の機能、特徴などについて網羅されたコンテンツです。 トップページです。ePubやPDFといった電子書籍ではないですが、書籍風に整った構成になっています。 段落分けされていて読みやすいです。 アクションのデモと、そのWebブラウザごとのサポート状況についても書かれています。 位置情報系のデモを試すと実際に有効にするかどうかの確認が出ます。 Dive Into HTML5は章ごとに分かれているので、自分の気になる部分だけを読んでも良いでしょう。ダウンロードしてオフラインでも読んでみたい便利なコンテンツです。 Dive Into HTML5はHTML5製のオープンソース・ソフトウェア（Creati
高品質なコンポーネントを使って格好いいサイトを作ろう·Chico UI MOONGIFT
Chico UIはWebサイト向けのコンポーネント群、デザインを提供しています。 最近はTwitterのBootstrapを使ってWebサイトを構築しているところが増えてきましたが、何となく似通ったデザインになってしまうのが難点です。人とはちょっと違う、でも簡単に格好いいデザインを実現したいという人にお勧めなのがChico UIです。 オートコンプリートです。 ボタンを押してハイライトします。 カレンダーです。 スライドです。 文字数カウンターです。 タイポグラフィです。 日付ピッカーです。アイコンをクリックでカレンダーが表示されます。 ドロップダウンです。 クリックで下のコンテンツが表示されるデモです。 フォームも多数デザインが揃っています。 レイヤーです。マウスオーバーで吹き出しが出ます。 モーダルウィンドウです。 メニューです。階層に対応しています。 タブです。 ツールチップです。
これはいい！設置するだけでWebサイトを高速化·FastPage MOONGIFT
FastPageは静的サイトを対象にしたWebサイト高速化ソフトウェアです。 Googleはページの表示速度を検索順位の要素に盛り込むようになっています。そうでなかったとしてもページが高速に表示されるのは良いことです。そこで既存のサイト構成そのままにサイトを高速化するFastPageを使ってみましょう。 ファイル構成です。 例えば実行したイメージです。普通にファイルの内容が返ってきますが、実際にはキャッシュが使われています。 FastPageではファイルサイズの小さい画像をHTML/CSS内にインラインで展開したり、JavaScriptもサイズが小さければHTML内で展開します。さらにファイルもGzipで圧縮して転送量を小さくする、キャッシュ（サーバサイド、クライアントサイド）の利用などの施策がとられています。 なお商用版ではAmazon S3やWindows Azureを使ったCDN配信
Bootstrapライクに使えるWebデザインテンプレート·Zurb Foundation MOONGIFT
Zurb FoundationはWebデザインテンプレートです。記法に則ってデザインすることで様々なデバイスに対応したWebサイトが作成できます。 一定の記法に則って書くだけで様々なデバイスに対応したWebデザインを行ってくれるのがZurb Foundationです。Zurb Foundationを使って格好いいWebサイトを量産しましょう！ ボタンです。ただ普通に書くだけでこんなデザインに。 フォームです。エラー時も含めて格好いいです。 ブロックです。細かく制御できます。 メッセージ系もちゃんとカバーされています。 タブ表示も可能です。 上にラインを引いたNice Tabも。 もちろんページネーションもあります。 スライドで画像を差し替えるコンポーネントも用意されています。 上からスライドで下りてくるダイアログ。ログインやメッセージに使えます。 Rails3.1向けにRubygemsも用
これがあればWebアプリケーションのデザインがすいすいできる·Bootstrap MOONGIFT
Bootstrapは今風のWebアプリケーションを開発するのに最適なデザインパーツを提供するCSSテンプレート。 BootstrapはCSS製のオープンソース・ソフトウェア。ITエンジニアが苦手にするのがWebデザインだ。作るのは良いが、それを奇麗に配置していくのがとても難しい。Webサービスが流行るか否かに技術が及ぼす影響は良くて半分だろう。残りの半分以上は見た目にかかっている。 グリッド それもあって奇麗な画像を生成したり、何かのサービスを模したデザインに人気が集まったりする。Appleの作るデザインのような、今風なWebサイトを作る際にはBootstrapが便利そうだ。 BootstrapはTwitterの開発チームが作成したWebデザインテンプレートだ。単なるHTMLのみならず、色々な機能がおり混ざっている。複数カラムのグリッド、高さの揃った複数カラムのレイアウト、基本的なHTML
ついにここまで。Web上でアニメーションを作成する·AJAX Animator MOONGIFT
AJAX AnimatorはWebブラウザ上でフレーム単位のアニメーションを作成するWebアプリケーション。 AJAX AnimatorはPHP製のオープンソース・ソフトウェア。Webアプリケーションの領域が広がっている。Webアプリケーションが数多くなると、よりWebの利用率が上がり、さらにWeb化を促していく。これまでは難しいと思われていたこともどんどんWebブラウザだけでできていく。 描いている所 イラストを描いたり、ドローアプリのような操作は既にWebブラウザ上でできている。さらに一歩進んで描いた絵を動かす、アニメーション作成WebアプリケーションがAJAX Animatorだ。 AJAX AnimatorはWebブラウザ上でアニメーションを作成できる。左側にツールが並び、それを使ってキャンバスに絵を描く。操作はドローに近く、描いた後に色を変えたり回転や大きさを変更したりすることが
リストやテーブル主体のスマートフォン最適化サイトに·ChocolateChip-UI MOONGIFT
ChocolateChip-UIはHTML5製のスマートフォン最適化サイト用フレームワーク。 ChocolateChip-UIはHTML5製スマートフォン用のオープンソース・ソフトウェア。スマートフォンはこれまでのデスクトップ型に比べると圧倒的に画面サイズが小さい。そのためWebサイトのデザインを行う上で注意すべきことが色々ある。またiOS風にデザインするのも難しい。 リスト そのためデザインテンプレートを使うのが一般的になっている。Webデザインだけを提供するもの、jQuery Mobileのように統合的に提供するものなど色々あるが、ChocolateChip-UIは後者に属するスマートフォンWebサイト向けフレームワークだ。 ボタン ChocolateChip-UIで提供されるのはテーブルビュー、アコーディオンビュー、ナビゲーションバー、リスト、各種ボタン、ポップアップ、スライダーなど
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
