Google+風のフィードバック(ご意見・ご感想)機能を実装できるライブラリ

ちょっと旬からは遠ざかった気がしますが...
Google+風のフィードバック(ご意見・ご感想)機能を実装したいな〜と思い、
既存のものがあったはず...と探してみましたので、メモ程度にまとめておきます。

画面右下等に表示された"フィードバック(ご意見・ご感想)"ボタンをクリックすると、
DOMのスクリーンショットをブラウザ上で作成して、文章に添付して問い合わせできるアレです。
尚、これらのライブラリは、フィードバックの作成・送信までを行うのみですから、
バックエンド側の実装は別途行う必要があります。
(ちなみにGoogle公式では、Google Feedbackというシステムになっており、管理まで包括的に行えるようです。これが一般に開放されると、とても便利になると思うのですが。)

feedback.js
http://experiments.hertzen.com/jsfeedback/
サンプル: http://experiments.hertzen.com/jsfeedback/examples/combination/index.html

feedback.jsのサンプル。
ハイライト、塗りつぶしともに動作しました。

dom-feedback
https://github.com/jankuca/dom-feedback
サンプル: http://jankuca.github.io/dom-feedback/example/

dom-feedbackのサンプル。
しかし、私の環境ではうまく動作しませんでした。 (Google Chrome 24.0)

jQuery.sendFeedback
https://github.com/Chevex/jQuery.sendFeedback
サンプル: http://mugifly.site44.com/masanoriprog/2013-04-08_web_feedback/jquery.send_feedback/index.html
こちらは、その名のとおり、jQueryプラグインになっています。

jQuery.sendFeedbackのサンプル。
枠を描画する機能はあるものの、ハイライトや塗りつぶしは無いようです。

個人的な感想としては...今のところ、feedback.jsが最も実用できそうな感じですね。

もちろん、いずれもオープンソースですので、Pull Requestを送ったり、
これを参考にさせてもらって自分で実装するなりしても良いと思います。
（ちょうど、feedback.jsの開発者の方が公開してくださっている html2canvas を使えば、
クライアント上でJavaScriptのみでのスクリーンショット生成が簡単に行えます。）

また、有償のWebサービスですが、次のようなものもありました。

• USER SNAP
  http://usersnap.com/
  14＄/月〜。有料サービスだけあって、包括的＆高機能な感じです。
• Wishbox
  http://www.jotform.com/wishbox
  こちらは一ヶ月あたり100件のフィードバックまで無料らしいです。
  簡単な図形描画までできるようです。
  (参考: http://f.daccot.com/2012/02/24/10882/)

Webサービスのカスタマサポートなどに使うのであれば、検討してみても良さそうです。

node.jsをソースからビルドしてインストール(簡単) on Fedora17

以前の記事ではnaveを使ってnode.js環境をセットアップしましたが、
今回はソースコードからビルドしてインストールする話です。
といっても特に何のことはなく、とっても簡単です。
コーヒー飲んでたら終わる手軽さです♪

尚、今回利用した環境は、Fedora 17 (64bit)です。

まずはnode.jsのソースコードのアーカイブを取得して...
(執筆時の最新版は、node-v0.8.19でした。尚、Githubからgit cloneしてもOKです。)

$ wget http://nodejs.org/dist/v0.8.19/node-v0.8.19.tar.gz

展開してビルドし、インストールします。 (尚、g++, openssl-devel、pythonなど必要なものは、前もってインストールしておいてください。)

$ tar zxf node-v0.8.19.tar.gz
$ cd node-v0.8.19/
$ ./configure
$ make
$ sudo make install

これで、nodeとnpmがインストールされました。
/usr/local/bin にインストールされたので、/usr/binからリンクを張ります。

$ sudo ln -s /usr/local/bin/node /usr/bin/node
$ sudo ln -s /usr/local/bin/npm /usr/bin/npm

終わりです (￣ー￣)ｂ

WebAPIドキュメント作成サービス apiary.ioを使ってみた

apiary.ioを使ってみました。
WebAPI(REST API)のドキュメントをサクっと書けるサービスです。
http://apiary.io/

去年(2012)年にローンチされたサービスで、何かに使いたいな〜と思いつつ...。
今回、開発中のWebサービスにWebAPIを実装することとなったので使わせていただいております。 (そのドキュメントはまだ公開してないです。すみません(汗;))

以下のように、API Blueprintという簡単な文法で、
"リクエスト"と"レスポンス"の例を記述するだけで
便利なドキュメントができあがります。

HOST: http://api.example.com/
--- ほげほげ API v2 ---
---
Welcome to our API. Comments support [Markdown](http://daringfireball.net/projects/markdown/syntax) syntax.
---
-- Shopping Cart Resources --
GET /shopping-cart
> Accept: application/json
< 200
< Content-Type: application/json
{ "items": [
    { "url": "/shopping-cart/1", "product":"2ZY48XPZ", "quantity": 1, "name": "New socks", "price": 1.25 }
  ] }

(ちなみに、descriptionなどの項目は、Markdownベースの記法を利用できるようになっています。)

作成されたドキュメントページ： http://docs.test0mugifly.apiary.io/
(ドキュメント上に記載されたWebAPIは実在しません。あしからず。)

簡単に使い方を説明しておきますと・・・。
まず...何が便利なのかというと・・・

この記述をもとにして、
テストリクエストを受けるための"Mock Server"を自動で用意してくれます。

このように Mock Serverが自動的に使えるようになる。

このMock Serverはドキュメントに記述したままのレスポンスを返すことができる他、
Proxyとして動作させることもでき、テスト用アクセスを識別するためのHTTPヘッダを自動付加して、productionなWebAPIサーバへアクセスさせる事も可能です。
(つまり、ドキュメント(仕様書)のリクエスト/レスポンスと、実際のクライアントによるリクエスト / 実際のWebAPIによるレスポンスを比較することができるわけです。)

"Inspector"タブでは、全てのリクエストの履歴一覧と詳細確認が行える。
リクエストヘッダ、レスポンスヘッダ、レスポンスボディについて各々、
ドキュメント(仕様書)に記述されたものと、実際の結果との比較が可能。

apiary.ioのドキュメント設定画面。
Cross-Origin Requestのヘッダを付加したり、Mock ServerをProxyにすることが可能。

また、JavaScriptやpythonによるアクセスのためのサンプルコード表示ができたり...

ドキュメントページの"Example"タブでは、
各プログラミング言語によるサンプルコードの表示を行える。
(個人的には...perlによるサンプルコードは用意されていないのが少々不満(笑))

ブラウザ上でXMLHTTPRequestによるテストリクエストを行えたり...

おなじく、ドキュメントページの"Try it"タブでは、
XMLHTTPRequestによるテストリクエストをその場で行える。

また、コメントによるディスカッションもでき...結構至れり尽くせりな気がします。

おなじく、ドキュメントページの"Comment"タブでは、
各resourceごとにスレッドを立ててコメントが書ける。

この手軽さでありながら、大手サービスのWebAPIドキュメントにも引けをとらないレベルといっても良いかもしれませんね。

作成したドキュメントは、一部登録メンバーのみ閲覧可能なように、Privateにすることもできます。
また、GitHubのリポジトリでドキュメントを管理することもでき、プッシュするだけで更新が可能になっています。複数人編集も楽ですね。
(apiary.io上のエディタで編集したほうが、完全なライブプレビューが出来るので便利かもしれませんが。)

"WebAPIドキュメントを書こうと思っても...ふつうのWikiページなどに書くのは面倒くさいな〜"という場合も、使ってみるとかなり便利だと思います。
今のところベータバージョンですが、これで無料ですし、試してみてはいかがでしょうか。

naveとnpmでNode.js環境を構築

naveというツールを使うと、Node.js(Node)を簡単にインストールできるそうです。
やってみました。
（例によって以下は自分用メモです。必要なものは予めインストール済みということで書いています。）

【お知らせ】ソースコードからビルドしてインストールした記事もあります:
　node.jsをソースからビルドしてインストール(簡単)

まずはnaveを適当なディレクトリにGit cloneしてきます。

$ mkdir ~/opt
$ git clone git://github.com/isaacs/nave.git 

次にnaveを使い、Nodeの最新版ファイルを取得します。

$ cd nave/
$ ./nave.sh install latest

このままではNodeへのパスが通っていなくて使えないので
以下のようなコマンドを実行すると一時的※に通すことができます。
(latestと指定しているので最新版のNodeを利用できます。便利ですね。)

$ ~/opt/nave/nave.sh use latest
Already installed: 0.8.3
using 0.8.3

(※毎回実行させるには、.bashrcに登録するなどしておく。)

うーん...これはたしかに簡単!

つづいて、Nodeのためのパッケージマネージャ「npm」をインストールします。

$ curl https://npmjs.org/install.sh | sh
〜〜〜
It worked

できあがりです。

---

参考にさせていただいたページ(感謝♪)：

• naveとnpmをインストールしたときのメモ - 四角革命前夜