EC studio 技術ブログ http://techblog.ecstudio.jp 株式会社EC studioの技術ブログ Fri, 23 Jul 2010 08:09:20 +0000 http://wordpress.org/?v=2.9.2 ja hourly 1 PHPエンジニアのためのオブジェクト指向JavaScriptの書き方 http://techblog.ecstudio.jp/tech-tips/oo-javascript-for-phper.html http://techblog.ecstudio.jp/tech-tips/oo-javascript-for-phper.html#comments Tue, 22 Jun 2010 11:46:21 +0000 山本 正喜 http://techblog.ecstudio.jp/?p=1321 JavaScriptはプロトタイプベースのオブジェクト指向言語で、
PHPやJava、C++などのクラスベースのオブジェクトとは
特徴や書き方が大きく異なります。

今回は、PHPでオブジェクト指向開発の経験がある人向けに、
JavaScriptでのオブジェクト指向プログラミングの書き方を解説します。

サンプルはすべてそのまま実行できるので、
FirebugなどのJavaScriptコンソールで実行して
挙動を確かめながら読み進めるとわかりやすいかと思います。

JavaScript の特徴

すべてがオブジェクト

JavaScriptは完全なオブジェクト指向言語であり、
すべての型の変数、関数はオブジェクトです。
(プロパティやメソッドを持つ)

テキスト表示
  1. var test = "文字列";
  2.  
  3. alert(test.length); //3

下記の変数1と変数2の二つの書き方は同じ意味です。
(厳密にはtypeof関数の返り値などが違うが、実用上ほぼ同じ)

テキスト表示
  1. //数値型
  2. var num1 = 123;
  3. var num2 = Number(123);
  4.  
  5. //文字列型
  6. var str1 = "ABC";
  7. var str2 = new String("ABC");
  8.  
  9. //配列型
  10. var arr1 = [1,2,3]
  11. var arr2 = new Array();
  12. arr2[0] = 1;
  13. arr2[1] = 2;
  14. arr2[2] = 3;
  15.  
  16. //オブジェクト型
  17. var obj1 = {name:"Masaki"}
  18. var obj2 = new Object();
  19. obj2.name = "Masaki";

この様に、数値、文字列、配列などもオブジェクトとして表現できます。

関数もオブジェクト

実は、関数も変数と同じで、

テキスト表示
  1. function func1(){
  2.     alert('A');
  3. }
  4.  
  5. var func2 = function(){
  6.     alert('A');
  7. }
  8.  
  9. func1(); //A
  10. func2(); //A

と変数に代入する形で表現できます。
(関数は、"定義"ではなく実体を持つ"変数")

function(){} の様な、関数名を書かない関数の定義方法を
無名関数(またはラムダ関数)といいます。
変数に代入するときには無名関数を使用します。

また、PHPでは可能なこういった構文はエラーになります

テキスト表示
  1. function test(){
  2.     alert('A');
  3. }
  4.  
  5. test = 'ABC'; //ここで関数を上書きしている！
  6.  
  7. test(); //エラー

この例でもわかる通りJavaScriptでは
関数の定義後に上書き(再定義)や書き換え、削除などが可能です。

さらに、変数と同じなのでこんなこともできます。

テキスト表示
  1. function test(){
  2.     alert('A');
  3. }
  4.  
  5. function do_func(func){
  6.     func();
  7. }
  8.  
  9. //test関数を引数に
  10. do_func(test);
  11.  
  12. //その場で無名関数を作って引数に
  13. do_func(function(){
  14.     alert('B');
  15. });

オブジェクトと同じように引数として渡すことも、返り値として返すこともできます。

内部構造を持ったオブジェクトのコピーは参照渡し

JavaScriptではPHPとは違い、配列に対しても
参照渡しでのコピー(シャローコピー)になります。

テキスト表示
  1. var arr1 = [0,1,2];
  2. var arr2 = arr1;
  3.  
  4. arr2[0] = 5;
  5.  
  6. //コピー元の配列も書き換わる！
  7. alert(arr1[0]);  //5
  8.  
  9. var obj = {name:"Masaki"};
  10. var obj2 = obj;
  11.  
  12. obj2.name = "Yamamoto";
  13.  
  14. //コピー元のオブジェクトも書き換わる！
  15. alert(obj.name); //Yamamoto

メソッドのないオブジェクト(PHPの連想配列)でも
シャローコピーになるので注意しましょう。

完全なコピー(ディープコピー)をするには

テキスト表示
  1. var arr1 = [0,1,2];
  2. var arr2 = [];
  3. for (var i in arr1){
  4.     arr2[i] = arr1[i];
  5. }
  6.  
  7. var obj1 = {name:"Masaki"};
  8. var obj2 = {};
  9. for (var i in obj1){
  10.     obj2[i] = obj1[i];
  11. }

の様に、forなどでコピーすればOK。
※ただし、多次元配列の様なものは再帰的に処理する必要あり

※for (X in OBJ) の構文はPHPのforeach同様に使えてとても便利です！

関数とスコープ

PHPと同様に、JavaScriptでも関数内を別スコープにすることができますが、
スコープの扱い方が大きく異なるので注意が必要です。

グローバル変数は、関数内でもそのまま参照できます。

テキスト表示
  1. //グローバル変数
  2. var test = "Masaki";
  3.  
  4. function myfunc(){
  5.     alert(test);
  6. }
  7.  
  8. myfunc();  //Masaki

関数スコープ内でグローバル変数の内容を変更した場合も、
グローバル変数が書き変わります。

ローカル変数を作成したい場合は、 var を使います。

テキスト表示
  1. //グローバル変数
  2. var test = "Masaki";
  3.  
  4. function myfunc(){
  5.     var test = 'Yamamoto';
  6.     alert(test);
  7. }
  8.  
  9. myfunc();  //Yamamoto
  10.  
  11. alert(test); //Masaki

var で宣言された変数は、宣言されたスコープのローカル変数となります。
var で宣言しない変数はグローバル変数になります。

ただ、関数の引数は例外で、varをつけなくてもローカル変数扱いになります。

JavaScriptにおけるクラス

オブジェクト指向におけるクラスの基本的な機能は

* プロパティ
* メソッド
* コンストラクタ
* アクセス修飾子 (public/private)
* 継承

などですが、JavaScriptでもすべてできます。

JavaScriptにはクラスは存在せず、オブジェクトと
関数を組み合わせて同様の機能を実装します。

通常PHPなどクラスベースのオブジェクト指向言語では、

クラス → インスタンス

と、クラスという"型"からインスタンスという"実体"を生成しますが、
プロトタイプベースのオブジェクト指向言語には"クラス"という
考え方は存在せず、定義＝実体となります。(インスタンスしかない)

JavaScriptでは new という構文があり、クラスからインスタンス化している
ように見えますが、実際の処理は元となるオブジェクトを
コピー(+継承)して作られます。

インスタンスしか存在しないのにどう継承などを実装するのかなどは、
追って説明していきます。

プロパティ

JavaScriptでのプロパティ定義は、PHPの様に宣言は必要ありません。

テキスト表示
  1. var object = new Object();
  2.  
  3. object.name = 'Masaki';
  4. object.company = "EC studio";

インスタンス化した後で追加することもできますし、

テキスト表示
  1. var object = {
  2.     name:"Masaki",
  3.     company:"EC studio"
  4. };

と、シンタックスシュガー(簡易記法)を使って簡単に定義することもできます。

メソッド

メソッドもプロパティとほぼ同様に記述できます。

テキスト表示
  1. var object = new Object();
  2.  
  3. object.hello = function(){
  4.     alert('Hello!');
  5. }
  6.  
  7. object.hello();

シンタックスシュガーを使うと

テキスト表示
  1. var object = {
  2.     hello:function(){
  3.         alert('Hello');
  4.     }
  5. };
  6.  
  7. object.hello();

こう書けます。

プロパティと組み合わせると、

テキスト表示
  1. var object = {
  2.     name:"Masaki",
  3.     company:"EC studio",
  4.     hello:function(){
  5.         alert('Hello');
  6.     }
  7. };
  8.  
  9. object.hello(); //Hello

こう書けます。

メソッド内で自分自身のプロパティやメソッドを参照するには、this を使います。

テキスト表示
  1. var object = {
  2.     name:"Masaki",
  3.     company:"EC studio",
  4.     hello:function(){
  5.         alert('Hello ' + this.name);
  6.     }
  7. };
  8.  
  9. object.hello(); //Hello Masaki

これでかなりクラスに近くなりましたね。

コンストラクタ

オブジェクトをインスタンス化する時に実行されるメソッドであるコンストラクタは、
下記の様に実装できます。(厳密には、インスタンス化ではなくコピー+継承)

テキスト表示
  1. function MyObject(message){
  2.     alert(message);
  3. }
  4.  
  5. var object = new MyObject('Hello');  //Hello

new Object() ではなく、関数をnewの対象にすることで
その関数の中身をnew実行時に実行できます。

コンストラクタに返り値を指定してもオブジェクト型以外は無視されます。
コンストラクタの返り値がオブジェクト型の場合はそのオブジェクトが
newで生成されるオブジェクトになります。

このコンストラクタの仕組みを使うと、newした時に
自動的にプロパティやメソッドを定義できる、
とても PHPのクラスに近い書き方ができます。

テキスト表示
  1. function MyObject(message){
  2.     this.name = 'Masaki';
  3.     this.company = 'EC studio';
  4.    
  5.     this.hello = function(message){
  6.         alert(message + ' ' + this.name);
  7.     }
  8.    
  9.     //helloを実行
  10.     this.hello(message);
  11. }
  12.  
  13. var object = new MyObject('Hello');  //Hello Masaki
  14.  
  15. object.hello('Good morning');  //Good morning Masaki

関数はObjectでもあるので、this が使えます。
コンストラクタの処理の中に thisへの代入を含めることで、
初期の定義を関数内に入れてしまうことができます。

※コンストラクタの引数である messageと、helloメソッドの引数のmessageが
同じ変数名になっていますが、helloメソッドのものは関数定義の中での
引数名なので、別のものと認識されます。

アクセス修飾子(public/private)

JavaScriptにはアクセス修飾子はありませんが、コンストラクタの例で挙げた
関数でのオブジェクト定義を使えば、プロパティやメソッドにアクセス制限を
かけることができます。

テキスト表示
  1. function MyObject(){
  2.     var self = this;
  3.    
  4.     //public
  5.     this.name = 'Masaki';
  6.     this.company = 'EC studio';
  7.     //private
  8.     var separator = ',';
  9.    
  10.     //public
  11.     this.hello = function(message){
  12.         alert(message + separator + getName());
  13.     }
  14.  
  15.     //private
  16.     var getName = function(){
  17.         return self.name;
  18.     }
  19. }
  20.  
  21. var object = new MyObject();
  22.  
  23. alert(object.separator); //undefined
  24. object.getName();  //エラー

関数内にvarを使ってローカル変数による変数や関数にすることで、
外からは参照出来ない privateなプロパティ、メソッドを作ることができます。
(protectedなプロパティ、メソッドは作成できません)

private なプロパティ、メソッドは this を使わず
var を使ってローカル変数として参照します。

privateなメソッドを作るときの注意として、
メソッドのfunction定義内では this は使えません。
その場合の対策として、this を self というローカル変数にコピーして使用しています。
※privateなメソッドのfunction内のthisは、その関数自体を指すため。

この様に、this はそのメソッドの呼び出し元の主体に応じて変わってしまうので、
その場合に対応するためにvar self = this をコンストラクタで
あらかじめ定義しておくと便利です。

※privateなメソッドの場合の他に、イベントハンドラによって
メソッドが実行された場合でも this が変わってしまいます。
(クリック処理や、Ajax処理など)

これでプロパティ、メソッド、コンストラクタを実現できました。

JavaScriptには他にも様々なオブジェクトの書き方があり、
それぞれにメリット・デメリットがありますが、
クラスベースに文法が比較的近いこの記述方法が私のおすすめです。

継承

JavaScriptのオブジェクトには prototype という予約語のプロパティがあり、
そのprototypeに親となるオブジェクトを代入することで継承を実現できます。
prototype = 型 という意味。元となる型のオブジェクトを指定できます。

テキスト表示
  1. //親オブジェクト
  2. function MyObject(){
  3.     var self = this;
  4.    
  5.     //public
  6.     this.name = 'Masaki';
  7.     this.company = 'EC studio';
  8.     //private
  9.     var separator = ',';
  10.    
  11.     //public
  12.     this.hello = function(message){
  13.         alert(message + separator + getName());
  14.     }
  15.  
  16.     //private
  17.     var getName = function(){
  18.         return self.name;
  19.     }
  20. }
  21.  
  22. //子オブジェクト
  23. function MyObjectChild(){
  24.     //プロパティをオーバーライド
  25.     this.name = 'Yamamoto';
  26.     //privateはオーバーライドできない
  27.     var separator = '|';
  28.    
  29.     //メソッドを追加
  30.     this.thankyou = function(){
  31.             this.hello('Thank you');
  32.     }
  33. };
  34.  
  35. //プロトタイプ(継承元)を指定
  36. MyObjectChild.prototype = new MyObject();
  37.  
  38. var mychild = new MyObjectChild();
  39.  
  40. //子オブジェクトの中で、親オブジェクトのhelloメソッドが実行できる
  41. mychild.thankyou();  //Thank you,Yamamoto

privateなメンバ(var で定義したもの)はオーバーライドできません。
これは、JavaScriptにおける var の挙動を理解していれば
何が起きているかがわかるかと思います。
(親の関数のローカル変数なので上書きできない)

JavaScriptのオブジェクト指向はPHPと比較すると複雑に見えますが、
その挙動や書き方を理解してしまえば、とても柔軟かつシンプルに記述でき、
大規模なシステム開発も十分可能なものだと思います。

オブジェクト指向でのJavaScript開発の参考になれば幸いです。


関連した記事： ]]> http://techblog.ecstudio.jp/tech-tips/oo-javascript-for-phper.html/feed 0 プログラマ視点でみたjQueryの魅力 http://techblog.ecstudio.jp/tech/attractive-jquery.html http://techblog.ecstudio.jp/tech/attractive-jquery.html#comments Mon, 08 Mar 2010 15:00:05 +0000 津留 奨史 http://techblog.ecstudio.jp/?p=987 jQueryは、リッチなUIを簡単な記述で実装できます。

デザイナーにも理解しやすい仕様（そこも魅力の一つ！）なので、
いまやデザイナー向けにjQueryを説明するブログもたくさんありますね。

ただ、完全にデザイナー向けのライブラリなのか？というと、そうでもなく
デザイナーだけではなくプログラマ視点から見ても魅力があるライブラリだと
言えるでしょう。

今回はプログラマ視点でみたjQueryの魅力と感じた点を簡単にまとめてみます。

コードがスマートになる

なんといってもココに魅力を感じます！
細かく言うと以下のものがあげられます。

・要素の操作もシンプル簡単！

jQueryはセレクタを利用して要素を簡単に取得し、
エフェクトの追加やDOMの操作ができます。
（CSSとほぼ同様のセレクタを指定して
簡単にDOMの操作ができるところがデザイナーにも優しいですね！）

これは、記述方法をみていただければよくわかりますので
通常の書き方とjQueryを利用した書き方で比較してみます。

テキスト表示
  1. <html>
  2. <head>
  3.  <script type="text/javascript" src="jquery-1.4.1.js"></script>
  4. </head>
  5. <body>
  6. <h3>ホームページ支援サービス一覧 (jQueryで色を変更)</h3>
  7. <ul id="hpbackup">
  8.  <li>Web Analyst</li>
  9.  <li>HP売上プラス</li>
  10.  <li>EC DVD</li>
  11. </ul>
  12.  
  13. <h3>おすすめソフトウェア一覧 (通常のjavascriptで色を変更)</h3>
  14. <ul id="software">
  15.  <li>ESET Smart Security</li>
  16.  <li>ESET NOD32アンチウイルス</li>
  17.  <li>MindManager</li>
  18.  <li>Camtasia</li>
  19.  <li>Snagit</li>
  20. </ul>
  21.  
  22. </body>
  23. <script type="text/javascript">
  24. //jQueryで特定の<ul>タグ以下のテキストカラーを変更
  25. $('#hpbackup li').css('color','#00f');
  26.  
  27.  
  28. //普通のjavascriptで特定の<ul>タグ以下のテキストカラーを変更
  29. for (i in document.getElementById('software').childNodes){
  30.     if (document.getElementById('software').childNodes[i].tagName == 'LI'){
  31.         document.getElementById('software').childNodes[i].style.color = '#0f0';
  32.     }
  33. }
  34. </script>
  35. </html>

上記のスクリプトは、<li>のテキストカラーを変更しているものです。

比べていただくとわかるように
通常の書き方で書くよりもjQueryを利用した書き方のほうが
明らかにスマートで見やすい書き方なのではないでしょうか！？

・1行でAjax！

なんと１行でAjaxが書けます！

例えば、
同ディレクトリにある sample.phpの出力結果をidがhogeのタグ内に読み込む場合
以下のように記述します。

テキスト表示
  1. <div id="hoge"></div>
  2.  
  3. <script type="text/javascript">
  4. $('#hoge').load('./sample.php');
  5. </script>

これだけです！

AjaxをサポートしているライブラリはExt JSやPrototypeなどがありますが、
いずれもjQueryほどシンプルに実装とはいきません。

本当にこの機能だけでも十分魅力的です。

・メソッドチェーンの利用で重複のないコードに

jQueryを使うと何度も同じ要素を指定する必要がなくなります。

例えば、
指定したタグの中にある文字列と文字色を変更する場合です。

テキスト表示
  1. <span id="hoge">メソッドチェーン</span>
  2.  
  3. <script type="text/javascript">
  4. //毎回、要素の指定をした書き方
  5. $('#hoge').css('color','#FF0000');//色を赤に変更
  6. $('#hoge').html('jQuery');//「jQuery」という文字をタグ内に表示(innerHTMLと同じ)
  7.  
  8. //メソッドチェーンを利用した書き方
  9. $('#hoge').css('color','#FF0000').html('jQuery');
  10. </script>

上記のように

要素を取得→イベントやスタイルを指定
要素を取得→イベントやスタイルを指定
・・・

といったように、毎回要素を取得して記述する方法より

要素を取得
　→イベントやスタイルを指定
　→イベントやスタイルを指定
・・・

という形で、ひとつの要素を取得したら
取得した要素に対して複数の指定をまとめて行うほうが効率的です。
（実際、処理速度の改善にもなります）
そしてコードもスマート！

同じ処理ならjQueryのメソッドチェーンを利用した記述をおすすめします！

readyが便利すぎる！

jQueryのスクリプトを見るとよくreadyが記述されています。
以下のような記述です。

テキスト表示
  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3.     //この中に処理を記述
  4. });
  5. </script>

このreadyが実行されるタイミングはDOMの操作を行いやすいので、
実はとても便利なメソッドです。

とはいっても、文字だけで動きの説明は難しいので
具体的に、コードとあわせて説明します。

テキスト表示
  1. <html>
  2. <head>
  3.  <script type="text/javascript" src="jquery-1.4.1.js"></script>
  4.  <script type="text/javascript">
  5.  //サイズ変更
  6.  $('#book1').width(370).height(600);
  7.  </script>
  8. </head>
  9. <body>
  10.  <img id="book1" src="http://blog.ecstudio.jp/wp-content/uploads/2010/01/book-185x300.jpg" style="margin: 10px">
  11. </body>
  12. </html>

上記の例では#book1はサイズが変更されません。

これは、HTMLのドキュメント構造が生成される順番を意識せずに
スクリプトを記述しているからです。
上記スクリプトの場合、<img>タグのドキュメント構造が生成されていない状態で<head>タグが読み込まれ、<img>タグに対する処理をしようとしたため
後で生成された<img>タグはサイズが変わらなかったのです。

この問題をreadyを使わずに解決するためには、
onloadイベントを利用することになります。
しかし、onloadを利用しても問題点はあります。

まずはコードをみていただきましょう。

テキスト表示
  1. <html>
  2. <head>
  3.  <script type="text/javascript" src="jquery-1.4.1.js"></script>
  4.  <script type="text/javascript">
  5.  function load(){
  6.      $('#book1').width(370).height(600);
  7.  }
  8.  </script>
  9. </head>
  10. <body onload="load();">
  11.  <img id="book1" src="http://blog.ecstudio.jp/wp-content/uploads/2010/01/book-185x300.jpg" style="margin: 10px">
  12. </body>
  13. </html>

上記のようにすれば、たしかに画像のサイズは変更されて表示されます。
しかし、実行すれば分かりますが一度画像がレンダリングされてしまったあとの
タイミングでonloadイベントは動く為、
一瞬ですが表示の時にサイズ変更前の画像が見えてしまいます。
(※キャッシュによって２回目からははじめから大きな画像が出ている場合もあります）

この問題を解決するのがjQueryのreadyです。
先に書いたスクリプトを少しだけ変更してreadyを使った書き方に変えてみます。

テキスト表示
  1. <html>
  2. <head>
  3.  <script type="text/javascript" src="jquery-1.4.1.js"></script>
  4.  <script type="text/javascript">
  5.  $(document).ready(function(){
  6.      $('#book1').width(370).height(600);
  7.  });
  8.  </script>
  9. </head>
  10. <body>
  11.  <img id="book1" src="http://blog.ecstudio.jp/wp-content/uploads/2010/01/book-185x300.jpg" style="margin: 10px">
  12. </body>
  13. </html>

こちらのコードを実行してみるといかがでしょうか？
はじめから大きな画像が出ているのではないでしょうか。
もちろん動作はキャッシュを消しても変わりません。
この挙動の秘密はreadyとonloadの実行タイミングの違いにあります。

onloadとreadyの実行タイミングの違いを先にざっくり示します。

●onloadの場合
１、ドキュメント構造完成
↓
２、画像読み込み・レンダリング
↓
３、onloadイベントの実行（今回は画像の操作）

●readyの場合
１、ドキュメント構造完成
↓
２、readyの実行（今回は画像の操作）
↓
３、画像読み込み・レンダリング

このように
onloadの実行タイミングはすべてのドキュメント構造が完成して、
画像の読み込みが行われた後になります。
つまりこの読み込み時点では、画像は小さいままのものになっています。
ところがreadyの場合、ドキュメント構造が完成した直後に呼ばれます。
もちろん画像が読み込まれる前になります。
そのため、先にjavascriptで画像のサイズを変更した後に画像を読みこむので、
はじめから画像はサイズが変更されているものが表示されるように見えるのです。

以上のことから
readyを利用することでドキュメント構造の生成順番をそれほど意識する必要がなく
<head>タグ内にもDOMの操作を行うスクリプトを記述できるのです。

実はこのreadyの実行タイミングはDOMContentLoadedというイベントを利用すればFireFoxなどでは同じ動きのものが実現できます。
しかし、Internet ExplorerではDOMContentLoadedが存在しません。
そのため、同じような挙動をさせるには別の方法で実装する必要があります。

jQueryはブラウザ間の違いを吸収してくれるクロスブラウザなライブラリなので、
どのブラウザでもreadyを利用するだけで同様の挙動を実現することができます。
（ブラウザに依存しないところもまたひとつのメリットであると言えるでしょう。）

readyを利用するとブラウザの問題やドキュメント構造の構築タイミングを
考慮する必要がなくなるので安心してスクリプトを記述できます！＾＾

以上、触ってみてプログラマ視点で魅力的に感じた部分を上げてみました。
もし、まだ利用されていないという方でしたらぜひ使ってみてはいかがでしょうか！？

こちらでダウンロードできます。
http://jquery.com/


関連した記事： ]]> http://techblog.ecstudio.jp/tech/attractive-jquery.html/feed 0 超高速でtwitterにキャプチャ画像をつぶやく仕組みを作ってみました http://techblog.ecstudio.jp/tech-tips/ultraquick-capture-for-twitter.html http://techblog.ecstudio.jp/tech-tips/ultraquick-capture-for-twitter.html#comments Mon, 22 Feb 2010 12:43:15 +0000 山本 正喜 http://techblog.ecstudio.jp/?p=1134 twitterを使っていて、デスクトップのキャプチャ画像を
つぶやきたい時がよくありませんか？

[キャプチャ画像の例]
キャプチャサンプル

通常だとtwitterにつぶやくまではこんな手順ではないでしょうか。

1.キャプチャしたい状態を準備
2.PrintScreenなどでキャプチャ
3.画像編集ソフトで切り抜いてファイル保存
4.twitpicを開いてログイン
5.twitpicでファイルアップロード
6.twitterでURLをつぶやく

うーん、手間です。。

キャプチャソフトを使ったり、twitterクライアントを
使えば少しは楽になりますが、いちいちファイルを
保存してアップというのがそもそも面倒です。

twitterなのでもっと気軽にさくっとつぶやきたいところです。

というわけでいろいろとツールを組み合わせて、
超高速でtwitterへキャプチャ画像をアップする仕組みを
作ってみました。

今回の完成品

ショートカットキーをたたくと

カーソルが十字に

カーソルが十字にかわり、

範囲指定

ドラッグして範囲指定すると

twitpicへアップロード

即座にtwitpicにアップされ、画像のプレビュー画面が表示されます。
(http://twitpic.com/xxxxx をクリックするとtwitpicが開きます)

ここから、「この画像をツイートする」をクリックすると、

twitterへpost

twitterが開き、そのURLがすでに入力された状態になります。
あとはコメントを書いてpostすればok！

というものを作ってみました。
キャプチャをtwitterへつぶやくまでにかかる時間はたった数秒です。

デスクトップのキャプチャソフトと、twitpicのAPIを連携させて実現しています。
スクリプトを改造すればtwitpic以外のサービス(tumblr,flickrなど)に
アップしたりなども自在なので、なかなか面白い仕組みが
できたのではないかと思います。 :)

では、さっそく作り方を説明します！

仕組み

仕組みとしては、

・キャプチャソフトのGyazo
・twitpicアップロード用の自作PHPスクリプト

を組み合わせています。

■Gyazoについて

Gyazoは

http://gyazo.com/ja

で配布されている、スクリーンショットの超簡単キャプチャソフトです。

キャプチャしたい範囲を選ぶだけで、
即座にサーバーへ画像をアップロードしてくれます。

ただ、Gyazoそのままでは

・アップロードされるURLの文字数がとても長い
・アップロードした画像は(いまのところ)削除出来ない
・アップロードされるサーバーが固定(gyazoのサーバー)

など少しtwitterでは使いづらい部分があるので、
そこを自作のPHPスクリプトで補います。

また、今回はGyazoを改造したGyazowin+を使用します。

Gyazowin+は本家版に対し、

・アップロード先の変更
・Basic認証・SSLの対応
・確認ダイアログの表示

の機能が追加されており、これらの機能を使って
twitpicへのアップロードを実現します。

■PHPスクリプトについて

PHPスクリプトでは、Gyazowin+からアップロードされた
ファイルを受け取り、そのままtwitpicのAPIを使って
アップロードします。

twitpicへアップロードした後は、プレビュー画面(下記)を表示して、

twitpicへアップロード

画像を確認後twitterへすぐにツイートできるようにしています。
(失敗キャプチャもあるかもなので、一度確認画面を挟んでいます)

作り方1:PHPスクリプトをアップロード

まずPHPスクリプトをダウンロードしてください。

gyazopic.php (zipファイルをダウンロード)

ダウンロードしたら解凍し、スクリプトの頭にある
下記の設定部分を編集してください。

テキスト表示
  1. /**
  2. * 設定
  3. */
  4.  
  5. //twitterのアカウント情報
  6. $username = '';
  7. $password = '';

$usernameにtwitterユーザー名、
$passwordにパスワードを入れます。

(例)

テキスト表示
  1. /**
  2. * 設定
  3. */
  4.  
  5. //twitterのアカウント情報
  6. $username = 'msk_masaki';
  7. $password = 'passwordxxxx';

編集後、自分のサーバーの好きな箇所へ
アップロードしてください。

作り方2:Gyazowin+をダウンロード

次に、配布サイトよりgyazowin+をダウンロードします。

http://d.hatena.ne.jp/nvsofts/20090321/1237619040

gyazowin+ ダウンロード

好きなフォルダへ解凍すればokです。

次に、解凍したフォルダの中にある
gyazowin+.ini をメモ帳などで編集します。

テキスト表示
  1. [gyazowin+]
  2. upload_server=www.test.com
  3. upload_path=/folder/gyazopic.php
  4.  
  5. use_ssl=no
  6. ssl_check_cert=no
  7.  
  8. use_auth=no
  9. auth_id=
  10. auth_pw=
  11.  
  12. up_dialog=no
  13. copy_url=no
  14. copy_dialog=no
  15. open_browser=yes

upload_serverに、PHPスクリプトを設置するドメイン名、
upload_pathに、ドメイン以降のファイルパスを記述します。

これで設定は完了です！

ショートカットキーを設定する

gyazowin+.exe を右クリックしてショートカットを作成し、
ショートカットを右クリック→プロパティを開きます。

ショートカットキー

ショートカットキーに、好きなキーをセットします。

あとは、そのショートカットキーを押せば、
カーソルが十字に変わり、範囲指定すれば
twitpicへと即座にアップロードされます！
(※キャンセルしたい場合は右クリック)

おまけ：活用方法

今回使用したGyazoは、即座にキャプチャファイルをサーバーへ
POSTすることができるので、様々な活用方法が考えられるのではないかと思います。

Google Documentへとアップロードしたり、Blogに即postしたり、
tumblrに投げたり、flickrへ保存したり、、、、

社内のサポートツールにも使えるかもしれませんね。
EC studioではこのGyazoを使ってサイト制作やシステム開発の時の
ラフ画像や、トラブル発生時のキャプチャなどをやりとりしています。
(チャットでURLを送りあう)

今回作ったPHPスクリプトは100行程度のとても簡単なものなので、
ぜひ改造して自分に使いやすい仕組みを作ってみてください！

ご要望やご質問、感想などがあれば私のtwitterまでどうぞ！
(http://twitter.com/msk_masaki)

[告知]
EC studioで本を出版することになりました！
EC studioでiPhoneとtwitterを全社導入した時の事例や、
Google Appsの活用法などを詳しくまとめています。
Google 辻野社長との対談も収録！
※Amazon総合ランキング1位獲得しました！

「iPhoneとツイッターで会社は儲かる」

詳しくはこちらの詳細ページをご覧下さい！


関連した記事： ]]> http://techblog.ecstudio.jp/tech-tips/ultraquick-capture-for-twitter.html/feed 2 Google Chrome から好きな検索エンジンで検索する方法 http://techblog.ecstudio.jp/tips/useful_search_by_google-chrome.html http://techblog.ecstudio.jp/tips/useful_search_by_google-chrome.html#comments Sun, 21 Feb 2010 15:00:23 +0000 渋谷 悠司 http://techblog.ecstudio.jp/?p=686 みなさんはGoogle Chromeを使っていますか？
最近は拡張機能も正式リリースされて、どんどん便利になっていきますね。

今回はそんなChromeの便利な使い方を一つご紹介します。

Chromeのアドレスバーは検索窓と兼用になっているんですが、
ある設定を追加すると、
任意の検索エンジンや、検索窓のあるサイトの検索をChromeからできてしまうんです。

たとえば・・・

YouTubeの検索をChromeからダイレクトにおこなう場合は

アドレスバーに「youtube」と入力して
100204input_youtube

スペース＋検索キーワードを入力すると、youtube検索というものが出現
100204chage

そして、検索
100204search_youtube

このように、Chromeから検索できました。

では、実際にどうやって設定を追加するのかをYouTubeを例に説明しようと思います。

好きな検索エンジンの追加手順

まずはChromeの右上のメニューからオプションを開きます

100204select_option

オプションを開いたら、
基本設定タブの中の規定の検索エンジンの管理というボタンをクリック

100204click_button

ウィンドウが開いたら、右上の追加ボタンをクリックしましょう。
すると、検索エンジンを追加という小さいウィンドウが開きます

100204add_setting

ここまで来たら、検索エンジンの追加に必要なURLを作成します

まず、YouTubeで適当なキーワードで検索して、
その際に表示されるURLをコピーしましょう。

例えばキーワードが「chrome」の場合

http://www.youtube.com/results?search_query=chrome&search_type=&aq=f

URL中の「chrome」というところを「%s」に置き換えます　↓↓↓↓

http://www.youtube.com/results?search_query=%s&search_type=&aq=f
というURLができました。

このURLを、先程の検索エンジンの追加ウィンドウのURL欄へ入力します。

100204add_engine

名前はYouTubeを検索するということがわかれば何でもOKです。
ここでは「YouTube」にしておきます。

キーワードはショートカット名みたいなもののようなので、
YouTubeで検索するさいに便利そうな文字にしておくのがいいと思います。

OKボタンを押すと、その他の検索エンジンのところにYouTubeが追加されました！100204added_engine

これで設定は終わりです。

結構簡単に追加できるので、よく使うところを追加しておくと便利だと思います。

例えば、PHPで開発している人ならPHP.netを検索できるようにするのも便利ですし、
Gmailをよく利用する人はGmailの検索を追加してしまうのもいいかもしれません。

是非便利そうなところを追加してみてください＾＾


関連した記事：
  • 関連する投稿はありません。
]]> http://techblog.ecstudio.jp/tips/useful_search_by_google-chrome.html/feed 0 Amazon APIを使って簡単にランキングを取得する http://techblog.ecstudio.jp/tech-tips/amazon-api-ranking.html http://techblog.ecstudio.jp/tech-tips/amazon-api-ranking.html#comments Wed, 17 Feb 2010 00:00:17 +0000 小野 http://techblog.ecstudio.jp/?p=652 「iPhoneとツイッターで会社は儲かる」がAmazonで販売開始され、
EC studioでは様々なプロモーション活動を行っております。

プロモーションの効果測定をするために、Amazonの商品ページへアクセスして
Amazonの中で現在何位なのか順位チェックを行っていましたが、
面倒くさくなったので自動ランキング取得システムを作成しました。

今回はAmazon APIを使って、簡単にAmazonの商品情報（ランキング）を
取得する方法をご紹介いたします。

今回の完成品

こんな感じでAmazonの商品情報を取得できます。
プログラム実行結果
[ 使用サービス ]　※無料
・Amazon API
・PEARのServices_Amazonライブラリ

※Amazon API とは
AmazonアソシエイトWebサービスが提供する「Product Advertising API」のこと
Amazonの商品情報や関連コンテンツをプログラムを通してアクセスできる
サービスが提供されています。

※PEARのServices_Amazonライブラリとは
PEARが提供するAmazon APIを簡単に使えるライブラリ

サービス開始準備

APIによるAmazonへのアクセスは、利用者毎のアクセスキーを使用した署名認証が
必要になります。
まずはアクセスキー（「Access Key ID」と「Secret Access Key」）を取得します。

1.Amazon Webサービスにログイン
http://aws.amazon.com/

※アカウントがない場合は以下を参考にアカウントを作成してください。
Product Advertising API アカウント作成 ヘルプ

2.ログイン後、「Account」メニューより、「Security Credentials」を選択

Amazon Webサービス - Security Credentials

3.「Access Credentials」に記載されている
「Access Key ID」と「Secret Access Key」を取得
※「Show」をクリックすると「Secret Access Key」が表示されます

Amazon 「Access Key ID」と「Secret Access Key」

商品識別コードの取得

Amazonの商品情報を取得するのに、商品識別コードを使用します。
本の場合は、ISBNの10桁コード（ISBN-10）を使用します。
※本以外の商品の場合はASINコードを使用します

Amazon登録情報 商品識別コード（ISBN）
※Amazon商品ページより抜粋

Services_Amazonをインストール

PEARのServices_Amazonのライブラリを使ってAmazonにアクセスし、
ランキング情報を取得します。
※PEARとはPHPの標準のオープンソースのクラスライブラリです。

Windowsのインストール方法

インストールは以下のコマンドを実行します
PEAR インストールコマンド
※PEARのServices_AmazonのDownloadページより

ローカル環境（xampp）にインストール

今回は、ローカル環境（xampp）にインストールしてみます。
※xamppとはApacheFriendsが提供しているフリーソフトで、
PHPの開発環境を簡単にインストールして使うことができます。
※Services_Amazonは標準で用意されていないので、手動でインストール。

1.コマンドプロンプトを立ち上げる
Windows > すべてのプログラム > アクセサリ > コマンド プロンプト

2.ディレクトリ変更
>cd C:\xampp\php
xampp ディレクトリ変更

※パスはご自分のxamppがインストールしてある環境にあわせてください

3.PEAR HTTP_Request2のインストール
>pear install -a HTTP_Request2-alpha
PEAR HTTP_Request2のインストール

※Services_Amazonで使用しているHTTP_Request内で使用しているので、
まずこちらをインストール。

※インストールのバージョン（state）は最新のものを指定してください

※インストールする際に、依存するパッケージも合わせてインストールするため、
オプションに「-a」を指定しています。

4.PEAR Services_Amazon のインストール
>pear install -a Services_Amazon-beta
PEAR Services_Amazonのインストール

※インストールのバージョン（state）は最新のものを指定してください

4.インストールが終わったら確認（インストール・パッケージ一覧）
>pear list
PEAR インストール・パッケージ一覧

※「Services_Amazon」最新版（2010/02/16時点で0.8.0）が
インストールされていることを確認

その他の環境や方法でのインストール

PEAR公式サイトのインストールマニュアルを御覧下さい。

ItemLookupを使用してAmazon商品情報を取得

サンプルコード

PEARのServices_Amazonを使用してPHPでAmazonから商品情報を
取得して、結果を表示するプログラム

テキスト表示
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Amazon商品ランキング</title>
  6. </head>
  7. <body>
  8. <?php
  9.     //アクセスキー設定
  10.     $access_key_id = 'XXXXXXXXXXXXXXXXX';
  11.     $secret_access_key = 'XXXXXXXXXXXXXXXXXXXXXX';
  12.    
  13.     //Amazonサービス情報取得
  14.     include_once 'Services/Amazon.php';
  15.     $amazon = new Services_Amazon($access_key_id,$secret_access_key);
  16.     $amazon->setLocale('JP');
  17.    
  18.     //商品情報取得
  19.     $options = array(
  20.         'ResponseGroup' => 'ItemAttributes,SalesRank,Images');
  21.     $result = $amazon->ItemLookup('4839934444',$options);
  22.    
  23.     if (!PEAR::isError($result)){
  24.         //商品情報表示
  25.         echo "<img src='".$result['Item'][0]['MediumImage']['URL']."'><br />";
  26.         echo $result['Item'][0]['ItemAttributes']['Title'].'<br />';
  27.         echo $result['Item'][0]['SalesRank'].' 位 ('.date('Y/m/d H:i:s').')';
  28.     }else{
  29.         //エラー処理
  30.         $error_message = 'Amazonの情報取得に失敗しました';
  31.         if ($error = $amazon->getError()){
  32.             $error_message .= '（'.$error['Message'].'）';
  33.             $error_message .= '【Code:'.$error['Code'].'】';
  34.         }else{
  35.             $error_message .= '（'.$result->getMessage().'）';
  36.         }
  37.         echo $error_message;
  38.     }
  39. ?>
  40. </body>
  41. </html>

・アクセスキー（10行目,11行目）は「サービス開始準備」で取得したアクセスキーを指定してください。

・Amazonの何の商品情報を取得するかはItemLookupの第二引数のResponseGroupで指定します。

※Services_AmazonのItemLookupに関するドキュメント（英語）はこちら

PEAR::Services_Amazonを用いると取得した情報等はXMLではなく
連想配列で返されるのでPHPから操作するにはとても便利です。

実行結果

プログラム実行結果

活用サンプル例（おまけ）

弊社では、プログラムを定期実行して、取得したランキングを保存して
色々な形で簡単にAmazonランキングを把握できるようにしています。

レポートで推移を表示

レポートにすることで、過去のランキング変動がすぐに分かります。

Amazonランキングレポート

Twitterで自動的につぶやくbot

現在のランキングをすぐに把握することが出来ます。
タイムラインに流れてくるので、操作をするのさえ面倒くさい人にはおすすめ。

2010-02-16 20-36-27
※Amazonランキングつぶやきbotはこちら

とても簡単に、Amazonのリアルタイムの商品情報を取得でき、
活用することができるので、ぜひ試してみてください。


関連した記事： ]]> http://techblog.ecstudio.jp/tech-tips/amazon-api-ranking.html/feed 0 Google App Engineを使って無料でサイトを立ち上げる方法 http://techblog.ecstudio.jp/tech-tips/freewebsite-with-google-app-engine.html http://techblog.ecstudio.jp/tech-tips/freewebsite-with-google-app-engine.html#comments Sun, 07 Feb 2010 14:45:36 +0000 山本 正喜 http://techblog.ecstudio.jp/?p=858 Googleが提供する、Google App Engineというサービスを知っていますか？

Google App Engine

Amazon EC2などと同じで、Googleが用意するクラウドサーバー環境で
アプリケーション開発ができるというサービスです。
(レンタルサーバーのようなもの)

その大きな特徴は、なんといっても月間500万PV相当まで"無料"ということです。
※有料で制限を拡張することも可能

「App Engine は無料で始めることができます。最大 500 MB の永続性ストレージに加え、月間約 500 万ページ ビューに対応できる十分な CPU と帯域幅を、すべてのアプリケーションで完全に無料で利用できます。」
- Google App Engine公式ドキュメントより

月間500万PVというと、相当な人気サイトでも余裕でさばけるようなスペックです。
これが無料というのはスゴイ・・・。

もちろんGoogleが提供する環境なので、信頼性の高さ(落ちにくさ)は間違いなしです。

このGoogle App Engine(以下 GAE)、アプリケーション開発だけでしか
使えないと思われがちなのですが、実は設定を工夫すれば
通常のHTMLによるサイトを作って運用することも可能です。

多少初期設定の手順は複雑ですが、このスペックのサーバーを無料で
使用出来ることを考えれば試してみる価値はあるのではないかと思います。

Webサイトを立ち上げるまでの手順をまとめてみましたので、公開したいと思います。
※縮小してある画像はクリックして拡大できます

1.Google App Engineを登録する

Google App Engine 登録

まずは、Google App Engineに登録する必要があります。
Googleアカウント(GMAIL)が必要なので、
持っていない方は事前に作成してください。

下記のURLから登録できます。

https://appengine.google.com/

※Google Appsでも利用可能です。その場合は、

https://appengine.google.com/a/ドメイン名

から登録してください。

アカウントの登録ができたら、早速アプリケーションを作りましょう。
GAEにログインすると下記のような画面になります。

アプリケーションの作成

「Create Application」 をクリックします。
初回だけ、携帯メールでの認証が必要になります。

携帯認証

SMSと書いてますが、通常のメールアドレスで大丈夫です。

CountryにJapan、キャリアにdocomoなどを設定して、
Usernameのところにはメールアドレスを入力しましょう。

設定すると、携帯にメールが飛んできますので、
そのメール内にあるGoogle App Engine Codeを
フォームに入力すれば完了です。

認証が完了すれば、アプリケーションを作成できます。

アプリケーション作成フォーム

作成するアプリケーション(サイト)の情報を入力しましょう。
「Application Identifier」がアプリケーション一つ一つに割り当てられるサブドメイン名になります。
この部分は後から変更したり、削除することができないので注意！
ドメインを取得するつもりで設定しましょう。

タイトルは後からでも変更できます。

アプリケーション一覧

作成が完了しました。
いまのところ、最大10個まで無料でアプリケーションを作成できます。

これで、オンライン側の設定は完了です！

2.開発環境のセットアップ

GAEへファイルをアップロードするには、FTPソフトなどの代わりに
Googleが用意する開発環境(SDK)を使用します。

いくつかソフトをインストールする必要があるので、
下記の手順でインストールしてください。

1.Pythonをダウンロード (v2.6.4)

GAEで動くスクリプト環境のPythonをインスールします。
各OSにあったファイルをダウンロードしてください。
(Python 3.x.xではなく、2.x.xのバージョンを選んでください)

http://www.python.org/download/

Pythonのダウンロード

1.1 Pythonをインストール

Pythonのインストール

素直に「Next」を選んでいけばokです。

2.Google App Engine SDK をダウンロード

次にGAEの開発環境であるSDKをインストールします。

http://code.google.com/intl/ja/appengine/downloads.html

GAE SDKダウンロード

2.1 Google App Engine SDK をインストール

GAE SDKインストール

こちらも、そのまま「Next」を選べばokです。
これでGAEを使った開発環境のセットアップが完了しました！

3.Google App Engine Launcherを使ってファイルをアップロード

ではさっそく、先程インストールしたGoogle App Engine SDKを起動しましょう。

GAEランチャーの起動

スタートメニューから、
「Google App Engine Launcher」を選択します。

GAEランチャー

こんな画面が出てくればokです。
このアプリケーションを使ってファイルのアップロードなどを行います。
では、アプリケーションを追加してみましょう。

GAEランチャー アプリケーション作成

メニューの「File」から
「Create New Application..」をクリックします。

GAEランチャー アプリケーションの作成

「Application Name」に、最初にブラウザ側で作成した
アプリケーション名を入れます。
(Application Identiferの部分。サブドメインにあたるところです)

「Parent Directory」にはhtmlファイルなどを
入れるフォルダを指定します。
(指定したフォルダに、アプリケーション名のサブフォルダが作成されます)

作成すると、下部のボックスに表示されるようになります。

GAEランチャー アプリケーション選択

作成したアプリケーションを選択し、「Run」ボタンをクリックします。

GARランチャー アプリケーション起動

するとアプリケーションが起動します。
「Browse」ボタンを押すとローカル環境でテスト表示させることができます。
サーバーへのアップロードには、「Deploy」ボタンを使用します。

「Deploy」を押して、サーバーへアップしてみましょう。

デプロイ認証

Googleの認証を求められるので、Google App Engineに登録した
メールアドレスとパスワードを入力します。

GAEランチャー デプロイログ

認証に成功すれば、ファイルがサーバーへと自動的にアップロードされます。

http://[アプリケーション名].appspot.com

をブラウザで表示してみてください。
([アプリケーション名]の ところはApplication Identiferを入れてください)

Hello World!

と表示されていれば成功です！

4.Google App Engineを使ってWebサイトを立ち上げる

お待たせしました、ここからが本番です。
さきほどの様な要領でファイルをサーバーにアップロードできるのですが、
初期設定ではHTMLなどのファイルを上げても表示することができません。

アプリケーション開発用の設定になっているからなのですが、これを
Webサイト用の設定に書き換える必要があります。

では、Google App Engine Launcherで作成したアプリケーションの、
Parent Directoryで指定したフォルダの中にあるファイルをエクスプローラーで開いてください。

デフォルトのファイル

このような、3つのファイルがあるかと思います。
初期状態ではリクエストはすべてmain.pyというファイルで
処理されるような設定になっていますが、ここを変更して
HTMLファイルなどを自由に表示できるようにしてみます。

まず、HTMLファイルなどを入れるフォルダを作成します。

htdocsフォルダを作成

ここではサーバーの慣習にならって「htdocs」というフォルダを作りました。
（別のフォルダ名でも全然okです)

このフォルダの中に、アップしたいサイトのHTMLファイルや画像、
CSSファイルなどを入れておきます。

サイトのファイルを入れておく
次に、最初からある「app.yaml」 というファイルを編集します。
(メモ帳などのテキストエディタで開きます)

初期設定では

テキスト表示
  1. application: [xxxxxx]
  2. version: 1
  3. runtime: python
  4. api_version: 1
  5.  
  6. handlers:
  7. - url: .*
  8.   script: main.py

※[xxxxxx]の部分は、各アプリケーション名
こうなっていますが、これを

テキスト表示
  1. application: [xxxxxx]
  2. version: 1
  3. runtime: python
  4. api_version: 1
  5.  
  6. handlers:
  7. - url: /
  8.   static_files: htdocs/index.html
  9.   upload: /
  10. - url: /
  11.   static_dir: htdocs

この様に変更します。
(handlers: 以降の行を変更)

こう設定することで、htdocs/ 以下のフォルダを
Webサイトとして表示することができるようになりました。

例えば、

http://[アプリケーション名].appspot.com/page.html

↓
htdocs/page.html

と関連付けられ、サブフォルダがある場合でも

http://[アプリケーション名].appspot.com/image/logo.jpg

↓
htdocs/image/logo.jpg

と、同様に関連付けられるようになります。
アップしたいファイルを入れて、「Deploy」してみましょう！

完成！

お疲れ様でした！

あとはサイトの更新時にはhtdocsフォルダの中身を変更し、
随時Deployすればサーバーへアップロードできます。

このGoogle App Engineには独自ドメインを使用することもできるので、
本当にレンタルサーバー的に使用することができます。

GAEの詳しい使い方や、設定の詳細を知りたい方は
Googleのドキュメントを参照してください。

デベロッパー ガイド
http://code.google.com/intl/ja/appengine/docs/

ただ、GAEの欠点としてはPHPなどのプログラムを動かすことができません。
PythonやJavaのアプリケーションは動作しますが、
Googleの特殊な環境で動作するようになっていないといけません。

単純なお問い合わせフォームや注文フォームなどだけの場合は、
Googleドキュメントのフォーム機能を使うことをオススメします。
(とても簡単にお問い合わせフォームなどを組み込めます)

参考リンク：http://google-mania.net/archives/1039

またGAEを使ってみて面白いことがわかればブログ記事にしていきたいと思います。 :)

ご要望やご質問、感想などがあれば私のtwitterまでどうぞ！
(http://twitter.com/msk_masaki)

[告知]
EC studioで本を出版することになりました！
EC studioでiPhoneとtwitterを全社導入した時の事例や、
Google Appsの活用法などを詳しくまとめています。
Google 辻野社長との対談も収録！

「iPhoneとツイッターで会社は儲かる」

詳しくはこちらの詳細ページをご覧下さい！


関連した記事： ]]> http://techblog.ecstudio.jp/tech-tips/freewebsite-with-google-app-engine.html/feed 7 Eclipse3.5PDT＋Zend Debugger＋XAMPPでラクラクPHPデバッグ http://techblog.ecstudio.jp/tech-tips/devenv-tips/zend-debugger.html http://techblog.ecstudio.jp/tech-tips/devenv-tips/zend-debugger.html#comments Fri, 05 Feb 2010 01:50:45 +0000 池田 雅春 http://techblog.ecstudio.jp/?p=589 PHPでデバッグする際に、「echo」や「print_r」を大量に書いていたりしませんか？
そんな方達のために、EclipseとZend Debuggerを使った簡単デバッグ方法について説明したいと思います。

[前提条件]
OS : Windows
EClipse3.5(PDT)日本語化パッチ適用、およびXAMPPをインストール済み

Zend Debuggerの設定

(1) 公式サイトから「ZendDebugger-x.x.x-cygwin_nt-i386.zip」をダウンロードし、適当なディレクトリに展開する
※「x」の部分はバージョン

(2)「xampp\php」以下に「ZendDebugger」フォルダを作成し、その中に先ほど解凍したフォルダ内の「x_x_x_comp\ZendDebugger.dll」をコピーする
※「x」の部分はバージョン。PHP5.2環境の場合は「5_2_x_comp」フォルダからコピーする。

(3)「xampp\apache\bin\php.ini」を編集する

[Zend]
zend_extension_ts= "C:\xampp\php\ZendDebugger\ZendDebugger.dll"
zend_debugger.allow_hosts= 127.0.0.1/192.168.0.*
zend_debugger.deny_hosts = all
zend_debugger.expose_remotely = always

※ディレクトリパスやIPは状況に応じて変更してください。
※もともと[Zend]内に記述されていた項目は状況に応じてコメントアウトしてください

(4)インストール確認
phpinfo()で「Zend Debugger」という文字列が表示されている事を確認

phpinfo

Eclipseでの実行手順

1.「実行」→「デバッグの構成」を選択し、「PHPWebページ」から新しいデバッグの設定を行う

new_debug

2.デバッグの詳細な設定を行う

debug_detail

名前 ： 任意の名称
サーバー・デバッガー ： Zendデバッガー
PHPサーバー ： Default PHP Server
ファイル ： 実行ファイルのパスを入力

2.「デバッグ」ボタンをクリックし、ソースの最初の行にカーソルが合うことを確認する

debug_start

※ブレークポイントは行数の左側をダブルクリックすると作成できます

4.ステップ実行する
[デバッグウインドウ]
緑矢印　：　次のブレークポイントまで進む
赤四角　：　デバッグを中止する

debug_button

[ファンクションキー]
F5　：　メソッドの中へ進む
F6　：　１行進む
F8　：　次のブレークポイントまで進む

[変数ウインドウ]

debug_variable
変数の中身を確認できます

Zend Debuggerを使うと、処理のどの部分を通っているのか一目瞭然、
echoなどのコマンドも不要なのでデバッグ効率も上がります。

設定も簡単なので一度試してみてはいかがでしょうか？


関連した記事： ]]> http://techblog.ecstudio.jp/tech-tips/devenv-tips/zend-debugger.html/feed 0 twitterの興味のあるつぶやき(ツイート)を自動で収集する仕組みを作ってみました http://techblog.ecstudio.jp/tech-tips/autotweetcollector.html http://techblog.ecstudio.jp/tech-tips/autotweetcollector.html#comments Tue, 08 Dec 2009 06:55:47 +0000 山本 正喜 http://techblog.ecstudio.jp/?p=545 twitterを使っている時に、自分が興味のあるつぶやきが
フォローや検索をしなくても勝手にタイムラインに
流れてきたらなぁ・・・と思ったことはありませんか？

私もtwitterを使ってよくEC studio関連のことや、
新しく出したアクセス解析サービスについてのつぶやきが見たくて、
毎回検索していましたが、面倒になったので
自動で集めてくる仕組みを作ってみました！

今回の完成品

今回の完成品です。

自動つぶやき収集ツール

専用のアカウントを作成し、そのアカウントが
興味のあるキーワードを含んだつぶやきをtwitter全体から検索し、
見つけたら自動でつぶやくようにしてみました。

この画像の例で言うと、EC studioという文字が
含まれるつぶやきがあれば自動でつぶやいてくれます。
(ecstudioでも、ECスタジオでも、イーシースタジオでもok)

そのアカウントさえフォローしておけば、
自分のタイムラインにどんどん流れてくるというワケです。

つぶやいた人のアカウント名がわかるように、
先頭に(@アカウント名) で入るようにしています。

@付きなのでクリックすればその人をすぐに
フォローすることもできます。

※非公開アカウントにして、@付きのつぶやきでも
相手の迷惑にならないようにしています。

仕組み

使っているツールは下記の三つです。
(全て無料です。感謝！)

・Twitter Search
・Yahoo! Pipes
・twitterfeed

これらのツールを組み合わせて作ります。

仕組みとしては、Twitter Searchで
興味のあるキーワードを検索したフィードを生成し、
そのフィードをYahoo! Pipesで加工し、
twitterfeedでフィードをつぶやかせています。

※Twitter Searchの検索フィードではつぶやいた人の
アカウント名がわからないので、Yahoo! Pipesを使って
フィードのタイトルにつぶやいた人のアカウント名が
入るようにしています。

作り方１：Yahoo!Pipesでフィードを作る

まず、Yahoo!Pipesを使ってフィードを生成します。

つぶやき収集のPipes

Yahoo!Pipesをイチから組むのはなかなか大変なんですが、
私が作ったサンプルのPipesがあるのでそれを
使えばとても簡単に作成することができます。

※Pipesを「Clone」すればカスタマイズできますので
自分仕様にしたい場合はどうぞ！

http://pipes.yahoo.com/msk_masaki/twitsearch

上記のYahoo!Pipesのページを開いて、
興味のあるキーワードを入力して「Run Pipe」を押して、
結果を確認してみてください。

Yahoo!Pipesで検索

キーワードは、OR つながりで
複数入力することもできます。
"" でくくると、スペースがあっても単語が分割されません。

例：
"EC studio" OR ecstudio OR ECスタジオ OR イーシースタジオ

結果が良さそうであれば、
「Get as RSS」でフィードを取得します。

Get RSS

※このフィードをRSSリーダーに登録しておいても便利です！

ここで表示されるフィードのURLをコピーしておいてください。

例：
"EC studio" OR ecstudio OR ECスタジオ OR イーシースタジオ のフィード

作り方２：twitterfeedでつぶやかせる

次に、Yahoo!Pipesで生成したフィードを使って、
twitterfeedで自動でつぶやく設定をします。
(FeedTweetではURLの文字数の関係で出来ませんでした)
※できるようになったそうです！ (12/9)

twitterfeedを設定する前に、自動でつぶやくためのtwitterアカウントを
新規で取得してください。

http://www.twitter.com

作成するアカウントは、必ず非公開にするようにしてください。

非公開に設定

twitterの右上にある「設定」から設定できます。

専用アカウントを作成したら、twitterfeedでアカウントを作成してください。

http://twitterfeed.com

作成したら、つぶやかせたいアカウントと連携させます。

「Create New Feed」から

OAuthを使ってtwitterアカウントと連携させます。
(※先程作ったtwitterアカウントでログインしておきましょう)

twitterfeed認証

連携ができたら、フィードの設定を行います。

twitterfeed設定

Post Contentは「title only」で、
Post Linkのチェックを外しておいてください。

あとは設定を保存しておけば、自動でつぶやいてくれます！

twitterfeedは一定時間ごとに更新されますので、
つぶやきがあってからしばらくタイムラグがあります。

作り方３：メインのアカウントでフォローする

これで興味のあるキーワードに関係するつぶやきを
自動でつぶやくアカウントができたので、あとは
自分のメインのアカウントでフォローすればOKです。

自分のタイムラインに流れてくるのはとても便利です！

他の人と共有するのも、フォローしておいてもらうだけ
なので簡単です。

ぜひ活用してみてください！

番外編： ツイートメールを利用する

気になるアカウントやキーワードをメールでまとめて送信してくれる、
ツイートメールというサービスをEC studioで開発しました！

http://www.tweet-mail.jp

ツイートメール

twitterアカウントが不要で、1日分がまとまってメールで送られてくるので
とても便利です。私も使っています！

※よろしければ私のtwitterアカウントも
フォローしてください :)
http://www.twitter.com/msk_masaki


関連した記事： ]]> http://techblog.ecstudio.jp/tech-tips/autotweetcollector.html/feed 9 jQueryとPHPでLinuxのtailコマンドを実装する http://techblog.ecstudio.jp/tech-tips/phptail.html http://techblog.ecstudio.jp/tech-tips/phptail.html#comments Tue, 06 Oct 2009 09:40:17 +0000 山本 正喜 http://techblog.ecstudio.jp/?p=522 Linuxにはtailというファイルの末尾10行程度を表示する、
ログファイルのチェックなどに便利なコマンドがあります。

オプションで一定間隔で常に末尾10行の表示を
更新し続けることもでき、ログの監視などに使えます。

Linux tailコマンド

ただ、とっても便利でサーバー管理者御用達のこのコマンド、
当然ながらシェルでログインできなくては使えません。。

レンタルサーバーなどでシェル権限がない場合も多いですし、
何よりもっとカンタンにブラウザから見たい！と思いませんか？

業務上の都合もありとっても欲しくなってので、作っちゃいました。

jQueryとPHPを使えば、思った以上にサクッと作れてしまったので、
技術ブログでソースコードや解説も含めて公開します。
(jQuery、メチャクチャ便利！です)

jQuery + PHPでtailを作る！

まずは今回の完成品です。

phptail

シンプルですね。
「TAIL」ボタンを押すとtail実行、
「STOP」ボタンを押すと更新が止まります。

実際に実行するとこうなります。
※サンプルとしてこのプログラム自体をtailしました

phptail 実行

Ajaxで実装されており、2秒ごとに表示が更新されます。

では、ソースコードです。

テキスト表示
  1. <?php
  2.     header('Content-type:text/html; charset=UTF-8');
  3.    
  4.     //対象のファイルパス
  5.     $logpath = 'logfile.log';
  6.     //表示する末尾の行数
  7.     $lines = 30;
  8.     //更新インターバル (ミリ秒)
  9.     $interval = 2000;
  10.    
  11.     if (isset($_GET['load'])){
  12.         echo 'file:'.basename($logpath).' reload:'.date('H:i:s').'<hr size="1"/>';
  13.        
  14.         if (!file_exists($logpath)){
  15.             die($logpath.'は存在しません');
  16.         }
  17.        
  18.         foreach (read_tail($logpath,$lines) as $i => $line){
  19.             $line = rtrim($line,"\r\n");
  20.             echo strtr(htmlspecialchars($line,ENT_QUOTES),array("\t" => '&nbsp;&nbsp;&nbsp;&nbsp;'));
  21.             if ($i <($lines - 1)){
  22.                 echo '<br />';
  23.             }
  24.         }
  25.        
  26.         exit;
  27.     }
  28.    
  29. /**
  30. * ログをファイルから指定行数読み出す
  31. *
  32. * tail function by flash tekkie
  33. * http://tekkie.flashbit.net/php/tail-functionality-in-php
  34. *
  35. * @param string $file ファイルパス
  36. * @param int $lines 行数
  37. * @return array 行ごとの配列
  38. */
  39. function read_tail($file, $lines) {
  40.     //global $fsize;
  41.     $handle = fopen($file, "r");
  42.     $linecounter = $lines;
  43.     $pos = -2;
  44.     $beginning = false;
  45.     $text = array();
  46.     while ($linecounter> 0) {
  47.         $t = " ";
  48.         while ($t != "\n") {
  49.             if(fseek($handle, $pos, SEEK_END) == -1) {
  50.                 $beginning = true;
  51.                 break;
  52.             }
  53.             $t = fgetc($handle);
  54.             $pos --;
  55.         }
  56.         $linecounter --;
  57.         if ($beginning) {
  58.             rewind($handle);
  59.         }
  60.         $text[$lines-$linecounter-1] = fgets($handle);
  61.         if ($beginning) break;
  62.     }
  63.     fclose ($handle);
  64.     return array_reverse($text);
  65. }
  66. ?>
  67. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  68. <head>
  69. <meta name="robots" content="noindex,nofollow" />
  70. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
  71. <script type="text/javascript">
  72. var timer = null;
  73. function start_tail(){
  74.     if (timer){
  75.         clearInterval(timer);
  76.     }
  77.     $('#status').html('running...');
  78.     timer = setInterval(run,<?php echo $interval ?>);
  79. }
  80.  
  81. function run(){
  82.     $('#console').load('?load=1&m=' + new Date().getTime());
  83. }
  84.  
  85. function stop(){
  86.     clearInterval(timer);
  87.     $('#status').empty();
  88. }
  89. </script>
  90. <style type="text/css">
  91. #console {
  92.     width:800px;
  93.     height:500px;
  94.     overflow:scroll;
  95.     border:1px solid #999999;
  96.     font-size:12px;
  97.     font-family:consolas;
  98. }
  99. </style>
  100. </head>
  101. <body>
  102. <input type="button" onclick="start_tail()" value="TAIL"> <input type="button" onclick="stop()" value="STOP"> <span id="status"></span><br />
  103. <pre id="console"></pre>
  104. </body>
  105. </html>

これだけ！です。
外部ファイルも不要なので、このコードを
phptail.phpなどで保存して、実行すればokです。(文字コードはUTF-8で)

たった100行ぐらいでAjaxを使ったtailを実装できちゃうところが、
jQueryとPHPの素晴らしいところですね。

では、ソースコードの解説をしてみます。

PHPの処理を作る

今回のキモはなんといってもtail部分。
ファイルを末尾から読み出すのは結構難しいです。

こういった処理を自分で作ってもいいですが、
海外サイトに良さそうなコードがあったのでお借りしましょう。

「php tail」でGoogle検索すればすぐ見つかりました。
flash tekkie » Blog Archive » tail functionality in PHP

今回はここのread_file関数を使うことにします。
read_fileだと少々わかりにくいのでread_tailに変更しました。

テキスト表示
  1. function read_tail($file, $lines) {
  2.     //global $fsize;
  3.     $handle = fopen($file, "r");
  4.     $linecounter = $lines;
  5.     $pos = -2;
  6.     $beginning = false;
  7.     $text = array();
  8.     while ($linecounter> 0) {
  9.         $t = " ";
  10.         while ($t != "\n") {
  11.             if(fseek($handle, $pos, SEEK_END) == -1) {
  12.                 $beginning = true;
  13.                 break;
  14.             }
  15.             $t = fgetc($handle);
  16.             $pos --;
  17.         }
  18.         $linecounter --;
  19.         if ($beginning) {
  20.             rewind($handle);
  21.         }
  22.         $text[$lines-$linecounter-1] = fgets($handle);
  23.         if ($beginning) break;
  24.     }
  25.     fclose ($handle);
  26.     return array_reverse($text);
  27. }

この関数に読み出したいファイルパスを渡して、
それを一定秒数ごとに表示してやればokですね。

Ajaxで定期的に読み込む

Ajaxというと難しいイメージがありますが、
jQueryを使えばほんとにカンタンに実装できてしまいます。

今回は
「TAIL」ボタンにstart_tail()を、
「STOP」ボタンにstop()を、
onclick属性でそれぞれ割り当てました。

JavaScriptの関数コードは

テキスト表示
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
  2. <script type="text/javascript">
  3. var timer = null;
  4. function start_tail(){
  5.     if (timer){
  6.         clearInterval(timer);
  7.     }
  8.     $('#status').html('running...');
  9.     timer = setInterval(run,<?php echo $interval ?>);
  10. }
  11.  
  12. function run(){
  13.     $('#console').load('?load=1&m=' + new Date().getTime());
  14. }
  15.  
  16. function stop(){
  17.     clearInterval(timer);
  18.     $('#status').empty();
  19. }
  20. </script>

これだけです。
はじめにajax.googleapis.comからjQueryのライブラリを読み込みます。

これはGoogleが無償で提供しているGoogle AJAX Libraries APIというもので、
Googleがホストしてくれている様々なJavaScriptライブラリを
自由に使ってかまわないというものです。

http://code.google.com/intl/ja/apis/ajaxlibs/

これのおかげで、jquery.jsなどを別途用意する必要がありません。
(Googleに感謝！)

次に、start_tailを見てみると、
setIntervalでrunという関数を定期的に実行しています。

このrunという関数が実行される度に、Ajaxで先ほどの
PHPで作ったtailの処理が実行されます。

テキスト表示
  1. $('#console').load('?load=1&amp;m=' + new Date().getTime());

ここが、Ajaxです。なんと1行！

これは、id="console"のタグの中身に対して、
'?load=1&m=タイムスタンプ' のURLの実行結果を読み込みます。

?より前が省略されているのは、自分自身(php)を実行するためです。
?でload=1というパラメータをつけることにより、
PHP側で、

テキスト表示
  1. if (isset($_GET['load'])){
  2.         echo 'file:'.basename($logpath).' reload:'.date('H:i:s').'<hr size="1"/>';
  3.        
  4.         if (!file_exists($logpath)){
  5.             die($logpath.'は存在しません');
  6.         }
  7.        
  8.         foreach (read_tail($logpath,$lines) as $i => $line){
  9.             $line = rtrim($line,"\r\n");
  10.             echo strtr(htmlspecialchars($line,ENT_QUOTES),array("\t" => '&nbsp;&nbsp;&nbsp;&nbsp;'));
  11.             if ($i <($lines - 1)){
  12.                 echo '<br />';
  13.             }
  14.         }
  15.        
  16.         exit;
  17.     }

このように、Ajaxから呼ばれた場合のみに
tail処理を行わせてexitさせる　ということをしています。

Ajax用に別のphpを用意してもいいのですが、
簡単な処理であれば自分自身を呼び出す方が
ソースコードもまとまり便利です。

"m=タイムスタンプ"の部分は、IEの場合
Ajaxで同じURLを連続して読み出した場合に
キャッシュされてしまうため、URLを毎回変化させています。
PHP側ではこのmの値は全く使用しません。

今回のtailではブラウザ互換の都合上、
タブはスペース4つに置換されるという仕様にしています。
(まあ、問題児はもちろんIEなんですが、、)

IE8,FireFox3.5,Chrome3 で動作確認しています。

問題がある場合はソースを修正してください。

PHPで作ることの意味、応用アイデア

以上でソースコードの説明は終わりです。

とても短いソースコードなので、業務の用途にあわせて
改変していただければなと思います。

今回はとてもシンプルにただ1つのファイルを監視するだけですが、
PHPを改造すればローテートされる複数のログファイルを横断したり、
正規表現で抜き出したり、自由自在にファイルを
監視するスクリプトを作れるのではないかと思います。

ただ注意しなければいけないのが、監視対象のファイルを
GET値などで指定できるようにすると、セキュリティ上
非常に危ないのでそういった改造をする場合は
注意するようにしてください。

このソースコードは自由に使用していただいて構いませんが、
各自の自己責任での使用をお願いします！ :)


関連した記事： ]]> http://techblog.ecstudio.jp/tech-tips/phptail.html/feed 3 開発者が語るWeb Analystの活用方法 http://techblog.ecstudio.jp/tech/introducuction-web-analyst.html http://techblog.ecstudio.jp/tech/introducuction-web-analyst.html#comments Tue, 16 Jun 2009 17:45:34 +0000 山本 正喜 http://techblog.ecstudio.jp/?p=488 現在EC studioでは、7月にデモ提供を開始する予定の
新アクセス解析「Web Analyst」の開発を行っています。

リリース間近！ということもあって開発チームの
メンバーは大わらわで各種調整や開発を行っています。
(ブログの更新が最近できてなくて申し訳ないです・・)

さて、EC studioの社長ブログ、デザインブログで

社長に見せるアクセス解析ツール - Web Analyst（ウェブアナリスト）

Web Analyst（ウェブアナリスト）を導入する３つの理由

この様にコンセプトや特徴などがすでに紹介されていますので、
今回は技術ブログならではということで、技術的な視点も交えて
Web Analystの背景や活用方法などをご紹介したいと思います。

そもそもアクセス解析とは何か？

アクセス解析はもともと、サーバー管理者が
サーバーの負荷状況を分析するための管理ツールでした。

・どれくらいのリクエスト数があるのか？
・どれくらいのデータ量を転送してるのか？
・エラーは起きていないのか？
・不正なアクセスはないか？

など、詳細なデータを記録しサーバーを
監視するための技術者の為のツールです。

ここからWebの発展に伴い、Webサイトの閲覧状況を
解析するために様々なレポートなどが追加されていきました。

もともとがサーバー監視の為のツールとして発展してきたので、
いかに大量のデータを収集できるか、いかに多くの指標を組み合わせて
様々な角度から分析できるかが重視されてきました。

アクセス解析、活用できていますか？

しかし、この様な膨大なデータと数多くのレポートからなるアクセス解析を、
日々の業務に追われる中で分析するのは難しくないでしょうか？

アクセス解析を導入されている方は多いかと思いますが、
初めは面白がっていろいろなレポートを一通り見るのですが、
あとはアクセス数のグラフと、検索キーワードをたまに見るだけ・・・
なんてことになっていませんか？

アクセス解析の目的は、ただアクセス数などの現状を把握するだけでなく、
よりアクセスを増やすには、より注文を増やすには
どういった対策をすればいいのかを分析することです。

アクセス解析のデータの中には、

・どこからのアクセスが注文につながりやすいのか？
・どんなキーワードが狙い目なのか？
・どのページを改善すれば注文が増えるのか？

などの知りたいデータ(宝の山)が多数眠っています。

もっともっと、アクセス解析は成果につながる
使い方ができるはずです。

Web Analystがアクセス解析を再定義する！

EC studioで開発中の「Web Analyst」では、
いままでのアクセス解析ソフトの常識を一切考えずに、
まったくゼロからアクセス解析というものを考え直しました。

数ヶ月以上もの間、Webサイト運用に関わるメンバーを集め、
「アクセス解析のあるべき姿」を徹底的に議論しました。

そこで出てきたのが、
「成果指向のアクセス解析」
というコンセプトです。

Webサイトを運営していく中で、一番知りたい情報は
アクセス数でも、ユーザー数でもなく、
注文や資料請求、お問い合わせなどの「成果」数です。

従来のアクセス解析では、サイト全体すべてのアクセスを取り扱うため、
何が重要な情報なのかわかりづらくなっていました。
たとえアクセスが大量に来るキーワードがあったとしても、
それが成果につながっているとは限らないのです。

Web Analystではアクセス数はあくまでも補助的な指標であり、
すべてのレポートは成果数をもとにまとめられていきます。

成果を軸とすることで、

・この期間内に成果がどのくらいあったのか？
・どこからの誘導元が成果につながりやすいのか？
・どのキーワードが成果につながりやすいのか？
・何回目の訪問が成果につながりやすいのか？
・何曜日の訪問が成果につながりやすいのか？

などを直接的に知ることができます。

Web Analystの機能紹介

下記が、実際のWeb Analystの画面になります。
(※画面は開発中のもので、実際には異なる場合があります)

成果レポート

この画面の上部にある、

成果タブ

このタブが成果の種類を表しています。
ここを切り替えることで、レポート全体が
対象の成果のデータへと切り替わります。

メイングラフ

一番大きなこのグラフも、上の大きな枠にある線(白抜きの点)が成果数、
下の小さな枠にある線が訪問数を表しています。
(あくまでも「成果」が主役！)

小レポート

もちろん、通常のアクセス解析にあるような
キーワードや、誘導元、訪問回数や地域の解析などもできます。
(これらもすべて成果が多い順に表示されます)

ピックアップ
「自動的に変化要因を検出するピックアップ機能」

大きな変化には"自動で"グラフに旗が立ち、その要因が表示されます。
要因を分析するために様々なレポートを比較する必要はありません。

メモ
「施策を自由に記録できるメモ機能」

サイト運用で行った改善や、プロモーション施策などを
自由にメモとして残すことができます。
各担当者間での情報共有や、過去の分析などに便利です。

Web Analystの3つのレポート

Web Analystでは、レポートはたった3つしかありません。
「あのデータどこで見るんだっけ？」
とあちこちツール内を探し回る必要はありません。

レポート１：期間内の成果状況を把握する「成果レポート」

成果レポート

で日々の成果状況をチェックします。
任意の期間を指定したり、過去との比較も可能。

レポート２：月単位で目標管理を行う「目標レポート」

目標レポート

で月々の目標に対しての進捗を管理します。
過去の実績に基づく予測値も算出されるため、
目標達成する為の施策を打つタイミングを逃しません。

レポート３：成果を上げる対策を立てる「対策レポート」

対策レポート

これがWeb Analystの目玉機能！
検索エンジンのキーワードや誘導元サイトを、

・成果が出ている領域 (訪問数・成果数がともに多い)
・成果が出やすい領域 (訪問数は少ないが成果数が多い)
・成果が出にくい領域 (訪問数は多いが成果数が少ない)
・潜在的な領域 (訪問数・成果数がともに少ない)

の四つの領域に分類します。

「成果が出やすい領域」にあるものはどんどん投資を！
関連するコンテンツを充実させましょう。
「成果が出にくい領域」にあるものは見直しを！
広告の場合は費用対効果が悪いかも？

Web Analystの活用方法

Web Analystは様々な立場にいる方が
共通で使えるサービスを目指しています。

経営者・経営幹部の方

成果に対して責任を持つ経営層の方は、
「目標レポート」を中心に活用いただけます。

年度計画などから策定した月の目標を設定し、
定期的に進捗をチェック。
目標達成の予測値に基づいて、施策をご検討ください。

各担当者が行った施策などは
「メモ機能」に記録されていくので、
状況把握も簡単に行うことができます。

マーケティング担当の方

プロモーション運用に対して責任を持つ
マーケティング担当の方は、
「対策レポート」を中心に活用いただけます。

PPCなどの各種プロモーションの効果を、
キーワード単位で対策レポートで分析でき、
ニッチなキーワードや効率のいいキーワードの
発見などにもお使いいただけます。

PPC分析には面倒な設定は不要。
AdwordsやOvertureの管理画面にある
トラッキングURL設定をオンにするだけで
自動的に自然検索とキーワード広告を
分類することができます。

プロモーション施策を行った場合には
もちろん「メモ機能」でメモを！

Webサイト担当者の方

日々のコンテンツ管理やサイト運用に対して責任を持つ
Webサイト担当者の方には、
「成果レポート」と「対策レポート」を
中心に活用いただけます。

成果レポートで直近の成果状況の変化を素早くとらえ、
要因に対して対策を行うことができます。

対策レポートでは「成果の出やすい領域」にある
キーワードなどを参考に、コンテンツ拡充を
行っていくと成果の出やすいサイトに改善できます。

サイトの改善を行ったらもちろん「メモ」を！

Web Analystの今後？

長々とご紹介しましたが、なんといっても
まだWeb Analystはリリースされておりません。。。

全くの新しいコンセプトで開発しておりますので、
7月からのデモアカウントでのフィードバックを元に
徹底して機能の改善・ブラッシュアップを
行いたいと思っております。

少しでもご興味を持っていただけましたら、
ぜひWeb Analystデモアカウントを申し込んでいただき、
ご意見をいただければと思っています。

デモアカウントの申し込みはこちらからどうぞ！


関連した記事：
  • 関連する投稿はありません。
]]> http://techblog.ecstudio.jp/tech/introducuction-web-analyst.html/feed 0