« JavaScriptのオブジェクトをDOMも含めてJSON化っぽくできないかと思って頑張ってみた | メイン | iOS等のブラウザにJavaScriptを送信して実行できるXiangpian(設定上級編) »

iOS等のブラウザにJavaScriptを送信して実行できるXiangpian(基本編)

iOS上のJavaScriptのデバッグする仕組みが欲しかったので作りました。同じようなのが既にあるのですが、自分の要求を満たせなかったので車輪の再発明です。
iOS上のSafariを操作することを意識して作成されていますが、WebSocketに対応したブラウザであれば操作可能です。デバッグ環境と言っても、ステップ実装等の機能はありません。パソコン等から入力したJavaScriptのコードをWebSocketで送信し、iOSのSafari上で実行する仕組みになっています。JavaScriptの実行結果がパソコン側に戻ってきます。また、consoleオブジェクトをメタプログラミング的に拡張しているため、「console.log」等に渡された値もパソコン側に送信されます。
基本的な使い方
使い始めるには以下の手順が必要です。
・Xiangpianのインストール
・Xiangpianの起動
・ブックマークレットの登録
・Webコンソールの起動
・ブックマークレットの実行
文字で見ると複雑そうですが、実際にやってみるとそんなに面倒ではありません。それぞれ順を追って説明します。以下、操作する側をパソコン、操作される側をiOSと仮定します。

次のURLからXiangpianをダウンロードしインストールしてください。
Windows用にXiangpian.exeがあるためこれを適当な位置に移動してください。Mac OS Xでは、dmgをダブルクリックするとディスクイメージがマウントするので、この中にあるXiangpian.appを適当な位置に移動してください。

Xiangpianを起動します。

ブラウザから「http://[IPアドレスまたはhost名]:40320/」にアクセスすると、設定するための情報が表示されます。(設定画面ではありません。あしからず...。)
アクセスする時のIPアドレスやhost名によってこのページの動作が変わるため、iOSのSafariからアクセスする必要があります。ここでブックマークレットを登録する必要がありますが、iOSのSafariではブックマークレットを直接登録できないため、次の操作が必要になります。(iOSのSafariでなければ、「bookmarklet」にあるブックマークレットをブラウザに登録するだけです。)
まず、画面内の「bookmarklet for iOS」をタップします。見た目に変化はほとんどありませんが、アクセスしているURLが変わっています。この状態でこのページをブックマークに登録してください。登録後、ブックマークの編集画面を開き、URLの先頭の「http://[IPアドレスまたはhost名]:40320/?Xiangpian&-----&」を削除してください。

今度はパソコンからXiangpianのWebコンソールにアクセスします。WebSocketに対応したブラウザから「http://[IPアドレスまたはhost名]:40320/web_console.html」にアクセスします。Xiangpianを起動しているパソコンからであれば、「http://localhost:40320/web_console.html」でも構いません。
iOSのSafariで適当なサイトにアクセスし、ブックマークレットを実行します。
Webコンソールに「Open」と表示されるはずです。
Webコンソールにコードを入力し「send」ボタンをクリックします。
iOSのSafariでは次の用な表示になります。
Webコンソールには、「実行したコード」・「console.logに渡された値」・「実行結果」が色付きで表示されます。
履歴のかわりに、「実行したコード」はクリックするとコードがテキストエリアに追加されるようになっています。通信はJSONを使用しているため、JSON化できないオブジェクトを「console.log」等に渡したり「実行結果」とするとエラーになります。そのような場合は、toStringで文字化して渡すようにしてください。
ライセンス
Xiangpianは以下のライブラリを使用しています。

jewelcli (Apache License 2.0)
jetty (Apache License 2.0 / Eclipse Public License 1.0)
JSONIC (Apache License 2.0)
JLine (BSD License)
Rhino (MPL License / GPL License)

このため、XiangpianのライセンスはMPL LicenseとGPL Licenseのデュアルライセンスになります。(なるはず...という認識なので、間違いがありましたら指摘してもらえると助かります。)
名前の由来
JavaScriptのツールらしくお茶かコーヒー系の名前をつけようと、沖縄の「さんぴん茶」から「さんぴん」にしようと考えていたのですが、スペルをどうしようかと悩んだ挙げ句、語源と言われている中国語の「香片茶(シアンピエンチャー Xiangpiancha)」から取りました。
その他の機能
他にも機能があるのですが、長くなるのでそのうち別エントリーで...。

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)

Google

タグ クラウド