Googleガジェット練習
GoogleSitesってファイル公開用のホスティングに良いのかなーと思って、ふとGoogleガジェットに初挑戦。Webプログラミング的なものはほとんどやった事がないんですが、とりあえずツイートボタンです。現行のツイートボタン設置ページにあるフキダシつきのミニタイプと同じ挙動をする多分。
<?xml version="1.0" encoding="UTF-8" ?> <Module> <!-- Gadget Name --> <ModulePrefs title="Tweet Share Link Button" /> <!-- Definition of params from gadget --> <UserPref name="usePageURL" display_name="Use Page URL" datatype="bool" default_value="true" /> <UserPref name="shareURL" display_name="Share URL" datatype="string" default_value="" /> <UserPref name="usePageTitle" display_name="Use the title of the page" datatype="bool" default_value="true" /> <UserPref name="tweetText" display_name="Tweet Text" datatype="string" default_value="" /> <UserPref name="isShowCount" display_name="Show count" datatype="bool" default_value="true" /> <UserPref name="via" display_name="Via" datatype="string" default_value="" /> <UserPref name="recommend" display_name="Recommend" datatype="string" default_value="" /> <UserPref name="hashtag" display_name="Hashtag" datatype="string" default_value="" /> <UserPref name="isLarge" display_name="Large button" datatype="bool" default_value="false" /> <UserPref name="isDnt" display_name="Opt-out of tailoring Twitter" datatype="bool" default_value="false" /> <Content type="html"> <![CDATA[ <div id="content_div"></div> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> <script type="text/javascript"> function main() { var prefs = new gadgets.Prefs(); var usePageURL = prefs.getBool("usePageURL"); var shareURL = prefs.getString("shareURL"); var usePageTitle = prefs.getBool("usePageTitle"); var tweetText = prefs.getString("tweetText"); var viaName = prefs.getString("via"); var recommend = prefs.getString("recommend"); var hashtag = prefs.getString("hashtag"); var element = document.getElementById('content_div'); var paramsOfA = new Array(); if ((usePageURL == false) && (0 < shareURL.length)) paramsOfA.push('data-url="' + shareURL + '"'); if ((usePageTitle == false) && (0 < tweetText.length)) paramsOfA.push('data-text="' + tweetText + '"'); if (0 < viaName.length) paramsOfA.push('data-via="' + viaName + '"'); if (prefs.getBool("isShowCount") == false) paramsOfA.push('data-count="none"'); if (0 < recommend.length) paramsOfA.push('data-related="' + recommend + '"'); if (0 < hashtag.length) paramsOfA.push('data-hashtags="' + hashtag + '"'); if (prefs.getBool("isLarge") == true) paramsOfA.push('data-size="large"'); if (prefs.getBool("isDnt") == true) paramsOfA.push('data-dnt="true"'); var html = '<a href="https://twitter.com/share" class="twitter-share-button" ' + paramsOfA.join(" ") + '>Tweet</a>'; element.innerHTML = html; } gadgets.util.registerOnLoadHandler(main); </script> ]]> </Content> </Module>
あとはこの中身をutf-8として、"TweetButton.xml"とか適当な名前のxmlで保存して、GoogleSitesとかからガジェットとして表示するだけ。パラメータの意味は本家のツイートボタンを見てください。あんまりツイートしない私には良く分からん機能がいっぱいだ！
さんこー
https://developers.google.com/gadgets/docs/basic?hl=ja
https://about.twitter.com/resources/buttons#tweet
オマケ：動作がイマイチだったはてブボタンの作りかけ残骸
はてブボタンも書いてみたんですが全然動きません。というかbookmark_button.jsが全体的にダメくさいです。jsを流し読みしても、いかにもGoogleSitesやCajaに蹴られそうな部分がたくさん。GoogleSitesってiframeがほとんど使えないもんなぁ…。というか今のはてブボタンは、OpenSocial勢と並べるのにリッチすぎるのかもなぁ、と思ってちょっと見回してみるとはてブボタンをハブってるサイトがかなり増えてるのでこの状況ははてな的には随分よろしくないんではないかしら。
<?xml version="1.0" encoding="UTF-8" ?> <Module> <!-- Gadget Name --> <ModulePrefs title="Hatena Bookmark Button" /> <!-- Definition of params from gadget --> <UserPref name="isSimple" display_name="Simple Minimum" datatype="bool" default_value="false" /> <UserPref name="sightAddress" display_name="Sight Address" datatype="string" default_value="" /> <UserPref name="sightTitle" display_name="Sight Title" datatype="string" default_value="" /> <UserPref name="counter" display_name="BookmarkCounter" default_value="display" datatype="enum" > <EnumValue value="none" /> <EnumValue value="display" /> <EnumValue value="display-vertical" /> </UserPref> <UserPref name="langMode" display_name="Language" default_value="jp" datatype="enum" > <EnumValue value="jp" /> <EnumValue value="en" /> </UserPref> <Content type="html"> <![CDATA[ <div id="content_div_hatena" width="100%" height="100%"> </div> <script type="text/javascript"> function hatenaLoadHandler() { // constants var languageTable = new Array(); languageTable['jp'] = "このエントリーをはてなブックマークに追加"; languageTable['en'] = "Add this entry to Hatena Book Mark"; // params var paramsOfA = new Array(); var prefs = new gadgets.Prefs(); var element = document.getElementById("content_div_hatena"); var isSimple = prefs.getBool("isSimple"); var sightAddress = prefs.getString("sightAddress"); var sightTitle = prefs.getString("sightTitle"); var counter = prefs.getString("counter"); var langMode = prefs.getString("langMode"); paramsOfA.push('href="http://b.hatena.ne.jp/entry/' + sightAddress + '" class="hatena-bookmark-button"'); if (sightTitle != "") paramsOfA.push('data-hatena-bookmark-title="' + sightTitle + '"'); if (isSimple) { paramsOfA.push('data-hatena-bookmark-layout="' + (counter != 'none') ? 'simple' : 'simple-balloon' + '"'); } else { var layouts = { 'none' : 'standard-noballoon', 'display' : 'standard-balloon', 'display-vertical' : 'vertical-balloon' }; paramsOfA.push('data-hatena-bookmark-layout="' + layouts[counter] + '"' ); paramsOfA.push('data-hatena-bookmark-lang="' + langMode + '"'); } paramsOfA.push('title="' + languageTable[langMode] + '"'); var html = '<a target="_blank"' + paramsOfA.join(" ") + '><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="' + languageTable[langMode] + '" width="20" height="20" style="border: none;" /></a>'; element.innerHTML = html; } gadgets.util.registerOnLoadHandler(hatenaLoadHandler); </script> <script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> ]]> </Content> </Module>
そういう私もいい加減Tipsはgithubに上げろと言われそう。
