Web scratch

Posts Tagged ‘API’

Firefoxのデバッグ拡張ことFirebugですが、Firefox4よりFirebugとは別にWeb Consoleという機能が入りました。
しかし、Firebug自体もさらに便利になっているので、少し紹介します。(Firebug1.7 –1.8 の範囲で)

現在のFirefox4に正式対応しているのはFirebug1.7xで、Firebug1.8xはAlpha版として公開されているのでまだ不安定な部分もあることに注意して下さい。
特に注意書きしてない部分はFirebug1.7の項目だと思って大丈夫だと思います

Read the rest of this entry »

WebStorm & PhpStorm Blog » Blog Archive » jQuery API documentation at your fingertipsで紹介されていますが、WebStorm上でjQueryのオンラインヘルプをローカルにダウンロードしたものを表示できるようになっていました。(WebStorm/PHPStrom 2.1 以降が対象)

まずはJavaScript librariesの設定(Settings> JavaScript Library)で、Addボタンを押してローカルにおいたjQuery.jsをFileに指定します。
Documentation URLsのSpecifyボタンを押して、http://api.jquery.com を指定してからダウンロードボタンを押すとローカルにjQueryのドキュメントがダウンロードされます。(実際にダウンロードされるのはRaw XML API Dumpですがhttp://api.jquery.comの方を指定する)

これでライブラリの追加は終わったので、次は実際にjQueryを使うプロジェクトを開きます。(プロジェクトを開いていない状態で設定すれば常に適応されるグローバルとして設定できると思う、その辺はWebStormのコード補完に新しく候補を追加する方法 | Web scratchと同じかな）
また同じく設定に行き、JavaScript Library>Scopeを見るとそのプロジェクトで適応されているライブラリが分かると思います。jQuery(Addボタン追加したライブラリ名の事）にチェックを入れれば準備は終わりです。(逆をいれば、プロジェクト毎に補完候補に現れるライブラリを指定できるようになっている)

後はjQueryのメソッドにカーソルを合わせて、Quick Documentation Look-up(デフォルトCtrl+Q)をすれば、APIドキュメントがパネルに表示されます。

Shift+F1か、ポップアップしたドキュメントの矢印ボタンからドキュメントのWebページのジャンプもできる。

今回はjQueryだけみたいですが、ちゃんとオフライン向けのドキュメントを発行してくれるライブラリなら対応されるかも知れません。ドキュメントのヘルプページへのジャンプ機能はjQuery以外にも対応しているライブラリがあります。
WebStorm & PhpStorm Blog » Blog Archive » External API Docs Support for Popular JavaScript Frameworks

jQueryの補完もちゃんとできるし、APIドキュメントもすぐに見られるようになったのでjQuery使うのがかなり楽になったと思います。後、自分で追加するJavaScript librariesを設定できるので、ライブラリバージョン別に分けるといった事もできたりすると思います。

参考

• WebStorm & PhpStorm Blog » Blog Archive » External API Docs Support for Popular JavaScript Frameworks
• WebStormのコード補完に新しく候補を追加する方法 | Web scratch

おまけ

WebStormが今春のキャンペーンがまだ続いているので半額で購入できるみたいです。
JetBrains公式のNodeJSプラグイン(Node.jsもそのうち公式対応されると思う)の公開が始まったりして、まだ進化のスピードは落ちてない印象なので、安いうちに買っておくのもいいかと思います。

JavaScriptにもJavaDocのようなコメントからAPIドキュメントを生成するツールがいろいろとあるため、どのようなものがあるか少し調べて見ました。基本的なコメントの書き方は大体がJSDocと共通しているので、特に言及がなければそのような書き方が通るものが多いです。

• JsDoc Toolkit

JSDoc(開発停止)の後継であるため最も有名だと思います。
現在はver2で機能追加のリクエストは停止されていますが、JSDoc 3が開発中となっているそうです。
情報量もそこそこあると思うので、APIドキュメント生成ツール関係について調べる時に参考になる。
Closure Compilerなどいろいろなところで使われていたりします。
-JsDoc Toolkitを使う！ – トップページ

• YUI Doc

YahooのYUI Libraryで使用されているドキュメント生成ツールです。
Pythonで書かれています。

• ext-doc

Ext JS/Sencha Touch風のドキュメント生成ツールです。
ドキュメントの似た目もリッチ
-ext-docでSencha Touchのドキュメントを作ってみる – プログラマとSEのあいだ

• DocumentJS

JavaScriptMVCで使用されているドキュメント生成ツールです。
ドキュメント自体の作りを意識した@pageや@tagなどの要素があるのが特徴的。
rhino(Java)を使っているようです。

• Natural Docs

多種多様な言語に対応しているドキュメント生成ツールです。
他のものとは書き方が異なり、パラメーターなどを使わずに自然な形で書けるように設計されています。
-NaturalDocsの書き方と、出力結果 – 今日もコーディング日和

• jGrouseDoc

どこかで使われているのは見たことないです。
ANTが使われているようです。

• ScriptDoc

Aptanaで使われているドキュメント生成ツールです。
Aptana内のコードアシストに反映したりします。
-Aptanaの使い方解説

• visionmedia/dox – GitHub

node.js製のドキュメント生成ツールです。
Doxを見るとわかりますがコメントとソースコードを並べて表示します

• jashkenas/docco – GitHub

CoffeeScript/JavaScriptに対応したnode.js製のドキュメント生成ツールです。
APIドキュメントというよりはコメントとソースコードを並べて読ませる感じのHTMLを生成します。
backbone.jsなどでも使われていたりして、ソースコードを読ませるのには向いているものだと思います
兄妹ツールとしての派生が多いツールです

1. Ruby – http://rtomayko.github.com/rocco/
2. Sh – http://rtomayko.github.com/shocco/
3. Python – http://fitzgen.github.com/pycco/

いろいろ紹介しましたが、基本的には書き方はJSDocなので似た目や機能などに違いが現れることが多いです。

JavaScript Documentation – The JSMentors JavaScript Discussion Group | Google グループ

http://groups.google.com/group/jsmentors/browse_thread/thread/ab8884987bf4517c

JavaScriptのドキュメントフォーマットにはどんなものがあるの？ – Nobody is perfect.

http://d.hatena.ne.jp/takimo/20101105/1288933921

im.kayac.comというiPhoneへの通知を行うサービスがあるので、それを利用してFirefoxから今みているサイトのURLを送ってiPhoneからも簡単に開けるという感じのものを作ってみました。

準備するもの

1. iPhoneのim.kayac.comアプリをダウンロード
2. 登録してパスワードを設定する

インストール

Custom Buttonsのアドオンとして作ったので、Custom Buttons(Custom Buttons²)をインストールしておいて、下のボタンをクリックするとインストールできます。

URL to im.kayac

インストールしたら、Edit Buttonから

var username = "";
var password = "";

を自分の情報にあわせて入力すれば完了。

iPhoneへ送りたいサイトを開いた状態で、ボタンを押せばiPhoneへプッシュ通知ができます。

im.kayac.comのAPIがシンプルだったので10分ぐらいで作れましたが、かなり適当な作りしてます。

以前からずっと書いて修正していたパッチですが、Tombloo 0.4.11(自動更新はこないので手動でアップデートしましょう)で、
はてなダイアリーのユーザー情報取得方法がスクレイピングからhttp://b.hatena.ne.jp/my.nameのAPIを利用したものに変わったので、
はてなダイアリーへのポストができるように修正しました。

Read the rest of this entry »

pixivはiPhoneアプリを出したときにiPhone用のAPIを用意してるのでちょっとそこからのメモ。

Read the rest of this entry »

Post Now browsing to TwitterをOAuth認証に対応しました | Web scratchでGreasemonkeyスクリプトの「Post Now browsing to Twitter」をOAuth認証に対応したものを作りました。
OAuthのJavaScript実装はいくつかあるみたいですがGreasemonkeyで使う感じになってるものは無かったみたいなので、OAuth.jsを使ったtwitterでのOAuth認証を手助けするラッパーみたいなものを書きました。

xAuthを使えば楽な気もしますがブラウザベースのものはxAuthを使わずにOAuthを使ってねとの事です

大部分は

• TwitterクライアントのOAuth対応(JavaScript編) | tomatomax.net
• Twitter API を OAuth で認証するスクリプトを 0 から書いてみた – trial and error
• H.Basic認証/OAuth認証 (陽昇れども地の底に光届かず)

を参考に書きました。
何となく分かるかも知れませんが、今回扱うアプリはApplication Typeがclientタイプのものです。

Read the rest of this entry »

Twitterへ今見ているサイトをコメントと共に投稿する「Post Now browsing to Twitter」がOAuth認証に対応しました。
このGreasemonkeyをインストールする前に、以前のバージョン(2010年6月より前)のものを入れている場合はそれをアンインストールしてから、改めて「Post Now browsing to Twitter」をインストールして下さい。(以前と設定の互換が無くなったため設定ごと破棄をお勧めします)
ツール→Greasemonkey(もしくはステータスバーの猿アイコン)→ユーザースクリプトの管理→Post Now browsing to Twitterを選択→✓関連付けられた設定も削除にチェック→アンインストール

Read the rest of this entry »

twicliはブラウザで動くTwitterWebクライアントで、JavaScriptでプラグインを書くことで拡張することができます。
今回はtwicliから特定のポストに貼られているリンクをRead It Laterへ登録するプラグインを書きました。

必要なもの

• Read It Laterのアカウントとパス

使用方法

http://efcl.info/lab/twicli/ReadItLator.js

をtwicliの+にあるPluginsに書き足す事で上のプラグインを読み込む。
プラグインを読み込むために一度ページをリロードしてら、+のPluginの下に▼Read It Latorというのができるので、
Read It Laterのユーザー名とパスワードを記入する。

そして各ポストの▼を押すとRead It Laterが追加されているので、登録したいリンクがあるポストで実行する。
(リンクがないポストを選択した時はそのポストのURLが登録されます。)

雑記

API KEYが必要なので自分のをいれていますが、回数制限とかあるらしい。
ソース自体もサーバが貧弱なので別のところに置きたい。
(Read It Later APIは簡単に取得できます。)

twicli – A Web Browser-Based Lightweight Twitter Client

http://www.geocities.jp/twicli/index.html

Twitter API proxyをGoogle App Engine上で動かす方法

プロキシの必要性

プロキシを経由してAPIにアクセスすると何がいいのか

• TwitterのAPIはアカウント&IPアドレスでカウントされているので、APIの使用回数を増やせる。
  グローバルIPアドレスをPCごとに変えられない環境で2台のPCから見るときに便利
• Twitterへのアクセスが制限されている環境でも使用できる。
  元々GFW（グレート・ファイアー・ウォール）を超えるために作られたっぽい
• ちゃんと確認してないけど、GAEはホワイトリストに入ってる気がするので、API回数が20000になったりする事もある。

要はAPI使用回数を増やせるよって話。

必要なもの

• Google App Engineのアカウント
• Google App Engine SDK とPython実行環境
• birdnest 一式のファイル(Python)

まずはGoogle App Engineのアカウントを作成します。(すでに持ってる人は、新しいアプリケーションを作成するだけ)
Google App Engineのアカウント登録とアプリ作成 – 130単位 を参考にアカウントとアプリケーションを作成します。
このときのアプリケーションのIDは後で必要になるので控えといて下さい(Google App Engineのページにアクセスすればいつでも見られるけど)

次に開発環境 – Google App Engine – Google Codeを参考にPythonの実行環境とSDKをダウンロード&インストールします。(ここも既にやってる人はスルー)
Pythonは2.5が推奨されているのでできればそちらをダウンロードした方がいいです。(一応2.6でも動きました)

次に今回、Google App Engine上で動かすプロキシのスクリプトである、birdnestをダウンロードします。
http://birdnest.googlecode.com/svn/branches/gae/ 以下のファイルを全部ダウンロードするのですが、そのままだと面倒なので、
【第１７回】EclipseでSubversion – Tech [Friday] プロモバイルエンジニアブログ などを参考にEclipseを使ってSVNをチェックアウトしてまとめてダウンロードしました。

ダウンロードしたファイル

これらのファイルを先ほど作成したアプリケーションID名のフォルダを作りその中に入れておきます。(これは説明を統一するためなので絶対必要な操作ではないかも)
アプリケーションのIDがtwitproxyならtwitproxyというフォルダを作りその中に入れる。

ファイルの編集

ダウンロードしたapp.yamlを編集する必要があります。
一行目のアプリケーション名を先ほど控えてた自分が作成したGoogle App EngineのアプリケーションIDに変更します。

application: アプリケーションのID

テスト&アップロード

Pythonが入っていれば、コマンドプロンプトでPythonと打ち込むとバージョンが表示されます。(エラーになる場合はPython周りがおかしい)
まずは動くかどうかをテストします。
GAEではローカルでテストするためにSDKにサーバがあるのでそのスクリプトを起動して確認します。
同じくコマンドプロンプト上で、

Python "C:\Program Files\Google\google_appengine\dev_appserver.py" 先ほど作成したフォルダへのパス

と打ち込んだ状態(コマンドプロンプトは閉じない)でhttp://localhost:8080/にアクセスとページが表示されると思います。
この上でTwitterクライアントのAPIURLをhttp://localhost:8080/api/ にして使えるか確認できるといいです。
Google App Engineを使ったTwitterBotの作り方 – 星屑日記 を詳しく読むといいかも。

アップロード

次に編集したファイルをGAEにアップロードします。
先ほど同様にコマンドプロンプト上から

Python "C:\Program Files\Google\google_appengine\appcfg.py update 先ほど作成したフォルダへのパス

と打ち込むとアップロードが始まります。

そしてhttp://アプリケーション名.appspot.com/にアクセスしてテストの時と同じページが表示されればアップロードは成功です。

実際にプロキシとして使用する

• Echofon for Twitter (Formerly TwitterFox)

Echofonをインストールしてextensionフォルダに行きます

vista

C:\Users\ユーザー名\AppData\Roaming\Mozilla\Firefox\Profiles\eプロファイル名\extensions\twitternotifier@naan.net\components

XP

C:\Documents and Settings\ユーザー名\Application Data\Mozilla\Firefox\Profiles\プロファイル名\extensions\twitternotifier@naan.net\components

ここにあるnsTwitterFox.jsを編集します。

var TWITTER_API_URL = “http://アプリケーション名.appspot.com/api/”;

と変更すると、GAE上で動いているプロキシを通してAPIにアクセスすることができます。
基本的にAPIのURL指定を変更できるソフトなら同じ方法でプロキシを通してアクセスできる。

海外のクライアントだとAPIを指定できるソフトも多いです。

Spazの場合だと設定画面にBase API URLを指定できるので、同じようにhttp://アプリケーション名.appspot.com/api/を入れればプロキシ経由で使用できます。

設置が凄い面倒でセキュリティを気にしない人は

birdnest – a twitter api proxyを同じように使えるかもね。

以下参考

birdnest – Project Hosting on Google Code

http://code.google.com/p/birdnest/

How to set up Twitter API Proxy with Google App Engine | Bruce Yo’s Blog

http://www.bruceyo.info/archives/402

Google App Engineを使ったTwitterBotの作り方 – 星屑日記

http://d.hatena.ne.jp/intheflight/20090611/p1