Know Knight Mad Yakue (仮) @ blog

--- 04 --- | 2012/05 | --- 06 ---
日	月	火	水	木	金	土
-	-	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31	-	-

■ スポンサーサイト

--年--月--日 (--) --:-- | 編集

上記の広告は１ヶ月以上更新のないブログに表示されています。新しい記事を書く事で広告が消せます。

固定リンク | スポンサー広告 - | -

■ FC2 - ブログコメントの展開・折りたたみ 2

2008年08月17日 (日) 23:00 | 編集

今回は機能の挙動部分で「コメントの展開・折りたたみ」のバージョンアップを図ります。

スィン さんよりのご教授をまんま頂いてしまいました♪　感謝＾＾

注：
このカスタマイズは 前回記事 の「戻りスクロール挙動」を除いたものです。
コメントが多い blog では途中記事を飛ばしてしまうので導入は向きません。
尚、アップロードしてある js ファイルは改変しませんので、document.getElementById(varABC2) メソッドで null を返して来て IE7 などで 「ページでエラーが発生しました。」 と表示されますが、動作に問題はありません。　気になる場合は js ファイルの前述項を削っても構いませんが、kilikilik はサポートできません。＾＾；

HTML 編集欄、 ～  間を以下に変更。

・・・
<div class="mainEntryInfo"><a href="<%topentry_link>" title="Permanent Link">固定リンク</a> | <a href="<%topentry_category_link>" title="Category Name"><%topentry_category></a> | 
　<!--allow_comment-->
　<!--not_permanent_area-->
　<a href="javascript:showMoreComments(<%topentry_no>,'<%topentry_link>#<%topentry_no>');" name="cl<%topentry_no>" title="Comment Edit">コメント (<%topentry_comment_num>)</a>
　<!--/not_permanent_area-->
　<!--/allow_comment-->
・・・

同じく、div .mainEntryInfo 要素の直下に以下挿入。
style 指定・その他ブロック要素等、必要に応じ外部スタイルシート化・通常コメントリンクなどの追記・変更させる。

・・・
 | <a href="#top" title="Page Top">▲</a>
                  </div>

<!--not_permanent_area-->
<div style="margin: 0 20px;">
　<div id="varXYZ2<%topentry_no>" style="display: none;">
　　<p style="padding: 0 0 5px; border-bottom: dotted 2px #dcdcdc; text-align: right;"><a href="javascript:showMoreComments(<%topentry_no>,0);" title="Close">コメントを閉じる (<%topentry_comment_num>)</a><br /><a href="<%topentry_link>#comment" title="Comment Edit">この記事へコメントする・コメントの編集をする</a></p>
　　<!--comment_list-->
　　<p style="padding: 10px; border-bottom: dotted 2px #dcdcdc;"><b style="color: #359; font-size: 110%;"><%topentry_comment_list_name> | <%topentry_comment_list_title></b><br /><%topentry_comment_list_brbody></p>
　　<p style="text-align: right;"><a href="<%topentry_link>#comment" title="Comment Edit">コメント・編集</a> | <a href="javascript:showMoreComments(<%topentry_no>,0);" title="Close">閉じる</a></p>
　　<!--/comment_list-->
　</div>
</div>
<!--/not_permanent_area-->
・・・

【以下追記】

固定リンク | FC2 ブログ | コメント (2) | -

■ FC2 - ブログプラグインコメントリストツリー化 2

2008年08月16日 (土) 23:00 | 編集

現在私が使用している FC2 テンプレートには、数種類の Javascript ライブラリを導入しています。
それ等が「干渉し合う事がある」というのを今回初めて知りました。　←根拠曖昧　＾＾；

前回の記事 内容を踏まえ、Tree-Comment との組み合わせを検証すると Lightbox v2.04 との干渉が認められました。

FCafe さんの Tree-Comment では getElementsByTagName メソッドでタグ A を取得するようになっています。　一方、Lightbox v2.04 の prototype.js には getElementsByTagName('*') で全称(？)に対する記述があります。
おそらくはこれによって処理の競合が発生しエラーになるものと思われます。

で、合っていますでしょうか？　詳しい方。＾＾；

ちょっと私レベルではお手上げなので、どちらかのソースを変更して乗り切る冒険は年単位の時間を必要としますから、今回は Lightbox v2.04 さんにどっか行ってもらうつもりです。＾＾；
実際あまり使っていませんし・・・ｗ

ですが、細々と調査継続します・・・。　(´ﾉo｀)コッソリ

固定リンク | FC2 ブログ | コメント (4) | -

■ コメントを閉じる (4)
■ この記事へコメントする・コメントの編集をする

■ スィン | 関数名が同じなら変えてみよう
そういう関数名が被るのを防ぐのに「Namespace」という概念があるのですが、実は javascript にはその概念が言語的にはないので起こる現象です。（ってほかの言語でも起こりえますが。）

getElementsByTagNameってDOMの標準関数だった気がするので、動作は同じような気がするのですが。。。

同じ名前で関数が作られているのかなぁ。そういうときは片方の関数名を変えてみましょう。Lightbox v2.04 を構成するすべてのソースコードにおいて、getElementsByTagName の名前を「getElementsByTagName02」とかに変えてみるとか。（ソースコードの中にその独自関数を作っているようであれば・・・ですけどね。）

■ コメント・編集 | 閉じる

■ kilikilik | スィンさんへ♪
ありがとうございます♪
なるほど。　影響を受けた元の言語などからの関わりもありますよね。　Lightbox には jquery などの派生ライブラリがあるのでそれとの差も勉強したいし・・・　今回は FC2 プラグインの方でやってみようと思います。　最悪(最良)で自作してみます。　早速取り掛かろう・・・。

スィンさんはこういうトラブルシューティングやカスタマイズの知識としてどんな書籍を読んで来たんですか？
おすすめがあれば是非お聞きしたいです。＾＾

■ コメント・編集 | 閉じる

■ スィン | 書籍とか・・・
書籍は、私のブログの机の写真に写ってるものぐらいですね。さらに、その9割以上は購入しただけで読んでません。

結局つまみ食いしてしまうんです。なんか、参考書みたいなものを最初から最後まで読むのは苦手で、問題集をこなすのが得意、みたいな性格ですｗ

ので、書籍は辞書みたいに使うことが多いのですが・・・いや、書籍はやはりほとんど見ません。あの写真はほぼすべてやはり飾りですｗ

自分は基本、トライアンドエラーですね。とりあえずやってみる＞ダメだったらWebや書籍で調べてみる＞そして修正してみる＞できたらさらにアイデアを加えてみる＞うまくいかなかったら調べる＞できたらさらに新しいことがしたくなる（ｗ）そんな感じで。

簡単なものからでもいいので、コードをすべて自作、または真似ながら覚えるのがお勧めですね。

100段の階段は、1回では登れませんが、
1段ずつ100回で登れます。つまり、登りきれるんです＾＾ｖ

本当はゲームを作りたいんだけどぜんぜんやってないんですよね。DirectXとかでFPSゲームを作るのが夢だったのに orz

あ、補足です。JavaScriptはちょっとデバッグは大変かもしれません。お勧めできるデバッグ環境がないのですが、最近はVisualStudioや、確かFireFox3のプラグインなどで、JavaScriptのデバッガが出てたような気がします。

自分がJavaScriptやってた時（昔）はいちいちブラウザで動作確認してたので大変でした。

デバッガがあるのとないのでは開発効率がかなり違いますので、もし興味があったら使ってみるとよいです～

■ コメント・編集 | 閉じる

■ kilikilik | スィンさんへ♪
Step by Step が一番という事に尽きるのですね。＾＾
職人魂と同じです♪　だからかな？私がパソコン好きになった一つの理由は。

Visual Studio 2008 EE は出た直後に入れましたが持ち腐れ。プレゼンばりの絵で解説している 2005 EE のオフィシャル書籍があったはずなのでいつかやろう・・・で今に至ってしまいましたｗ　＾＾；

～ is null ステータスは Fx3 の Firebug アドオンで見つけたのですが、あれは簡易デバッガとしても使えるのか☆(･∀･)

私から見たスィンさんの様な、実際にその筋に携わっている方の意見が一番参考になります。
よし！　方向性はよし。　コツコツやります。＾＾

■ コメント・編集 | 閉じる

■ FC2 - ブログコメントの展開・折りたたみ

2008年08月14日 (木) 23:00 | 編集

自作の意気込みで検索したら、追記でお世話になったばかりの ABCK さんの記事が Hit 。
いつも簡潔でわかり易いので、またお借りします。

注：
このカスタマイズは sukechan さんの simple3 テンプレートをベースに解説していますので、他作者さんのテンプレートでは更なる改変を要す可能性があります。
また、現時点で FC2 テンプレート用変数に「個別記事以外でのコメントインフォメーション用変数」を見つけ出せなかったため展開時の表示は以下のみで、コメントの書き込み・編集にワンクッション置く仕様となりますので、このカスタマイズは限りなく 暫定的 です。
現在適用しているテンプレートを複製し、 複製したテンプレートでテストしてからの導入検討を強く奨めます。

 ～ 　内で有効になる単変数

<%topentry_comment_list_name> コメント投稿者の名前を表示
<%topentry_comment_list_title> コメントのタイトルを表示
<%topentry_comment_list_body> 改行を除いたコメント本文を表示
<%topentry_comment_list_brbody> 改行(<br>)を含むコメント本文を表示

以下、コメント展開・折りたたみ用のアジアンビートカンケリキッズさん作 Javascript ソースを外部化します。

function showMoreComments(varA12, varB12){
　var1232 = ('varXYZ2' + (varA12));
　varABC2 = ('varP2' + (varA12));
　if( document.getElementById ) {
　　if( document.getElementById(var1232).style.display ) {
　　　if( varB12 != 0 ) {
　　　　document.getElementById(var1232).style.display = "inline";
　　　　document.getElementById(varABC2).style.display = "none";
　　　} else {
　　　　document.getElementById(var1232).style.display = "none"; 
　　　　document.getElementById(varABC2).style.display = "inline";
　　　}
　　} else {
　　　location.href = varB12;
　　　return true;
　　}
　} else {
　　　location.href = varB12;
　　　return true;
　}
}

テキストエディタに記述し、拡張子を .js に変更保存、 FC2 ファイルアップロードへアップロード。
<head> 内にそのリンクを記述します。

･･･
<script type="text/javascript" src="http://blog-imgs-19.fc2.com/k/i/l/kilikilik/abckmore-c.js"></script>
･･･

続きは「以下追記」から。

[参考記事]
> [亜] コメントの展開・折りたたみ

【以下追記】

FC2 テンプレートを以下に変更する。

HTML 編集欄、 ～  間を以下に変更。

<!--allow_comment-->
　<!--not_permanent_area-->
　<span id="varP2<%topentry_no>">
　　<a href="<%topentry_link>#comment" onclick="showMoreComments(<%topentry_no>,'<%topentry_link>#<%topentry_no>');return false;" name="cl<%topentry_no>" title="コメントをここで読む">コメント (<%topentry_comment_num>)</a>
　</span>
　<!--/not_permanent_area-->
<!--/allow_comment-->

同じく、div .mainEntryInfo 要素の直下に以下挿入。
スタイル指定はその都度テンプレートにあったサイズに調整、必要に応じ外部スタイルシート指定・通常コメントリンクなどの追記・変更させる。

・・・
 | <a href="#top" title="このページの一番上へ">▲</a>
                  </div>

<!--not_permanent_area-->
<div style="margin: 20px;">
　<div id="varXYZ2<%topentry_no>" style="display: none;">
　　<p style="display: block; border-bottom: dotted 2px #dcdcdc;"><a href="#cl<%topentry_no>" onclick="showMoreComments(<%topentry_no>,0);return true;" title="コメントを閉じる">コメントを閉じる (<%topentry_comment_num>)</a></p>
　　<!--comment_list-->
　　<p style="display: block; border-bottom: dotted 2px #dcdcdc;"><b style="color: #359; font-size: 110%;"><%topentry_comment_list_name> | <%topentry_comment_list_title></b><br /><%topentry_comment_list_brbody></p>
　　<!--/comment_list-->
　　<p style="text-align: right;"><a href="<%topentry_link>#comment">この記事へコメントする・コメントの編集をする</a></p>
　</div>
</div>
<!--/not_permanent_area-->
・・・

【追記を閉じる】

固定リンク | FC2 ブログ | コメント (2) | -

■ FC2 - ブログ追記の展開・折りたたみ 2

2008年08月10日 (日) 23:00 | 編集

ABCK さんのスクリプトが無事 IE7 で動作したので、手持ちの Firefox 3.x と Safari 3.x でも確認してみましたところ・・・。

いずれも通常記事は問題ありませんが、個別記事での問題 が発生。
(SyntaxHighlighter の結果にムラがあるが追記スクリプトとは無関係。　のはずだけど・・・)

■ Firefox 3.x	■ Safari 3.x

：クリックで拡大 (1141 x 623)	：クリックで拡大 (1039 x 636)

■ Firefox 3.x

通常記事・個別記事リンク両方が表示されてしまう。
CSS 継承による文字サイズが得られない。
2 と同様のもの。　背景色や枠。
2 と同様のもの。　mainEntryBlock。
離れちゃう。

■ Safari 3.x

SyntaxHighlighter の結果を得られないぃぃ。
mainEntryInfo 以降が表示されない。

実は欲張って 「閉じたときに記事の頭に戻りたくない！」 と 「個別記事でも折りたたみたい！」 の記述までも導入したのですが、IE7 以外のブラウザでこうも崩れてしまうのであれば「個別記事でも折りたたみたい！」は今回はずします。

時間が出来次第、他 blog さんのものや書籍などを参考に js から自作してみたいと思います。
(コメントも同様にページ移動しないようにしてみたい。

アップロードしてある .js ファイルはそのままで、FC2 テンプレートの <div class="mainEntryMore"> ～ </div> の間の部分を以下に変更。

<div class="mainEntryMore">
　<!--more_link-->
　　<!--BisEntryIfExtended-->
　　　<span id="varP<%topentry_no>">
　　　　<a href="<%topentry_link>#<%topentry_no>" onclick="showMore(<%topentry_no>,'<%topentry_link>#<%topentry_no>');return false;" name="em<%topentry_no>" id="em<%topentry_no>">【以下追記】</a>
　　　</span>
　　　<div id="varXYZ<%topentry_no>" style="display: none">
　　　　<%topentry_more><br clear="all" />
　　　　　<a href="#em<%topentry_no>" onclick="showMore(<%topentry_no>,0);return true;">【追記を閉じる】</a>
　　　</div>
　　<!--/BisEntryIfExtended-->
　<!--/more_link-->
　<!--more-->
　　<a name="more" id="more"></a><%topentry_more>
　<!--/more-->
</div>

固定リンク | FC2 ブログ | コメント (0) | -

■ FC2 - ブログ追記の展開・折りたたみ

2008年08月09日 (土) 23:00 | 編集

以前導入した Lightbox - v2.04 と同様の動機で、FC2 blog 追記表示方法を変えてみることにしました。

多くの皆さんが導入されていらっしゃる方法は Javascript によるもののようで、私もそれを参考にやってみます。

以下アジアンビートカンケリキッズさんの Javascript ソースを外部から読み込ませてみます。

function showMore(varA1, varB1) {
　var123 = ('varXYZ' + (varA1));
　varABC = ('varP' + (varA1));
　if( document.getElementById ) {
　　if( document.getElementById(var123).style.display ) {
　　　if( varB1 != 0 ) {
　　　　document.getElementById(var123).style.display = "block";
　　　　document.getElementById(varABC).style.display = "none";
　　　} else {
　　　　document.getElementById(var123).style.display = "none";
　　　　document.getElementById(varABC).style.display = "block";
　　　}
　　} else {
　　　location.href = varB1;
　　　return true;
　　}
　} else {
　　location.href = varB1;
　　return true;
　}
}

テキストエディタに記述し、拡張子を .js に変更保存、 FC2 ファイルアップロードへアップロード。
<head> 内にそのリンクを記述します。

･･･
<script type="text/javascript" src="http://blog-imgs-19.fc2.com/k/i/l/kilikilik/abckmore.js"></script>
･･･

続きは早速「以下追記」から。

[参考記事]
> [亜] 追記の展開・折りたたみ
> アジアンビートカンケリキッズ追記の展開・折りたたみ
> Glim. 新作はちょっとデザイン系
> どこでもドアーズLabo 追記の開閉
> TMP*blog 追記（続きを読む）の開閉について
> FC2ブログユーザーフォーラム • トピックの表示 - 「続きを読む」の表示箇所について

[微関連記事]
> WordPress用本文制御プラグイン「Excontent」ウェビンブログ

【以下追記】

FC2 テンプレートの <div class="mainEntryMore"> ～ </div> の間の部分を以下に変更する。

<div class="mainEntryMore">
　<!--permanent_area-->
　　<!--more-->
　　　<!--BisEntryIfExtended-->
　　　　<span id="varP<%topentry_no>">
　　　　　<a href="<%topentry_link>#<%topentry_no>" onclick="showMore(<%topentry_no>,'<%topentry_link>#<%topentry_no>');return false;" name="EM<%topentry_no>" id="EM<%topentry_no>">【以下追記】</a>
　　　　</span>

　　　　<div id="varXYZ<%topentry_no>" style="display: none">

　　　　　<%topentry_more><br clear="all">

　　　　　　<a href="#EM<%topentry_no>" onclick="showMore(<%topentry_no>,0);return true;">【追記を閉じる】</a>
　　　　</div>
　　　<!--/BisEntryIfExtended-->
　　<!--/more-->
　　<noscript>
　　　<a name="more" id="more"></a><%topentry_more>
　　</noscript>
　<!--/permanent_area-->
　<!--not_permanent_area-->
　　<!--more_link-->
　　　<!--BisEntryIfExtended-->
　　　　<span id="varP<%topentry_no>">
　　　　　<a href="<%topentry_link>#<%topentry_no>" onclick="showMore(<%topentry_no>,'<%topentry_link>#<%topentry_no>');return false;" name="EM<%topentry_no>" id="EM<%topentry_no>">【追記を読む】</a>
　　　　</span>

　　　　<div id="varXYZ<%topentry_no>" style="display: none">

　　　　　<%topentry_more><br clear="all">

　　　　　　<a href="#EM<%topentry_no>" onclick="showMore(<%topentry_no>,0);return true;">【追記を閉じる】</a>
　　　　　</div>
　　　<!--/BisEntryIfExtended-->
　　<!--/more_link-->
　　<!--more-->
　　　<a name="more" id="more"></a><%topentry_more>
　　<!--/more-->
　<!--/not_permanent_area-->
</div>

以上で動作します。
尚、アジアンビートカンケリキッズさんの [亜] 追記の展開・折りたたみ でもおっしゃられているように、「このカスタマイズを施したテンプレートを共有テンプレとして登録することは禁止はしませんが、推奨していません。」です。

現状では個別記事表示時のブログ拍手リンクが追記内に表示されてしまうので、追記外に表示させる改良と、テンプレートによっては微調整が必要かもしれないので、わかり次第随時記事しようと思います。
【追記を閉じる】

固定リンク | FC2 ブログ | コメント (0) | -