Advent Calendar 3日目:SVG画像を1キロバイトでも削るダイエット術！ - 聴く耳を持たない(片方しか)
これは GraphicalWeb (CSS, SVG, WebGL etc) Advent Calendar 2012 - Adventar への参加の記事です。 3日目の今日は私 id:rikuo がSVG画像ファイルの軽量化テクニックを取り上げてみます。 ちょっと長くなってしまったので、ご注意ください。 はじめに、SVGとは？ まず始めに、SVGとは何か？の簡単な説明です。 SVGとはScalable Vector Graphics（スケーラブルベクターグラフィックス）の略で、XMLを基盤に書かれた画像記述言語、またはベクター画像ファイルのことです。画像ファイルというと、JPEG、GIF、PNGまたBMPなどはよく知られていますね。それらの画像はピクセル（ドット）ごとに色を表現したもので、総じてラスター（ビットマップ）画像と呼ばれています。 対してSVGは座標や図形で扱うため、拡大・縮
ノウハウが世の中にない、まったくの手探り状態だった。 - WEBクリエイティブの舞台裏 第2回「SVG女子」 - MdN Design Interactive
<<< 前ページ：「読み込み高速化、データ軽量化への挑戦。」 日本マイクロソフト株式会社でUXエバンジェリズムを担当する春日井良隆氏。今回のコンテンツ制作に至った背景、プロモーションの狙いについて語ってもらった。 ──今回、SVGというフォーマットを使用した真意は？ 春日井●IE9がSVGをサポートして、SVGのレンダリングにGPUアクセラレーションが効くので、その機能をコンテンツとして見せたかった。Webで一般的に扱われる画像はJPEGかPNG、GIFなどの、いわゆるビットマップ画像です。それに対してSVGはベクターフォーマット。一般的には、地図や設計図のような精細な線画に使われていますが、スクリーンの大きさに関わらず滑らかな線画を見せられるのはベクターフォーマットならではの特性ですし、エンターテイメントでも使い道はあるはずだと思っていました。これで全ブラウザがSVGをサポートしたので、
SVG女子を90%軽くしたSVG軽量化テク+α #svggirl
あいつ仕事してないで女の子のイラストばっかりいじってるぞと陰ながら言われていた喜納です。 HTML5で動くSVGアニメーション「SVG女子」がラスベガスでのマイクロソフト基調講演MIX11で公開され、 世界を（いろんな意味で）驚かしてきましたが、 ついに本日、日本でも公開されました！ しかも日本版に合わせてアニメーションも長くなっています！ こっそりブラウザを英語にして見ていた人も必見です！ （神風動画さんによる予告編動画！） 神風動画さんによるハイクオリティアニメーションをSVGで再現すると言う試み、 プログラムについては SVG Girlの公開と内部実装（プログラマーブログ） で担当プログラマーの吾郷が説明していますが、とにかく いかにSVGをきれいに軽くするかが最重要！ SVGといえば拡大しても荒れる事の無いベクター形式で、pngよりも軽くつくれたりすることで使われていますが、 今回
MdN Design｜総合情報サイト
長方形を 描画する HTML内でSVGを扱うにはsvg要素を使う。canvas（Lesson10）のようにwidthやheight属性を付加することで描画領域を決めることができる【1】。 SVGで図形を作成する際はすべてこのsvg要素内に記述していく。まずは簡単な図形から描いてみよう。 【2】のrect要素は矩形を描画するタグで、図の左上の座標x、yと図の幅width、高さheightなどの属性を設定すると矩形を描画できる。XMLの形なのでJavaScriptのようなスクリプト言語を苦手としている人でも理解しやすい。fillは塗りつぶしの属性で、値にはRGB 表記のほかにもRGBAや16進数表記など、CSSで使われている形式が利用できる。 rxもしくはryに数値を入力すると角丸の矩形ができる（どちらか一方でよい）。角丸はcanvasよりもかなり簡単に描画できるのでぜひ覚えておきたい【3】。
ベクター形式のグラフィックを扱うSVGの基本
SVG（Scalable Vector Graphics）とは、HTMLやXMLなどと同じくマークアップ言語の一種で、ベクター形式と呼ばれるグラフィックを扱うための言語です。 インターネットで一般的に使われる画像形式であるJPEGやPNGなどはビットマップ形式と呼ばれ、画像をピクセルという小さな四角に分割し、「各ピクセルが何色か」という情報を集めることで、画像を構成しています。 それに対し、ベクター形式のグラフィックスでは、画像を線や曲線、円などの図形の集合体として扱います。SVGの内容は「どこからどこへ線を引く」「どこを中心に円を描く」といった情報の集合になります。ベクター形式のデータは、ビットマップ形式のデータに比べ、拡大縮小を行っても画質が悪くならないというメリットがあります。 SVGは最初のバージョンであるSVG 1.0が2001年に正式な仕様となり、現在の最新版は2011年8月に
Web Icon Fonts | chibatch.jp
Web Icon Fonts Webフォントで使えるアイコンセット。IE8以下では使えないです。iOS4.1以下も多分見られない。 _Download(35KB) @font-face{ font-family: 'WebIconFonts'; src: url('WebIconFonts.woff') format('woff'), url('WebIconFonts.ttf') format('truetype'); } .icon { font-family: WebIconFonts; } Arrows !Back! 1Back1 #Forward# 3Forward3 $Up$ 4Up4 %Down% 5Down5 &Done& 6Done6 'Close' 7Close7 (Plus( 8Plus8 )Minus) 9Minus9 Social Networks AAmazon
スマホ使えない女子の実態_ver01
2012年、数名の仲間と一緒にデジタルマーケティングの領域で会社を設立。新しい社会を作る上で、今後「自分たちが担える役割とは何か」を、日々議論しながらチャレンジしていきます。 当ブログ「次世代マーケティングリサーチから見る、考察と戦略」は、2015年4月6日から新しいURL「http://blogs.itmedia.co.jp/webteam/」 に移動しました。引き続きご愛読ください。 スマートフォン市場の台頭MarkeZineの記事でスマートフォン普及に関する調査結果がありました。 スマートフォンの1台持ちの人は21.1%となっています。マーケティングリサーチをされている、あるアパレルブランドの調査担当者が話されていたのは『市場において占有率が10%を超えたあたりで人はそれを"流行っている"と表現する』とのこと。今やスマートフォンが20%を超えているので、流行っているというフェーズを
意外と多い!? Web フォントに対応していない環境 ～2012 年の Web フォント事情
Web フォントは「Web サイトにフォントを埋め込む」ための技術です。 先日、Web フォントを使った 絶対にコピペできない文章を作ったったwwww を公開しました。多くの人に楽しんでもらえたのですが、その一方で、Web フォントが適用されなかった方から「コピペできるんだけどどういうこと？」「意味が分からない」というコメントがよせられました。 ほぼすべてのブラウザーが Web フォントに対応しているはずなのですが、一体、何が原因だったのでしょうか。 そこで、Web サーバーのアクセスログを解析して「Web フォントに対応していない環境」がどの程度あったのかを調べてみました。 ４種類のフォーマット 一口に Web フォントといっても、フォントのフォーマットは WOFF・TTF・EOT・SVG の 4 種類あります。今後は WOFF フォーマットが標準になっていくのですが、現在ではサポートし
電通”クリエイター母”の、超「達観」語録
だが、電通の次世代コミュニケーション開発部で働くプランナーの中野華奈さんは、ちょっと違う。筆者の「長時間働けないことに対する、もどかしさはある？」という質問に、「それは……もどかしいですが、しょうがないです。しょうがない」とキッパリ答えた。 しょうがない――。 開き直りと達観が同居する言葉だが、筆者はここにワーキングマザーが仕事と育児を両立するヒントが隠されているように思った。 確かに自己憐憫に浸ったところで、会社や夫を恨んだところで、「時間がない」という現実に変わりはない。現実を容認し、その中に折り合いを見いだして、なんとかやっていくしかない。 「男だろうが女だろうが、結婚していようがいまいが、子どもがいようがいまいが、それぞれに皆がプラスとマイナスを抱えている。子どもがいるというのは、そのバランスが変わっただけだと思っています」 中野さんは、自分をワーキングマザーという枠にはめることが
日本でも、中間層の仕事がなくなる？
インド、中国では毎年数百万人単位でハングリーな大卒者が誕生。また、ネット・通信環境が大きく改善したことで、定型業務やＩＴ開発を新興国へアウトソーシングできるようになった。仕事の枠を日本人同士で争っていればよい、という時代は終わった。さらに、人口減少に伴う国内マーケットの縮小も追い打ちをかけている。 先進国の人間にとって、グローバル化は新市場開拓のチャンスである一方、雇用を失うリスクとも背中合わせだ。欧州では若年層の失業問題が深刻化しており、中間層の仕事の多くは、新興国の人材やテクノロジーに奪われている。 国同士の壁がなくなる現状にどう対応すべきか。話題のビジネス書『ワーク・シフト』の著者で、ロンドン・ビジネススクール教授のリンダ・グラットン氏と、『10年後に食える仕事 食えない仕事』の著者で、ジャーナリストの渡邉正裕氏が、正反対の主張をぶつけ合った。 （構成：許斐健太） 日本は欧米より20
話題のHTML5カルタ!!プレイした感想と新春★カルタ大会のイベント情報!!!!
最近スマートフォン案件が増え、HTML5と触れ合う機会も格段と増えてきた霙(@xxmiz0rexx)です。こんにちは。 さて、今回はHTML5を覚えたい！という方にピッタリのアイテム「HTML5KARUTA」と、わたしも着物でお邪魔する予定のビックイベント「HTML5KARUTA大会」のご紹介をしたいと思います！ WEB屋さんは要チェックですよー！！(∩*´꒳`*∩) 「HTML5KARUTA」とは HTML5KARUTA TLで話題になったのでご存知の方も多いと思いますが、みぞれのお友達であるWEBCRE8.jp の@glatyouさんが108つあるHTML5のタグをすべて使ったカルタを制作し、先日そのサイトを公開しました！ サイト内にはHTML5+CSS3で作られたWEB上で遊べるカルタと、実際に印刷して遊べるpdfデータが掲載されています！ 公開早々IDEA*IDEA さんやGIGA
アプリデザインの参考になるギャラリーサイト＋クオリティを格上げできるセンスのいい素材配布サイトの紹介
最近、会社でも個人でもアプリの制作に関わることが徐々に増えてきた霙(@xxmiz0rexx)です。 勉強のため、そしていざ制作！となった時の強い味方をメモしておきたいと思います。 まずはインプットから。アプリのデザインはWEBデザインとはまた違うものなので、時間のある時にギャラリーサイトを眺めることは引き出しを増やすのにとても大切なことだと思います。 Mobile Patterns 画面の種類ごとに分けられているのでとても見やすいです。 アプリデザインは全体を見たいというよりはフィード画面の参考画像が欲しい！などと具体的な要望が多いのでありがたいですね。 iOS Mobile Patterns Library こちらも画面の種類ごとに分けられております。アプリのギャラリーはこういうモノなのかな。WEBデザインだとパーツごとに分けられてるのが多いですよね！ こちらは拡大レンズがついているので
ユーザーの疑問を素早く解決するためのWebサイト設計
2017年6月29日 Webサイト制作, ユーザビリティ サービス系・企業系Webサイトでよく見かけるサポート関連のコンテンツ。問い合わせをせず、自己解決を望むユーザーが増加し、よりよいサポートページの作成が必要となってきています。ユーザーが抱える疑問を積極的に解消するWebサイトを作成し、問い合わせ数を減らせば、ユーザー・企業側ともに手間を省くことができます。また、Webサイト内だけで解決できなかった疑問も素早く対処する事でユーザーのストレスを軽減することができます。そこに注目し、どのようにWebサイトを設計していくのかを考えてみました。 ↑私が10年以上利用している会計ソフト！ 問い合わせを未然に防ぐ サービス関連のWebサイトでは、同じような質問を何度も受ける事が多いです。そのような質問にひとつずつ回答していくのは非常に非効率。どのような問い合わせを受けやすいのかを的確に理解し、ユー
コストセンターとは何か | タイム・コンサルタントの日誌から
コストセンターというのは奇妙な用語である。多義的だ、とか、意味が確定しにくい、とかいう訳ではない。コストセンターとは「費用だけが集計される部門単位」という定義が明確にあり、その点では、ほぼゆらぎがない。にもかかわらず、この用語は様々な価値判断や感情的評価を込めて使われている。ネットをちょっと調べてみれば分かるが、「もうコストセンターとは呼ばせない！」とか、「コストセンターからプロフィットセンターへの脱皮を」といった風に、ネガティブな意味合いで使われることが多い。あるいは「所詮コストセンター子会社だから」とか。いったい費用だけが集計される会社とは、どういう意味だろうか。収入がない会社が存在するのか？ もともと「コストセンター」とは、会計学から発した言葉だった。日本語では「原価中心点」という、いささかぎこちない訳語があてられている。意味は先ほど紹介したとおり、費用集計の部門単位である。企業の中
［自由大学］iOSアプリの作り方を学んできました！lesson４：コードの書き方〜ライブコーディング
こんにちは、霙（@xxmiz0rexx）です。 ついにアプリ道場も第4回目に突入しました！次回で最終回、果たして私はアプリを作れるように なるのでしょうか・・！ｗ 今回の内容もカンタンにレポートさせて頂きます♪ 今回の講義内容 コードの書き方 部品の使い方 ライブコーディング 今回はわりとさらっと、Xcodeのコード記述法や部品の使い方を学び、 iPhoneでよく見るスライダー（ボリュームの上げ下げのところにも使われている部品）を使用したアプリを作りました。 こんな感じのシンプルなやつ。コードも数行でめっちゃカンタンでしたｗ スライダーを動かすと、ラベルに数値が表示されるというカンタンなアプリです :) この程度ならほんとすぐに実装できちゃうんですね！Xcodeすごい！ 今回の目玉：講師の先生によるライブコーディング！ そしてそれを作った後は、講師である@akio0911先生によるライブコ
アイコンフォントの欠点である意味不明な文字列をリガチャ(合字)で解決したWEBフォント『Ligature Symbols』
こんにちは、霙(@xxmiz0rexx)です。 興味はあったけれどなかなか手が伸びなかったアイコンフォント。 そんな私をやっと使う気にさせてくれた素晴らしい発想のフォントに出会ったのでご紹介いたします！ そもそもアイコンフォントとは アルファベット1文字1文字にアイコンが割り当てられたフォントで、例えばスマートフォンサイトの製作をする時 画像でアイコンを用意する場合は通常用とRetina対応用で2サイズ用意しなければならないところを フォントであれば読み込んでCSSを設定するだけでOKという・・・面倒くさがりの私にはRetina対応の救世主とも思える存在です！！ フォント＝ベクターデータなので大きさ自由自在！解像度も関係なし！なのです :) しかしそんなアイコンフォントにも欠点はあり、アイコンを表示させるためにソースに意味のないアルファベットを書かなければならないのが気になるところでした。
クラウドファンディングとは｜仕組み・やり方の解説から各サイトの比較まで
「言葉は聞いたことがあるけれど、クラウドファンディングってどういうもの？」 「実は仕組みとかをちゃんとわかっていない・・」 クラウドファンディングは、なにかを成し遂げたいクリエイターや起業家が、活動のための資金を調達する新しい手法として注目されています。 最近では、日本でも積極的にクラウドファンディングを利用してプロジェクトをスタートさせるひとも増えてきました。 しかし、まだまだクラウドファンディングという言葉や手法は一般化していないのではないでしょうか。 この記事では、クラウドファンディングの基本的な仕組みやメリット・デメリットから、実際にクラウドファンディングをはじめるためのやり方、各サイトの比較まで徹底解説します。 クラウドファンディングとは？ クラウドファンディング（CrowdFunding）とは、「群衆」を意味する”crowd”と「資金調達」を意味する”funding”を組み合わ
アドビ―Dreamweaverデベロッパーセンター
Enhance and extend DreamweaverDreamweaver provides its own API as well as the Common Extensibility Platform (CEP), and offers you the flexibility of using C++, HTML, CSS, and JS to build extensions for Dreamweaver. You can extend the Dreamweaver UI, add powerful features for building web apps and automate entire cross-application workflows. Build custom web development toolsImport database data in
10分でわかるSVG 基礎編
知って得する、Webブラウザ上で利用できるグラフィック関連技術。HTMLのような感覚で図形が描画できる「SVG」をハックしよう SVGドキュメントの書き方 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。第2回となる今回のテーマはSVGです。 ご存じの方も多いと思いますが、SVGはXMLをベースにしたベクトルグラフィックスの記述言語です。PNGのような画像フォーマットの1つでもありますが、実際にはXMLを記述したテキストファイルであり、HTMLと同様にJavaScript（DOM API）による制御も行えます。HTMLがタグによって文書の構造を記述するのと同様に、SVGはタグで図形を記述します。 ■ XMLでベクトルグラフィックスを記述するSVG 実はSVGの規格自体はかなり以前から存在したのですが、長らくInternet Explorer（以降IE）
3DプリンターとITの関係についてみんなが知りたいこと (1)、Makersの本質とものづくりの変容に対するIT業界からの期待 【増田 @maskin】 | TechWave（テックウェーブ）
去る2013年3月11日、福岡県Ruby・デジタルコンテンツ振興会議が主催するイベント「Ruby東京ミーティング」が秋葉原UDX GALLERYで開催された。 「Ruby東京プレゼンテーション」は毎年開催されており、今回で4回目。 このイベント会場内のセッションで誕生し、福岡県が主導する形で、2010年6月25日に経済産業省の地域イノベーション創出研究開発事業として採択されたことを受け開発が進められた「ハードウェア組み込み用途に適した軽量版Ruby」。 今回は、「mruby」と名付けられら軽量版Rubyが主役となり、ロボットや組み込み技術、3Dプリンター、プロトタイピング、フィジカルコンピューティングなどなど、“リアル x IT の乱戦状態” を模した見所満載のイベントとなった。 モノ作りの参入障壁が下がり、プロトタイピング・小ロットの領域に革命が発生している 最大の見所は、Makers本
私がiPhone用のGunosy公式アプリを削除した理由 | NANOKAMO BLOG
どうも@kuroji1987です。 本日iPhone向けにリリースされているGunosyの公式アプリを削除いたしました。 このアプリは、様々な情報をキュレーションして、ユーザーが興味を持ちそうな記事だけを配信してくれるサービス「Gunosy」をiPhoneで快適に閲覧するためのアプリです。 Gunosy カテゴリ: ニュース 価格: 無料 これはもう僕には必要ありません。代わりを見つけました。 配信される記事をRSSで見れるようにしたから そうです。「Gunosy」を見なくなるわけではないのです！ アプリの代わりにRSSで記事を受け取れるようにしたので、もうアプリを使う必要がなくなったのです。 アプリ版には、通知やお気に入り登録、共有などといった便利な機能がたくさんありますが、なんだかどれも中途半端で使い勝手がよくありません。 でもRSSなら以下のことができます。 各種あとで読むサービス
GunosyのRSSフィードを生成してRSSリーダーに登録して読むと超快適 | delaymania
Gunosy使ってます@delaymaniaです。 Gunosy公式iPhoneアプリで通知を受けて毎朝使ってましたけど、どうにも使い勝手良くないんですよね。Evernoteに放り込めないし。 と思っていたら、RSSリーダーに登録する方法を見つけたのでご紹介します。 GunosyのRSSフィードを生成してRSSリーダーに登録する方法 Gunosyは素晴らしいサービスなんですが、iPhoneアプリが使いづらいなと思ってたんです。 過去にさかのぼるのがめんどうだし、あとで読むサービスに送ったりEvernoteに保管したりができないし。 マーカー的なのつけられるんですけど、それを読み返しやすくはできてないんです。 ちょうど困っていたところ、RSSフィードを生成してくれるサービスを見つけました。 これでRSSリーダーで読める！ Gunosy RSS by dai-shi このサービスはNANOKA
＠ITイベントカレンダー
平素よりイベントカレンダー＋ログをご利用いただき、誠にありがとうございます。 イベントカレンダー＋ログは「IT・製造業・ビジネス関係のイベント（セミナー・展示会・勉強会・コンテスト・Webイベントなど）を開催する企業・コミュニティが登録したイベント情報のポータルサイト」として約7年間運営をしてきました。これまでサービスを続けることができたのは、イベントカレンダー＋ログのコンセプトに共感をいただき、適切なイベント情報をお寄せいただいた皆さまのご支援があったからこそと考えております。重ねて御礼申し上げます。 しかしながら、イベント情報の入手方法の多様化やイベント紹介サービス市場の状況、＠ITの今後のメディア運営方針などを検討した結果、2020年6月30日（火）15:00をもちましてイベントカレンダー＋ログのサービスを終了することにしました。 これまでご利用をいただきました皆さまには残念なお知ら
元頓智ドットの井口氏がメガネ型ウエアラブル機器「Telepathy」を米国のSXSWで初披露
Telepathyは、米テキサス州オースチンで開催中のイベント「South by Southwest Interactive」の展示会場で、開発中のウエアラブル機器「Telepathy」（写真1）を初披露した。米国で2013年クリスマスシーズンを目標に発売する予定である。 Telepathyは、ユーザーの頭に付けるウエアラブル機器。目の部分にディスプレイとカメラを設置し、ユーザーには目の前に5インチ相当のディスプレイが表示されているように見える。今回の展示で使われたデモ機器にはまだ付いていないが、完成時には外を映すカメラも搭載する予定。Bluetoothで外部と通信し、メールやSNSの情報をいつでも表示したり、逆に見ている情報を外部に送信して共有できる。 Telepathyの創立者である井口尊仁氏（写真2）は、AR技術を使った「セカイカメラ」を開発した頓智ドットの創立者。2012年11月に
UI/UX設計の教科書、About Face 3輪講の資料を公開します - ninjinkun's diary
一昨年に社内で行ったAbout Face 3輪講の資料を公開します。実は今までずっと公開されていたのですが、存在を知られていなかったので、改めて周知します。 About Face 3はUI/UX設計の教科書で、ユーザーストーリーやペルソナなど、基本的な内容が押さえられています。ディレクター、デザイナー、エンジニア、サポート等、プロダクト制作に関わる全員の共通知識として使える内容だと思います。 About Face 3輪講概要 1. ゴールダイレクテッドデザイン 2. 実装モデルと脳内モデル 3. 初心者、上級者、中級者 5. ユーザーのモデリング : ペルソナとゴール 6. デザインの基礎 : シナリオと要求 8. 優れたデザインの総合 : 原則とパターン 10. オーケストレーションとフロー 11. 間接的な操作を取り除く 12. 良き振る舞いのデザイン 13. メタファ、イディオム、ア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://quote-jp.com/category/item/itemgenre/home/
Final in San Francisco | SF Japan Night
BIGLOBEなんでも相談室サービス終了のお知らせ
新着記事
WordPressでアイキャッチ画像に任意のデフォルト画像を設定する方法 * prasm（プラズム）
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
日本の暦
quusookagaku.com