読者です 読者をやめる 読者になる 読者になる

チリペヂィア

リンクフリー。サンプルコードなどは関連記事内でライセンスについて明示されない限り商用利用なども自由に行って構いませんが、自己責任でお願いします。またこれら日記内容の著作権自体は放棄していません。引用部分については引用元の権利に従ってください。

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とかからガジェットとして表示するだけ。パラメータの意味は本家のツイートボタンを見てください。あんまりツイートしない私には良く分からん機能がいっぱいだ!

ちゅうい

xml本体をGoogleSitesとかでホスティングする時は、xmlは完全な公開状態にしとかないとガジェットとしてロードできない模様です(隠蔽状態でのガジェット開発はできない仕様)。

オマケ:動作がイマイチだったはてブボタンの作りかけ残骸

はてブボタンも書いてみたんですが全然動きません。というか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に上げろと言われそう。