この記事はSVG Advent Calendar 2015への参加記事です。初日の今日は私（id:rikuo）が担当します。 第2日目は@masuPさんが「ラスタ画像を配置したSVGファイルを作成する際に気をつけること | トレンドウォッチ | デジパ株式会社」を投稿されています。 SVG Advent Calendarはまだまだ空きもあるので、気軽にご参加ください。 はじめに SVGはJPEGやPNG, GIF画像と同じように様々な要素で利用でき、 <img src="foo.svg" alt="代替テキスト"> このようにimg要素や CSSのbackground-imageなどで使えます。 div{ background-image: url("foo.svg"); } このときSVGに未対応な古い環境ではどうなるかというと例えばimg要素であれば、何らかの理由で表示に失敗した画像（

前回の記事ではSVGに未対応な環境が現在どの程度残っているのか調査しました。 SVG未対応ブラウザのシェアって今どれくらいか？2015年10月版 ブラウザシェアの調査は難しく、Webサイトの利用者層によっても傾向は異なるのでしょうが、NetMarketShareによれば未対応な環境は2割以下ほどになってきています。 しかし少数だからと言って全く無視をしてSVGだけを使うというわけにはいきません、なぜなら未対応の環境では表示されませんから、必要な情報を得られず困りますから、なんらかの形でフォールバックが必要になります。 簡易目次 フォールバックとは SVG未対応の環境とは ダメなフォールバックの例 インラインSVGのimage要素を使ったフォールバック 逆にSVG未対応の環境で余計なリクエストが行われるフォールバック JavaScriptを使ったフォールバック srcset属性を使ったSVG

タイトルだとなに言っているか意味不明だと思うんですが、まぁちょっと聞いてください。 ページ先頭に戻るボタンってありますよね。 各種サイトによって名称や設置の有無はまちまちなのですが、概ねスマートフォン向けのページで多く使われています。 スポニチAnnex（モバイル用ページ） 例えばこれはスポニチで使われているボタンですが スクロールが長いページの下部で表示されるこのボタンをクリックすると、一気にページの最上部に移動できるという仕組みになっています。 このボタン、上向きの矢印と直線で構成されたデザインのことが多いのですが、 たまに漢字の「 不 」に見えるボタンのことがあるんですよ。 いや、あるんですよ、……って言われてもよく分からないと思いますが 実際に見てもらった方が分かりやすいので、いくつか紹介していきます*1。 ファミ通.com まず最初に紹介するのはファミ通.comで使われているこの

＜ここから追記：2015-09-10＞当初投稿した内容が、前提から誤った思い込みで書かれておりました、詳しくは後半の追記を参照してください。 ＜／追記ここまで＞ はじめに先日こうしたツイートが話題になりました。 https://twitter.com/thespite/status/639107572679712772 これは先頃リニューアルが発表されたGoogle社のロゴ Evolving the Google Identity - Library - Google Design がシンプルな構成に見えることから、それを荒く手軽に作るなら（quick and dirty version）290バイトで作れるよ！という内容です。 リンク先の中身を見てみるとこのような490バイトのSVGファイルになっており <svg xmlns="http://www.w3.org/2000/svg" wi

改めて説明するまでもありませんが、Twitterは140字までの文章を手軽に投稿（ツイート）できるミニブログサービスです。短い文章で簡単に書けるため携帯電話やタブレットでも気軽に投稿できるのがメリットではありますがその反面、過去のツイートを読み返すのが難しいのが難点です 例えば、 2年前にTwitterで紹介した動画をもう一度見たい 半年前のオフ会で会ったフォロワーさんが投稿した写真を探したい といったときに普通にさかのぼって読むのは大変なんですよね。 このような状況で、便利に使える方法をいくつか紹介します。 ＜ここから宣伝＞ 週刊SVG http://ssvvgg.net/ SVGの最新のニュースや関連のアプリやツール、また制作時のコツ・ブラウザ毎の差異への対応策など、SVGに関わる様々な話題を取り上げる「週刊SVG」というブログを始めました。 もしも興味がありましたら、こちらもよろしく

はじめに 週刊SVG http://ssvvgg.net/ タイトルの通り、SVGの最新のニュースや関連のアプリやツール、また制作時のコツ・ブラウザ毎の差異への対応策などSVGに関わる様々な話題を取り上げる「週刊SVG」というブログを始めました。 またそれの更新状況やSVGの記事などをツイートするアカウント@sssssvgも同時に始めましたので、よければそちらもフォローしてみてください！ ……ま、この記事の主題は以上で終了なのですが、なぜそんなものを始めようと思ったのか？という理路についてつらつらと書いてみました。 経緯とか他分野の動向などSVG以外の分野でこうした媒体というのはいくつかあり、国内で有名なのはJavaScriptの話題を中心にしたJser.infoが@azu_reさんによって運営されています。 Jser.info フロントエンド方面だと名前の通り「Frontend Week

このダイアリーでは過去に何度かSVGの記事を書いているのですが、それに対する反響で SVGって未だに使ってるところを見たことが無い とか いつになったら使えるようになるのか 永遠に普及しなさそう みたいな意見をよく見かけます。 そうした反応にカチンときた……というほどではないのですが、納得してもらうには実例を挙げて反論するのが分かりやすいだろうな、と考えてSVGの利用状況を調査してみました。 かといって個人サイトの利用例を挙げるだけでは説得力がないでしょうから、著名な企業や団体でのSVG採用事例をリストアップしてみた次第です。 そしてもう一つの動機として、Webサイトの制作現場でSVGの導入を検討する際に、同僚や上司、またクライアントからの同意を得る・説得する手段としても、既に実際に利用している企業や団体を提示できれば話を進めやすいだろうな、……といった狙いもあります。 例えば あの有名な

SVGはベクター形式の画像ファイルで2001年にはW3Cの勧告がされています。しかしInternet Explorerも含め長い間なかなか対応が進んでいなかったのですが、2011年に正式版が公開されたIE9が登場してからは徐々に環境が整ってきています。 そこで昨年10月にこうした記事を書きました。 SVG未対応ブラウザのシェアって今どれくらいか？2014年10月版 それから約半年ほど過ぎたので、現在の状況を調べてみました。 SVG対応の基準 ここでは前回同様にHTML5でのインラインSVGを表示できるかを判定の基準にします。 どのブラウザが対応しているかは Can I useのページでまとまっていますね。 Inline SVG in HTML5 - Can I use... SVG未対応の環境とは 主要なモダンブラウザでは概ねSVGへの対応はされていますが、現在まで残っているSVG未対応の

2015年の今年、2月はこのようなカレンダーになっています。 1日が日曜日で28日分が綺麗に4段で収まっていますね。こうした配置は少し珍しいな、と感じる方も多いのではないでしょうか？ すると、先日こんなツイートが投稿され、多数のRTを集めていました。 確かになかなかありませんが、823年というのはさすがに大袈裟で、少し調べるだけでも 2009年2月 2026年2月 と前後10年もせずにありますから、日付には定評のある東スポ（日付以外はあっていない、とも）のTwitterアカウントからもこうしてツッコミを受ける事態になっています。 この件そのものは、携帯電話やパソコンのカレンダー機能を使えばすぐに分かるだろ！……っていう即終了する話なんですが、問題はこのネタって定期的に湧いてくるんですよね。 さらに言えば日本だけでなく、世界的に。少なくとも英語圏でも何度も見かけます。 ということで、これまで

このダイアリーで毎年大晦日に更新してるその年に買ってよかったもの記事 購入して良かったもの 2011年版 購入して良かったもの 2012年版 購入して良かったもの 2013年版 今年も続けていきます。 今年もあれこれ購入するものはあったのですが、故障したのでとりあえず無難な機種の買い替えだったり、Windowsタブレットも買ったけれどあまり使いこなせておらず、特に人に薦めるほどユニークなものもなくて何を書こうか悩むほど（買い物の面では）特筆する要素の少ない年でした。 ただ一つ挙げるとしたら、今年購入して良かったのは椅子です。 岡村製作所のルーチェ オカムラ オフィスチェア ルーチェ 肘なし アクアブルー 81L1GR-FGR4 出版社/メーカー: オカムラ (岡村製作所)メディア: オフィス用品この商品を含むブログを見るLuce (ルーチェ) - 株式会社 岡村製作所 一応Amazonへの

これはSVG Advent Calendar 2014の第23日目の参加記事です。昨日はしょん(id:syonx)さんの「SVGでキラキラをつくりたい（願望） - X X X」でした。キラキラとした3Dの球体をSVGで表現するコンテンツを構想中ということで、完成が楽しみですね。 はじめに私はこれまで昨年、一昨年とSVG関連のAdvent Calendarに参加してきて毎度ファイルサイズの削減・最適化をテーマにしていました。 SVG画像を1キロバイトでも削るダイエット術！ SVG画像を1バイトでも削るためのコードゴルフ SVG画像を書き出す際に重要な設定「小数点以下の桁数」とはなにか？ 不要な記述は減らしてファイルサイズを抑える、というのは閲覧者の環境や転送速度を考えると重要な手法ではありますが、その一方で必要な情報はきちんと残す、というのも大切なことです。特にSVGは単なる画像ファイルでは

これはSVG Advent Calendar 2014の参加記事です。 昨日はmemocarilogのSaori Miyazakiさんによる「filter 要素の基本的な使い方と filter 要素をつかったモノクロからカラーへ変化するマウスオーバー効果を作る方法」でした。 第3日目は私 id:rikuo が担当します。 （※追記）第4日目はイロドルハナ(@shino212)さんの「はじめてSVGでアニメーションを作った時の話」です。 ちなみにまだ空いている枠はあるので、興味のある方は是非ご参加ください。 はじめにSVGはXMLをベースにしているためテキストエディタでも簡単に作れるとは言え、実際の制作は何らかのオーサリングツールを利用することがほとんどでしょう。 中でもAdobe Illustratorはベクター系ソフトウェアの代表的な存在で広く普及しています。このIllustratorか

現在、パソコン、スマートフォン、タブレットと様々な画面サイズの情報機器が世の中に溢れています。そうした端末に適切に対応するには画像も色々なサイズのものをいくつも用意する必要があるわけですが、SVGのようなベクター画像であればそうした手間も少なくて済むのがメリットです。 例えば、AppleのサイトではロゴにSVGを使っています。 https://www.apple.com/jp/iphone/ そしてそのロゴを調べてみるとSVGをdata URI schemeで指定しているのが分かりますね。 data URI schemeはHTML文書内に記述できるため、画像ファイルのリクエストを減らして素早く画面表示が行えるという利点がありますから、世界中から多くのアクセスを集めるAppleのサイトで採用されているのでしょう。 こうした使われ方も多いことから、data URI schemeを簡単に作成でき

先日発売されたiPhone 6 Plusでは従来よりもさらに画面が大きくなったり、Retina iMacの噂があったり、様々な機器でディスプレイの高解像度化が進んでいます。 それらの環境に合わせてピクセルサイズを変えていくつも画像を作るより、いっそSVGのようなベクター形式に移行したい！……でも古い環境が残っててまだまだ使えないんでしょ？ と考えている人も多いのではないでしょうか。 じゃあ実際どれくらいの環境が残っているのだろう？というのを調べてみました。 Twitterや検索から来た人はどうせ最後まで読まないと思うので結論を先に書くと 簡略な結論 2014年10月現在、SVG未対応のInternet Explorer8以下は依然として大きな割合を占めてるものの、iOS・AndroidではそろそろSVGが使える環境が整ってきましたよ という感じです。 PC向けはSVG未対応の環境は26.9

本日2014年6月24日の三條新聞の朝刊の誤植が凄すぎて、思わず目を疑いました。 テレビ欄（ラテ欄）の日付はきちんと今日の日付 「2014年（平成26年）6月26日（木曜日）」 となっているにもかかわらず、 一面の日付がなんと 「2014年（平成26年）6月17日（火曜日）」！ 繰り返しますが、これ今日の朝刊です。 記事の誤植はままありますが、一面の日付が違うのはさすがに初めて見ましたね……。 ちなみに日付が間違っているのは一面のみで、他の箇所ではきちんとあっていました 記事内の日付もあっており、新聞社に対してスタンド攻撃や未来人の情報操作が行われていた可能性は低そうです。 そもそも三條新聞とは？ 三條新聞は新潟県三条市を中心とした地方新聞です。 新潟県では同じ地方新聞でも県全域をカバーした新潟日報が強いのですが、新潟日報やその他の全国紙では月額購読料が3000円ほどなのに比べ、三條新聞は

タイトルでややネタバレ感はあるのですが、それはそれとして。 先日ふと 「47都道府県の中で最も総画数の多いところってどこだろ？」 と疑問に思いました。なので、それを調べてみた次第です。 各都道府県の総画数 総画数を数える際にそれぞれに「都道府県」を含めるか否か、 例えば「東京都」？それとも「東京」？ ……という観点は悩む部分ですが、そうすると北海道が北海となってしまうので、ここでは「都道府県」も含めてカウントします。 まずは47都道府県それぞれの漢字の画数と、総数の調査からやってみました。 都道府県名個別漢字総画数 北海道北海道26画 5912 青森県青森県29画 8129 岩手県岩手県21画 849 宮城県宮城県28画 1099 秋田県秋田県23画 959 山形県山形県19画 379 福島県福島県32画 13109 茨城県茨城県27画 999 栃木県栃木県22画 949 群馬県群馬県32

私はTwitterでよくSVG関連情報をチェックしているのですが、 SVGってどう作ったらいいの？ みたいな投稿をしばしば見かけます。 SVGは地味な存在ですが近年は徐々に注目を浴び、関連ツールも増えてきたのでそうした人向けにSVG制作ツールって結構たくさんあるよ！と、まとめてみた次第です。 でも114個って多過ぎ！ ……って思うかもしれない、いや正直オレもそう思う。 なので最後に114個の中から管理人のお薦めツール10選っていうのもまとめておいたので、さっくり読みたい人はそれだけチェックすれば良いかと。 そもそもSVGとは、なに？ そもそもSVGってなに？という人もいるでしょう、それについては以前記事にまとめました。 SVGとはなにか？とSVGの学習に役立つサイトや書籍の紹介 SVGの説明と、SVGの学習に役立つサイトや参考になる書籍の紹介をしています。 今回とりあげるSVG関連ツールと

※スミマセン、タイトルの「隠し技」はやや誇張です。その理由はのちほど説明。 はてなブックマーク（通称：はてブ）のようなソーシャルブックマークは、多くの関心を集めた情報をチェックするのに向いているメディアです。 ユーザー個人はそれぞれ気になるページをブックマークする……という行為をしているだけなのですが、それを束にして網羅することで今どの記事が注目を集めているのか？どんなニュースが話題になっているのか？……を人気投票的にピックアップできる、というのがソーシャルブックマークの特徴です。 中でもはてなブックマークは国内でも最も利用者も多く、日々多くの情報で溢れています。 特に最新の記事が表示される新着エントリーページは流れが早く、朝・お昼、夕方と夜でまるで違う内容になってしまいます。そうした状況ですから、逐次チェックしているとキリがありませんし、もう少しゆったりとしたスパンで見たいなー、と考えて

ちょうど一年ほど前の2013年5月にこの記事が話題になりました。 静かに流行り始めているポリゴン風デザインに挑戦！ | Webクリエイターボックス ポリゴン風というのはまるでセガサターンや初代プレイステーションのころのような、ポリゴンの少ないカクカクとした図形で構成されたところから名付けられたものなのでしょう。 ただ実際にはこの系統は、三角形を組み合わせて平面的に構成させたものが多く……つまりこれは3DCGのような立体的な面の分割というよりは、原理的にはドロネー図（Delaunay triangulation）なのですが……、ま、分かりやすいので以後ここでもポリゴン風とします*1。 こうしたイラストを制作するのにはもちろん画像編集ソフトを使い、一つ一つ図形を配置していく手もありますし、実際に3DCGソフトでローポリゴンを作るのもありでしょう。 でも、できるなら楽に作りたいですよね？ 上記の

このエントリーはGraphical Web Advent Calendar 2013 への参加記事です。 今日は12月3日、ということで Advent Calendar の3日目は私id:rikuoが担当します。今回はSVG画像ファイルを1バイトでも削るためのコードゴルフのTipsを紹介していきます。 コードゴルフって？ まずコードゴルフとはなにか？の説明から。 コードゴルフとは任意のソースコードを出来るだけ短く書くことを目的にしたものです。そのコードの動作を損なわなず、かつ可能な限り短縮して記述する手法を試行錯誤していく様子が、ゴルフのように少ない打法で競うところに似ていることからこのように呼ばれています。 またそれを競技としたコンテストも催されていますね。 画像のファイルサイズ低減策 JPEG、GIF、PNGといったビットマップ画像であればファイルサイズを低減する方法やソフトウェア・ツ

先日AdobeからこのようなJavaScriptライブラリが公開されました Snap.svg http://plus.adobe-adc.jp/post-4817/ 以前から人気の高かった、IE6でもSVGを表示できるJavaScriptライブラリRaphaelの作者 Dmitry Baranovskiy氏による新たなライブラリで、Raphaelとの違いはSnap.svgではIEなら9以上対応とモダンブラウザを対象にしたこと。さらに自由度と表現力の高いことができるようになっているのが大きな特徴です。 こうしたJavaScriptライブラリがオープンソースで、そしてAdobeから公開されたのは大きなことでこれからSVGもどんどん普及していくのではないでしょうか。 まさに2013年こそついにSVG元年と言えるかもしれません*1。 ……とは言え、そもそもSVGってなに？という人もまだまだ少なくな

先日こうしたエントリーが話題になったのですが、 Amazon.co.jpの取り扱うあらゆる商品を6%引きで買う方法 - A Successful Failure 私はここ最近は、ネット通販では honto を利用しています、このサイトでは定期的にポイントプレゼントキャンペーンを行っており、うまく活用すると約2割近くお得になるので、便利ですよというエントリー。 honto って？ honto：書店、通販、電子書籍のハイブリッド総合書店 hontoと言われても馴染みのない人も多いと思うのですが、ネット黎明期から人気だった通販サイト bk1（ビーケーワン）が統合されてリニューアルしたサイト、というと分かりやすいかなと。 honto では、ネット通販だけでなく実際の書店でもポイントが貯められるなど様々な取り組みを行っているのですが、定期的にいくつかキャンペーンも実施されています。 それがこちら h

Adobe Illustratorでこのような図を作ってみました。 円を100個配置して、左上から順に不透明度をそれぞれ1%から100%まで設定したもの。 Illustrator上ではこうなるわけですが、これをSVGに書き出してみると なぜか上段の不透明度1%〜9%の円は半透明になっていませんね。 Google chrome（26.0.1410.64 m）でのスクリーンショット ……という不具合を見つけたので、その理由と対処法を探ってみました。 （ちなみに、手元にあるIllustratorは CS5.1 しかないので、他のバージョンでの動作は未検証です。CS6で直っているといいんですけれども。） 再現条件 この動作が起きる条件は Adobe Illustratorでオブジェクトの不透明度を9%〜1%にする 手元の環境はIllustrator CS5.1 / Windows 7 64bit

私がTwitterにユーザー登録したのは6年前の今日、2007年4月6日のことでした。 つまりTwitter歴6周年を迎え、明日から7年目になるわけです。そんなわけで、これまでの利用状況の変化を調べてみました。 詳しい分析や解説などは後回しで、まずはグラフをサクッと紹介していきます。 日毎のツイート数の推移（RTは除く） 私（@rikuo）の日毎のツイート数はこのような感じになりました。 （※リツイートは除いた投稿数） しかし6年分の量になるわけで、このグラフではちょっと見辛いので、月別の投稿数をまとめてみました。 月別のツイート数の推移（RTは除く） 月別のツイート数の推移はこのような感じですね。このグラフではリツイートを除いて算出しています。 月別のリツイート数 こちらは各月のリツイート数。 公式リツイート機能が実装されたのは2009年11月からなので、それ以降です。 そしてそれを合計

はてな匿名ダイアリーというと、はてなのユーザーアカウントがあれば名前を隠して記事が書けるサービスですが、そのはてな匿名ダイアリーで近年のはてなブックマーク数100users以上のエントリーを数えてみた記事があったので 最近はてな匿名ダイアリーが多数ホッテントリー入りしている話 - 情報の海の漂流者 便乗して、ちょっと違う視点でブックマーク数の推移状況を調べてみました。 総ブックマーク数が分かるはてなブックマークカウンター はてなブックマークには、そのサイトがそれまでトータルいくつのはてなブックマーク数を集めたか？を表示できる機能があります。 参考：はてなブックマークカウンター - はてなブックマークヘルプ 例えば <img src="http://b.hatena.ne.jp/bc/サイトのURL" alt="このサイトのはてなブックマーク数"> とすることで、調べられます。 具体的にはこ

Webサービスではパスワードを使って個人の認証を行うわけですが、そのパスワードを もしもうっかり忘れてしまった時のために、多くのWebサービスにはパスワードリセットのメールを送信する機能があります。 ユーザー登録に使ったメールアドレスに任意のURLを送り、そのURLでパスワードが無くても本人確認するという仕組みです。 もちろんTwitterにもこうした仕組みがあります。 トップページから 「パスワードを忘れた場合はこちら」をクリックして メールアドレスか、ユーザー名（screen_name）を入力して「送信」をクリック とするとパスワードリセットのメールが送信されます。 あとは届いたメールの指示に従って操作することで、パスワードを忘れてしまっても本人確認がされるというわけです。 そしてここまでの手順の説明から分かる通り、通常はTwitterではパスワードリセットのメールはユーザー名（scr

このダイアリーで過去に何度か紹介しているのが、この人体骨格標本のペーパークラフト Human Skeleton (Evergreen) 作者: Not Available出版社/メーカー: Taschen America Llc発売日: 1996/05/16メディア: ペーパーバック クリック: 2回この商品を含むブログ (5件) を見るあらかじめ切り込みが入っているため手軽に台紙から切り離せる上、接合に割りピンを使っているので比較的自由に動かせるのが特徴の等身大骨格標本ペーパークラフトでかなりお勧めの一冊です。 Amazonのアフィリエイトレポートを見てもこの商品をクリック数は割とあり、結構注目されているのかなー、とは思うのですが残念ながらAmazonでは現在は品切れ中で、 出品者のお値段も1万円以上とかなりお高い感じ。 私も以前持っていたものの、もう一つくらい欲しいかったのでこうした現

＜追記 2015-08-20＞ この記事は2013年に書いたものですがその後 Twitterの仕様変更や便利な拡張機能が開発されたりしたので、新たに記事を書き直しました 過去のツイートを全て読む & 期間を指定して検索する便利な方法 ＜/追記ここまで＞ 先日Twitterの公式blogで検索機能が強化されたことが発表されました。 Now showing: Older Tweets in search results（英語） というのも、Twitterの検索はこれまで約1週間前のツイートまでしか対象にならなかったのですが、それよりもずっと古い過去のツイート……例えば6年前の2007年ごろのツイートも検索できるようになりました。 日本語の記事だとITmediaのこの記事が分かりやすいです Twitter、古いツイートの検索を可能に - ITmedia NEWS ただし 米Twitterは2月7