The other way round

ARTICLE PAGE

FC2ブログのタイトルに於けるエンティティ

author photo

Byvanillaice (Akira)

----- 追記

この記事内容は私がFC2のエンコード独自変数を知らなかったために書いたものです(笑)
エンコード用変数を利用することで解決します。お恥ずかしい&申し訳ございません。

以下本文 -----



記事のタイトルに関する内容です

・記事のタイトルに記号(絵文字含む)を用いるのはどうなのか
・記事タイトル中の記号をエンティティで表示したらどうなるか

この2つに的を絞ります (●'ω')ノ


え?何が?
と思われる方もいらっしゃるかと思います

「タイトルに記号が?何?それアカンのん?」

「アカンよ (´・ω・`)」

場合によっては アカンよ
にしておきます(笑)

既に一度記事にはしているのですが

記事タイトルの付け方でテンプレートレイアウトが壊れてしまうことがある


はぁ?!
と思うかもしれませんね (´・ω・`)
でも実際起こり得ます
どんな時か

SNSシェア関連ボタンを表示している場合


外部SNSサービス上でシェアされたものについて

タイトルに絵文字や機種依存文字 半角記号などが含まれる場合 文字化けすることがあります


文字化けならマシな方です 記号の使い方如何によってはテンプレの動作がおかしくなることもあります



htmlはアルファベットと記号の集まり


web上に文字を書くには 必ずhtmlというマークアップ言語を必要とします
ブラウザで記事作成画面を開き 文字を書く
この動作だけでもhtmlを利用しています
FC2でこのhtml入力補助を行なっているのが 新投稿画面 及び 旧投稿画面 です
一般的なhtmlのカタチはこう ↓

<a href="リンク先アドレス">表示テキストや画像</a>


リンク設定のためのhtmlです
まず 小なり記号 (
<
)
から始まり
要素名と呼ばれるアルファベットの文字列が記され (
a
)
次に
属性と呼ばれる文字列が記され (
href
)
続いて 等号 (
=
)
が記され
引用符 (
"
)
に続き
値と呼ばれる文字列 (
http:// あるいは https:// から始まるリンク先アドレス
) が記され
値の後はさらに 引用符 (
"
)
が続き 値は対の引用符に囲まれた状態になります
そして最後に 大なり記号 (
>
)


これで一つの htmlタグ になり得ます
これを 開始タグ と言います
htmlタグは特殊な場合を除いては常に 終了タグ と一対ですから
命令を受ける内容 (ここでは「表示テキストや画像」←これに対してリンク先遷移の命令) を挟み
最後に
</a>
が付くわけですが これも同様に
小なり記号 - 終了を意味するスラッシュ - 要素名 - 大なり記号
と分解することができます

記号たくさん使ってますね (´・ω・`)
これがhtmlです
(なお スペース(空白記号)は不可視ですので省略しました)

ここで SNSシェアのURLについて

Facebookを例に取ります

<a href="//www.facebook.com/sharer.php?u=<%topentry_link>&amp;t=<%topentry_title>">表示テキストや画像</a>


href="この中はまとまったひとつのURLです"
つまり

//www.facebook.com/sharer.php?u=<%topentry_link>&t=<%topentry_title>

これがURL
単なる「リンク先のアドレス」です
緑の部分
<%topentry_title>
というのがありますよね
これがFC2独自変数の「記事タイトル」出力です
ということは

SNSシェアを行うためのリンクアドレスに 記事タイトルが含まれている


ということです
こんな感じ ↓

<a href="//www.facebook.com/sharer.php?u=<%topentry_link>&amp;t=海外ドラマ「グリム」第一話 "グリムの末裔" あらすじ">表示テキストや画像</a>


記事タイトルは

海外ドラマ「グリム」第一話 "グリムの末裔" あらすじ

ですね
これそのままSNSシェアを行おうとすると もしかしたら動作しないかもしれません
シェアが動作しない あるいは テンプレの動作がなんかおかしくなった!
ってなるパターンの記事タイトルです
ですから too bad なタイトル

特にこれ ↓

"グリムの末裔"

引用符がついてますよね
少し前の方を見てみると

t=海外ドラマ

等号がありますね
等号(イコール)の後方に引用符(ダブルクォーテーション)
これって htmlの基本形じゃありません?
でも実際は単なる ページアドレス であって htmlタグではないんです
でも形状は htmlタグっぽくなっちゃってる
誤認識・誤動作を生じさせるパターン です

SNSシェアを重んじる人は 記事タイトル中に安易に記号を使ってはいけない


というのを何度か書いていますが
これがその理由です



URL中に使ってはいけない記号


記事タイトルがURLに含まれる
というのがわかったところで URL に利用してはいけない記号を把握しておく必要がありますね
以下は厳密ではありませんが 一例です

小なり(レスザン)<
大なり(グレーターザン)>
いげた(シャープ, ハッシュ)#
引用符(ダブルクォーテーション)"
パーセント%
開中カッコ(オープニングブレイス){
閉中カッコ(クロージングブレイス)}
縦線(パイプライン)|
逆斜線/ 円記号(バックスラッシュ/ エン)\ ¥
キャレット^
米印(アスタリスク)*
チルダ~
開角カッコ(オープニングブラケット)[
閉角カッコ(クロージングブラケット)]
バッククォート`
コロン:
セミコロン;
アンパサンド&
疑問符(クエスチョンマーク)?
等号(イコール)=
ドル$
脇傍点(プラス)+
カンマ,
単位当たり(アットマーク)@


これらの記号は使用できません
上記に足すことの

● 全ての絵文字 (機種依存です)
● 全ての顔文字 (記号の集まりです)
● 半角及び全角スペース

こんなのもダメですね
ということはつまり
SNSシェアを許可している方は 記事タイトルに上記記号を含めることはできません
グレー背景の記号については 予約語 としては利用できます
予約語の説明は置いといて
URL中に記載があるかもしれないけれど 記事タイトル中に自分が持ってくるのはNG
と思えば良いと思います



記号を扱うためのエンティティ文字


でも どうしてもタイトルに記号を使いたいんだ!!!
という方は
エンティティ文字表記 を行います
エンティティ文字というのは 実態文字をそのまま書いてしまうのではなく
実態参照 と言って ダイレクトな表記を避けて 実態に変換させるための表記法です
これを利用すれば上記記号群も利用することができるようになります
ネームエンティティとナンバーエンティティとがありますが
どちらでもOKです
詳細は専門サイトさんでどうぞ ↓

WebDesignLesson 様
エンティティ文字

サンプルのタイトルをエンティティ表記すると

海外ドラマ&nbsp;グリム&nbsp;第一話 &quot;グリムの末裔&quot;&nbsp;あらすじ


こうですかね
カギ括弧がありますが こちらは半角ではなく全角ですので果てしなくグレーゾーン
というかそもそも全角もダメなんですよ (´・ω・`)
本来は全て エンコード という作業を行うべきところですが
私たちは日本人ですし さすがにそんなのやってらんない
それよりFC2システムを考えた時にエンコード利用は できない のです
なのでカギ括弧みたいな全角記号は使わない方が良いですね
というわけで半角スペースに変更しています
実際のレンダリングはこう ↓

海外ドラマ グリム 第一話 "グリムの末裔" あらすじ



FC2が実態に変換してくれない場合も


これなんだよなー (´・ω・`)

● 関連記事リスト
● FC2トップページ(FC2のトップです 個人ユーザーブログトップでなく)の新着記事案内など

これらの場所ではこんななっちゃう ↓



わけわからなさすぎ (´・ω・`)
この辺りはジレンマですよねぇ (´・ω・`)
統一してくれると嬉しいけど なんだかそれも難しそう
他ブログサービスでも大体こんな感じ


というわけで なにがしゴニョゴニョでした ← ?
関連記事

Comments 4

hige  

 あれまぁ!
 ブログタイトルに半角全角スペースはダメなんですか。
 今までタイトルの単語の区切りに意図して多用してきたのでこれは大変です。ここでも &xx を使わないといけないのか。う~っ!
 あとFC2 のエディターで画像を挿入したとき、 img 文の最後に付いてしまう / 。html 編集画面で消しても一度(旧)高機能エディタに切り替えて、もう一度 html 編集画面にすると / が自動的に付加されています。まぁ今のところ支障は出ていない様なのでそのままにしてますが。
 画像付のエントリーでは(旧)高機能エディタを使用した方がはるかに便利なんですよねぇ。

 こんなちょっとしたお話は本当に勉強になります。
 絵文字ではないですが▲(黒塗り三角印)とか↑(上矢印)とかも使わない方が良いんでしょうか。

2016/09/19 (Mon) 20:59 | EDIT | REPLY |   

Akira  

To higeさん

あらゆる記号がNGだと思った方が良いですね (´・ω・`)
基本的には「エンコード」と呼ばれる作業をするべきところです。
これは日本人だけでなく、英文を扱う国の方々も同じように悩んでおられます(笑)

ただ、URL中にあると言ってもこの部分については「パラメータ」に属する部分です。
パラメータというのは独自拡張みたいなもので、youtubeをよくお使いになる方はご存知だと思います。
複数のパラメータを扱うには、最初の繋ぎは

それ以降のパラメータは
&(あんど えー えむ ぴー せみころん)
で行います。
記事タイトルが入るパラメータは
&t=ここに記事タイトル

なのでガチのURLではないので多少の融通は効きますよ ^^;
経験上、テンプレート構造を壊してしまうほどの記号というと
ダブルクォーテーション
アスタリスク
この2つじゃないかしら。
バリデーションに強いこだわりをお持ちの方以外は過度に気を使う必要もないかもです。
上記2つと絵文字・顔文字を避けさえすれば。

======

img なんかの〆スラッシュは、ユーザーさんの中にはxhtmlを使う方もおられます。
html5ではスラッシュ不要ですが、xhtmlでは必須。
FC2の開発者さんもhtml5を標準としてプログラムを組んで良い時期かどうか判断が難しいのではないでしょうかね (´・ω・`)

2016/09/19 (Mon) 21:32 | EDIT | REPLY |   

hige  

なるほどねぇ

 う~ん。むつかしい。
 エンコード作業って知った人は出来るんでしょうが、私の様な一般人には何のこと?といったとこでしょう。
 ところで、&t= からタイトルを書くとご指摘の意図しない動作は回避できるんでしょうか?
 タイトルの単語の間に直接、半角・全角スペースを記述できる?

 でもこの辺のことなど関係なしに、素人な人が自由に書いたり出来てきたのがブログやSNS 等が発展してきた理由と感じます。
 いつまでたっても専門家でしかわからないIT の不完全さには腹が立ちます。
 また別の理由で、西洋文化を背景にしたoffice ソフトに振り回されてきたのでした。

 と まぁ あれっ ごめんなさい。 Akira 先生のせいではないのでした。

2016/09/19 (Mon) 23:05 | EDIT | REPLY |   

Akira  

To higeさん

エンコードというのはこういうのです ↓

The%20other%20way%20round

以前higeさんに「パイプラインは%7Cと記述した方がベターですよ。」
というのをお伝えしましたが、あれがそうです。

web言語なんかは「ここから先は専門家・プロの仕事」というのが有っても良いんじゃないですかね。
プログラマーは如何に難解なweb言語を意識させずに作業ができるか、というのをエンドユーザー向けに頑張っておられて。
それがための技術者でもあるわけですし。
誰もが簡単に使える = 完全
とするならばwebはもっと(さらに)大混乱している気がします ^^;
西欧言語が軸になっているのも仕方がないですよね。
日本は敗戦国なわけですから ( ̄∀ ̄;)
世界の標準語は英語、とは強い言い方になるかもしれませんが、
これはある意味理にかなったことです。

========

> &t= からタイトルを書くと〜

日本語や記号を利用する以上は同じことです。
そしてそれ(ダイレクトに記述)はFC2では不可能です。
ページ毎にこの部分を操作することはできません。
wordpressあたりならできそうですが。
FC2ブロガーに於いては記事を書く際に気をつけるしか道がなさそうですね。
あるいは高度なJSを組んで、ダイレクト記述はできないにしろ、ピンポイントにエンコードを行うか。
やってのける技術者はおられると思いますよ。
私には無理ってだけで(笑)

2016/09/20 (Tue) 01:43 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
利用上のお願い (3)
ご質問の前に (2)
よくあるご質問 (1)
FC2不具合情報 (15)
割と重要なお知らせ (34)
テンプレート (68)
ブログ内限定配布 (6)
リリーステンプレート早見表 (1)
テンプレート固有機能説明 (1)
配布終了・旧作 (5)
テンプレ不具合・修正など (57)
カスタマイズ (90)
SNS (5)
FC2ブログのあれこれ (21)
webのあれこれ (8)
装飾枠 (3)
装飾枠使い方とお願いごと (1)
雑記 (32)
洋楽 (103)
50 Cent (1)
Akon (1)
All American Reject (1)
Amy Winehouse (1)
Andain (1)
A Perfect Circle (1)
Aura Dione (1)
Balint Adam (1)
Billy Talent (1)
Bliss (1)
Boyce Avenue (1)
Breaking Benjamin (3)
Breathe Carolina (1)
Catfish And The Bottlemen (0)
Damien Rice (2)
Danny Elfman (1)
Dave Matthews Band (1)
David Lee Roth (1)
Death Cab For Cutie (1)
Diary Of Dreams (2)
Digital Summer (1)
Disturbed (3)
Drowning Pool (1)
Eminem (1)
Five For Fighting (1)
Flo Rida (2)
Fort Minor (1)
Get Scared (2)
Goodnight Nurse (1)
Gotye (1)
Hoobastank (1)
InMe (1)
Ivy (1)
Jamiroquai (3)
Jeniffer Lopez (3)
Jet (1)
Kelly Clarkson (1)
Kelly Sweet (0)
Kula Shaker (1)
Late night almuni (4)
Led Zeppelin (1)
Lenny Kravitz (0)
Limp Bizkit (3)
Linkin Park (1)
Lorde (1)
Lou Reed (2)
Magic! (1)
Maroon 5 (1)
Michiko (1)
Mindless Self Indulgence (1)
Mindy Gledhill (0)
Miss Jane (1)
Muse (2)
N.E.R.D. (1)
Nickelback (1)
Nirvana (1)
Oasis (1)
Panic! At The Disco (1)
Papa Roach (1)
Pharrell Williams (1)
Radiohead (1)
Rage Against The Machine (1)
Red (1)
Red Hot Chili Peppers (3)
Rhye (2)
Rumer (1)
Sade (1)
Sarah Brightman (1)
Shakira (1)
Sixpense None The Richer (0)
Soulja Boy (1)
Steven Cooper (1)
Sting (1)
Sum 41 (2)
Taio Cruz (1)
The Fratellis (0)
The Pretty Reckless (1)
The Weepies (1)
Three Days Grace (1)
Tom Waits (2)
Travie McCoy ft. Bruno Mars (1)
TRUSTcompany (1)
Ty Stone (1)
U2 (1)
Westlife (1)
未分類(個人的テスト等) (48)