メイン

「Jaxer」のアーカイブ

2008年8月 2日

Jaxer 1.0 RC公開

サーバサイドJavaScriptを実現するAptana Jaxerのバージョン1.0のリリース候補版が公開されました。

Jaxer 1.0 now available in Release Candidate B | Aptana

↓今回のリリース版には以下のような機能が追加されています。

  • Application context settings that allowing for easier app configuration, app properties, database settings, etc...
  • Database API enhancements with richer APIs for working with result sets.
  • Server-side image manipulation including server-side canvas support and ability to convert to other image types.
  • Native command execution API so that you can run system commands and handle the output from those.
  • Asynchronous server-side JavaScript processing lets you implement callbacks in your server-side code too.
  • Ability to return custom content types (e.g. json, xml, gif, html, etc...)
  • Full control of the request/response lifecycle including setting redirects, headers, content, etc...
  • Secure sandbox supporting cross domain calls, sandboxed JavaScript execution, META refreshes, ...
  • Serialization support for JavaScript objects to and from XML, E4X and JSON

公式ブログには、「Ability to return custom content types (e.g. json, xml, gif, html, etc...)」と「Serialization support for JavaScript objects to and from XML, E4X and JSON」の機能が追加されたことにより、AjaxクライアントだけでなくFlashやShilverlightクライアントのサーバサイドとして利用できるようになったと書かれています。

個人的には「Server-side image manipulation including server-side canvas support and ability to convert to other image types」が機になるところ。サーバサイドでcanvasをサポートしてるってことなのか・・・。面白そうだから後でAPIを見てみることにします。

1.0のリリースを機にもっと注目されるプロダクトになってくれたら良いのになぁ。

2008年4月 9日

gihyo.jp Jaxer の連載第6回公開

aptana_gihyo_jp.png gihyo.jpのAptana Jaxerについての連載第6回が公開されました。

Aptana JaxerでサーバサイドJavaScriptを始めてみよう!:第6回 Jaxerのセキュリティ・パフォーマンスについて|gihyo.jp … 技術評論社

今回が最終回となります。

Jaxerのセキュリティ・パフォーマンスがらみについて書きました。使ってみようと思われる方は、まず気になるところだと思います。

昨日Google App Engineが登場し、前回紹介したJaxer + Amazon EC2が魅力的じゃなくなってしまった感がありますが、こういうソリューションもある、ということを知っておくのは、まあ悪いことじゃないなと前向きに考えています。

2008年3月26日

gihyo.jp Jaxer の連載第5回公開

aptana_gihyo_jp.png gihyo.jpのAptana Jaxerについての連載第5回が公開されました。

Aptana JaxerでサーバサイドJavaScriptを始めてみよう!:第5回 Amazon EC2でJaxerを動かす!|gihyo.jp … 技術評論社

今回は予告通り、Amazon EC2上でJaxerを動かす方法を解説しています。

手順をかなり丁寧に書いた(つもり)ので、Jaxerに興味がなくても、Amazon EC2をちょっと触ってみたいという方は是非参考にしてみてください。

Amazon EC2は時間課金と転送量課金になりますが、インスタンスを起動しっぱなしにしてサービスを運用するのでなければ、結構お安く色んな環境が触れてお得です。

2008年3月12日

gihyo.jp Jaxer の連載第4回公開

aptana_gihyo_jp.png gihyo.jpのAptana Jaxerについての連載第4回が公開されました。

Aptana JaxerでサーバサイドJavaScriptを始めてみよう!:第4回 サンプルアプリ(タスク管理アプリ)の作成 -タスクの編集・削除/入力値チェックの共有-|gihyo.jp … 技術評論社

前回から始まった簡易なタスク管理サンプルアプリが、今回で完成します。

ごくごくシンプルなアプリですが、Jaxerの動きを確認するにはちょうど手頃なサイズかと思いますので、お時間のあるときにおためしあれ。

次回はAmazon EC2上でJaxerを動かすと言うところを解説予定です。やっぱり、作ったアプリはネットで公開してみたいですからね。

2008年2月27日

gihyo.jp Jaxer の連載第3回公開

aptana_gihyo_jp.png gihyo.jpのAptana Jaxerについての連載第3回が公開されました。

Aptana JaxerでサーバサイドJavaScriptを始めてみよう!:第3回 サンプルアプリ(タスク管理アプリ)の作成 -タスクの登録・表示-|gihyo.jp … 技術評論社


今回は、Aptana Studio を使って、簡易なタスク管理サンプルアプリを構築する内容になっています。実際に動かしながらJaxerを試すことができるので、週末に時間がある方は一度お試しあれ。

昨日AIRが正式リリースされましたが、本家Aptanaのブログでは、下記のようなエントリで、Jaxer on AIRをプッシュしています。

"Jaxer on AIR": Aptana Jaxer and Adobe AIR - Desktop & Server, All Ajax | Aptana

10分程度のスクリーンキャストで、(僕が連載で作っているものよりだいぶ高級な)タスク管理アプリを構築するデモが見られます。これを見てると、AIRアプリはHTML + JavaScriptで作るのもありだなと思えてきました。

2008年2月14日

gihyo.jp Jaxer の連載第2回公開

aptana_gihyo_jp.png gihyo.jpのAptana Jaxerについての連載第2回が公開されました。

Aptana JaxerでサーバサイドJavaScriptを始めてみよう!:第2回 Jaxerの環境構築/サンプルアプリ解説|gihyo.jp … 技術評論社

今回は、Jaxerを利用する環境構築や、Aptana Studioでプロジェクトを作成する手順、及び、サンプルの紹介などを割と丁寧に解説しています。

次回からは、いよいよサンプルアプリケーションの作成に入っていきますので、サーバサイドJavaScriptに興味がある方は是非読んでみてください。

Aptana JaxerでサーバサイドJavaScriptを始めてみよう!:第1回 Aptana Jaxerとは?/Jaxerのここが素敵|gihyo.jp … 技術評論社

2008年2月 7日

gihyo.jpでJaxerの連載開始

aptana_gihyo_jp.png gihyo.jpにてAptana Jaxerの連載を始めました。

Aptana JaxerでサーバサイドJavaScriptを始めてみよう!:第1回 Aptana Jaxerとは?/Jaxerのここが素敵|gihyo.jp … 技術評論社

第1回目は、Jaxerの簡単な紹介とJaxerのすごいポイントを紹介しています。

今後、簡単なサンプルアプリケーションの構築等々も予定していますので、興味のある方はどうぞ。

2008年1月27日

JAXERでサーバサイドjQueryが超便利

 一昨日に引き続きJaxerの話。

今回は、jQueryをサーバサイドでも使えるよという内容です。

jQueryを一度でも使ったことのある方は、その便利さに、もうjQueryなしには生きられない感じになってしまってるのではないでしょうか(僕だけか?)。

John Resigのサンプルコード

jQueryを作ったJohn Resigさんのブログで、jQueryをサーバサイドでも使うというサンプルコードが公開されています

<html>
<head>
  <script src="http://code.jquery.com/jquery.js" runat="both"></script>
  <script>
    jQuery(function($){
      $("form").submit(function(){
        save( $("textarea").val() );
        return false;
      });
    });
  </script>
  <script runat="server">
    function save( text ){
      Jaxer.File.write("tmp.txt", text);
    }
    save.proxy = true;
   
    function load(){
      $("textarea").val(
        Jaxer.File.exists("tmp.txt") ? Jaxer.File.read("tmp.txt") : "");
    }
  </script>
</head>
<body onserverload="load()">
  <form action="" method="post">
    <textarea></textarea>
    <input type="submit"/>
  </form>
</body>
</html>

とりあえず、上記コードをテキストにコピペして、index.htmlと名前をつけ、jaxerのpublicフォルダの下に配置しましょう。

サーバが起動している状態であれば、http://localhost:8081/ でアクセスすることができます。

すると↓こんな画面が表示されます。

jaxer_003.png

この画面で、テキストエリアに文字を入力し、「クエリ送信」をクリックすると、index.htmlを配置しているディレクトリに、テキストエリアの内容が書かれたtmp.txtが出力されます。

一度画面を閉じ、再度ページを表示すると、先ほど入力した値が、デフォルト値としてテキストエリア内に表示されます。

というわけで、サンプルコードのコード解説です。

1~3行目

<html>
<head>
  <script src="http://code.jquery.com/jquery.js" runat="both"></script>

jQueryを読み込み、runat="both"で、このコードをサーバとクライアントの両方で利用することを宣言しています。

4~11行目 

 <script>
    jQuery(function($){
      $("form").submit(function(){
        save( $("textarea").val() );
        return false;
      });
    });
  </script>

ドキュメント中のformエレメントのsubmitイベントに、テキストエリア内の値を引数としてsave関数を実行するようにバインドしています。このscriptタグにrunat属性はないので、必然的にクライアント側でのコードとなります。

12~22行目

  <script runat="server">
    function save( text ){
      Jaxer.File.write("tmp.txt", text);
    }
    save.proxy = true;
   
    function load(){
      $("textarea").val(
        Jaxer.File.exists("tmp.txt") ? Jaxer.File.read("tmp.txt") : "");
    }
  </script>

runat="server"なので、サーバ側での関数定義です。

saveは、引数で渡された値を、tmp.txtとしてファイルに書き出します。

loadは、tmp.txtが存在すれば、その内容をページ中のテキストエリアの値としてセットします。

save関数は、proxy=trueとされており、これでクライアント側のJavaScriptからsave関数をコールすることができます。逆に、load関数は指定がないので、クライアント側から呼び出すことはできません。

また、サーバ側で動作するこのコードで、$("textarea").val()と、jQueryのコードが書けているのも注目です。

23~30行目

</head>
<body onserverload="load()">
  <form action="" method="post">
    <textarea></textarea>
    <input type="submit"/>
  </form>
</body>
</html>

bodyタグのonserverloadという指定で、ページ表示時にload関数が実行されるようになっています。

サーバ側でjQueryを使うことで何が便利になるのか?

基本的にjQueryはDOMを簡単に直感的に利用できるライブラリになっており、サーバサイドでの出番はあまりないようにも思えます。

では、サーバサイドでjQueryを使うメリットはどんな点なのか。

1つは、「入力フォームの値をset / get しやすい」という点です。

これは今回のサンプルでも明らかだと思います。

もしjQueryを利用していなければ、値のset / get は以下のようになって、コードも長くなり少々面倒です。

document.getElementById('hoge').value = 'moge';

document.forms[0].hoge.value = 'moge';

もう1つは、「スクレイピングしやすい」という点です。

Jaxerでは、以下のコードで任意のページのHTMLを取得できます。

Jaxer.Web.get(url);

これを利用すると、以下のようにjQueryのselectorを用いて取得したHTMLを操作することができます。

$('selector',Jaxer.Web.get(url))

例えば、ページ中のaタグのhref要素を全部取得する場合は、

     var txt = '';
     $('a',Jaxer.Web.get(url)).each(function(){
       txt += $(this).attr('href') + '\n';
     });

こんな感じで。

このままだと正規表現の方が簡単じゃんってことかもしれませんが、ページ中の特定の部分の中身からurlを抜き出したりとかできて、個人的には正規表現でゴリゴリ書くよりやりやすいです(まあ僕が正規表現苦手なだけですが)。

ただ、jQueryのメソッドすべてがサポートされているわけではないので、注意が必要。

Jaxer付属のサンプルページで、jQueryのユニットテストの動作結果が確認できます。

<関連エントリ>

2008年1月25日

Ajax server Aptana JAXERを触ってみた

 最近JavaScriptづいていて、サーバサイドもJavaScriptで書きたいなぁと思っていたところに、AptanaからJAXERなるAjax Serverがリリースされたとのニュースがあったので、渡りに船とばかりに触ってみました。

とりあえず動かしてサンプルを見るまでは超簡単。興味がある人は試してみると良いよ。

ということで遊んでみた内容のメモ。

環境構築

JaxerのホームページのDownloadをクリックして、"Download Jaxer for Windows (.zip)"をダウンロード。

ダウンロード後、解凍して、必要なら任意のディレクトリに移動。

解凍後のルートディレクトリにある"StartServer.bat"を実行すると、http://localhost:8081/aptana/ にアクセスすることができます。※環境によってはセキュリティソフトから、Jaxer やApache がネットワークに接続することを許可しろとか言われます。

これだけでOK。もはや環境構築と呼ぶまでもない簡単さです。

サンプルで遊ぶ

上記URLのページを表示して、左側のSample And Tools をクリックすると、サンプルの一覧が表示されます。

 

jaxer_001.png

サンプルの内容は見たまんま、メール送信やRSS取得、タスク管理、チャットなんかが扱えます。個人的にはタスク管理やチャットが普通にまんま使えそうかなと思ったり。

各サンプルは、画面の右上に「HTML」マークがあって、そこからソースを見ることができます。

 

jaxer_002.png

タスク管理やチャット、wikiにユーザ情報等は、付属のSQLiteに保存されます。つまり、サーバ側で、JavaScriptからDBを操作するAPIが提供されています。

一番下のjQuery Compatibilityは、サーバサイドでjQueryのtest suitsを実行した結果が見られます。そこそこ動くようですが、100%ではないようです。↓こんなメッセージが表示されてます。

PLEASE NOTE: The current jQuery test Suite has a number of tests which currently fail. We are working to extend the test coverage to be as complete as possible.

サンプルをちょっと改良して見たいなと思った場合、サンプルの実ファイルは、<Root directory>/jaxer/aptana/samples にあります。

例えばRSS Sample のRSSの取得先を自分のブログにしてみます。

<Root directory>/jaxer/aptana/samples/rss-sample/index.html の

var feed = Jaxer.Web.get("http://www.news.com/2547-1_3-0-20.xml?tag=pre_ft");

のURLを好きなRSSのURLに書き換えて、アクセスすればOKです。※サンプルページに文字コードの指定がないので、文字化けしてしまうこともあります。

自分でアプリを作ってみる

自分でアプリを作る場合は、<Root directory>/public の下にファイルを配置します。

ページ中にJaxerの読み込みがうまくいくと、

<script type="text/javascript">/** Jaxer clientFramework_compressed.js - 

こんな行が、ページのソース中(上部)に書き出されます。

動的な部分はJavaScriptで定義していきます。

<script runat="server">と書かれたタグはサーバ側で動作するJavaScript、<script runat="client">と書かれたタグはクライアント側で動作するJavaScript、<script runat="both">と書かれたタグは両方側で動作するJavaScriptとなります。

DBに接続してSQLを発行したりするJavaScriptはサーバ側にしか書けません。そこで定義された関数をクライアント側から呼び出すことができます。

例えば、サーバ側の関数hoge()をクライアント側から呼び出したいときは、

<script type="text/javascript" runat="server">
function hoge(){
}
hoge.proxy = true;
</script>

としておきます。最後のhoge.proxy = ture;がポイントです。これにより、ページが生成されるとき、

<script type="text/javascript">
function hoge() {return Jaxer.remote("hoge", arguments);}
function hogeAsync(callback) {return Jaxer.remote("hoge", arguments, callback);}
 </script>

というコードがクライアント側に生成され、クライアント側からサーバ側にアクセスし、結果を受け取るということができます。

注意点としては、クライアント側から呼び出したい(つまりhoge.proxy = trueとしたい)関数は、外部.jsファイルではなく、ページ中に書いてある必要があるようです。(これでちょっとはまりました)

Jaxerのウリ

Jaxerの公式サイトトップページに書いてあることですが、以下の点がポイントになります。

  • アプリケーションを.html と.jsファイルで構築できる。
  • サーバ側で、htmlのDOMにアクセスするような記述ができる。
  • ブラウザとサーバがシームレスにコミュニケーションできる。
  • 既存の他の言語で書かれたページにアクセスできる(既存資源を活かせる)。
  • Validationコードをブラウザとサーバで共有できる。
  • データベースやファイル、ソケット通信がJavaScriptから可能になる。
  • 最新のJavaScript標準に則ってる。

個人的にはValidationコードをサーバとクライアントでシェアできるというのが嬉しいですね。Javaでアプリを作っていて、ブラウザ側のチェックとサーバ側のチェックの仕方が微妙に異なり、それがバグにつながるなんてことが結構起こりやすいので。

ただ、サーバ側のJavaScriptファイルがエンドユーザに見えてしまう可能性があるという点がちょっとだけ気になります。SQLとか丸見えだしね。僕が触ったバージョンだと、サーバのJaxerでエラーが発生したとき、クライアント側にサーバ側のJavaScriptソースがまるっと見えちゃって、これはちょっとと思いました。この辺は今後改善されていくのだろうと思います。

というわけで、これを使ってちょっとしたアプリを作ってみようかなと。サンプルを改造するだけでもそこそこのものができそうですし。

興味が沸いた方は、この土日に是非遊んでみてください。

<参考リンク>

でぃべろっぱーず・さいど http://dev.chrisryu.com/ 鹿児島出身子持ちSEのディベロッパーとしての一面 ja Copyright 2013 Sat, 02 Aug 2008 23:45:45 +0900 http://www.sixapart.com/movabletype/ http://blogs.law.harvard.edu/tech/rss Jaxer 1.0 RC公開 サーバサイドJavaScriptを実現するAptana Jaxerのバージョン1.0のリリース候補版が公開されました。

Jaxer 1.0 now available in Release Candidate B | Aptana

↓今回のリリース版には以下のような機能が追加されています。

  • Application context settings that allowing for easier app configuration, app properties, database settings, etc...
  • Database API enhancements with richer APIs for working with result sets.
  • Server-side image manipulation including server-side canvas support and ability to convert to other image types.
  • Native command execution API so that you can run system commands and handle the output from those.
  • Asynchronous server-side JavaScript processing lets you implement callbacks in your server-side code too.
  • Ability to return custom content types (e.g. json, xml, gif, html, etc...)
  • Full control of the request/response lifecycle including setting redirects, headers, content, etc...
  • Secure sandbox supporting cross domain calls, sandboxed JavaScript execution, META refreshes, ...
  • Serialization support for JavaScript objects to and from XML, E4X and JSON

公式ブログには、「Ability to return custom content types (e.g. json, xml, gif, html, etc...)」と「Serialization support for JavaScript objects to and from XML, E4X and JSON」の機能が追加されたことにより、AjaxクライアントだけでなくFlashやShilverlightクライアントのサーバサイドとして利用できるようになったと書かれています。

個人的には「Server-side image manipulation including server-side canvas support and ability to convert to other image types」が機になるところ。サーバサイドでcanvasをサポートしてるってことなのか・・・。面白そうだから後でAPIを見てみることにします。

1.0のリリースを機にもっと注目されるプロダクトになってくれたら良いのになぁ。

]]>
http://dev.chrisryu.com/2008/08/jaxer_10_rc.html http://dev.chrisryu.com/2008/08/jaxer_10_rc.html Jaxer Sat, 02 Aug 2008 23:45:45 +0900
gihyo.jp Jaxer の連載第6回公開 aptana_gihyo_jp.png gihyo.jpのAptana Jaxerについての連載第6回が公開されました。

Aptana JaxerでサーバサイドJavaScriptを始めてみよう!:第6回 Jaxerのセキュリティ・パフォーマンスについて|gihyo.jp … 技術評論社

今回が最終回となります。

Jaxerのセキュリティ・パフォーマンスがらみについて書きました。使ってみようと思われる方は、まず気になるところだと思います。

昨日Google App Engineが登場し、前回紹介したJaxer + Amazon EC2が魅力的じゃなくなってしまった感がありますが、こういうソリューションもある、ということを知っておくのは、まあ悪いことじゃないなと前向きに考えています。

]]>
http://dev.chrisryu.com/2008/04/serialize_about_jaxer_on_gihyojp_6.html http://dev.chrisryu.com/2008/04/serialize_about_jaxer_on_gihyojp_6.html Jaxer Wed, 09 Apr 2008 23:35:28 +0900
gihyo.jp Jaxer の連載第5回公開 aptana_gihyo_jp.png gihyo.jpのAptana Jaxerについての連載第5回が公開されました。

Aptana JaxerでサーバサイドJavaScriptを始めてみよう!:第5回 Amazon EC2でJaxerを動かす!|gihyo.jp … 技術評論社

今回は予告通り、Amazon EC2上でJaxerを動かす方法を解説しています。

手順をかなり丁寧に書いた(つもり)ので、Jaxerに興味がなくても、Amazon EC2をちょっと触ってみたいという方は是非参考にしてみてください。

Amazon EC2は時間課金と転送量課金になりますが、インスタンスを起動しっぱなしにしてサービスを運用するのでなければ、結構お安く色んな環境が触れてお得です。

]]>
http://dev.chrisryu.com/2008/03/serialize_about_jaxer_on_gihyojp_5.html http://dev.chrisryu.com/2008/03/serialize_about_jaxer_on_gihyojp_5.html Jaxer Wed, 26 Mar 2008 21:45:49 +0900
gihyo.jp Jaxer の連載第4回公開 aptana_gihyo_jp.png gihyo.jpのAptana Jaxerについての連載第4回が公開されました。

Aptana JaxerでサーバサイドJavaScriptを始めてみよう!:第4回 サンプルアプリ(タスク管理アプリ)の作成 -タスクの編集・削除/入力値チェックの共有-|gihyo.jp … 技術評論社

前回から始まった簡易なタスク管理サンプルアプリが、今回で完成します。

ごくごくシンプルなアプリですが、Jaxerの動きを確認するにはちょうど手頃なサイズかと思いますので、お時間のあるときにおためしあれ。

次回はAmazon EC2上でJaxerを動かすと言うところを解説予定です。やっぱり、作ったアプリはネットで公開してみたいですからね。

]]>
http://dev.chrisryu.com/2008/03/serialize_about_jaxer_on_gihyojp_4.html http://dev.chrisryu.com/2008/03/serialize_about_jaxer_on_gihyojp_4.html Jaxer Wed, 12 Mar 2008 21:58:39 +0900
gihyo.jp Jaxer の連載第3回公開 aptana_gihyo_jp.png gihyo.jpのAptana Jaxerについての連載第3回が公開されました。

Aptana JaxerでサーバサイドJavaScriptを始めてみよう!:第3回 サンプルアプリ(タスク管理アプリ)の作成 -タスクの登録・表示-|gihyo.jp … 技術評論社


今回は、Aptana Studio を使って、簡易なタスク管理サンプルアプリを構築する内容になっています。実際に動かしながらJaxerを試すことができるので、週末に時間がある方は一度お試しあれ。

昨日AIRが正式リリースされましたが、本家Aptanaのブログでは、下記のようなエントリで、Jaxer on AIRをプッシュしています。

"Jaxer on AIR": Aptana Jaxer and Adobe AIR - Desktop & Server, All Ajax | Aptana

10分程度のスクリーンキャストで、(僕が連載で作っているものよりだいぶ高級な)タスク管理アプリを構築するデモが見られます。これを見てると、AIRアプリはHTML + JavaScriptで作るのもありだなと思えてきました。

]]>
http://dev.chrisryu.com/2008/02/serialize_about_jaxer_on_gihyojp_3.html http://dev.chrisryu.com/2008/02/serialize_about_jaxer_on_gihyojp_3.html Jaxer Wed, 27 Feb 2008 22:48:45 +0900
gihyo.jp Jaxer の連載第2回公開 aptana_gihyo_jp.png gihyo.jpのAptana Jaxerについての連載第2回が公開されました。

Aptana JaxerでサーバサイドJavaScriptを始めてみよう!:第2回 Jaxerの環境構築/サンプルアプリ解説|gihyo.jp … 技術評論社

今回は、Jaxerを利用する環境構築や、Aptana Studioでプロジェクトを作成する手順、及び、サンプルの紹介などを割と丁寧に解説しています。

次回からは、いよいよサンプルアプリケーションの作成に入っていきますので、サーバサイドJavaScriptに興味がある方は是非読んでみてください。

Aptana JaxerでサーバサイドJavaScriptを始めてみよう!:第1回 Aptana Jaxerとは?/Jaxerのここが素敵|gihyo.jp … 技術評論社
]]>
http://dev.chrisryu.com/2008/02/serialize_about_jaxer_on_gihyojp_2.html http://dev.chrisryu.com/2008/02/serialize_about_jaxer_on_gihyojp_2.html Jaxer Thu, 14 Feb 2008 12:27:51 +0900
gihyo.jpでJaxerの連載開始 aptana_gihyo_jp.png gihyo.jpにてAptana Jaxerの連載を始めました。

Aptana JaxerでサーバサイドJavaScriptを始めてみよう!:第1回 Aptana Jaxerとは?/Jaxerのここが素敵|gihyo.jp … 技術評論社

第1回目は、Jaxerの簡単な紹介とJaxerのすごいポイントを紹介しています。

今後、簡単なサンプルアプリケーションの構築等々も予定していますので、興味のある方はどうぞ。
]]>
http://dev.chrisryu.com/2008/02/serialize_about_jaxer_on_gihyojp.html http://dev.chrisryu.com/2008/02/serialize_about_jaxer_on_gihyojp.html Jaxer Thu, 07 Feb 2008 12:30:48 +0900
JAXERでサーバサイドjQueryが超便利  一昨日に引き続きJaxerの話。

今回は、jQueryをサーバサイドでも使えるよという内容です。

jQueryを一度でも使ったことのある方は、その便利さに、もうjQueryなしには生きられない感じになってしまってるのではないでしょうか(僕だけか?)。

John Resigのサンプルコード

jQueryを作ったJohn Resigさんのブログで、jQueryをサーバサイドでも使うというサンプルコードが公開されています

<html>
<head>
  <script src="http://code.jquery.com/jquery.js" runat="both"></script>
  <script>
    jQuery(function($){
      $("form").submit(function(){
        save( $("textarea").val() );
        return false;
      });
    });
  </script>
  <script runat="server">
    function save( text ){
      Jaxer.File.write("tmp.txt", text);
    }
    save.proxy = true;
   
    function load(){
      $("textarea").val(
        Jaxer.File.exists("tmp.txt") ? Jaxer.File.read("tmp.txt") : "");
    }
  </script>
</head>
<body onserverload="load()">
  <form action="" method="post">
    <textarea></textarea>
    <input type="submit"/>
  </form>
</body>
</html>

とりあえず、上記コードをテキストにコピペして、index.htmlと名前をつけ、jaxerのpublicフォルダの下に配置しましょう。

サーバが起動している状態であれば、http://localhost:8081/ でアクセスすることができます。

すると↓こんな画面が表示されます。

jaxer_003.png

この画面で、テキストエリアに文字を入力し、「クエリ送信」をクリックすると、index.htmlを配置しているディレクトリに、テキストエリアの内容が書かれたtmp.txtが出力されます。

一度画面を閉じ、再度ページを表示すると、先ほど入力した値が、デフォルト値としてテキストエリア内に表示されます。

というわけで、サンプルコードのコード解説です。

1~3行目

<html>
<head>
  <script src="http://code.jquery.com/jquery.js" runat="both"></script>

jQueryを読み込み、runat="both"で、このコードをサーバとクライアントの両方で利用することを宣言しています。

4~11行目 

 <script>
    jQuery(function($){
      $("form").submit(function(){
        save( $("textarea").val() );
        return false;
      });
    });
  </script>

ドキュメント中のformエレメントのsubmitイベントに、テキストエリア内の値を引数としてsave関数を実行するようにバインドしています。このscriptタグにrunat属性はないので、必然的にクライアント側でのコードとなります。

12~22行目

  <script runat="server">
    function save( text ){
      Jaxer.File.write("tmp.txt", text);
    }
    save.proxy = true;
   
    function load(){
      $("textarea").val(
        Jaxer.File.exists("tmp.txt") ? Jaxer.File.read("tmp.txt") : "");
    }
  </script>

runat="server"なので、サーバ側での関数定義です。

saveは、引数で渡された値を、tmp.txtとしてファイルに書き出します。

loadは、tmp.txtが存在すれば、その内容をページ中のテキストエリアの値としてセットします。

save関数は、proxy=trueとされており、これでクライアント側のJavaScriptからsave関数をコールすることができます。逆に、load関数は指定がないので、クライアント側から呼び出すことはできません。

また、サーバ側で動作するこのコードで、$("textarea").val()と、jQueryのコードが書けているのも注目です。

23~30行目

</head>
<body onserverload="load()">
  <form action="" method="post">
    <textarea></textarea>
    <input type="submit"/>
  </form>
</body>
</html>

bodyタグのonserverloadという指定で、ページ表示時にload関数が実行されるようになっています。

サーバ側でjQueryを使うことで何が便利になるのか?

基本的にjQueryはDOMを簡単に直感的に利用できるライブラリになっており、サーバサイドでの出番はあまりないようにも思えます。

では、サーバサイドでjQueryを使うメリットはどんな点なのか。

1つは、「入力フォームの値をset / get しやすい」という点です。

これは今回のサンプルでも明らかだと思います。

もしjQueryを利用していなければ、値のset / get は以下のようになって、コードも長くなり少々面倒です。

document.getElementById('hoge').value = 'moge';

document.forms[0].hoge.value = 'moge';

もう1つは、「スクレイピングしやすい」という点です。

Jaxerでは、以下のコードで任意のページのHTMLを取得できます。

Jaxer.Web.get(url);

これを利用すると、以下のようにjQueryのselectorを用いて取得したHTMLを操作することができます。

$('selector',Jaxer.Web.get(url))

例えば、ページ中のaタグのhref要素を全部取得する場合は、

     var txt = '';
     $('a',Jaxer.Web.get(url)).each(function(){
       txt += $(this).attr('href') + '\n';
     });

こんな感じで。

このままだと正規表現の方が簡単じゃんってことかもしれませんが、ページ中の特定の部分の中身からurlを抜き出したりとかできて、個人的には正規表現でゴリゴリ書くよりやりやすいです(まあ僕が正規表現苦手なだけですが)。

ただ、jQueryのメソッドすべてがサポートされているわけではないので、注意が必要。

Jaxer付属のサンプルページで、jQueryのユニットテストの動作結果が確認できます。

<関連エントリ>

]]>
http://dev.chrisryu.com/2008/01/server_side_jquery_in_jaxer.html http://dev.chrisryu.com/2008/01/server_side_jquery_in_jaxer.html Jaxer Sun, 27 Jan 2008 21:12:37 +0900
Ajax server Aptana JAXERを触ってみた  最近JavaScriptづいていて、サーバサイドもJavaScriptで書きたいなぁと思っていたところに、AptanaからJAXERなるAjax Serverがリリースされたとのニュースがあったので、渡りに船とばかりに触ってみました。

とりあえず動かしてサンプルを見るまでは超簡単。興味がある人は試してみると良いよ。

ということで遊んでみた内容のメモ。

環境構築

JaxerのホームページのDownloadをクリックして、"Download Jaxer for Windows (.zip)"をダウンロード。

ダウンロード後、解凍して、必要なら任意のディレクトリに移動。

解凍後のルートディレクトリにある"StartServer.bat"を実行すると、http://localhost:8081/aptana/ にアクセスすることができます。※環境によってはセキュリティソフトから、Jaxer やApache がネットワークに接続することを許可しろとか言われます。

これだけでOK。もはや環境構築と呼ぶまでもない簡単さです。

サンプルで遊ぶ

上記URLのページを表示して、左側のSample And Tools をクリックすると、サンプルの一覧が表示されます。

 

jaxer_001.png

サンプルの内容は見たまんま、メール送信やRSS取得、タスク管理、チャットなんかが扱えます。個人的にはタスク管理やチャットが普通にまんま使えそうかなと思ったり。

各サンプルは、画面の右上に「HTML」マークがあって、そこからソースを見ることができます。

 

jaxer_002.png

タスク管理やチャット、wikiにユーザ情報等は、付属のSQLiteに保存されます。つまり、サーバ側で、JavaScriptからDBを操作するAPIが提供されています。

一番下のjQuery Compatibilityは、サーバサイドでjQueryのtest suitsを実行した結果が見られます。そこそこ動くようですが、100%ではないようです。↓こんなメッセージが表示されてます。

PLEASE NOTE: The current jQuery test Suite has a number of tests which currently fail. We are working to extend the test coverage to be as complete as possible.

サンプルをちょっと改良して見たいなと思った場合、サンプルの実ファイルは、<Root directory>/jaxer/aptana/samples にあります。

例えばRSS Sample のRSSの取得先を自分のブログにしてみます。

<Root directory>/jaxer/aptana/samples/rss-sample/index.html の

var feed = Jaxer.Web.get("http://www.news.com/2547-1_3-0-20.xml?tag=pre_ft");

のURLを好きなRSSのURLに書き換えて、アクセスすればOKです。※サンプルページに文字コードの指定がないので、文字化けしてしまうこともあります。

自分でアプリを作ってみる

自分でアプリを作る場合は、<Root directory>/public の下にファイルを配置します。

ページ中にJaxerの読み込みがうまくいくと、

<script type="text/javascript">/** Jaxer clientFramework_compressed.js - 

こんな行が、ページのソース中(上部)に書き出されます。

動的な部分はJavaScriptで定義していきます。

<script runat="server">と書かれたタグはサーバ側で動作するJavaScript、<script runat="client">と書かれたタグはクライアント側で動作するJavaScript、<script runat="both">と書かれたタグは両方側で動作するJavaScriptとなります。

DBに接続してSQLを発行したりするJavaScriptはサーバ側にしか書けません。そこで定義された関数をクライアント側から呼び出すことができます。

例えば、サーバ側の関数hoge()をクライアント側から呼び出したいときは、

<script type="text/javascript" runat="server">
function hoge(){
}
hoge.proxy = true;
</script>

としておきます。最後のhoge.proxy = ture;がポイントです。これにより、ページが生成されるとき、

<script type="text/javascript">
function hoge() {return Jaxer.remote("hoge", arguments);}
function hogeAsync(callback) {return Jaxer.remote("hoge", arguments, callback);}
 </script>

というコードがクライアント側に生成され、クライアント側からサーバ側にアクセスし、結果を受け取るということができます。

注意点としては、クライアント側から呼び出したい(つまりhoge.proxy = trueとしたい)関数は、外部.jsファイルではなく、ページ中に書いてある必要があるようです。(これでちょっとはまりました)

Jaxerのウリ

Jaxerの公式サイトトップページに書いてあることですが、以下の点がポイントになります。

  • アプリケーションを.html と.jsファイルで構築できる。
  • サーバ側で、htmlのDOMにアクセスするような記述ができる。
  • ブラウザとサーバがシームレスにコミュニケーションできる。
  • 既存の他の言語で書かれたページにアクセスできる(既存資源を活かせる)。
  • Validationコードをブラウザとサーバで共有できる。
  • データベースやファイル、ソケット通信がJavaScriptから可能になる。
  • 最新のJavaScript標準に則ってる。

個人的にはValidationコードをサーバとクライアントでシェアできるというのが嬉しいですね。Javaでアプリを作っていて、ブラウザ側のチェックとサーバ側のチェックの仕方が微妙に異なり、それがバグにつながるなんてことが結構起こりやすいので。

ただ、サーバ側のJavaScriptファイルがエンドユーザに見えてしまう可能性があるという点がちょっとだけ気になります。SQLとか丸見えだしね。僕が触ったバージョンだと、サーバのJaxerでエラーが発生したとき、クライアント側にサーバ側のJavaScriptソースがまるっと見えちゃって、これはちょっとと思いました。この辺は今後改善されていくのだろうと思います。

というわけで、これを使ってちょっとしたアプリを作ってみようかなと。サンプルを改造するだけでもそこそこのものができそうですし。

興味が沸いた方は、この土日に是非遊んでみてください。

<参考リンク>

]]>
http://dev.chrisryu.com/2008/01/ajax_server_aptana_jaxer.html http://dev.chrisryu.com/2008/01/ajax_server_aptana_jaxer.html Jaxer Fri, 25 Jan 2008 22:23:54 +0900
でぃべろっぱーず・さいど: アーカイブ

アーカイブ

/* Base Weblog (base-weblog.css) */ /* basic elements */ html { margin: 0; /* setting border: 0 hoses ie6 win window inner well border */ padding: 0; } body { margin: 0; /* setting border: 0 hoses ie5 win window inner well border */ padding: 0; font-family: verdana, 'trebuchet ms', sans-serif; font-size: 12px; } form { margin: 0; padding: 0; } a { text-decoration: underline; } a img { border: 0; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } h1, h2, h3, h4, h5, h6, p, ol, ul, pre, blockquote { margin-top: 10px; margin-bottom: 10px; } /* standard helper classes */ .clr { clear: both; overflow: hidden; width: 1px; height: 1px; margin: 0 -1px -1px 0; border: 0; padding: 0; font-size: 0; line-height: 0; } /* .pkg class wraps enclosing block element around inner floated elements */ .pkg:after { content: " "; display: block; visibility: hidden; clear: both; height: 0.1px; font-size: 0.1em; line-height: 0; } * html .pkg { display: inline-block; } /* no ie mac \*/ * html .pkg { height: 1%; } .pkg { display: block; } /* */ /* page layout */ body { text-align: center; } /* center on ie */ #container { position: relative; margin: 0 auto; /* center on everything else */ width: 720px; text-align: left; } #container-inner { position: static; width: auto; } #banner { position: relative; } #banner-inner { position: static; } #pagebody { position: relative; width: 100%; } #pagebody-inner { position: static; width: 100%; } #alpha, #beta, #gamma, #delta { display: inline; /* ie win bugfix */ position: relative; float: left; min-height: 1px; } #delta { float: right; } #alpha-inner, #beta-inner, #gamma-inner, #delta-inner { position: static; } /* banner user/photo */ .banner-user { float: left; overflow: hidden; width: 64px; margin: 0 15px 0 0; border: 0; padding: 0; text-align: center; } .banner-user-photo { display: block; margin: 0 0 2px 0; border: 0; padding: 0; background-position: center center; background-repeat: no-repeat; text-decoration: none !important; } .banner-user-photo img { width: 64px; height: auto; margin: 0; border: 0; padding: 0; } /* content */ .content-nav { margin: 10px; text-align: center; } .date-header, .entry-content { position: static; clear: both; } .entry, .trackbacks, .comments, .archive { position: static; overflow: hidden; clear: both; width: 100%; margin-bottom: 20px; } .entry-content, .trackbacks-info, .trackback-content, .comment-content, .comments-open-content, .comments-closed { clear: both; } .entry-excerpt, .entry-body, .entry-more-link, .entry-more { clear: both; } .entry-footer, .trackback-footer, .comment-footer, .comments-open-footer, .archive-content { clear: both; margin: 5px 10px 20px 10px; } .comments-open label { display: block; } #comment-author, #comment-email, #comment-url, #comment-text { width: 240px; } #comment-bake-cookie { margin-left: 0; vertical-align: middle; } .comments-open-header { clear: both; } #comment-post { font-weight: bold; } img.image-full { width: 100%; } .image-thumbnail { float: left; width: 115px; margin: 0 10px 10px 0; } .image-thumbnail img { width: 115px; height: 115px; margin: 0 0 2px 0; } /* modules */ .module { position: relative; overflow: hidden; width: 100%; } .module-content { position: relative; margin: 5px 10px 20px 10px; } .module-list, .archive-list { margin: 0; padding: 0; list-style: none; } .module-list-item { margin-top: 5px; margin-bottom: 5px; } .module-presence img { vertical-align: middle; } .module-powered .module-content { margin-bottom: 10px; } .module-photo .module-content { text-align: center; } .module-wishlist .module-content { text-align: center; } .module-calendar .module-content table { border-collapse: collapse; } .module-calendar .module-content th, .module-calendar .module-content td { width: 14%; text-align: center; } .typelist-thumbnailed { margin: 0 0 20px 0; } .typelist-thumbnailed .module-list-item { display: block; clear: both; margin: 0; } /* positioniseverything.net/easyclearing.html */ .typelist-thumbnailed .module-list-item:after { content: " "; display: block; visibility: hidden; clear: both; height: 0.1px; font-size: 0.1em; line-height: 0; } * html .typelist-thumbnailed .module-list-item { display: inline-block; } /* no ie mac \*/ * html .typelist-thumbnailed .module-list-item { height: 1%; } .typelist-thumbnailed .module-list-item { display: block; } /* */ .typelist-thumbnail { float: left; min-width: 60px; width: 60px; /* no ie mac \*/width: auto;/* */ margin: 0 5px 0 0; text-align: center; vertical-align: middle; } .typelist-thumbnail img { margin: 5px; } .module-galleries .typelist-thumbnail img { width: 50px; } .typelist-description { margin: 0; padding: 5px; } .module-featured-photo .module-content, .module-photo .module-content { margin: 0; } .module-featured-photo img { width: 100%; } .module-recent-photos { margin: 0 0 15px 0; } .module-recent-photos .module-content { margin: 0; } .module-recent-photos .module-list { display: block; height: 1%; margin: 0; border: 0; padding: 0; list-style: none; } /* positioniseverything.net/easyclearing.html */ .module-recent-photos .module-list:after { content: " "; display: block; visibility: hidden; clear: both; height: 0.1px; font-size: 0.1em; line-height: 0; } * html .module-recent-photos .module-list { display: inline-block; } /* no ie mac \*/ * html .module-recent-photos .module-list { height: 1%; } .module-recent-photos .module-list { display: block; } /* */ .module-recent-photos .module-list-item { display: block; float: left; /* ie win fix \*/ height: 1%; /**/ margin: 0; border: 0; padding: 0; } .module-recent-photos .module-list-item a { display: block; margin: 0; border: 0; padding: 0; } .module-recent-photos .module-list-item img { width: 60px; height: 60px; margin: 0; padding: 0; } /* mmt calendar */ .module-mmt-calendar { margin-bottom: 15px; } .module-mmt-calendar .module-content { margin: 0; } .module-mmt-calendar .module-header { margin: 0; } .module-mmt-calendar .module-header a { text-decoration: none; } .module-mmt-calendar table { width: 100%; } .module-mmt-calendar th { text-align: left; } .module-mmt-calendar td { width: 14%; height: 75px; text-align: left; vertical-align: top; } .day-photo { width: 54px; height: 54px; } .day-photo a { display: block; } .day-photo a img { width: 50px; height: 50px; } /* Vicksburg II (theme-vicksburg.css) */ /* basic page elements */ body { font-family: 'trebuchet ms', verdana, helvetica, arial, sans-serif; font-size: 12px; } a { color: #666666; text-decoration: underline; } a:hover { color: #66cc33; } #banner a { color: #fff; text-decoration: none; } #banner a:hover { color: #fff; } .module-content a { color: #666666; } .module-content a:hover { color: #66cc33; } h1, h2, h3, h4, h5, h6 { font-family: 'trebuchet ms', verdana, helvetica, arial, sans-serif; } .module-header, .trackbacks-header, .comments-header, .comments-open-header, .archive-header { color: #000000; font-family: 'Trebuchet MS', Verdana, sans-serif; font-size: x-small; border-bottom: 1px dashed #999999; text-align: left; font-weight: bold; text-transform: uppercase; padding: 3px; letter-spacing: .3em; } .module-header a, .module-header a:hover, .trackbacks-header a, .trackbacks-header a:hover, .comments-header a, .comments-header a:hover, .comments-open-header a, .comments-open-header a:hover .archive-header a, .archive-header a:hover { color: #fff; } .entry-more-link, .entry-footer, .comment-footer, .trackback-footer, .typelist-thumbnailed { font-size: 11px; } .commenter-profile img { vertical-align: middle; } /* page layout */ body { min-width: 720px; color: #333; background: #FFFFFF; } #container { width: 720px; margin-bottom: 20px; background: #fff; } #container-inner { border-width: 0 5px 5px 5px; border-style: solid; border-color: #FFFFFF; } #banner { width: 710px; /* necessary for ie win */ background: #66cc33; } #banner-inner { padding: 15px 13px; border-width: 0px 0px 0 0px; border-style: solid; border-color: #fff; } .banner-user { width: 70px; margin-top: 5px; font-size: 10px; } .banner-user-photo { border: 1px solid #fff; } #banner-header { margin: 0; color: #fff; font-size: 30px; font-weight: bold; line-height: 1; text-shadow: #666666 0 2px 3px; } #banner-description { margin-top: 5px; margin-bottom: 0; color: #fff; background: none; font-size: 12px; line-height: 1.125; text-shadow: #666666 0 1px 2px; } #alpha { margin: 15px 15px 0 15px; width: 480px; } #beta { width: 200px; background: #e6ecf2; } #gamma, #delta { width: 180px; background: #dddddd; } #beta-inner, #gamma-inner, #delta-inner { padding: 10px 10px 0 10px; border-width: 0px 0px 0px 0; border-style: solid; border-color: #fff; } .date-header { margin-top: 0; font-size: 11px; font-weight: bold; text-transform: uppercase; } .entry-header { margin-top: 0; border-left: 5px solid #66CC33; padding: 0 0 0 10px; color: #000000; font-size: 18px; font-weight: bold; } .entry-content, .comment-content, .trackback-content { margin: 0; line-height: 1.5; } .entry-tags { margin: 0 0 10px 10px; } .entry-tags-header, .entry-tags-list, .entry-tag { display: inline; } .entry-tags-list { list-style:none; padding: 0px; } .entry-footer, .comment-footer, .trackback-footer { margin: 0 0 20px 0; border-top: 1px solid #DDDDDD; padding-top: 3px; color: #666; font-size: 10px; text-align: right; } .comment-content, .trackback-content, .comment-footer, .trackback-footer { margin-left: 10px; } .content-nav { margin-top: 0; } #trackbacks-info { margin: 10px 0; border: 1px dashed #66cc33; padding: 0 10px; color: #292e33; font-size: 11px; text-align: center; background: #dddddd; } .comments-open-footer { margin: 10px 0; } /* modules */ .module { margin: 0 0 10px 0; border-bottom: 1px solid #f3f6f9; background: #DDDDDD; } .module-content { margin: 0 0 10px 0; padding: 10px 10px 0 10px; font-size: 10px; line-height: 1.2; } .module-search input { font-size: 10px; } .module-search #search { width: 100px; } .module-mmt-calendar .module-content table, .module-calendar .module-content table { font-size: 10px; } .module-powered { border-width: 0; } .module-powered .module-content { margin-bottom: 0; border: 1px dashed #66cc33; padding-bottom: 10px; color: #292e33; background: #fff; } .module-photo { background: none; } .module-photo img { border: solid 1px #fff; } .module-list { margin: 0 15px 10px 15px; list-style: disc; } .module-list .module-list { margin: 5px 0 0 0; padding-left: 15px; list-style: circle; } .module-list-item { margin-top: 0; color: #666; line-height: 1.2; } .typelist-thumbnailed .module-list { margin: 0 0 10px 0; list-style: none; } .typelist-thumbnailed .module-list-item { margin: 1px 0; padding: 0; background: #f3f6f9; } .typelist-thumbnail { background: #fff; } .module-photo img { border: 1px solid #fff; } .module-featured-photo { width: 398px; } .module-featured-photo .module-content { margin: 0; border-width: 0; padding: 0; } .module-featured-photo img { width: 398px; } .module-recent-photos .module-content { padding: 10px 0 0 19px; } .module-recent-photos .module-list { margin: 0; } .module-recent-photos .module-list-item { width: 64px; /* mac ie fix */ margin: 0 10px 10px 0; padding: 0; background: none; } .module-recent-photos .module-list-item a { border: #cfd4d9 1px solid; padding: 1px; background: #fff; } .module-recent-photos .module-list-item a:hover { border-color: #666666; background: #fff; } .module-tagcloud .module-list {text-align: center; } .module-tagcloud .module-list { list-style: none; } .module-tagcloud .module-list-item { display: inline; } .module-tagcloud li.taglevel1 { font-size: 19px; } .module-tagcloud li.taglevel2 { font-size: 17px; } .module-tagcloud li.taglevel3 { font-size: 15px; } .module-tagcloud li.taglevel4 { font-size: 13px; } .module-tagcloud li.taglevel5 { font-size: 11px; } .module-tagcloud li.taglevel6 { font-size: 9px; } /* calendar tweaks */ .layout-calendar #alpha { width: 260px; } .layout-calendar #beta { width: 420px; } .layout-calendar #gamma, .layout-calendar #delta { width: 190px; } .layout-calendar #gamma-inner, .layout-calendar #delta-inner { border: 0; padding: 0; } .module-mmt-calendar { width: 398px; } .module-mmt-calendar .module-content { margin: 0; border-width: 0; padding: 10px; } .module-mmt-calendar table { width: 378px; background: #66cc33; } .module-mmt-calendar th { color: #fff; border-top: 1px solid #fff; border-right: 1px solid #f3f6f9; border-bottom: 1px solid #cfd4d9; padding: 2px; text-align: right; font-weight: bold; } .module-mmt-calendar td { border-top: 1px solid #fff; border-right: 1px solid #f3f6f9; border-bottom: 1px solid #cfd4d9; padding: 2px; text-align: right; font-weight: normal; background: #dddddd; } th.weekday-7, td.day-7, td.day-14, td.day-21, td.day-28, td.day-35, td.day-42 { border-right: none; } .module-mmt-calendar td { height: 70px; } .day-photo { width: 49px; height: 49px; } .day-photo a { border: #cfd4d9 1px solid; padding: 1px; background: #fff; } .day-photo a:hover { border-color: #666666; background: #fff; } .day-photo a img { width: 45px; height: 45px; } /* artistic tweaks */ .layout-artistic #alpha { width: 260px; } .layout-artistic #beta { width: 420px; } .layout-artistic #gamma, .layout-artistic #delta { width: 190px; } .layout-artistic #gamma-inner, .layout-artistic #delta-inner { border: 0; padding: 0; } /* moblog1 tweaks */ .layout-moblog1 #alpha { margin: 0; width: 180px; background: #dddddd; } .layout-moblog1 #alpha-inner { padding: 10px 10px 0 10px; border-width: 0px 0 0px 0px; border-style: solid; border-color: #fff; } .layout-moblog1 #beta { margin: 15px 15px 0 15px; width: 320px; background: none; } .layout-moblog1 #beta-inner { padding: 0; border-width: 0; } .layout-moblog1 .module-recent-photos .module-content { padding: 10px 0 0 10px; } /* moblog2 tweaks */ .layout-moblog2 #alpha { margin: 0; width: 86px; background: #dddddd; } .layout-moblog2 #alpha-inner { padding: 10px 10px 0 10px; border-width: 0px 0 0px 0px; border-style: solid; border-color: #fff; } .layout-moblog2 #beta { margin: 15px 15px 0 15px; width: 260px; background: none; } .layout-moblog2 #beta-inner { padding: 0; border-width: 0; } .layout-moblog2 #delta { width: 154px; } .layout-moblog2 .module-recent-photos { border: 0; background: none; } .layout-moblog2 .module-recent-photos .module-content { padding: 0; border: 0; } .layout-moblog2 .module-recent-photos .module-list-item { margin: 0 0 10px 0; } /* timeline tweaks */ .layout-timeline #alpha { width: 260px; } .layout-timeline #beta { width: 420px; } .layout-timeline #gamma, .layout-timeline #delta { width: 190px; } .layout-timeline #gamma-inner, .layout-timeline #delta-inner { border: 0; padding: 0; } /* one-column tweaks */ .layout-one-column body { min-width: 520px; } .layout-one-column #container { width: 520px; } .layout-one-column #banner { width: 510px; } /* necessary for ie win */ /* two-column-left tweaks */ .layout-two-column-left #alpha { margin: 0; width: 200px; background: #dddddd; } .layout-two-column-left #alpha-inner { padding: 10px 10px 0 10px; border-width: 0px 0 0px 0px; border-style: solid; border-color: #fff; } .layout-two-column-left #beta { margin: 15px 15px 0 15px; width: 480px; background: none; } .layout-two-column-left #beta-inner { padding: 0; border-width: 0; } /* three-column tweaks */ .layout-three-column #alpha { margin: 0; width: 180px; background: #DDDDDD; } .layout-three-column #alpha-inner { padding: 10px 10px 0 10px; border-width: 0px 0 0px 0px; border-style: solid; border-color: #fff; } .layout-three-column #beta { margin: 15px 15px 0 15px; width: 320px; background: none; } .layout-three-column #beta-inner { padding: 0; border-width: 0; } /* * Preliminary styles added by Jay for Vicksburg II * for review by Luke/Walt and rest of team */ /* All or multiple templates Suppress underlines on linked entry titles */ .entry-header a { text-decoration: none; } /* Suppress the prev/next nav */ .content-nav { margin: 0px; display: none; } /* Search results templates */ .mt-search-results .search-results-header { border: 2px solid #669; background-color: #666666; color: #eee; padding: 5px; } .mt-search-results .search-results-container { margin-left:10px; } .mt-search-results form#search-form { width: 400px; margin: 0px auto 20px auto; } .mt-search-results form#search-form input#search { width: 80%; } .mt-search-results form#search-form p#search-options { text-align:center; } /* Entry tag display */ div.entry-tags { margin:0 0 10px 10px; } ul.entry-tags-list { list-style:none; padding: 0px; } h4.entry-tags-header, ul.entry-tags-list, li.entry-tag { display: inline; } /* Main index styles Suppress date header on main index */ .main-index .date-header { display: none; } /* Comment preview and individual entry Widen the comment form */ form textarea#comment-text { width:400px; } /* All archive templates Informational "where am I?" module at top of sidebar */ .module-welcome p { font-size: 12px; } .module-content p.first { margin-top:0px; } /* Date-based and category archives Archive title banner at top of page, below blog banner */ .master-archive-index #archive-title, .individual-entry-archive #archive-title, .date-based-archive #archive-title, .category-archive #archive-title { /* ie win (5, 5.5, 6) bugfix */ p\osition: relative; width: 100%; w\idth: auto; margin: 0; border-left: 10px solid #66cc33; padding: 5px; color: #fff; background: #666666; } /* Experimental comment styles Not currently in use anywhere in default templates For testing only... */ #comments-experimental .comment, #comments-experimental .comment .comment-inner { width:36em; } #comments-experimental .comment { padding: 0px; margin: 10px 15px; background-color:#eef; border:2px solid #bbb; } #comments-experimental .comment .comment-inner { position:relative; margin:-5px 0 0 -3px; background:#f3f3ff; border:1px solid #003; } #comments-experimental .comment:hover .comment-inner { border:1px solid #000; background-color: #fff; } #comments-experimental .comment a { text-decoration: none; border-bottom: 1px dotted #666666; } #comments-experimental .comment:hover a { color: #333; border-bottom: 1px solid #666; } #comments-experimental .comment .comment-footer, #comments-experimental .comment .comment-content { margin-right: 25px; margin-left: 25px; margin-bottom: 15px; } #comments-experimental .comment .comment-header { font-size: 16px; margin: 5px auto 5px 10px; text-shadow: #99A 2px 2px 1px #66F; color: #666; } #comments .comment-header { display: none; } #comments .comment-footer-experimental { display: none; } #comments-experimental .comment-footer { display: none; } でぃべろっぱーず・さいど: コメントの保留

コメントを受け付けました。

コメントを受け付けました。受け付けたコメントは、ブログの管理者の承認のため保留されています。

エントリーのページに戻る