オンラインでPHPファイルを編集できるオンラインエディタ

Online PHP Editor – PHPanywhere.net

外出先とかで開発環境や接続情報が手元になくても
手軽にリモートのPHPファイルを調整できるので
いいかもしれません。

参考：オンラインのPHPエディタ『PHPanywhere』(CREAMU)

Google Visualization API　- Google Code

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

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

Google Visualization API　ギャラリー

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


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

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

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

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

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

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