image

  • フォト Amazonギフト券
    ※この時計の時刻は、閲覧しているパソコンのものであり、必ずしも正確な時間とは限りません

検索

最近のトラックバック

無料ブログはココログ

« 2007年9月1日 | トップページ | 2007年9月3日 »

2007年9月2日

2007-09-02

xfy/xvcd の svg でマウスイベントを扱う

Svgmouse

- https://www.xfytec.com/community/modules/mydownloads/singlefile.php?cid=58&lid=166
> > xfy Community - xfeyes
として、xfy/xvcd で svg を使った描画による xeye アプリの例が公開された。
これをみて svg でマウスイベントを扱う方法が判った。
(徐々に実験を続けて、オセロゲームの盤面を扱えるようになろうと思う)

そこで、
 - http://www.nagao.nuie.nagoya-u.ac.jp/~yamamoto/svg2/index.html
 > > SVGの勉強会
にある
  svgsample7.svg
  >> マウスを追いかけるサンプルです。
を xfy/xvcd で真似してみた。
svg 全体では、マウス移動イベントを扱い、
描画する円では、マウスクリックとドラッグイベントを扱うようにした例を作成してみた。

$ cat xfeye.xml
<?xml version="1.0" encoding="UTF-8"?>
<?com.xfy vocabulary-connection href="xfeyes.xvcd" ?>
<eyes:root xmlns:eyes="http://xmlns.xfytec.com/samples/xfeyes">
    <eyes:eyes>
    </eyes:eyes>
</eyes:root>

$ cat xfeye.xvcd
<?xml version="1.0" encoding="UTF-8"?>
<!--
   2007-09-02 katoy

   xfy/xvcd をつかって
     http://www.nagao.nuie.nagoya-u.ac.jp/~yamamoto/svg2/index.html
   にある
     http://www.nagao.nuie.nagoya-u.ac.jp/~yamamoto/svg2/svgsample7.svg
   と同様のものを実装した。
   マウスの移動とクリックに反応して、SVG 描画が変化する。
-->

<xvcd:xvcd version="1.0"
    exclude-result-prefixes="#all"
    xmlns:eyes="http://xmlns.xfytec.com/samples/xfeyes"
    xmlns:function="http://xmlns.xfy.com/function"
    xmlns:event="http://xmlns.xfy.com/event"
    xmlns:inst="http://xmlns.xfy.com/instruction"
    xmlns:xvcd="http://xmlns.xfy.com/xvcd"
    xmlns:svg="http://www.w3.org/2000/svg">

    <!-- 定数 -->
    <xvcd:variable name="WIDTH" select="'400'" />
    <xvcd:variable name="HEIGHT" select="'300'" />
    <xvcd:variable name="radiusS" select="'30'" />
    <xvcd:variable name="COLOR0" select="'red'" />
    <xvcd:variable name="COLOR1" select="'blue'" />

    <!-- 円の中心位置, 色 -->
    <xvcd:user-data name="X" value="{$WIDTH * 0.5}" />
    <xvcd:user-data name="Y" value="{$HEIGHT * 0.5}" />
    <xvcd:user-data name="COLOR" value="{$COLOR0}" />

    <xvcd:vocabulary name="xfeyes" match="eyes:root" call-template="root" />

    <!-- ===== コマンド  ========================== -->
    <xvcd:command name="Move">
        <inst:param name="event"/>
        <xvcd:set-user-data name="X" value="{$event/event:*/@component-x}" />
        <xvcd:set-user-data name="Y" value="{$event/event:*/@component-y}" />
    </xvcd:command>

    <xvcd:command name="ChangeColor">
        <inst:param name="event"/>
        <inst:choose>
            <inst:when test="xvcd:user-data('COLOR')=$COLOR0">
                <xvcd:set-user-data name="COLOR" value="{$COLOR1}" />
            </inst:when>
            <inst:otherwise>
                <xvcd:set-user-data name="COLOR" value="{$COLOR0}" />
            </inst:otherwise>
        </inst:choose>
    </xvcd:command>

    <!-- ==== テンプレート =========================== -->
    <xvcd:template name="root">
        <svg:svg width="{$WIDTH}" height="{$HEIGHT}">
            <!-- マウス移動 -->
            <xvcd:action event="event:mouse-moved">
                <inst:param name="event:event" />
                <inst:call name="Move">
                    <inst:with-param name="event" select="$event:event"/>
                </inst:call>
            </xvcd:action>
            <xvcd:call-template name="draw" />
        </svg:svg>
    </xvcd:template>

    <xvcd:template name="draw">
        <!-- 円の表示 -->
        <svg:g>
            <svg:circle cx="{xvcd:user-data('X')}" cy="{xvcd:user-data('Y')}" r="{$radiusS}"
                style="fill:{xvcd:user-data('COLOR')};
                stroke-opacity:1;stroke:rgb(0%,0%,0%);stroke-width:2;stroke-linecap:butt;
                stroke-linejoin:miter;fill-opacity:1;
                fill-rule:nonzero;">
                <!-- マウスクリック -->
                <xvcd:action event="event:mouse-pressed[@button=1]">
                    <inst:param name="event:event" />
                    <inst:call name="ChangeColor">
                        <inst:with-param name="event" select="$event:event"/>
                    </inst:call>
                <!-- マウスドラッグ -->
                </xvcd:action>
                    <xvcd:action event="event:mouse-dragged">
                        <inst:param name="event:event"/>
                    <inst:call name="Move">
                        <inst:with-param name="event" select="$event:event"/>
                    </inst:call>
                </xvcd:action>
            </svg:circle>
        </svg:g>
    </xvcd:template>

</xvcd:xvcd>

郵便番号検索ページをプログラムから利用してみる(その2)

前回は、結果を cosole に出していた。
xfy/xvcd で利用するには、xml 形式で出力したほうが便利である。
そこで、rss 形式出力するように変更した。

$ ruby zipcode-rss.rb "100-0002" | nkf -s
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
  xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/">
  <channel>
    <title>zipcode</title>
    <link>http://www.excite.co.jp/postcode/</link>
    <description>search zipcode</description>
    <item>
      <title>100-0002</title>
      <link>http://www.excite.co.jp/postcode/list/1000002.html</link>
      <description>1, 東京都 千代田区  皇居外苑</description>
      <pubDate>Sun, 02 Sep 2007 12:41:33 +0900</pubDate>
    </item>
  </channel>
</rss>

下に ruby コードを示す。
require 'kconv' を使った 最後の行の .to_s.toutf8 をなくせれば、jruby でも動作するのだが...。
toutf8 をやめると、私の環境では、shift_jis で出力されてしまう...

# excite の郵便番号検索ページを ruby から利用する。
# 検索結果の最初のページ(50件まで) 内容を rss にする。
#   useage: ruby zupcode-rss.rb keyword
#
#   キーワードには、 住所の一部、郵便番号の一部 を指定できる。
#   space で区切って、複数を指定することも可能。
#
# keyword ='赤坂ミッドタウン・タワー(1階)'
# keyword ='100-0002'

$KCODE = "utf-8"

require 'rubygems'
require 'hpricot'
require 'open-uri'
require 'rss'
require 'kconv'

# 郵便番号検索ページの URL
url = 'http://www.excite.co.jp/postcode/'
rdf = 'zipcode.rdf'

keyword = ARGV[0]

doc = Hpricot(open('http://www.excite.co.jp/postcode/search/?keyword=' + keyword))

# rss を生成する
rss = RSS::Maker.make("2.0") { |maker|
  maker.channel.about = rdf
  maker.channel.title = "zipcode"
  maker.channel.description = "search zipcode"
  maker.channel.link = url

  doc.search('//table[4]/tr') { |tr|
    address1 = tr.search('td[1]/font/text()').to_html
    address2 = tr.search('td[1]/text()').to_html
    zipcode = tr.search('td[2]/b/text()').to_html
    if (address2 != "") then
      item = maker.items.new_item

      item.date = Time.new()
      item.title = zipcode
      item.description = address1 + address2
      tr.search('td[4]/font/a').each {|e|
        item.link = 'http://www.excite.co.jp' + e.attributes['href']
      }
    end
  }
}

puts rss.to_s.toutf8
# open(rdf, 'w') {|file|
#  file.write(rss.to_s.toutf8)
#}
#--- End of File ---

ピックアップ: YSTの新アルコリズムはCGMを切り捨てる,親も子供も宿題丸投げ 代行業者が繁盛, etc...

- http://d.hatena.ne.jp/amachang/20070831/1188593290
> > IT戦記 - XPath のパーサ書いた

- http://boxer.ne.jp/column/matsumoto/2007/09/post_44.html
> > ワークスタイルの変革:社内ポータルの活性化

- http://e0166.blog89.fc2.com/blog-entry-265.html
> > モバゲーレポ3。ファミレスで、会話もせずに黙々と携帯をいじる女子学生達に『オヤジ』と言われる*ホームページを作る人のネタ帳

- http://blog.livedoor.jp/news2chplus/archives/50980155.html
> > 【2ch】ニュース速報アワーズ:金で解決…親も子供も宿題丸投げ 代行業者が繁盛

- http://d.hatena.ne.jp/shi3z/20070901
> > shi3zの日記 - プログラマはなぜ半年で辞めるのか

- http://zen.seesaa.net/article/53509151.html
> > メディア・パブ: Google Earthのフライトシミュレーションが本格離陸へ

- http://www.moongift.jp/2007/08/browser3d/
> > MOONGIFT: » 一歩先のインターネットへ「Browser3D」:オープンソースを毎日紹介

- http://usingapi.com/archives/208
> > using API; - YouTubeとTwitterのAPIがそれぞれ機能追加

- http://ameblo.jp/yahooseo/entry-10045581402.html
> > YSTの新アルコリズムは、CGMを切り捨てるSEO|web2.0

> ...
YSTの「本質」が見えてきた。
ブログの評価を下げた。
これは革新的なアルコリズムである。
特に「対Google」とはまっこうから「戦う」アルコリズムである。
...

blog の淘汰が本格的になるのか?
あるいは、別の投稿形式がでてくくるのか?

« 2007年9月1日 | トップページ | 2007年9月3日 »

mokuji

2013年12月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

google

  • twitter
  • __
  • _
    Googleボットチェッカー

合わせて読む

  • 合わせて読む
    フィードメーター - katoy: cocolog あわせて読みたい

リンク