SVGで始めるマイクロインタラクション入門 - ICS MEDIA
ボタンのタップ、ページのスクロールで開始される「マイクロインタラクション」は、ウェブサイトやアプリを印象的に魅せる効果があります。画像の拡大縮小に強いSVGは、さまざまなデバイス向けのマイクロインタラクションの実装に効果的です。今回は、はじめてマイクロインタラクションやSVGに触れるウェブクリエイターを対象に基礎知識を紹介します。 マイクロインタラクションとは 「マイクロインタラクション」とは、ある目的を果たすために1つの作業を行うインタラクションのことで、Dan Saffer氏が著書「マイクロインタラクション」の中で定義したものです。「部屋のライトをつける」「SNSでいいねボタンを押す」「ウェブサイトでスクロール時にグラフを表示する」といったことが、マイクロインタラクションの例として挙げられています。 マイクロインタラクションの構造 マイクロインタラクションは、次の4つの構造に分解できま
IE6から使えるSVG/VMLを使った高機能JavaScriptグラフライブラリ·Highcharts MOONGIFT
HighchartsはSVG/VMLを使って描画するJavaScript製のグラフライブラリです。 Webサービスにおいてグラフを使うとデータのインパクトが違います。だからこそ使い勝手の良いグラフライブラリを積極的に使っていくべきです。HighchartsはSVGを基本として多様なWebブラウザに対応したグラフライブラリになります。 折れ線グラフです。 Ajaxによるデータロード対応です。 グラデーションをかけることもできます。 滑らかな曲線です。 アイコンを貼付ける例です。 プロットのみで。半透明なドットを使っています。 エリアグラフです。 マイナスの値にも対応しています。 積み上げグラフです。 棒グラフです。 左右比較型の棒グラフです。 複数のデータを並べられます。 棒グラフもマイナス値を出せます。 こんな感じの棒グラフも。 さらにドリルダウン対応です。 HTMLのテーブルからデータを
【レビュー】SVGエディタInkscapeを使いこなすための15のチュートリアル | エンタープライズ | マイコミジャーナル
Linux, Open Source, Gadgets, and all things Digital - TechSource ビッグスクリーンで動作するブラウザ、ノートPCで動作するブラウザ、ネットブックで動作するブラウザ、iPad、iPhone 4、iPhone 3GS、そのほかのスマートフォンやタブレットタイプのデバイスなど、Webコンテンツにアクセスするデバイスと条件は多様化し続けている。こうしたすべての環境に対して適切なデザインを実現するのは簡単なことではない。 特に問題となるもののひとつがビットマップ画像。iPhone 4のレティナディスプレイのように高い密度を実現したスクリーンで美しい表示を実現するには、ビットマップ画像は問題が多い。はじめから大きなサイズのビットマップ画像を用意すれば美しさは確保できるが、帯域の無駄が発生する。ここでの解決策のひとつはSVGを採用することに
SVG with a little help from Raphaël
First we create a table of values that add up to 100%. These are the values for each wedge in the pie chart. We can enhance the regular table if the browser supports it. <table id="nutritionFacts"> <caption>Nutritional information for product X</caption> <tr> <th scope="row">Calories</th> <td>45%</td> </tr> <tr> <th scope="row">Saturated Fats</th> <td>25%</td> </tr> <tr> <th scope="row">Protein</t
JavaScriptで3D - os0x.blog
id:wanparkさんが(3年前に)書かれたchannel3というFlash用3DグラフィックライブラリをJavaScriptにポーティングしてみました。IEは未対応です(たぶんそのうち)。 channel3JS - ss-o.net この前のCanvasでDot3Dが結構余裕だったので、もうちょっと本格的な(だけどライブラリとして大きすぎないような)のをポートしたくなったところにchannel3のことを思い出して、突貫でやってみました(コメントアウトいっぱいでソースは綺麗じゃないです)。 SVGとCanvas両対応です。なぜかというとパフォーマンスを比べたかった(SVGのほうが良い)のと、テクスチャやるにはCanvasが必要になりそうだから。 実はSVGほぼ初めて触ったんですが、面白いので後でまとめようと思います。 ソースは os0x / channel3JS / source — B
ついに！iPhoneでもFlashが表示できるライブラリ·Gordon MOONGIFT
GordonはJavaScript製のオープンソース・ソフトウェア。iPhoneの最大の欠点とされるのがFlashの表示が未対応という点だ。それによって利用できないサイトがいかに多いことか。今しばらくはAppleの対応は見込めないとあって、我慢の日々が続くだろう。 アニメーションにも対応している だがただ指をくわえて待っていても意味がない。技術者たるもの無理といわれているからこそ挑戦する価値があるのだ。そして一部において問題を乗り越え、見事iPhoneでもFlashを使えるようにしたのがGordonだ。決めてはFlashのSVG化だ。 単なるドローの表示はもちろん、アニメーションについても一部対応している。描画は元のFlashファイルとほぼ変わらず、とても良好な結果だ。もちろん動画や音楽を再生するようなプレーヤレベルはできないが、将来的にはFlashバナー程度ならいけそうだ。 iPhone
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ext JS - JavaScript Library