使い方ヒント」カテゴリーアーカイブ

ブログ等から機能的にリンクしたい場合

ご自分のブログでmgsコードを公開したい場合。また、そのコードから直接機能的にリンクしたい場合、以下の方法をご利用ください。

サンプルHTML
http://openlick.com/_obj/_tpl/test.html

[1]BODY内にpreタグを使い、コードを記載して
htmlに挿入します

<pre class="mgsj">
-f 0/6 {}(0,1)
</pre>

[2]Javascriptをどこかに追加します。

[jQueryが使える場合]

<script>

jQuery(function($){
  $(".mgsj").on("click",function(){
    var mgs = $(this).html();
    mgs = mgs.replace(/<.*?>/g,'');
    mgs = mgs.replace(/^\s+|\s+$/g,'');
    window.open(
      "http://openlick.com/external/?/p:1/n:"
      + encodeURIComponent(mgs)
    );
  });
});

</script>

[jQueryが使えない場合]
head内か、bodyに挿入します

<script>

window.onload = function () {
  var elements = document.getElementsByTagName('*');
  for (var i=0, len=elements.length; i<len; i++) {
    var element = elements[i];
    if (element.className && element.className.match(/\bmgsj\b/) ){
      element.addEventListener('click', mgsJump, false);
    }
  }
  function mgsJump(){
    var mgs = this.firstChild.nodeValue;
    mgs = mgs.replace(/<.*?>/g, '');
    mgs = mgs.replace(/^\s+|\s+$/g,'');
    window.open(
      "http://openlick.com/?/p:1/n:"
      + encodeURIComponent(mgs)
    );
  }
};

</script>

[3]装飾する場合のスタイルシート

<style>
.mgsj {
background: #eee url(http://openlick.com/_obj/img/clicktoplay.png) no-repeat right top !important;
border: 1px solid #fff;
padding:10px;
cursor: pointer;
}
.mgsj:hover {
opacity: .9;
border: 1px solid #ccc;
}
</style>

[4]ヒント
javascript内で記載している、リンク先の /p:1 を削除すると自動再生しなくなります。

http://openlick.com/?/p:1/n:

http://openlick.com/?/n:

サンプルHTML
http://openlick.com/_obj/_tpl/test.html

動かない!という場合はご連絡ください。

補足

wordpressにてblockquote内でクォーテーション類を使うと勝手に全角に置き換えられたりする場合があるようです。
そのような環境でストローク・コントロールを使う場合は以下をご参考に

mgs = mgs.replace(/’|‘/g, '\'');
mgs = mgs.replace(/”|“/g, '"');