life x web Technology Design

2010/02/09 段組をキレイにしました！詰まった状態で読んでいただいた方、本当にすみませんでした、、、。 smashmediaの河野さんが自身とブックオフオンラインのアカウントでtwitterにおけるフォロワーのデータをまとめられてたので、それならプログラムを書けば僕も一覧でもっと取得できたり、それをデータベースにためてみて統計を出したり、そのデータで色々議論が生まれればいいなぁなんて思ったりしてプログラムを書き始めてみました。（ちょうどTwitterAPIの勉強もしようかなと思っていたところでしたし。） Twitterフォロアー実態調査/smashmedia 結論から言うとまだうまく取得できてません。正確にいうと取得できてるんですけどTwitterのAPI制限にひっかかって150件/1hしかとれないのでちょっと工夫が必要な感じ。 とりあえず生のJavaをちろっと書いただけなのでどこまで結局できるか（やるか）わからないんですがここまでの分をとりあえず整理します。 1.アカウントを指定するとフォロワーの統計情報を取得 今回取得してみようとしたデータは以下の項目 ・ID ・スクリーンネーム ・名前 ・twitterを始めた日付 ・最後につぶやいた日付 ・つぶやきの数 ・フォローしてる数 ・フォローされてる数 ・URL 上記はアカウントごとにすぐに取得できるので、調べたいアカウントを指定するとまずはフォロワーのID一覧を取得し、そのひとつひとつに対して上記の情報を持ってこれれば一覧で生データリストが作成できます。 つぶやきの一日平均や最後につぶやいてからの時間、フォロー／フォロワーの差などなど色々な切り口であとは見てみるだけですね。 あとは投稿をすべてもってきたりしたら出せるもの ・URLがついているかどうか ・RTかどうか ・＠返信かどうか ・特定のワードが入っているかどうか 2.企業アカウントの定点調査 実はコチラのほうが数が少ない分現実的に簡単にできる気がします。 基本的には1番のアプリとデータ内容は変わらないんですが、cronで1日一回定点的にデータを取得して、データベースに保存。 あとから推移を表示したり企業ごとに比較してみたりできれば面白いかと。 日本の企業アカウントに関しては http://twitter.com/jp_company で結構まとまっていたりするのでそこを起点にすれば新しいアカウントなども取得していけますね。 個人的には海外のアカウントの情報とも比較してみたいです。絶対数が増えると何が違うのかとか、気になります。 — 技術面でいうと僕の個人的な勉強だったりするのでいろいろと組み合わせて試してみてます。 ・開発言語：Java ・開発環境：Eclipse + Google SDK ・実行環境：GoogleAppEngine（クラウド！） ・APIラッパークラス：twitter4J ・DB：BigTable ・フレームワーク：Slim3 ・グラフモジュール：amCharts ・proxy：birdnest [追記] こういったもので出したデータってもっと公開されてみんなが各々の見解を出せるようにするべきですよね。 [追記2] まだ全然データ取得とかできてないので「いつか何かで」の話になりますが、twitterに限らず日本市場でのレポートが作れたらぜひ英訳して海外の人にも意見がききたい。日本のデータは結構ニーズありますよ。日本のモバイルのデータとか英訳したら海外で欲しい人たくさんいるとおもうんだけどな。

Googleが提供するWEB解析ツール「Google Analytics」にいろいろな新機能が搭載されました！ 参考：Google Analytics Now More Powerful, Flexible And Intelligent (Google Analytics Blog) 今回は ・コンバージョン指標の拡充 ・モバイルのスクリプト計測 ・スマートフォン(iPhoneなど)のアプリ計測 ・テーブルフィルタ機能の拡充 ・ユニークユーザーの追加 ・APIの拡充 ・独自アルゴリズムによる自動アラート ・カスタムアラート機能 が追加されるようです。 ■コンバージョン指標の拡充 新たに「滞在時間」と「訪問あたりのページ数」をコンバージョン指標にすることが可能に。 また、これまで4つまでだったコンバージョンの指標を20個まで登録できるようになります。 ■モバイル対応 モバイル対応これまでJavaScriptにしか対応していなかったため、完全なモバイル対応は難しい状況でしたが、今回ついにサーバーサイド言語（PHP、Perl、JSP、ASPX）でのトラッキングに対応し、モバイルサイトのトラッキングも正式に可能になりました。 また、同時にiPhoneやAndroidのアプリでの計測も可能になりました。 ＊今回のこの対応は非常に大きいんじゃないでしょうか？ ■テーブルフィルタの拡充 すでに取得済みのデータに関するフィルタと掛け合わせ機能がさらに充実しました。多次元での掛け合わせや、「ピボット」の機能、詳細でのフィルタリングなどが搭載されています。 ■ユニークユーザーの追加 ユニーククッキーベースでユニークユーザーを特定します。 ■APIの拡充 ・カスタム変数の定義 これによりサイトにひもづいている特殊な値（メンバーかどうか、ログインしてるかどうか、など）を定義し、データを取得することが可能になります。 ・セグメントの共有とカスタムレポートテンプレート ■インテリジェンス ・自動アラート機能（ベータ） 独自のアルゴリズムによりデータのパターンから特異値を判断し、自動でアラートを表示、送信します。 ＊使ってみないとわからないですけど、この機能、すごいですね。 ・カスタムレポート機能任意の指標をトリガーにしてアラートを発生させることが可能になります。 これらの機能は今後数日で反映されていくようです。

「インターフェイス」といえばアプリケーションなどで実際にユーザーの目に触れる、サービスの重要な要素のひとつです。 僕も少しの間画面設計やユーザビリティのコンサルタントのお仕事をさせていただいていた期間があるのでちょっと使いづらかったりすると解決法を考えちゃったりします。 （実際には裏側の概念まで指しますが）インターフェイスというと目に見える部分が多く、サービスの質を左右するので設計者はプロとして腕の見せ所なんですが、意外にも「手品」の概念が似ている、とのことです。 勘違いをしやすいという点は、逆に考えるとイリュージョンを見る能力があるという長所だと考えることもできます。計算機システムの入出力が多少いい加減だとしても、人間のこの「長所」のおかげでそれなりに使えているものは多いでしょう。例えばマウスでカーソルを動かすとき、カーソルの位置は離散的にしか動きませんが、人間の目にはなめらかに動くように見えます。（中略） GUI をはじめとする計算機のインタフェースは完全に手品的なものであり、ユーザが積極的に騙されることによって、わかったような気になって計算機を利用することができるようになっているというわけです。表示されているアイコンとハードディスク内のデータはどういう関係なのだろう？などといちいち悩んでいたらパソコンで仕事など不可能でしょう。（第36回 手品とインタフェース／増井俊之の「界面潮流」） 現在僕自身もプログラミングをメモリの０と１から勉強しなおしていますが、実際に利用するユーザーはそんなことを意識することは無くて、長い年月をかけて高度に構築されたイリュージョンの上で利用しています。 もちろんそのイリュージョンが最終的にユーザーの感覚に依存しすぎてしまったり、中身が出すぎてしまったりしていれば予期しない動きや使いづらさにつながってしまうのでイリュージョンの設計から学ぶことは多そうです。

最近更新できていないので軽めのエントリー。 勉強のつもりでプログラムの本を開いてウェブサービスなんかをポチポチつくっていると、完成するんだけどなんだか味気ないのっぺりとした画面になりがち。 せめてロゴだけでもテンションあげよう、という事で最近ハマっているのがtwitter風のロゴがつくれる「twitlogo」。 twitterと同じフォントでロゴをつくってくれます。かわいいので一気に雰囲気が変わります。 大きさや色をオプションで指定する事もでき、最後はpngでダウンロード。 いまいちシンプルな画面でしっくり来ない方は是非。 twitlogo http://www.twitlogo.com/

IE6でYouTubeを開くと「お使いのブラウザのサポートは間もなく段階的に終了します。最新のブラウザにアップグレードをお願いします。」 と表示されるようになりました。 参考：YouTube Will Be Next To Kiss IE6 Support Goodbye (TechCrunch) IE6の為にCSSやJavaScriptで日々格闘している自分としては大歓迎ですが、 いったいどのくらいインパクトがあるのでしょうか？ ちまたでは「これでIE6がなくなる!」なんて感じで盛り上がってたりしますが、 肌感覚としては自動的にアップグレードされない限り、IE6を使っている人は パソコン変える以外の他の最新ブラウザに乗り換える方法を知らない気がします。 じゃあYouTubeが完全に観れなくなったらどうなるか？ たぶん、みんなYouTube観なくなるんだと思います。

かねてから考えていた 一日ブックマークしたものを一覧でブログに自動投稿 ということができないか模索しながら、何かサービスが ほしいときにどうするかおってみようと思います。 とりあえずほしい条件はこんな感じ ・Googleリーダーの共有機能でクリップ ・一日分が一覧で次の日反映 ・使用ブログはMovable Type まあ、これぐらいさくっとプログラム書けよ、、、 って話ですが、PC壊れていて開発環境なかったりで いろいろと面倒なので他力本願で何とかならないか 考えます。 1．何かサービスがないか探してみる とりあえずスピード優先のご時世なのですでにサービスが ないか探してみます。 さっくり探したところBuzzurlの機能を使えば きれいに一覧になりますし、コメントも入って理想ですね。 でも新しいSBMを使いはじめるのはハードル高いのと、 そもそもMTへの投稿に対応してないみたいです。 2．サービスの組み合わせでなんとかならないか考える とりあえずドンズバなサービスが見つけられなかったので 今度はいろいろなサービスの組み合わせで何とかならないか 考えてみます。 とりあえず、要素分解 一日ブックマークしたものを一覧でブログに自動投稿 ＝ブックマーク／日ごと＋自動投稿 となります。 Googleリーダーの共有機能はまとめサイト的なものも 自動的に出来上がって、そのRSSも取得できます。 こんなの なのでそれをDailyFeedというRSSを一日単位でまとめてくれる サービスでまとめます。 これで、日ごとのブックマーク一覧RSSが完成。 あとはこれをMTのプラグイン「rssEntry」で自動投稿 すればOK! （あと、参考まで） 使っているレンタルサーバーによってはプログラムを定期的に 実行するために使うcronが使えない場合があるので今回、 MTのプラグインでRunPeriodicTasksというのを使っています。 また、RSSの中身を一部変更するためYahoo!Pipesも使っています。 こんな感じです。 3．自分でつくる 今回は組み合わせでできたんですが、やっぱり自分で作れる 人は作ったほうがいいでしょう。サービスがどれか停止したとき すべてが崩壊します（苦笑）。 ただ、前述のとおりスピードが重要なので、組み合わせで作って 後からそれぞれの要素を作りこんでいく、というやり方も ありなんじゃないかなと感じました。 まとめ とりあえず組み合わせて動かす。そしてそこから作る。 参考： Hideya’s shared items in Google Reader Buzzurl DailyFeed rssEntry RunPeriodicTasks Yahoo!Pipes

オンラインでPHPファイルを編集できるオンラインエディタ Online PHP Editor – PHPanywhere.net 外出先とかで開発環境や接続情報が手元になくても 手軽にリモートのPHPファイルを調整できるので いいかもしれません。 参考：オンラインのPHPエディタ『PHPanywhere』(CREAMU)

ブックマークレットからTinyURL!すると自動的にtwitterからの流入ををGoogle Analyticsで計測されるようにしたいっていう話です。 Twitterに新着記事のお知らせから流入しているのかみてみたいところなんですが、現在使っているGoogle Analyticsで何も設定していないとリファラでしか特定できなくて、Firefoxのプラグインからとかいろいろ測定できないんですよね。 ちなみにGoogle Analyticsでするためには ?utm_source=twitter&utm_medium=twitter をURLの後につけて流せばきちんと測定できます。 （こちらで作れます。） ただ、毎回それをつけるのも面倒なので、毎回使うTinyURL!のブックマークレットを押したときに自動的にそのパラメータをつけてくれないか、ということでブックマークレットをいじってみます。 javascript:void( location.href='http://tinyurl.com/create.php?url='+encodeURIComponent(location.href) ) とりあえずTinyURL!ブックマークレットの中身。 javascript:void( location.href='http://tinyurl.com/create.php?url='+encodeURIComponent(location.href+'?utm_source=twitter&utm_medium=twitter') ) 単純にパラメータを追加 押してみる おお！動きますね。 でもこれだとどんなURLにでもつけてしまうのでめんどくさい。 ということで、 javascript:( function(){ lo=location.href; if(lo.indexOf('lifexweb.com')>-1){ para='?utm_source=twitter&utm_medium=twitter'; }else{ para=''; } void(location.href='http://tinyurl.com/create.php?url='+encodeURIComponent(location.href+para)); } )(); 「lifexweb.com」というドメインの場合のみパラメータをつけるように改良。 これでほかのページではパラメータをつけずに変換可能。 あとは既にほかのパラメータがついているといけないので、 javascript:( function(){ lo=location.href; if(lo.indexOf('lifexweb.com')>-1){ if(lo.indexOf('?')>-1){ para='&utm_source=twitter&utm_medium=twitter'; }else{ para='?utm_source=twitter&utm_medium=twitter'; } }else{ para=''; } void(location.href='http://tinyurl.com/create.php?url='+encodeURIComponent(location.href+para)); } )(); とすると 既にパラメータがついていても大丈夫。 利用されたい方がいらっしゃればバグだらけかもしれないですがおいておきます。ドメインのところはそれぞれ修正をお願いします。 TinyURL!+GA

先日からサービスの実装テストや動作確認で 苦しんでいる加藤です。 本当は全OS、全ブラウザでテストするのが一番なんですが、 なかなか個人ですべての環境を構築するのは大変ですし (もちろんIE Testerとかで確認しますが)、個人でそこまで 時間使えないよーなんてこともあります。 そんな中何かいい仕組みがないか探していたら、 最近JavaScriptに関してはスクリプトを入れておくだけで メールを飛ばしてくれたり、エラーを集計しておいてくれたり するサービスがあるんですね。 とりあえずアカウント作ってセットアップ。 タグを入れるだけでセットアップできる。 メールで飛んでくる内容はこんな感じ ブラウザごとの回数などもまとめてくれます。 (Firefoxが多いですね、、、涙) DamnIT (beta) A JavaScript error reporting service とりあえずリリースしてしまってエラーが出たら出た分だけ対応、 というちょっと効率主義的ですが、アジャイル開発にはもってこいの サービスです。 使ってもらえないプログラムはテクノロジー、ではなく、 ただのシステムでしかないので、使うユーザーのことを考えて、 細かくメンテナンスしていきたいですね。

大きなこと言っておきながらいきなりですが、一応技術系のブログという事でプログラムのコードを載せる際にきれいに表示できるよう、SyntaxHighterを導入してみます。 以下、実際に導入するスクリプト。いかがでしょう？ <script type="text/javascript" src="http://www.lifexweb.com/tech/wp-content/themes/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="http://www.lifexweb.com/tech/wp-content/themes/syntaxhighlighter/scripts/shBrushCss.js"></script> <script type="text/javascript" src="http://www.lifexweb.com/tech/wp-content/themes/syntaxhighlighter/scripts/shBrushJScript.js"></script> <script type="text/javascript" src="http://www.lifexweb.com/tech/wp-content/themes/syntaxhighlighter/scripts/shBrushPerl.js"></script> <script type="text/javascript" src="http://www.lifexweb.com/tech/wp-content/themes/syntaxhighlighter/scripts/shBrushPhp.js"></script> <script type="text/javascript" src="http://www.lifexweb.com/tech/wp-content/themes/syntaxhighlighter/scripts/shBrushPlain.js"></script> <script type="text/javascript" src="http://www.lifexweb.com/tech/wp-content/themes/syntaxhighlighter/scripts/shBrushRuby.js"></script> <script type="text/javascript" src="http://www.lifexweb.com/tech/wp-content/themes/syntaxhighlighter/scripts/shBrushSql.js"></script> <script type="text/javascript" src="http://www.lifexweb.com/tech/wp-content/themes/syntaxhighlighter/scripts/shBrushXml.js"></script> <link type="text/css" rel="stylesheet" href="http://www.lifexweb.com/tech/wp-content/themes/syntaxhighlighter/styles/shCore.css"/> <link type="text/css" rel="stylesheet" href="http://www.lifexweb.com/tech/wp-content/themes/syntaxhighlighter/styles/shThemeDefault.css"/> <script type="text/javascript"> SyntaxHighlighter.config.clipboardSwf = 'http://www.lifexweb.com/tech/wp-content/themes/syntaxhighlighter/scripts/clipboard.swf'; SyntaxHighlighter.all(); </script> 横に長いコードだと見づらいですね。改善の余地ありです、、。 *追記(2009/03/23 11:00)：WordPressのテーマ変えたら表示されなくなっちゃいました。現在確認中。 *追記2（2009/03/23 13:30）：ただ単にスクリプトのパスがなかっただけの模様。いちいち入れるのは面倒なのでプラグイン版導入。