メイリオフォントで斜体を表示
　このページはメイリオ関連の情報を探していた時に見つけてブクマしたんだけど、それで発掘されて、他のブログでも話題になっていた。「もはや日本語においても斜体は標準的な表現方法の1つであり」という表現が特にひっかかっているらしい。確かにこれは初耳だった。

日本語で斜体を使うのはおかしいだろ : ひろ式めもちょう

日本語の印刷物で斜体表現が増えたのって、ローテクなワープロがフォントを用意できずに苦心してたころと期を一つにするものじゃない？

　自分もこれに一票。横倍角とかと同じで、斜体は日本語ワープロ時代の名残だと思う。

いつから斜体なりイタリックなりが標準的な表現方法になったんだ。アレを多用しているサイト（はてなに多い）を見るたびに、読みづらいからやめてくれと思う。

　これははてなダイアリーではciteタグ使っている人が多いからではないだろうか。citeタグは標準でイタリックにされてしまうが、それが嫌で自分はciteタグを使ってない。

日本語の斜体 - r-yamの日記

日本語で斜体を使っているのは多くはチープな媒体で、「たまたま斜体が使えるから」「ウェイトの違うフォントを持っていないので代替として」くらいの意味で使われるのが主だ。

Windows版Safari+メイリオは綺麗 : ARTIFACT ―人工事実―
　この記事を書いてから、Macintoshにメイリオが入ったり、Windows版Safariの登場など、環境が複雑化している現在、下手にfont-familyは指定しないほうがいいなと思って、ブログでのフォント指定をやめてみた。
　ただ、メイリオで表示してもらいたい場合、文字コードがUTF-8では、欧文フォントが「メイリオ」、日本語フォントは「MSゴシック」などブラウザの規定のフォントになってしまうことがある。これを避けるためには、HTMLタグでlang=”ja”宣言をしておくといいそうだ。

CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 - webデザイナーのナナメガキ

まず、font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だとWindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。

　フォントを指定しない場合の問題はこれだけらしい。
　Movable Typeが出た当時は、フォント指定しておかないと、テキストエリアで文字化けが発生するなんてのもあって、フォントをがちがちに指定したけど、そういう問題ももう見かけない。
　IEだと希望としては1バイト文字がVerdanaで見えて欲しいんだけど、メイリオが出てきたんだし、もうVerdanaにこだわらないことにした。Verdanaはモニターでの可読性を意識した英語フォント。
ARTIFACT ―人工事実― : font-familyに指定する英語フォント
　Verdanaの記事を書いたのは、2003年だった。

Fledgling Blog: フォントの指定

ここの情報にちょっと補足。
「sans-serif」のみ指定した場合、欧文フォントの違いのみ書かれていますが、日本語フォントも違うんですよね。

Shift_JIS・EUC-JPの場合は「MS UI Gothic」
UTF-8の場合は「デフォルト指定されているフォント」
で表示されます。

さらに、「※おおまかには問題ない指定」のときに、UTF-8の場合、なぜか欧文フォントが「メイリオ」で、日本語フォントは「MS UI Gothic」になってます……。
EUC-JPのほうは、全部メイリオになっているのに……。

　IE6での話。複雑だ…。

CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 - webデザイナーのナナメガキ

anon 08-03-10 (Mon) 9:42
（中略）
MacのSafariとFirefoxでは、bold体の扱いが違います。SafariではWeightを含んだフォント名を指定しなければならなかった代わりにきれいなフォントで表示される一方、FirefoxはWeightの重いフォントを使わず汚い自家製BOLD加工をしてしまうので、回避するためのCSSが煩雑でした。

　これが気になるんだけど、回避策がわからないので、何とも。

　そういえば、これらの記事でメイリオがOpenTypeフォントだと書かれていることがあったけど、TrueTypeである。OpenTypeのフォントの拡張子はotfでTrueTypeはttc/ttfだが、メイリオはttcである。

　こうしたフォント指定で英語圏の面白い話があったのでメモ。
エコノ研究所 | Verdana

Comic Sans Cafe は Comic Sans について…
このフォントは、Windows に標準で組み込まれているフォントの中でも、最もキャッチーな見た目を持っているフォントだ。しかし、その容姿の柔らかさがライトユーザを強く惹き付けてしまうためか、やや安直に濫用されてしまっている傾向がある。英語圏の「良識ある」ユーザ達は、この “Comic Sans” に氾濫にほとほとうんざりしているようで、”Ban Comic Sans” （Comic Sans を撲滅せよ！） などと題されたジョークサイトまで立ち上げられてしまう始末だ。

　日本語でも、丸文字フォントがたまに指定されているページがあって、指定されているフォントがたまたま入っていたりすると、非常に困る事態になるのだけど、英語圏だとちょっとファンシーなフォントであるComic Sans MSがWindowsに標準で入っているので、もっと被害が大きい模様。

アップル - Safari
　Windows版Safariは、WindowsのClearTypeを使わず、独自のレンダリングエンジンでフォントをスムージングしてくれる。MS Pゴシックのスムージングもいいのだが、一番綺麗に見えるのはメイリオだ。これはWindows版Safariから出た当時から言われていた話なんだけど、3.1が出た記念ということで。

※クリックで全体画像を表示
※環境はWindows XPでキャプチャー／Safariは上はフォントスムージングを弱に、下は中にしている。当初のキャプでは上の画面はスムージングを強にしていた
※液晶ディスプレイによってサブピクセルのRGBの並びが違うため、自分が見ている環境よりもぶれて見えている可能性があるという指摘があった。
Re:Windows版Safari+メイリオは綺麗 - IE6+ClearTypeのサンプル画像の表示が余計に見づらい人もいる？ - 逃走航路@hatena
　Ubuntuの標準のデスクトップ環境であるGNOMEでは、液晶のサブピクセルの順番を設定できるそうだ。
Linux Salad: フォントの表示を綺麗にしよう！

　フォントにメイリオを指定しているnikkei BPnetと指定がないらしいImpress Watchで比較してみた。左がSafariで右がIE。SafariはIEに比べて、かなり太い文字でレンダリングしているのがわかる。Safariは、WindowsのClearTypeというフォントのスムージングを使っておらず、ブラウザ自身でフォントのスムージングはしているので、このような違いが出る。フォントのスムージングは文字が細いと見えにくくなるので、確かにこうして太めに加工したほうが確かに見やすい。
　あと、メイリオ使用時の綺麗さは、ボールド書体（meiryob.ttc）が別途用意されているというところもあるのだろう。Safariで見ているとわかるのだが、MS Pゴシックを単純に太くしたボールド書体はあまり綺麗なものではない。

　最初にWindows版Safariが発表された当時は日本語表示ができなかったが、3.03からは日本語表示が問題なくなった。ただし、3.03まではテキスト入力に日本語が通らず、3.04から通るように。動作環境はWindows XP以上と指定されており、3.03はWindows 2000でも動作したのだが、3.04以降は自分の環境ではJavaScriptが使われているページを見ると落ちてしまう。JavaScriptを切れば動作する。なお、ClearTypeを搭載していないWindows2000でも、液晶ディスプレイ向けのスムージングが行われる。

　よくわからないのが、フォント指定がされていないページであっても、Safariでデフォルトフォントを設定しても、それで表示してくれるフォントと表示してくれないフォントがある。常時できないとMS Pゴシックにされてしまう。いろいろいじってみて、最終的にメイリオをデフォルトしてみた。フォント設定は、編集→設定→表示で、標準設定という設定から変更できる。
　大半のページでは、Safariで見ても、MS Pゴシックの指定が優先されてしまい、意外と綺麗ではないと思うかもしれない。しかし、Safariでメイリオを指定して、フォント指定されていないページやメイリオが指定されているページを見るとかなり印象が変わる。以下のサイトはメイリオで見られた。
読売新聞
asahi.com
Impress Watch
nikkei BPnet
マイコミジャーナル

　これまで、Windowsユーザー対策としてCSSではMS Pゴシックを指定していたが、メイリオを標準装備したVistaが登場した現在、これからは下手に指定しないほうがいいかも知れない。
※関連
CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 - webデザイナーのナナメガキ

　この辺のブラウザとフォント指定を調べていたことをメモ。

　SafariがMSゴシックをスムージングしてレンダリングするので、誤解されているようだけど、MSゴシックでも本来どのサイズでスムージングできる。
Windows版Safariが「正式版」に，メニュー表示も日本語化：ITpro

「MS Pゴシック」は，Webブラウジングでよく使われる16ポイント以下のフォント・サイズにおいて，Windows標準のアンチエイリアシング技術である「ClearType」が有効にならない。このためSafariは，ClearTypeとは別の技術でアンチエイリアシング表示を使用していると推測される。

　これはMS Pゴシックのフォント自体に、16ポイントサイズ以下において、ClearTypeが有効にならない設定がわざとされているから。
※関連
ARTIFACT ―人工事実― | Windowsのシステムフォントにアンチエイリアスをかける

　大体のフォントは似たような設定がされているが、Wordに入っているHGゴシックなどはその設定がされていない。画面はFONT GALLERYの角ゴシックを使ったもの。なぜオフにされているかというと、小さいサイズのフォントをスムージングするとCleartTypeでは薄く見えて実用に耐えないからだ。
※参考
航海日誌: Safari 3 for Windowsの表示
　Acrobat Readerなど小さいサイズでもフォントスムージングを行ってくれるアプリケーションはあるのだが、Windows標準のレンダラーに頼ると、小さいサイズはフォントスムージングが切られてしまう。

　なお、それらを解決するためにWindowsのフォントレンダリングを乗っ取るgdi++.dllがある。ただし、使うと遅くなるようだ。
gdi++.dll

　WindowsでOpenTypeのフォントを設定できるブラウザは限られていて、FirefoxとOperaで、IE6とSafariは使えない。IE7はわからず。IEはともかく、SafariでOpenTypeを使えないというのはちょっと不思議だった。

※関連
メイリオのレンダリングはSafariが美しい | BLOG × WORLD ENDING
2007年12月の道具としてのパソコン・メイリオとアンチエイリアス
　Windows版Safariとメイリオの話。

MSのクリスマス・プレゼント？，XPでも「メイリオ」が正式に利用可能に：ITpro
　これまで正規のライセンスでメイリオを使うのは難しかったが、Visual Studio 2008 Express Editionをインストールすれば、正規に使用できる。

なつみかん。 | メイリオとヒラギノを比較する
YOPPA BLOG » 明瞭
　メイリオとヒラギノ、MSゴシックなどのフォント比較。
蕎麦処 ぱろある亭: メイリオ
　OSXではメイリオに埋め込まれたTrueTypeのヒンディング情報を使わずに、独自でレンダリングするため、OSXでは綺麗に見えるという話。今回のSafariもそこが関係しているのだろう。

　Amazonの商品画像ってドロップシャドーつけたものとかいろいろできるはずだったよなあと思って、情報を調べた。画像のURLによって変わるそうだ。
[続きを読む]

現状のWEBと次世代WEB (web2.0) の比較、およびコンテンツプロバイダ系企業の事業移行提案 : iandeth.
　TrackBackしてもらったこの記事（パワーポイント）を読んで、2000年5月に書いた企画書を思い出したのでアップしてみます。
　こちらの記事では人手によってセレクトされた情報サイトを提案されているので、正確には自分が考えたような自動ナビゲーションサービスとは違います。でも、自動か手動かはさておき、今後ネット上では、溢れる情報からユーザーが必要とする情報へのナビゲーション／マッチングがますます必要になるだろうというのは、はてなブックマークなどのソーシャルブックマークの人気などを見ていると感じるので、近いものだと思います。
　このプレゼンテーション資料はビジュアルがわかりやすくていいですね。あとフォントのこだわりも。MSゴシックやMS明朝だけだと様にならないですよ!

　自分が書いた企画書は、固有名詞の古さ、利益の出し方の大雑把さなどは2000年に書いたものだからってことで見逃して欲しいんですが、これを書いた時にどうすればいいのかわからなかったのが技術的な面。
　でも、改めて読み直してみると、今なら既存の技術の組み合わせでできそうとは思わせます。特にキーワードに関しては、キーワードの登録は面倒かなあと思っていたんですけど、はてなダイアリーのように自分が普段からブログに書いた文章からキーワードをピックアップして支援するなどの機能もあれば、いけるのかなという気はしてます。
　文章を書くのも面倒だというのなら、ソーシャルブックマークでクリップした情報から、この人はどういった趣味の傾向の持ち主か?というのを判断し、自動的にその人の趣味志向をデータベース化していくというのも考えられます。
　サイトのイメージとしては、AmazonレコメンドがくっついたGoogleニュースという感じですかね。

―――――――――――――――――――――――――
●企画意図
　現在、インターネット上の情報サイトが続々と立ち上がっているが、その中でも、漫画・アニメーション・ゲームファン向けの情報サイトは、ファンの情報への欲求が強いため、特に需要が高い。そのため、『MANGA ZOO』『キャラアニドットコム』など大規模なプロジェクトのサイトが増えてきている。しかし、パソコン業界における『PC WATCH』のような定番サイトといえるようなものはないのが現状だ。そこで、定番となるファン向け情報サイトを企画する。

●企画内容
　メールマガジンや情報サイトが読まれなくなる原因の一つとして「情報が多すぎる」ということが挙げられる。情報発信側は、「多ければ多いほどいいだろう」と考えがちだが、個人の趣味嗜好に合わない情報ばかりでは、情報にゴミが多い(S/N比が低い)と思われてしまう。逆に各人の趣味にあった情報が提供されれば、その情報サイトのS/N比は低くなる。そこで、ユーザーの趣味を最初に登録してもらい、その趣味情報を元に膨大な情報を選別して、ユーザーに配信すれば、ユーザーにとって情報の質が上がったことになるだろう。情報のナビゲーションを、ユーザー任せにするのではなく、こちらから積極的に誘導するのだ。
　簡単にいえば、ぴあのように膨大な情報量を持ち、ユーザーの登録情報でナビゲートして、東京ウォーカーのように選別された情報を提供する。通常、情報サイトというのは、まんべんなく情報を集めるので、個性が出にくいが、サイトの個性はユーザーによって決まるのだ。
　ここまで複雑な仕組みを使って何をするか？　それは、趣味嗜好などきめ細かい情報が詰まった個人情報を集めることだ。ここまで細かい個人情報があれば、商品が狙うユーザーをピンポイントで狙った宣伝やアンケート、作品を発売する前の調査、どんなクリエイターが今人気があるかの調査など様々な利用方法が考えられる。

●内容構成案
・ユーザーに、最初にキーワードとなる単語をいれてもらう。具体的には、好きな漫画やアニメ、ゲームの名前などを入力。そして、データベースによって、アニメやゲームのメインスタッフの情報も同時にそのユーザーのキーワードとして登録される。
・インターネットなのだから、速報性は重要だ。細かいニュースレベルの情報は随時更新。ニュースには、キーワードが登録されており、更新されると、会員の個人情報を検索して、ニュースと同じキーワードを登録している会員に、ニュース更新のことをメールで告知する。

●ユーザーの利用例
[高校生A君の場合]
　テレビ東京で放映されているアニメ『無限のリヴァイアス』は、登場人物たちの青春群像が面白く、最近欠かさず見ている。このアニメの詳細な情報が知りたくなったので、さっそくいつものサイトにアクセスしてみた。まず、自分のプロフィールに好きな作品として「リヴァイアス」を登録してみる。すると、『無限のリヴァイアス』は既にデータベースに登録されていたので、メインスタッフの情報が表示された。スタッフの名前をクリックすると、データベースとリンクして、過去の参加作品などの詳しい情報がわかる。キャラデザの「平井久司」が過去に何をやっていたか知りたかったのだが、このデータベースで過去に小説の挿し絵やアニメ『ガルキーバ』のキャラデザをしていたことがわかった。
　数日すると、『無限のリヴァイアス』のメイン脚本家である黒田洋介が次回作品を準備しているとの情報がメールで配信された。そのメールでは、僕が好きな漫画家・内藤泰弘がゲームのキャラデザするという情報も一緒に配信されてきた。さっそくサイトにアクセスしてみると、黒田洋介の次回作品へのコメントなど詳細な記事が確認できた。今度は、ファンタジーモノで、またリヴァイアスのような青春モノになるらしい。楽しみだ。内藤泰弘がキャラデザするのはPS2用の大作RPGだった。まだPS2は買わなくてもいいかなと思っていたが、絵を見ていたら、買いたくなった。
　そして、自分と好きな作品の趣味がよく似ている人がいるとの情報がメールできた。さっそく、その人の公開プロフィールを見てみたが、かなり趣味が合いそうだ。とりあえず一回メールを出してみよう。

●開始時期
早ければ早いほどよし。

●売り上げ見込み
バナー広告と、企業への情報提供が主な収入源となるだろう。

myblogが停止中。その理由は…:Loopus Laboratory
　6/1になってから、ブログポータルサイトのMyblog japanが停止しているそうです。理由はドメイン更新ミス。
　これを見て、海外のドメイン登録サービスを使うと、更新通知のメールが英語でくるから見逃しやすいというのを実感しました。怖い～。

　自分は、英語だけのメールはSPAMとして処理するようにしているんですが、海外のサービスに登録した時や、海外で通販した時などはその時だけ、その処理をなくしてます。で、その後、そのサービスが使うメールアドレスがわかるので別扱いすると。ただ、メールサービスの都合上、あまりいろいろ登録はできないので、よほど重要なものしかいれませんが。

　知っている人には当たり前なんですが、WeblogでHTMLタグを知らない人も増えてきているでしょうからメモ的に。

　画像を左や右に置いて、その余っている側に文字を回り込ませたい場合、imgタグに「valign=”top” align=”right”」（これは画像を右側に）という属性をつければokです。
　また、そのままだと隙間なしで文字が配置されますが、「vspace=”n” hspace=”n”」でマージンを指定できます。

　そして、意外と知られてなさそうなのがこれ。記事の下の方に回り込みを許可した画像を配置すると、画像がブロックからはみ出してしまうことがあります。また、回り込みを許可した画像を連続して配置すると、位置がどんどんずれていくことがあります。
　そんな時は「<br clear=all>」というタグを入れれば、そこで回り込みが解除されます。

補足：
スタイルシートを使って下記の表現にする方がスマートです。ただ、下記の方法を使った場合、回り込むテキストが画像の下端までない時に、回り込みが解除されない現象がたまにありました。これは、imgタグに直接指定せず、スタイルシートで定義した場合に発生するようです。その時は、「&ltbr clear=all>」を使うと対処できたため、「&ltbr clear=all>」ばかり使うようになってました。

画像回り込み　<img src=”xxxx” alt=”xxx” style=”float:right; (margin:5px;border:0px;)”>
※この場合は右側、左側にするのならleftで
画像回り込み解除　<br style=”clear:both”>

なおXHTMLドキュメントの場合、imgやbrのような空要素のタグは「&ltbr />」と表記します。

　WeblogやWikiなどテキストをWebブラウザ上から編集する機会が増えてきましたが、長文だと作業効率を良くするため、テキストをエディタにコピーして編集している人も多いでしょう。自分はかなりエディタからコピー＆ペーストすることが多いです。

AreaEditor - 特徴
AreaEditorリリース - IburiTimes
　そんなエディタ派の人間に便利なソフトがこの「AreaEditor」（Windows用）。
　IEやIEコンポーネントを使ったブラウザが対象で、inputやtextAreaなどのテキスト編集領域上で右クリックメニューから、エディタを起動します。編集テキストをセーブしたり、エディタを終了すると、テキスト編集領域にテキストを出力。編集領域ですでに入力済みのテキストもエディタにコピーされるので、書いている途中で、長文になりそうだからエディタを使いたいと思った時も問題なし。
　既存のテキストファイルをテキスト編集領域にコピーすることもできます。Movable Typeのテンプレートをいじる時に、いつもエディタからコピー&ペーストしていたので、かなり便利に使えそう。
　需要がありそうなのに、今までなかったソフトだと思いました。

●関連
textarea - textareaとテキストエディタ連携
　この辺りの情報をまとめたWiki。

ishinao.net/mylog - extedit - Webブラウザの入力フォームで好きなエディタを使う
　こちらはJavaスクリプトを使うものなんですが、タブブラウザだとロックされてしまうそうです。

ゑBLOG: テキストエリアを外部編集

Going My Way: Firefox利用時にTextareaを任意のエディターで開く方法