Entries

    [WebDev]三点リーダ問題、webfontでついに解決!……か?

    WEBのコーダー、とひとくくりにできるようになりましたね。

    いい時代になったものです。

    昔(アジャイルでなければ投資家がWEB開発企業として見なしてくれない時代になる前)は、HTMLやCSSや画像ファイルなどを担当する「デザイナー」、

    JavaScriptやPHPやサーブレット(あったね、そんなのw)などを担当する「プログラマー」、

    そしてWEBサーバ、DBサーバの設定・設置、その他もろもろを担当する「エンジニア」、

    さらに挙動をテストする「テスター」、

    これらは「役割分担」の名のもとに、異なる人たちによって担われていたのです。

    ほんの10年前の話しです。

    今の若いWEB関係の人たちには信じられない光景かもしれませんが。

    (もしあなたが若くて、上記のような「光景」が目の前で繰り広げられていたら、すぐにそこを去るべきです。10年後のアジャイル開発に適応できなくなります)


    三点リーダ問題とは

    それはさておき、CSSが登場して以来、WEBのコーダーを悩ませていた問題があります。

    10年前は「デザイナー」が悩んでいましたが、今はWEB開発関係者全員が悩んでいる問題です。

    いわゆる「三点リーダ」問題です。


    三点リーダとは、「……」←コレのことです。

    「えっ……」と私は言い淀んでしまった。

    なんていう時に使う、テン・テン・テンのことです。

    (日本語OS以外の環境だと点の垂直位置が中央でないかもしれません)


    で、これの何が問題かというと、

    1. ほとんどのWEBコーダーは、日本語に固有の文字は日本語専用フォントで表示せさたいが、英数字はラテン語圏由来のフォントで表示させたいと思っている(見た目的に日本語フォントで英数字を表示すると美しくないから)
    2. したがって、CSSで、デフォルトのfont-family(body要素への指定)には、ラテン語圏フォント→日本語フォント→キーワードとして"sans-serif"を表記、という書き方をすることになる
    3. これで、CSSの仕様通りにブラウザが解釈してくれれば、英数字部分はラテン語圏フォントで表示し、日本語部分は日本語フォントで表示してくれる、と期待できるし、ほぼ期待通りになる(Operaは例外)
    4. ところが、期待したとおりに表示してくれない、ほとんど唯一と言っても過言ではない一文字がある(ホントは違うだろうけど、あまりにも頻繁に出くわす問題としては唯一でしょう)
    5. それが『三点リーダ』なのですよ!!

    具体的に、どう表示されるかというと、

    「えっ……」と私は言い淀んでしまった。

    ↑このように表示されます。下付きですね。(下付きになっていないとしたら、OSが[略])

    「三点リーダ」は、ナカグロ(・)よりは小さい点で、これを3つ並べて、水平に、つまり、行の真ん中に表示されなければならないはずなのに(そしてテキストエディタでコードを見ると、実際そのように表示されている!)、

    行の最下部に、ドット(.)を3つ並べたように表示されてしまいます。


    なぜこのようなことが起こるのか?

    理由は単純で、

    • ユニコード表で、【日本語の三点リーダ】も、【英語のellipsis】も、同じ番号が割り当てられている(U+2026)

    という不可思議な事態が、いつの間にか、世界的標準として勝手に決められちゃったからです。

    そして、

    • ラテン語圏フォントには、下付きドット3つのellipsisというグリフが含まれている

    からです。


    ellipsis(複数形がellipsesで、英文法的には複数形で言うのが普通)というのは、

    The poem begins, "My heart leaps up when ...."

    のように、引用文の省略に使用されます。↑の例では文の終わりにellipsesが来ているので、さらにピリオドをひとつ追加しています。

    (この文の引用は『表現のための実践ロイヤル英文法』2011年版から。)

    (2011年版から「例文暗記CD」が付きました。)

    (余談ですが、この本、はっきりいって必携です。)

    (英語での、ビジネス的なやりとりには、美しい修辞的表現なんてものはもちろん要りませんが、「英語的な感覚から言って正確な表現」は絶対必要です。)

    (『ロイヤル英文法』というと、大学受験生必携のあの文法書を思い出して、拒絶反応を起こす世代もいると思いますがw、この『表現のための』は、1ページ目から最終ページまで通読して、ほんとうに楽しいと思える、変な文法書です。)


    つまり日本語の「三点リーダ」も、英語の"ellipses"も、機能的には、かぶっているんですね。


    日本語に多いのは、口ごもったり、言い淀んだりする場合、あるいは余韻を持たせる場合ですが、英語でも、そのようなケースで用いられます。

    ただ、フォーマルな文(ビジネスでのメールなど)ではそのような使用はできません(幼稚に見えるみたいです)。


    じゃあ、「三点リーダ」と"ellipsis (ellipses)"を「同一視」して良いかというと、そんなことはないでしょう。

    Wikipediaのellipsisの項目では、四カ国語での"ellipsis"の機能・意味が紹介されていますが、日本語のセクションで、「文脈に依存した含意を持つ」使用法が紹介されています。

    つまり、たんなる「省略」ではなく、意味があるんですよ、三点リーダには!



    あ。


    いや。


    それ以前に、「文字」としても「グリフ」としても、まったく別のものでしょう。それが根本問題なんだけど。


    各種対策

    理不尽なことに対してつい熱くなってしまいましたが、要は「日本語の三点リーダのつもりでblog記事を書いたのに、なぜかピリオドが3つ並んでいるような表示になってしまう」ことは美しくないのがここでの問題ですね。


    で、いろんな人が、いろんな対策をしてきました。

    この記事の上の方で、「日本語の三点リーダ」の説明をしましたが、そこでは「ちゃんと」真ん中に点がありましたね。

    あれは、三点リーダの部分だけに「日本語フォントのみ」の指定をしたからです。

    多くの方が、過去にそのような「対策」をしましたが、現実的ではない「対策」です。

    いちいちspan要素に入れてクラスを持たせるとか、

    ブログを書き殴りたい人からしたら、気が狂いそうになるやりかたです。



    現在、メインとなっている「三点リーダ対策」は、2種類あるようです。


    1つ目:ユニコードレンジ指定のfont-family

    現時点でぼくが一番スマートだと感じているのがこの方法。

    @font-faceのunicode-rangeディスクリプタの使用です。

    ローカルフォントの参照でファミリーネームを新たに作り、U+2026を決め打ちで、必ず日本語フォントで表示させる、というCSS3なやり方です。


    ブログ記事三点リーダの垂直位置をどうにかしたいさんの書いたCSSがとてもわかりやすいので、引用させていただきます:

    @font-face {
    font-family: "MeiryoArial";
    src        : local("Meiryo");
    }
    
    @font-face {
    font-family: "MeiryoArial";
    src        : local("Arial");
    }
    
    @font-face {
    font-family  : "MeiryoArial";
    src          : local("Meiryo");
    unicode-range: U+2026;
    }
    
    body {
    font-family: "MeiryoArial", sans-serif;
    }
    

    まずローカルフォント「メイリオ」に"MeiryoArial"というファミリーネームを付けます。

    次に、ローカルフォント"Arial"を"MeiryoArial"に追加します。

    このとき、Arialが先頭に来ます。

    つまり

    font-family: Arial, Meiryo; = font-family: "MeiryoArial";

    ということになります。


    そしてさらに、メイリオの中のU+2026、つまり三点リーダのみが、"MeiryoArial"の先頭に追加されます。


    これは素晴らしいのですが、問題はブラウザのCSS3への対応状況ですね。

    「日本語フォントのunicode-range指定」に対応しているのはIE9とGoogle Chrome、iOSのmobile Safari、Android標準ブラウザ、のみです(と2011年6月に発売された『CSS3スタンダード・デザインガイド』には書いてありますが、今はどうかわかりません)。

    (ちなみに、「日本語フォント」でなければ、PC版Safariも対応しています)

    で、「日本語フォントのunicode-range」に対応していないブラウザではどうなっちゃうのかというと、

    • @font-faceのローカル参照に対応しているFirefoxやSafariでは、unicode-rangeディスクリプタが無視されて単にメイリオで上書きされるので、すべての文字がメイリオで表示される
    • @font-faceのローカル参照に対応していないIE8以前ではsans-serifで表示される

    ということになります。


    (上記のコードはメイリオとArialのみの例示です)

    (Macに対応するため、"HelveticaArialHiraginoMeiryo"みたいにどんどん上書きしていく必要があります)


    (それと、Android OSだと、ローカル参照があると、そのフォントが在っても無くてもローカルフォントで表示しようとします。と2011年6月に出版された『CSS[略])


    2つ目:WordPressのプラグイン

    これはWordPress環境でしか利用できない対策ですが、プラグインが公開されています。



    これはソースを見ればわかるように、いたってシンプル。

    上述した「現実的でない」やりかたを、スクリプトを利用して自動化させているだけです。

    つまり、「三点リーダ」を発見したら、spanタグで囲み、さらにそのタグにはstyle属性があり、font-family:'MS Pゴシック'が指定してある、というわけです。

    これも、Mac対応のために、ヒラギノ系フォントを先に挿入するなど、カスタマイズが必要ですね。


    シンプルかつ「スクリプトによる自動化」という点で、素晴らしいのですが、これの弱点は、WordPressに限るところですね。



    ちなみに、ぼくが使っている、このFC2ブログは、一般的なブログサービスと同様、リッチエディタ(直接テキストエリアに書き込んで、文字を選択してボールドボタンを押せばボールドになるとか、あれ)と、HTMLによる編集を選択できます。

    ぼくはもちろんHTMLで書いています。

    といっても、手打ちでテキストエディタにHTMLのタグを書いているのでも、HTMLエディタ(Dreamweaverとか)を使っているのでもなく、

    自分で考案した独自記法(昔、はてなダイアリーを使っていたので「はてな記法」にかなり近い)でEvernoteに下書きして、

    テキストエディタにコピペして、

    .htmの拡張子をつけて保存し、

    そのフォルダにあるRubyスクリプトをダブルクリックすればHTML文書が一瞬でできあがる

    という仕組みを自作しました。


    ああ。

    ぼくのblog環境なら、Rubyスクリプトで自動化すれば解決か。




    いやいや。

    blogとかの個人的環境ならどうとでもなるけど、

    根本問題は、顧客に提供するWEBシステム一式の中で、グローバルに、リリース後になんの変更も必要にならない、誰も困らない仕組みを規約化することにあるのであって(設定よりも規約!)。


    そんなわけで、抜本的解決法を考えてみた。


    ついにリリース!ellipsisjp!


    上記のPHPスクリプトを書いた方の記事本文に、

    見栄えがよくて、それでいて三点リーダーが中段にくるようなフォントがあればいいんだけど、それが無い。

    時代は21世紀だってのに、たったそんだけの条件を満たしてくれるフォントがありゃしねんだ!

    ドラマッチック宇宙船地球号!

    WordPressで三点リーダーのフォントを変更する


    という記述があって。

    そんなフォントを、作っちゃいました。


    その名も、"ellipsisjp"!


    といっても、「見栄えがいい」わけではありません。

    たんに、「三点リーダ」のみをグリフに含むフォントであるというだけです。

    これを、webfontとして@font-faceで読み込み、

    デフォルトのfont-familyの先頭に置けば、「日本語三点リーダ」のみ、このフォントが利用される、というわけです。


    いちおう、ZIPで置いておきますね



    【説明と免責事項】

    • 「三点リーダのみをグリフに含む」と書きましたが、フォントというものがそもそも必ず含まなければならないとされるいくつかのよくわからない文字も含んでいます。
      • それはたぶん、タブ、半角スペース、NO-BREAK SPACE、改行、Private use areaとして確保されているU+E000、の6文字、だと思います。
      • 「だと思う」というのは、U+2026決め打ちでwebfontを作成したのに、SVGファイルを開くと、2026以外に5つ、unicodeのみが指定されていて、中身がない文字が5つあって、中身がないというのは、グリフを確認しようがない、ということになり、つまり、早い話が「空欄」が確保されている、ということです。
    • 作成に使用したツールは定番のFontForgeです。Ubuntuで作成。
      • FontForgeでTTF形式でフォントを書き出したあと、FontSquirrelの@FONT-FACE GENERATORにアップロード、EXPERTモードで2026決め打ちで(ユニコードレンジが指定できるのです)webfontを作成しました。
      • 1グリフのみ決め打ちしたのに、SVGをみると他の数グリフが書いてあって、「そういうもんなんだなあ」と思った、というわけです。フォントのことなんて、ふぉんっとにわからないんだから!
      • あと、FontSqirrelにはホント救われるわー。
    • ベンダーはFontForgeのデフォルトの「PfEd」となっています。このフォントを使用したことによるいかなる損害の責任も、私は負いません。ベンダーに文句を言ってください。
    • バージョンはdev0.0.5となっていますが、5回で完成したわけではなく、1週間ぐらいかかりました。たった1文字なのに……
    • ライセンス(著作権)の欄に、当初は「Creative Commons - Share Alike」(改変可・再配布は同一条件のもとでのみ可)の記述を入れていましたが、Creative Commonsって、Attribution(帰属)が必ず付くんですよね。でもぼくはAttributionをはずしたかった(誰が作ったか、という帰属先の放棄)。Creative CommonsでAttributionをはずすという変則的な宣言が認められるのかよくわからなかったのと、そもそも帰属先がないのなら「Share Alike」という宣言も誰がしたのか不明ということになり、無効になるんじゃないかなー、とか考えているうちに、まあ空欄にしておくか、という結論になりました。
      • CCライセンスよくわからんので識者の意見請う。
      • Copy Leftという線も考えましたが、「Share Alike」は大事だと思っているので……


    ま、堅い話は置いといて、じっさいにどう挙動するのか、スクリーンショットを見てみましょう!

    スクリーンショットを撮るのにつかったサンプルページも設置したので、ご自分の環境でどう見えるか、確認してみてください。

    (くどいようですが、webfontというのは無理やりクライアントにフォントファイルというバイナリをダウンロードさせるという、セキュリティ的にかなり無茶な仕組みですので、覚悟してください。どんな損害が発生しても、責任は負いかねます


    まず、CSSから。

    @font-face {
    font-family: 'ellipsisjp';
    	src: url("ellipsisjp-webfont.eot");
    	src: url("ellipsisjp-webfont.eot?iefix") format("embedded-opentype"),
    	url("ellipsisjp-webfont.woff") format("woff"),
    	url("ellipsisjp-webfont.ttf") format("truetype"),
    	url("ellipsisjp-webfont.svg#ellipsisjpbook") format("svg");
    }
    .sample1 {
    font-family: Helvetica, Tahoma, Verdana, sans-serif;
    }
    .sample2 {
    font-family: "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", sans-serif;
    }
    .sample3 {
    font-family: Helvetica, Tahoma, Verdana, "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", sans-serif;
    }
    .sample4 {
    font-family: ellipsisjp, Helvetica, Tahoma, Verdana, "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", sans-serif;
    }
    

    環境はWindows 7、Firefox 17.0.1です。Google Chromeだとまったく挙動が同じなのでスクショも割愛します。

    ではまずsample1、つまりfont-family: Helvetica, Tahoma, Verdana, sans-serif;の場合:

    サンプル1

    正常ですね。WindowsにHelveticaが無いので、Tahomaで表示しようとするが、日本語の部分はsans-serifまでフォールバックし、ぼくがFirefoxに設定しているデフォルトフォント(MeiryoKe_UIGothic:「メイリオ改」系のフォント)で表示しています。

    ちなみにOpera以外の、無料で入手可能な主要ブラウザのすべてで、同じ挙動を確認しています(Mac実機での確認はできていません。マカーの報告請う)。OperaはなぜかMS ゴシックになります(後述)。


    次、sample2、つまりfont-family: 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', Meiryo, 'メイリオ', sans-serif;の場合:

    サンプル2

    これも正常ですね。ヒラギノ入れてないので、全部メイリオで表示されています。

    英文のellipsisも日本語風の三点リーダになっているのを見ると「ざまあみやがれ!」という気分になりますね。


    次、sample3、問題の、font-face: Helvetica, Tahoma, Verdana, 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', Meiryo, 'メイリオ' sans-serif;という、最も日本でよく書かれているCSSにおけるフォント指定ですね(Tahomaを入れるのはぼくぐらいか?普通はArial入れますね)。

    ポイントは、Mac用フォントを前に持ってくる(MS-Officeをインストールするとメイリオなどが強制的にインストールされてしまうので)。ヒラギノ系はこのように3種類書かないとNGなケースが稀にあるので、しつこくこのように書く。old Firefox(3.6とか?)はMeiryoだとダメで'メイリオ'と書かなければならない。Safariは逆に'メイリオ'はダメでMeiryo。したがって両方書く。

    サンプル3

    これです!

    こうなっちゃうんです!

    これが嫌で嫌でたまらないんです!

    って感じですね。


    ではいよいよsample4、font-family: ellipsisjp, Helvetica, Tahoma, Verdana, 'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', Meiryo, 'メイリオ', sans-serif;のケース。

    サンプル4

    やったよ!

    母さん!

    ぼくはやればできる子だったんだ!


    (なお、英文のellisesまでが"ellipsisjp"で表示されており、それはまずいのではないか、と思うかもしれませんが、通常、英文を書くときは、ellipsesを表現するのためにはドットを打つだけで、いちいちIMEで文字変換などしませんよね。したがって英文で"ellipsisjp"が使用されることは基本的にはありません。)



    さて、これの欠点は、webfontが利用できるサーバでないと、まったく意味が無い点ですね。

    じっさい、サンプルページを置いているサーバは、広告付きの無料レンタルサーバで、.htaccessによるMIME TYPE設定すらできないので、IEにeotなりwoffなりを適した形式でGETさせることができません。

    IE以外は、ブラウザが勝手にMIME TYPE判断するのにね。

    しかしまあ、ここでの目的は、顧客に提供するWEBシステム一式に、問題の起こらない仕組みを組み込むことなので、WEBサーバの設定までこちらがやれるという前提で、OKでしょう。


    ついでに、iOS2種、Android OS 2.3.5のsample4成功のスクショも貼ります。

    まず初代iPad、iOS 5:

    iPad iOS5

    ちなみにiOSに含まれているヒラギノは、"ProN"なので、実はsans-serifまでフォールバックしています。英文はHelveticaがデフォルトで入っています。


    つぎ、iPhone、iOS 4.3.4:

    iPhone iOS4.3.4

    まあ、iPadと同じですね。iOSは4.2以降、webfontとしてはTTFを拾うので、SVGの実機確認ができていないのでした。

    どなたかiOS4.2未満でスクショ撮れる方、ご報告お待ちしております。


    次、Android OS 2.3.5:

    Android 2.3.5

    Androidも日本語部分はsans-serifまでフォールバックしています。




    おまけとして、Operaの珍挙動と、Windows版Safariのやる気の無さをご紹介します。

    まずOperaのsample3です。

    Operaサンプル3

    なんでメイリオを指定しているのにMS ゴシックなんでしょう?

    Opera付属のDragonFlyで要素を検証しても、"Meiryo", "メイリオ"と表示されています。


    妄想ですが、これはTahomaで表示しようと頑張っているのでしょうか。

    レジストリエディタでシステムフォントリンクを見ると(HKEY_LOCAL_MACHINE > SOFTWARE > Microsoft > Windows NT > CurrentVersion > FontLink > SystemLink)TahomaはMSGOTHICにフォントリンクしています。


    Windowsユーザにはおなじみのフォントリンク機構ですが、例えばコーディングなどに使う、好みの等幅フォントがBitstream Vera Sans Monoだとします。

    ぼくの好きなフォントです。

    しかしこのフォントには日本語文字が含まれていないので、MeiryoKe_Console(「メイリオ改」系フォント)にフォントリンクさせ、日本語の部分の表示・入力も問題なくできるようにできる、という機構です。


    これ、便利なので以前は使っていましたが、MacTypeというフォントレンダリングサービスを常駐させるようになって以来、使っていません。

    MacTypeが動作していると、フォントリンクした全角文字も半角の幅に表示しようとするため、表示がめちゃくちゃになるからです。

    Bitstreamでコーディングできたらさぞかし楽しいのでしょうが、MacTypeの美しさの前には、犠牲にせざるを得ません。


    ちなみにFirefoxとOperaのスクショを貼りましたが、FirefoxやOperaでの文字の表示にもMacTypeが効いているので、普通のWindowsの文字表示の1000倍ぐらい綺麗です。

    MacTypeというぐらいですから、Macのように文字の表示が綺麗になります。

    もう後戻りはできません。


    余談が長くなりましたが、要するに、Operaは、システムのフォントリンクをCSSよりも優先させようとしているのだろう、というのが、ここでの仮説です。

    しかし、だとしたら、なぜ他のモダンブラウザはフォントリンクよりもCSSを優先させることができるのでしょう?

    よくわからないですね。


    つぎに、もっと衝撃的なスクショを貼ります。

    Operaのsample4です。ellipsisjpを使った部分です。

    Operaサンプル4

    ?!


    セリフ体?!


    日本語は明朝体になり、英文は……これはTimes New RomanじゃなくてMS明朝なのかなあ?

    これはちょっと、仮説もたてられないですね。

    ellipsisjpの制作過程で、「セリフ」と入力した部分は一箇所もありません。

    「サンセリフ」と、何ヶ所か入力しました。

    なので、woffファイルにもttfファイルにも、「このフォントはサンセリフ体である」という定義がどこかでなされているはずです。

    それをOperaが読み取れなかったとしても、だったらフォールバック(Tahomaやメイリオへ)すればいいだけの話なのに……


    謎だ!



    気を取り直して。


    「Windows版Safariのやる気の無さ」と書きました。

    まあ、これを見てください。わかりやすいように、キャプチャ画像を拡大しています。

    Safariサンプル4

    切れてるでしょ?文字の上下が。

    line-heightを増やしてもダメです。

    そもそも「ま」の上に抜き出ている棒は表示されているのに、それよりも低い位置にある「の」の上辺が表示されていないのだから、ボックスとかも関係ない。

    AppleはWindows版のSafariを真面目に作る気はないのでしょう。

    シェアも(Windowsユーザの間では)どうせ少ないのだし。


    結論。これで本当に解決なのか?


    「三点リーダ問題」というわりと一般的な問題に対処してきましたが、webfontの利用で、すべて解決、と言っていいのでしょうか?


    ぼくは、これは、Unicodeの「バグ」だと思っています。

    CJK(中国語・日本語・韓国語)文字のように、意味や機能は違っても、グリフがまったく同じでも問題がないのであれば、同一の番号を割り当てるのに、賛成です。

    しかし、ellipsisと三点リーダは、意味や機能に近い部分はあるけれど、完全に異なる文字です。

    ...とが同じだというなら、「私」と「I」も同じ番号を割り当てたらいかがでしょうか。


    日本語版WikipediaのUnicodeの項目によれば、通産省での情報部会のようなところで日本語の文字コードの議論が行われ、そこで国際規格も話題にされ、国際審議に参加できる日本人も何人かいたようである。


    そいつらなにしてたの?


    「足りない漢字を入れてくれ」じゃねーだろ。


    「日本語の文字に、誤った解釈をされて番地付けされているバグがあるから直せ」だろそこは。

    漢字が足りないとか、そんなのその漢字を使いたい奴が画像でも貼っておけば済む話だろ!


    で、Unicodeのバグ報告って、どこにすればいいんですかね?


    IBMとかに所属してないと、報告すらできないんですかね?

    関連記事
    スポンサーサイト
    この記事にトラックバックする(FC2ブログユーザー)
    http://orangeprose.blog.fc2.com/tb.php/320-6be595a5

    トラックバック

    コメント

    [C3]

    欧文フォントでも一部のプロ用バージョンだと、中央の三点リーダーを異体字としてもってるのが合ったような…
    googleのwebfontでプロって書いてるのならもしかして?
    そもそも、フリーフォントとかだと三点リーダーがなかったりすることも合ったり…

    DTPだと合成フォント機能があるんで、気に入らない字体はバシバシ変えられるんですけどねぇ(小塚フォントとかとか)…
    • 2012-12-28 18:22
    • 名無しさん
    • URL
    • 編集

    コメントの投稿

    コメントの投稿
    管理者にだけ表示を許可する

    Appendix

    counter

    FC2ブログ

    ブログ

    リコメンド




    ノートンインターネットセキュリティ


    ブログランキング

    QRコード

    QR

    メールで更新を受け取る



    提供:PINGOO!

    ブロとも申請フォーム

    この人とブロともになる