メイン

TOP > Webをカスタマイズ

Webをカスタマイズ

Googleマップ、Google Maps API V3でアクセスマップを作ってみました

Maps API Version 2で作ったGoogleマップを、タスクマザーのアクセスページとして、設定していた(旧アクセスマップ)。
2009年5月下旬にバージョン3(Google Maps API V3)が公開になったので、早速こちらで新アクセスマップを作ってみた。

Version3での変更点

・Google Maps API Keyの取得が不要
 Keyを取得することは、設置するサイトのURLを入れるだけで発行されるので実は簡単だけど、ワンステップ作業が減るのでマル◎

・Javascript、コードの変更
 これはV1→V2からの変更時も同じだったので、サンプルなどを参照することで簡単なものはすぐに作成できる。
左上のスライダーバーが、現在、googleマップで表示されている新しいタイプに変更になっている。
ただ、ストリートビューまでは対応していないらしい。

・iPhone(GPS機能をもったもの)などのデバイスにも対応
 なるほどバージョンアップは、確かに必要だ。今後、いろいろなデバイスにも対応するさまざまなAPIが作られるんだろうな。

さて、Google Maps API V3を利用したGoogleマップ、「タスクマザー・アクセスマップ」の作成方法

Google Maps API V3ページにアクセス。
英語なのでちょっと面食らうが、英語は読まなくてもOK。
14種類のサンプルが用意されており、作りたいイメージのソースをエディタに貼り付けて改造を行う。

今回は、マーカーをオリジナルにしたかったのと、マーカーからの吹き出しを表示させたかったので、

icon-simple.htmlのソースをベースに、
infowindow-simple.htmlページ(マーカーをクリックすると吹き出しがでる)のコードを追加、改造した。

続きを読む "Googleマップ、Google Maps API V3でアクセスマップを作ってみました" »

25
May
2009

Google Analyticsのモーショングラフ、「Visualize」機能を英語版で使ってみた、早く日本語に対応してよGoogle Japan

Google Analytics Visualize機能

昨年10月、Google Analyticsの新機能として、日本語版では「カスタムレポート」と「アドバンスセグメント」の機能が、ベータ版で登場した。(去年のセミナー「Googleツールでサイトを分析してみよう~お店ばたけステップアップ講座」でも2機能について解説した。)

同じ新機能で「モーション グラフ」も登場したが、これは日本語版には対応していなかった。
私は、この機能がいちばんすごい!面白くてわかりやすい!と思っていたので、すぐに日本語にも対応すると期待していた。

しかしいまだに未対応だが、Web担のなかの人-編集部ブログ「Google Analyticsの「Visualize」機能を動画で解説(でも英語画面)」で、詳しく説明され(YouTubeで字幕あり解説)ていたので、ようやく試してみることにした。

続きを読む "Google Analyticsのモーショングラフ、「Visualize」機能を英語版で使ってみた、早く日本語に対応してよGoogle Japan" »

Google Analyticsで「Movable TypeでRSSをトラッキングする方法」が上手くいかない?

Analytics 日本版 公式ブログで、「RSSフィードとアクセス解析(その2) - Movable TypeでRSSをトラッキングする方法」があったので、早速試してみた。

結論からいうと、atom.xmlに以下のメッセージがでており、トラッキングどころか、RSSリーダーで購読してくれているユーザも購読不可の状態になっていることが1週間すぎて判明(^^;

Image00118.jpg

XMLページを表示できません。

とのこと。

gooRSSリーダーに自分のHPを登録しているのにも関わらず、全く気が付いていなかった、なんとも不覚。確かにリーダーには、「?」マークが出力されており、購読不可になっていた。

今日、RSSリーダーからのトラッキング効果をみようと、Google Analyticsにアクセスしてやっと気が付いた。

続きを読む "Google Analyticsで「Movable TypeでRSSをトラッキングする方法」が上手くいかない?" »

タスクマザーのIE7表示不具合やっと改善(^^;(IE7 CSSハック)

懸案だったIE7での不具合表示の対策をやっとクリアできた。

具体的には、IE7ではヘッダー画像のみ表示され、
「タスクマザー」
「MovableTypeビジネス構築・Webコンサルティング・IT支援で石川県のビジネスサポートを行なっています。」のテキスト文字が表示されていなかった。
スクロールして戻るとかろうじて、切れ切れに表示されたりしていた・・・。

↓↓↓↓↓↓↓↓↓(改善前のIE7の表示)
IE7-01.jpg

で、具体的な改善方法。

#banner-description に
IE7のみ適用のCSSハックを行った。

*+html #banner-description {
display: inline-block;
}

IE7のみにCSSを適用するためには、スタイル名の前に「*+html 」を付けることがCSSハックとして、一般的に知られている。
今回はその方法で、IE7のみに適用。

続きを読む "タスクマザーのIE7表示不具合やっと改善(^^;(IE7 CSSハック)" »

Google Analyticsで自分(内部)のトラフィックを除外する方法

google_cookies.JPG
Google Analytics解析で自分のアクセスログをカウントしたくないができないという質問をうけたので、試しに設定してみた。 googleのヘルプでは、「社内からのアクセスを除外するにはどうすればよいですか?」に設定方法が書いてあるが、PC環境上、IPアドレスでの除外はできないので、Cookie によってトラフィックを除外するの方法で設定したいとのこと。

このヘルプ内容だけではうまくいかないらしい。
そこで、minorio のプログラミング・メモさんの「Google Analytics で、レポートから内部トラフィックを除外する方法:新しいトラッキングコード(ga.js)の場合のフィルタの設定方法」を参考に設定を行う。

まず、「Analytics 設定 」-「 フィルタ マネージャ」-「新しいフィルタを作成」で上記画像のように設定を行う。
次のステップは、cookieを生成するページ作成。
ここがどうもgoogleヘルプに足りない情報であるようである。
指定されたjavascriptだけでなく、自分のトラッキングコードも含めたページを作成し、これをサーバにアップし、自分が使用するPCのブラウザでこのページにアクセスすることで、cookieが作成され以後、レポートされなくなる仕組みだ。

続きを読む "Google Analyticsで自分(内部)のトラフィックを除外する方法" »

03
November
2007

yahoo!Flash版地図APIでタスクマザーFlash地図を追加しました

yahoo_flash.jpg
タスクマザーHP「taskmotherについて」では、アクセスマップとして、googleマップとYahoo!マップのAPIを利用して地図を掲載している。

両者ともjavascript版APIだ。
yahoo!地図情報は、これに加えてFlash版地図サービスを提供している。
Yahoo!デベロッパーネットワークのFlash版地図APIに詳細が記載。

Flash版の特徴として、
 ・シフトキーを押しながらマウスホイールを使うことで、地図が回転する。
 ・地図上でルートを再生できる(XMLファイルでデータを作成)

方向音痴さんには、回転ができる機能は優れもの!首をかたむけなくてもよい(笑)
ルート再生は、さまざまなシーンに利用できると思われる。
サンプルはYahoo!地図スタッフブログ のFlash版地図APIを公開しました! のサンプル2でみることができる。
具体的な使用例として、バスの運行路線再生の「バスでお出かけMAP」がおもしろい。

続きを読む "yahoo!Flash版地図APIでタスクマザーFlash地図を追加しました" »

Google Maps APIなしで、自社サイトにGoogleマップ表示が可能に

Google Maps APIという優れもののおかげで、Webサイトにおける地図情報発信が格段に向上した。
しかし、このAPI、なんでもできるがいざ導入となると少々、敷居が高い。
挫折した方も多いと思うが、Googleがあらたな機能を導入してくれた。

Googleマップで、表示したい検索キーワードを表示し、マップが表示されたらこの地図を自分のサイトやブログに簡単に貼り付けることができるタグを提示。
そう、YouTubeのタグ貼り付けと同じ機能だ。

具体的に、手順を紹介。
Googleマップで「タスクマザー」と入力し、「地図を検索」ボタンをクリック。
ビジネスローカルセンターに登録しているので、各種情報がのった吹き出しが表示され、オフィスの位置が表示される。

タスクマザーのgoogleマップ

ここで画面右上(地図の右上)の「このページのリンク」をクリック。
するとオレンジのウィンドウが表示される。

googlemaps貼り付けタグ

下段のフォームの内容をコピーすると、サイトやブログに表示されるという簡単なステップ。
また、コピーするフォームの下の「埋め込み地図のカスタマイズとプレビュー」をクリックすると新ウィンドウが開き、表示されるプレビュー地図、さらに詳細なカスタマイズ、地図のサイズ大(width:640)・中(425)・小(300)、自由なサイズ指定もできる。

続きを読む "Google Maps APIなしで、自社サイトにGoogleマップ表示が可能に" »

Firebug-Web開発ツールはとにかくすごい!!

firebug.JPG
Firefoxのアドオンツールである「Firebug」は、Webページの編集ツールである。
CSS、HTML、Javascriptを編集、デバックできる優れた機能をもっており、久々感動級の優れたフリーツールである。

画像のように、表示されたWebページをタブキーにより、HTML、CSS、Javascriptなどに切替えられ、色分け表示される。
また、HTMLの1行を選択すると、該当するWebページが青色に反転し、該当するCSSが右ページに表示される。
その他いろいろな機能が用意されているが、詳しい機能についてはFirebug - Web Development Evolvedに詳しく書かれている。

続きを読む "Firebug-Web開発ツールはとにかくすごい!!" »

26
June
2007

各記事(エントリー)にソーシャルブックマック登録アイコンを設置

bookmarkicon.JPG
ソーシャルブックマーク・オンラインブックマーク・ブックマークレットなどといわれているブックマークWebサービスに簡単に登録できるボタンを各エントリーに設置しました。

以下の5つのブックマークサービス登録ボタンを導入

  • Yahoo!ブックマーク
  • はてなブックマーク
  • newsing it!ブックマーク
  • del.icio.usブックマーク
  • Buzzurlブックマーク

続きを読む "各記事(エントリー)にソーシャルブックマック登録アイコンを設置" »

13
June
2007

Ajaxを利用したタブメニューリンクページをトップページに設置

トップページの下部分にリンクページを追加しました。
順次、掲載予定です。

さて、このタブメニューは、Ajaxライブラリを利用しています。
今回はリンク集として利用しましたが、いろいろな用途に使えますね。

Ajaxライブラリは、一部を除いてほとんどが無料で入手でき、商用サイトにも使うことができるものが結構あるようです。

続きを読む "Ajaxを利用したタブメニューリンクページをトップページに設置" »

Powered by FeedBurner

RSS2.0

タスクマザー(taskmother)
  中野 治美

〒921-8806
  石川県野々市市北西部土地区画整理事業
     施工地区55街区3番202