こんにちは、アプリケーション開発部の市川・洲崎・鈴木です。
前回の記事に引き続き、Yahoo!ツールバー用のボタンの作り方をご紹介します。

変数を使いこなそう − {query1} 〜 {query10}

前回ご説明した通り、ツールバーでは{query}や{select}などの記述を用いることで、パラメータの置換が行えました。これらの置換の出来る文字列は"変数"と呼ばれ、ほかにもいくつかの変数が用意されています。
この中でも、特に面白い使い方の出来る{query1} 〜 {query10}の変数について説明したいと思います。

{query}の変数については、先ほどお話をした通り、Yahoo!ツールバーの検索窓に入力されたキーワードに置換するためのものでした。
それに対して、今回使用する{query1} 〜 {query10}の変数は、"検索窓に入力されたもキーワードのうち、スペースで区切られたそれぞれの文字列"になります。
言葉では分かりにくいとおもいますので、以下に具体例を記載します。

上記のように、検索窓にスペース区切りで"本日 東京 天気"という文字列が入力されていると、{query1}が本日、{query2}が東京、{query3}が天気というように、順番にqueryの○番として文字列が変数に割り当てられていきます。

これを利用すると、例えばYahoo!地図のサービスの一つの、周辺検索と連携したボタンを作ることも可能です。
周辺検索のサービスでは、URL中のパラメータqが検索したい周辺部分に該当する文字列となり、パラメータpが探したいものの対象となる文字列として扱われます。
ですので、実際に変数を記述したXMLを作ってみると、こんな感じになります。

<item type="link">
  <title><![CDATA[Yahoo! 地図 周辺検索]]></title>
  <action>
    <url><![CDATA[http://map.yahoo.co.jp/pl?q={query1}&p={query2}&ei=UTF-8&fa=as]]></url>
  </action>
</item>

例えば検索窓に"東京ミッドタウン ランチ"と入力している状態で上記が実行されると、{query1}が東京ミッドタウン、{query2}がランチという文字列に割り当てられているので、東京ミッドタウン周辺のランチの検索結果のページが表示されます。

「ボタンXMLリファレンス」には、路線検索を例にした{query1} 〜 {query10}の使い方が記載されています。そのほかにも、工夫次第で{query1} 〜 {query10}を使うことで面白いボタンが作れると思うので、ぜひこれらの変数を使用したボタンを作ってみてください。

変数を使いこなそう − {url}

さて、もう少し変数を見ていきましょう。今度は{url}の変数です。
こちらの変数は "現在見ているページのURL"に置換されます。なかなか使いどころの難しい変数かとは思いますが、例えばこれらはYahoo!ブックマークのサービスと連携させることが出来ます。
Yahoo!ブックマークでは、あるページのURLが ブックマークのサービスでどれだけ登録されているのか？などの情報を知ることが出来ます。
item部分だけを記述してみると、こんな感じになります。

<item type="link">
  <title><![CDATA[ブックマーク情報]]></title>
  <action>
    <url><![CDATA[http://bookmarks.yahoo.co.jp/url?url={url}]]></url>
  </action>
</item>

上記を実行すると、現在見ていたページが、Yahoo!ブックマークでどれだけ登録されているか、などの情報を見るページに移動します。

いろいろなサイトにいるときに、そのサイトがどれだけYahoo!ブックマークに登録されているかを確認できるので、いろいろなページにいるときに試してみると面白いでしょうね。

おすすめボタン

最後におすすめボタンを紹介しておきたいと思います。
ボタン作成ページからXMLを記述して以下のボタンを作ってみてください。

<?xml version="1.0" encoding="utf-8"?>
<button xmlns="urn:yahoo:jp:toolbar">
  <style>push</style>
  <item type="link">
    <title><![CDATA[知恵袋]]></title>
    <tooltip><![CDATA[知恵袋]]></tooltip>
    <action>
      <url><![CDATA[http://search.chiebukuro.yahoo.co.jp/search/search.php?p={query}]]></url>
　  </action>
  </item>
  <menu/>
</button>

こちらは知恵袋の解決済みの内容を検索するボタンになります。
仕事中、調べ物をしているとき、家でインターネットをしているときなどいろいろな場面で、困ったことがあったら、その内容をツールバーの検索窓に入力して、このボタンを押してみてください。
仕事に集中できない、お腹が痛い、よく肩が凝る、気分が落ち込んでいる、など日々いろいろと困ったことがあると思います。
そんなときにいつでもすぐに、ほかの人たちがどのように同じ問題を解決してきたのか、先人達の"知恵袋"で、あなたの悩みを解決してくれるに違いありません（笑）

最後に

作成したボタンは、自分専用でも使えますが、面白いボタンができあがったら、ぜひ公開審査を申請してみてください。ボタンの作成、公開などはYahoo!ツールバートップページの右上にある「ボタン作成・管理」から行えます。
なお、ボタンの詳しい作り方は、「ボタンXMLリファレンスガイド（PDF）」に記載されています。もっと工夫したボタンを作ってみたいと思った方は、リファレンスガイドもご参照ください。

みなさまこんにちは、TechBlogスタッフの井野です。
明日10月24日（土）に発売されるWEB+DB PRESSにYahoo!オークションスタッフが
記事を寄稿しておりますのでご紹介させていただきます。

おかげ様で、Yahoo!オークションは今年で10周年を迎えました。
初めは、米国Yahoo!で開発したシステムをローカライズし、数十台のマシンでスタートしましたが、
2009年10月現在では稼動サーバー台数は2,800台になり、
出品数でも、1999年12月時点で10万件でしたが、現在の平均総出品数は1,982万件になります。

本書の内容は、上記の数字だけでは語りつくせない、10年間のYahoo!オークション システムの歴史と
設計思想からスケール確保、高速化、安定稼働、さらにWebAPIにいたる・構築・運用方法の紹介
そして今後の展開など非常に充実した内容になっております。
大規模システム開発や運用に関する情報収集などにもぜひ、お役立てください。

目次は下記通りです。

• 第1章：Yahoo!オークションの10年とシステム構成の変遷
• 第2章：Yahoo!オークションの設計思想
• 第3章：日本独自のシステムで目指したこと
• 第4章：Web APIによるオープン化の実現
• コラム Yahoo! JAPAN のOAuth
• コラム Yahoo! ショッピングのWeb API
• 第5章：MySQL利用システムの冗長化
• 第6章：Oracleの使いどころ
• 第7章：24時間停止しないシステムのためのサーバ監視体制
• コラム Yahoo! ショッピングのログ管理
• コラム Yahoo! JAPAN 実験場〜Yahoo! JAPAN の新サービスはこうしてできる〜

オークション記事のほかにもコラムとして、Yahoo! JAPAN のOAuth やYahoo!ショッピングの記事もあります。
又、特集の最後に少しだけTechBlogの紹介もさせていただきました！

Yahoo!デベロッパーネットワーク - オークションAPI
Yahoo!デベロッパーネットワーク - ショッピングAPI
Yahoo!デベロッパーネットワーク - OAuth
Yahoo!デベロッパーネットワークは こちら
APIをご利用前にアプリケーションID の取得を忘れずにお願いします。
登録はこちら

こんにちは、アプリケーション開発部の市川・洲崎・鈴木です。
2009年8月19日に、「Yahoo!ツールバー ギャラリー」が公開され、Yahoo!ツールバー用のボタンを自分で作成できるようになりました。
このボタンは、自分専用として使用できるほか、「公開審査」を受け、合格することで、Yahoo!ツールバーを使用しているほかの人も使うことができるようになります。
これから、通常のウィザードでは作ることのできない、工夫を凝らしたボタンの作り方を2回に分けて紹介します。

ボタンのソースファイルの取得方法

工夫したボタンを作るためには、ボタンのソースファイル（XML）を直接編集する必要があります。まずは、ボタンのソースファイルのダウンロード方法を説明します。
通常の手順でボタンを作成し、作成したボタンのリストから、「編集」ボタンをクリックします。

次に、ボタンの編集ページの「ソースファイル編集」タブから、「XMLファイルダウンロード」ボタンをクリックします。

これで、ボタンのソースファイルをダウンロードできます。
例えば、ブックマーク型で作成したボタンのソースファイルは、次のような記述になっています。

<?xml version="1.0" encoding="utf-8"?>
<button xmlns="urn:yahoo:jp:toolbar">
  <style>push</style>
  <item type="link">
    <title><![CDATA[Yahoo!検索]]></title>
    <action>
      <url><![CDATA[http://search.yahoo.co.jp/]]></url>
    </action>
  </item>
  <menu/>
</button>

このファイルを編集して、いろいろな機能のボタンにしていきます。

検索ボタンを作ろう − キーワードを置換する方法

まずは、簡単なところからYahoo!検索を行うボタンの作り方を説明します。
検索するためには、検索キーワードを入力する必要がありますが、入力の方法として、パラメータを置換する方法が用意されています。置換の方法は、2種類用意されていて、以下のように記述します。

{query}	{select}
Yahoo!ツールバーの検索窓に入力されたキーワードに置換します。	ウェブページ上の選択されたキーワードに置換します。

実際に、Yahoo!ツールバーの検索窓からキーワードを取得する方法（{query}）で記述してみると、こんな感じになります。

<?xml version="1.0" encoding="utf-8"?>
<button xmlns="urn:yahoo:jp:toolbar">
  <style>push</style>
  <item type="link">
    <title><![CDATA[Yahoo!検索]]></title>
    <action>
      <url><![CDATA[http://search.yahoo.co.jp/search?p={query}]]></url>
    </action>
  </item>
  <menu/>
</button>

Yahoo!ツールバーの検索窓にキーワードを入力し、自分で作成した「Yahoo!検索」ボタンをクリックすると、Yahoo!検索が行われます。

ブログ投稿ボタンを作ろう ― POSTでデータを送信する方法

今、閲覧しているウェブページの文章を、簡単に自分のブログに引用するボタンの作り方を説明します。

例えば、自分のブログの中で、Wikipediaの記事を引用したい場合。
引用したいテキストを範囲選択し、今回作成するYahoo!ブログボタンをクリックすると

記事が引用された状態で、ブログの記事作成ページへジャンプします。
あとは続けて感想などを書き足し、投稿するだけです。

では仕組みを説明します。
先の検索ボタンと同じ要領でURLのパラメータとして引用記事の文字列を送信することもできますが、文章のように長いものはPOSTする方法が良いでしょう。

POSTするためには、まず、<item type>を"search"に変更する必要があります。
また<method>（送信方法）、<postData>（POSTするデータ）、<encoding>（データをエンコードする方法）を指定する必要があります。
またウェブページ上の文章を転記するので、キーワード置換に{select}を使用します。
実際に記述してみると、こんな感じになります。

<?xml version="1.0" encoding="utf-8"?>
<button xmlns="urn:yahoo:jp:toolbar">
  <style>push</style>
  <item type="search">
    <title><![CDATA[Yahoo!ブログ]]></title>
    <action>
      <url><![CDATA[http://blogs.yahoo.co.jp/FRONT/blogthis.html]]></url>
      <method>post</method>
      <encoding>utf-8</encoding>
      <postData>
        <![CDATA[title={title}&link={url}&linktitle={title}&str1={select}]]>
      </postData>
    </action>
  </item>
  <menu/>
</button>

ここで新しく{url}と{title}というキーワード置換を利用してみました。
{url}は、閲覧しているウェブページのURLに置換し、{title}は、閲覧しているウェブページのタイトルに置換します。

これでウェブページ上の文章を選択し、「Yahoo!ブログ」ボタンをクリックすると、自分のYahoo!ブログの投稿ページに遷移し、閲覧していたウェブページのタイトルとURL、選択された文章を入力フォームに転記できます。
Yahoo!ブログに投稿するためには、自分のYahoo! JAPAN IDでログインしてることと、Yahoo!ブログを開設していることが必要になりますので、お忘れなく！

また<encoding>には、"shift-jis"、"utf-8"、"euc-jpiso-2022-jp"の4種類が設定できます。サーバー側のエンコード方式に合わせて使い分けてください。

メニューにいろいろ表示したボタンを作ろう − 検索、RSS、2段メニュー混在

次に、メニューにいろいろと表示したボタンの作り方を説明します。
ボタン右側の▼部分をクリックするとメニューが表示され、左側のタイトル部分をクリックすると、Yahoo! JAPANのトップページに遷移するボタンになります。

ボタンソースファイルを編集することで、こんなメニューのボタンを作れます。
ソースコードは長いので、分割して説明していきます。

<?xml version="1.0" encoding="utf-8"?>
<button xmlns="urn:yahoo:jp:toolbar">
  <style>dropdown</style>

<style>を"dropdown"にすることで、メニュー型とブックマーク型が一体となったボタンになります。ほかにも"whole"（メニューだけのボタン）、"push"（ブックマーク型のボタン）を指定できます。

  <item type="link">
    <title><![CDATA[Yahoo! JAPAN]]></title>
    <action>
      <url><![CDATA[http://www.yahoo.co.jp/]]></url>
    </action>
  </item>

<item type>を" link"にすることで、ボタンが押されたときの遷移先を設定できます。これは、ブックマーク型のボタンを作成したときと同じです。

  <menu>
    <item type="link">
      <title><![CDATA[Yahoo!検索]]></title>
      <icon>
        <url><![CDATA[http://downloads.yahoo.co.jp/toolbar/img/gb_09.png]]></url>
      </icon>
      <action>
        <url><![CDATA[http://search.yahoo.co.jp/search?p={query}]]></url>
      </action>
    </item>

<menu>を設定することで、▼部分をクリックしたときにメニューを表示するボタンになります。
最初のメニューには、上記で説明したYahoo!検索ボタンを設定しています。

    <item type="search">
      <title><![CDATA[Yahoo!ブログ]]></title>
      <icon>
        <url><![CDATA[http://downloads.yahoo.co.jp/toolbar/img/gb_10.png]]></url>
      </icon>
      <action>
        <url><![CDATA[http://blogs.yahoo.co.jp/FRONT/blogthis.html]]></url>
        <method>post</method>
        <encoding>utf-8</encoding>
        <postData>
          <![CDATA[title={title}&link={url}&linktitle={title}&str1={select}]]>
        </postData>
      </action>
    </item>

次のメニューには、上記で説明したYahoo!ブログボタンを設定しています。

    <item type="separator"/>

Yahoo!ブログメニューの下に、セパレーター（境界線）を設定しています。
セパレーターは、<item type>を"separator"にすることで設定できます。

    <item type="rss">
      <action>
        <url><![CDATA[http://techblog.yahoo.co.jp/atom.xml]]></url>
        <refresh>360</refresh>
        <expand>true</expand>
        <limit>5</limit>
        <notice>none</notice>
      </action>
    </item>

次に、Yahoo! Tech Blogから取得したRSSのうち、上位5件を表示します。
RSSをメニューに表示するには、<item type>を"rss"に設定します。
表示する件数は、<limit>で指定します。<limit>は設定しないとRSS内の項目を全件表示します。項目が多い場合は、画面からメニューがあふれてしまうので、ご注意を！
また、このソースファイルでは、RSSの取得間隔を6時間に設定しています。
RSSの取得間隔は、<refresh>で指定します。値は、分単位で指定し、15分以上の指定ができます。15分未満だったり、<refresh>が設定されていなかったりする場合、取得間隔は、6時間になります。

    <item type="separator"/>
    <item type="rss">
      <title><![CDATA[Yahoo!ツールバースタッフブログ]]></title>
      <icon>
        <url><![CDATA[http://downloads.yahoo.co.jp/toolbar/img/gb_34.png]]></url>
      </icon>
      <action>
        <url><![CDATA[http://blogs.yahoo.co.jp/yjtb_blog/rss.xml]]></url>
        <refresh>360</refresh>
        <expand>false</expand>
        <notice>star</notice>
      </action>
    </item>

セパレーターを設定し、次に、Yahoo!ツールバースタッフブログのRSSを階層で表示します。
先ほどと同じように、RSSをメニューに表示するには、<item type>を"rss"に設定します。
RSSを階層で表示するには、<expand>を"false"に設定します。先ほどは、これを"true"で設定しました。"true"で設定すると、メニューに直接項目が表示されます。"false"で設定すると、階層で表示するようになります。
また、階層で表示する場合は、必ず<title>を設定し、メニューに表示されるタイトルを指定する必要があります。また、任意で<icon>を設定して、メニューに表示されるアイコンを指定することもできます。

    <item type="rss">
    <title><![CDATA[Yahoo! JAPAN 特集一覧]]></title>
      <icon>
        <url><![CDATA[http://downloads.yahoo.co.jp/toolbar/img/gb_19.png]]></url>
      </icon>
      <action>
        <url><![CDATA[http://event.yahoo.co.jp/list/rss/index.xml]]></url>
        <refresh>360</refresh>
        <expand>false</expand>
        <notice>asterisk</notice>
      </action>
    </item>
    <item type="rss">
      <title><![CDATA[Yahoo!きっず 特集一覧]]></title>
      <icon>
        <url><![CDATA[http://downloads.yahoo.co.jp/toolbar/img/gb_20.png]]></url>
      </icon>
      <action>
        <url><![CDATA[http://rss.kids.yahoo.co.jp/osusume/index.xml]]></url>
        <refresh>360</refresh>
        <expand>false</expand>
        <notice>new</notice>
      </action>
    </item>

続いて、同じようにYahoo! JAPANの特集一覧のRSS、Yahoo!きっずの特集一覧のRSSを階層で表示しています。
こちらも先ほどと同じように、必ず<title>を設定し、任意で<icon>を設定できます。
RSSが更新された場合、視覚的に更新されたことを通知できます。それは、<notice>です。<notice>には、次の4種類が設定でき、それぞれ表示が異なります。
好みで使い分けてください。

None
Star
Asterisk
New

  </menu>
  </button>

最後に</menu></button>の終了タグを設定して、終わりです。

いかがだったでしょうか。今回のボタン作成方法紹介は、ここまでです。
興味をもたれた方はぜひ、Yahoo!ツールバートップページの右上にある「ボタン作成・管理」から、ボタン作成に挑戦してみてください。

次回は、ボタン作成での変数の使いこなし方をご紹介する予定です。