EC studio 技術ブログ http://techblog.ecstudio.jp 株式会社EC studioの技術ブログ Tue, 24 Apr 2012 01:34:56 +0000 ja hourly 1 http://wordpress.org/?v=3.3.1 チャットワーク開発の裏側 http://techblog.ecstudio.jp/tech/backstage_of_chatwork.html http://techblog.ecstudio.jp/tech/backstage_of_chatwork.html#comments Mon, 23 Apr 2012 11:34:16 +0000 山本 正喜 http://techblog.ecstudio.jp/?p=1414 大変ご無沙汰な技術ブログ更新となってしまいました。
振り返ってみると、前回の記事がもう約2年前！
ブログ記事を楽しみにしていただいていた方には申し訳ない限りです。

この2年間、何をやってたかというと、
「チャットワーク」というサービスの開発に全社を挙げて取り組んでいました。

チャットワークロゴ

チャットワークはおかげさまで2011年3月1日のリリース以来、
1年で6万ユーザーを突破し現在も順調に成長を続けています。

そして今年の4月1日に、創業から12年使用し続けてきた
「株式会社EC studio」という社名を「ChatWork株式会社」へと
変更することを発表しました。
（※エイプリルフールに発表しましたが、本当です＾＾；
変更の実施は6月ごろを予定）

それなりに親しんでいただけていた EC studio という社名を
変更するのは勇気のいることでしたが、チャットワークというサービスには
それだけの可能性があると感じ、不退転の覚悟で決断しました。

今回は、チャットワーク開発の裏側というところで、この2年を振り返りながら
チャットワークを開発するまでの過程や、開発したなかで得たノウハウや
開発手法などをまとめて記事にしたいと思います。

開発のきっかけ

もともと EC studio では、7年ほど前から社内のコミュニケーションに
Skypeのテキストチャットをメインで使っていました。

Skypeのグループチャット機能は非常に使い勝手がよく、
部署ごとやプロジェクトごとに多数のグループチャットを作って
メーリングリストがわりに運用してきました。

ただ、長年使っているとSkypeチャットには下記のような問題がありました。

・双方がオンラインでないとメッセージが届かない（時間差で届くことも・・）
・チャットログの横断検索ができない
・PCとノートを使い分けるとチャットログが分散する
・スマートフォン版のテキストチャットの使い勝手が非常に悪い

これらの不満をかかえながらも、様々なサービスを試しましたが
代替できるようなサービスはありませんでした。

特に、GoogleからリリースされたGoogle Waveには非常に期待していたのですが、
時系列でメッセージが上から下へ流れていくという考え方がなく、
どこが新しい発言かわかりにくい・雑談が流れずずっと残ってしまう、など
チャットとしての利用は厳しいと判断しました。。。

もう待っていても自分たちの欲しいサービスは出てこないだろうと思い、
それならば自分たちで作ってしまおうと、開発を決心しました。

チャットワークの開発コンセプト

チャットワークの開発にあたって、技術的な開発コンセプトは大きく2つありました。

1. デスクトップアプリと遜色ない操作感を実現する。

Skypeチャットやメッセンジャーの優れている点の一つが、その軽快な操作性です。

リアルタイムに受信されるメッセージを、多数のチャットルームを
切り替えながら処理していくには、いちいち画面を読み込みなおしていては苦痛です。

GMailの様に、画面の読み込みがないフルAjaxでの開発を選択しました。

2. マルチデバイス対応。PCでもスマートフォンでも使いやすく。

チャットワークを開発する大きな動機の一つがモバイル対応です。

iPhone支給制度により全スタッフがスマートフォンを持つ環境はあったものの、
Skypeのスマートフォン版はPCで受信したものとログが別管理になっており、
PCで読んだログも未読のままになっていたり、過去のチャットログが遡れなかったりと
ビジネスで使うには実用的ではありませんでした。

データをクラウド化することで、PCでもスマートフォンでも同じデータを閲覧でき、
未読・既読の状態も完全に同期し、使い勝手の良いアプリの開発を目指しました。

デスクトップアプリと遜色ない操作感を実現するために

チャットワークはフルAjaxアプリケーションとして開発されているので、
大部分のコードがJavaScriptにより開発されています。

2012年4月現在のコード規模はフレームワーク、ライブラリ、HTML/CSSを
のぞくと大体JavaScriptで約4万行ほど、サーバーサイド(PHP)のコードは
約2万行ほどになります。

さすがに単体アプリケーションとしてこの規模のJavaScriptコードを
書いたのは初めてであり、PHPを中心とした従来のWebアプリケーションの
開発とは全く異なるノウハウが必要でした。

大規模JavaScriptの開発ノウハウについてはあまりWebにも
記事化されたものは少なく、まだベストプラクティスも
固まっていない状態かと思います。

あくまでもEC studioで採用したやり方ですが、うまくいった手法をご紹介します。

オブジェクト指向で書く

チャットワークはほとんどの処理をJavaScriptで行う必要があり、
コード規模が大きくなることが予想されたので、
はじめからオブジェクト指向で開発を行いました。

ただ、JavaScriptは文法的に非常に自由な言語なので、
オブジェクト指向といっても様々な書き方ができてしまいます。

ここはかなり悩みましたが、EC studioの技術部で慣れているPHPに
できるだけ近い書き方ができるよう、クラスベースに似せた
コーディング手法を採用することにしました。

例えば、下記のような書き方です

テキスト表示
  1. function MyClass(){
  2.     var self = this; //自己参照にはself変数を用いる
  3.    
  4.     //プライベートプロパティ
  5.     var private_prop = ‘aaa’;
  6.     //パブリックプロパティ
  7.     self.public_prop = ‘bbb’;
  8.  
  9.     //プライベートメソッド
  10.     var privateMethod = function(){
  11.         //something
  12.     };
  13.  
  14.     //パブリックメソッド
  15.     self.publicMethod = function(){
  16.         alert(self.public_prop);
  17.     };
  18. }
  19.  
  20. //インスタンスの作成
  21. var MyObj = new MyClass();

この書き方に統一することで、PHPは得意だけどJavaScriptは経験が
少ないという開発メンバーでも、比較的すぐにJavaScriptのコーディングに
なじむことができました。（習得の容易さを優先しました）

JavaScript独特のクセのあるthisの挙動にも悩まされずすみます。

※この書き方については、過去に「PHPエンジニアのためのオブジェクト指向JavaScriptの書き方」という記事でまとめています。

ただ、この書き方では1つのクラスで複数のインスタンスが生成されるような場合に、
メソッドが共通化されずメモリ的にもったいないので、複数のインスタンスが
生成されるようなクラスの場合は、prototype継承を使った書き方を採用しています。

1ファイル、1クラスで書く

PHPでもそうしているのですが、JavaScriptでも クラス名.js というファイルに
そのクラス名のクラスを記述しています。

クラスごとにファイル

こうすることで、ソースコードの見通しが非常によくなります。

ただし、JavaScriptにはPHPのrequireのように、
別のソースコードを動的に読み込む仕組みがありません。
なので、この手法でファイルを作っていくとソースコードの読み込みは

テキスト表示
  3.    <script type=”text/javascript” src=”Class1.js”></script>
  4.    <script type=”text/javascript” src=”Class2.js”></script>
  5.    <script type=”text/javascript” src=”Class3.js”></script>
  6.    <script type=”text/javascript” src=”Class4.js”></script>
  7.    <script type=”text/javascript” src=”Class5.js”></script>
  8.    <script type=”text/javascript” src=”Class6.js”></script>
  9.    …..以下続く

なんてことになってしまいます。
ブラウザはscriptタグのソースを順番に読み込んでいくので、
アプリケーションのロード時間が長くなってしまいます。

これでは問題なので、JavaScriptファイルを1つのファイルにまとめる
ビルドツールを自作し、本番リリース時にはそちらのファイルを
読み込むような仕組みにしました。

テキスト表示
  1. <html>
  2.  <head>
  3.    <?php if ($local){ //開発時 1つずつ読み込む ?>
  4.    <script type=”text/javascript” src=”Class1.js”></script>
  5.    <script type=”text/javascript” src=”Class2.js”></script>
  6.    <script type=”text/javascript” src=”Class3.js”></script>
  7.    <script type=”text/javascript” src=”Class4.js”></script>
  8.    <script type=”text/javascript” src=”Class5.js”></script>
  9.    <script type=”text/javascript” src=”Class6.js”></script>
  10.    …..以下続く
  11.    <?php }else{ //本番時 all.jsにまとめる ?>
  12.    <script type=”text/javascript” src=”all.js”></script>
  13.    <?php } ?>

こんな感じですね。こうすることで、
開発時にはビルドの手間が不要になり効率よく開発でき、
本番時には読み込みの早いビルド版を使用できます。

ビルドツールの仕組みは単純で、読み込ませたい順番に
JavaScriptファイルの中身を連結していって、
一つのファイルにまとめてやるだけです。（PHPで作りました）

また、まとめるときの最後の処理として、
JavaScript圧縮ツールを使って圧縮処理をかけています。
これによりファイルサイズの削減効果があります。

※自社製ビルドツールの実行結果キャプチャ。圧縮するとサイズが大幅に減ります。
JSファイルを圧縮

チャットワークではJavaScript圧縮ツールとして
Google Closure Compiler と YUI Compressor を併用しています。

Google Closure Compilerの方が圧縮率が良いのですが、
後述のモバイル開発ではエラーになってしまう場合があるので、
YUI Compressorも併用しています。

圧縮ツールを使うと、余白・コメントのカットや、
長い変数名などを短くしてくれる為、ファイルサイズを
気にせずコーディングができとても楽になります。

JavaScriptコードのテスト

コード規模が大きくなってくると、手動でのテストは限界になり、
自動テストが不可欠になってきます。

PHPであればPHPUnitなどのテストスイートライブラリで
簡単にテストを作ることができますが、ブラウザでの操作が前提の
イベント駆動型であるJavaScriptはテストが困難です。

ブラウザの操作を自動化するにはSeleniumというテストツールが有名で、
チャットワークでもSeleniumを採用しようとしたのですが、
どうしてもうまくいかず断念しました。。
（重かったり、動かなかったり、、、。複数のバージョンを
　かなりがんばって検証したのですが・・・）

というわけで、結局テストツールを自作することにしました。

※テストツールのキャプチャ。
「Run Test」ボタンをクリックすると自動で動作テストします。
テストツール

仕組みは単純で、テストケースを走らせるとjQueryで $(elem).click() のように
イベントをプログラムから順番に叩いて、各種DOMの状況を見てやるようなものです。

テキスト表示
  1. var TR = new TestRunner();
  2.  
  3. //ボタンをクリック（ユーザー操作を実行）
  4. $('#cw_room_addchat').click();
  5. //結果を検証（結果をコンソールUIに表示）
  6. TR.isEqual($('.ui-widget-overlay').length,1,'ダイアログが開いたか');

↑簡単に書くとこんなイメージです。

実際は、テストケースを複数キューに入れて順番に走らせたり、
Ajaxの完了をwaitしたり、alert()やconfirm()で止まらないようにしたり、
XSS脆弱性がないか自動で検証したりなどもろもろ工夫しています。

コードの自動文法チェック

JavaScriptは様々なブラウザで挙動が変わるので、
あるブラウザでは問題なく動作するが別のブラウザでは
エラーになって動かなくなる、ということも実際よくあります。

jQueryなどのフレームワークを使えば問題は起きにくいのですが、
よくやってしまうコードとしては

テキスト表示
  1. var obj = {
  2.     aaa:1,
  3.     bbb:2,
  4. };

という様に、オブジェクトの要素の最後のカンマを消し忘れると、
IEではエラーになってしまいます。（何度これに泣かされたか・・）

これはJavaScriptの仕様上は問題ないコードのため、
開発エディタなどではエラー検知されませんし、
開発でよく使うFirefoxやChromeでもエラーになりません。

このような問題に対応するため、前述したJavaScriptファイルをひとつのファイルに
まとめる本番用ビルドツールにコードの自動文法チェックの仕組みを実装しました。

※自動コードチェックでエラーを検出した場合のキャプチャ
セミコロン漏れと、最後の余分なカンマを検知。
JavaScript Lint

といってもJavaScriptの構文チェックを自前でやるわけではなく、
1つのファイルにまとめたJavaScriptファイルを、
JavaScript Lintというツールに読み込ませてコードチェックを行います。

このJavaScript Lintはコマンドラインのツールになっているので、
ビルドツールを実行する時にソースコードのパスを渡してやり
チェックをかけています。

これは非常に便利で、多数のバグになりやすいコードを指摘してくれるので
コードの品質を上げることができました。
（デフォルト設定はかなり細かいので、指摘条件をカスタマイズしています）

ビルドツールと組み合わせることで、このチェックに引っかかった場合は
リリースできないようにしています。

マルチデバイスでの並行開発にチャレンジ

チャットワークでは、Webアプリケーション版だけではなく、
iPhone・Android・iPadのアプリ版とブラウザ版を同時に開発しています。

EC studioではWebアプリケーションは得意としていましたが、
モバイルアプリなどは全くの専門外で、開発にあたっては大変苦労しました。

はじめは、まずはiPhone版をということで Objective-C を使って
ゼロから開発をはじめていきましたが、モバイル版を担当者が作っているうちに
Web版の仕様や機能がどんどんと変化していってしまうので、
モバイル版の開発がとても追いついていけないという問題にぶつかりました。
(Objective-CよりJavaScriptの方が開発速度が断然速い。。。）

Titanium Mobileを採用

そこでどうにかWeb版とモバイル版を同時開発していけないかと思い、
見つけたのが Titanium Mobile でした。

Titanium Mobile

ご存知の方も多いと思いますが、JavaScript で iOS、Android の
アプリケーションを開発できるクロスコンパイラツールです。

チャットワークはフルAjaxで作成されているので、
Titaniumとの相性は抜群です。

試してみたところ、ほとんどそのままのコードで動かすことができました。

MVCアーキテクチャの様に、ロジックやデータ処理を担当するModelクラスと、
表示部分を担当するViewクラスに分割し、Viewの部分だけを
Web版とモバイル版などデバイスで分けて書くようにしました。

※チャットワークのソースコードのフォルダ構造
ファイル構造

Web版のViewでjQueryを使ってHTMLを生成したりDOM操作していた部分を、
モバイル版のViewではTitaniumのUIViewクラスで実装します。

Titaniumの採用により、Web版とモバイル版でコードの大部分(約70%)を
共有できるようになり、大幅に開発効率を上げることができるようになりました。

Web版をバージョンアップすると自動的にモバイル版の機能も
アップデートされていくというのは感動ものです。

Titanium Mobile 開発の課題

ただ、Titaniumを使用することで開発効率は上がりましたが、
いろいろな課題にもぶつかりました。

いまではかなり改善されてきてはいますが、Titaniumは新しいツールだけに
非常に多くの不具合、メモリリークや挙動のクセがまだまだ残っており、
それを回避するためにトリッキーなバッドノウハウがたくさん必要です。

また、なんとか動かせたとしても、やはりネイティブの言語で書いた
アプリケーションに比べると、操作感が重かったり動作が不安定になったりします。

これらはアプリケーションレベルでチューニングができるものなのか、
そもそもTitanium本体の問題なのか切り分けが難しく、
いまでも開発に苦慮しています。

このあたりはTitaniumの進化に期待をしたいところですが、
限界も感じていて、ネイティブ版での開発を検討しはじめています。
（開発効率とパフォーマンスとのトレードオフですね・・）

これからのチャットワーク

チャットワークの開発をはじめてから、約2年。

社内用のツールをつくろうというところからはじまったこのプロジェクトが、
まさか社名にまでなり、米国法人までつくることになるとは思いませんでした。
（7月より、弊社代表が米国に移住して本格進出いたします）

この淘汰の激しいIT業界で、増資もせず上場もせず、
どこまで世界で戦っていけるかはわかりませんが、
創業してから12年かけてつちかったものをすべてぶつけて、
チャレンジしてみたいと思っています。

そのなかで得たノウハウは、またこのようにブログなどで
随時公開していければと思っています！

今後とも、チャットワークをどうぞよろしくお願いいたします。

アカウントをお持ちでないかたはぜひお試しください。無料です。

- 山本正喜（ChatWork ID　facebook　twitter)

※チャットワークの開発者を募集しています

正直、チャットワークの機能開発が追いついていません・・・。＾＾；

大規模JavaScript開発や、Webと連携するモバイルアプリの開発などに
ご興味がありましたら、ぜひエントリーを！


関連した記事：
  • 関連する投稿はありません。
]]> http://techblog.ecstudio.jp/tech/backstage_of_chatwork.html/feed 0 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 1 プログラマ視点でみた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 2 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相当まで"無料"ということです。
※有料で制限を拡張することも可能

※2011/09/07 注
Google App Engineの新料金体系が発表されました。
新料金体系では無料で使える枠が大幅に削減されています。
この記事の無料での使用制限に関する記述は、新料金体系では
正しくありませんのでご注意ください。

「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 13 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 10 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 4