＞ ＞ ＞ ＞ CommentCustomFieldプラグイン v0.02（画像のアップロード対応）

CommentCustomFieldプラグイン v0.02（画像のアップロード対応）

Posted at August 17,2009 12:55 AM
Tag：[Comment, CommentCustomField, Image, MovableType, Plugin]

配布中の CommentCustomField プラグインをバージョンアップしました。

１．追加機能

追加した機能は次の通りです。

  • 画像のアップロード機能を追加
  • 画像情報を表示するテンプレートタグの追加

この機能追加によって、次のように、コメント投稿者がアップロードした画像をコメント一覧に表示できるようになります。

完成例

ブログ管理画面では、画像のアップロード先やアップロード可能なファイルサイズの設定も可能です。

また、画像はアイテムとしての管理対象になり、本プラグインで追加した画像情報表示のためのブロックタグ MTCommentCustomFieldAsset で MTAsset 関連タグを組み合わせれば画像情報を自由に表示することができます。

２．ダウンロード

ダウンロードは下記のリンクからどうぞ。

CommentCustomField プラグイン

３．追加機能に伴う注意事項

配布元のページでも解説を追加していますが、画像に対応させるために、コメントフォームの form 要素に enctype 属性を追加してください。

変更前

<form method="post" action="<$mt:CGIPath$><$mt:CommentScript$>" name="comments_form" id="comments-form" onsubmit="return mtCommentOnSubmit(this)">

変更後

<form method="post" enctype="multipart/form-data" action="<$mt:CGIPath$><$mt:CommentScript$>" name="comments_form" id="comments-form" onsubmit="return mtCommentOnSubmit(this)">

コメント投稿フォームには、次のサブテンプレートを追加します。input 要素の name 属性と id 属性は変更しないでください。

<div class="field-inner">
    <label for="comment-custom-image">画像</label>
    <input type="file" name="comment-custom-image" id="comment-custom-image" class="fi" />
</div>

また、コメントプレビュー画面には、前の画面で設定した画像のアップロード情報は引き継げません。

Posted by yujiro   このページの先頭に戻る
関連記事
関連記事をもっと読む
トラックバックURL


トラックバック

≫ コメントで画像も送れます from 移行テスト中…
『小粋空間』（yujiroさん）の「CommentCustomField プラグイン」を導入してみました。 コメントに添えて画像も一緒に送信できます。 y... [続きを読む]

Tracked on August 25, 2009 9:29 PM
コメント

yujiroさん、いつもありがとうございます。
コメントに画像が添付できるのは楽しいですね。
コメントプレビュー画面に画像のアップロード情報が引き継げないというのは、"確認"をクリックしてプレビュー画面を通すと、画像が消えてしまう、ということでしょうか？
どうぞよろしくお願いいたします。

[1] Posted by s.fujino : August 21, 2009 1:09 PM

＞s.fujinoさん
こんにちは。
ご質問の件ですが、まず、コメントプレビュー画面に進むと、その前の画面で選択していたアップロード画像のフォーム情報はクリアされるので、コメントプレビュー画面から投稿する場合は、アップロード画像を再選択する必要があります。

また仮に、コメントプレビュー画面で、画像をプレビュー対象として表示する場合、サーバ上に画像を一旦アップロードさせないといけないのですが、投稿後のその画像とコメントの関連付けや、投稿されなかった場合に不要な画像を削除など、色々面倒なため、アップロード画像をプレビューする機能も提供しておりません。

それではよろしくお願い致します。

[2] Posted by yujiro logo : August 21, 2009 5:31 PM

＞yujiroさん
どうもありがとうございました。

昨夜、テスト用に使っている Movable Type Pro 4.3-en で試してみたら「確認」のプレビューを通さない時は画像つきでうまくコメントが投稿できましたが、プレビューを通すと消えていました。
3.171の頃からアップグレードのテストを兼ねたブログで、テンプレートも古いものを引きずって手直しを重ねてきましたので、私の環境がまずかったのかと思い、お尋ねした次第です。
今日 4.31-en にしても同様でしたが、安心できました。どうもありがとうございます。
プレビュー画面で、画像そのものは表示せずに、選択したファイル名を引き継ぐことはできるでしょうか？

[3] Posted by s.fujino : August 21, 2009 8:59 PM

＞s.fujinoさん
ご質問の件ですが、type="file" の input 要素は、セキュリティ上、初期値を設定したりスクリプトで値を操作することができないようです。
HTML の仕様では value 属性に初期値を設定してもよいことになっていますが、おそらくブラウザの実装で制限していると思います（実験済です）。
ただし、input 要素の value 属性にファイル名を埋め込むのではなく、テキストとして表示するだけなら可能です。

それではよろしくお願い致します。

[4] Posted by yujiro logo : August 21, 2009 9:25 PM

＞yujiroさん
どうもありがとうございます。
もうひとつ、サムネイルについてですが、
設定した画像の横幅とぴったり同じ横幅の画像を送る場合でもサムネイルが作られることと、
設定した画像の横幅よりも小さい画像を送る場合は、設定幅に拡大した"サムネイル"が表示されるのは、MT側の仕様ですか？

[5] Posted by s.fujino : August 21, 2009 10:13 PM

＞s.fujinoさん
ご質問の件ですが、MTの仕様ではありません。
制御用テンプレートタグとMTAsset関連のテンプレートタグを利用して、画像サイズをチェックすれば、サムネイルを作らないことや、拡大せずに表示することも可能と思います。
サブテンプレートについては別途エントリーしたいと思いますが色々試してみてください。
それではよろしくお願いいたします。

[6] Posted by yujiro logo : August 21, 2009 10:55 PM

＞yujiroさん
さっそくありがとうございました！
「制御用テンプレートタグとMTAsset関連のテンプレートタグ」は私には難問ですが勉強してみます。新しいエントリーを楽しみにお待ちしています。

それから、コメントフォームでの画像ファイル指定の初期表示ですが、
Google Chromeでは、
画像　[ファイルを選択]のボタン　"選択されていません"の文字。
WindowsのSafariでは、
画像　[ファイルを選択]のボタン　"ファイルが...ていません"の文字。
のように表示されました。これはきっとそれぞれの仕様ですね。
使ってる人はたぶんこの表示に慣れていると思いますので、これは気にしなくてもだいじょうぶですね。

何度もありがとうございました！
これからもどうぞよろしくお願いします。m(__)m

[7] Posted by s.fujino : August 21, 2009 11:10 PM

＞yujiroさん
先日はありがとうございました。

サムネイルの使い分けですが、MTAssetProperty を使って試行錯誤しながら、なんとか実現できました。
いずれyujiroさんがもっといい方法を書いてくださるのを楽しみにしています。
とりあえず、報告かたがた、テストの記事からここにトラックバックをお送りしました。どうもありがとうございました！

[8] Posted by s.fujino : August 25, 2009 9:35 PM

＞s.fujinoさん
こんにちは。
ご連絡＆トラックバックありがとうございました。
うまくカスタマイズできたようで良かったです。
ではでは！

[9] Posted by yujiro logo : August 26, 2009 2:40 PM

画像のアップロード機能を使ってコメントを投稿した後、コメントが写真付きで掲載されますが、この時、生成された<a>リンクにrel="lightbox"を付加したいのですが、CommentCustomField.plファイルのどこを変更すると可能でしょうか。お教え下さいませ。

[10] Posted by naganaga : September 2, 2009 3:18 PM

上記の件なのですが、<mt:AssetThumbnailLink width="275" />を、<a href="<mt:AssetURL />" rel="lightbox" title="<mt:AssetLabel />"><img src="<mt:AssetThumbnailURL width="275"/>"></a>とすることで解決できました。初歩的な審問をしてもうしわけありませんでした。

しかし、今度は、何もファイルをアップロードしなかった時、何も無い筈のリンク部分に別のアイテムのリンクが表示される様になってしまいました。

もし、差し支えなければ、解決方法を教えて下さい。

[11] Posted by naganaga : September 2, 2009 4:07 PM

自分の投稿したコメントを読んでいて、
どういう症状が出ているのか、よく分からないのではと思い。
再度、コメントさせて頂きました。

<mt:if tag="CommentCustomFieldAsset">
<p>
<mt:CommentCustomFieldAsset>
<mt:AssetThumbnailLink width="200" />
</mt:CommentCustomFieldAsset>
</p>
</mt:if>

をテンプレートに設置、画像付きで投稿すると、
対象のコメントには、写真付きでコメントが表示されます。
写真付きではないコメントも、写真は表示されていません。
これを、リンクタグにrel="lightbox"を追加するために、
下記のようにすると、

<mt:if tag="CommentCustomFieldAsset">
<p>
<mt:CommentCustomFieldAsset>
<a href="<mt:AssetURL />" rel="lightbox" title="<mt:AssetLabel />"><img src="<mt:AssetThumbnailURL width="200"/>"></a>
</mt:CommentCustomFieldAsset>
</p>
</mt:if>

写真が入ったコメントだと、
アップロードした写真が表示されるのですが、
写真付きではないコメントにも、写真無しでリンクが表示されています。
ソースを開けてリンク先のURLを確認しますと、
同じMTのシステムで作った、別のブログ用のアイテムへのリンクが設定されていました。
このアイテムは、別のブログ用にブログ記事用のカスタムフィールド(アイテムを設定)を使ってアップロードした物で、
本来、該当ブログでは表示されてはいけないんですが、
どういうわけが、表示されています。

<mt:if tag="CommentCustomFieldAsset">

の部分が怪しいと思ったので、色々と変更してみたのですが、
一向に改善されず、諦めてしまいました。
本来、条件分岐などを使って修正できる簡単な問題なのかもしれませんが、
自分の知識不足で、原因は掴めませんでした。
一応、ご報告までと思いまして投稿いたしました。

[12] Posted by naganaga : September 3, 2009 2:29 PM

＞naganagaさん。
こんにちは。
ご利用ありがとうございます。
ご質問の件ですが、コメント表示部分に以下の内容を設定してみてください（コメント[12]のnaganagaさんの設定に合わせています）。

<mt:SetVar name="asset_url" value="" />
<mt:if tag="CommentCustomFieldAsset">
  <mt:CommentCustomFieldAsset>
    <mt:AssetURL setvar="asset_url" />
  </mt:CommentCustomFieldAsset>
</mt:if>
 
<mt:if name="asset_url">
<p>
<mt:CommentCustomFieldAsset>
<a href="<mt:AssetURL />" rel="lightbox" title="<mt:AssetLabel />"><img src="<mt:AssetThumbnailURL width="200"/>"></a>
</mt:CommentCustomFieldAsset>
</p>
</mt:if>

もし、これでうまくいかない場合、上の <mt:if name="asset_url"> の直前の行に <mt:GetVar name="asset_url" /> を追加して、コメントごとの変数 asset_url の内容（=MTAssetURLタグの内容）を確認してください。画像がアップロードされていないコメントでここに何か表示されていれば不具合の可能性があるので、お手数ですが状況をご確認ください。
それではよろしくお願い致します。

[13] Posted by yujiro logo : September 4, 2009 1:16 PM

＞yujiroさん
ご返答ありがとうございます
遅くなりましたが、変更してみました。
結論から書きますと、失敗でした。
症状は、全く改善されませんでした。

<mt:GetVar name="asset_url" />
を入れて変数asset_urlの内容を確認してみたところ、
見事に、別のブログ用のアイテムカスタムフィールドへのリンクURLが表示されていました。
写真を入れている場合は、その写真へのリンクURLが表示されていました。

ちなみに、UploadDirプラグインで、
ファイルの種別によってフォルダを振り分けています。

それでは、
よろしくお願いします。

[14] Posted by naganaga : September 10, 2009 2:17 PM

＞naganagaさん
こんばんは。
ご連絡ありがとうございました。
頂いた事象より、不具合と思われる箇所を修正してみましたので、下記のリンクよりプラグインをダウンロードしてお試しください。

http://www.koikikukan.com/archives/download/plugin/CommentCustomField/0.03/CommentCustomField_0_03.zip

それではよろしくお願い致します。

[15] Posted by yujiro logo : September 10, 2009 8:10 PM

>yujiroさん

早速の対応ありがとうございました。
新しいプラグインに変更して、再構築したところ、
別のブログ用のアイテムカスタムフィールドへのリンクURLの表示は、見事消えておりました。
タグを、最初の物に戻してみても問題無く消えておりました。
解決して良かったです。
ありがとうございました。

[16] Posted by naganaga : September 11, 2009 4:13 PM

＞naganagaさん
こんばんは。
ご連絡ありがとうございました。
無事に直ったようでよかったです。
ではでは！

[17] Posted by yujiro logo : September 12, 2009 9:54 PM
コメントする
greeting

*必須

*必須（非表示）


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります（全て半角文字）