現在JavaScriptの設定が無効になっています。このページを利用するにはJavaScriptの設定を有効にしてください。第1回こんにちは、アプリケーション開発部の市川・洲崎・鈴木です。ギャラリー」が公開され、Yahoo!ツールバー用のボタンを自分で作成できるようになりました。このボタンは、自分専用として使用できるほか、「公開審査」を受け、合格することで、Yahoo!ツールバーを使用しているほかの人も使うことができるようになります。これから、通常のウィザードでは作ることのできない、工夫を凝らしたボタンの作り方を2回に分けて紹介します。工夫したボタンを作るためには、ボタンのソースファイル(XML)を直接編集する必要があります。ボタンのソースファイルのダウンロード方法を説明します。通常の手順でボタンを作成し、作成したボタンのリストから、「編集」ボタンをクリックします。次に、ボタンの編集ページの「ソースファイル編集」タブから、「XMLファイルダウンロード」ボタンをクリックします。これで、ボタンのソースファイルをダウンロードできます。ブックマーク型で作成したボタンのソースファイルは、次のような記述になっています。<menu/></button>このファイルを編集して、いろいろな機能のボタンにしていきます。キーワードを置換する方法まずは、簡単なところからYahoo!検索を行うボタンの作り方を説明します。検索するためには、検索キーワードを入力する必要がありますが、入力の方法として、パラメータを置換する方法が用意されています。置換の方法は、2種類用意されていて、以下のように記述します。{query}{select}Yahoo!ツールバーの検索窓に入力されたキーワードに置換します。ウェブページ上の選択されたキーワードに置換します。実際に、Yahoo!ツールバーの検索窓からキーワードを取得する方法({query})で記述してみると、こんな感じになります。<menu/></button>Yahoo!ツールバーの検索窓にキーワードを入力し、自分で作成した「Yahoo!検索」ボタンをクリックすると、Yahoo!検索が行われます。今、閲覧しているウェブページの文章を、簡単に自分のブログに引用するボタンの作り方を説明します。自分のブログの中で、Wikipediaの記事を引用したい場合。引用したいテキストを範囲選択し、今回作成するYahoo!ブログボタンをクリックすると記事が引用された状態で、ブログの記事作成ページへジャンプします。あとは続けて感想などを書き足し、投稿するだけです。先の検索ボタンと同じ要領でURLのパラメータとして引用記事の文字列を送信することもできますが、文章のように長いものはPOSTする方法が良いでしょう。type>を"search"に変更する必要があります。<method>(送信方法)、<postData>(POSTするデータ)、<encoding>(データをエンコードする方法)を指定する必要があります。ウェブページ上の文章を転記するので、キーワード置換に{select}を使用します。実際に記述してみると、こんな感じになります。<menu/></button>ここで新しく{url}と{title}というキーワード置換を利用してみました。{url}は、閲覧しているウェブページのURLに置換し、{title}は、閲覧しているウェブページのタイトルに置換します。これでウェブページ上の文章を選択し、「Yahoo!ブログ」ボタンをクリックすると、自分のYahoo!ブログの投稿ページに遷移し、閲覧していたウェブページのタイトルとURL、選択された文章を入力フォームに転記できます。IDでログインしてることと、Yahoo!ブログを開設していることが必要になりますので、お忘れなく!また<encoding>には、"shift-jis"、"utf-8"、"euc-jpiso-2022-jp"の4種類が設定できます。サーバー側のエンコード方式に合わせて使い分けてください。次に、メニューにいろいろと表示したボタンの作り方を説明します。JAPANのトップページに遷移するボタンになります。ボタンソースファイルを編集することで、こんなメニューのボタンを作れます。ソースコードは長いので、分割して説明していきます。<style>dropdown</style><style>を"dropdown"にすることで、メニュー型とブックマーク型が一体となったボタンになります。ほかにも"whole"(メニューだけのボタン)、"push"(ブックマーク型のボタン)を指定できます。link"にすることで、ボタンが押されたときの遷移先を設定できます。これは、ブックマーク型のボタンを作成したときと同じです。</item><menu>を設定することで、▼部分をクリックしたときにメニューを表示するボタンになります。最初のメニューには、上記で説明したYahoo!検索ボタンを設定しています。</item>次のメニューには、上記で説明したYahoo!ブログボタンを設定しています。type="separator"/>Yahoo!ブログメニューの下に、セパレーター(境界線)を設定しています。type>を"separator"にすることで設定できます。Blogから取得したRSSのうち、上位5件を表示します。type>を"rss"に設定します。表示する件数は、<limit>で指定します。<limit>は設定しないとRSS内の項目を全件表示します。項目が多い場合は、画面からメニューがあふれてしまうので、ご注意を!また、このソースファイルでは、RSSの取得間隔を6時間に設定しています。RSSの取得間隔は、<refresh>で指定します。値は、分単位で指定し、15分以上の指定ができます。15分未満だったり、<refresh>が設定されていなかったりする場合、取得間隔は、6時間になります。</item>セパレーターを設定し、次に、Yahoo!ツールバースタッフブログのRSSを階層で表示します。type>を"rss"に設定します。RSSを階層で表示するには、<expand>を"false"に設定します。先ほどは、これを"true"で設定しました。"true"で設定すると、メニューに直接項目が表示されます。"false"で設定すると、階層で表示するようになります。階層で表示する場合は、必ず<title>を設定し、メニューに表示されるタイトルを指定する必要があります。任意で<icon>を設定して、メニューに表示されるアイコンを指定することもできます。JAPANの特集一覧のRSS、Yahoo!きっずの特集一覧のRSSを階層で表示しています。こちらも先ほどと同じように、必ず<title>を設定し、任意で<icon>を設定できます。RSSが更新された場合、視覚的に更新されたことを通知できます。それは、<notice>です。<notice>には、次の4種類が設定でき、それぞれ表示が異なります。好みで使い分けてください。</button>最後に</menu></button>の終了タグを設定して、終わりです。いかがだったでしょうか。今回のボタン作成方法紹介は、ここまでです。興味をもたれた方はぜひ、Yahoo!ツールバートップページの右上にある「ボタン作成・管理」から、ボタン作成に挑戦してみてください。次回は、ボタン作成での変数の使いこなし方をご紹介する予定です。JAPANでは情報技術を駆使して人々や社会の課題を一緒に解決していける方を募集しています。詳しくは採用情報をご覧ください。JAPANのサービス開発を支える技術やデザイン、文化を発信しています。Reserved.このページの先頭へ。