sasapurinのブログ: Webブラウザアーカイブ

2008年06月30日

iPhone向けWebアプリ開発の記事

日本でもiPhoneが発売されるというニュースが流れて、多少なりとも業界には話題となっている訳だが、Web業界に携わっているとiPhone用のコンテンツがどれだけ流通するのかが興味の的だし、いち早くiPhoneに対応させることによって、ビジネスチャンスがあるかも知れないという気持ちもある。

しかし、Appleもこのビジネスモデルを野放しにする訳もなく、ネイティブなアプリケーション配布はてめぇで仕切ってやろうというイヤらしい体質が見え隠れする。きょうびの開発は開発者を囲う事が第一なので、昔と違ってSDKは無料で手に入るが、好き勝手に配布できないのは痛い。

そこでAppleに縛り付けられない方法として、iPhone向けのWebアプリケーション開発に注目が集まっている。もちろんiPhoneが爆発的に普及する保証は全くないから空振りに終わる事もあるだろうが、Webコンテンツの開発ならまだ流用ができるという類だろう。そんな辺りの話を@ITで記事にしているので、興味のある人は読んでみると参考になるだろう。

@IT:iPhone向けWebアプリを作ろう

記事を読んでいて思い出したというか、なんか読んだ事のある内容だなと思ったのだが、それはまだ私が68KなMacを使っていた頃、Inside Macintoshという開発者向けの高価な本を数冊買って必死にMacintoshのプログラミングを覚えようとした際に、ＵＩの重要さをくどい程解説したものを読んだからだ。

Ａｐｐｌｅというメーカーの最も価値ある部分は、ユーザーが使いやすいと感じるインターフェースをとにかく根本的に分析し、それを共通意識として持たせようという取り組みがなされていたところにある。結局私は未だにプログラミングが出来ないので深い部分は理解出来ていないのだが、どんなに優れたプログラムでもＵＩがだめならユーザーは使いづらいと感じるという部分を徹底的に記していた。

Inside Macintoshは10冊近くあったと記憶しているが（一冊が平均1万円位した）、ＵＩの部分の解説にかなりページ数を割いていたし、そのために開発が難しくなろうとも徹底する部分が魅力だった。故に一ユーザーにすぎなかった私も当時はマイナー過ぎて変人扱いされるＭａｃｉｎｔｏｓｈを愛用し続けた。1ボタンのマウスでも初心者にも使いやすく、上級者にも使えるという開発者の創意工夫が随所に盛り込まれていたのだ。

時代は流れてiPhoneというタッチパネルを操作する特殊な携帯端末が世に広まろうとしている訳だが、Appleはやはり重要な部分を忘れてはいない様だ。シンプルなUIこそがユーザーの苦手意識を緩和し使いやすいと感じさせる。その為には開発者が苦労しなくてはならないがそれは当然の事だと言う仕組み。相変わらずユーザーに優しく開発者に厳しい姿勢だ。

しかし、時代はすっかり流れて事情は変わっている。私が大枚をはたいてＩｎｓiｄｅ Macintoshを買って、Ｃ言語での開発環境も買って取り組んだにもかかわらず、結局プログラミングに苦手意識を持ってしまい未だに開発者としてはド素人のままだという様な事は断じて通用しない。もちろんわたくしに適正がなかったのは言うまでもないが、これだけ便利になった時代にお金がかかり、時間がかかり、手間がかかりと言う状態では開発者はそっぽ向いてしまうだろう。

ＳＤＫは開発の手助けをしてくれる便利なツールだが、Ａｐｐｌｅは積極的に開発ツールを改良しリリースしなければ、iPhone用に最適化されたコンテンツを作ろうとする人は増えないだろう。一時的に興味を持ってふれてみる人はいたとしても、デメリットが多いと察知すれば離れていくものだ。昔はプログラムはユーザーが作らせてもらうものだったが、今の時代は作っていただくものに変わっていると言ってもよいだろう。立場が逆転しているのだ。ソフトウェアがなければただのがらくたに過ぎないからだ。

それでもこの波にいち早く乗ろうというチャレンジ精神旺盛な開発者は多いと思う。特にWeb業界は飽食気味であるからこそ新たな技術や方法に興味を持つ人が増えていると思う。おそらくネイティブなiPhoneアプリよりもiPhone向けのwebコンテンツの方が普及するといって間違いないだろう。それだけWeb業界には人が多い。

もしかすると過去のトラウマ的なプログラミングに対する苦手意識を持つ私も、webコンテンツ作成なら追従出来るかも知れない。もっとも重要なのはiPhoneのUIを理解し、ユーザーの利便性を考慮した構造を実現出来る様に意識し続ける事だからだ。モノクロ時代からMacを愛用していた私にはそれが何となく分かる気がするし過去の経験は強みだと思う。たぶん今の時代にPCを覚えた人には、当時のMacがどれだけ優れたUIを目指し実現していたかは理解出来ないと思う。

しかし皮肉な事に、私は学生時代にモールス信号受信で鍛えたブラインドタッチを活かせるキーボードが一番扱いやすいと今は思っている。UNIX系OSのコマンド入力が快適なのだ。なにしろリソースを食わないからコマンドを覚えればいくらでも応用が利く。つくづく時代に逆行していると自分でも自覚しているのだが、またしても波に乗れないとしたら運のない男だなぁと自分を情けなく思う。いや自らの運命を呪うべきかも知れない。

投稿者 sasapurin : 14:18 | コメント (0) | Webブラウザ , 携帯電話 | トラックバック

2008年05月25日

現代のリアルxeyes？

古くからのUNIXユーザーならもちろんご存知とは思いますが、xeyesという目玉がマウスポインタを上下左右においかけて見つめてくれるデスクトップユーティリティーがあります。しかしこれはちょっとというかかなりリアルで凄いですね。驚きました。

Flashなのでブラウザをフルサイズにすると、女性の顔が大きく表示されてちょいとリアルすぎます。ドキっとしないように覚悟して下さいね。まずは下のCUBOCCをクリックしてみて下さい。

投稿者 sasapurin : 00:09 | コメント (0) | Webブラウザ , コンピュータ | トラックバック

2008年05月06日

コメントにサムネイル画像:IgWebCap

なんとなく調べごとをしていて気になるサイト（サービス）を見つけたので試してみた。

IgWebCap～自動的に更新されるウェブページのサムネイルを表示するブログパーツ～

早い話がURL情報を元に、そのページのサムネイルを生成してくれるサービスである。埋め込むタグを生成してくれるので、ブログパーツとしても利用できる。サイドバー等に表示させるのが普通の使い方だと思う。

しかしそれだけでは面白くないので、コメントが投稿されてその時に投稿者のサイト情報があれば、そのサイトのサムネイルが表示されるようにしてみた。そのためにはMTのコメント系のタグを使わなくてはならない。仕方ないのでマニュアルで調べてタグを加工し、テンプレート；個別エントリーをカスタマイズした。

サイズ的には120x120でよいと思うので、IgWebCapからタグ情報を入手してくる。

<script type="text/javascript" charset="Shift-JIS" src="http://x-row.cc/igwebcap/api.php?wait=5&width=120&height=120&shadow=000000&url=http://www.sasapurin.com/"></script><br/>

こいつをMTのコメント用にカスタマイズする。具体的にはURL情報をMTタグで置き換えるだけの話だ。

<script type="text/javascript" charset="Shift-JIS" src="http://x-row.cc/igwebcap/api.php?wait=5&width=120&height=120&shadow=000000&url=<$MTCommentURL$>"></script><br/>

これでURL情報が、コメント投稿時に入力されたURL情報に置き換わる訳だ。但しマニュアルを読むと分かるのだが、<MTComments> ～ <MTComments>の間で無ければ、<$MTCommentURL$>は機能しないらしい。最終的に体裁も考えて下記のようにしてみた。

<MTComments>
<div id="c<$MTCommentID$>">
<$MTCommentBody$>

<script type="text/javascript" charset="Shift-JIS" src="http://x-row.cc/igwebcap/api.php?wait=5&width=120&height=120&shadow=000000&url=<$MTCommentURL$>"align="right"></script><br/>

</div>
<p class="posted">投稿者 <$MTCommentAuthorLink spam_protect="1"$> <MTCommentAuthorIdentity> : <$MTCommentDate$></p>
</MTComments>

投稿者 sasapurin : 15:36 | コメント (1) | Movable Type , Webブラウザ | トラックバック

2008年05月03日

AdSens:小切手が届いた

先日AdSenseが100ドルに達したというエントリーを記したばかりだが、早速Google AdSenseの広告報酬小切手が届いた。改めて記してみると下記のとおりになる。

2007年01月27日:AdSenseに承認された
2008年01月03日:$50に達した時にPINコード通知が届いた
2008年04月22日:-US$105.48支払い済み
2008年05月03日:-US$105.48の小切手が届いた

さて届いた封筒にはGoogleと書いてなく、また英語で住所氏名が書かれているので、かみさんが変な手紙が届いてるでと不安そうに持ってきた。タイミング的にAdSenseだろうと思ったので開封してみた。うーん、見たことの無い英語が書かれていて訳が分からない感じだ。質素な紙で下の方に小切手っぽいデザインの部分があったので、そこを見てみたら「GOOGLE INC.」と書かれていたので、やっぱりAdSenseの報酬だと裏付けが取れた。金額も一致している。

うーん換金するにはどうしたものか？と考えた末、やっぱりGoogleで検索してみたら、銀行に持っていって換金することになりそうだと分かった。しかし日本の銀行にもって行くと手数料が2,500円位かかるらしい。今回105ドルで支払われる金額だから、今の一ドルが105円として、11,000円ちょいと言うことだろう。換金は円高の時に行うとレートから換金率が悪いというのは簡単に想像出来る。ちなみに小切手の発効日から6ヶ月が有効期限らしく、それ以降になると無効になるのでまた再発行して貰わないといけなくなるらしい。だから単純に考えると6ヶ月以内で円安の時に換金すれば少しお得という話になるわけだ。

ところが、過去六ヶ月の為替レートのチャートを見てみてもそれほどの変動はない。つまりたったの100ドル程度では、為替レートうんぬんと言うのはアホらしい話である。今の為替相場からすると漠然と円高といえるだろうから、いっそのことドルのまま口座に貯金しておくのもありかなと思えてきた。当然ながら小切手＞口座への手数料がかからないシティバンク口座開設を検討した。

シティバンクに口座開設する際に気をつけないといけないのは、一定条件を満たさないと月額2,100円の口座維持手数料がかかってしまうことだ。一発これを発生させてしまえば、AdSenseの小切手換金手数料とほぼ同じ額の手数料が発生してしまい、本末転倒となってしまう。そう考えるとシティバンクへの口座開設は無意味に思えてきた。

いや、厳密にはシティバンクで外貨預金を行うことは無意味ではない。資産を分散して運用することは今の世の中重要な事だと思うし、正直言って外貨預金はやったことが無いので一度やってみたいとは思っていたのだ。この機会に外貨預金を持ってみるのも悪くないのだ。口座維持手数料を発生させない条件は調べたら2つあった。

円預金が50万円以上
外貨預金が20万円換算以上

一見2ならかなり条件が良い気はするが、気をつけなければならないのは、元本割れというリスクがあることだ。長期保有を考えれば一時的に元本割れしても関係ないと思えるし、今は円高っぽいので割れる可能性は少ないとは思うが、割れたら20万円換算の評価以下になることも考えられる。そうなったら問答無用で口座維持手数料が発生するわけだ。つまりうっかりしているとどんどん目減りして行くという落とし穴があいている。もちろん倍以上の50万円位を元手として外貨にしておけば、評価額20万円以下になることは稀だとは思うが、リスクといえばリスクである。やはり本腰を入れて外貨預金をやる覚悟が無いと手を出すべきではないと思った。

シティバンクに気になるサービスがあるのが目に付いた。オンライン専用口座の「eセービング」である。通帳が無くオンライン（ネット）専用だと書いてあった。オンライン専用って事は、小切手持って言っても窓口では扱ってくれないという意味なのかな？でも小切手扱ってくれるならこれ使わない手はないな！と思い電話して聞こうと電話を手にした時に決定的な文言が目に入った。

eセービングとは
シティバンク銀行株式会社がご提供する、オンライン専用の円普通預金口座です。

外貨扱えないじゃん．．．

という訳でシティバンクに口座を開くことはあきらめた。というかメリットが殆どないと思われる。なぜなら後で分かった事だが、Google AdSenseは、日本向けにも「銀行口座への送金」を開始してくれているのだ。全く知らなかった。小切手でしか受け取れないと思い込んでいた。もっと早く100ドルに達するまでに調べて銀行口座を登録しておくべきだった。かなり後悔している。

上記リンク先に日本語で手順を書いてくれているので読めば分かると思うが、早速やってみたので備忘録しておく。

「アカウント情報」>「お支払いの詳細」>「編集」
「新たに銀行口座を追加」>「続行」
銀行口座情報を入力すると、数日中に小額の振込みがあるらしい。
その振り込まれた金額をデポジット金額として入力すれば口座の照合が完了

これで次からは小切手ではなく、銀行口座へ支払われるようだ。最初からこれをやっておけばよかったと少々後悔している。だって約1万円の報酬受け取りに手数料2,500円支払って、しかもわざわざ銀行に出向かないといけないなんて。やってられないよねぇ～

知っていると知らないとでは大きな違いだなと思ったり。まぁ小切手を換金するのって滅多に無い事だから経験出来るという意味では良いかな。と言う訳でAdSenseをやっていてもうそろそろ100ドルに達するという人は速やかに銀行口座を登録した方が良いと思われる。

投稿者 sasapurin : 16:25 | コメント (0) | Webブラウザ | トラックバック

2008年04月30日

AdSens:ついに$100

Google AdSenseがついに$100に達した。開始からの記録を簡単に記してみると下記のとおりである。

2007年01月27日:AdSenseに承認された
2008年01月03日:$50に達した時にPINコード通知が届いた
2008年04月22日:-US$105.48支払い済み

少しXHTML+ＣSSの知識もついて、ブログの体裁を変更してみたりした事がAdSenseのカウントアップに多少影響しているものと思われる。思い返してみれば最初はトップページに1つAdSenseを設置するので精一杯だった。徐々に知識がついて個別ページにも設置してみたり、カテゴリーページにも設置してみたりと段階的にブログをいじってきたからだろう。

私はアフィリエイターではないので、必要以上にはAdSenseに執着するつもりはないのだが、やっぱりカウントアップされると、それだけ見て貰えているんだなと感じて嬉しいものだ。バリバリにサイトをカスタマイズするつもりも無いから、これ以上のペースアップはないと思うが、強いて言えば内容を濃くして行く事で人の役に立てる情報を発信できたらと思っている。

初めての小切手が届くの楽しみ～（ｗ

投稿者 sasapurin : 10:32 | コメント (0) | Webブラウザ | トラックバック

2008年04月29日

Firefox:Firebug

普通のインターネットユーザー（変な言葉だな）はこんなものに興味はないと思うが、多少なりともWeb制作なり、Webページのカスタマイズ、Blogのカスタマイズに手を出した人にとっては、確実に役立つであろうFirefoxのプラグインがある。

Firebug-Web Development Evolved for Jpanese

嬉しい事に日本語版があるので、英語の苦手な日本人でも気軽にこのプラグインの恩恵にあずかれる。具体的に何が出来るかという概要は上記リンク先を読めば分かる事だが、私が試してみて便利だと思った点をこのエントリーの続きに記そうと思う。

機能のON/OFF

このプラグインをFirefoxに導入すると、メニューの「ツール」に「Firebug」という項目が追加される。機能のON/OFFはここから出来る（もしくはF12キー押下）と覚えておけば、後はやってみると話が早いので是非やってみていただきたい。

HTMLブロックの解析

まずは超基本的な機能。自分のHPなどがあれば構造を理解していると思うので実験には最適である。とにかくお気に入りのサイトを表示してみて欲しい。FirebugをON（F12キー）するとブラウザの下の方に情報を表示するエリアが現れる。もしくは新しいウィンドウで表示（Ctrl + F12）しても良いだろう。使い勝手からすると新しいウィンドウに表示した方が便利だと思われる。やっぱりデュアルディスプレイが理想だな。

左側の部分はタブで切り替えられるが、HTMLの構造を調べるのでHTMLにしておく。具体的にはXHTMLのブロック構造を閉じたり開いたりする事で非常に見やすく階層的に「ソース」を読むことが出来る。もちろん一番最初に出てくる<HTML></HTML>というブロックが大親分になるので、そのブロックの中にある<HEAD></HEAD>と<BODY></BODY>タグが次の子分のブロックになるだろう。それらの左にある[+]をクリックすればブロックを開いて更に中の子供のブロックタグを掘り起こして参照して行くことが出来る。これでXHTMLの構造を解析することが容易に行えるはずだ。

この基本的な機能は<DIV　ID="hogehoge"></DIV>などと言うパターンの閉じ忘れ、もしくは変なところで間違えて閉じてしまったという間違いを探す際などの省力化に役立つと思われる。なぜこんな事を書くかと言うと、私は一ヶ月だけだがWeb制作の会社に勤めて仕事に携わったことがあるのだ。もちろんたったの一ヶ月だからXHTML+CSSの深い理解を身に着けるという当初の目的は達成できなかったのだが、現場の実情を肌で感じることが出来たのだ。その際、CSSで体裁を整えているページが微妙に崩れていたりするのを発見し、その原因を調べると大抵は</div>が変なところにゴミとして残っていた為だったり、逆に</div>が足りなかったりするというケースに遭遇した。その時にこのFirebugを知っていれば直ぐに原因を突き止められたのだろうが、その時は残念ながらFirebugを知らなかった為に、ソースを整形するツール（インデントを付ける）で、インデント位置が合わないところを探して修正したりしたものだ。

もちろんその様な「地味」な作業は私だけではなかった。人によってはタグの閉じ忘れが無いかどうかを調べる為にソースをプリントアウトして対を調べながらボールペンで地道にチェックしていた。なぜならタグの閉じ忘れが無いか？正しい場所で対になっているか？はXHTMLの基本中の基本だからだ。しかし手作業を否定するつもりは無いが理屈を理解している人はもっと楽していわゆるバグを見つける能率を上げた方が良いだろう。そんなニーズにも応じてくれるのがこのFirebugである。DreamWeaverにも近い機能は備わっているが、HTMLタグの対を調べるまでは至らない様である（使い方が悪いのかな？）。とにかく無償で利用できるFirebugのシンプル操作でそれが容易に行える点は評価に値する。

（IEでも同等の機能を有するものがあるらしいがそれは別途）

HTML構造の視覚的把握

この機能を使おうとすると、広い画面がどうしても欲しくなる。デュアルディスプレイ環境必須と思えてくる。画面の狭い画面の人はF11キーを押して最大化してから作業をするなどしてなるだけ広い画面で作業すると良いだろう（ALT+TABでウィンドウを切り替えるなど各自工夫すべし）。HTMLブロックの任意の部分にマウスポインタを重ねると、ブラウザで表示している解析対象の表示のどの部分なのかが、ハイライト表示されることに気づくだろうか？例えば<DIV ID="banner">タグなら大抵はバナー部分、<DIV ID="footer">ならフッター部分、<DIV ID="copyright">ならコピーライト部分がハイライトすると思う。こうやって視覚的な確認が行えるのも初心者には嬉しい機能だったりする。もちろんXHTMLソースを読んで直ぐに理解できちゃう人には遊び的な要素だったりするのだろうが。

しかしそんな事は言わせないのもFirebugだったりする。実は逆のことも出来ちゃうから凄いのだ。「調査」ボタンをクリックしておいてから、調査対象のブラウザ画面にマウスポインタを重ねてみる。すると要素を枠で囲んでくれて、それに対応するHTMLブロックがハイライトされる。画面を構成している要素がどこに記述されているのか簡単に探すことが出来るのだ。これは非常に便利だと思うので、ベテランさんでも使い出すと止められない機能だと思う。確実にソースの可読性が上がるだろう。

CSS情報の参照

Firebugが提供してくれる機能はもちろんそれだけではない。Firebug情報エリアの右側には、CSSの情報が表示されていると思う。任意のタグブロックを選択して反転表示させると、CSSエリアにそのブロックに定義されているCSS情報が一目瞭然で確認できる。CSSは優先順位があり自分で決めた記述ルールにしたがっていればある程度見通しが利くものだが、人が定義したものだと把握に苦労するものである。（実際、私が働いていたWeb制作現場のボスでさえ、人の書いたCSSは読みづらいと嘆いていた）そんな苦労もFirebugがあればかなり省力化できるのではないだろうか？優先順位で無効にされたCSS記述には消し線が入って無効になっていることがしっかり読み取れる。なんて親切な設計だろう。

おまけにCSSの値を変更することが出来てしまう。もちろんブラウザ上だけの話なので、元になるCSSを最終的には編集しなくてはならないが、気軽に色々試してみても元のCSSには被害が無いという点だけでも安心ではないだろうか？更にCSSの値を変更する際はただ編集出来るだけではなく、オートコンプリートで候補がリストアップされるのもありがたいことである。一気に作業効率が上がると思うし、CSSの理解を深める学習ツールとしても有効だと思う。気になるサイトを見つけたらF12を押してFirebugを起動し、心行くまでCSSをカスタマイズしてみて理解を深めると良いだろう。きっとその内CSSを深く理解できると思う。

レイアウト

CSSにまだ慣れていない私は、ボーダーとかパディングとかややこしいなと思ったりする事が多いのだが、この機能を使うと視覚的にピクセル情報などが確認できるので、非常に嬉しく思ったりする。なぜなら実際に数値を動かしてみてその結果をブラウザで表示している分析対象のページに反映できるからだ。例えば左マージンの数値を増やしてみたらどんどん右によってきたりして、なるほどこういうことなのかとあっさり理解できてしまったりして、初心者の理解を助けるツールとしても使えると思うのだ。もちろん上級者は緻密なレイアウトを設計する為に使えば良い訳で、それがPHP+SQLの情報から動的に作られたページだったとしてもブラウザでXHTML+CSSとして表示されている訳だから、容易にCSSを調整して数値を決めることが出来るのだ。このような方法はDreamWeaverでも出来ないんじゃないかな？（テストサーバとか設定すれば出来そうな気はするがそこまで使いこなせていないし何しろ個人で新しいバージョンを買うには高すぎるでしょ！）とにかくCSSレイアウトの微調整には欠かせないツールとなりそうだ。

スクリプト

私はこのジャンルは非常に苦手なので使うことはないと思うのだが、Javaスクリプトのソースも簡単に読める様だ。分かる人が読めば直ぐに判るものらしいから、容易にJavaスクリプトを表示させられるのは便利ではないだろうか？私はJavaスクリプトを読んでもさっぱり理解できないのでこの機能だけは全く使ってないと言っても良いだろう。分かる人は使って楽して下さい。

ネットワークの監視

こんな機能まで実装されてるの？と驚くしかない機能だと思う。Webサイトのコンテンツは色々なファイルから構成されていて、Webブラウザがその言い代えればパーツをどの様な順番でどれくらいの時間で集めている（読み込んでいる）かを時系列グラフで表示してくれる。更にキャッシュの状態だとかHTTPヘッダ情報まで見られちゃう訳で、もし自分以外の人が使うと自分のサイトがちょっとヤバイ位丸裸にされてしまうのではないかと不安に思うくらいである。

と言う訳で、技術系の人ならこの類のツールは手放せないことになるだろうと思う。Webの構造の事をもっと知りたいという人や、Webデザイナー達も必須だと言えるだろう。私は最近CMSを使う事にはまっているので、苦手なPHPを解析する為の足がかりとしてXHTMLソースをしっかり読み取るのが課題だと感じ、構造解析の為にはFirebugが手放せないツールとなっていたりするのだ。

投稿者 sasapurin : 23:57 | コメント (0) | Webブラウザ | トラックバック

2008年01月03日

AdSens:PINコード

GoogleからAdSenseのPINコードが届いた。印刷した紙を半分に折って3辺を丸いシールで閉じただけの簡素なAirMailだ。

Air Mail for AdSense PIN No.

AdSenseのPINコードを受け取るのは実は初めてである。話には聞いていたのだが、それが届いたという事は、ようやく$50を越えたという事の証しだ。$50に達するのに何年かかったんだか（苦笑

ぶっちゃけ、AdSenseは興味本位で始めただけなのだが、他のアフィリエイトに比べるとコードの更新等という手間が無くて便利だなと思うから設置したままなのだ。そう放置したままである（苦笑　だからアフィリエイトの成果が上がらなくても当然だったりする。クリック率メチャクチャ低いもん。それにアクセス数自体少ないし（汗

しかしこのPINコードが届いてからちょっと考えが変わりつつある。もうちょっと真面目にアフィリエイトという奴に取り組んでみると面白いかも知れないぞ、という感じだ。少なくともどうでも良いページにコードを埋め込んで、アクセス数が高いページに埋め込んでいないって言うのはあかんでしょ。いや自覚はしていたんだけど既存ページに一々AdSenseのコードを埋め込むのが面倒で．．それにCGIだとどうしようもないなぁって諦めていて。ちょっと調べたら方法は分かったのに。

それでこれを機会にAdSenseコードを、もうちょっと効率の良いページに埋め込もうと思った。Googleのレポートで、「あなたのサイトの多くのページで1しか設置されていません」みたいな指摘を毎月受けているのだが、3つまで設置出来るというのだからそのルールを美味く使わないと損だなと思えてきた。何しろ月平均$1程度の報酬だから、後$50カウントするのに4年もかかったんじゃたまらんからなー。もっともその前にAdSense自体が無くなるかも知れない（苦笑　果たして私は$100のご褒美を頂く事が出来るのだろうか？（笑

投稿者 sasapurin : 21:40 | コメント (0) | Webブラウザ , 雑記 | トラックバック

2007年12月26日

AdSense:試行錯誤した結果..

恐らく、私の管理しているオリジナルコンテンツのページで一番アクセスがある掲示板CGIに、AdSenseを貼ってみようかなと思い立ち、KENTさんのCGIに少し手を加えて見ることにした。プログラミングは苦手だからPerlもハッキリ言って良く分からないし、HTML文法も分かってる様で分かってないし苦労した。

結果、なんぼやってもAdSenseが表示されない。なんで？なんで？

もしや．．と思って、既にAdSenseを設置しているブログを見てみたら表示されている広告タイプと、表示されていない広告タイプがある事が判明。っていうかほぼ全滅状態でかろうじて一つだけ表示されてるという訳だ。これじゃぁいくら頑張ってPerlの文法と格闘しても駄目だっつうの..orz　更に念のため良く訪れるお気に入りサイトにもAdSenseの状態を確認しに行ったら表示されていなかった。自分だけでなく他の人のAdSenseもダメって事は、Google側でトラブルが起きている様だ。AdSenseカレンダーにメンテナンスは予定されていないから、トラブルと見て良いだろう。もっともGoogleは全く気にせず停止してる可能性もあるけどね。

今回、Perlで作ったCGIの中で少しだけテクニックを覚えたので備忘録しておく。覚えておく自信も無いし覚えておきたくも無いから備忘録するのだ。

KENTさんのCGIで、私が使っているのはWeb Patioというスレッド型の掲示板CGIだ。こいつにAdSense広告を表示させたいと思った。Ver.1.51と古かったので、一気にVel.3.21にアップグレードした。画像もアップ出来るようになっているし、迷惑書き込み対策も色々盛り込まれている。

それはさておき、AdSenseの設置方法だ。

まずはAdSenseのコードを埋め込む。これはinit.cgiに埋め込むのが良さそうだ。一番最後の所に追記してしまう。

#-------------------------------------------------
# Google AdSense
#-------------------------------------------------
sub googleadsense {

# ここにGoogle AdSenseのコードを貼る。
print <<"EOM";
<script type="text/javascript"></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
EOM

}

#が行頭にある行はコメント行だから無視していい。
sub は関数定義だ。{から}までがこの関数の動作を定義する範囲。この関数の中ではGoogle AdSenseのコードを出力(Print）するだけの単純な動作が定義されている様だ。

なお、よく分からないのだが、Perlで記述されたスクリプトの最後は下記の様になっているので、これが一番最後になるようにしなければならないらしい。どういう意味なんだろうか？まぁ気が向いたら調べてみるけど今はだるいからそういうものだという認識に止めておく。

そして肝心のpatio.cgiだ。こいつの中で下記の様に記述すると、init.cgiに記述したAdSenseのコードを読み込んでくれる。

# Google AdSense（コメント行）
　&googleadsense;

別のcgiファイルに記したコードを読み込む方法は分かってしまえば非常に簡単だ。しかしどこでもいいかと言うとそうではない。KENTさんのCGIには色々な所で下記のような部分がある。「ヒアドキュメント」という手法らしい。応用例が色々とネット上にはあるので検索してみると理解が深まる。良く読み返してみると、AdSenseコードを記述した所でもこの手法が使われている。subは関数の定義だから、googleadsenseという関数は、ヒアドキュメントでAdSenseコードを出力するだけの関数として機能するという事だろう。

print <<"EOM";
<div align="center">
<table width="95%" border="0">
<tr>
　<td>
　<table width="100%">
　<tr>
　<td>
EOM

この最初の

print <<"EOM";

から

EOM

までの間に記された文字はそのまま出力されるらしい。だからHTMLのタグコードをそのまま打ち込んでいるのだ。なのでこの間に

&googleadsense;

と書いても駄目だ。何故なら関数（一見すると変数っぽいんだけど）を認識せず、そのまま文字として表示されてしまうからだ。いったん

EOM

の行を入れてから、googleadsense（変数）を呼び出して、また続きは

print <<"EOM";

と始めてHTMLのコードを書いていく。後はHTMLの知識でなんとでもなる世界の様だ。同様にしてread.cgiにも表示させたい部分に、

&googleadsense;

を埋め込んでいけば、スレッド内表示でもAdSenseが表示される様になる。ぶっちゃけ整形はHTMLの知識が必要だし、AdSense広告には大きさやフォーマット等の種類があるので、こればかりは各々が頑張って試行錯誤して好みに合わせるしか無さそうだ。

しかし、Google AdSense復旧しませんなぁ～。そう言えば以前も広告が表示されなくなって焦った事があるんだけど、今日は特に長引いているような気がする。

投稿者 sasapurin : 21:37 | コメント (0) | Perl , Webブラウザ | トラックバック

2007年11月29日

Adsenseが表示されなくなった訳は？

ふとブログを書いてみて気づいたら、Adsenseが表示されなくなっている事に気づいた。真っ先に思い当たったのは、メインサーバのNICがトラブルでDDNSの書き換えをしているddclientが働かなくなっており、IPアドレス変更時にドメイン名とIPアドレスが一致しない状態に有ること。時々手作業でDDNSの登録を変更していたのだ。要するにこのブログにGoogleのシステムがアクセス出来なくなっていたのが原因じゃないかと言うことだ。

昨晩、家内に「HPまだ復旧しないの～？クリスマスまでには復旧させてよ」と言われて、とりあえずとddclientだけ仕込んだFreeBSD鯖を動かしてDDNSの解決をしたばかりだったので、なんてタイムリーな事なんだと思ったりした。ちょっと不安になって、「Adsenseが表示されなくなった」を検索してみたら、Googleのトラブルシューティングに飛んだ。読んでみるとずばり「Adsenseが表示されなくなった」という問い合わせが。ガイドラインに沿ってない違反だと判断された場合、広告表示されなくなると言うのを読んで、「マジかよ～」と冷や汗流しならガイドライン違反通知のメールが届いてないか調べてみたのだが、特に問題とされるメールは届いていない。そもそも思い当たるような記事を書いた記憶が無い。

広告をクリックさせるような事は一切書いた覚えがないし、一応Adsenseのルールは守っているつもりなので、やっぱり長い間外部からアクセス出来なくなっていたのが問題だと思う。それでGoogleがAdsenseを表示させてくれなくなっているんだろうと、Adsenseにログインしてみたが、はてどうやって確認したら良いものか？Adsenseを表示させる時にURLを通知して承認を受けた記憶があるんだけどそれが非承認になっているのかな？

広告の管理というタブが増えてる？なのに一個も広告ユニットが無いじゃんか。でも特にコンテンツを停止しているとか言う情報も無いから、勘でもう一度コードを生成してみたら生き返るんじゃないかと単純に思いつき、一つだけ広告ユニットを作ってブログにコードを埋め込んで比較してみた。コードを比較すると殆ど同じじゃないか？これは一体どういうこっちゃ？やっぱり制限かけられてるって事だろうな。それともAdsenseのバージョンアップでトラブッてる？

とりあえずコードを更新してＭＴを保存。再構築かけるのに数十秒待った。ヒヤヒヤしながらトップページを表示させてみたらあっさりAdsenseが表示される様に戻った。良かった剥奪された訳じゃなかったんだね。$100 目前で剥奪されたら落ち込みまっせ。（まだ一度も小切手を受け取った事が無い）

Adsenseは特にブログだと自分の書いた記事に連動して広告が自動的に変化しますから楽ですね。最近試験的にPloneを試しているので、現在休止しているメインのHPを一気にPloneに変更するかも知れません。もちろんそうしたらAdsenseも設置するつもりです。当分Googleとはおつきあいして行く事になりそうだな。早く$100にならないかな～（アクセス数が少ないのをなんとかしろよ..orz

投稿者 sasapurin : 17:38 | コメント (0) | Webブラウザ , コンピュータ | トラックバック

2007年11月26日

o2on

正直いって2chにはゴミな情報が99%で、有用な情報は1%あるか無いか位だと思っていたので、ほとんど使ったことが無かった。しかし705NKを使うようになってから、N73の情報を探すことが多く、Googleで検索した結果が2chだと「あーまいったな」という感じで仕方なしに読んだりしていた。

ところが2chは古いスレッドはDAT落ちという、普通では見られない状態になるらしく、Googleで検索した結果を読むことができない事が多いことに気づいた。もちろんお金を払えば見られるようになるということ位はリサーチ済みだが、悪名高い2chに献金するのもなんだかなぁと思うのである。にちゃんねらーの怒りを買いそうだが．．

とりあえずDATを保管する目的で、にちゃんねるブラウザを使ってみる事にした。色々有って選ぶのに困ったから、にちゃんねらーが作っている「ギコナビ」というのを使ってみた。正それほど使い易いとは思わないのだが、ほかのを試すのも面倒なのでそのまま使いつづけている。しかしこれとてちょくちょく起動して、スレッドの情報を取り込まないと、DAT落ちしてしまうともうそのスレッドは読めない。なんか無償に不便である。過去スレのURLを掲載している事を目にするが、それを読むには2chに献金するしかないって事か。まぁそれがあたりまえの社会の仕組みだとは思うが、なんかそれには応じられないような気がする。要はDATを皆で共有できたら解決するんじゃないか？そう思ったのだ。

DATファイルの共有。同じ事を考える人はいるはずだと思い調べてみたところ、o2onというプロジェクトがSourceForgeで行われていることを知った。要するにP2Pで2chのDATファイルを共有（補完）し合う仕組みで、2chブラウザにとってはプロクシとして動作するというシンプルな発想だ。P2Pとくればお約束のポート開放（ポートフォワード）という面倒な儀式はあるものの、試験的にWindowsパソコンにインストールしてみたところ、DAT落ちで見られなかった過去ログが見られるようになってかなりうれしかった。

P2Pでの補完はタイミングの問題もあるので、常時稼動が好ましいと思う。そこでテレビ録画に使っている古いPCに間借りすることにし、朝から深夜までの自動稼動（オート起動、オートシャットダウン）な環境で運用させることにした。常用しているノートパソコンの2chブラウザはプロクシ設定でテレビ録画サーバのIPアドレスを設定し、o2onにアクセスするようにした。

惜しいのはIPv6に対応させてくれていない点だ。なぜなら実家に帰省した時なんかはLANから出てしまうので、プロクシとして利用できないからだ。IPv6ならこんなジレンマも生じないはず。IPv6対応化してくれたらもっと色々な意味で知人に公開する2chプロクシとして使うとか発展性があると思うんだけけどな。

もちろんSourceForgeにはソースコードがあるので、それを修正してIPv6対応させるって事も可能なのだろうけど、自分はプログラミング一切できないし。だから言いたいことを言うだけで結局他人任せ..orz

いや、プログラミングができるならほんとに首突っ込んでやりたいんですけどね。人には向き不向きってあるんだし。おとなしく成果物を使わせていただこうっと。ほんとありがとうございます。これからの課題は2ch特有のゴミ除去かな。そんなフィルター機能がギコナビに備わっているとかなり嬉しいのですが。

投稿者 sasapurin : 13:31 | コメント (0) | Webブラウザ , Windows系 , オープンソース系 | トラックバック

2007年11月14日

ココログ無料版にもAdsense

設置できるんですね、知りませんでした。嫁はんは簡単なココログがええやろとずいぶん前から使わせているのですが、以前はカスタマイズ性がほとんどなかった記憶があり、私は全くと言ってよい程使ってないのですが（苦笑）、飯食っている時にAdsenseの話になり、どうせなら嫁はんのブログにも設置できたらええのになと思い検索してみたら方法がありました。

ココログにGoogle Adsenseを表示させる方法（基本）

丁寧な画像キャプチャがあるのでココログユーザーなら使えるでしょう。たぶん。

たぶんと言うのは、嫁はんは自力で出来なかったから（苦笑

出来るということと、手順（概要）がわかってしまえばそんなに難しい内容ではないので、アフィリエイトに興味のある人はチャレンジしてみると良いでしょう。ただし、Adsenseの画像キャプチャは有りません。Googleに無断掲載で苦情を言われたらしく除去したそうです。Adsense規約は結構厳しいと聞きますが、なかなかどうしてチェック入れてるんですね。

Adsense規約には色々なルールがあるのでしっかり読んだほうが良いです。じゃないと承認されなかったり、途中から権利剥奪されてしまったりしますんで。

投稿者 sasapurin : 22:27 | コメント (0) | Webブラウザ | トラックバック

2007年10月12日

Greasemonkey:mixiの2カラム表示スクリプト

先日、

「リニューアル後のmixiを2カラム/750px幅化するユーザースタイルシートを書いてみた」をGreasemonkeyスクリプトにしてみた

を読んで、Greasemonkeyを本格的に使い始めたばかりだが、早速今日、上記のスクリプトがアップデートされた様で、mixiにログインしたらアップデートの通知が赤い文字で表示された。すかさずクリックしてアップデートした。

mixiでの作業が終わってログアウト。その後また調べたい事が出来てログインしようとブックマークからmixiにアクセスしたら、表示されなくなっていたハズの、画像（広告？）がトップページに表示される様に戻ってる。って事はGreasemonkeyが機能してない？

ところがログインしてみたらちゃんと2カラム表示に修正されて表示された。ってことはGreasemonkeyは機能しているって事か。何故トップページが変化したんかな？と考えて思い出した。そう言えば適用するURLをhttpsでもOKな様にカスタムしてたんだった。具体的にはこんな風に

http*://mixi.jp/*　　←これにマッチングしたURLならGreasemonkeyが機能する

これだとhttpでもhttpsでも適用されるって意味のハズ。実際それでしばらく使ってたんだから。でもアップデートしたらまた上書きされちゃうのかな？

とりあえず自分ではスクリプトを書けないので、詳しいことは分からないが、仕組みは少しずつ分かってきているので、これからも使わせて頂こうと思う。

投稿者 sasapurin : 15:37 | コメント (0) | Webブラウザ | トラックバック

2007年10月09日

Greasemonkey:リニューアル後のmixiを2カラム表示

Firefox使ってんだから、機能拡張使わないと損だよなとか思って、Greasemonkeyをインストールしてみたけど、肝心のスクリプトを書けなくて（涙）そのまま放置してた。

先日、mixiにログインしたらいきなりデザインとレイアウトが変わっていて戸惑ったが、どうやらこの変更に不満を抱いたmixiユーザーが抗議する為のコミュニティを作ったりとしている様だ。気持ちは分からんでも無いがまぁmixi側の都合もあるだろうからね。

たまたまこんな事をやった人が居るって情報をキャッチした

リニューアル後のmixiを2カラム/750px幅化するユーザースタイルシートを書いてみた
"別に2カラム原理主義者というわけではないのですが、カラム変更オプションが無くなったのでついカッとなって書いてみました。"

という理由が笑えるというかなんというか。頭のイイ人は居るもんだな。

もしやgreasemonkey（グリースモンキー）でこのスタイルシート使えるんかな？と思ったけど、まだgreasemonkeyの事良く分かってないから、素直に「Stylish」拡張をインストールするしか無さそう。

かし、訳も分かってない機能拡張を次々インストールするのも抵抗が有るなぁと躊躇していたら、

「リニューアル後のmixiを2カラム/750px幅化するユーザースタイルシートを書いてみた」をGreasemonkeyスクリプトにしてみた

って人まで現れて、オマケにmixiの仕様が変わった時の変更アップデート通知機能まで付けてくれているって言うから、こちらにお世話になることにした。この機会にGreasemonkeyを使って行き、スタイルシートの改造を少しずつ理解していこう。

猿のアイコン（Greasemonkey）を有効にした状態で、上記サイトのJavaスクリプトを実行したら、定義ファイルが読み込まれた。mixiにアクセスしてみたら、タイトル画面の画像が削除されている。すげぇ～スッキリした感じ。Greasemonkeyは設定してあるURLを読み込む時に定義に従いスタイルシートを変更してくれる様だ。

リニューアル後のmixi画面も2カラムでスッキリ表示（広告が表示されないしー）で嬉しい。
ごちゃごちゃ表示されていると鬱陶しいもんね。
いつもながら頭のイイ人はいるもんだなぁと感心してしまうのでありました。

投稿者 sasapurin : 16:45 | コメント (0) | Webブラウザ | トラックバック

2007年02月27日

Firefox 2.0.0.2 不調？

先日アップデートしたはずのFirefoxがまたアップデートを行った。変だなと思いつつもアップデートをもう一度行い、Firefoxを再起動したらエラーが表示される。

訳が分からないけどとりあえず更新に失敗したという事らしい。

個人的にはFirefoxは結構気に入っているのだが、段々重くなってきた印象が強いし、細部でInternet Explorerとの互換性の無さ、その他不便なところが有るのでそういう部分を改良して欲しいと思う。個人的にはこれ以上の高機能さはブラウザには必要ないし。軽くて安全なWebブラウザが良いなと思う今日この頃。とりあえずこの手のどうしようもないエラーは勘弁して欲しい。

投稿者 sasapurin : 20:21 | コメント (0) | Webブラウザ | トラックバック

2007年02月07日

McAfee SiteAdvisor

今日、たまたまYahoo!でセキュリティ的な事について書いたコラムに目がとまり、そこで知ったのだが、「McAfee SiteAdvisor」をInternet Explorer(IE)、及びFirefoxにプラグインとしてインストールすることで、セキュリティ的な観点からサイト分析をする機能をブラウザに実装してくれ、実際にその効果を体感することができた。パソコンに詳しくない方でも導入出来ると思うので是非続きを読んでみて欲しい。

IEにプラグインをインストールすると、McAfee SiteAdviserの少し長いボタンが追加された。通常の安全なサイトだと緑色のボタンである。Yahoo! Japanや、Googleなどのメジャーどころでは「特に重大な問題は見つかりませんでした」とメッセージが表示される。そのページからダウンロード出来るファイルの安全性も診断して、安全なら緑色のチェックマークで表示してくれる。

このプラグインを知るまでは、結構気軽に（ウィルス対策ソフトは入れているが）フリーウェアなどをダウンロードしてインストールしていたが、これを知ってしまった今は、ダウンロードする前に診断しようという気になった。一手間かかるが安全には変えられない。

このプラグインが提供してくれる機能はこれだけではない。サイトを分析して情報を提供してくれるのだ。どこの国のサイト（ネットワーク）なのか、利用者数は多いのか、どのようなサイト（安全・危険）にリンクしているかも調べて、図にしてくれる。（下図はGoogleのリンク情報）

手っ取り早くこのツールの有用性を実感するには、 Googleでヤバめのキーワードを検索してみるとよいだろう(ちょっと極端過ぎて好ましくないかなぁ)。たとえば、[Windows Crack]等で検索すると、ズラズラとやばそうな海外のサイトが検索されてくる。そしてその多くにマークが表示されると思う。これは危険なページというマークなのでアクセスしない方が良いに決まっている。安全なページの場合はマークが表示されるのでアクセスするならこちらの方が良いだろう。マークをクリックするとそのページを分析した詳細が確認できるのもありがたい。

ネットワークやWebサイトの仕組みに詳しい人ならば、色々な手法で情報をキャッチしてから安全性を確保して行けるのだが、初心者や技術的なことに興味の無い人にそれを要求するのは適切ではないと思う。説明の関係上、好ましくない表現があるかもしれないが、手軽に安心出来るツールを使いたいと言う向きにはかなり有力なパートナーとなってくれるのではないだろうか。

投稿者 sasapurin : 17:58 | コメント (0) | Webブラウザ , コンピュータ | トラックバック

トップページ > コンピュータ > Webブラウザ

sasapurinのブログ

日記と本やゲーム、映画などのレビューを掲載しています。興味のあるカテゴリーが有ったらご覧になって下さい。