企業のtwitterアカウントや商品などブランドのtwitterアカウントなどオフィシャルなアカウントがあったり、なかったりしますが、フォローしているユーザーやフォロワーを管理したくなる時に便利なフォロワー管理ツールを探してみました。便利なツールがいろいろとあるようです。

各ツールともフォロワーしたり、フォローを外したり相互にできていたりをその場でチェク出来る機能があるようです。とはいっても、一番ありそうな使用シーンというのは、フォローしているのに、してくれない（随分勝手だとはおもいますが）ユーザーをリストアップしてまとめてフォローを外したり、フォローしてもらっているユーザーをフォローしたりすることだったりしますが、それは全部まとめてできるようになっています。

ついっぷるフレンズ

ビッグローブが運営、管理するフォロワー管理ツール。一度というか一日で行える処理の数がに制限があるみたいです。多くフォロワー管理の処理を行うつもりだと、結構面倒くさいですい。使い方はIDをoauth 認証して使います。

Friend or Follow

有料版を使えばそれなりに使えるようですが、結構動作が重かったです。7日間は無料で利用できるサービスやっているので、一度だけ使ってみるとかだったら有りですね。

ManageFlitter

これが一番軽かったです。というか関連ファイルを一気に読み込んでから操作するようなので、最初の読み込みは時間かかるのですが、その後は軽快に動作しました。ということで自分はこちらのツールを使って管理することにしてみました。（とは言っても管理するアカウントのフォロワーとか別にそんなに多くないのですけどね。まっいっか。）

ある一定の人数が集まる会社や組織とかのチームなどはgoogle appsなどを使うと便利にファイル共有やスケジュール共有、便利なスパムフィルターや携帯からのアクセスできたりするgmailとかが便利そうなので、独自ドメインで利用する方法でやってみました。備忘録も兼ねて。

今回利用してたのは、google apps の無料エディションです。10名分のメールアカウントまで作成して利用することができます。ちなみに、一人当たり25GBのメール容量やgoogle apps marketでアプリケーションをインストールできたりするのも魅力です。

無料のgoogle appsで利用できるものというか利用するもの

• googleカレンダー

  チーム間でお互いの予定が確認できたり、ミーティングの予定などいれるのに非常に便利。iPhoneなどのスマートフォンにも通知してくれます。

• gmail

  高機能なスパムフィルタやIMAPで受信できるので複数のデバイスやPCなどで利用していてもメールやタスクをロストすることが少なくなっていいです。

• Google ドキュメント

  複数の人数でファイルの更新やら編集やらやっているとどちらが最新？みたいなことが起きたりしちゃいますがバージョンまで管理してくれるようです。普段は大きなファイルの受け渡しに利用する程度だったりしますが、dropboxは2GBまでしか使えないし、共有しているとすぐに一杯になってしまいますので、ファイルストレージに。

• Google サイト

  メールの設定方法や共有しておく情報をいれたり利用できますが、利用メリットがいまいち。。

今回の想定している利用シーン

• WEBサイト：レンタルサーバー
• メール：google apps のgmail
• DNSサーバー：お名前ドットコム

google appsアカウントを作成

• お名前ドットコム
• VALUE DOMAIN:バリュードメイン
• ムームードメイン

ドメイン所有の確認

• ドメイン ホストのウェブサイトでドメインの DNS 設定にアクセスする
• ウェブサイトのホーム ページの HTML を変更する
• ドメインのウェブサーバーにファイルをアップロードする

google apps ユーザーアカウントを登録する

メールアドレスというかアカウントを作成していきます。info@とか苗字 @とかでメンバーのアドレスを作成します。パスワードなどはここで設定もできるし、各自設定することも可能です。どこかに書いてあったと思いますが、現在使用しているgoogleアカウントとリンクすることができるようになるようです。

Googleアカウントを統合できる

メール配信の設定

ドメインの設定、アカウントの作成が終わったら、MXレコードを作成してメールがgmailのサーバーに届くように設定します。今回移行しているドメインの管理サービスはお名前ドットコムなので、お名前ドットコムのサービスにログインしてMXレコードを作成します。

設定内容

メール配信の設定 MX レコードの作成のヘルプ

MXレコードはお名前ドットコムの場合は、ログインした後メニューでいうとレンタルDNSレコード設定（ログインしていたら）というものになります。

今回はまってしまったのは、co.jpドメインを管理しているお名前ドットコムのレンタルDNSレコードの設定について。WEBサイトは他のレンタルサーバーを利用したいので、そのためのDNS設定をする必要があるようなのですが、レンタルDNSレコード設定を利用するドメインはお名前ドットコムのネームサーバー（01.dnsv.jp、02.dnsv.jp）を設定する必要があるようですので、ネームサーバーをお名前ドットコムの指定のDNSに変更して、MXレコードも作成します。（後述：MXレコードも作成したあとで、CNAMEの設定、NSレコードも追加します。）

Gmail のカスタム URLを設定する

mail.sanride.comといった適当なURL（サブドメインなど）をgoogle appsの管理画面より設定してDNSサーバーのCNAMEレコードもそれに応じて変更します。画面は　【google appsの設定 > メール】からドメインの変更します。

CNAME レコードを作成する

再度、お名前ドットコムの「レンタルDNSレコード設定」画面に戻りCNAME レコードを作成します。CNAME レコードのあとに、NSレコードを作成してレンタルサーバーのDNSを指定します。DNSのレコードは最終的にはこうなりました。CNAME レコードの変更はgoogleの"ghs.l.google.com"のTTLが23時間のためURLを変更してから反映されるまでに結構時間がかかりました。

そのほかDNSについて参考にしたもの

• DNSの解説 for ビギナー
• DNS に関する基本ガイド google apps
• DNSレコード確認するサービス

MX（エムエックス）レコード

メールアドレスのホスト（ドメイン・サブドメイン）にメールサーバのホストを割り当てる時に使われる情報の事。制御タイプの一つ。 Mail eXchangeの略。 @example.comのメールを送受信するメールサーバのホストはmail.example.comですよ、とメールクライアント（メール送信時）やメールサーバ（メール受信時）に教えてあげるために設定します。 複数のメールサーバのホストを優先度をつけて設定する事によってメールの紛失を防ぐ事が出来ます。解り易く言えばメールをたらい回しにして暇なサーバで送受信するのです。

CNAME

特定のホスト（ドメイン・サブドメイン）を別のホストに割り当てる時に使われる情報の事。ドメインとドメインを結びつける。 エイリアス（alias 別名）とも呼ばれる。制御タイプの一つ。 CanonicalNAMEの略。 www2.example.comっていうのは都合でつけたニックネームで本名はwww.example.comっていうんですよ、とWEBブラウザ等に教えてあげるために設定します。

比較的すぐに始められるので、個人商店のようなものからamazonのような大規模サイトまで様々なECサイトがネット上には数多くあります。高機能なECアプリケーションや、仕様制定してスクラッチで構築するもの、月額数百円で利用できるサービス、簡単にサーバーにインストールして利用できるオープンソースアプリケーションまでシステムも様々です。モノやサービス、コンテンツを販売するのに利用しているわけですが、各サービス、アプリケーションをカンタンにまとめてみました。

大きく分けて3タイプある

• ASP型（月額利用料）ショッピングカート
• ECアプリケーション or ショッピングカート（オープンソース）
• 高機能EC

ASP型（月額利用料）ショッピングカート

レンタルサーバ、システム利用料などを含んでいて機能も多機能なところが多いですので、このタイプを利用して限られたリソースを仕入れやサイト上の演出に力を注ぐケースが多いのではないでしょうか？　ショッピングモールやポータルサイト、検索エンジンなどが連動しているケースが多く、各モールからの集客が期待できます。月額の利用料や販売ロイヤルティ、決済手数料のパーセントも注目するところですが、カード決済された売上がいつ入金になるかも気になるところです。※入金タイミングについては未確認です。

楽天市場

日本最大のショッピングモールということで、集客効果が期待できるのが特徴。月額19500円〜売上ロイヤリティが3.5%〜6.5%、楽天市場提供の決済サービスを3%〜6%で利用可能です。楽天市場のアフィリエイトサービスが利用できることや楽天スーパーポイントを利用したり、バリューを求めて楽天市場を回遊しているような楽天市場の既存顧客がメインのターゲットに。

Yahoo!ショッピング

月額20,000円〜、売上ロイヤリティが3.0%〜4.5%。日本最大のポータルサイトやオークションサイトからの流入に期待できる。楽天市場と同じような費用体系ではあるが異なった客層になるようです。

Eストア ショップサーブ

月額4800円〜　決済手数料3.6%〜4.7%　売上ロイヤリティが5%。ポイントサービスやメールマガジンの配信機能などのショップの基本機能のほかに独自ドメインでのショップ運用やショップデザインテンプレートとかも用意してあります。楽天市場、Yahoo!ショッピングと比べると同じような機能を安価に利用することが出来る反面、ポータルなどからの集客効果は期待薄でも、Googleショッピングサーチには自動的に商品登録してくれます。

MakeShop

GMOが運営する月額0円〜のサービス。テンプレートも数多く用意されていて、クレジットカードの決済手数料が3.5%　月額5000円〜が利用できる。（ほかにもプランあり）価格ドットコムと連動したアイテムポストサービスが無料で利用できます。

カラーミーショップ

激安レンタルサーバーでおなじみのロリポップが運営するショッピングカートASP。月額875円～から利用可能。売上ロイヤリティは0円。決済サービスは8種類から選択ができて、決済手数料が3.5%～。Googleショッピングサーチに自動的に商品登録してくれたり、Yahoo!ショッピング商品掲載サービスがあるようです。低価格なのが魅力ですね。

FC2ショッピングカート

無料のレンタルサーバーやブログサービスもあるFC2のショッピングカートサービス。無料で50MBまでなら利用することができます。売上ロイヤリティは0円。決済代行サービスはPaypalと2社から選択できる。独自ドメインでの運用が可能。

amazon.co.jpマーケットプレイス

ショップを開くというより、amazonでモノを販売する方法。というとちょっと今回の趣旨とは違いますが、amazon内でモノを売れるサービスを利用することでショップの制作や決済についての初期の仕込みがほぼ何もしないで参入できます。月額基本料は0円。売上ロイヤリティが100円（基本成約料）+販売価格の15％（エレクトロニクスは販売価格の10％）とカテゴリー成約料（60円〜140円）。また、 フルフィルメントby Amazonを利用することで物流もamazonに委託することができます。出品販売サービスというくくりではオークションと同様ですが、amazon.co.jpがもつオークションとは違う客層にリーチできるとおもいます。

サーバーインストールECアプリケーション（オープンソース）

ASP型に比べて初期の導入費用とランニングのコストが比較的安く上げられることができますが、インストールしたりカスタマイズしなければならないのでかなりの手間にはなります。運用後の機能の追加や他のサービスとの連携など自由度が高いので工夫次第では効率よく売上を上げることが可能になるかもです。

zen cart

os commerceから派生しているコーマースアプリケーション(PHP + MySQL)で、誰でも無料でダウンロードして利用でき、プログラムの改変や再配布も自由(ライセンスは GPL)。日本で開発が行われているので、日本国内の決済サービスや配送サービスとの連携はよいとおもいます。

os commerce

amazon.comも元になったとか、なっていないとかという結構以前からあるEコマースアプリケーション。日本語バージョンはすでに英語版との差が生じているため利用は非常に微妙な

EC cube

日本国内で開発されていているオープンソースのアプリケーション、決済サービスや販促モジュールなどが豊富に用意されていて利用できます。

TomatoCart

管理画面が特徴的なアプリケーション。日本語化はされていないようですが、多言語化に対応しているようなので、利用はできそうですが試してません。管理画面はOSそのもののインターフェイスで直感的に利用できそうですが、結構重い感じがしました。

Welcart wordpressのプラグイン

WordPressのプラグインで日本語に対応しています。WordPressですので、自由にカスタマイズできるようですし、そのほかのプラグインも利用できるのでなかなかいいのではないでしょうか？追加のモジュールなどは2000円とかで販売もされているようですよ。

WordPress e-Commerce Plugin

おそらくWordPressのプラグインのなかのコマースプラグインとしては一番メジャーな存在なようです。日本語化はされているようですが、

高機能EC

あんまり調べてないですけど、こんなんあるようです。大規模サイト向けかな？ たぶん、結構いっぱいあるとおもいます。とりあえず。

1. http://www.ecbeing.net/customers/
2. http://ec.emplex.jp/concept/index.html

デザイン作業とか行うときってフォントは非常に大切な要素の一つですが、そのフォントをインストールしすぎるとMacやPCが重くなってしまって、集中力が落ちてしまったり、作業の効率が落ちてしまったりしまったりしますよね。 なので、デザイン以外の作業をするときは、スタンダードなフォントだけをアクティブにして、使い勝手が悪い少し変わったフォントは使わないようにすると、気持ちマシンが軽いような。ということでデザインするときだけ、適切なフォントを読み込んで作業をこなせるフォント管理ツールが便利なのです。

OS9の頃は、ATMというフォント管理ソフトがありましたが、いまだとどういう選択肢があるのかなということで、調べてみました。

FONTCASE

タグ付けできたり、カテゴリーベースで管理できる。サンプルの文字面を一覧で見れたりする機能はかなり便利。そのほかフォント毎に奇麗なレイアウトでプリントアウトできたり、フォントを並べて比較できたりと有料なのでなんともですが使い勝手よいです。 しかし、日本語のフォントもすべてアルファベット表記になるので、ぱっと見てフォントを探しにくいという点はいまいちです。

Linotype Fontexplorer

EUR 79 / 30日間の試用期間あり FONTCASEと同じようにカテゴリー、プロジェクト毎でフォント管理ができる。特徴的なのはLinoStoreというのがあってiTunes Storeのようにフォントを購入することもできる。 FONTCASE、Linotype Fontexplorerともにすでに立ち上げてるアプリケーションでも再起動しないで、フォントをアクティブにすることができます。

おまけ、Windowsにもあるよ。フォント管理ツール

FontExpert

参考

WordPressを使ったサイトを立ち上げると毎回同じ作業や設定をそのサイト毎に行う訳ですが、同じ事も多かったりするのでプラグインの設定などを整理しておきたいとおもいます。サイトの目的にあわせてもちろんこれより他の設定があったり、なかったりする訳なんですけど、基本的なところとしてという感じで。

新規の場合はSEOの効果の浸透時間などを考えるといち早くWPをインストールしてコンテンツをアップしてしまうこともありますが、自分の場合はページのデザイン、HTMLを作成した状態からインストールを行います。

WordPressインストールしたらとりあえずやる事リスト

• WordPressのインストール
• 管理者パスワードの変更
• デザインテンプレートの用意
• 一般設定
• 更新サービスの設定
• パーマリンクの設定
• プラグンのインストール
• カテゴリーの作成
• ダミーファイルの投稿
• デザインの組み込み

デザインテンプレートの用意

基本の設定

更新サービス

パーマリンクの設定

プラグンのインストール

パン屑ナビゲーション

パン屑ナビゲーションもSEOが効くといわれているのですかさずインストール。もちろん人にもやさしいナビゲーションになります。全ページに表示することができるのでサイト構造をツリー型にすることでさらにSEO効果がみこめます。

SEO

各ページ、各記事、各カテゴリーページ、各アーカイブページ、各タグページのタイトル、meta description、meta keyword を設定することができるので、キーワードに対してSEO効果がたかまります。まぁ、これもテーマに記述すればいいのですが、誰でも編集できた方が作業効率がよいのでいれています。

コンタクトフォーム

ほとんどサイトで問合わせ機能は必要としてますので、問合わせの受付にはこのプラグインを利用しています。非常に簡単にサイトに組み込むことができます。動作も軽快です。

サイトマップ

人が見るためのサイトマップを生成してくれるプラグイン。これもSEOやユーザーフレンドリーな感じですね。[wpms-pages]とか[wpms-posts]とかでページ一覧や記事の一覧を表示してくれます。

Google Analytics

サイトのアクセス解析にはGoogle Analyticsを使っているケースが多いので、google analyticsで解析する場合はこれをつかっています。外部サイトへのトラッキングやファイルのダウンロード数なども計測できるので、便利です。

XML サイトマップ

Googleなどの検索エンジンにページのURL一覧を送るXMLを生成するプラグイン。記事やページが生成されるたびに新たにXMLも生成してくれます。生成の設定後google ウェブマスターツールでXMLのURLを登録します。

ケータイ対応

携帯（ガラケー）でサイトを見に来た時に携帯向けに変換してくれるプラグイン。かなり便利ですね。

スマートフォン対応

iPhoneなどのスマートフォンでみるとスマートフォン向けのレイアウトに変換してくれる。

ダミーファイルの投稿

今年もよろしくおねがいします。

ロゴとかエンブレム、紋章とかのデザインを最近させていただいたので、その際の資料ということで、アメリカの大学、イギリスの大学をネットで収集しました。結構大学の場所によってエンブレムの中身のデザインが異なっていて、やはり、イギリス、アメリカ東海岸の歴史ある大学は重厚なデザインのモノが多くて、西海岸やアメリカ大陸の中の比較的新しい大学は紋章の中のモチーフが山と畑だったりとか、もっとモダンなものになっていたりしています。ただ調べたのが大学ということもあって、学問を表現する本、書籍、校舎をモチーフとして採用しているものが多いみたいです。

IVY LEAGUE もの

NCAAフットボールチームの上位の大学

そのほか

リストアップしたメジャーサイト

ここにリストアップしたサイトはalexaとgoogle ad plannerでアクセス数上位のサイトから選んでみてみました。
結論からいうと、950px前後から980PX程度が現在の主流のようではあります。ユーザービリティ的には可変デザインの方が見ているユーザーの閲覧環境にフィットするので良さそうな感じですが、可変するデザインを採用しているサイトは多くはありませんでした。また海外のサイトの方が横幅がやや大きいというサイトが多いという印象も受けました。日本国内で閲覧している環境と海外での閲覧環境が異なることからなのか、それとも言語の表示についての流れなのかは不明ですが、興味深いです。

ポータルサイト（日本）

• Yahoo! Japan 　948PX
• fc2.com　900PX
• Youtube.com 　960PX
• アメブロ　900PX
• 楽天市場　950PX
• livedoor　 950PX
• wikipedia　可変
• mixi　　945PX
• goo　970PX
• Amazon Japan980PX 〜可変
• MSN　974PX
• @nifty　945PX

ポータルサイト（国外/英語圏）

• facebook　980PX ～可変
• Yahoo!　975PX ～可変
• amazon.com　985PX ～可変
• twitter　950PX
• craigslist.org　830PX
• ebay　930PX
windowslive
• MSN.com　968PX
• myspace　960PX
• aol　975PX
• linkedin　980PX
• cnn　980PX

コーポレイトサイト（日本）

• 全日空　951PX
• パナソニック　984PX
• NTT DOCOMO　905PX
• JR東海　790PX
• TOYOTA自動車　980PX
• 本田技研　710PX
• JTB　970PX
• JR東日本　762PX
• JAL　950PX
• ベネッセ　950PX

コーポレイトサイト（国外/英語圏）

• coca cola　970PX
• IBM　930PX
• microsoft　935PX
• GE　820PX
• NOKIA　758PX
• McDonalds　985PX
• intel　995PX
• disney　995PX
• hp　975PX
• Mercedes-Benz　1000PX
• Gillet US　950PX
• apple　980PX

ECサイト（日本）

• zozo
• DINOS　950PX
• ベルメゾンネット　950PX
• イオン　960PX

ECサイト（国外/英語圏）

• TARGET　960PX
• Walmart　980PX

Art Directors Toolkitとは？

横幅を計ったのはcssとかHTMLで確認したんではなくって、art director toolkitという以前にmacbookを買ったときについてきたアプリケーションを使いました。測ったのはコンテンツが入っている幅で左右のマージンとかは基本的には計測の範囲外にしてます。

モニターに映った色、サイズ、なんかを測れたり登録したりできるツール。結構便利。

jQZoom Evolution

詳細画像を別に用意した方が親切なような気がしますが、これはそのままの大きい画像を用意するだけでズームした感じで画像を見せる事ができます、結構簡単に導入できそうです。用途は画像をズームしてディテールが見れる機能。
マウスオーバーすると枠外にズームされた画像が表示されるというプラグインになって、ズームしたい箇所をアクティブにする（？）カーソルは３パターンくらい用意されているので、お好みに合わせてつかえそうです。

使い方は簡単で、JS、CSSを読み込んで、下記のようにHTMLとJavascriptを書くだけ。 DEMOでは、

• SMALLIMAGE.JPG画像（小）335　x　251
• BIGIMAGE.JPG画像（大）1280　x 960

<script type='text/javascript' src='js/jquery-1.2.6.js'>
<script type='text/javascript' src='js/jquery.jqzoom-1.0.1.js'>

$(document).ready(function(){
	$('.MYCLASS).jqzoom();
});

<a href="images/BIGIMAGE.JPG" class="MYCLASS"  title="MYTITLE">
<img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE"  >
</a>

ズームのタイプやカーソルの大きさ、POPUPの場所などのオプションを設定できるみたいです。

Galleriffic

こちらも商品紹介ページとかで多くの画像を見せたいときとかに使えそうなサムネイル付きのギャラリーが実装できるjQueryプラグインです。

フェードが気持ちいいです♪

そのほかいろいろありました

両者の唯一の違いは、計測対象ページへの挿入場所です。従来のga.js トラッキングコードの場合、body セクションの最後に挿入することをご推奨しておりました。一方、新しい非同期トラッキングコードは、他のJavaScript コードの読み込みが完了しなくても正常にロードできるため、HTMLファイル内の head セクション内に記述することが可能です。

  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);
  })();

ページ末尾に入れる ga.js の場合、ページの読み込みに時間がかかると、離脱したセッションを正確に計測できないという不都合がありましたが、新しいトラッキングコードではそのような懸念がなくより正確なデータを計測できる

くわしくはこちらから

アイディアやひらめきが浮かんでくる瞬間って、いつもデスクの前にいるとは限りません。というか、デスクの前にいるときの方が浮かばないかも。なんていう人も多かったりするのでは？ということで、そんな人の為に、こんなトイレットペーパーがあるみたいです。

実はこれ、School of Visual Arts.という学校のSchool of Visual Arts.THINK CAMPAIGNというキャンペーンのようで（既に終了）どこにいるときでも考えてみようとトイレだったり、学食 トイレというあの限られた空間のなかに入ってる時って、結構思い出したり、アイディアが出たりするって人も結構いそうなんですが、思いついたらすぐにノートに書き込めちゃいそう。ちょっとFRISKのCMみたいでもありますけど。

ノートだけに書き込みたくなる?

ひとつ如何でしょうか？

実はノート以外にもあるみたいです。

THINK CAMPAIGN

やれやれ。。

Google Ad Planner：グーグルアドプランナー

googleが提供するWEBメディア調査ツール。出稿するメディアのプランの作成も可能。 元々の目的は、出稿するwebメディアを調査するという使用を想定していますが、どのサイトがどのくらいアクセスがあって、ユニークビジター数、ページビュー、リーチ率などが確認可能で、訪問ユーザーの言語、年齢、性別、収入なども確認することができる。元になっているデータは不明だけど、google tool barからの情報っぽいとのこと。

関連ページ

Google Ad Planner：グーグルアドプランナー

ALEXA

数値自体が結構微妙なんだけど、サイトのアクセス数や他サイトとの比較などには使えます。こんなサービスがなかった当時は 久しぶりに見てみたら、リニューアルしてましたよ。

ALEXA

ネットレイティングス

ネットの視聴率情報を取り扱うサービス。競合サイト利用者の属性比較などの情報を利用する事ができます。 契約すると把握出来る情報

• 利用者属性
• どのウェブサイトから来てどのウェブサイトに出て行ったか
• 特定の層に人気のウェブサイト
• 利用時間、利用回数
• 過去のトレンド
• 利用者全体の利用状況
• 多ウェブサイトとの利用者の違いや重複状況

ネットレイティングス

comscore:コムスコア

アメリカの会社。メディア分析などを行ってくれるサービスを提供しているようだが、日本語サイトがなくなっていた。

そのほかのウェブサイトのランキングなど

• WEBサイト価値ランキング
• 企業サイトランキング 2008---主要500社のWebサイトを評価
• 日本のグローバル・ブランドTOP30

企業サイトランキング２００８　ＣＤ−ＲＯＭ付

日経パソコンが実施した「企業サイトランキング 2008」調査の結果をまとめた報告書です。調査対象は、国内の主要企業500社のWebサイト。「基本情報」「ブランディング・ＩＲ」「リスク管理」「使いやすさ」「アクセシビリティ」の計5分野65項目の取り組みの状況を専門スタッフが検証しました。

というわけで、あるデータをグラフで表示する方法をFLASH、PHP、Javascriptなどで模索していたのですが、Google Chart APIの機能がシンプルだったので、ちょっと使ってみました。Google chart APIというだけあって、毎回フォーマットに従ってGoogleにリクエストを投げる必要があるのですが、キチンと返ってきます。あたりまえですけど。レンダリングによって毎回画像を生成されるフォーマットはPNG。1 日に API を 25 万回以上呼び出すサービスの場合でなければ、自由に利用してもオッケイみたいです。 ちなみにこのAPIって、google analyticsとかでも使われているものと同じっぽいです。

グラフの種類は結構豊富

• 折れ線グラフ
• スパークライン
• 棒グラフ
• 円グラフ
• ベン図
• 散布図
• レーダー チャート
• 地図
• Google-o-meter

グラフといっても表現する方法、目的によって見せ方もいろいろありますが、これだけあれば結構まかなえそう。指定するパラメーターによっては、色、サイズ、凡例、マーカーなども設定することが可能になります。Google-o-meterっていうのは、車のスピードメーターみたいな図の表現。使い道ってあるのかな？

URLの記述フォーマット

フォーマットは、URLで指定する方法でパラメーターを、&で続けて指定していきます。HTML の imgタグの中に記述する際は、アンパサンド (&) の代わりに、文字実体参照 & を使用する必要があります。

Google Chart API URL は、次のフォーマットに従う必要があります。
http://chart.apis.google.com/chart?<parameter 1>&<parameter 2>&<parameter n>

• http://chart.apis.google.com/chart? は Chart API がある場所です。
• & はパラメータの区切り文字です。
• chs=250x100 はチャートのサイズです (ピクセル単位)。
• chd=t:60,40 はチャートのデータです。
• cht=p3 はチャートのタイプです。
• chl=Hello|World はチャートのラベルです。

HTML ドキュメントに Chart API 画像を表示するには、<img> タグに URL を埋め込みます。たとえば次の <img> タグを使用すると、上と同じ画像が生成されます。

<img src="http://chart.apis.google.com/chart?
chs=250x100
&amp;chd=t:60,40
&amp;cht=p3
&amp;chl=Hello|World"
alt="Sample chart" />

棒グラフ

cht=bhsとかcht=bvsとか指定します。水平（bhs）、垂直（bvs）、グループ化などが指定できます。

<img src="http://chart.apis.google.com/chart?chs=320x150&chd=t:10,10,10,20,40|10,20,30,50,90&cht=bvs&chl=Mar|%ef%bc%94%e6%9c%88|May|Jun|Jul&chco=4d89f9,c6d9fd&chbh=20,30">

円グラフ

cht=p3とかcht=pって指定します。

<img src="http://chart.apis.google.com/chart?chs=320x150&chd=t:10,10,10,20,40|10,20,30,50,90&cht=p3&chl=chrome|firefox|IE7|safari|netscape&chco=4d89f9,c6d9fd&chbh=20,30">

折れ線グラフ

cht=lcとかcht=lxyって指定します。

<img src="http://chart.apis.google.com/chart?chs=320x150&chd=t:10,10,10,20,40|10,20,30,50,90&cht=lc&chl=Mar|Apr|May|Jun|Jul&chco=4d89f9,c6d9fd&chbh=20,30">

そのほか、グリッド線を入れたり、線を種類を設定だったり、背景のグラデーションだったりを指定することも可能みたいなので、表現したいグラフをイメージしてから作成したほうが良さそうですね。ちなみに凡例に日本語を入れてみたりしましたが、日本語は表示できないようです。日本語を表示させるためには、utf-8に変換してから指定するれば、表示されるようです。

そのほか、jquery、FLASHなどのプラグンを探してみる

このgoogle chart API以外にもグラフを生成することができるjQueryやFLASH、PHPのライブラリやYUIなんかもありましたので、追加。時間があるときにでも特徴を押さえておこう。

• Yahoo! UI Library: Charts
  基本的に、FLASHが表示を担当するYUIの方がデザインの表現の幅がいろいろとあるみたいです。たとえば棒グラフを3Dにしたりとか、棒グラフが表示されるときにアニメーションしたりとか

• Flot
  jQueryのライブラリ。オプションなどの設定でインタラクティブにグラフ表示に変化させられる。サンプル

• AmCharts
  株価のチャートのようなものも作成することができる。FLASHで描画しているので、インタラクティブにアニメーションするようなグラフが表示が可能。有料です。85 euroから

• PHP/SWF Charts 5.0
  無料で提供されているのは、インタラクティブ性が低い製品のよう。クリックして値がでるようなものは有料。49ドルから。

• Open Flash Chart 2

• jQchart

• TufteGraph

  Introduction to TufteGraph from Xavier Shay on Vimeo.

そのほかもいろいろあります。
10 Free Chart Scripts
データが分かりやすい、グラフやチャートにする10のスクリプト

"Web API実践リファレンスブック" (加藤 貴之, 佐久間 勇樹, 関戸 亮介, いわさき ゆうだい)

"プレゼン・企画書の説得力がアップする チャート・図解のすごい技" (ジェラルド・E・ジョーンズ)

3G端末の契約割合について

• ドコモ：89.81%　（契約数：54,600,700 / FOMA 49,040.300）
• au：98.97%　（契約数：30,842,800/ CDMA 1X： 30,527,200）
• ソフトバンク：90.4%（契約数：20,632,900/ 3G：18,653,600）

• Docomoの契約数
• KDDIサービス契約数
• softbank 月次契約数データ

使い勝手の観点からも携帯端末向けのページの容量は軽ければ、軽い方がいいという認識もありますが、魅せ方の一つとして多少は気をつかっておきたいとことです。見た目を少し凝るコトで伝えられる事も増えたりすることもあるので、シンプルなCHTMLなどの表現では物足りことも多々ありますよね。デザイン上の装飾などによってイメージをより判りやすく伝えることができるので、画像を適度に使ったページデザインにしたいところですので、その実現性がどれくらいなのかというところで、3G端末の性能をチェックしたところ以外に契約者の割合が多い事が判りました。

一般的に３G端末で表示可能なページのキャッシュは各キャリアより公表されています。（mova端末は5Kというページ容量が公表されております）契約数の多い３G端末のみにしぼってみます。各キャリアの表示可能なページサイズ（画角じゃないよ）について

各キャリアから公表されている端末での表示可能サイズ

パケット定額制の契約割合

パケット定額制契約をしているか、いていないかによって、 携帯でのインターネット利用状況は大きくことなると容易に考えられる事から パケット定額制の契約状況について確認してみました。
docomoのFOMAのパケット定額制の契約が結構低い。個人的な感覚でいうと地方在住の比較的高齢の方のユーザーが多いからなのかともとれましたが、予想外に低い数字でちょっと驚きました。

• FOMA：29パーセント
• au：75パーセント
• SOFTBANK：56パーセント

パケット定額制は、特に若年層にフォーカスすると、その加入率が著しく高い。らしい

"改訂第2版 ケータイサイト構築ガイドブック" (エムビーフォーラム)

google mapで旅行行く前にチェック

これが非常に便利。いままで使わなかったのが悔やまれるくらい。。滞在先のホテルや行きたいお店やレストランなどを事前に毎マップに登録しておくことで、旅行マップが出来上がります。ただ、地図自体が印刷ができないので（すると大変なので）、売っている地図に予めポイントを打っておく必要がある。今回これをしていなくて、マックが使えない状態でアタフタしてしまったことも

• google map

ホテルのインターネット接続

無料のところもありましたが、有料も含めてすべて今回滞在したホテルはすべて有料でのインターネット接続が用意されていました。まぁネットが繋がる部屋は今回マストダッたわけなんで当たり前といえば当たり前。

価格は、24時間で20ドルくらい

１週間程度同じホテルに滞在するなら、一日あたりの接続料金はもっと安くなるような料金体系でした。
サービス自体はWi-Fiで提供されているホテルが多かったのですが、部屋の場所によっ電波が入りずらかったり、途中で接続が切れてしまう事もしばしば。有線のインターネット接続サービスを利用したほうが快適なインターネット接続環境には間違いないという印象。無線の方が部屋のどこでもネットが使えた方がよかったりする事もあるんだけど、やっぱり切れてしまったり、つながり難いとストレスになるし、CMSやWEBアプリケーションでの作業はこうした事からも、ちょっと厳しい感じでした。

パブリックWi-Fi

スターバックスやマクドナルド、カフェなどでは有料での接続サービスが入っていることが多かったです。とはいえ無料でも接続できる居心地のよいカフェなどもあり、そこでノートパソコンを広げている人達も多かった。マックの使用率の高さはちょっと驚き。とあるカフェなんかではノートパソコンを広げている人達がすべてマックユーザなんてことも。
また、カフェによっては接続パスワードをディスプレイに表示してお知らせしているとお店にいる人だけが使えるような工夫とかも面白かったです。

• スターバックス
• at&tの公衆WIFIサービス
• T-mobile
• HOTSPOT検索サイト
• Wi-Fi-FreeSpot Directory

iPhoneの利用

いままでいわゆる海外携帯を使った事がなかったので、一緒に行く人がいれば、旅先で携帯電話を借りるという事をしていたんだけど、今回始めて海外で使える日本の携帯を持って行きました。海外携帯すごい便利。今回は事前の下調べでデータローミングを使うと料金がヤバいということを知っていたので、データローミングなしで利用。at&tとか展開している公衆無線LANサービスを事前に契約してもよかったかなと終了日間際で感じてました。のでiPhoneだったら、有料のWi-Fiサービスに滞在期間契約してもいいかな。

• ソフトバンクモバイルのローミングサービス

若者達のスマートフォン

ロス、サンフランシスコに関してだけですが、日本で言うところのギャルみたいな若い女の子や若い男の子の多くがブラックベリーやiPhoneを使っている光景が多く見られたのが非常に驚き。MTVなどでみる、リアリティー番組のなかでも、若いヒップな感じの人達も使っているところからも多少は想像していたけど、使っている人がすごい多い。日本の感覚だと若い人達（10代後半から20代前半）がスマートフォンを利用しているのはいまのところかなりのレアケースな感じなので、今後この価値観のギャップがどうなって行くかをちょっと見て行きたいな。どうでもいいけどブラックベリーって名前がカッコいい。

• BlackBerry
• iPhone