2012年11月 6日 (火)

ココログでGoogleMapを表示できるようにしたい:ジオコーディング

ココログでGoogleMapを表示したい。
=> ジオコーディングが必要。
=> getJSONで緯度経度取得
× Uncaught SyntaxError: Unexpected token :  でエラー

というところでとまっていた。今回はその続き。


Uncaught SyntaxError: Unexpected token って何? さっそくググってみたが、よくわからん。
どうやら構文エラーっぽい。


が!

ここで時間をかけなくてもよさそうなことを発見した。

ジャーン!ジャーン!ジャーン!

クリックしてみよう。

東京都渋谷区

(※個別ページだとうまくいきますが、一覧ページだといろんな事情があってうまくいきません。)
どうでっしゃろ。住所から緯度経度が変換されとりやす。
そうなんです。GoogleMapsAPIのページにジオコーディングのサンプルコードがあったことにいまさらながら気がついたわけなんです。

サンプルコードを参考にしながら、上で作成したコードはこちら。

var geocoder = new google.maps.Geocoder();
function codeAddress(baseAddress){
	geocoder.geocode({'address':baseAddress},function(results,status){
		if(status == google.maps.GeocoderStatus.OK){
			var add = results[0].geometry.location;
			alert(add);
		} else {
			alert("Geocode was not successful for the following reason: " + status);
			return null;
		}
	});
}

(function ($) {
	$.fn.showGoogleMap = function (options) {
		var defaults = {
			cursor:'pointer',
			borderTop:'none',
			borderLeft:'none',
			borderRight:'none',
			borderBottom:'none',
			background:'none',
			padding:'0',
			textDecoration:'underline'
		};
		var settings = $.extend({}, defaults, options);
		return this.each(function() {
			$(this).css({
				"cursor":settings.cursor,
				"border-top":settings.borderTop,
				"border-left":settings.borderLeft,
				"border-right":settings.borderRight,
				"border-bottom":settings.borderBottom,
				"background":settings.background,
				"padding":settings.padding,
				"text-decoration":settings.textDecoration
			});
			$(this).bind('click',function(){
				var add = $(this).text();
				codeAddress(add);
				return false;
			});
		});
	};
}(jQuery));


var geocoder に new google.maps.Geocoder() で Geocoderオブジェクト の命を吹きこんで、geocoder に住所を渡してジオコーディングしてもらうというわけです。
このGeocoderは逆ジオコーディングもサポートしているよう。
詳しくは、
https://developers.google.com/maps/documentation/javascript/services?hl=ja#Geocoding


うし。

ジオコーディングできたので、あとはいっきに形をつくろう。そして最後にブラッシュアップ。そんな感じで進めていけそうだ。

2012年11月 2日 (金)

メモ:jQueryのgetJSONでなぜかjsonが読み込まれない件について

たとえば、jQueryのgetJSONでjsonを読み込もうとしよう。
jQueryのコードは下記。

$("#getjsontest1").bind('click',function(){
	var jsonPath = $(this).attr("href");
	$.getJSON(jsonPath,{},function(data,status){
		alert(status);
		var items = [];
		$.each(data, function(key, val) {
			items.push('

' + val.title + '
' + val.day + '
' + val.text + '

'); }); $('
', { 'class': 'result', html: items.join('') }).appendTo("#result"); }); return false; });

上のコードの<div></div>は実際は<div/>としとります。
リンクをクリックするとjsonを読み込んで #result のタグ内に読み込んだ内容を挿入するといった内容だ。

jsonを読み込んだ際にstatusをアラートする。読み込みが成功したらsuccessが出力されるはずだが、どうだろう。
json読み込みテスト

予定ではここに読み込まれるはず。

うぬーーー。しかもアラートもでない。

chromeでディベロッパーツールのNetworkを開くと、test1.jsonが GET 200 でちゃんと読み込まれていることが確認できる。
20121102_12630

  1. Request URL:
    http://cs.cocolog-nifty.com/blog/jquery/json/test1.json
  2. Request Method:
    GET
  3. Status Code:
    200 OK (from cache)

しかし、なんで、alert(status)が実行されないのだろう。

結論からいうと、読み込むjsonが関連していたようだ。
ためしにこれはどうだろう。

うまくいけば ↓ ここに読み込んだjsonの内容が表示されるはず。

json読み込みテスト2

いったいこの違いはなぜだ!?

読み込んだけど表示できなかったJSON
読み込んでうまく表示できたJSON

どうでっしゃろ。わかりましたか?

JavaScriptのコード整形&色付け(貼り付け用)
でjQueryのgetJSONの処理をおっかけようと思ったけど、時間かかりそうだったのでやめた。

JavaScriptプログラミング解説
によれば、JSONの記述方法は

文字列 (string)

JavaScriptでは文字列を記述するのに、ダブルクォート ( " ) かシングルクォート ( ' ) のいずれかを使用できます。しかしJSONでは、ダブルクォートしか認められないことに注意が必要です。

使用可能な文字は、ダブルクォート ( " ) とバックスラッシュ ( \ ) 以外です。また以下のエスケープシーケンスをサポートします。

表記説明
\" 二重引用符 quotation mark
\\ バックスラッシュ reverse solidus
\/ スラッシュ solidus
\b 後退 (バックスペース) backspace
\f 改ページ formfeed
\n 改行 newline
\r 復帰 carriage return
\t タブ horizontal tab
\uXXXX 4桁の16進数で表記されたUnicode文字 4 hexadecimal digits

なおサーバからJSONで出力する場合には、バックスラッシュ自体がエスケープ文字とみなされてしまうため、「\\n」のようにバックスラッシュをエスケープする必要があります。

JSON - JavaScriptプログラミング解説より

とのことだ。 つまり、読み込むJSON側の改行を \n とすればよかったということのようである。

2012年10月31日 (水)

ココログでGoogleMapを表示できるようにしたい:JSONでハマる!

この記事、電車の中で書いております。

タイミングよく、席に座れました。

前回、地図表示のため、住所を緯度経度に変換(ジオコーディング)する必要があり、GoogleMapsAPIで提供されているAPIで変換できそうだ、ってところまで行きました。今回はそのつづきです。


jQueryのgetJSONでハマる!

ローカル環境でgetJSON試したが、思うようにうまくいかんのです。

最初から説明すると、リクエストを投げてJSONでうけとるのに、jQueryではgetJSONという便利な関数がある。

使い方はこんな感じ。

$.getJSON( "test_json.json", {
	data:XXXX, //キーと値
	hogehoge:XXXX // つまり先方へ送るパラメータですな
},function(data, status) {
	// 通信に成功したときの処理
    }
);

第1引数にURL、今回のだと
http://maps.googleapis.com/maps/api/geocode/json?
ですな、を渡し
第2引数にパラメータ 今回の場合だと

address:住所,
sensor:false

ですな、を渡して、通信が成功したら処理を走らせるという内容。さっそく下記のようなスクリプトを作成して実行してみた。

(function ($) {
	$.fn.showGoogleMap = function (options) {
		var defaults = {
			cursor:'pointer',
			borderTop:'none',
			borderLeft:'none',
			borderRight:'none',
			borderBottom:'none',
			background:'none',
			padding:'0',
			textDecoration:'underline'
		};
		var settings = $.extend({}, defaults, options);
		var url = "http://maps.googleapis.com/maps/api/geocode/json?";
		return this.each(function() {
			$(this).css({
				"cursor":settings.cursor,
				"border-top":settings.borderTop,
				"border-left":settings.borderLeft,
				"border-right":settings.borderRight,
				"border-bottom":settings.borderBottom,
				"background":settings.background,
				"padding":settings.padding,
				"text-decoration":settings.textDecoration
			});
			$(this).bind('click',function(){
				var add = $(this).text();
				$.getJSON(url, {
					address:add,
					sensor:false
				},function(data,status){
					alert("OK");
				});
				return false;
			});
		});
	};
}(jQuery));

つまりJSONが取得できたらアラートでOKがでるという仕組み。
どうですか?
東京都渋谷区

シーン…

アラートがでまへん。なんででしょ?

おつかいのブラウザがChromeならば、メニューから[ 表示 ] > [ 開発/管理 ]からディベロッパーツールを選んでひらいてみましょ。そして再度、上記の東京都渋谷区をクリックするのです。

そしてNetworkを選んでよくみると。エラーが出とります。
20121030_235522_2

エラー内容は下記です。
XMLHttpRequest cannot load http://maps.googleapis.com/maps/api/geocode/json?&address=%E6%9D%B1%E4%BA%AC%E9%83%BD%E6%B8%8B%E8%B0%B7%E5%8C%BA&sensor=false. Origin http://cs.cocolog-nifty.com is not allowed by Access-Control-Allow-Origin.
is not allowed by Access-Control-Allow-Origin でググるとあるキーワードがでてきた。

「クロスドメイン」

原因はこれやな。

クロスドメインとは?
異なるドメイン間での通信。あるサイトが、異なるドメインへ情報取得のため通信を行う際の制約がある。XMLHttpRequest を利用して行うがデータの送受信は同一ドメインに限られる。

詳しくは
XMLHttpRequest(wiki)
クロスドメイン通信とはなんぞや。CORSとはなんぞや
を参照しよう。

つまり、XMLHttpRequest の  Level 2では、HTTPヘッダにAccess-Control-Allow-Originが含まれているかどうかを見るので、この場合のエラーは maps.googleapis  からの応答は、http://cs.cocolog-nifty.com というドメインについて Access-Control-Allow-Origin を返していないということで、エラーとなっていたわけです。

なら、このドメイン間の制限をどうやって突破するのってことですが、ドン!

JSONP

JSONPとは
JavaScriptから派生した軽量なデータ記述形式であるJSONJavaScript Object Notation)を用いた関数呼び出しの仕組みのことである。IT用語辞典より

JSONPについては、下記のサイトの説明がわかりやすいです。

戯れ言++

サイトに記されている説明では、

JSONP (JSON with Padding)というのは JSON のデータフォーマットにちょっとした記述を加えて JavaScript の関数として呼び出せるようにしたもの
つまり

callback( { "name" : "Yasuhiro ARAKAWA" } );

"callback" の部分は関数の名前として使えるものなら何でもよい(戯れ言++より)

ということのようです。
さらにJSONPならば、ドメイン間の制約がとっぱらえるらしい。

先ほどのjQueryのURLを
http://maps.googleapis.com/maps/api/geocode/json?callback=?
として試してみましょ。

東京都渋谷区

ぬぬ。

20121031_02537

Networkをみると、GET 200 で取得できたっぽいぞ!
しかし、なぜアラートがでないんや!

よくみると、

Uncaught SyntaxError: Unexpected token : 
のエラーが出ている。いったいこのエラーはなんだ?

次回、getJSONは諦める?につづく…


※なおJSONPでデータを提供する側および取得する側は、セキリティに十分注意の上で使用しましょう。取得する側も

Cocolog_oekaki_2012_10_31_00_33
こんな広告に飛びついてJSONPでデータ取得するのはちと危険です。ちゃんと提供側のサイトを確認した上で取得するようにしたほうがよいでしょう。

以下参考ください。
なぜJSONPだとクロスドメイン制約を超えられるのか?
ここが危ない!Web2.0のセキュリティ 第3回 JSONPでのクロスドメインアクセス

2012年10月28日 (日)

ココログでGoogleMapを表示できるようにしたい【引き続き仕様検討】

前回「ココログでGoogleMapを表示できるようにしたい【仕様検討】」からのつづき。

ココログでGoogleMapを表示できないか。たんに地図を埋め込むだけだと、表示させたい住所が複数あった場合、地図がたくさんでてきて記事がうるさくなってしまう。

なので、住所をクリックすると地図を表示させるようにするといったのが今回の案。前回、仕込んだClassNameからテキストを拾えるところまでやった。

引き続き実験開始。

今回の目標

テスト1
テスト2
テスト3
テスト4
テスト5
テスト6

みたいな感じでHTMLを仕込んだものの、
テスト1

テスト2
テスト3
テスト4
テスト5
テスト6

といった感じで、aタグ以外はテキストにカーソルのせてもマウスポインタが変化しないので、それがクリックできるかわかりにくかった。

今回の目標は、showGoogleMapが設定されているテキストについて
1. クリックできることを示す
2. 住所をジオコーディングする

の2点をゴールとしたい。

1. クリックできることを示す

これは、.ClassName についてcssで 以下を適用させればよさげ。

.ClassName {
 cursor:pointer;
border-top:none; border-left:none; border-right:none; border-bottom:1px dotted #000000; background:none; }

ただし、ファイルはjsファイルのみで極力完結させたい(管理がしやすい)ので、cssファイルはつくらず、scriptで適用させたい。その上で、ユーザでカスタマイズできるようにする。

前回のjQueryを修正してみた。

(function ($) {
	$.fn.showGoogleMap = function (options) {
		var defaults = {
			cursor:'pointer',
			borderTop:'none',
			borderLeft:'none',
			borderRight:'none',
			borderBottom:'1px dotted #000000',
			background:'none'
		};
		var settings = $.extend({}, defaults, options);
		return this.each(function() {
			$(this).css({
				"cursor":settings.cursor,
				"border-top":settings.borderTop,
				"border-left":settings.borderLeft,
				"border-right":settings.borderRight,
				"border-bottom":settings.borderBottom,
				"background":settings.background,
			});
			$(this).bind('click',function(){
				var add = $(this).text();
				alert(add);
				return false;
			});
		});
	};
}(jQuery));

ざっくりと説明すると、
var settings = $.extend({}, defaults, options);
にて、defaultsを上書きしてユーザからのカスタマイズを反映させるようにする。

つまり、

$(document).ready(function(){
 $('.ClassName').showGoogleMap({
  cursor:'default',
  borderTop:'10px border #000000',
  background:'#000000'
 });
});

と、こんな感じでユーザで装飾を可能とするってわけ。

テスト1

テスト2
テスト3
テスト4
テスト5
テスト6


うし。できた。ちなみにこのテスト1〜6は下記のような感じで実行されてます。

$(document).ready(function(){
 $('.ClassNameTest2').showGoogleMap({
  cursor:'crosshair',
  borderTop:'10px border #000000',
  background:'#000000'
 });
});
つづいてジオコーディング。これはいろいろと調べること多そうだ。

2. 住所をジオコーディングする

地図表示には住所の緯度経度が必要だ。

ユーザに
昨日、<a href="47.751074, -120.740139" class="ClassName">ワシントン州</a>へ行ってきたよ。
とか、href にして緯度経度を入れてもらう?んな、アホな。

住所からの緯度経度の変換はこちら側(実装側)でなんとかするのが、ま、いいでしょう。で、ジオコーディングなんだけれども、
 

ジオコーディングとは
ジオコーディングとは、住所や地名、駅名などの地理的情報を、緯度・経度の座標値に変換する技術のことである。IT用語辞典より

ということです。で、この技術GoogleMapsAPIで提供されてないのかサイトへ行ってみると…

Google Maps API


ぬお?おおお?

GoogleMapsAPIのページの下の方に、こんなのがあったぞ。

Web サービス

URL リクエストを使用して、クライアント アプリケーションからジオコーディング、ルート、高度、場所などの情報にアクセスし、JSON や XML で返される結果を操作できます。
詳細

そしてこのページへアクセスすると、こんな感じ

でリンクがあって、そしてGeocoding APIへ行くと、おお!ありました。ありました。GoogleMapsAPIでジオコーディング提供されているっぽいぞ。

さらにサイトを読むとこんなことが書いてあった。

このサービスは、静的な(あらかじめわかっている)住所をジオコーディングし、地図上のアプリケーション コンテンツとして配置することを目的として設計されています。

そうそう。まさにやりたいのはこれ。

なになに。

使用制限
Google Geocoding API の使用は、1 日あたり 2,500 件までという位置情報リクエストのクエリ制限の対象となります(Google Maps API Premier をご利用の場合は、1 日あたり 100,000 件までリクエストを実行できます)。

ポータルサイトでのサービスだったらひっかかりそうだけど、わたしのこのサイトのように1日のPV数20くらいの個人サイトなら十分大丈夫でしょう。

使い方としては、
http://maps.googleapis.com/maps/api/geocode/json?address=東京都渋谷区&sensor=false
みたいな感じでリクエストすると、jsonが返却されるようだ。

パラメータについては下記。

  • address必須)- ジオコーディングする住所。*
  •      または

  • latlng(必須)- 人が読み取れる最も近い住所を取得する、テキストで表した緯度と経度。*
  • bounds(省略可能)- ジオコーディングの結果に大きくバイアスをかけるビューポートの境界ボックス(詳しくは、下記のビューポートのバイアスをご覧ください)。
  • region省略可能)- ccTLD(「トップレベル ドメイン」)の 2 文字の値として指定した地域コード(詳しくは、下記の地域のバイアスをご覧ください)。
  • language(省略可能)- 結果を返す言語。詳しくは、サポートされているドメイン言語の一覧をご覧ください。サポート対象の言語は頻繁にアップデートされるため、このリストがすべてのサポート言語を網羅しているとは限りません。language の指定を省略すると、ジオコーダでは可能な場合は常に、リクエストが送信されたドメインの言語を使用します。
  • sensor必須)- ジオコーディング リクエストが場所センサー搭載のデバイスからのものかどうかを指定します。この値には、true または false のいずれかを設定します。

詳しくは、
Google Geocoding API
を見るべし。

さっそくさっきのオレンジのリンクでリクエストしてみるとどうでっしゃろか。

http://maps.googleapis.com/maps/api/geocode/json?address=東京都渋谷区&sensor=false

うむ。いけたっぽい。

XML形式にもできるようだ。なるほどなるほど。

to be continued...

ココログでGoogleMapを表示できるようにしたい【仕様検討】

記事を読んでいて、この場所どこだろうと思うことがある。

サイトの中に地図が表示されていればよいが、住所だけが記されている場合、住所をコピペして地図検索して、と、たかだか数秒足らずの操作とはいえ面倒くさい。

もっと気軽に地図を表示できないだろうか?

たとえば、こうだ。

Google

これならば、記事の中に住所がたくさんあってもうるさくならずに、かつユーザにもわかりやすく地図を表示できそう。

素人ですが、なんとかかんとかやりくりして実装できないかチャレンジしてみたい。

仕様案ドラフト

アニメーションを手軽に組み込むために、実装はjQueryで検討したい。というか、jQueryをちょこっとだけいじったことがあるので。

実装案としてはこうだ。

$(document).ready(function(){
  $('.ClassName').showGoogleMap();
});

とかしておいて、記事の中にはこんな感じで仕込む。

昨日<a href="" class="ClassName">アメリカワシントン州</a>に行ってきたよ。
そのあと、<span class="ClassName">軽井沢</span>に行ってきた。

ClassNameをクリックすると、GoogleMapが画面上からビョーンと出てきて、その場所を示す。[閉じる]ボタンを押すと、GoogleMapが画面上にビョーンとスクロールして消える。

実験

ClassNameが複数になるので、クリックした際に、複数のClassNameを拾ったりしないだろうか。クリックしたそのClassNameだけ拾うことはできるかどうか?

ひとまず実験。HTML側ではこのようにしてみた。
テスト1
テスト2
テスト3
テスト4
テスト5
テスト6

div タグと aタグあるのは、クリックするイベントはタグにかかわらずに割り当てられるようにしたいため。で、ひとまず実験としてjQuery側はこのようにしてみた。

つまり、テスト1〜6という箱に、それぞれ click bind の知能をあたえるというわけ。で、各クリックすると、そのテキストがアラートで出力されるというのが、まずは最初のステップ。やってみましょ。

実験テスト:クリックしたテキストalert

テスト1

テスト2
テスト3
テスト4
テスト5
テスト6

できたっぽいですね。
まだまだ序盤。地図を表示するには、このテキストを緯度経度に変換しなければなりまへん。ジオコーディングってやつです。

to be continued...

2012年10月27日 (土)

Amazon(Kindleダイレクト・パブリッシング):出版前にやること【後編】

前回
Amazon(Kindleダイレクト・パブリッシング):出版前にやること【前編】 からのつづき。
Kindleダイレクトパブリッシングで本を出版するのに事前準備として必要なことは

1.米国納税者番号 (TIN) を取得
ということでした。そして

2.W8-BENをAmazonへ提出

ということでした。

関係ないですが、appleのマウス
Lasertracking
が感度良すぎて記事作成中に「前のページに戻る」してしまい、焦りました。仕事で別のシステム利用中に記事を作成していたら前のページに戻ってしまい、編集していた記事がすべて消えてしまったことが一瞬頭をよぎりました。

↓アラートが出て助かりました。
Alert

実は編集中の記事が失われることを恐れて、他のエディタで記事を書いてコピペ貼り付けしながらココログ書いていたのですが、今さらながらこのアラートがでることに気が付き、これで安心して直接記事を編集できます。

すみません。余談でした。

本日中に手続きだけでも完了させたいので急ぎます。

米国納税者番号(TIN)を取得しよう


税に関する情報(米国外の著者/出版社様向け)

https://kdp.amazon.co.jp/self-publishing/help?topicId=A1VDYJ32T5D3U4
を見ながら進めます。TIN取得のための申請窓口は

  • 電話
  • FAX
  • 郵送

があるよう。記入の仕方は、

IRSフォームSS-4 「雇用者番号 (EIN) の申請」の記入例

https://kdp.amazon.co.jp/self-publishing/help?topicId=201022180

を見ながら行えば問題ないでしょう。
 

SS-4とは
米国法人番号であるEINを取得するために必要な書類で、アメリカ合衆国内国歳入庁(IRS)に提出する。同庁のホームページから入手できる。
EINは米国で事業を展開した場合に租税条約の恩恵を受ける為に必要な番号となっており、例えば法人としてApple社のiPhoneアプリを有償で提供する場合などに取得が必要となる。

SS-4に記入したうえで、運転免許証、パスポート、その他IDカードのいずれかのコピーを添えてアメリカ合衆国内国歳入庁に提出する。提出方法は郵送、FAX、電話のいずれかとなっている。(
マネー辞典より)

関連:
http://www.irs.gov/instructions/iss4/ch01.html
http://www.irs.gov/pub/irs-pdf/p1635.pdf

つまり、
米国で事業を展開した場合に租税条約の恩恵を受ける為に必要な番号
それがEIN。

おい!
SS-4の記入の仕方とか説明が雑じゃね?

と思われるかもしれませんが、実は私3年ほど前にiPhoneアプリを作って売ろうとして、すでに雇用者番号を取得していたことに今さら思い出しまして。

Irs_2

EFTPSの書類も送られてきてましたが、すっかり放置しておりました。
ちなみに米国連邦税での納税方法が2011年1月1日よりEFTPSなっております。
アメリカ(米国)連邦税の納税方法がEFTPS(電子納税)のみになります:アメリカ起業コンサルタントのブログ

EINはもう取得済みということが判明したのでW8-BENに進みます。

※当時は情報が少なくとても苦労しましたが、今はiPhone/iPadアプリ制作関連で情報がたくさんでてますので、Amazonで用意しているページと合わせて確認すればいろいろと参考になるかと思います(いまって、AppStoreで有料アプリ配布時、EINはいらなくなったの? 検索するとそれらしき記事が出てきましたが。そうなの?)

ちなみに私の場合は、書面をコンビニのFAXから送付したら2週間後だったか(忘れてしまいましたが)「we assigned you an employer identification number」というのが書面で送られてきました。

 

W8-BENをAmazonへ提出しよう

これは
1. 下記ページより書類をダウンロード
http://www.irs.gov/pub/irs-pdf/fw8ben.pdf
2. 記入して原本をAmazonへ送付
送り先は下記
Amazon Services International, Inc.
Attn: Vendor Maintenance
PO Box 80683
Seattle, WA 98108-0683


で良いみたい。記入例はこちら。

IRSフォームW8-BEN「米国の源泉徴収に関する受益者の外国でのステータスの証明」の記入例

https://kdp.amazon.co.jp/self-publishing/help?topicId=201022240

が、こんなことがアマゾンのサイトへ書いてある。

注: 申請者が米国との租税条約を締結している国に居住し、有効なIRSフォームW8-BENを有効なTINと併せて提出されない限り、当社はロイヤリティの支払いから米国の所得税として30%を源泉徴収する必要があります

それからこんな事も書いてあった。

フォームのPart IIに記入する際は、W-8BENに関する説明をよくお読みください。

フォームのPartIIとは
Claim of Tax Treaty Benefits (if applicable)
 ↓
租税条約の恩典を主張する(該当する場合)(Google翻訳)

ということで、もろ関係しそうな気配。Amazonのこちらの記入例が掲載しているけれども念のため内容を確認しておいた方がよいだろう。

PartII Claim of Tax Treaty Benefits (if applicable)
2番目:税の恩恵の主張(もし当てはまるなら)

a. The beneficial owner is a resident of    within the meaning of the income tax treaty between the United States and that country
受益者は米国との間の租税条約の意味の範囲内の居住者とその国である(Google翻訳)

つまり、米国と租税条約が結ばれている国であれば恩恵を受けられるってことで、日本と米国は租税条約が結ばれているので、当てはまるから Japan 記載しチェックを入れる。

b. If required, the U.S. taxpayer identification number is stated on line 6 (see instructions)
必要であれば、米国の納税者番号は(手順について)6行目に記載されてい(Google翻訳)

この恩恵を受けるには納税者番号が必要で、6番目の項目に納税者番号が書いてありますか?という確認。6番目の項目に記入欄があるので、忘れずに取得した納税者番号を書く。
※「い」で終わってますが、コピペミスではありません。

c. The beneficial owner is not an individual, derives the item (or items) of income for which the treaty benefits are claimed, and, if applicable, meets the requirements of the treaty provision dealing with limitation on benefits (see instructions).
受益者は、個別ではなく、条約の特典が主張されている所得の項目(または項目)が派生し、また、該当する場合は、(説明を参照)の特典の制限に対処する条約規定の要件を満たしています。(Google翻訳)

よーわからんから、Amazonのページ内に翻訳があったので、そちらをコピペ
  c.   受益者は個人ではありません。所得に関連して租税条約上の便益をうけるには、該当する場合、租税条約・条項上の利益の制限に関する要件を満たしています。

これ、迷うところで、というのもAmazonの記入例を見ると、会社での申請になっているからこのチェックだろうが、わたしの場合は個人での申請だから項目の3もIndividual になるわけだし、これはわたしの場合はチェックはいらなそう。
※チェックなしで出してみて、なんか言われたら修正するという方向で。

d. The beneficial owner is not an individual, is claiming treaty benefits for dividends received from a foreign corporation or interest from a U.S. trade or business of a foreign corporation, and meets qualified resident status (see instructions).
受益者は、個々ではありませんが、(説明を参照)外国法人の米国での取引または事業から外国法人や目的から受け取った配当金の条約の恩典を主張し、資格在留資格を満たしています。(Google翻訳)

個人(individual)なので、これは関係なしかな。

e. The beneficial owner is related to the person obligated to pay the income within the meaning of section 267(b) or 707(b), and will file Form 8833 if the amount subject to withholding received during a calendar year exceeds, in the aggregate, $500,000.
受益者は、セクション267(b)または707(b)の意味の範囲内で所得を支払う義務者に関連しており、源泉徴収額が集計対象で、暦年超える中に受信した場合、フォーム8833を提出します、50万ドル。(Google翻訳)

米国の法律の267条と707条に関連した内容のよう。んじゃ、267条と707条とは何かってことですが、あずさ監査法人サイトにある下記PDFが参考になるかと。
http://tax.kpmg.or.jp/knowledge/article/2008/__icsFiles/afieldfile/2012/04/26/200807.pdf

米国企業とのパートナーシップとかグループとか、わたしには関係なしにて e はチェックなしでOK。


うし。

さっそくW-8BENを記入してAmazonに送付しよう!

Amazon(Kindleダイレクト・パブリッシング):出版前にやること【前編】

小学校や中学、高校時代、レポート用紙に記事を書き、ホチキスドメして学内で回し読みしていたあの時代。
某大学の正門前で机を無許可で配置し自費出版本を秋風に吹かれながら販売していたあの日、あの頃。
まるで遠い昔のようです。

夢のような時代が到来しました!なんと、アマゾンで自費出版ができるというではありませんか!


実はこの本を読んで、前々から米国アマゾンで自費出版ができることは知っておりました。

それがいよいよ日本上陸です。
やったー!


もちろん、いきなり最初から100万部突破!でなくていいんです。わたしの手がけた本が、不特定多数の人に触れることができる窓口さえできればいいんです。将来、たまたま何かのきっかけで、ドキューンと売れればいいのです。そう、マヨネーズのように。
米アマゾン部門売り上げ1位 キユーピーマヨネーズ大人気

そんなわけで、さっそくアマゾンで本の出版へ向けてチャレンジ開始しました。

Kindleダイレクト・パブリッシングに登録

URLはこちら
https://kdp.amazon.co.jp/self-publishing/signin

1. アカウントの登録
下記サイトを参考にしました。
Amazonの自費出版サービス「Kindle ダイレクト・パブリッシング」が日本でも開始

登録時、エラーになったのでよくみると、下に銀行口座を入力する欄があり、それを入力していなかったためでした。銀行口座を入力したら、無事アカウントを作成できました。

2. ひととおりドキュメントへ目を通す

なにせわたしはどしろーとですから、出版にあたりツールの使い方や税、収入の入り方など無知なわけでして。なので、ざっくりとサイト上のドキュメントを見てみましょ。

支払い関連

まずこちら。
https://kdp.amazon.co.jp/self-publishing/help?topicId=200956640

Amazonからの支払いについてはこんな感じみたい。おえかきツールで作成してみました。

Cocolog_oekaki_2012_10_27_12_37

ロイヤリティとは?
権利に対する対価。

つまり

======

アマゾンで本を売った

売れた
アマゾンの利益になった

利益から本の作成者へ
権利利用分を支払い
======

そう。印税のことである。ちなみに日本における他の業界では、
音楽業界についてアーティストが手にする収入が参考になりそう
日本の出版業界…ググりましたが私は基本結果を1ページ目しかみないこともあり、見つかりませんでした。以前、週刊文春の連載コラムで堀井憲一郎さんが印税についてリアルな数字で取り上げていました。いま本になっているのかな?
いちおうその関連ページ:
印税生活
アマゾンから支払われるロイヤリティは
・35% のロイヤリティオプション
・70%のロイヤリティオプション
と2種類あるみたいです。ただし、70%のオプションは、配信コストだとか手続きとかいろいろあるっぽい。ま、私みないな素人は最初は35%が無難かもだねー。

参考:KDPの価格設定

https://kdp.amazon.co.jp/self-publishing/help?topicId=A29FL26OKE7R7B


税について

税って大事です。所得税も、固定資産税も、都市計画税も、自動車税も、国民健康保険税も、ガソリン税も、消費税も…あげれば切りないね。

Amazonで本が売れた場合、税の取り扱いはどうなるのだろうか。
そんな素朴でかつ大事な疑問がまっさきに思い浮かび、ページをサーフィンしていると見つかりました。↓
税に関する情報(米国外の著者/出版社様向け)

ざっくりと読むと、Amazonでは、米国以外の居住者であろうと、支払ったロイヤリティについては米国の内国歳入庁 (IRS) へ報告するとともに、源泉徴収を納めるそう。(ちなみに源泉徴収とは、第二次世界大戦中にナチス・ドイツが国歌国家収入増のためはじめた政策とか。wikiより)
んで、
米国以外の居住者に対するロイヤリティの支払いに適用される標準的な源泉徴収税率は30%です。
ということらしい。つーことは、さっきの図をもう一度がんばってお絵かきツールしてみると、
Cocolog_oekaki_2012_10_27_13_00

※枠からテキストがはみ出ていますが、気にしないでください。


ということですな。そして、このままだとここから日本の税が課せられるというわけでありんす。

しかし、サイトにはこう続いて記されています。

米国以外(米国との租税条約を締結している国)に居住している出版者の場合、有効なIRSフォームW8-BEN(および必要なその他の書類)を当社に提出していれば、受け取るロイヤリティに対して適用される米国の源泉徴収税が軽減されます。注: 日本居住者の場合、内国歳入庁 (IRS) に適切な申請を行うと、源泉徴収は免除されます。

あたまのよいあなたなら、もうお気づきですね。
そうです。iPhoneアプリのあれです。

W8-BENをAmazonに提出すればIRSへの支払いがあれするようです。つまり
* 米国納税者番号 (TIN) を取得(W8-BENを取得するのに必要)
* W8-BENを取得してAmazonへ提出
をすれば、租税条約上の便益を受けられるってことです。

参考:税に関する情報(米国外の著者/出版社様向け)

https://kdp.amazon.co.jp/self-publishing/help?topicId=A1VDYJ32T5D3U4


なので、出版前にやることは
米国納税者番号 (TIN) を取得しよう!
W8-BENをAmazonへ提出しよう!


ということで、to be continued...
テレ東(すみません、東京MXでした)深夜に放送しているジョジョのアニメ、おもしろいですね。


PS. kindle発売&Kindleダイレクト・パブリッシング日本スタート!&日本で自費出版ブームが来るとワーワーしている記事もありますが、この辺の手続きがちょっとしたハードルだと個人的には思うんですよねー。ココログでもココログ出版でブログを本にすることはできるようですが、電子書籍として気軽に販売できるといいなーと思ったり。国内での販売なので、税の手続きも国内だけで済むし。ポータルページあるし(個人がサイト作って販売しても見向きもされないしー)。

2012年10月26日 (金)

ココログでソースコードのハイライト

よくブログで見かけるhtmlやcss、javascript、php、perlなどなどなどソースコードをハイライトするあれ。ココログでもできるのか試してみたい。

どうだろうか? ↓これ。


ぬおおーでけた。



と興奮気味なのは、実は最初二度ほどうまくいかなかったから。
失敗した原因は

1. この記述をし忘れてしまったから

忘れずに、SyntaxHighlighter.all() を実行しましょう。

それから
2. pre の class の記述が違ってた。
http://www.netyasun.com/syntaxhighlighter/
のサイトから下記をそのままコピペしたところ、c#用のjsが読み込まれていなかったからただの Hello World と表示されてしまったのです。

<pre class="brush: c-sharp;"> Hello World </pre>

では、さっそくココログでソースコードの装飾を使うためのおさらいです。

SyntaxHighlighter 3.0.83

をココログで使用するには・・・

1. ファイルをダウンロード

のDownloadよりSyntaxHighlighterのファイルをダウンロードしましょう。

2. ファイルをファイルマネージャーよりアップロード

数が多いのであれですが、コントロールパネルのファイルマネージャーよりフォルダを作りながら、コツコツとアップロードしていきましょう。

3. scriptおよびcssの読み込み

有料のプロプランなら上級テンプレートのheaderにjsとcssのパスを記述しファイルを読み込みましょう。わたすはベーシックなので、記事の中にベタ書きです。
読み込むjsとcssは、1でダウンロードしたフォルダ内に test.html があるので、そのファイルのheaderより /shCore.js とほか必要なものを読みこんでおけばよいのではないかと。

4. pre の記述

対応表は、
Brush nameBrush aliasesFile name
ActionScript3 as3, actionscript3 shBrushAS3.js
Bash/shell bash, shell shBrushBash.js
ColdFusion coldfusion shBrushColdFusion.js
C++ cpp, c shBrushCpp.js
C# c-sharp, csharp shBrushCSharp.js
CSS css shBrushCss.js
Delphi delphi, pas, pascal shBrushDelphi.js
Diff diff, patch shBrushDiff.js
Erlang erlang shBrushErlang.js
Groovy groovy shBrushGroovy.js
Java java shBrushJava.js
JavaFX jfx, javafx shBrushJavaFX.js
JavaScript js, jscript, javascript shBrushJScript.js
Perl perl, pl shBrushPerl.js
PHP php shBrushPhp.js
Plain Text plain, text shBrushPlain.js
PowerShell ps, powershell shBrushPowerShell.js
Python py, python shBrushPython.js
Ruby rails, ror, ruby shBrushRuby.js
Scala scala shBrushScala.js
SQL sql shBrushSql.js
Visual Basic vb, vbnet shBrushVb.js
XML html, xhtml, xml, xslt shBrushXml.js
となっております(http://www.netyasun.com/syntaxhighlighter/ からの全面引用)。htmlなら、
<pre class="brush: xhtml;"> Hello World </pre>
こんな感じですかね? 試しに↓。どうですか?

Hello World.

できたっぽいですね。
若干表示に時間がかかるのは、やはりheader外でjsを読み込んでいるからでしょうか? プロプランだとその辺を上級テンプレートでさらりと試せるので、うらやましいです。

はじめまして

Hello.

iPhone5購入した時、パッケージを開封すると黒の包が入っていた。
包を開封すると「Hello.」と出てきた。
なんかいい感じだったので、マネしてみた。
Iphone5_hello