ryow.net Blog tag:ryow.net,2009-03-20:/blog//1 2010-02-03T02:44:03Z Flash大好きWebクリエイタ ryow（りょう）のブログです。近頃はアクセス解析エンジニアです。よくあるよくある。 Movable Type Pro MacBookProがなんだか値下がり中 tag:ryow.net,2010:/blog//1.462 2010-02-01T14:15:08Z 2010-02-03T02:44:03Z iPad発表の影響なのか、一部のMacBookProが値下がり中です。 去年の年... ryow iPad発表の影響なのか、一部のMacBookProが値下がり中です。 去年の年末から目をつけていたものの、年明け早々からじわじわと下がり始めて、今は底値っぽいかんじ。 昨日(1/31)が最安で、少し戻したものの、やっぱり安いです。たとえばMacBookPro15.4インチCPU2.53のモデル(MC118J)では、Appleストアでは 168,800円のところが、クリスマス前までは15万円くらいで高止まりしていたものが、昨日は138,000円。１つ下位の機種のよう。1日でけっこう上がっちゃいましたが、それでも安いと思います。もうちょっと粘るか！！ **[[MacBook Pro 2260/13.3 MB990J/A:http://www.amazon.co.jp/exec/obidos/ASIN/B002CJM7O4/ryownet-22]] -2/1現在 94,500 #ref(http://ryow.net/blog/2010/02/mac1.png,nolink) **[[MacBook Pro 2530/13.3 MB991J/A:http://www.amazon.co.jp/exec/obidos/ASIN/B002CJM7OO/ryownet-22]] -2/1現在 135,000 #ref(http://ryow.net/blog/2010/02/mac2.png,nolink) **[[MacBook Pro 2530/15.4 MC118J/A:http://www.amazon.co.jp/exec/obidos/ASIN/B002CJM7OY/ryownet-22]] -2/1現在 144,800 #ref(http://ryow.net/blog/2010/02/mac3.png,nolink) 僕が会社で使ってるのもこのタイプ。Spacesで２番のウィンドウにFlexとFlashとPhotoshopを常駐させてて、１番でSafariブラウジング。Mac使うとFirefoxがもっさり感じて、Safariが調子良いです。 Google Analytics チートシートを日本語に訳してみた tag:ryow.net,2010:/blog//1.461 2010-01-22T09:19:41Z 2010-01-22T09:41:59Z via：conversation marketing。 海外でちょっと話題にな... ryow via：conversation marketing。
海外でちょっと話題になったページみたい。
PDFでダウンロードできます。

コードを見てみた結果、解析系ブロガーがこれを記事にしない理由がわかりました。だって、基本的すぎて読む価値ないんだもん。そもそも、こういう記事に反応する人は解析ツール使ったことがあるだろうし、使ったことがない人が念のためブクマするには専門的すぎて使えないだろうし。
あ、チートシートってそんなもんだったりする？

]]> セットアップ

サイトの<head>〜</head>に読み込みスクリプトを書こう：

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/ script%3E"));
</script>

ページの</body>直前にトラッキングスクリプトを書こう：


<script type="text/javascript">
try{
  var pageTracker = _gat._getTracker("UA-xxxxxx-x");
  pageTracker._trackPageview(); 
} catch(err) {} 
</script>

なんでheadとbodyに分けてるのかというと、公式で良いとされている、すべてをbodyに書く方式では、ページの読み込みが不完全な場合に、クリックをトラッキングするスクリプトを動かそうとした場合にエラーになったりするからです。

サイトがサブドメインを使っている場合はトラッキングコードをカスタマイズしよう：


<script type="text/javascript">
try{
  var pageTracker = _gat._getTracker("UA-xxxxxx-x");
  pageTracker._setDomainName(".example.com"); 
  pageTracker._trackPageview(); 
} catch(err) {} 
</script>

キャンペーン

リンクやリスティングごとに参照元キャンペーンを分けられるようにしよう：

キャンペーンのソース、メディア、キーワード、コンテンツを設定します。

Adwordsを使っている場合は、Auto-Taggingを使っておけば間違いない。

例１）こんな感じのリンクになるよ
mysite.com/index.php?utm_source=A&utm_medium=B&utm_campaign=C&utm_term=term&utm_content=D

例２）sitesite.comのバナーからのリンクで、ディスカウントをうたった2010年春のキャンペーンにつけるリンク：
mysite.com/index.php?utm_source=sitesite_com&utm_medium=banner&utm_campaign=s2010&utm_content=discount

例３）例２と同じサイト、同じ時期、でもバナーのキャッチコピーがディスカウントじゃなくてスタイルが変わったことをうたったキャンペーンにつけるリンク：
mysite.com/index.php?utm_source=sitesite_com&utm_medium=banner&utm_campaign=s2010&utm_content=styles

例４）例２と同じサイト、同じ時期、でもバナーじゃなくてリスティング広告（キーワードはウェディングドレス）のキャンペーンにつけるリンク： utm_source=bing&utm_medium=cpc&utm_campaign=s2010&utm_content=discount&utm_term=wedding%20dresses

公式リンクURL生成ツール

フィルタ

例）自分のIPアドレスをカウントしないときのフィルタ：

^66\.135\.149\.(1(9[2-9])|2([0-1][0-9]|2[0-3]))$

公式IPアドレス除外用正規表現作成ツール

コンバージョン

目標はちゃんと設定しないと取れないよ！

URLアクセス、サイト滞在時間、１セッションあたりの閲覧PV数、を目標に設定できる。
その他、Eコマースサイトの場合はトラッキングタグのカスタマイズをしっかりやらないといけないよ。

公式eコマースのトラッキングタグ作成について

小ネタ

404エラーをトラッキングしよう

どこから来たユーザが404を掴まされているかを把握するといいことがあるかも。
カスタム404.htmlにこのコードを書こう。

でもそもそも404はhtaccessか何かで設定しておかないと、コードを入れる場所さえありません。（親切じゃない）

<script type="text/javascript">
try{
  var pageTracker = _gat._getTracker("UA-xxxxxx-x");
 pageTracker._trackPageview("/404.html?page=" + document.location.pathname + document.location.search + "&from=" + document.referrer);
  }catch(err) {} 
</script>

アドバンスフィルタでこんなやりかたもあるよ

例１）検索結果の２ページ目からの訪問を計測するフィルタ：
http://www.distilled.co.uk/blog/seo/tracking-referrals-from-second-page-of-google-in-google-analytics/

こんなん使えるかー！！

]]> AlivePDF 1.49でFlash Player10だけでPDFを作る tag:ryow.net,2010:/blog//1.460 2010-01-21T03:11:37Z 2010-01-21T03:14:04Z AlivePDFをFlash Player10で使えば、すべてswfだけでPD... ryow AlivePDFをFlash Player10で使えば、すべてswfだけでPDFを作り保存することができます。 create.phpを使わずに出来るというのはスゴい便利。

使い方はこんなかんじ。
ここではAlivePDFを拡張したMBPDFを使ってますが書き方は同じ。

var myPDF:MBPDF = new MBPDF( Orientation.PORTRAIT, Unit.POINT, Size.A4 );
myPDF.charSet = MBPDF.SHIFT_JIS;
myPDF.addMBFont(MBFontFamily.GOTHIC,MBPDF.CMap_SJIS);
myPDF.setDisplayMode ( Display.REAL ); 
myPDF.addPage();
myPDF.addMultiCell ( 210, 5, "いろはにほへとちりぬるをわかよたれそつねならむ",null,"L" )
]]> よく使うのはこのメソッド。

addMultiCell(width,line-height,text,border,align)

borderはobject指定になってますが「1」をつければいいだけ。
alignは"L","C","R"で。

myPDF.drawRect(new Rectangle(10,120, 170, 61));

みたいなメソッドもあり、あんまり複雑な図形を使ったりしなければ、swfを作る感覚でPDFを作れる。

フォント問題

フォントはTimes,Arial,Courier,Helveticaなどが選択可能。
通常では日本語を使えない。
日本語を使うには、MBPDFを使う。MBPDF開発者のブログ(harhid-labo.com/PDF作成その2)では記事が削除されてる?(404だった)ので、Flashから日本語PDFを生成（AlivePDF+MBPDF）を見て真似してみました。

MBPDFを使えば、MSゴシックだけ使える。いちおうMBFontFamilyクラスにはPGOTHICやPMINCHOなどあるけど、MSゴシックだけ。

ちなみに、AlivePDFのFontFamilyとMBFontFamilyが１ファイルに混在するとAdobe Readerで読めなくなる。
（英数にArial、日本語にGOTHIC、というふうに使い分けることができない、ということ。macのプレビューでは混在していても読めるけど）

ちなみに、alivePDF1.5では、マルチバイトフォントがサポートされつつあります。
でもフォントファミリーが「Arial Unicode MS」しか使えず、かなり文字が汚い。外人さんが左手で書き写したひらがなみたいな文字です。
Arial Unicode MS

結論

文字がMSゴシックだけでいいのなら、AlivePDF1.49は十分実用できる。
今後バージョンが上がって、メイリオやヒラギノが使えたら神ライブラリ認定ですね。

フォントの埋め込み方がよくわからなかったですが、簡単に埋め込んで使えるなら、このままでもいいのかも。

サンプル

うそ履歴書を作るPDFメーカーをさくっと作ってみました。

ソースはFlexプロジェクト。mxml１枚なので中身見てもらえればFlashでもOK。
ダウンロードはこちら(zip)。

]]> as3でテキストファイルを作成、ダウンロードする tag:ryow.net,2010:/blog//1.459 2010-01-19T10:35:33Z 2010-01-24T11:53:32Z テキストファイルをローカルにダウンロードしたかったんです。 そのためにAIRを作... ryow テキストファイルをローカルにダウンロードしたかったんです。

そのためにAIRを作るのはアホらしいと思いながら試したところ、あっさり動きました。flash player10です↓

やってることは、単純にStringをfilereference.saveでローカルダウンロードしてるだけ。
これって、ブラウザ上でテキストだけじゃなく、JSやCSSも作ってダウンロードできそう。便利。

mxml

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
 width="300" height="200">
	<mx:VBox>
		<mx:Label text="テキストを入れてね" />
		<mx:TextArea id="myTa" height="100" width="200" />
		<mx:Button label="toTXT" click="clickTxtBtn(event)" />
	</mx:VBox>
	
	<mx:Script>
		import flash.net.FileReference
			
			private function clickTxtBtn(e:MouseEvent):void{
				var _str :String = myTa.text;
				
				var fileRef:FileReference = new FileReference();
				fileRef.save( _str, "textarea.txt" )
			}
	</mx:Script>
</mx:Application>
]]> GAの認定試験Google Analytics Individual Qualificationに合格したよ tag:ryow.net,2010:/blog//1.458 2010-01-11T07:35:32Z 2010-01-11T08:42:46Z GAIQというgoogleのanalytics認定試験（オンラインテスト）があ... ryow #ref(http://ryow.net/blog/2010/01/gaiq1.jpg,nolink) GAIQというgoogleのanalytics認定試験（オンラインテスト）があって、初受験で見事！　一発合格しましたよ！ アクセス解析エンジニアを名乗るなら、「ただの詳しい人」じゃなくて「google認定」があったほうがいいよね。 試験はこちら http://google.starttest.com/ 90分で70問、70%以上が合格ラインでした。 上記ページでユーザ登録して（googleアカウントとは別）、 $50を払うとメールにアカウント番号みたいなのが送られるので、 上記ページに入力すると試験開始。 試験勉強は、Flashビデオで見れます。全部英語なので、音を消して画面を見るだけでもいいかも。全3時間くらいだけど、第３章、第４章だけ見とけば問題なし。 http://www.google.com/support/conversionuniversity/?hl=en *テスト用に勉強したこと **基本的なこと -Eコマースのゴールは１セッションで複数カウント -サイトのゴールは１セッション１カウント -Eコマースのコードはbodyタグ終わりじゃなくて、headがよい -$index は１セッションあたりのＰＶ。複数回見ても only count once per visit -Adwordsはとにかくautotaggingしる！ **クッキーについて -utma 2年間有効なクッキー。 中身は適当な数字じゃなくて、ドメインハッシュと、訪問時間、 現在時間、セッション中のPV数。 -utmb 30分有効なクッキー。PVが増えるとそこから30分。 -utmc テンポラリクッキー。ブラウザを開いている間継続する。 utmbと一緒に参照して、どちらかがなければ新セッションとなる。 -utmz 6ヶ月有効なキャンペーン用クッキー。 -utmv 2年有効なユーザ定義変数（setCustomVarの値）用のクッキー。 **正規表現 使ったことがなければ一度見直しておくべし。 ドットをバックスラッシュドット、ハテナをバックスラッシュハテナにしたり、「^」「$」「[]」「|」などの記号の意味が分かっていればOK。 **英語 なんとかなるだろうと高をくくって受験したけど、なんとかなりました。 Flex3+AIR1.5でブラウザを作る tag:ryow.net,2010:/blog//1.457 2010-01-09T02:18:55Z 2010-01-09T02:41:34Z mx:HTML だけでブラウザが作れちゃう手軽さと、mxmlの書きやすさ（オブジ... ryow >mx:HTML だけでブラウザが作れちゃう手軽さと、mxmlの書きやすさ（オブジェクト指向にしなくていい。なんだったら全部private function で書いちゃえばとりあえず動くから楽チン）のせいで、Flex builderから離れられなくなって、最近はFlashがただのパーツswf作成お絵かきツールと化しちゃってるこのごろ。 こうもFlexにベッタリだと、日常使うツールは全部Flexで作りたくなっちゃいます。 たとえば、ブラウザ。 Firefoxは重いし、IEはアホだし、Chromeは「最近の履歴」がいきなり出ちゃって恥ずかしいので、よく見るページだけを登録した、専用ブラウザを作っちゃえば効率化がはかれるかと思って試してみました。 #ref(http://ryow.net/blog/2010/01/testbrowser1.jpg,nolink) *必要な要素 -戻るボタン -アドレスバー(=検索バー) -組み込まれたお気に入り（追加削除できない） これくらいか。 アドレスバーは、「http」から始まってるとlocation書き換え、それ以外はgoogle検索にしました。 **お気に入り -google news -google analytics -twitter -gmail あれ、こんなもん？ 「ブログを見る」「はてなを見る」「ヤフーを見る」を除外すると、なんとグーグルとツイッターしか見ていないことが判明しました。 でも、ツイッターもいらないかも。 ということは、google専用ブラウザってこと？ アホかと思いつつも、適当にボタンを３個作り、ニュースとAnalyticsとgmailだけURLRequestする超シンプルブラウザをAIRでわざわざ作って試してみました。 *結果 -AIRのWebkitは意外と表示が速い -google newsはいい感じに見れる -googleアカウントにログインすると時々落ちる -analyticsはログインした時点で「SyntaxError: Expression too deep」のエラーが出て動かなくなる -と思ったらちゃんと見れるときもある -gmailはちゃんと見れた 実用性はともかく、「仕事に邪魔にならないサイトだけ見れる」みたいな使い方はありかも。 と、思いついてからこの実験を終えるまで（ブラウザ作成時間も含めて）わずか''10分''。 いやぁ、Flex builderはすげーわ。 もうすぐ(?) Flash builderになっちゃうけど。 Analyticsメソッドが地味に更新されてた（重要な部分が廃止/新規追加されてる） tag:ryow.net,2010:/blog//1.456 2010-01-05T02:31:24Z 2010-01-06T02:39:17Z 去年、こちらのエントリでまとめてたAnalyticsのメソッド一覧(GAapi)... ryow 去年、[[こちら:http://ryow.net/blog/2009/02/21-084320.php]]のエントリでまとめてたAnalyticsの[[メソッド一覧(GAapi):http://code.google.com/intl/ja/apis/analytics/docs/gaJS/gaJSApi.html]]が更新されてました。 一番の衝撃は、これまでユーザ定義変数として広く使われていた''setVarメソッドが廃止になった''こと。これは、かわりにsetCustomVarメソッドになりました。引数の使い方も変わりました。 *廃止 -_initData() いままで無意識に挿入してた（GAの初期版では公式でこのタグがセットされてた） のに、ついに廃止になりました。 -_setCookiePersistence(milliseconds) -_setCookieTimeout(newDefaultTimeout) -_setSessionTimeout(newTimeout) -_setVar(newVal) おそらく、廃止によって最も影響が出るであろう部分。 *新規：非同期版トラッキング用。 -_getTracker(accountId) -_createAsyncTracker(accountId, opt_name) -_getAsyncTracker(opt_name) -push(commandArray) *基本情報 -_getAccount() UA-12345-1とかのアカウント番号が返る -_getVersion() 2009.01.05時点では4.6.5でした。GA.jsのバージョンか で、一覧を作ろうかと思ったけど、あんまり使わないから、アクセス解析エンジニアとして使えると思った(気になる)メソッドだけ書き出します。 -_setCustomVar(index, name, value, opt_scope) ユーザ定義変数を設定します。今回から４つの変数を設定でき、 スロット番号/カテゴリ名/個別名/ページレベル　という分類。 pageTracker._setCustomVar( 1, "Section", "Life & Style", 3 ); -_deleteCustomVar(index) セットしたユーザ定義変数をクリアします。 index番号はsetCustomVarの第一引数の番号。 -_getVisitorCustomVar(index) ユーザ定義変数を取得します。index番号は同上。 *よく使うもの -_link(targetUrl, useHash) -_linkByPost(formObject, useHash 外部サイトにリンクするとき、セッションを（ていうかcookieを）引き継ぐ パラメータを作ってくれるもの。リンクのＡタグに埋め込む。 -_setDomainName(newDomainName) 外部サイトもまとめてカウントするとき用。まあ、"none"ですよね。 -_trackEvent(category, action, opt_label, opt_value) これがない時代は不便でした -_trackPageview(opt_pageURL) これは基本。 なんだけど、直帰ページで、ページ内に架空URLを作ってカウントすれば PV2になるので直帰じゃなくなるという技が使えます。 あとはどのボタンが押されたか、とか。架空URLをたくさん発行しておけば、 その分だけコンバージョンにつながる道筋が明らかになります。 森に落として歩くパンのかけらみたいなもの。 **その他 こまかいことを言うと、通常のトラックは_gatでメソッドを呼んで、非同期は_gaqを使ってクエリをpushしていくという違いがありますね。 非同期版は使いどころをまだまだ探っていかないといけませんが、今年も勉強していきます！ 限定セール商法について聞いた話 tag:ryow.net,2010:/blog//1.455 2010-01-04T03:49:27Z 2010-01-04T03:52:31Z 聞いた話。 ネットとは全然関係ない分野です。お正月は福袋や初売りセールがあります... ryow 聞いた話。 ネットとは全然関係ない分野です。お正月は福袋や初売りセールがありますが、いわく、ケータイのオークション（たぶんヤフオク）で、好きなブランドの福袋を探してたらしいんです。 すると、当然のように、福袋が出てきます。新品未開封のとかが。値段はともかく、気になったのは中身とのこと。 東京でも、仙台でも、福岡でも、どこのショップの福袋も、一覧にしてみると中身が同じだったらしいんです。まるで都市伝説です。いや色違い程度の差はあったものの。 僕のイメージでは、前年売れ残ったものやセール対象品を店員が大みそかの夜にがんばって袋詰めして、なんとなく5000円の福袋に20000円分の商品が入ったよ、やったね、という作り方をしてるのかと思ってたんですが、どうやら違うっぽい。 最初から福袋用の商品を詰めてるってことか。 そう考えると、この時期の限定セールみたいなものも、結局はセール用の商品を新しく持ってきて、さもお買い得のように見せているってことなの？ ということは、アメ横の年末たたき売りも、本当に10000円のカニをたくさん入れて6000円と書いてあるのに2000円で売ったりしてるのも、実際は2000円で出せるカニでしかないってことなんでしょうか？ 一部の業界だけの話なんでしょうかねぇ？？ 2009ふりかえり tag:ryow.net,2009:/blog//1.454 2009-12-29T11:50:39Z 2009-12-29T12:18:30Z 2009年はどうだったっけ？　というのを振り返ります。超個人的メモ。 なんだか、... ryow 2009年はどうだったっけ？　というのを振り返ります。超個人的メモ。 なんだか、趣味＝仕事、みたいなスタンスじゃないと僕は動けないらしいことを再確認した年でした。 というのは、やったことのない仕事や、打ち合わせがひたすら続くようなのは性に合ってなくて、腐ってました。 今年の夏くらいから、ウェブデザインとFlexとアクセス解析という僕の分野（というかそれしかできない）が仕事になって、なんとかどうにかご飯を食べることができました。 **アクセス解析 2009年はアクセス解析が熱かった年だと思います。 webにおいて、サイトやサービスを作るという段階はどうやらひと段落してきた感があります。それは、面白いサービスや、奇をてらった表現や、広告サイトみたいなのが出尽くした感、というか個人的なお腹いっぱい感があって、いつからか、イケてるサイトをチェックするという習慣がなくなって（疎かになっただけ？）ました。 その流れは、「ツクルヒト」と「作らせる人」に『制作会社』が別れてきてる感があるなぁ、と思ったのがきっかけなのかも。 代理店や、大きめの制作会社は、「作らせる人」にまわって、いわゆる外注である「ツクルヒト」が実制作をこなすという役割分担です。それは別に全然正しいことです。でも、そうなると「作らせる人」っていうのは、ディレクションが仕事になるんだけども、技術的に込み入った部分とか、演出とか、限界とか、そこらへんのトレンドのキャッチアップが上手く出来てないような、そんな感じを受けていました。個人的にね。 あんまりサイトとか見てないのにね。何言ってんだ。 で、その結果どうなったかというと、「作らせる」だけの代理店は、その存在価値を失いつつある現状が明確化してきてる、と思うようになりました。 なんでかっていうと、「一回作ったら終わり」なサービスが多いからです。 そういう刹那さを感じてから、仕事もろくにないぶらぶら社員な僕は、サービスを作っても終わりじゃないプロセスに自分の軸を置かなきゃ、仕事がなくなる（＝メシが食えなくなる）と思いました。 自分が「ツクルヒト」なだけではいられなくなった、と感じたわけです。 そこで目をつけたのが、アクセス解析でした。 ものづくりは、作ることの段階を進めると、「よりよいものを作る」ことにたどり着きます。じゃあ、その「より良い」の指標とは何なのか。それは、作ったものに対するユーザの評価を定量的に見た結果、わかるんじゃないかと思ったのです。 で、個人的な趣味で続けてたGoogle Analytics(以下GA)への理解をさらに深めて、アクセス解析エンジニアという微妙な立場のポジションを作り上げました。 WEBアナリストではない、というのがミソです。 アナリストはWEBの課題解決のための役割ですが、僕はその一個下のレイヤーの層を狙いました。 つまり、「アクセス解析ツールをどうやって使いこなせば、目指す指標を間違いなく計測できるのか」です。 GAの埋め込みタグから、そのリクエストの実体、メソッド一覧、解析画面の見方、フィルタの使い方とか、「いつか必要になるだろうニッチな使い方」を徹底的に調べ、試しました。 それって逆に言うと、誰でも出来ることなんです。 だけど、本を読みまくっただけじゃ分からないニッチな使い方、とか、痒いところに手が届く「タグ埋め込み→解析画面での表示」といった部分を突っ込むことで、どうやら他に人が手を出してない分野っぽいぞコレ、というのが実感できてきました。 なんでそんな道を選んだかというと、一般的な「ツクルヒト」のレールにある、コーディング→デザイン→ディレクター→プロデューサー　みたいな流れの根底のコミュニケーション力が、僕には欠如しているからです。 ちゃんとコミュニケーションできる人はそういう王道をいけばいいと思うよ。 僕はそれができないので、ニッチな技術力でカバーしつつ、狭く深い領域に進んでいこうと思ったのです。 さーて来年はどんなことになるのやら。 「お前がやってることって、誰にでもできることじゃね？」 ってバレる前に、一歩進んでおかないといけないよなぁと思ってます。 いまんとこ一番新しくて、アクセス解析始めたけどよく分からない人にうってつけな本が[[こちら（Google Analytics 完全解説）:http://www.amazon.co.jp/exec/obidos/ASIN/4901823272/ryownet-22]] 非同期版Google Analytics トラッキングを試す tag:ryow.net,2009:/blog//1.453 2009-12-21T03:36:47Z 2009-12-25T03:30:24Z ryow <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXX-X']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga); })(); </script>

google Analyticsに非同期版のトラック方法というのが追加されました。

これは、通常はページを読み込んだ一番最後に（おそらくbody閉じタグの直前）に貼ってあるGAタグの位置でカウントするという方法ではなくて、とにかくこのタグを読み込んだらすぐにカウントするぜ、というものです。

使い方は簡単で、まず既存のGAタグがあればそれを削除し、上記のものに変える、というだけ。
これを貼ると、headタグ直下にGAトラッカーが作成され、カウントされます。

使いどころ

いまのところ、よく見えてきませんが、ドメインを超えない設定をしてるなら（というかGAタグをカスタマイズしないで入れてるなら）、どっちでもＯＫというところでしょうか。
で、非同期ということなので、Ajaxで画面を書き換えたときに表示させるならこの方法、というかんじなんでしょうね。

公式のアナウンスでは：

ページ末尾に入れる ga.js の場合、ページの読み込みに時間がかかると、離脱したセッションを正確に計測できないという不都合がありましたが、新しいトラッキングコードではそのような懸念がなくより正確なデータを計測できるため、ぜひ多くのユーザーの皆さまにご利用頂ければと思います。
]]> Google Analyticsで携帯電話のアクセス解析をとる tag:ryow.net,2009:/blog//1.452 2009-12-03T04:42:35Z 2010-01-24T11:44:48Z ついにAnalyticsが日本でも携帯電話に正式対応しましたね。 11月までは英... ryow ついにAnalyticsが日本でも携帯電話に正式対応しましたね。 11月までは英語版だったケータイ用のコードが、日本語版でも普通に解析タグ(トラッキングコード)の発行ができていて感動的でした。 とはいっても、JSを埋め込むのではないため、ひと手間必要です。 -PHP -Perl -JSP -ASPX が対応言語です。 より上に挿入します。 --ということは、完全に静的なHTMLページはトラッキングできない、ということです -解析用コード(2)を直線に貼ります。 --これは普通にGA.jsを読み込むのと同じ感じで使います。 -つまり、全ページに、ページ開始と最後にコードを貼るわけですね。 -さらに、ga.phpをダウンロードして、サーバーのルートディレクトリにおきます。 --ドメイン直下か、とにかく全ページがまずそのファイルにアクセスできるようにする必要があるということです。 ちなみにこのga.phpがトラッキングの本体なので、GA.jsに慣れたアクセス解析マニアはこのコードを読むと、よく知った変数名が出てくるので、だいたい何をやってるかはあたりがつくと思います。 コード(1) コード(2) **iPhone/Android用にもこれでいいの？ 実は、スマートフォン用はまた別のスクリプトがあります。 それは、上記トラッキングコードページの最下部にリンクがあり（ヘルプページへのリンク）、コードを取得できるようになってます。 ]]> Google website opitimzerと Google Analyticsを併用する(2) tag:ryow.net,2009:/blog//1.451 2009-11-21T20:45:27Z 2009-11-21T20:53:09Z こちらが新しい記事です。 えっと、いろいろあってwebsite optimize... ryow こちらが新しい記事です。 えっと、いろいろあってwebsite optimizerとAnalyticsは別コードになってます。なので、両方のタグを同じページに貼っちゃっても大丈夫になりました。 以前は、両方ga.jsベースだった（と思ってたんだけど）のが、いまはちょっと変わりました。で、GAの方の識別子は例によって >var pageTracker = _gat._getTracker("UA-1234567-1"); なんですが、GOの識別子は >var gwoTracker=_gat._getTracker("UA-2345678-1"); のような感じ。呼び出してるトラッカーコードが変わったということです。 なので、両方のコードをマニュアル通りに貼ればＯＫです。 Google website optimizerでクリックをコンバージョンにする tag:ryow.net,2009:/blog//1.450 2009-11-21T20:05:43Z 2009-11-21T20:32:44Z Google website optimizer(GWO) は、使用にいくつかの... ryow Google website optimizer(GWO) は、使用にいくつかの制限があります。 +すべてのテストページが、同じ（サブ）ドメイン下にあること +オリジナルページ、テストページ、コンバージョンページのURLが分かっていること +オリジナルページ、テストページ、コンバージョンページにJSタグを入れられること で、3は別に当たり前のことなんですが、実は1がけっこうクセモノだったりします。 なんでかっていうと、たとえばA/Bテストを実施したときに、リンク先（コンバージョンにしたいページ）が別ドメインってことはよくあると思うのです。 内に」''、''「ページの最後に＝直前に」''という意味です。つまり |~ページ|~headにいれる|~body終了直前に入れる| |オリジナル|GWO開始コード|GWOテストコード| |パターン|なし|GWOテストコード| |コンバージョン|なし|GWOコンバージョンコード| ということ。で、GWOのテストとコンバージョンのコード上の違いっていうのは本当に些細なことで、 gwoTracker._trackPageview("/1273952067/test"); なのか gwoTracker._trackPageview("/1273952067/goal"); なのか、という違いだけです。 **テスト実行可能になったら、コンバージョンページ用のコードを削除してクリックコードに入れ替える さて、やっと本題です。 +コンバージョン用のコード（コンバージョンページの直前のやつ）を削除 +オリジナル、パターンページのに関数を追加 +外部リンクのＡタグにonclickを追記して今の関数を呼び出す 呼び出す関数はこちら クリックのＡタグはこんな感じ ここをクリックでゴール これで、ゴールのページが別ドメインだろうと、サブドメインだろうとＯＫです。 ただし、A/Bテスト本来の意味の「このページを経由したユーザがいろいろあってコンバージョンした」というゴールではなく、ただ単に「Ａページを見た人とＢページを見た人のクリック率の違い」という意味の数字にしかならないので注意。]]> PukiWiki for Movable Typeをいれてみる tag:ryow.net,2009:/blog//1.449 2009-10-27T08:56:14Z 2009-11-21T01:24:52Z 最近、ブログを書くのもだるくなってきたので(いままでは改行変換なしでHTMLタグ... ryow 最近、ブログを書くのもだるくなってきたので(いままでは改行変換なしでHTMLタグを直接打ってた)、Pukiwiki記法を使えれば楽しくなる、と思いました。そこで入れてみたのがこのPukiWiki for Movable Type というプラグインです。 http://blog.makotokw.com/portfolio/movabletype/pukiwiki_for_movable_type/ *これが大見出し **見出し２ **見出し3 -リスト -リスト +OLリスト +OLリスト |~テーブル|~テーブル| |ああああ|いいいい| |うううう|アンタッチャブル| Flex3でドラッグドロップ、拡大縮小、回転なんかをするときのライブラリ tag:ryow.net,2009:/blog//1.448 2009-10-17T01:57:36Z 2009-10-17T02:32:12Z Flexを使っていて、オブジェクトのドラッグや回転などをやりたくなったとき（目標... ryow Flexを使っていて、オブジェクトのドラッグや回転などをやりたくなったとき（目標はFontPark2）、いちいちDragEventなんかを書いていたらキーってなるので、ライブラリを使うと便利です。
便利です、が、一長一短があります。

海外まで見回して、どうやら実際に使えそうなのは2種類あるようです。

ObjectHandles(サンプルをDL可能)

オブジェクトの上下左右と四つ角にハンドルが出て、それを引っ張るとドラッグできます。ハンドルは配列で制御してるので、いらない部分は消せます。

できること

・拡大/縮小
・ドラッグ（ただし画面内のどこにでも持っていけるので、エリアを制御する必要あり）
・回転（自由回転。シフトキーでの45度回転は非対応）
・ハンドルはそれぞれ画像を当てられる

特徴

・拡縮は縦横非を保持するか、辺を自由に伸ばせるか設定可能
・クリックしたものを自動で最前面にするかは設定可能
・複数オブジェクト選択可能な設計（だけど実装はされてない）
・ときどき更新されてる
・画面上のオブジェクトをひとつずつObjectHandlesというクラスでラッパするという仕組み
・ハンドルが表示される＝拡大可能
・なのでドラッグだけできるオブジェクト、は非対応。拡大か回転か、許可する必要がある
・操作感は一昔前のFlashっぽい。

TransformTool(右クリでソースを確認)

オブジェクトの上下左右と四つ角にハンドルが出て、それを引っ張るとドラッグできます。

できること

・拡大/縮小
・ドラッグ（ただし画面内のどこにでも持っていけるので、エリアを制御する必要あり）
・回転（自由回転。シフトキーでの45度回転もOK）
・回転の中心を設定可能
・ハンドルはまとめて画像をあてられる

特徴

・拡縮は縦横非を保持するか、辺を自由に伸ばせるか設定可能
・クリックしたものを自動で最前面にするかは設定可能（だけど設定すると、すべてのオブジェクトでそれが効いてしまう）
・複数オブジェクト選択不可能
・更新されてない
・ハンドルオブジェクトを事前にインスタンス化しておき、クリックしたオブジェクトをハンドルのtargetとして使う仕様
・なので、動かすものが全部同じ（ドラッグ回転可能）ならいいけど、一部は回転不可能にしたいとか、拡大したくないとか、個別の設定がある場合はメンドイ
・操作感はwebツールっぽい。

あと、開発中でこういうのも見つけた：

ObjectHandles2(右クリでソース)

なんと前出のObjectHandlesの進化版。
Example7でUI切り替えにDegrafaというライブラリを使ってるけど、機能としては別にいらない。ちなみにDegrafaは超強力なビジュアルライブラリ。グラフとかマトリクスとか書く時はいいかも。

できること

・拡大/縮小
・ドラッグ（ただし画面内のどこにでも持っていけるので、エリアを制御する必要あり）
・回転（自由回転。シフトキーでの45度回転は付加。TransformToolの回転部分をコピペで実装できた）
・ハンドルはまとめて画像をあてられる

特徴

・拡縮は縦横非を保持するか、辺を自由に伸ばせるか設定可能
・クリックしたものを自動で最前面にするかは謎
・複数オブジェクト選択可能（な作りになっていて、実装も半分ほどできてる。けど、ソースを見るとmulti selectのところだけ「ToDo」って書いてあって中身がない。自力で作れというのか！）
・これから更新されるかも。
・ハンドルオブジェクトを事前にインスタンス化しておき、クリックしたオブジェクトをハンドルのtargetとして使う仕様
・っていうか設定が謎な上にメンドイ。
・操作感はパワーポイントみたい。

まとめると

えーと、結局、ホントに一長一短なんですよ。
シフト45度回転できないOhが、実装としては一番使いやすいんだけど、複数選択はできないので困ります。TransformToolはシンプルな考え方なんだけど、すべてが同じ条件でドラッグ、拡大、回転できるならこれでOK。でも複数選択できないので残念。targetの制御まわりを全部書き直さないとダメなのか？
最後にOh2。これ、クラスの依存関係は超シンプルになってます。そのかわり、手を入れようと思ったら超メンドイです。Ohに比べると「選択状態の取得」とか微妙な動作バグとかがなくなってて素敵なんだけど、まだまだこれからな感じ。
３日でアプリを実装しろ！　みたいな場合じゃなければOh2で進めていきたいけど、急いでる時はOhかTransformToolか。というところ。 ネットで検索してチュートリアル的なのが出てくるのはOhが一番多い。google codeだし。

]]>