<span class="mt-enclosure mt-enclosure-image" /><img alt="ブログやサイトにAjaxポップアップメニューを表示" src="http://web-marketing.zako.org/images/PodiPodi.jpg" width="250" height="155" style="" /></span>
<p>キーワードは「Shift + Space」。コマンドを打つとその語句を含むメニューが現われます。コマンドは半角英数のみで実行可能ですが、それでもなかなかのもの。</p>
<!--more-->
<h3 class="header-label">クールなAjaxメニューをつけられる「PodiPodi」</h3>
<p></p>
<p><a href="#" class="podipodi">ここをクリックしてもメニューが出てきます。</a></p>
<h4 class="header-label">メニューに設定可能なもの</h4>
<p>「Shift + Space」を押した後に下記コマンドに含まれる語句を一字だけ半角英数で入力すると出てきます。</p>
<dl>
<dt>コマンド：Bookmarks</dt>
<dd>あらかじめ設定したサイトへのリンク一覧を表示できます。<br /><span class="mt-enclosure mt-enclosure-image" /><img alt="PodiPodi-bookmark.jpg" src="http://web-marketing.zako.org/images/PodiPodi-bookmark.jpg" width="400" height="238" style="" /></span></dd>
<dt>コマンド：Credits</dt><dd>あらかじめ登録した内容を表示します。<br /><span class="mt-enclosure mt-enclosure-image" /><img alt="PodiPodi-Credits.jpg" src="http://web-marketing.zako.org/images/PodiPodi-Credits.jpg" width="400" height="224" style="" /></span></dd>
<dt>コマンド：Tell a friend</dt><dd>友達にこのサイトをメールで教えてあげることができます。<br /><span class="mt-enclosure mt-enclosure-image" /><img alt="tell-a-friend.jpg" src="http://web-marketing.zako.org/images/tell-a-friend.jpg" width="400" height="663" style="" /></span></dd>
<dt>コマンド：YouTube</dt><dd>YouTube動画を検索できます。<br /><span class="mt-enclosure mt-enclosure-image" /><img alt="PodiPodi-youtube.jpg" src="http://web-marketing.zako.org/images/PodiPodi-youtube.jpg" width="400" height="330" style="" /></span></dd>
<dt>コマンド：Google</dt><dd>Google検索できます。<br /><span class="mt-enclosure mt-enclosure-image" /><img alt="PodiPodi-google.jpg" src="http://web-marketing.zako.org/images/PodiPodi-google.jpg" width="400" height="305" style="" /></span></dd>
<dt>コマンド：gadget</dt><dd>設定しておいたGoogle ガジェットを表示できます。<br /><span class="mt-enclosure mt-enclosure-image" /><img alt="PodiPodi-gadget.jpg" src="http://web-marketing.zako.org/images/PodiPodi-gadget.jpg" width="400" height="344" style="" /></span></dd>
<dt>コマンド：comment</dt><dd>著者へコメントを送れます。（※文字化けする場合は管理画面で文字コードをUTF-8にすれば直ります。）<br /><span class="mt-enclosure mt-enclosure-image" /><img alt="PodiPodi-comment.jpg" src="http://web-marketing.zako.org/images/PodiPodi-comment.jpg" width="400" height="368" style="" /></span></dd>
</dl>
<p>その他FlickrやYahoo!、Googleイメージ検索やTwitterの表示などなかなか盛りだくさんのメニューが用意されています。</p>
<p>興味のある方は<a class="web-site-link" href="http://www.podipodi.com/" onclick="window.open('http://www.podipodi.com/'); return false;">PodiPodi</a>へどうぞ。
</p>
<p>もう一度ここで試したい方は<a href="#" class="podipodi">どうぞ</a>。</p>
<h4 class="header-label">スタートアップガイド</h4>
<ol>
<li><a class="web-site-link" href="http://www.podipodi.com/?pid=guide" onclick="window.open('http://www.podipodi.com/?pid=guide'); return false;">PodiPodi</a>のページを開く</li>
<li>下記画像のボタンをクリック<br /><span class="mt-enclosure mt-enclosure-image" /><img alt="登録ボタンの場所" src="http://web-marketing.zako.org/images/PodiPodi-1.jpg" width="400" height="252" style="" /></span>
</li>
<li>下記画像を参考にフォームを入力し、「Submit」ボタンを押せば登録完了<br /><span class="mt-enclosure mt-enclosure-image" /><img alt="フォーム入力サンプル" src="http://web-marketing.zako.org/images/PodiPodi-2.jpg" width="400" height="497" style="" /></span></li>
<li>ログイン後にサイドメニューから「Setting」を選んで下記画像のようなコードを&lt;/Body&gt;タグの直前に貼り付けます（※&lt;/Body&gt;タグの直前以外に貼るとIEで動作しませんでした。）<br /><span class="mt-enclosure mt-enclosure-image" /><img alt="PodiPodi-4.jpg" src="http://web-marketing.zako.org/images/PodiPodi-4.jpg" width="400" height="131" style="" /></span></li>
<li>そしてリンクでメニューを開くようにしたい場合は下記のコードを記事中に貼り付けます<br /><code>&lt;a href=&quot;#&quot; class=&quot;podipodi&quot;&gt;open podipodi&lt;/a&gt;</code></li>
<li>表示させたいコマンドの設定は、下記のように緑になっている状態にすれば表示されます。赤の場合は表示されません<br /><span class="mt-enclosure mt-enclosure-image" /><img alt="PodiPodi-5.gif" src="http://web-marketing.zako.org/images/PodiPodi-5.gif" width="184" height="414" style="" /></span></li>
<li>表示させたい項目を編集し、右上の赤い字の「Not Active」をクリックし、緑の「Active」に変われば表示されるようになります<br /><span class="mt-enclosure mt-enclosure-image" /><img alt="PodiPodi-6.gif" src="http://web-marketing.zako.org/images/PodiPodi-6.gif" width="400" height="242" style="" /></span>
</li></ol>
<p>ショートカットキーで出せるというのもなかなかおもしろい。こういった機能がブラウザで誰もが使う標準のものとなって、サイトごとにオプションでメニューを付け加えられるようになるともっとおもしろくなりそうですよね。</p>
<p>Via：<a class="web-site-link" href="http://del.icio.us/" onclick="window.open('http://del.icio.us/'); return false;">del.icio.us</a></p>
<div class="a-wrap pkg"><div class="a-left-box"><a href="http://www.amazon.co.jp/%E3%83%8F%E3%82%A4%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9Web%E3%82%B5%E3%82%A4%E3%83%88-%E2%80%95%E9%AB%98%E9%80%9F%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E5%AE%9F%E7%8F%BE%E3%81%99%E3%82%8B14%E3%81%AE%E3%83%AB%E3%83%BC%E3%83%AB-Steve-Souders/dp/487311361X%3FSubscriptionId%3D028QVM5GAF1MWA4NBMR2%26tag%3Dsnowboadteamz-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D487311361X" target="_blank"><img class="a-img" src="http://ecx.images-amazon.com/images/I/51hIDIWHmYL._SL160_.jpg" alt="ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール" /></a></div><div class="a-right-box"><div class="a-top-inner"><form class="a-cart-form" method="post" action="http://www.amazon.co.jp/gp/aws/cart/add.html" target="_blank"><input type="hidden" name="AssociateTag" value="snowboadteamz-22" /><input type="hidden" name="SubscriptionId" value="028QVM5GAF1MWA4NBMR2" /><input type="hidden" name="ASIN.1" value="487311361X" /><input type="hidden" name="Quantity.1" value="1" /><input type="image" name="submit.add-to-cart" src="http://rcm-images.amazon.com/images/G/09/extranet/associates/buttons/remote-buy-jp5.gif" /></form></div>
<dl><dt>高速サイトを実現する14のルール - ハイパフォーマンスWebサイト</dt><dd>価格：<span class="a-price-text">￥ 1,890</span></dd><dd>平均評価：4.5</dd><dd>納期：通常24時間以内に発送</dd><dd><a href="http://www.amazon.co.jp/%E3%83%8F%E3%82%A4%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9Web%E3%82%B5%E3%82%A4%E3%83%88-%E2%80%95%E9%AB%98%E9%80%9F%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E5%AE%9F%E7%8F%BE%E3%81%99%E3%82%8B14%E3%81%AE%E3%83%AB%E3%83%BC%E3%83%AB-Steve-Souders/dp/487311361X%3FSubscriptionId%3D028QVM5GAF1MWA4NBMR2%26tag%3Dsnowboadteamz-22%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D487311361X" target="_blank"><br />Amazon で詳細を見る</a> by <a href="http://astore.amazon.co.jp/snowboadteamz-22" title="WEB担当者専門書店" target="_blank">WEB担当者専門書店</a></dd></dl>
</div></div>