2014-12-01

clip と transform との組み合わせ

SVG

この記事は SVG Advent Calendar 2014 の１日目の記事です。

SVG とは？

SVG Advent Calendar の初日ということで、簡単に SVG そのものの紹介をしておきましょう。

WikiPediaの記事 → http://ja.wikipedia.org/wiki/Scalable_Vector_Graphics
SVG 1.1 Second Edition の厳密な定義 → http://www.w3.org/TR/SVG/（英語）
手書きする人向けの日本語での解説 → http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_01.htm

なお、この記事には SVG画像を直接記述しています。ブラウザによっては正しく表示されないことがあるかもしれません。特に古いやつとか。予めご了承下さいませ。

実演に使う画像

この記事では、以前の記事
<a href="http://tmotooka.hatenablog.jp/entry/2014/10/04/234844">ホモ・サピエンスの脆弱性 - 職業プログラマの休日出勤</a>
で掲載した写真を 160px * 120px にリサイズした、
f:id:t_motooka:20141130232505j:plain
を題材にして、いろいろと実演していきたいと思います。

clip とは？

画像を切り抜くやつです。
ここで言う「画像」とは、いわゆる写真（<image>要素）だけでなく、SVGの図形や文字なども含みます。

例えば、こんな SVG を書くと

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="320" height="240" viewBox="0 0 320 240">
	<rect stroke="none" fill="#ffffc0" x="0" y="0" width="320" height="240"/>
	<image xlink:href="http://img.f.hatena.ne.jp/images/fotolife/t/t_motooka/20141130/20141130232505.jpg" x="80" y="60" width="160" height="120" clip-path="url(#clip1)"/>
	<clipPath id="clip1">
		<path d="M80,60 v120 h30 v-120 z M120,60 v30 h30 l-10,20 l30,-20 v-30 z M120,150 v30 h50 v-30 z M240,60 h-40 l-30,60 l30,60 h40 l-30,-60 z" clip-rule="even-odd"/>
	</clipPath>
</svg>

こんな図形が出来上がります。

<image>要素に添えられたclip-path属性が、<clipPath>要素のid属性の値を指し示しているからこそ、このclipが実現するのです。

SVG における clip の詳細は、こちら http://www.w3.org/TR/SVG/masking.html をご覧下さい。

transform とは？

画像を変形させる機能です。（ここで言う画像とは…clipのところと同じ）
2次元のアフィン変換で処理できることであれば、（その動作原理さえ知っていれば）簡単に記述することができて非常に便利です。

例えばこんな SVG を書くと

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="320" height="240" viewBox="0 0 320 240">
	<rect stroke="none" fill="#ffffc0" x="0" y="0" width="320" height="240"/>
	<image xlink:href="http://img.f.hatena.ne.jp/images/fotolife/t/t_motooka/20141130/20141130232505.jpg" x="80" y="60" width="160" height="120" transform="rotate(30, 160, 120)"/>
</svg>

こんなのができあがります。

<image>要素のtransform属性の値に着目して下さい。rotate(30, 160, 120)は、座標(160,120)を中心として、30°だけ時計回りに回転するという意味です。

SVG における transform の詳細は、こちら http://www.w3.org/TR/SVG/coords.html をご覧下さい。

clip した結果を transform してみる

ここでは、clip した結果、即ち「にく」の字形も、肉の画像も、どちらも 30°だけ時計回りさせてみましょう。
これは簡単です。

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="320" height="240" viewBox="0 0 320 240">
	<rect stroke="none" fill="#ffffc0" x="0" y="0" width="320" height="240"/>
	<image xlink:href="http://img.f.hatena.ne.jp/images/fotolife/t/t_motooka/20141130/20141130232505.jpg" x="80" y="60" width="160" height="120" clip-path="url(#clip1)" transform="rotate(30, 160, 120)"/>
	<clipPath id="clip1">
		<path d="M80,60 v120 h30 v-120 z M120,60 v30 h30 l-10,20 l30,-20 v-30 z M120,150 v30 h50 v-30 z M240,60 h-40 l-30,60 l30,60 h40 l-30,-60 z" clip-rule="even-odd"/>
	</clipPath>
</svg>

この SVG を与えてあげれば

このように表示されます。
<image>要素に付加されている属性に着目して下さい。clip-path属性とtransform属性の両方が指定されていますね。

transform で変形したものを clip してみる

それでは、回転させた画像を clip するには、どうしたら良いのでしょうか？そう、ここでは貴方は「にく」の字形は回転させたくないのものとします。
直感的には、上記の「clip した結果を transform してみる」と同じ書き方で良さそうですが、これだと上記のような結果になります。
これこそが、多くの SVG 手書き初心者を悩ませるポイントの一つです。

ある程度 SVG に慣れている方であればもう想像ついているかと思いますが、transformをかけた<image>要素の外側で clip してあげればOKです。具体的には<g>を使います。

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="320" height="240" viewBox="0 0 320 240">
	<rect stroke="none" fill="#ffffc0" x="0" y="0" width="320" height="240"/>
	<g clip-path="url(#clip1)">
		<image xlink:href="http://img.f.hatena.ne.jp/images/fotolife/t/t_motooka/20141130/20141130232505.jpg" x="80" y="60" width="160" height="120" transform="rotate(30, 160, 120) translate(160, 120) scale(1.5, 1.5) translate(-160, -120)"/>
		<clipPath id="clip1">
			<path d="M80,60 v120 h30 v-120 z M120,60 v30 h30 l-10,20 l30,-20 v-30 z M120,150 v30 h50 v-30 z M240,60 h-40 l-30,60 l30,60 h40 l-30,-60 z" clip-rule="even-odd"/>
		</clipPath>
	</g>
</svg>

このようにしてあげれば

きちんと、回転した結果を clip してくれるようになります。
なお、ここでは、そのまま回転するだけだと文字の形が変わってしまうので、一緒に1.5倍の拡大をかけています。transform属性の中で scale（拡大縮小）を translate（平行移動）で挟んでいるのは、SVGに限らず、二次元のアフィン変換を使うときの必須テクニックです。拡大縮小の起点を一旦座標平面の原点に戻してあげている訳です。内部的には rotate も似たようなことをやってるはずなんですけどね。

※本来、<clipPath>要素は<defs>要素の中に記述するのが良いのですが、この記事ではコード量削減のため、それを実践しておりません。ゴメンなさい。。

次の日

次の2日目は、 memoca_ さんによる「filter を使ったマウスオーバー効果」の予定です。
公開され（たのを検知し）次第、リンク追記します。

☆追記 on 2014.12.02 AM8時頃☆
2日目の記事が公開されました！
[SVG] filter 要素の基本的な使い方と filter 要素をつかったモノクロからカラーへ変化するマウスオーバー効果を作る方法｜ memocarilog
（追記ここまで）

SVG画像を置いてみるテスト

SVG ウェブログ関連

はてなブログの中にSVG画像を直接記述できるかどうかのテスト

おお、表示されている！

えっ、「SVG未対応のブラウザのことも忘れないで」だって？知るかそんなもん…。。

2014-11-01

還付金でパンプキン！〜認証のお話〜

Australia パソコン・インターネット

タイトルは言いたかっただけです。すみません。

10月31日、世間がHalloweenで盛り上がる中、私は確定申告に追われていました。昨年9月まで豪州に居た訳ですが、豪州の年度は7月始まり。所得税の計算も7月始まり。そう、2013年7月から2014年6月までの分の所得について確定申告しなくてはならないのです。その確定申告の締切は10月31日。"Trick or Treat?" なんて言っている場合ではありません。trick() || treat() なんてコードを書いているヒマもありません。

Australiaの確定申告

確定申告は英語で「Tax Return」と言います。よく言われることですが、「return」だからといって必ずお金が返ってくる訳ではありません。追徴課税されるケースもあるそうです。辞書で「return」を調べると、かなり下の方に「申告する」というような意味のものが登場すると思います。

確定申告は日本のように税務署へ出向く必要も無く、Webで完結します。去年は専用の Windows / Mac アプリをインストールしてそこから申告する必要がありましたが、今回は便利になりました。面倒なので私は使いませんが、スマートフォンやタブレット端末からでも申告できるようになっているようです。
※もちろん、特殊なケースに該当する場合は別途連絡を取ったり、Tax Officeに出向いたりする必要もあるようですが。

認証

確定申告に必要な事項をWeb上のフォームに打ち込んでいって…という様子は多くの方が容易に想像できるかと思いますが、「どうやって個人を識別しているの？」という疑問を抱かれる方も多いでしょう。
Australiaでは個人を識別するための納税者番号 TFN (Tax File Number) が個人に割り当てられます。これは国民だけでなくAustralia国内で納税の義務を負う人全てに割り当てられます。この番号がないと（合法的には）就職もできません。アルバイトでも必要です。ちなみに、法人には ACN (Australian Company Number) や ABN (Australian Business Number) が割り当てられ、法人を識別することができます。

では、Webでログインしてきた人がそのTFNの持ち主本人であることは、どうやって確認するのでしょうか？
図も無しに説明をするのは至難の業ではありますが、可能な限り解説しましょう。

利用者はまず、myGov というサービスでアカウントを作成します（私も昨日作成したばかりです）。このサイトは確定申告に代表されるような、Webで完結する行政サービスを国民や居住者に向けて提供するためのポータルサイトです。
利用者がmyGovにアカウント作成してログインすると、次に、そのmyGovアカウントにリンクさせる行政サービスを選択します。税務、年金関連、退役軍人向けのものなど、いろいろあります。今後も増えるのでしょう。
税務のサービスをリンクさせようとすると、本人確認のために次のような項目を訊いてきます。

TFN（必須）
名前や生年月日など（必須）
勤め先からの過去の総所得額（選択）
過去の所得税還付に使用した銀行口座（選択）
利用している年金運用事業者のABNと、そこでのアカウント番号（選択）
固定資産の何かの番号（選択）

TFNが必須なのは当然ですが、選択のものから２つを入力しなければリンクを作成することができませんでした。これは初めて就職なり渡豪なりした人は詰んじゃうんじゃないかと思いながら、私自身は通過することができました。

えっ、これだけで本人確認できちゃうん？という印象はあります。本人だけでなく家族や勤め先の人も簡単に通過できそうな感じです（それを防ぐべきかどうかというのは別の議題）。結局は日本の税務署での本人確認だって「そんなんでええのん？」というようなものですし、仕方ないのでしょう。

日本

ところで、日本の e-Tax って息してるんですか？
<a href="http://www.e-tax.nta.go.jp/">【ｅ‐Ｔａｘ】国税電子申告・納税システム(イータックス)</a>
リンク先のドメインの uketsuke.e-tax.nta.go.jp とか clientweb.e-tax.nta.go.jp とか、名前解決できないんですが…

まとめ

ぼぼぼ、ぼく、還付金が返ってきたらパンプキン買うんだぁ〜

書籍の紹介

自力で取る！オーストラリア永住権

作者: 猫又山之介
出版社/メーカー: 猫又山書房
発売日: 2014/01/07
メディア: Kindle版
この商品を含むブログを見る

この手の制度って年々変わって行くので、Kindle版の書籍で情報を得るというのは全うなことなのかもしれません。

日本を脱出する本

作者: 安田　修
出版社/メーカー: ダイヤモンド社
発売日: 2011/08/05
メディア: 単行本（ソフトカバー）
購入: 3人クリック: 11回
この商品を含むブログ (8件) を見る

これは数年前に紙バージョンで読みました。個別の事案についての内容としてはちょっと弱いですが、広く浅い知識を身につけるにはちょうど良いのではないかと。

※こんな本を２冊紹介してますが、この記事の作者本人は、しばらくは日本に居るつもりです。

2014-10-25

iPhone6を買った

iOS(iPhone/iPad)

iPhone6 / 6 Plus が発売されて少し時間が経ち、供給状況も少し落ち着いてきたところで、そろそろ買おうかなと思ってました。

新しい Mac mini が発売されて、かなり気持ちは揺らぎましたし、日常生活の生産性に関する費用対効果がiPhoneよりもMac miniの方がずっとずっと高いのは明らかでした。しかしながら、新しいThunderbolt Displayが発表されることが無かったことと、手元のiPhone 5のスリープボタンの不具合が日に日に少しずつ酷くなるという状況もあって、やっぱりiPhoneを買うことにしました。5の修理プログラムもいつの間にか期限切れ（発売日から2年間）になってましたし。早いうちに修理のお願いしとくべきでした。

iPhone 5 スリープ／スリープ解除ボタン交換プログラム - Apple サポート

6 なのか 6+ なのか

この問題には、かなり時間をかけて思考を重ねました。

iPhone 6+にしか無い機能や挙動があるので、アプリ開発者としては6+が必需品
操作性はiPhone 6の方が良さそう
オンラインのアップルストアでは、iPhone6は10営業日程度での発送、6+は4週間程度での発送、となっていた
同じストレージサイズであれば、6と6+では1万円程度の価格差がある

結局、1つ目の要素以外は6推しの理由ですし、自作iOSアプリの6+対応は「どーでもいーや」と開き直ることにしました。

移行

iOSデバイスの移行って、iTunesに頼りっきりの生活をしていれば何ら困ることは無い、という印象を抱いていました。ところが、アプリの転送が途中で止まる現象に悩まされ、何回か復元からやり直しました。
最終的には、iTunesのマイナーバージョンアップが配布されていることに気付き、それを入れたら上手く動きました。MacAppStore内の変更内容にはバグフィックスとか何も書いてなかったですが。
次からは、新しいデバイスを買う前にはiTunesの更新をきちんと入れてからにしたいと思います。

iTunes のCPU使用状況

夜中にiTunesからiPhoneへの同期と、iOS8.1へのアップグレード（出荷時はiOS8.0なので：もちろんダウンロードから始まる）とを走らせた状態で放置して布団に入りました。ところが…

Macのファンが激しく回る音で目が覚めました。様子を見ると、iTunesが「iOS8.1ダウンロード終わったけど、同期が動いてるからiOSアップグレードできないよー」というアラートを出していました。どうやら今のバージョンのiTunesは、アラートのダイアログを出している間はCPUを1コア占有してしまうようです。アクティビティモニタを見て声を出して笑ってしまいました。

当然バグレポート出そうと思った訳ですが、バグレポのフォームが、氏名やらメアドやらが必須入力になっていたので躊躇しています。Appleさんには個人情報全て握られているので何を今更感はありますが、そもそもフォームを埋めることが面倒臭いです。
そのフォームはiTunes Storeやら何やらの金銭周りの問合せ窓口を兼ねているので連絡先を必須とするのは仕方が無いですね。
自分が作っているWebアプリのお問い合わせフォームは、その点上手く解決できてる自信があります。何を作っているのかはナイショですけれども。

iPhone 6 を使っての感想

デカい。

2014-10-07

Ingress始めた

その他

ここ数週間でいろんな方面から「お前はもっと歩け」というご指導・ご鞭撻を賜りました故に、Ingressを始めました。
Ingress

先週の土曜日に開始して4日間が経過しました。台風で丸一日潰れたのと、月曜日はiPhoneの充電をし損ねていたので実質丸2日間しか触っていませんが、どうにか Lv3 まで上げることができました。
こうやって目的を持って歩いていると、そう苦にはならないものだということを実感しています。これからもどんどん歩きます。さぁ良い靴が欲しくなってきた。

ちなみに、こんなイベントは未だ発生しておりません。
http://anond.hatelabo.jp/20140708154652
http://anond.hatelabo.jp/20140718131158