下記のスクリプトをご覧ください。ソーシャルブックマークボタンのスクリプトです。


http://rw-git.com/social_test.js

このスクリプトの最後の部分

$(".entry .theme").eq(i).append(" <span>"+l+" "+gpo+"<br>"+k+" "+n+" "+d+"<br>"+g+" "+e+" "+a+" "+f+" "+dl+" "+dg+" "+p+" "+ns+" "+iz+" "+bz+"</span>")

これがWEB上の見栄えの部分になります。
このスクリプトをHTML上で、

<!-- SOCIAL -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://rw-git.com/social_test.js"></script>
<!-- /SOCIAL -->

このように呼び出すことで使用するのですが、出来れば外部ファイルの見栄えの部分を抜き出して上記のHTML上に呼び出す部分に追記させてやりたいのですがどのようにしたらよろしいですか?

回答の条件
  • 1人3回まで
  • 13歳以上
  • 登録:2011/09/22 22:05:38
  • 終了:2011/09/24 02:41:18

ベストアンサー

id:Cherenkov No.3

Cherenkov回答回数1502ベストアンサー獲得回数4922011/09/23 15:34:09

ポイント100pt

こういうことですか?単純なDOM操作なのでテンプレートみたいなコントロールをしたいならもっと練る必要があるけど。


サンプル

http://jsfiddle.net/bMAms/2/

<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<!-- SOCIAL -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://rw-git.com/social_test.js"></script>
<!-- /SOCIAL -->
<script type="text/javascript">
$(function() {

//1, 改行を自由に入れれるようにする
//deliciousの前に改行を挿入
$(".entry .theme > span .Delicious").before('<br>');
//イザの後ろに改行を挿入
$(".entry .theme a[href^='http://www.iza.ne.jp']").after('<br>');


//2, 順番を入れ替えれるようにする
//facebookのmixiの後ろに移動する
var fb = $(".entry .theme iframe[src^='http://www.facebook.com']");
$(".entry .theme .mixi").after(fb);


//3, 使わないブックマークを表示させない
//グリーを削除
$(".entry .theme a[href^='http://gree.jp/']").remove();


//4,.entry .themeから.entry .footに移動
$(".entry .foot").append($(".entry .theme > span"));

});
</script>
</head>
<body>
<div class="entry">
	<div class="theme"></div>
	<div class="foot">
		<a href="hoge.html">記事URL</a>
	</div>
</div>
</body>
</html>


追記:

変数をグローバル化

http://jsfiddle.net/bMAms/3/

<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<!-- SOCIAL -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<!--<script type="text/javascript" src="http://rw-git.com/social_test.js"></script>-->
<script type="text/javascript">
$(function(){var c=location.href;var m=document.title;var h=$(".foot a:contains('記事URL')");for(i=0;i<h.length;i++){var c=h[i];var p='<a href="http://gree.jp/?mode=share&act=write&button_type=4&button_size=16&url='+c+'" target="blank" TITLE="GREE Social Feedbackに登録"><img src="http://i.gree.jp/img/share/button/btn_logo_16.png" width="16" height="16"></a>';var n='<iframe src="http://www.facebook.com/plugins/like.php?href='+c+'&amp;layout=button_count&amp;show_faces=true&amp;width=70&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:75px; height:21px;" allowTransparency="true"></iframe> ';var l='<a href="http://b.hatena.ne.jp/append?'+c+'" target="blank" CLASS="hatebu" TITLE="はてなブックマークに登録"><img height="20" width="20" src="http://b.st-hatena.com/images/entry-button/button-only.gif" /></a> <a href="http://b.hatena.ne.jp/entry/'+c+'" target="blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/'+c+'" /></a>';var d='<a href="http://mixi.jp/simplepost/voice?status='+m+""+c+'" target="blank" CLASS="mixi" TITLE="mixiボイスでこの記事について呟く"><img src="http://img.mixi.jp/img/basic/mixicheck_entry/bt_voice_1.png"></a>';var e='<a href="http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t='+m+"&amp;u="+c+'" target="blank" CLASS="yahoo" TITLE="Yahooブックマークに登録"><img src="http://i.yimg.jp/images/sicons/ybm16.gif" width="16" height="16"></a>';var g='<a href="http://clip.livedoor.com/redirect?link='+c+"&title="+m+'" CLASS="ldclip-redirect" target="blank" TITLE="livedoorクリップに登録"><img src="http://parts.blog.livedoor.jp/img/cmn/clip_16_16_w.gif" width="16" height="16"></a>';var b='<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="affilifollowall" data-text="'+m+' " data-url="'+c+'">Tweet</a>';var k=b+'<script type="text/javascript" src="http://platform.twitter.com/widgets.js"><\/script>';var f='<a href="http://www.google.com/bookmarks/mark?op=edit&bkmk='+c+"&title="+m+'" target="_blank" CLASS="google" TITLE="Googleブックマークに登録"><img src="http://www.google.co.jp/favicon.ico" width="16" height="16"></a>';var a='<a href="http://clips.yahoo.co.jp/my/addclip/clipbutton?title='+m+"&url="+c+'" target="_blank" CLASS="yahooclip" TITLE="Yahooクリップに登録"><img src="http://i.yimg.jp/images/sicons/clip16.gif" width="16" height="16"></a>';var dl='<a href="http://www.delicious.com/save?v=5&noui&jump=close&url='+c+"&amp;title="+m+'" target="blank" CLASS="Delicious" TITLE="Deliciousに登録"><img src="http://l.yimg.com/hr/img/delicious.small.gif" width="16" height="16"></a>';var ns='<a href="http://newsing.jp/nbutton?url='+c+"&title="+m+'" CLASS="newsing" target="blank" TITLE="newsingに登録"><img src="http://image.newsing.jp/common/images/newsingit/newsing_button_16.gif" width="16" height="16"></a>';var iz='<a href="http://www.iza.ne.jp/bookmark/add/regist/back/'+c+'" target="blank" TITLE="イザ!ブックマークに登録"><img src="http://www.iza.ne.jp/images/common/bookmark_icon22.gif" width="16" height="16"></a>';var bz='<a href="http://buzzurl.jp/entry/'+c+'" target="blank" TITLE="Buzzurlに登録"><img src="http://buzzurl.jp.eimg.jp/static/image/api/icon/add_icon_mini_08.gif" width="16" height="16"></a>';var dg='<a href="http://digg.com/submit?url='+c+"&title="+m+'" target="blank" TITLE="diggに登録"><img src="http://widgets.digg.com/img/button/diggThisDigger.png" width="16" height="16"></a>';var gpo='<g:plusone size="medium"></g:plusone>';
$(".entry .theme").eq(i).append(" <span>"+l+" "+gpo+"<br>"+k+" "+n+" "+d+"<br>"+g+" "+e+" "+a+" "+f+" "+dl+" "+dg+" "+p+" "+ns+" "+iz+" "+bz+"</span>");
window.l = l;
window.gpo = gpo;
window.k = k;
window.n = n;
window.d = d;
window.g = g;
window.e = e;
window.a = a;
window.f = f;
window.dl = dl;
window.dg = dg;
window.p = p;
window.ns = ns;
window.iz = iz;
window.bz = bz;
}});
</script>
<!-- /SOCIAL -->
<script type="text/javascript">
$(function() {
  $('.new_entry').html(p + iz + '<br>' + n);

});
</script>
</head>
<body>
<div class="entry">
	<div class="theme"></div>
	<div class="foot">
		<a href="hoge.html">記事URL</a>
	</div>
</div>
<br><br>
<div class="new_entry">
<div>
</body>
</html>
id:casheye777

すみません、時間差でこの回答を見ずにコメントを出してしまいました。

ほぼリクエストさせていただいた部分をクリアしている内容で大変助かります。

お聞きしたいのは、jqueryの呼び出しはhtmlのヘッダー以外で(スクリプトの直前で)読み込んでも問題ないでしょうか?

もう一つは特定の改行は削除可能でしょうか?こちらに関しては不可であれば最初改行を内包しない状態の外部ファイルを用意し、必要に応じて入れて貰う方法が取れると思うのである程度自己解決は可能なのですが、ご意見いただければと思います。

2011/09/23 15:43:00

その他の回答(2件)

id:Jupiter2100 No.1

じゅぴたー回答回数444ベストアンサー獲得回数742011/09/22 22:41:30

ポイント100pt

ご質問の主旨で分からない部分があります。

見栄えの部分を抜き出して

この部分の意味を具体的にお知らせください。

質問で抜き出されている部分は、多くの変数が関数の他の部分と絡んでいますので、それだけ抜き出しても何の機能も果たさないと思います。変数の扱いをどうすべきなのか、お知らせください。

id:casheye777

じゅぴたー さんへ

ボクもJavaScriptのスコープなどの詳細な知識が無いので変数の説明がうまくできない部分があるかもしれませんが、主旨としましては「HTMLに書きこむほうで見栄えを指定したい」です。

外部ファイルにボタンの生成から見栄えまで全て内包されている状態から、「見栄え」に当たる部分を抜き出すための外部ファイルの変更点と呼び出し部分の変更点を示唆していただけたらと思っています。

2011/09/22 23:46:25
id:Cherenkov No.2

Cherenkov回答回数1502ベストアンサー獲得回数4922011/09/23 10:54:09

ポイント100pt

部分的に抜き出すのはいろいろ面倒そうなので、spanにidを付けて、後からjavascriptを使って見栄えを編集するようにしてみてはいかがでしょうか。


$(".entry .theme").eq(i).append(" <span id='mySocial'>"+l+" "+gpo+"<br>"+k+" "+n+" "+d+"<br>"+g+" "+e+" "+a+" "+f+" "+dl+" "+dg+" "+p+" "+ns+" "+iz+" "+bz+"</span>")

のように編集して、以下のように呼び出して加工する

<!-- SOCIAL -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://rw-git.com/social_test.js"></script>
<script type="text/javascript">
//$('#mySocial')で呼び出してJavaScriptでDOMを編集する。
</script>
<!-- /SOCIAL -->

どう見栄えを変えたいのかと、span内のHTMLをコメントにでも書いてもらえれば具体的なアドバイスができます。




元の見栄え http://jsfiddle.net/bMAms/

簡単なサンプル http://jsfiddle.net/bMAms/1/

<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<!-- SOCIAL -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://rw-git.com/social_test.js"></script>
<!-- /SOCIAL -->
<script type="text/javascript">
$(function() {
//グリーを削除
$(".entry .theme a[href^='http://gree.jp/']").remove();

//brタグを削除
$(".entry .theme > span > br").remove();

});
</script>
</head>
<body>
<div class="entry">
<div class="theme"></div>
</div>
<div class="foot">
<a href="hoge.html">記事URL</a>
</div>
</body>
</html>

これで再現はできますね。どう見栄えを変えたいのでしょうか。

(id付けなくても$(".entry .theme")で辿ればいけますね)



参考:

id:casheye777

回答有難うございます

狙いとしては、外部ファイルはいじらずに呼び出す側で見栄えをコントロールできるようにすることで、外部ファイルの多数ユーザでの使い回しができるようにしたいということです。

見栄えについてカスタマイズしたい点は、

1, 改行を自由に入れれるようにする

2, 順番を入れ替えれるようにする

3, 使わないブックマークを表示させない

4, 記事タイトル部分か記事フッターかを選択できるようにする(entry .themeの部分がその指定に当たる部分です。entry .footが記事の一番下に表示)

この4点です。実際回答にあった方法で簡単に3は実現できると思います。

この4点をカスタマイズできるようにするための改善点を示唆していただけたらと思っています。

4に関してはできなくても構いませんが、(外部ファイルをタイトル用とフッター用の2つを用意することで対応できると思うので)1と2と3は必須です。

よろしくお願いします。

2011/09/23 14:50:12
id:Cherenkov No.3

Cherenkov回答回数1502ベストアンサー獲得回数4922011/09/23 15:34:09ここでベストアンサー

ポイント100pt

こういうことですか?単純なDOM操作なのでテンプレートみたいなコントロールをしたいならもっと練る必要があるけど。


サンプル

http://jsfiddle.net/bMAms/2/

<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<!-- SOCIAL -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://rw-git.com/social_test.js"></script>
<!-- /SOCIAL -->
<script type="text/javascript">
$(function() {

//1, 改行を自由に入れれるようにする
//deliciousの前に改行を挿入
$(".entry .theme > span .Delicious").before('<br>');
//イザの後ろに改行を挿入
$(".entry .theme a[href^='http://www.iza.ne.jp']").after('<br>');


//2, 順番を入れ替えれるようにする
//facebookのmixiの後ろに移動する
var fb = $(".entry .theme iframe[src^='http://www.facebook.com']");
$(".entry .theme .mixi").after(fb);


//3, 使わないブックマークを表示させない
//グリーを削除
$(".entry .theme a[href^='http://gree.jp/']").remove();


//4,.entry .themeから.entry .footに移動
$(".entry .foot").append($(".entry .theme > span"));

});
</script>
</head>
<body>
<div class="entry">
	<div class="theme"></div>
	<div class="foot">
		<a href="hoge.html">記事URL</a>
	</div>
</div>
</body>
</html>


追記:

変数をグローバル化

http://jsfiddle.net/bMAms/3/

<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<!-- SOCIAL -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<!--<script type="text/javascript" src="http://rw-git.com/social_test.js"></script>-->
<script type="text/javascript">
$(function(){var c=location.href;var m=document.title;var h=$(".foot a:contains('記事URL')");for(i=0;i<h.length;i++){var c=h[i];var p='<a href="http://gree.jp/?mode=share&act=write&button_type=4&button_size=16&url='+c+'" target="blank" TITLE="GREE Social Feedbackに登録"><img src="http://i.gree.jp/img/share/button/btn_logo_16.png" width="16" height="16"></a>';var n='<iframe src="http://www.facebook.com/plugins/like.php?href='+c+'&amp;layout=button_count&amp;show_faces=true&amp;width=70&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:75px; height:21px;" allowTransparency="true"></iframe> ';var l='<a href="http://b.hatena.ne.jp/append?'+c+'" target="blank" CLASS="hatebu" TITLE="はてなブックマークに登録"><img height="20" width="20" src="http://b.st-hatena.com/images/entry-button/button-only.gif" /></a> <a href="http://b.hatena.ne.jp/entry/'+c+'" target="blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/'+c+'" /></a>';var d='<a href="http://mixi.jp/simplepost/voice?status='+m+""+c+'" target="blank" CLASS="mixi" TITLE="mixiボイスでこの記事について呟く"><img src="http://img.mixi.jp/img/basic/mixicheck_entry/bt_voice_1.png"></a>';var e='<a href="http://bookmarks.yahoo.co.jp/bookmarklet/showpopup?t='+m+"&amp;u="+c+'" target="blank" CLASS="yahoo" TITLE="Yahooブックマークに登録"><img src="http://i.yimg.jp/images/sicons/ybm16.gif" width="16" height="16"></a>';var g='<a href="http://clip.livedoor.com/redirect?link='+c+"&title="+m+'" CLASS="ldclip-redirect" target="blank" TITLE="livedoorクリップに登録"><img src="http://parts.blog.livedoor.jp/img/cmn/clip_16_16_w.gif" width="16" height="16"></a>';var b='<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="affilifollowall" data-text="'+m+' " data-url="'+c+'">Tweet</a>';var k=b+'<script type="text/javascript" src="http://platform.twitter.com/widgets.js"><\/script>';var f='<a href="http://www.google.com/bookmarks/mark?op=edit&bkmk='+c+"&title="+m+'" target="_blank" CLASS="google" TITLE="Googleブックマークに登録"><img src="http://www.google.co.jp/favicon.ico" width="16" height="16"></a>';var a='<a href="http://clips.yahoo.co.jp/my/addclip/clipbutton?title='+m+"&url="+c+'" target="_blank" CLASS="yahooclip" TITLE="Yahooクリップに登録"><img src="http://i.yimg.jp/images/sicons/clip16.gif" width="16" height="16"></a>';var dl='<a href="http://www.delicious.com/save?v=5&noui&jump=close&url='+c+"&amp;title="+m+'" target="blank" CLASS="Delicious" TITLE="Deliciousに登録"><img src="http://l.yimg.com/hr/img/delicious.small.gif" width="16" height="16"></a>';var ns='<a href="http://newsing.jp/nbutton?url='+c+"&title="+m+'" CLASS="newsing" target="blank" TITLE="newsingに登録"><img src="http://image.newsing.jp/common/images/newsingit/newsing_button_16.gif" width="16" height="16"></a>';var iz='<a href="http://www.iza.ne.jp/bookmark/add/regist/back/'+c+'" target="blank" TITLE="イザ!ブックマークに登録"><img src="http://www.iza.ne.jp/images/common/bookmark_icon22.gif" width="16" height="16"></a>';var bz='<a href="http://buzzurl.jp/entry/'+c+'" target="blank" TITLE="Buzzurlに登録"><img src="http://buzzurl.jp.eimg.jp/static/image/api/icon/add_icon_mini_08.gif" width="16" height="16"></a>';var dg='<a href="http://digg.com/submit?url='+c+"&title="+m+'" target="blank" TITLE="diggに登録"><img src="http://widgets.digg.com/img/button/diggThisDigger.png" width="16" height="16"></a>';var gpo='<g:plusone size="medium"></g:plusone>';
$(".entry .theme").eq(i).append(" <span>"+l+" "+gpo+"<br>"+k+" "+n+" "+d+"<br>"+g+" "+e+" "+a+" "+f+" "+dl+" "+dg+" "+p+" "+ns+" "+iz+" "+bz+"</span>");
window.l = l;
window.gpo = gpo;
window.k = k;
window.n = n;
window.d = d;
window.g = g;
window.e = e;
window.a = a;
window.f = f;
window.dl = dl;
window.dg = dg;
window.p = p;
window.ns = ns;
window.iz = iz;
window.bz = bz;
}});
</script>
<!-- /SOCIAL -->
<script type="text/javascript">
$(function() {
  $('.new_entry').html(p + iz + '<br>' + n);

});
</script>
</head>
<body>
<div class="entry">
	<div class="theme"></div>
	<div class="foot">
		<a href="hoge.html">記事URL</a>
	</div>
</div>
<br><br>
<div class="new_entry">
<div>
</body>
</html>
id:casheye777

すみません、時間差でこの回答を見ずにコメントを出してしまいました。

ほぼリクエストさせていただいた部分をクリアしている内容で大変助かります。

お聞きしたいのは、jqueryの呼び出しはhtmlのヘッダー以外で(スクリプトの直前で)読み込んでも問題ないでしょうか?

もう一つは特定の改行は削除可能でしょうか?こちらに関しては不可であれば最初改行を内包しない状態の外部ファイルを用意し、必要に応じて入れて貰う方法が取れると思うのである程度自己解決は可能なのですが、ご意見いただければと思います。

2011/09/23 15:43:00
  • id:casheye777
    ベストな回答には別途200ポイント贈呈したいと思います。

    全く同じ場合は先に回答していただいた方へお送りいたします。

    よろしくお願いいたします。
  • id:taknt
    おっ、コメントで済むようなことまで回答している。
    さすが、ポイント付きのみ質問回答者だね。
  • id:casheye777
    ボクの質問がアバウトすぎたのをフォローしてもらって助かりましたし、目に留めてもらえた事自体感謝です。

    通常ならばスクリプトの結果を得るだけなら完成しているものをこういった形で分割することってニーズとして低いことなので、言語が違うプログラム知識を多少持ってる程度のボクにはなかなか回答を得る事が出来なかったのですが、JavaScriptに詳しい方いましたらヒントでも構いませんのでどんどん回答していただけたら助かります。
  • id:Cherenkov
    外部ファイル(social_test.js)は一切編集せずに、呼び出す側で見栄えを変更ですか?
  • id:casheye777
    いえ、外部ファイルも変更は絶対必要になると思いますので、外部ファイルとHTML側それぞれの変更点を教えていただければと思います。

    使いまわす段階で変更が必要ないものになれば構わないので、今の段階では必要に応じて変更することに問題はありません。

    出来ればHTML側の記述量が少なければベストです。(元々記述量に制限があるのが外部ファイル化する大きな理由なので)

    よろしくお願いいたします。
  • id:Cherenkov
    外部ファイルを編集してもいいなら、単純に変数をグローバル化してみてはどうでしょうか。

    $(".entry .theme").eq(i).append(" <span>"+l+" "+gpo+"<br>"+k+" "+n+" "+d+"<br>"+g+" "+e+" "+a+" "+f+" "+dl+" "+dg+" "+p+" "+ns+" "+iz+" "+bz+"</span>");
    window.l = l;
    window.gpo = gpo;
    こんな感じでwindowを付けてグローバル化すれば、外から変数にアクセスできます。
  • id:Cherenkov
    変数をグローバル化する例を追記しました。
    window.~の部分をsocial_test.jsに書き加えれば同じ事です。


    >jqueryの呼び出し
    jqueryをロードした後なら$(function(){ //ここ });でどこにでも書けます。


    >特定の改行は削除可能でしょうか?
    改行のセレクタが書ければ削除できます。
    できない場合は周辺のhtmlを提示してください。
  • id:casheye777
    動作確認してみます。

    すこしお時間をいただくこととなると思いますが、こちらに結果についてコメントださせて頂きます。
  • id:casheye777
    動作確認できました。

    コードのその他の部分で問題があり実用化はもう少し掛かりそうですが、質問でお願いしていた要件は全てCherenkovさんが示唆してくれた方法で解決することが出来ました。

    じゅぴたーさん、Cherenkovさん回答していただきありがとうございました。

    このコメントをもって終了とさせて頂きます。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません