前回に引き続き、Webサービス分析ツールを作っていきます。自社のサービスのみならず、他社のサービスの分析にも使えるので、企画を立案されている方にも向いています。
まずは完成予想図です。
![]() |
| 完成予想図 |
今回、前回作成したツールに追加する機能として、
になります。今回も前回と同様にprototype.jsが必要になります。今回利用するJavaScriptを含んだHTMLファイルを前回同様にダウンロードできるようにしてありますので、ソースコードとにらめっこしながらご覧下さい。
では順番に説明していきます。
これは非常に簡単です。Alexaのアクセス解析精度については是非が問われるところではありますが、他社のサービスでも取得できるアクセス解析サービスは現状ではAlexaのものが最も有力なので、目安としての数値にはなるかと思います。
![]() |
| Alexa.comのTraffic Rankings |
Alexa.comの「Traffic Rakings」でサービス名を入力します。その結果、グラフが表示されます。そのグラフの下に「Put this graph on your site!」という表示があります。これをクリックすると、グラフを自分のサイトに表示するためのコードが生成されます。
![]() |
| グラフ表示のためのコード取得 |
なおこのグラフは、一番最初に入力されるドメイン(ここではmashupedia.jp)と同じドメインのWebサーバーにあるHTMLに上記コードを記述しておかないと表示されません。Webサーバーを持っていない方は、残念ながら利用できません。
表示する方法はいくつかありますが、もっとも簡単なのは、WebサーバーにHTMLファイルをアップロードして表示することです。
今回はAlexaのコードに多少手を加えて、比較したいドメインを可変で指定できるようにしてみました。ただし、AlexaのWeb APIからデータを取得できるドメインは3つまでですので、自分のサイトを除くと、指定できるドメインは最大2つまでになります。
として競合サイトを書いておくと、その競合サイトとの比較グラフを表示するように設定しています。
![]() |
| 競合サイトとの比較グラフ |
遊びにも仕事にも
楽しく快適に使いこなす!
誰も教えてくれなかった
スマートフォンの使い方が満載!
撮影から加工まで写真活用の
すべてまるわかり!
アンドロイド「使いにくい」を
徹底解消!
パソコンを仕事と生活に活かす総合情報誌
・お役立ち周辺機器購入ガイド
・最新画像処理ソフト驚きの実力
・新型CPU搭載の夏モデルが登場ほか
パソコン初心者応援マガジン
・必ず見つかるネット検索
・写真の保存&印刷決定版
・キーボードの便利技43 ほか
パワーユーザーのためのPC総合情報誌
・Ivy Bridge大研究
・本気で作る小型・静音PC
・新世代グラフィックスボードほか
ビジネスマンのパソコン誌
・パソコン&スマホで地図&GPS
・PDF「新」活用術
・ネットでらくらく資産管理 ほか