ページ先頭に戻るボタンが「 不 」に見える選手権
タイトルだとなに言っているか意味不明だと思うんですが、まぁちょっと聞いてください。
ページ先頭に戻るボタンってありますよね。
各種サイトによって名称や設置の有無はまちまちなのですが、概ねスマートフォン向けのページで多く使われています。
スポニチAnnex（モバイル用ページ）
例えばこれはスポニチで使われているボタンですが
スクロールが長いページの下部で表示されるこのボタンをクリックすると、一気にページの最上部に移動できるという仕組みになっています。
このボタン、上向きの矢印と直線で構成されたデザインのことが多いのですが、
たまに漢字の「 不 」に見えるボタンのことがあるんですよ。
いや、あるんですよ、……って言われてもよく分からないと思いますが
実際に見てもらった方が分かりやすいので、いくつか紹介していきます*1。
*1:なお基本的に企業・団体のWebサイトから選出しており、個人ブログは除外しています
【追記あり】SVGコードゴルフと,GIZMODO「Google新ロゴ」記事へ反論
＜ここから追記：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" width="600" height="250"><g stroke-width="16" fill="none"><path d="M173 102a51 51 0 1 1-13-30m20 37h-53" stroke="#4a87ee"/><circle cx="227" cy="128" r="32" stroke="#d83038"/><circle cx="313" cy="128" r="32" stroke="#f4c022"/><path d="M401 160a31 31 0 1 1 0-61m-4 0a24 29 0 1 1 0 61m26-67v79m-1-12a20 20 0 1 1-52 17" stroke="#4a87ee"/><path stroke="#4ab95a" d="M449 51v115"/><path d="M529 118a30 30 0 1 0-2 24m5-32l-62 28" stroke="#d83038"/></g></svg>
gzip圧縮すると手元の環境では292バイトになりました*1。
なかなか面白い試みではありますが、その一方でこのSVGファイルにはまだまだ無駄が多くファイルサイズは削れるな……とも感じました。というのも、私は2013年にも似たようなことをやっているんですよね。
SVG画像を1バイトでも削るためのコードゴルフ
無駄を省いてなるべく短く記述する、というのはコードゴルフと呼ばれる遊びです。
ただSVGではどのようにすると短く書けるのか？といったノウハウはまだまだ知られていないと思うのでそうしたSVGゴルフのテクニック紹介と、後半ではこのことを取り上げたGIZMODOの記事が本当に酷かったのでそれへの検証と反論を行っていきます。
*1:Windows7でLhaplus 1.73で圧縮しました、環境によって異なるのかもしれません。
過去のツイートを全て読む & 期間を指定して検索する便利な方法
改めて説明するまでもありませんが、Twitterは140字までの文章を手軽に投稿（ツイート）できるミニブログサービスです。短い文章で簡単に書けるため携帯電話やタブレットでも気軽に投稿できるのがメリットではありますがその反面、過去のツイートを読み返すのが難しいのが難点です
例えば、
- 2年前にTwitterで紹介した動画をもう一度見たい
- 半年前のオフ会で会ったフォロワーさんが投稿した写真を探したい
といったときに普通にさかのぼって読むのは大変なんですよね。
このような状況で、便利に使える方法をいくつか紹介します。
＜ここから宣伝＞
週刊SVG http://ssvvgg.net/
SVGの最新のニュースや関連のアプリやツール、また制作時のコツ・ブラウザ毎の差異への対応策など、SVGに関わる様々な話題を取り上げる「週刊SVG」というブログを始めました。
もしも興味がありましたら、こちらもよろしくお願いします。
解説記事：SVGの最新ニュースなどを毎週お届けする「週刊SVG」を始めました
＜/宣伝ここまで＞
続きを読む
SVGの最新ニュースなどを毎週お届けする「週刊SVG」を始めました
はじめに
週刊SVG http://ssvvgg.net/
タイトルの通り、SVGの最新のニュースや関連のアプリやツール、また制作時のコツ・ブラウザ毎の差異への対応策などSVGに関わる様々な話題を取り上げる「週刊SVG」というブログを始めました。
またそれの更新状況やSVGの記事などをツイートするアカウント@sssssvgも同時に始めましたので、よければそちらもフォローしてみてください！
……ま、この記事の主題は以上で終了なのですが、なぜそんなものを始めようと思ったのか？という理路についてつらつらと書いてみました。
経緯とか他分野の動向など
SVG以外の分野でこうした媒体というのはいくつかあり、国内で有名なのはJavaScriptの話題を中心にしたJser.infoが@azu_reさんによって運営されています。
Jser.info
フロントエンド方面だと名前の通り「Frontend Weekly」が今年1月から開始されていますね。
Frontend Weekly
あとは英語ですがCSS Weeklyとかも
CSS Weekly
海外だとSVG専門のニュースサイトはあることはあって、
SVG News
名前の通りSVGに関係したニュースを取り上げるサイト、しかし更新は停止中の模様。
こちらはブログではなく、Twitter + MailChimp で運営しているSVGWeekly
SVGWeekly
もあります。SVGWeeklyは今一番SVGに関する情報がまとまっている媒体ですね。
あとはニュースサイトとは少しずれますが、SVGに特化したPodcastなどもあったりします。
SVG Immersion
この3つのSVG専門媒体はいずれも今年に入ってから開始されたもので、こうして海外に目を向けるとSVGの熱は高まっているな……とも言えるわけです。
ですが日本だと私の知る限りではそうした動きはまだ無いようなんですよね。
しかし未だに知名度の上がらないSVG
ただ一方でSVGについて未だに存在すら知らない人も少なくないですし、仮に知識はあっても実際に使う段階でラスター画像とは異なるベクター形式の特徴に戸惑ったり、仕様の理解が難しかったりと使おうと思っても苦戦する人が多いように感じています。
私はTwitterでSVGに関連する最新ニュースをよく探しているのですが、検索してて見かけた SVGで困っている人に対してアドバイスすることがあります。
野生の人力検索回答者が現れた！……てきな*1。
こうしてみると、技術者であってもSVGにはまだまだ試行錯誤することが多く、依然としてみんな手探りで制作しているな、と感じます。
そこでSVGに関連する情報を集めたポータル的な場があればいいんじゃないかなー、と考えました。ですので「週刊SVG」ではSVGに関する最新のニュースも扱いますが、初心者がおそらく 悩むだろうポイントの解説やちょっとした制作のコツなどの情報も扱う予定です。
私とSVG
「週刊SVG」の最初の記事でも書きましたが、SVGはJPEG,PNG,GIFのような従来の画像形式と異なり最初はとっつきくいのは事実なのですが、工夫次第で様々な使い方があり、奥が深く魅力的な規格だと感じています。
私がSVGを初めて知ったのはAdobe Illustrator9のころだったので、2000年頃だったでしょうか。とは言え当時は「SVG」っていうファイルの種類があるのかー、……というのと、それがテキストエディタで開ける……くらいの知識しかなく、規格についての興味が湧いたのはそのさらに後の2003年頃だったように記憶しています。
そんなわけで実家に眠っていたWindows98を引っ張り出してAdobe Illustrator9のスクリーンショットをいくつか撮ってみました。
当時はベクター形式のイラストをそのまま書き出せてインターネットに公開できる点がとても興味を惹かれましたし、2003年には携帯電話にSVG表示機能が付いたものがリリースされ始め、いよいよSVGの時代の幕が開けるかな……と期待が膨らんでいた……こともありました。
実際には長らくIEが未対応だったこともあって陽の光を受けることなく、気がついたら10年以上過ぎていましたね……。しかしながら、ここ数年になってSVGに標準対応の環境もようやく整ってきたことで、そんな不遇の時代も終わり、やっとSVGの夜明けが来たなと感じます。
私自身、このダイアリーでも過去に何度かSVGを取り上げる記事を書いていて
- SVGを使用してる企業・団体のサイトを22ヶ国、160件以上調べてみた
- SVGを制作できるアプリ,お絵描きソフトを徹底的に調べました！ 114個
- SVG未対応ブラウザのシェアって今どれくらいか？
- SVGの学習に役立つサイト紹介
少しでもSVGの面白さや便利さが伝わるといいのになー、とこれまでも考えていました。
今後もその考えは変わらないので、コツコツと続けていければな、と思っています。
あと他のニュースサイトと異なり、複数人の執筆者によるグループではなくこれはあくまで個人的な活動なのでSVGのイラストなんかもときどき載せていくかも。
補足や方針や悩む点などを箇条書きに
素材を配布する形態としてSVGを含むだけの場合
よくイラストの素材の配布形態としてSVGを用いるケースがあります、
更新曜日についてや、形態について
何せ始めたばかりなので、更新ペースや文章量、取り扱うニュースの数などは試行錯誤していくでしょう。更新する曜日についても読む側からすると固定である方が良いと思うのですが、書く側からするとなかなか難しい部分がありますので慣れるまではあまり気にせず週に一度くらい更新していれば、程度の軽い気持ちで見守ってもらえればな、と。
SVGを使用してる企業・団体のサイトを22ヶ国、160件以上調べてみた
このダイアリーでは過去に何度かSVGの記事を書いているのですが、それに対する反響で
SVGって未だに使ってるところを見たことが無い
とか
いつになったら使えるようになるのか
永遠に普及しなさそう
みたいな意見をよく見かけます。
そうした反応にカチンときた……というほどではないのですが、納得してもらうには実例を挙げて反論するのが分かりやすいだろうな、と考えてSVGの利用状況を調査してみました。
かといって個人サイトの利用例を挙げるだけでは説得力がないでしょうから、著名な企業や団体でのSVG採用事例をリストアップしてみた次第です。
そしてもう一つの動機として、Webサイトの制作現場でSVGの導入を検討する際に、同僚や上司、またクライアントからの同意を得る・説得する手段としても、既に実際に利用している企業や団体を提示できれば話を進めやすいだろうな、……といった狙いもあります。
例えば
あの有名な会社やこの自治体でも今や使っていますよ
といった具体的な例示があれば、相手側からしても安心感があるでしょうし。
調査対象
冒頭にも書いた通り、採用事例として紹介できるようなリストを作成するのが目的ですから、個人サイトやWebデザイナーのポートフォリオのようなブログはここでは対象外とします。同様の理由でSVGを扱っていて当然なW3CやMDN、Inkscapeなども除外、Wikipediaもそうですね*1。
今回は企業や団体、政治家または自治体などのWebサイトを中心に独自に調査しました。
SVG未対応ブラウザのシェアって今どれくらいか？2015年5月版
SVGはベクター形式の画像ファイルで2001年にはW3Cの勧告がされています。しかしInternet Explorerも含め長い間なかなか対応が進んでいなかったのですが、2011年に正式版が公開されたIE9が登場してからは徐々に環境が整ってきています。
そこで昨年10月にこうした記事を書きました。
SVG未対応ブラウザのシェアって今どれくらいか？2014年10月版
それから約半年ほど過ぎたので、現在の状況を調べてみました。
「823年に一度の奇跡のカレンダー」の季節が今年もやってきました
2015年の今年、2月はこのようなカレンダーになっています。
1日が日曜日で28日分が綺麗に4段で収まっていますね。こうした配置は少し珍しいな、と感じる方も多いのではないでしょうか？
すると、先日こんなツイートが投稿され、多数のRTを集めていました。
確かになかなかありませんが、823年というのはさすがに大袈裟で、少し調べるだけでも
2009年2月
2026年2月
と前後10年もせずにありますから、日付には定評のある東スポ（日付以外はあっていない、とも）のTwitterアカウントからもこうしてツッコミを受ける事態になっています。
この件そのものは、携帯電話やパソコンのカレンダー機能を使えばすぐに分かるだろ！……っていう即終了する話なんですが、問題はこのネタって定期的に湧いてくるんですよね。
さらに言えば日本だけでなく、世界的に。少なくとも英語圏でも何度も見かけます。
ということで、これまでの歴史を関連ツイートを中心に軽く振り返ってみましょう。
