<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
		xmlns:xhtml="http://www.w3.org/1999/xhtml"
>

<channel>
	<title>石間謙 勝手ブログ Ver.2.5 &#187; ブログパーツ</title>
	<atom:link href="http://jbar.jp/ishima/tag/%e3%83%96%e3%83%ad%e3%82%b0%e3%83%91%e3%83%bc%e3%83%84/feed" rel="self" type="application/rss+xml" />
	<link>http://jbar.jp/ishima</link>
	<description>IT、iPhone、NOKIA、バー、日本酒、柏、冷麺、釣り、星、フードニングネタを書き綴るサイト</description>
	<lastBuildDate>Wed, 16 May 2012 02:13:44 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.2</generator>
<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://jbar.jp/ishima/tag/%e3%83%96%e3%83%ad%e3%82%b0%e3%83%91%e3%83%bc%e3%83%84/feed" />
		<item>
		<title>ブログパーツのガジェット化</title>
		<link>http://jbar.jp/ishima/google/blogparts_gadgets.html</link>
		<comments>http://jbar.jp/ishima/google/blogparts_gadgets.html#comments</comments>
		<pubDate>Sat, 16 Jan 2010 07:40:54 +0000</pubDate>
		<dc:creator>石間</dc:creator>
				<category><![CDATA[Google]]></category>
		<category><![CDATA[IT]]></category>
		<category><![CDATA[igoogle]]></category>
		<category><![CDATA[ガジェット]]></category>
		<category><![CDATA[ブログパーツ]]></category>

		<guid isPermaLink="false">http://jbar.jp/ishima/?p=594</guid>
		<description><![CDATA[ブログパーツをiGoogleなどでガジェットとして表示する方法を調べた。 ブログパーツまでができていればそれほど難しくなかった。なお、iGoogleのガジェットなので、Googleのアカウントが必要だ。 まず、ガジェット [...]]]></description>
			<content:encoded><![CDATA[<p>ブログパーツをiGoogleなどでガジェットとして表示する方法を調べた。</p>
<p>ブログパーツまでができていればそれほど難しくなかった。なお、iGoogleのガジェットなので、Googleのアカウントが必要だ。<br /> まず、ガジェットにする際にXMLのファイルが必要になる。</p>
<p>これは下記を参考にすればわかりやすいだろう。</p>
<pre style="font: normal normal normal 12px/18px Consolas, Monaco, 'Courier New', Courier, monospace;">Content type="url"　の部分がブログパーツのURLだ。
<pre style="font: normal normal normal 12px/18px Consolas, Monaco, 'Courier New', Courier, monospace;">ModulePrefsのタグには縦横サイズ、タイトル、メールアドレス、説明などの基本情報を設定する。
他にも使えるタグはあるが、詳細は　<a href="http://code.google.com/intl/ja/apis/gadgets/docs/publish.html#Submitting">http://code.google.com/intl/ja/apis/gadgets/docs/publish.html#Submitting</a>　で確認できる。</pre>
<pre style="font: normal normal normal 12px/18px Consolas, Monaco, 'Courier New', Courier, monospace;">文字コードはUTF-8でBOMなしで保存する。保存したファイルは自分のサーバ上にアップロードしておく。</pre>
<pre class="brush: xml; title: ; notranslate">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; ?&gt;
&lt;Module&gt;
&lt;ModulePrefs title=&quot;OzeIwakuraSnow&quot; 

	description=&quot;尾瀬岩鞍の積雪情報&quot;
	author=&quot;Ken Ishima&quot;
	author_email=&quot;ishima@jbar.jp&quot;
/&gt;
&lt;Content type=&quot;url&quot; href=&quot;http://jbar.jp/gadgets/season/parts.php&quot; /&gt;
&lt;/Module&gt;</pre>
<pre style="font: normal normal normal 12px/18px Consolas, Monaco, 'Courier New', Courier, monospace;">次に<a href="http://www.google.com/ig/submit">http://www.google.com/ig/submit</a>　にアクセスする。</pre>
<pre style="font: normal normal normal 12px/18px Consolas, Monaco, 'Courier New', Courier, monospace;"><div id="attachment_600" class="wp-caption alignnone" style="width: 310px"><img class="size-medium wp-image-600" title="ガジェットを作る　XMLファイルの送信" src="http://jbar.jp/ishima/wp-content/uploads/2010/01/WS000011-300x218.jpg" alt="ガジェットを作る　XMLファイルの送信" width="300" height="218" /><p class="wp-caption-text">ガジェットを作る　XMLファイルの送信</p></div></pre>
<pre style="font: normal normal normal 12px/18px Consolas, Monaco, 'Courier New', Courier, monospace;">先ほど作成したXMLファイルのURLを指定して送信する。</pre>
<pre style="font: normal normal normal 12px/18px Consolas, Monaco, 'Courier New', Courier, monospace;">この送信するURLは一度送信すると同じURLは送信できない。修正手段はあるようだが、面倒そうだったので、URLを変えて改めて送信してしまうほうが早い。</pre>
</pre>
<p> </p>
<div id="attachment_596" class="wp-caption alignnone" style="width: 310px"><img class="size-medium wp-image-596 " title="ガジェットを作る　XMLファイルの送信" src="http://jbar.jp/ishima/wp-content/uploads/2010/01/WS000012-300x37.jpg" alt="ガジェットを作る　XMLファイルの送信" width="300" height="37" /><p class="wp-caption-text">ガジェットを作る　XMLファイルの送信</p></div>
<p>送信が完了したら「友達に教えよう」をクリックしてメールアドレスの一覧の下にある「貼り付けるリンク」を表示させる。このリンクをブラウザで開くと下記のような画面が表示される。</p>
<p> </p>
<p><div id="attachment_597" class="wp-caption alignnone" style="width: 310px"><img class="size-medium wp-image-597 " title="ガジェットの作り方　ガジェットの追加" src="http://jbar.jp/ishima/wp-content/uploads/2010/01/WS000013-300x161.jpg" alt="ガジェットの作り方　ガジェットの追加" width="300" height="161" /><p class="wp-caption-text">ガジェットの作り方　ガジェットの追加</p></div>
<p>これで「iGoogle」に追加をクリックする。</p>
<p> </p>
<p><div id="attachment_598" class="wp-caption alignnone" style="width: 310px"><img class="size-medium wp-image-598 " title="ガジェットの作り方　iGoogleに表示される" src="http://jbar.jp/ishima/wp-content/uploads/2010/01/WS000014-300x220.jpg" alt="ガジェットの作り方　iGoogleに表示される" width="300" height="220" /><p class="wp-caption-text">ガジェットの作り方　iGoogleに表示される</p></div>
<p>以上でブログパーツをガジェットにできた。なかなか面白い。一つ勉強になった。</p>
<p>ガジェットのURLができてしまえばgoogleデスクトップでガジェットの追加をするときにそのURLを追加すれば下記のようにデスクトップにガジェットを表示できる。</p>
<p>つまりブログパーツができればここまでできてしまうわけです。下の画像ではブラウザの右横に表示しているのがガジェットです。</p>
<p> </p>
<p><div id="attachment_605" class="wp-caption alignnone" style="width: 310px"><img class="size-medium wp-image-605" title="デスクトップにGoogleガジェットを表示" src="http://jbar.jp/ishima/wp-content/uploads/2010/01/WS000015-300x219.jpg" alt="デスクトップにGoogleガジェットを表示" width="300" height="219" /><p class="wp-caption-text">デスクトップにGoogleガジェットを表示してみた</p></div>
<img src="http://jbar.jp/ishima/?ak_action=api_record_view&id=594&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://jbar.jp/ishima/google/blogparts_gadgets.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://jbar.jp/ishima/google/blogparts_gadgets.html" />
	</item>
		<item>
		<title>ブログパーツを作ってみた２</title>
		<link>http://jbar.jp/ishima/it/blog_parts_20100111.html</link>
		<comments>http://jbar.jp/ishima/it/blog_parts_20100111.html#comments</comments>
		<pubDate>Sun, 10 Jan 2010 17:46:44 +0000</pubDate>
		<dc:creator>石間</dc:creator>
				<category><![CDATA[IT]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[ブログパーツ]]></category>

		<guid isPermaLink="false">http://jbar.jp/ishima/?p=576</guid>
		<description><![CDATA[たまたまSnoopy.Classに触れる機会があったところから始まって、htmlSQL-&#62;ブログパーツ-&#62;JQuery-&#62;Ajaxと流れ、ようやくブログパーツ全般の作り方を習得した。 ブログパーツ上でユ [...]]]></description>
			<content:encoded><![CDATA[<p>たまたま<a href="http://sourceforge.net/projects/snoopy/" mce_href="http://sourceforge.net/projects/snoopy/">Snoopy.Class</a>に触れる機会があったところから始まって、<a href="http://www.jonasjohn.de/lab/htmlsql.htm" mce_href="http://www.jonasjohn.de/lab/htmlsql.htm">htmlSQL</a>-&gt;ブログパーツ-&gt;JQuery-&gt;Ajaxと流れ、ようやくブログパーツ全般の作り方を習得した。<br />
ブログパーツ上でユーザが起こしたアクションを取得して何かを実行させるためには、どうしてもJQueryが避けて通れないが、この3連休を使ってトライしてみたところ、今日（というかすでに昨日から10時間ぶっ続けに近い・・・）、ようやく基本は理解できた（と思う）。でもやっぱりJavaScriptは自分には面倒くさく見えてしまうのだが、ここまでできるのならどうにか忘れないようにしたい。正直ここまでまっとうなブログパーツになるとは思わなかった。</p>
<p>因みにここまでできるとDBとの連動も楽にできるので、意外と活用方法があると思う。DBと連携する必要がない（集計やデータの更新、追加が必要ない）なら前回の記事のようにhtmlSQLとCSVファイルだけでも同じようなことが実現できる。<br />
下記はMySQLのデータベースと連動させて簡単なアンケート・投票ブログパーツを作ってみたものだが、「答える」を押すとJQueryでPHPのスクリプトを呼び出し、DBから選択肢を集計しグラフ表示するようにしてみたものだ。</p>
<p>ただ、グラフも味気ない表示だとつまらないので、進捗バーのように表示されるバーを実現した。これも<a href="http://t.wits.sg/misc/jQueryProgressBar/demo.php" mce_href="http://t.wits.sg/misc/jQueryProgressBar/demo.php">JQuery.ProgressBar</a>で実現している。うーん、JQueryは本当に素晴らしい。</p>
<p>携帯ブラウザがJavaScriptを扱えないので、このまま携帯サイトに流用できないところが惜しいが、PCサイトでも簡単に不特定のユーザからアンケートなどを収集するのに使えるので良いと思う。こういうシステム自体を有料で<a href="http://f32.aaa.livedoor.jp/~azusa/?t=topic&amp;p=webpolls" mce_href="http://f32.aaa.livedoor.jp/~azusa/?t=topic&amp;p=webpolls">提供しているところ</a>もあるようだ。うちでもやってみようか。短時間での重複クリックなどを防止する機能を付ければさらに良いかもしれない。</p>
<p>携帯に関して言えばフロントエンドの部分をFLASHにすればPCと同様の動きにすることも可能だろうが、この前ハマったみたいにFLASHLITE1.xでやるとなると手こずりそうだ。とりあえずは普通のHTMLで作るシンプルなものしか携帯ではできないかもしれない。</p>
<div class="mceTemp">
<dl id="attachment_577" class="wp-caption alignleft" style="width: 217px">
<dt class="wp-caption-dt"><img class="size-full wp-image-577" title="ブログパーツを作る" src="http://jbar.jp/ishima/wp-content/uploads/2010/01/WS000004.JPG" mce_src="http://jbar.jp/ishima/wp-content/uploads/2010/01/WS000004.JPG" alt="ブログパーツを作る" width="207" height="166"></dt>
<dd class="wp-caption-dd">ブログパーツを作る</dd>
</dl>
</div>
<p>質問と選択肢、選択肢が選択された数をDBに格納しておく。<br />
このひな形のDBさえ作っておけばあとはどの質問を表示させるかだけの話なので、スクリプトの使い回しができる。</p>
<p>「答える」をクリックするとDBから現在のデータを取得してバーで表示する。<br style="clear:both;" mce_style="clear:both;"></p>
<div class="mceTemp">
<dl id="attachment_585" class="wp-caption alignleft" style="width: 310px">
<dt class="wp-caption-dt"><img class="size-medium wp-image-585" title="テーブルの構造" src="http://jbar.jp/ishima/wp-content/uploads/2010/01/WS000005-300x100.jpg" mce_src="http://jbar.jp/ishima/wp-content/uploads/2010/01/WS000005-300x100.jpg" alt="テーブルの構造" width="300" height="100"></dt>
<dd class="wp-caption-dd">テーブルの構造</dd>
</dl>
</div>
<p>テーブルは「質問の番号」「質問の内容」「選択肢１」「選択肢２」「選択肢３」「選択肢１の選択数」「選択肢２の選択数」「選択肢３の選択数」で構成した。選択肢の数を最大５程度で作っておいてもよいかもしれない。</p>
<p>左の画像ではわからないが、本来はウェブサイトにブログパーツとして貼り付けているが、ページ全体を読み込みしなおさないので動きがスムーズだ。<br />
アクションの取得などはJavaScriptが行い、それ以外をPHPで処理しているので、一応Ajaxなブログパーツということになるのかな？</p>
<p>左の例ではバーはパーセント表示だが、もちろん数量でも表示できる。</p>
<p>まだまだアイデアは湧きそうだ。</p>
<div class="mceTemp">
<dl id="attachment_578" class="wp-caption alignleft" style="width: 220px">
<dt class="wp-caption-dt"><img class="size-full wp-image-578" title="ブログパーツを作る" src="http://jbar.jp/ishima/wp-content/uploads/2010/01/WS000003.JPG" mce_src="http://jbar.jp/ishima/wp-content/uploads/2010/01/WS000003.JPG" alt="ブログパーツを作る" width="210" height="261"></dt>
<dd class="wp-caption-dd">ブログパーツを作る</dd>
</dl>
</div>
<img src="http://jbar.jp/ishima/?ak_action=api_record_view&id=576&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://jbar.jp/ishima/it/blog_parts_20100111.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://jbar.jp/ishima/it/blog_parts_20100111.html" />
	</item>
	</channel>
</rss>

