life x web Technology Design

ブックマークレットから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

これらの例はすべて一長一短でどれが正解というものではありません。ユーザーにとっての正解は「動くこと」ただ一点です。 （JavaScript の不思議な面白さ – 第二回/Yahoo! JAPAN Tech Blog） 自戒の念も含めて。 テクノロジーに関わる方々の多くはその仕組みやどう実現するかに集中しがちですが、ユーザーからするとどう実現されているかは関係なく 「動くこと」 が重要だということです。 何をどう使ってもらい、それが動くか。 きちんと意識しながら物作りをしていきたいと思います。

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

ITmediaにチームでの開発についてかかれていました。 ネットサービスに限らず、複数人でものを作ったことがある人なら分かると思いますが、人がいればいるほどコミュニケーションコストがかかります。人が多ければ作業をできる人が増えるため、早く作れるということは決してなく、むしろ非効率の場合も多いのです。最近、1人でネットサービスを作る人が増えてきましたが、これはそういったコミュニケーションのムダを省けるため、むしろ作りやすいということなのでしょう。 しかし1人で作っていては、自分の実力以上のものは作れません。自分の力以上のものを作り上げていくには、コミュニケーションコストがかからない人たちと組むしかないのです。 こえ部のメンバーはそれぞれの実力を認め合い、お互いの反対意見にも耳を傾けながら、サービスを作ってきたのです。「僕の言う通りにやられたらここまで成功していなかったと思います。お互いに意見を言い合えたのがよかったですね」 「それはできない」とは言わない　急成長する音声コミュニティー「こえ部」 （「1を10にする」ネットサービスの育て方 / ITmedia News） 確かに一人での開発はスケジュールがゆるかったり、 コーディングの他のひとの連携(具体的にはSubversionや Gitなどのバージョン管理)とかのコストがあまりかからないので 楽なんですが、どうしても一人でできることには限界があって、 最初のコンセプト自体に客観性がたりない 一人しかコーディングしてないからコードがわかりづらい ↓ 最初の人との差があるからプロジェクトに他のひとが参加しづらい プロジェクトの更新が一人に依存する ↓ サービスのクオリティアップにブレーキがかかり、伸びていかない ↓ 最初にもどる、もしくはフェードアウト、、、。 ということになりがちなので、サービスはコンセプトを 作る最初と、サービスを提供し続けることが重要 (そして一番難しい)だという認識をおいて、 はじめから妥協しないメンバーをそろえてスタートする方が はじめは時間がかかっても、長期的には伸びるサービスを 展開していけるかもしれないですね。 もっと多くのプロジェクトやアイデアが コンセプト段階でオープンになって、チーム開発が活発に なればいいなと思います。 開発者向けのアイデア投げ合いサービスみたいなのほしいですね。 ごりごりの開発者向けじゃなくってもっと「興味がある」という 人たちも参加できるような敷居の低いやつがあれば、、、。

そのうちアップしようと思いますが、この間ゲットしたPoken（電子名刺サービス）にシールを作って貼ってカスタマイズするのを社内でたのまれていくつかやってみてます。 もちろんもろもろコストは発生していますが、できれば「ビール1杯おごりで！」ということでゆるーく受けてます。 ビール1杯で、というのは海外にもあるみたいで、Wikipediaにも登録されています。 Beerware (Wikipedia) 僕が個人的に好きなのはビールが直接会わないと払えないこと（缶ビールとかは反則w）。 「ビール1杯払います。是非、今度一緒に呑みに行きませんか？」 という直接のコミュニケーションがとれるのはすごくうれしいこと。 ビールウェアライセンス。うまく使って心から満たされる開発をしていきたいですね、、、。

とあるWebサービスのモバイル版がリリースされていました。 PC版が出てから結構なスピードリリースです。 Webの開発に関してはとにかくスピードが大事なので、その辺自分も考えるだけではなく、手を動かせるようにしていきたいですね。 本題。 実はそのサービス僕の携帯だと動かないみたいです。 そもそもPCのブラウザテストに比べて格段に種類が多いモバイルのテストですが、Softbankの携帯はシェアが少ないため、個人での開発だとなかなか最初の実装テストがうまくできていないことが多いんですよね。 携帯電話は種類が多いので日本中にテスターみたいな人がいて、その人たちにテストしてもらう、みたいなクラウドソーシングがあればいいのにと思って調べたところ、海外にはあるみたいです。 携帯アプリのテストに、クラウドソーシング利用のプラットフォームが登場（901am） 全ての機種をテストするのはどのみちかなり難しいですが、使える機種をどんどん制限していくよりもいい気がしますね。

大きなこと言っておきながらいきなりですが、一応技術系のブログという事でプログラムのコードを載せる際にきれいに表示できるよう、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）：ただ単にスクリプトのパスがなかっただけの模様。いちいち入れるのは面倒なのでプラグイン版導入。

これまでSEM-Analyticsというブログで広告系のブログを書いてきましたが、テクノロジー関連の仕事をするようになったのでテクノロジーブログを別に分けて作ることにしました。 これまで広告業界でいろいろな事業戦略に関わってきましたが、やはり大事にしたいと思っているのは コミュニケーションでつながっていきたいとユーザーが思うもの、をつくりだしたい ということ。 海外でマーケティングを勉強したときに「コミュニケーション」の重要性を痛感して、ビジネスとコミュニケーションの領域=広告ということに興味を持ってこの業界に入ったのですが、個人的なコミュニケーションに想うことはもっとシンプルで、自分が考えたものでもっとみんながコミュニケーションをとりたくなるようなものを創っていきたいなと思っています。 例えば、誰かに送りたいと思ってもらえるようなかわいいポストカードをデザインする。 そんな気持ちを忘れずに、テクノロジーをデザインしていけたらと思っています。 若干プログラムのコードなども含まれますが、ディテールだけにとらわれずマイペースに頑張っていきます。