life x web Technology Design » JavaScript http://www.lifexweb.com/tech コミュニケーションとテクノロジーを考えるブログ Sat, 24 Jul 2010 17:35:28 +0000 ja hourly 1 http://wordpress.org/?v=3.0 恐るべしコナミコマンド http://www.lifexweb.com/tech/2009/05/%e6%81%90%e3%82%8b%e3%81%b9%e3%81%97%e3%82%b3%e3%83%8a%e3%83%9f%e3%82%b3%e3%83%9e%e3%83%b3%e3%83%89/ http://www.lifexweb.com/tech/2009/05/%e6%81%90%e3%82%8b%e3%81%b9%e3%81%97%e3%82%b3%e3%83%8a%e3%83%9f%e3%82%b3%e3%83%9e%e3%83%b3%e3%83%89/#comments Mon, 11 May 2009 03:46:48 +0000 Hideya Kato http://www.lifexweb.com/tech/?p=250 konamicodesites
昔一度は押したことのあるあのコマンド。
そう、コナミコマンド（wiki）です。

「↑↑↓↓←→←→BA」

というシンプルなコードに昔はときめいた（？！）
もんです。

ウェブサイト上でもそのコマンドで遊んでしまおうという
ことで、コナミコマンドで裏技が出てくるサービスを
まとめたサイトが登場しました。

Konami Code Sites
http://konamicodesites.com/

ちなみに、このサイト自体もコナミコマンドじゃないと
入れません、、、笑。

少年の頃の遊びの思いでは、絶対今旬だと思うんですが、
どうなんでしょう？

]]> http://www.lifexweb.com/tech/2009/05/%e6%81%90%e3%82%8b%e3%81%b9%e3%81%97%e3%82%b3%e3%83%8a%e3%83%9f%e3%82%b3%e3%83%9e%e3%83%b3%e3%83%89/feed/ 0 地味なデータをキレイに表現する – Google Visualization API http://www.lifexweb.com/tech/2009/04/google-visualization-api/ http://www.lifexweb.com/tech/2009/04/google-visualization-api/#comments Mon, 13 Apr 2009 05:13:38 +0000 Hideya Kato http://www.lifexweb.com/tech/?p=196 googlevisual
Google Visualization API　- Google Code

いろいろなデータをビジュアルで表現するときのライブラリとして
使える様々なパターン集。

トップページの説明書は難しいですがギャラリーのサンプルは
すごくわかりやすいです。

Google Visualization API　ギャラリー

個人的にはmotion chart（バブルチャート＋時間みたいなチャート）
がお気に入りです。Webならではの表現ですしね。

motionchart
僕みたいな「えせテクニカルスタッフ」にはものづくりのスピードを
あげていけるのですごくうれしいですね。

これらを最適に組み合わせる力が必要だけど。

]]> http://www.lifexweb.com/tech/2009/04/google-visualization-api/feed/ 0 Twitter+GoogleAnalyticsブックマークレットをつくってみた http://www.lifexweb.com/tech/2009/03/twittergoogleanalytics%e3%83%96%e3%83%83%e3%82%af%e3%83%9e%e3%83%bc%e3%82%af%e3%83%ac%e3%83%83%e3%83%88%e3%82%92%e3%81%a4%e3%81%8f%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f/ http://www.lifexweb.com/tech/2009/03/twittergoogleanalytics%e3%83%96%e3%83%83%e3%82%af%e3%83%9e%e3%83%bc%e3%82%af%e3%83%ac%e3%83%83%e3%83%88%e3%82%92%e3%81%a4%e3%81%8f%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f/#comments Fri, 27 Mar 2009 09:48:10 +0000 Hideya Kato http://www.lifexweb.com/tech/?p=176 ブックマークレットから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')
)
単純にパラメータを追加

押してみる
tinyurl おお！動きますね。
でもこれだとどんな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));
}
)();

とすると

url2既にパラメータがついていても大丈夫。

利用されたい方がいらっしゃればバグだらけかもしれないですがおいておきます。ドメインのところはそれぞれ修正をお願いします。

TinyURL!+GA

]]> http://www.lifexweb.com/tech/2009/03/twittergoogleanalytics%e3%83%96%e3%83%83%e3%82%af%e3%83%9e%e3%83%bc%e3%82%af%e3%83%ac%e3%83%83%e3%83%88%e3%82%92%e3%81%a4%e3%81%8f%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f/feed/ 0 ユーザーにとっての正解は「動くこと」ただ一点です。 http://www.lifexweb.com/tech/2009/03/%e3%83%a6%e3%83%bc%e3%82%b6%e3%83%bc%e3%81%ab%e3%81%a8%e3%81%a3%e3%81%a6%e3%81%ae%e6%ad%a3%e8%a7%a3%e3%81%af%e3%80%8c%e5%8b%95%e3%81%8f%e3%81%93%e3%81%a8%e3%80%8d%e3%81%9f%e3%81%a0%e4%b8%80%e7%82%b9/ http://www.lifexweb.com/tech/2009/03/%e3%83%a6%e3%83%bc%e3%82%b6%e3%83%bc%e3%81%ab%e3%81%a8%e3%81%a3%e3%81%a6%e3%81%ae%e6%ad%a3%e8%a7%a3%e3%81%af%e3%80%8c%e5%8b%95%e3%81%8f%e3%81%93%e3%81%a8%e3%80%8d%e3%81%9f%e3%81%a0%e4%b8%80%e7%82%b9/#comments Thu, 26 Mar 2009 09:13:23 +0000 Hideya Kato http://www.lifexweb.com/tech/?p=162 y-techblog1

これらの例はすべて一長一短でどれが正解というものではありません。ユーザーにとっての正解は「動くこと」ただ一点です。
（JavaScript の不思議な面白さ – 第二回/Yahoo! JAPAN Tech Blog）

自戒の念も含めて。

テクノロジーに関わる方々の多くはその仕組みやどう実現するかに集中しがちですが、ユーザーからするとどう実現されているかは関係なく

「動くこと」

が重要だということです。

何をどう使ってもらい、それが動くか。
きちんと意識しながら物作りをしていきたいと思います。

]]> http://www.lifexweb.com/tech/2009/03/%e3%83%a6%e3%83%bc%e3%82%b6%e3%83%bc%e3%81%ab%e3%81%a8%e3%81%a3%e3%81%a6%e3%81%ae%e6%ad%a3%e8%a7%a3%e3%81%af%e3%80%8c%e5%8b%95%e3%81%8f%e3%81%93%e3%81%a8%e3%80%8d%e3%81%9f%e3%81%a0%e4%b8%80%e7%82%b9/feed/ 0 動作テストをユーザーにお任せ？！ http://www.lifexweb.com/tech/2009/03/%e5%8b%95%e4%bd%9c%e3%83%86%e3%82%b9%e3%83%88%e3%82%92%e3%83%a6%e3%83%bc%e3%82%b6%e3%83%bc%e3%81%ab%e3%81%8a%e4%bb%bb%e3%81%9b%ef%bc%9f%ef%bc%81/ http://www.lifexweb.com/tech/2009/03/%e5%8b%95%e4%bd%9c%e3%83%86%e3%82%b9%e3%83%88%e3%82%92%e3%83%a6%e3%83%bc%e3%82%b6%e3%83%bc%e3%81%ab%e3%81%8a%e4%bb%bb%e3%81%9b%ef%bc%9f%ef%bc%81/#comments Thu, 26 Mar 2009 03:08:20 +0000 Hideya Kato http://www.lifexweb.com/tech/?p=151 先日からサービスの実装テストや動作確認で
苦しんでいる加藤です。

本当は全OS、全ブラウザでテストするのが一番なんですが、
なかなか個人ですべての環境を構築するのは大変ですし
(もちろんIE Testerとかで確認しますが)、個人でそこまで
時間使えないよーなんてこともあります。

そんな中何かいい仕組みがないか探していたら、
最近JavaScriptに関してはスクリプトを入れておくだけで
メールを飛ばしてくれたり、エラーを集計しておいてくれたり
するサービスがあるんですね。

damn1 とりあえずアカウント作ってセットアップ。
タグを入れるだけでセットアップできる。

damn21 メールで飛んでくる内容はこんな感じ

damn31
ブラウザごとの回数などもまとめてくれます。
(Firefoxが多いですね、、、涙)
DamnIT (beta)
A JavaScript error reporting service

とりあえずリリースしてしまってエラーが出たら出た分だけ対応、
というちょっと効率主義的ですが、アジャイル開発にはもってこいの
サービスです。

使ってもらえないプログラムはテクノロジー、ではなく、
ただのシステムでしかないので、使うユーザーのことを考えて、
細かくメンテナンスしていきたいですね。

]]> http://www.lifexweb.com/tech/2009/03/%e5%8b%95%e4%bd%9c%e3%83%86%e3%82%b9%e3%83%88%e3%82%92%e3%83%a6%e3%83%bc%e3%82%b6%e3%83%bc%e3%81%ab%e3%81%8a%e4%bb%bb%e3%81%9b%ef%bc%9f%ef%bc%81/feed/ 0