moatextをブックマークレットにしてみた

思いつきでmoatextブックマークレットを作ってみました。
お好きなWebページを「もあもあ」させてみてください。

SafariにてWikipediaのトップページを「もあもあ」させた動画はこちら
=>「もあもあ」の動画
※動画の作成にはDebugMode Winkを使用

使い方

以下のブックマークレットをブックマーク(お気に入り)に追加した上で、お好きなWebページを開き、そのブックマークを選ぶと、そのページが「もあもあ」します。

  • ※スクリプトの衝突などによってうまく「もあもあ」しなかったり、レイアウトが崩れたりするかもしれませんが、ご了承ください。
  • ※文字数が多いサイトなどでは表示が遅くなる場合あります。IE7が特に遅い気がします。
  • ※何回もブックマークレットを実行するとその分エフェクトが追加されます。(どんどん重くなります。)

ブックマークレット

  • ※お気に入りに追加する際にセキュリティの警告が出ると思いますが、それはスクリプトを追加する際には必ず出るものです。

ブックマーク(お気に入り)の追加方法

  • IE
  • リンクを右クリックして、[お気に入りに追加]

  • Firefox
  • リンクを右クリックして、[このリンクをブックマーク]

  • Opera
  • リンクを右クリックして、[ブックマークに追加]

  • Safari
  • リンクをドラッグして、画面上部のブックマークバーにドロップ

  • Chrome
  • ブックマークバーを表示させた上で、リンクをドラッグして、ブックマークバーにドロップ

ブックマークレットのソースの説明

こちらのいつでも jQuery を読み込めるブックマークレット jQuerify | バシャログ。を参考にjQueryとmoatextの外部スクリプトを読み込む処理をブックマークレットにしています。両方読み込んだ後に、body全体にmoatextをかけています。外部スクリプトの読み込み処理については、上記の参考サイトをご覧いただければわかりやすいです。

javascript:
(function(){
  // config
  var jq_url = 'http://labs.bitmeister.jp/moamoa/js/jquery-1.3.2.min.js';
  var moa_url = 'http://labs.bitmeister.jp/moamoa/js/jquery.moatext-min.js';

  // jQuery loading
  var jq=document.createElement('script');
  jq.setAttribute('src',jq_url);
  if (!window['jQuery']){
    document.getElementsByTagName('head')[0].appendChild(jq);
  }
  var moa=document.createElement('script');
  moa.setAttribute('src',moa_url);
  var isJQ = false;
  var id = window.setInterval(function(){
    if (window['jQuery'] &&
      window['jQuery']['fn'] && 
      window['jQuery']['fn']['offset']
    ){
      isJQ = true;
      // jQueryが読み込み終わったら、moatextを読み込む
      if (!window['jQuery']['fn']['moatext'])
        document.getElementsByTagName('head')[0].appendChild(moa);
    }
    if (isJQ == true &&
      window['jQuery']['fn']['moatext'] &&
      window['jQuery']['fn']['moatext']['class_no']
    ){
      window.clearInterval(id);
      jQuery('body').moatext();
    }
  },100);
})();

jQueryおよびmoatextのjsファイルは当社のサイトにあるものを使用しています。もし気になるようでしたら、別の場所においてURLを変更してください。
なお、ブックマークレット化にあたって、上記ソースをyuicompressorにて圧縮しています。

Share on FacebookTweet about this on TwitterShare on Google+Share on TumblrEmail this to someonePrint this page

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*