Paroday

Paroday：ニュースやアニメのレビュー、FC2ブログのテンプレート・プラグインなどを配信しています。

もしかして Parody ではありませんか？　yes

ユーザータグに半角スペースなどを使う、編集記事のタグ表示

編集記事で使用されているタグをあわせて表示

　ユーザータグに使われそうで使えない文字には、全角･半角スペース、引用符（アポストロフィ「'」、ダブルクォーテーション「"」※全角は使用可）などがあります。この他にもタグの入力の仕方によっては、コンマ「,」や読点「、」が削除されます。

半角スペースを使う

　タグの入力欄に 『Happy Birthday』 と入れると 『Happy』 と 『Birthday』 の二つのユーザータグができてしまいます。これは半角スペースがタグの区切りに用いられているためです。これを回避するには次のようにします。

[A]あいだにアンダーバー『_』などを入れる
Happy_Birthday
Happy_Birthday     // 表示結果

　パッと見、半角スペースに見えます。文字に『_』が入ってしまいますが、URIがとても美しいです。

http://paro2day.blog122.fc2.com/?tag=Happy_Birthday
[B]あいだに半角スペースの文字参照『 』を入れる
Happy Birthday
Happy Birthday     // 表示結果

　半角スペースが表示されます。この程度の長さであれば、許容範囲内なのかもしれませんが、URIがちょっとみにくくなります。

http://paro2day.blog122.fc2.com/?tag=Happy%26%2332%3BBirthday

　日本語のユーザータグに比べれば、見やすい部類です。半角スペースが使えたとしても、どの道、『Happy%20Birthday』になるのではないかと思われます。できれば、WikipediaのHappy_BirthdayのようにURI上ではアンダーバーを表示するようにして欲しいところです。

いろいろな文字参照
Happy Birthday     //  
Happy Birthday    //  
Happy Birthday    //  
Happy Birthday    //  
Happy Birthday    //  
Happy Birthday         // 表示結果
Happy Birthday         // 表示結果
Happy Birthday         // 表示結果
Happy Birthday         // 表示結果
Happy Birthday         // 表示結果

　どれも同じように見えますが、URIはそれぞれ異なります。

http://paro2day.blog122.fc2.com/?tag=Happy%26%2332%3BBirthday
http://paro2day.blog122.fc2.com/?tag=Happy%26%23x20%3BBirthday
http://paro2day.blog122.fc2.com/?tag=Happy%26%23160%3BBirthday
http://paro2day.blog122.fc2.com/?tag=Happy%26%23xa0%3BBirthday
http://paro2day.blog122.fc2.com/?tag=Happy%26nbsp%3BBirthday

　URIが異なるということは、それぞれが別のユーザータグであることを意味します。例えば、次の3つのタグを指定したとします。

Happy Birthday Happy Birthday Happy Birthday

　すると『Happy Birthday』というタグが3つ作成され、ユーザータグの編集ページにも3つ掲載されます。RSSも別です。

　したがって、半角スペースを含むユーザータグを作成する際は、『 』『 』『 』『 』などのうちどれか一つに統一する必要があります。

　以後（ユーザスクリプト）は、XMLを考慮した上で一番短いもの『 』を使うことにします。

　『\x20』を使うことも可能ですが、半角スペースを含むユーザータグとして認識されるのは管理ページ内だけで、ブログ上では該当記事は見つからず、ユーザータグのプラグインなどでエラー表示になることがあります。

　ユーザータグのURIにはエンコードされたFC2変数を使うので、『tag=Happy Birthday』などにはなりません。『tag=Happy%26%2332%3BBirthday』として出力されます。

<!--tag_list-->   // 記事内ユーザータグ
<a href="<%url>?tag=<%topentry_tag_list_parsename>"><%topentry_tag_list_name></a>
<!--/tag_list-->

<!--ctag-->   // プラグインユーザータグ
<a href="<%ctag_url>"><%ctag_name></a>
<!--/ctag-->

引用符（アポストロフィ、ダブルクォーテーション）を使う

　半角の『'』をそのまま使うことも可能ですが、アポストロフィを含むユーザータグとして認識されるのは管理ページ内だけで、ブログ上では該当記事は見つからず、ユーザータグのプラグインなどでエラー表示になることがあります。使うときは次のようにします。

[A]全角の『’』『”』を使う
B’z
B’z     // 表示結果

　フォントなどの環境によっては目立つかもしれませんが、許容範囲内ではないかと思われます。

http://paro2day.blog122.fc2.com/?tag=B%A1%Cz

　ついでに他の文字『Ｂ』と『ｚ』も全角にしてしまってもいいかもしれません。

[B]文字参照、アポストロフィ『&#39;』ダブルクォーテーション『&#34;』を使う
B&#39;z     // '
C&#34;z     // "

B'z         // 表示結果
C"z         // 表示結果

http://paro2day.blog122.fc2.com/?tag=B%26%2339%3BZ
http://paro2day.blog122.fc2.com/?tag=C%26%2334%3BZ
いろいろな文字参照
B&#39;z     // ' &#39;
B&#x27;z    // ' &#x27;
C&#34;z     // " &#34;
C&#x22;z    // " &#x22;
C&quot;z    // " &quot;

B'z         // 表示結果
B'z         // 表示結果
C"z         // 表示結果
C"z         // 表示結果
C"z         // 表示結果

　どれも同じように見えますが、URIはそれぞれ異なります。

http://paro2day.blog122.fc2.com/?tag=B%26%2339%3Bz
http://paro2day.blog122.fc2.com/?tag=B%26%23x27%3Bz
http://paro2day.blog122.fc2.com/?tag=C%26%2334%3Bz
http://paro2day.blog122.fc2.com/?tag=C%26%23x22%3Bz
http://paro2day.blog122.fc2.com/?tag=C%26quot%3Bz

　URIが異なるということは、それぞれが別のユーザータグであることを意味します。例えば、次の2つのタグを指定したとします。

B&#39;z B&#x27;z

　すると『B'z』というタグが2つ作成され、ユーザータグの編集ページにも2つ掲載されます。RSSも別です。

　したがって、アポストロフィを含むユーザータグを作成する際は、『&#39;』『&#x27;』などのうちどれか一つに統一する必要があります。

　以後（ユーザスクリプト）は、HTMLを考慮した上で一番短いもの、アポストロフィ『&#39;』ダブルクォーテーション『&#34;』を使うことにします。

　アポストロフィに『&apos;』を使うことも可能ですが、環境によってはタグの名前がそのまま『B&apos;z』と表示されてしまうため、使わないようにします。

コンマ『,』読点『、』を使う

　リストから追加したいタグをクリックすると『,』と『、』が半角スペースに変換されます。変換対象は入力エリア内の文字まで及びます。アポストロフィが使えないため、引数や配列にコンマを使えてもいいような気もしますが、使えません。恐らく、スペースの代わりに、コンマと読点でユーザータグを区切ろうとした仕様変更の痕跡と思われます。

　これを回避するには、リストのタグをクリックせずに、入力エリアに直接『Hi,Mike』『やぁ、マイク』などと書き込みます。

コンマ、読点を変換させない

全角スペースを使う

　ちょっとしたユーザータグの編集で半角スペースに置換され、タグが複数に分離してしまう恐れがあるため、利用は推奨されません。

記事投稿ページ - ユーザータグの設定

続けてタグを入力する時は半角/全角スペースで分けて入力してください

　全角スペースがユーザータグの区切りとして使われているような印象を受けますが、実際は半角スペースでしか区切ることはできません。スクリプトで全角スペースを半角スペースに置換することで区切っています。

　したがって、JavaScriptをオフにすれば、全角スペースを使ったユーザータグの指定が可能です。

これは　すごい         // これは　すごい

　ただし、JavaScriptオンの状態で記事投稿ページのタグを編集しようとすると、全角スペースが半角に置換されて、『これは』と『すごい』の二つのユーザータグに分離されてしまうので注意が必要です。追加するときは記事編集ページではなく、[過去の記事の管理]からユーザタグを追加した方がいいかもしれません。

　日本語などの全角文字を入力しているときに、半角スペースを入れるのが面倒だからでしょう。置換することで、入力モードが全角でも半角でも気にせず区切ることができます。

半角スペースなどで文字参照を使用する場合の注意事項

　半角スペースやアポストロフィで『&#32;』『&#39;』などの文字参照を使用する場合、テンプレートの編集が必要になります。

　編集箇所は『<%sub_title>』です。タグページで <%sub_title> によってタグの名前を表示しようとすると、そのまま『Happy&#32;Birthday』と出力されます。例えば、title要素が次のようになっていたとします。

<title><%blog_name><!--not_index_area--> - <%sub_title><!--/not_index_area--></title>

　すると、タグページ（?tag=Happy%26%2332%3BBirthday）では以下のようになります。

<title>ブログの名前 - Happy&amp;#32;Birthday</title>

文字参照そのまま

　これを回避するには『<%sub_title>』の代わりに『<%tag_word>』を使用します。

<title><%blog_name><!--not_index_area--> - <!--not_tag_area--><%sub_title><!--/not_tag_area--><!--tag_area--><%tag_word><!--/tag_area--><!--/not_index_area--></title>

　すると、半角スペースが表示されるようになります。

<title>ブログの名前 - Happy&#32;Birthday</title>

半角スペース表示

　同様にテンプレートやプラグインなどで使われているすべての『<%sub_title>』を次のコードに修正します。

変更場所 ▼ HTMLの編集-検索ワード「<%sub_title>」

<%sub_title>

修正後

<!--not_tag_area--><%sub_title><!--/not_tag_area--><!--tag_area--><%tag_word><!--/tag_area-->

　タグページ以外のページでは <%sub_title> を表示し、タグページでは <%tag_word> を表示させます。もとから <!--tag_area--> が設定されている場合は sub_title 部分のみを tag_word に変更します。

<!--tag_area--> - <%tag_word><!--/tag_area-->

　よくわからないときは実際に半角スペースの文字参照を使ったタグページを表示して、確認します。

　それから『&』や『#』などは、タグのポータルサイトでは切り捨てられるので、表示することはできません。ユーザータグをジャンルのように扱うこと自体が無謀なことなのかもしれません。

文字参照を使ったユーザータグを追加する方法（過去記事管理）

　いちいち『&#32;』と入力するのが面倒。そんなときは記事作成後に[過去の記事の管理]で、ユーザータグを追加したい記事にチェックを入れて、最下部にあるユーザータグの追加/削除によって、タグを追加します。

文字参照を使ったユーザータグを追加

編集記事で使用されているタグをあわせて表示するブックマークレット

編集記事で使用されているタグをあわせて表示

　お気に入りに登録して使用します。下記リンクを（右）クリックして、リンクをお気に入り（ブックマーク）に追加します。IE6は外部ファイル版を追加します。試すだけであれば、ショートカット（URL）のコピーをします。

Bookmarklet（既存タグ表示） : FC2tagDefault
※このスクリプトについては、[環境設定]の[ブログの設定][投稿設定]にある[ユーザタグの設定位置]が本文編集エリアの[下]の状態で機能します。

Bookmarklet（外部js : 多機能 : IE6使用可） : FC2tagDefault

　[記事の編集]ページを開き、お気に入りに追加された上記リンクをクリック（またはコピーしたURLを貼り付けてエンター）するとユーザータグが表示されます。起動させるときはJavaScriptオンの状態でなければなりません。外部jsなしでも、IE7、IE8はぎりぎり使えるはずです。IE6以外でも外部ファイル版は利用できます。

　FirefoxやChrome、Operaは、Greasemokey用のユーザスクリプトの使用を推奨します。

Greasemonkey（多機能 : Firefox、Chrome、Opera） : FC2tagDefault

　FirefoxとChromeはクリックでインストールします。

　Operaは（右）クリックで「リンク先のコンテンツを保存」を選択します。保存先は、ブラウザメニューの[ツール][設定][詳細設定][コンテンツ-JavaScriptを有効にする][JavaScriptオプション]の「ユーザーJavaScriptフォルダ」を指定します。フォルダが指定されていない場合は、適当な場所に『userscript』といった名前のフォルダを作成し、それを指定します。そして、改めて保存します。

　指定のタグを追加するスクリプトについては、指定のユーザータグを記事編集ページに表示するユーザスクリプトをご覧ください。上記Greasemonkeyのスクリプトをインストールした場合は、こちらのスクリプトを無効にするかアンインストール（削除）してください。

　上段は[過去の記事の編集]の際に表示されます（既につけられているタグのリストを表示）。

　多機能版ではタグの個数表示と並び替え（番号をクリック）ができます。

　タグリストのクリックによるユーザタグの追加では、半角スペースを『&#32;』、『'』を『&#39;』、『"』を『&#34;』として出力します。

　[?] の右にある [s] は入力エリア内の仮半角スペース、アポストロフィ『'』、ダブルクォーテーション『"』を文字参照に変換するボタンです。半角スペースを使用する際は、仮半角スペース（『@@@』アットマークを3つ並べる）を入力して、[s]ボタンをクリックします。『'』と『"』はそのまま入力して [s]ボタンをクリックします。

Happy@@@Birthday B'z

[s]ボタンクリックでタグ入力エリアの『\\\』などを変換

Happy&#32;Birthday B&#39;z

Happy Birthday    // タグ表示結果
B'z               // タグ表示結果

　FC2ブログの仕様上、アポストロフィなどをそのまま追加すると表示上のエラーが起こります。使用する際は、必ず [s]ボタンで変換してから記事を投稿するようにします。使わないにこしたことはありません。使用の際は注意事項もご覧ください。

ご利用にあたって

動作確認(Win) : IE6-8、Firefox2-3、Opera10、chrome4、Safari4

　使用は自己責任でお願いします。

　どういうわけかIE7、IE8が加わっていますが、PCを買い換えたわけではありません。普通にインストールしました。低スペックPC（CPU1.2GHz、メモリ512MB-VRAM共有）のままです。そろそろクラリネットかもしれません。jqueryが普及してから、重体サイトが増えてきたなぁと思いました。普及しなくても渋滞なんだろうなぁと思いました。

　FC2リクエストのコメント投稿時の仕様が知りたかったのでリクエストを評価しました。後から評価・コメントの変更や削除もできるようです。『&』や『<』が『&amp;』、『&lt;』に変換されていたので不思議に思っていたのですが、制限を解除すれば200文字以上コメントできるようです。

　基本的に代替案があったとしても、使いやすさや機能において優れていれば、すべてのリクエストに賛成です。

  • 【更新履歴】
  • 2010 08-15 - （ブックマークレット : 多機能限定）[環境設定]の[ブログの設定][投稿設定]にある[ユーザタグの設定位置]の本文編集エリアが[上]でも[下]でも機能するようにしました。必要であれば、再インストールしてください。
  • 2010 05-02 - [S]ボタンによる半角スペースの置換を『\\\』から『@@@』に変更。外部jsを多機能版に変更。Greasemonkey用のコードを配布。記事で使用されているタグ（上段）の中で「&」を使っていると、「&」以降の文字が消失するのを修正（対象:Firefox以外のブラウザ）。
関連記事
  1. comment

  2. karuran 2010-08-14 22:53 No.496 #-URLhttp://pcpowers.blog8.fc2.com/

    すみません。
    動作しません。
    仕様変更などあったのでしょうか？

コメント

Icon ※必須 :
Pass 　※入力した英数字を識別コードとしてNoに表示(123→LkZag.iM)

トラックバック

https://paro2day.blog.fc2.com/tb.php/549-97adc4eb

  1. trackback