東京北青山、大阪四ツ橋発、WEBディレクターのブログ

クッチーナ・トカシキーナ

クッチーナ・トカシキーナ

アドワーズFlash広告でのclickTAGの記述方法

アドワーズのディスプレイネットワークではFlash広告も出稿できます。
登録するswfバナーには、外部からリンクを設定できるように【clickTAG】と呼ばれるものを仕込まないといけないのですが、googleのガイドラインには、どこを探してもAS2での記述方法しか載ってません。
軽い気持ちでAS3で作っちゃったけどいざ登録であわわわわ、って方のために以下まとめ。

▼ 登録したswfバナー
最新のFlashPlayerが必要です

ちなみにclickTAGの実装に不具合があると
「Flash では clickTAG がサポートされている必要があります。」
というエラーが出ます。

<clickTAGの概要>

Flash 広告では、clickTAG 変数がサポートされている必要があります。
clickTAG は、Google が各広告に割り当てるトラッキング コードです。広告がクリックされたときの掲載先が記録されるので、キャンペーンの効果を確認することができます。
Flash 広告をクリックすると、clickTAG 引数で指定された URL にリダイレクトします。リダイレクト先との間に他のページを入れないでください。


<AS2での記述>

on (release) {
    getURL(clickTAG, "_blank");
}

<AS3での記述>

someButton_or_displayObject_to_receive_mouseClick.addEventListener(
     MouseEvent.CLICK,
     function(event: MouseEvent) : void {
       flash.net.navigateToURL(new URLRequest(
root.loaderInfo.parameters.clickTAG), "_blank");
     }
);

検索しても日本語ではさっぱりヒットしませんでしたが、
ちょうどAdwordsのフォーラムでドンピシャのことが尋ねられてて助かりました。
Googleの中の人がちゃんと教えてくれたみたいですね。

【参考リンク】
広告のフォーマットの技術的なガイドライン
does adwords support AS3 FP10 clickTAGs?

クッチーナ・トカシキーナ

CSS nite in OSAKA vol.23 iphone/ipadアプリ制作まとめ

CSS nite vol.23 〜iPhone/iPadアプリ制作特集〜 に参加してきました。

ネイティブアプリ制作とwebアプリ制作、いろんな知識が増えました。
ひとことでiphoneやipad用のコンテンツと言ってもいろんなアプローチがありますね。
以下、気になったこと自分用まとめ。


iPadアプリを作って、Objective-Cの超基礎を学んで「カウンター」を完成させよう

[中学生プログラマー/Tehuさん]


・プレゼンの進行が超クール!喋りの達者さもさることながらスライドもシンプルで無駄がなくかっちょ良かった。
・最初は慣れないであろうObjective-Cの記法について名言、「つくってるうちに美しさがわかります。(キリッ)」
・無料アプリでもiADで稼げる。(どこかのアプリが公開初日に14万円)
・アイコン大事!用意する大きさは3種類(iphone・iphone4・ipad用)
・アプリ内で使用する画像も大きさ2種類(iphone・iphone4用)


iPhoneアプリ開発の進め方とアップルへの提出

[相性診断アプリ「ラブタッチ」開発/今江健一さん]


・ipadアプリ狙い目!
・ipadアプリのダウンロード数は、同じランキング順位でiphoneアプリの1/3くらい。
・アプリ数はiphone26万、ipad2万。ipadアプリはライバル少ないからランキングに載りやすいよ。
・アプリ制作ではメモリ管理(メモリリーク?)が大切。


新大陸発見!Androidによる閉鎖主義の崩壊

[日本Androidの会 関西支部長/杉本札彦さん]


・ぶっちゃけGoogleTVでてきたらスマートフォンとかどーでもいい。
・ぶっちゃけデザインがめっちゃ大事。
・ぶっちゃけAndroid有料アプリ今は全然売れない。500件とかマシな方。
・ぶっちゃけiphoneめっちゃ良いよ×5(車に例えるならiPhoneはフェラーリ、Androidはターボ、Xperiaはカローラ)


ネイティブアプリだけではない! 作ってみよう! iPhone iPad 対応Webアプリ

[HTML5-WEST.jp/城口良太さん 村岡正和さん]


・ネイティブアプリ作るのってハードル高い。AppStoreの審査通さないといけないし。
・ネイティブアプリだったらObjectice-Cで組むところを、webアプリならHTMLとCSSとJavascriptでつくれます。
・iphoneのブラウザはmobileSafariなんだからHTML5使いどころ!
・モバイル用HTML5フレームワークいろいろあります。Sencha Touch、jQuery mobile(年内)
・位置情報を取得できるHTML5のapiもあります。(Geolocation API)
・webアプリでもできる事たくさんあるし、簡単につくれるし、じゃあとりあえずwebアプリでいいじゃん。
・iphoneSDKのコンポーネントUIWebViewで、作成したwebアプリのURLを
 アプリ内ブラウザに表示させればネイティブアプリとして申請通るんじゃないの?→ てふ君「通ります。(キリッ)」
・なら、webアプリの構成ファイルをリソースとして使ってネイティブアプリつくったらどうなの??
 → 村岡さん「その方が通りそうだよね!」


iPad芸人 タヌキチくんをiPadの中でさわって動かしちゃおう!

[iPad芸人/デジタルクリエイター アキラボーイさん]


・たぬ吉くんかわいい。
・openframeworks使ってる。
・音源を再生するならAVFoundation(読まれへん).frameworkのAVAudioPlayerを使う。
・たぬ吉くん銃で撃たれてもまだスペアがいっぱいいる。
・他愛ないアプリでも使いようで楽しいよ!


結構使える!? Webアプリ

[モバイルクリエイター/よしだゆたか さん]


・webアプリいっぱい作ってる。
・webアプリはオフライン時がネック
 → HTML5のキャッシュマニフェストでローカルに保存すればOK!(音声ファイルは無理)
・javascriptでiphoneの傾きの変化まで検出できちゃうよ。(window.orientation 0°90°-90°)
・ユタカボーイ


雑感

・てふ君のセッションがわかりやすくてiphoneSDKチョロイな、とまで思わされた。
 それにobjective-Cも面白そう。
・でもwebアプリの猛プッシュ!objective-Cで作るよりwebアプリの方がとっつきやすそうだし、
 どうしたものかなー。
・Androidに関してはネガティブな情報が多かったけど、これからに期待!
 タッチパネルデバイスのシェアとか5年後には逆転してるかもしれないし。
・アキラボーイ面白いし賢い。

※自分なりに噛み砕いて記述しているため、異なったニュアンスになってる部分もあるかもしれません。
 関係者の方ごめんなさい。

【参考リンク】
CSS Nite in OSAKA, Vol.23
Togetter - 「CSS Nite in OSAKA Vol.23」
中学生iPhoneプログラマのiTehu
アキラボーイ公式ホームページ

クッチーナ・トカシキーナ

「第2回コーディングコンテスト」と「おもてなしの心」


第2回コーディングコンテストの結果が発表されました。
今回のテーマはまだまだなじみの薄いHTML5+CSS3。
入賞された方々のソースは、今後タグやスタイルを使用する上で大いに参考になりそうですね。

これからHTML5やCSS3を勉強される方にとっては大きな指針となり得るこのコンテスト結果ですが、
各々のソースを開いて流し見ているだけで気になりまくったことがあります。

「審査してもらおうってのにソース見づらいな」

本来、ソースの視覚的な見え方なんてHTMLタグの機能とは関係ないところだし、
実際にサイトに訪れる一般ユーザーの大半はソースを覗き見なんてことはまずしないので、
HTML作成の流れの中でソースの見栄え整理が必須事項になることは少ないです。

なんですけどねー。なんにしたってソースが綺麗に整理されてるに越したことはないと思うんですよね。

検索エンジンとかブラウザとか、マシンのための分かり易い論理的マークアップが皆さん目指すべき理想であるならば、さらにその論理的マークアップが視覚的にも整理されてて人間がHTMLを直接見ただけでなんとなし伝わるよー、というのが究極ですよね。

究極の話はさて置いたとしても、自分のコーディングを審査してもらおうってんだから、それはもう、自分の部屋に客人を招くかのごとくめちゃめちゃ片付けて綺麗にしてどうぞー、が当然でしょうにコンテスト応募作品の大半はそれができてないようで、なんだかちょっとびっくりしたと言うか。

綺麗かどうかの基準は完全に主観なんですが、DreamWeaverのフォーマットに頼りきって何の区切りもなくやたらめったらインデントさせているより、適切なグルーピングがされたブロックごとに適宜インデントやコメントをつける、って方がはるかに見やすくて作業しやすいと経験上感じています。

DreamWeaverに頼っちゃうと、なかなか思う通りにコントロールできないところなんですが、
そこをなんとか一手間かけていきたいですね。

クッチーナ・トカシキーナ

text-shadowをどこかで使ってみたくなったので

CSSのtext-shadowプロパティ、CSS3で復活してたんですね。
当初のsafariのみの対応から、いつの間にかFirefoxやChrome、Operaなどのブラウザも対応するようになっていたようです。(IEは問題外)

IEが対応してないため、実際に案件で使用するには壁がありますが、
もしそのことを気にしないでよくなれば、テキスト周りでのデザインの幅も広がりそうですね。
javascript使えばIEでも同様の見え方を実装することもできるようですし。

という訳で、試しにこのエントリー内のテキストにtext-shadowを設定してみました。
IE以外のブラウザの新しめのバージョンでみるとシャドウってます。

color: #FFF;
text-shadow: 1px 1px 1px #1b1712;

【参照リンク】
ファーストクラスバックパッカー (綺麗に使ってます)
IEでCSS3のドロップシャドウを使いたい
HTML5やCSS3のブラウザ対応表

クッチーナ・トカシキーナ

三項演算子を使って条件分岐をスマートに

FlashDevelopを使ってActionScriptを記述していくと、
括弧の前後で改行が入るコードフォーマットの為、
FlashIDEで記述してた頃に比べて行数がハンパないことになります。

コードは見易いので、そのフォーマット自体は嫌いじゃないんだけども、
特にif文を使った時なんかに無駄に改行だらけになるのは何とかならないかなー、と思ってました。

そこで三項演算子の登場です。

スマートな条件分岐の書き方が何かあったはず、もやもや、
というのをプログラム畑のTさんに伝えると一瞬で答えが返ってきました。さすがですね。

条件式 ? 値1 : 値2 ; 
というやつです。
特に知らなくても困らないから、
普段ActionScriptごりごり書いてるような人でも使ってないって人は多いんじゃないでしょうか。

これが
function getGrade(point:int):String
{
	var grade:String;
	if (point>90) 
	{
		grade ="すばらしい!" ;
	}
	else if (point>70) 
	{
		grade ="よくできました。";
	}
	else if (point>40) 
	{
		grade ="がんばりましょう。";
	}
	else 
	{
		grade ="追試ね。";
	}
	return grade;
}
こうなります。
function getGrade(point:int):String
{
	var grade:String;
	grade =
	(size>90) ? "すばらしい!" :
	(size>70) ? "よくできました。" :
	(size>40) ? "がんばりましょう。" :
	"追試ね。";
	return grade;
}
行数半分になってますね。さすがです。