自分のツイートまとめ2013

先日 私が選ぶツイートアワード2013 - Togetter こういう記事を書いたのですが、その過程で自分のツイートも振り返ったのでいくつか抜粋。



順序は入れ替えていたりしますし、誤字や細かい言い回しや体裁は若干修正したり。

「友達に(中略)とバカにされ『どうせ1000RTなんてできないだろ』って言われたので、見返すために皆さん是非RTしてください!」から感じる、春の足音。

http://twitter.com/rikuo/status/314487422413053953

「私たちは、たぶん、初デートから葬儀までイオンで済ます恋人の、最初の世代だ」

http://twitter.com/rikuo/status/329537866063548416

SMAPのメンバーを憶えるコツとしては、「音松くん」の配色を思い浮かべれば分かりやすいですよ。

http://twitter.com/rikuo/status/339949440901193729

Cookpadマクロビオティックへの誤検索を狙った、マイクロビキニ料理があるかな?と思って探してみたものの、未だに登録されていなかった事実を皆さんにご報告しておきます。

http://twitter.com/rikuo/status/339317681234784256

「オーナメント」になんとなくエロさを感じるとき、僕らはまだ少年の心を失っていないと実感できる。

http://twitter.com/rikuo/status/413634915029098496

「ハイシドードー、ハイドードー」と口ずさみながらマサカリを担いだ裸エプロンな子供が熊にまたがって現れたらどうすか?俺なら全力で逃げる。

http://twitter.com/rikuo/status/339294258060206081

騒音がうるさいアパートの隣人の郵便受けに匿名で「いつもTwitter見てます」とだけ書いた手紙を入れるテロ行為。

http://twitter.com/rikuo/status/336697794616258561

液状国庫というものを作れないだろうか?そうすると相対的に普通のものが「固形国庫(コケーコッコ)」となるわけです。

http://twitter.com/rikuo/status/366183197102456834

「三角コーナー」がなんとなく個人的にかっこいいイメージを受けるのは、たぶん三角飛びとコーナーキックを連想してしまうのが原因。

http://twitter.com/rikuo/status/393478687141539841

<script>alert('hoge')</script>というような戒名にしてみたいとは前々から思っています。

http://twitter.com/rikuo/status/405240266296012800

馬頭観音を使ったレシピってさすがに無いのかー」とCookpadで確認するクリスマスイブ。

http://twitter.com/rikuo/status/415375192639033344

竹の定規を使って休み時間にチャンバラごっこをやるのはどこでも同じだと思うのですが、私のクラスでは大工の息子が古くなった差し金を持ってきて拳銃のようにして扱ったためにクラス中に差し金が流行り、結果的には教師による説教と銃規制が行われる事態になりました。銃の怖さを初めて知った体験です

http://twitter.com/rikuo/status/296433218624839681

新しく知った昆虫や深海魚の名前があればとりあえずCookpadで検索する癖は来年になったら自重したいです。

http://twitter.com/rikuo/status/415102129238331394

><

Advent Calendar 3日目:SVG画像を1バイトでも削るためのコードゴルフ


このエントリーはGraphical Web Advent Calendar 2013 への参加記事です。
今日は12月3日、ということで Advent Calendar の3日目は私id:rikuoが担当します。今回はSVG画像ファイルを1バイトでも削るためのコードゴルフのTipsを紹介していきます。

コードゴルフって?

まずコードゴルフとはなにか?の説明から。
ゴルフをしているイラスト
コードゴルフとは任意のソースコードを出来るだけ短く書くことを目的にしたものです。そのコードの動作を損なわなず、かつ可能な限り短縮して記述する手法を試行錯誤していく様子が、ゴルフのように少ない打法で競うところに似ていることからこのように呼ばれています。
またそれを競技としたコンテストも催されていますね。

画像のファイルサイズ低減策

JPEG、GIF、PNGといったビットマップ画像であればファイルサイズを低減する方法やソフトウェア・ツールは既にいくつかあり、そうした手法についての情報というのは世の中に共有されているのですが、

ベクター画像ファイルであるSVGはいかんせん不遇の時代が長かったためか、いまいちそうした情報がまだまだ知られていないようなんですよね。例えば GoogleApple のような巨大企業であってもそうで、ビットマップ画像ならばファイルサイズ低減策を行っているのに、SVGだとこの2社でも無駄にファイルサイズが大きいままだったりします。


コードゴルフを実際やってみるよ

じゃあどれくらい削減できるのか、まずは具体的にやってみると分かりやすいでしょうから、GoogleApple で使われているSVG画像ファイルをコードゴルフ的な観点から削るとどうなるか?を実際にやってみましょう。

GoogleSVGを1/3以下にしてやりましたよ(ドヤ顔で)

Googleであれば、

天気で検索した際の

風向きの矢印にSVGを利用していますがこのファイルには無駄が多いです(ドヤ顔で)

https://ssl.gstatic.com/m/images/weather/wind_unselected.svg
元のファイルサイズ:481バイト

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="42px" height="42px" viewBox="0 0 42 42" enable-background="new 0 0 42 42" xml:space="preserve">
<polygon fill="#AEBFCF" points="27,37.5 42,20 27,4.5 18,4.5 30,16.5 0,16.5 0,23.5 30,23.5 18,37.5 "/>
</svg>

これを無駄な記述を減らして最適化を施すと
コードゴルフ後:148バイト

<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42">
<path d="m27 37.5 15-17.5-15-15.5h-9l12 12h-30v7h30l-12 14z" fill="#aebfcf"/>
</svg>

と1/3以下にファイルサイズを低減できました。



AppleSVGは約半分になったわー(ドヤ顔で)


Appleだとこのフッター部分のロゴに使われているのがSVGなんですが

http://images.apple.com/global/elements/breadory/breadcrumb_home.svg
元のファイルサイズ:1679バイト

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="30px" height="93px" viewBox="0 0 30 93" enable-background="new 0 0 30 93" xml:space="preserve">
<g id="Layer_1_1_">
</g>
<g id="Layer_2">
	<g>
		<path fill="#777777" d="M11.971,43.694c-1.068,0.806-1.6,1.774-1.597,2.905c0.004,1.352,0.668,2.387,1.993,3.107
			c-0.353,1.091-0.864,2.042-1.536,2.851c-0.671,0.812-1.285,1.217-1.841,1.219c-0.263,0-0.62-0.09-1.073-0.272l-0.218-0.087
			C7.254,53.23,6.86,53.143,6.52,53.143c-0.323,0.002-0.676,0.074-1.059,0.219l-0.273,0.104l-0.344,0.149
			c-0.27,0.116-0.544,0.174-0.821,0.175c-0.65,0.002-1.369-0.562-2.158-1.696c-1.137-1.622-1.707-3.393-1.712-5.31
			c-0.004-1.363,0.346-2.461,1.05-3.296c0.704-0.834,1.638-1.253,2.802-1.257c0.436-0.001,0.842,0.083,1.222,0.25l0.26,0.111
			l0.273,0.118c0.243,0.108,0.44,0.162,0.589,0.162c0.192,0,0.405-0.048,0.638-0.144l0.358-0.149l0.266-0.104
			c0.425-0.165,0.895-0.248,1.409-0.25C10.242,42.22,11.225,42.71,11.971,43.694z M9.067,38.782
			c0.014,0.173,0.022,0.307,0.023,0.401c0.002,0.857-0.292,1.61-0.879,2.259s-1.271,0.973-2.052,0.975
			c-0.023-0.193-0.036-0.332-0.036-0.416c-0.002-0.729,0.27-1.414,0.816-2.054c0.544-0.641,1.177-1.016,1.897-1.127
			C8.888,38.81,8.965,38.797,9.067,38.782z"/>
	</g>
	<polygon fill="#DDDDDD" points="5.656,93 4.516,93 28.875,46.418 5.297,0 6.406,0 30,46.425 	"/>
</g>
</svg>

この画像はAdobe Illustratorから出力したまま使っているので特に無駄な要素が多いんですよね。これもコードゴルファーな観点から見直すと
コードゴルフ後:875バイト

<svg viewBox="0 0 3e4 93e3" width="30" xmlns="http://www.w3.org/2000/svg" height="93">
<path d="m11971 43694c-1068 806-1600 1774-1597 2905 4 1352 668 2387 1993 3107-353 1091-864 2042-1536 2851-671 812-1285 1217-1841 1219-263 0-620-90-1073-272l-218-87c-445-187-839-274-1179-274-323 2-676 74-1059 219l-273 104-344 149c-270 116-544 174-821 175-650 2-1369-562-2158-1696-1137-1622-1707-3393-1712-5310-4-1363 346-2461 1050-3296 704-834 1638-1253 2802-1257 436-1 842 83 1222 250l260 111 273 118c243 108 440 162 589 162 192 0 405-48 638-144l358-149 266-104c425-165 895-248 1409-250 1222-5 2205 485 2951 1469zm-2904-4912c14 173 22 307 23 401 2 857-292 1610-879 2259s-1271 973-2052 975c-23-193-36-332-36-416-2-729 270-1414 816-2054 544-641 1177-1016 1897-1127 52-10 129-23 231-38z" fill="#777"/>
<path d="m5656 93e3h-1140l24359-46582-23578-46418h1109l23594 46425z" fill="#ddd"/>
</svg>

元のファイルサイズから比較すると52%まで削減できました。


このような感じでファイルサイズを削減する手法の紹介と、そのテクニックの原理や仕様ではどう定義されているかなど解説をしてゆきます。

Adobe Illustratorの設定を見直す

実はそうしたコンセプトで、昨年のAdvent Calendarでも記事を書いていました。

SVG画像を1キロバイトでも削るダイエット術!
特にSVG画像制作でよく使われるAdobe Illustratorの設定を見直すことで、無駄に大きくなるファイルサイズを低減する、という趣旨でした。
今回はSVGの仕様を参考にしつつ、それよりもさらに無駄な部分を1バイトでも見逃さずに鬼のように細かく削っていく技の紹介という上級者向けの内容になっています。
なので、初心者には難しい記事ですから、その点はご了承ください。
そもそもSVGってなに?という人向けの記事も以前 書いたのでそちらもよければ是非。
SVGってなに?の説明と、SVGの学習に役立つサイト紹介


……というわけで長くなりましたがここまでが前置きで、ここからが本題。

続きを読む

今年こそついにSVG元年?まだ間に合う!SVGの学習に役立つサイト紹介

先日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ってなに?という人もまだまだ少なくないでしょう。
近年再評価されてきているものの、なかなか地味ですからね……。
またせっかくのJavaScriptライブラリが公開されても、元々のSVG自体でどういうことができて、どんな仕組みなのかが理解できないと使えないですよね。


そんなわけでSVGってどんなものなのか?の簡単な説明と、その仕様やそれを学ぶために役立つサイト、現在のブラウザ対応状況を把握できるサイトなどいくつか紹介していこう!……というエントリーです。


なお、この記事の対象としているのは、
Adobe Illustratorで描いたイラストをベクター画像で公開したい!」といったイラストレーターの人……というよりも、技術者よりの人ですね。SVGを使ってなにかWebアプリケーションを作りたい、とかそういう方向での学習に役立つ、かなと。

*1:ちなみにここ数年は毎年「SVG元年」と言われていますけれどもね……。来年もたぶんSVG元年って言う予定

続きを読む

hontoの月末キャンペーンを活用すると約2割引き程度のお得になる

先日こうしたエントリーが話題になったのですが、
Amazon.co.jpの取り扱うあらゆる商品を6%引きで買う方法 - A Successful Failure
私はここ最近は、ネット通販では honto を利用しています、このサイトでは定期的にポイントプレゼントキャンペーンを行っており、うまく活用すると約2割近くお得になるので、便利ですよというエントリー。

honto って?

screenshot
honto:書店、通販、電子書籍のハイブリッド総合書店
hontoと言われても馴染みのない人も多いと思うのですが、ネット黎明期から人気だった通販サイト bk1ビーケーワン)が統合されてリニューアルしたサイト、というと分かりやすいかなと。
honto では、ネット通販だけでなく実際の書店でもポイントが貯められるなど様々な取り組みを行っているのですが、定期的にいくつかキャンペーンも実施されています。
それがこちら



honto - 10,000円(税込)以上お買い上げでポイント最大10倍キャンペーン

これは要するに一度に合計10000円以上の商品を購入すると、1000ポイントをもらえるというもの。獲得したポイントはキャンペーン終了後に1ポイント = 1円で使えます。キャンペーンの告知ページでは現時点で期間は6月30日まで、となっていますが大抵毎月やっています。


もう一つはこのキャンペーン

honto - 最大1000ポイントプレゼントキャンペーン
こちらの条件は

期間中に注文した対象商品の出荷金額合計 付与ポイント数
2,000円(税込)〜3,999円(税込) 300ポイント
4,000円(税込)〜5,999円(税込) 650ポイント
6,000円(税込)以上 1,000ポイント

というもの。
この最大1000ポイントプレゼントキャンペーンは概ね月末の5日間限定で行われています。
そしてこのキャンペーンの特徴は、上で紹介したキャンペーンと併用ができるということ。つまり仮に合計が10000円(税込)ピッタリの商品を購入すると、両方のキャンペーンが適用され 2割に相当する2000ポイントをゲットできるわけです。


ただ実際は合計10000円(税込)ピッタリとはいかず、多少超過してしまうのでポイントの割合は20%以下になってしまいますが、結構お得なキャンペーンなので私自身ときどき利用しています。
例えば技術書や専門書・画集とかだと一冊で数千円ほどになってしまうので、そうした欲しい本を発売日の直後に買わず、何冊か溜まるまで我慢しておいてそれらを、このキャンペーンが行われる月末にまとめて購入する、といった使い方をしていますね。漫画本や小説などは発売日すぐに欲しくなってしまいますが、専門書なんかだとそこまで急ぐほどでもないのでキャンペーンまでじっくり待つのも苦ではないですし。
2割近く書籍購入費を抑えられるのはそこそこ大きいので、便利ですよーという話でした。


注意点や落とし穴やデメリットなど

ただキャンペーンを利用するに当たってはキャンペーンページの注意事項などをよく確認してください。また今後も将来的にこのキャンペーンが継続されているかは分かりませんし。
一応、ここでも注意点やデメリットもまとめておきます。

Amazonに比べると

honto はAmazonに比べると商品が少ないです。
このキャンペーンはCD / DVD / BD などでも使えるのですが、Amazonにはあるけれども honto では取り扱いがない DVD/BD なども多々あります。ただ書籍は品揃えが豊富ですね。

10,000円(税込)以上お買い上げでポイント最大10倍キャンペーン の注意点
  • 注文の合計金額が10000円(税込)以上が対象になるが、例えば注文したものの出版社などに在庫が無く結果的に出荷した合計金額が8000円(税込)未満になってしまうと、キャンペーン適用外になってしまう

この点はもう一つのキャンペーンでもネックになります

最大1000ポイントプレゼントキャンペーン の注意点
  • 本キャンペーンは「出荷完了金額」に応じてポイントを付与いたします。お客様都合、honto都合等理由を問わず、出荷されなかった分は対象外となります。
  • 商品価格変更などより出荷金額が注文金額から変更になった場合、最終的な出荷金額をもって付与ポイント数を判断いたします。
http://honto.jp/cp/netstore/2013/1000points

こちらのキャンペーンでは「出荷完了金額」が基準なので、仮に出版社に在庫が無くて手に入らなかったとしても、考慮はされません。なので商品の発送可能日が「7〜21日」になっているような場合は気をつけた方がいいでしょう。
またこのキャンペーンでは発売前の予約商品は対象外なのも注意する点です。

ポイントの付与時期と利用期限

もう一つネックなのはポイントの付与時期と利用期限です

キャンペーン終了後45日以内にポイントを付与いたします。

http://honto.jp/cp/netstore/2013/1000points

※本キャンペーンにてプレゼントしたhontoポイントは、ポイントが付与された月の翌月末が利用期限となります。

http://honto.jp/cp/netstore/2013/1000points

せっかくゲットしたポイントもすぐに適用されるわけではない & 利用期限が短いというのも特徴なんですよね。なので、その点も注意した方がいいでしょう。




……というわけで、ちょっとややこしい部分もいくつかあるのですが、うまく活用できればお得なキャンペーンではあります。

><

Illustrator CS5.1でSVGを書き出す際、オブジェクトの不透明度を9%以下にして小数点以下の桁数を1にすると指数表記になってしまう問題とその対処法

Adobe Illustratorでこのような図を作ってみました。
円を100個配置して、左上から順に不透明度をそれぞれ1%から100%まで設定したもの。

Illustrator上ではこうなるわけですが、これをSVGに書き出してみると

なぜか上段の不透明度1%〜9%の円は半透明になっていませんね。


Google chrome(26.0.1410.64 m)でのスクリーンショット

……という不具合を見つけたので、その理由と対処法を探ってみました。

続きを読む

Twitterを始めて7年目になったので色々と振り返ってみるなど

私がTwitterにユーザー登録したのは6年前の今日、2007年4月6日のことでした。
つまりTwitter歴6周年を迎え、明日から7年目になるわけです。そんなわけで、これまでの利用状況の変化を調べてみました。
詳しい分析や解説などは後回しで、まずはグラフをサクッと紹介していきます。

日毎のツイート数の推移(RTは除く)

私(@rikuo)の日毎のツイート数はこのような感じになりました。

(※リツイートは除いた投稿数)
しかし6年分の量になるわけで、このグラフではちょっと見辛いので、月別の投稿数をまとめてみました。

続きを読む

はてな匿名ダイアリーの月別総ブックマーク数の推移を調べてみた

はてな匿名ダイアリーというと、はてなのユーザーアカウントがあれば名前を隠して記事が書けるサービスですが、そのはてな匿名ダイアリーで近年のはてなブックマーク数100users以上のエントリーを数えてみた記事があったので

最近はてな匿名ダイアリーが多数ホッテントリー入りしている話 - 情報の海の漂流者

便乗して、ちょっと違う視点でブックマーク数の推移状況を調べてみました。

続きを読む