JavaScript

jQuery楽しい＆tweetボタン付けてみました

まさる（高野将、TAKANO Sho） — Thu, 18 Nov 2010 00:50:00 GMT

最近仕事でjQueryを使えるようになったので、いろいろと試してみているのですが、jQueryってよくできてますね。そして面白い♪

ということで、勉強もかねてentryの最後にtweetするためのボタンをつけてみました。

参考にしたのはこちら↓

Twitter/facebookいいね/mixiチェック/GREEいいね/Evernote/はてブのボタンを超カンタンに作れる jQuery.socialbutton プラグインを作ったよ | アイトランス株式会社

どんなコードを書いたか、ソースを見ればわかりますが、紹介しておきます。

<script language="javascript" src="http://masaru.wankuma.com/script/jquery-1.4.4.min.js"></script>
<script language="javascript" src="http://masaru.wankuma.com/script/jquery.socialbutton-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('.post').each(function(i,v){
    var postanchor = $(v).find('a')[0];
    var url = postanchor.href;
    var title = postanchor.innerText;
    $('<div class="tweet"></div>').css('margin-top', '5').appendTo(v);
    $(v).find('.tweet').socialbutton('twitter',{
      button: 'none',
      url: url,
      text: 'まさるblog : ' + title
    });
  });
});
</script>

1,2行目：jQueryとtweetボタンを表示するためのscriptタグです。

4行目：Webページのloadが終わったら実行するfunctionを指定します。

5行目：個々のエントリに対して、eachで列挙して指定したfunctionを実行します。

6～8行目：tweetボタンをつけるエントリのurlとタイトルを取得します。

9行目：entryの最後にtweetボタンを設定するためのdivタグを追加します。（margin-topはちょっと隙間を空けるため）

10～14行目：9行目で追加したdivタグにtweetボタンを設定します。

※ちなみに、.Textのスキンは"Hover”を使っています。

jQueryを使うと、blogのカスタマイズもかなり柔軟にできそうです。今後も機会があればいろいろやってみたいと思います。

Webページの選択箇所をtweetするscriptlet

まさる — Wed, 20 Jan 2010 21:44:00 GMT

まず間違いなく車輪の再発明だろうけど晒す。

javascript:(function(){var%20q=(document.all)?document.selection.createRange().text:(window.getSelection()+'');if(q!==''){q='\"'+q+'\"%20';}url_next='http://twitter.com/home/?status='+encodeURIComponent(q)+encodeURIComponent(document.title)+'%20'+encodeURIComponent(location.href);location.href=url_next})();

登録はこちらからどうぞ

[2010/1/21修正]

Webページの選択箇所を「"」で囲うように修正
選択してない場合、先頭に空白が入ってしまっていたので修正

たとえば、このページで実行すると、次のようなテキストがtwitterのtweet画面に設定されます。

"まず間違いなく車輪の再発明だろうけど晒す。" Webページの選択箇所をtweetするscriptlet http://blogs.wankuma.com/masaru/archive/2010/01/20/185206.aspx

JavaScriptでもClosureを使って（ｒｙ

まさる — Tue, 10 Nov 2009 06:27:00 GMT

Closureを使ってグローバル変数除去の続き。

C#と同じように、JavaScriptでもやってみました。

＃JavaScriptはあんまり得意じゃないけどf(^^;

function Hoge() {
  function get_initializer() {
    alert("test!");
    var s = "hoge"
    return function() { return s; };
  }
  this.get = get_initializer();
}

function test() {
  var hoge = new Hoge();
  alert(hoge.get());
  alert(hoge.get());
}

適当にButtonはっつけて実行すると、次の順でalertが表示されます。

まー、成功かな？

JavaScriptの場合、アクセス修飾子がないし、迂闊なことするとグローバル変数で地獄を見るので、このやり方をうまく使えば結構いいかもしれませんね。

JavaScriptのブラウザ依存の挙動：最後の要素の後のカンマ

まさる — Wed, 28 Nov 2007 23:24:00 GMT

静的サイトをせこせこと作っているのですが、その中で気付いたことをメモ。

JavaScriptでJSONを記述する時や、配列を初期化する際に、

var arr = [
  1,
  2,
  3,
];

var jsonObj = {
  Name : "まさる",
  Age : 27,
};

のように、最後の要素の後に「,」があるような場合、FireFoxだと問題ないのですが、IE、Operaだとエラーになってしまいました。

仕方ないので、

var arr = [
   1
  ,2
  ,3
];

var jsonObj = {
   Name : "まさる"
  ,Age : 27
};

のように書き直しました。

他にもこんなのあるんだろなぁ。めんどくさい・・・