世界ゴルゴ化計画:PCで表示、携帯で非表示にする(下)

	[ 日記 - 一般 \| 東京都 ]		カンタン！ブログをはじめよう

2008年07月15日

PCで表示、携帯で非表示にする(下)

ポ～ニョ、ポ～ニョ、ポニョ、女の子♪

さて、livedoorで場所を借りてブログを書いている以上、下記のような縛りがある。

サーバの設定もろもろ
文章の改行(¥n)を¥n<br />に自動変換している(JSのスクリプト中に勝手に突っ込まれるから痛い)

そんなわけで、使える道具が、

(X)HTML
CSS
JavaScript

この3つしかない。

livedoor ナレッジに投稿してみたり(回答してくれた方々ありがとうございました!!)、ググってみたり、手書きでいろいろ書いてみたりと、本当に3日間仕事そっちのけで考えに考えた(仕事はちゃんとやってます)。

ほとんどの携帯はJavaScript未対応(多分)なので、JavaScriptでPHPっぽいヒアドキュメント(複数行の文字列を出力)でAAを吐き出させればいいのでは!?とか、JavaScriptで外部ファイルを読み込んでみたら!?とか、ユーザーエージェントで振り分けてみたら!?とか考えてみたものの、毎回<br />(HTMLの改行)を入れなければなららず面倒だったり、そもそも自分がそれほどJavaScriptを理解していなかったりで、暗礁に乗り上げていた。

途方に暮れ始めた3日目、ところてんを食べているとき、ポ～ニョ、ポ～ニョ、ポニョと啓示が舞い降りた。

見せたくないものはコメントアウトしちゃえばいい。
携帯は全ての(X)HTMLタグには対応しておらず、未対応のタグは無視される。

この2点に着目した。

(X)HTMLでは、ブラウザ上で見えなくても、ソースの中に『ここまでが本文』というようにコメントを書くことができる。

そして、携帯未対応の(X)HTMLタグをコメントの中に咬ませる。

<span><</span>!--
　<div class="aa">
　　　ここにAAが入る。
　</div>
--<span>></span>

こうすると、PCではゴミが入っているからコメントとして扱われないけれど、携帯では<span>タグは無視されるのでコメント扱いされ、非表示になる。

ただ、このように書くだけでは、PC上で見栄えが悪くなるので、CSSでを見えないようにする。

CSS
.hidden{
　　　display:none;
　　　visibility:hidden;
}

(X)HTML
<span class="hidden"><span><</span>!--</span>
　<div class="aa">
　　　ここにAAが入る。
　</div>
<span class="hidden">--<span>></span></span>

そんなわけで、テストとして携帯ユーザーに何も憚ることなく、AAを連続投下してみる。

　・ iPhone行列のモヒカン男

　　　　　　　　　　　　　　__,　　　　　ﾉ}　　　　　　_,
　　　　　　　　　　　　　　ヾミ､　　　,ｲl|　　　　 ,ｨﾂ
　　　　　　　　　　　　　　　ヾミ､　ﾉﾘlj';　　 ,ｨ彡ｲ
　　　　　　　　　　　　　　　　〉ﾐﾐ?杉ﾊ='杉彡"
　　　　　　　　　　　　　　　 '^".:.:.:.:.:.:.::.:｀丶{
　　　　　　　　　　　　　／:.:.:.:.:.:.:.:.:.:.:.:.:.:.::.:.:.ヾﾐ三ﾆ≡=-ｯ-
　　　　　　　　　　 /　　　　　　 :.:.:.:.:.:.:.:.:.:.'.彡''"´￣
　　　　　　　　　　r==〈r==≦ミ　　　　:.:.:.:.ヽ.:.:.}
　　　　　　　　　　{:.::::儿_:::::.:::.:}}≠======--､:}
　　　　　　　弋彡'iゞr-=彡　　　　　 f⌒ハ
　　　　　　　　　　　ﾚ;;公^;ヽ　　　　. : :.: :. r'　リ
　　　　　　　　　　　爪rｪｪ弍　　　. : :.: :.:::.r-イ
　　　　　　　　　　　川ｰﾆ´jj{　　. : :.: :.::　 : ｲ
　　　　　　　　巛爪z从}　　　　　∠ﾆ=ﾍ
　　　　　　　　　　　ゞ巛巛lﾘ _　　_,∠二二、＼
　　　　　　　　　　　　　￣｛／￣　　　　　　＼＼
　　　　　　　　　　　　　　／　　　　　　　　　　ﾍ. ヘ
　　　　　　　　　　　　　/　　　　　　　　　　　　　∨ ,ﾊ
　　　　　　　　　　　　 {　__ ｢::ﾚﾌ r::v‐ｧ　　　　く::∨　'、
　　　　　　　　　　　　 /(::c' |:::;〈　〉:::/　　　　　 `ﾍ　|
　　　　　　　　　　　{ﾍ｀¨└^¨　｀¨´　　　　Ｙ'　　 |　|
　　　　　　　　　　　 /.ハ　　　　　　　　　　　　|　　　|　|
　　　　　　　　　　　　　　　　　　　　　　　　|　　　|　|
　　　　　　　　『世界的ですもんね
　　　　　　　　　　乗るしかない　このビックウェーブに！』

　・麻呂(水戸黄門)

　　　　　　　　　　　　 l三｀ｰ､_;:;:;:;:;:;:j;:;:;:;:;:;:_;:;:;_;:〟-三三三三三l
　　　　　　　　　　　　　 l三　 r＝ﾐ''‐--‐';二,_￣　　 ,三三三彡彡l_　　　この感じ・・・・
　　　　　　　　　　　　　　lﾐ′　￣　　　　ー-'"　　　 '＝ミﾆ彡彡/‐､ヽ
　　　　　　　　　　　 l;l　 ,_-‐ 、　　　 __,,.. - ､　　　彡彡彳､.//　　zipか・・・・
＿＿＿＿＿＿＿∧,､＿∥　`之ヽ､, i　l´ _,ｨ辷ｧ-､、　　　彡彡'r ノ/＿＿_＿＿＿_
￣￣￣￣￣￣￣'`'`￣　1 　　￣ﾌ/ｌ　l::. ヽこ~￣　　　　彡彳~´/ ￣￣￣￣￣￣
　　　　　　　　　　　　　ヽ　　　´　:l　.l:::.　　　　　　　　　彡ｨ-‐'′
　　　　　　　　　　　　　　　ゝ、　　/ :.　 :r-､　　　　　　　　彡′
　　　　　　　　　　　　　／ｨ:ﾍ　　｀ヽ:__,ｨ='´　　　　　　　　彡;ヽ､
　　　　　　　　　 _,,..-‐'7　/:::::::ヽ　　　_: :_　　　ヽ　　　　ｨ´.}::ヽヽ、
　　　　　　_,-‐'´　　　 {　ヽ:::::::::ﾍ｀'ｰ=＝=ｰ--　'　　　／ﾉ /::::::ﾍ, ヽｰ､

　・あきらめたらそこで試合終了だよ(スラムダンク)

　　　　　 ,. ‐''三ヾ´彡ｼ,=｀丶、
　　　　　／'".:=≡ミ_≧_尨彡三:ヽ、
　　　　/／.:;:彡:f'"´‐------ ｀`'ｒ=:l
　　　/〃彡_彡′,.=､￣￣ ,.=､　|ミ:〉
　　　'ｙ=､､:ｆ´===tr＝=､.___,. ==､._ゞ{
　　　{´yﾍl'′　　 |　　 /⌒l′　 |｀Ｙ}
　　　ﾞ､ゝ) 　　　 `''''ﾂ_　 _;`ｰ‐'ﾞ:::::ｌ{　　あきらめたら
.　　　ヽ.__　　　　　,ｨnmmm､　　 .:::|!　　　そこで試合終了ですよ・・・・
　　,.ィ'´ﾄ.´　　　　　´｀"｀"｀ﾞ″　.::::;'
イ´::ﾉ|::::l ＼　　　　　　"'　　　:::/
::::::::::::|:::::l 　ヽ、　　　　　..::　 .:::/.､
:::::: ::: |:::::ヽ　　ヽ、.......::::／..:::／!＼＼
::::::::::: |::::::::ヽ　　　｀`''‐--ｧt''′ |!:::ヽ:::＼
:::::::::::::|::::::::::::ヽ、　　　 /i|iﾄ､　 |l:::::::ヽ:::::＼
:::::::::::::|::::::::::::::/:ヽ、　　∧|i|i|i|〉. ||::::::::::ヽ:::::::＼

　・四次元殺法コンビ(キン肉マン)

　　　　　　r　‐､
　　　　　　| ○ | 　　　　　　　　r‐‐､
　　　　　_,;ﾄ - ｲ、　　　　　　∧l☆│∧ 　良い子の諸君！
　　　（⌒`　　　 ⌒ヽ　　　/,､,,ﾄ.-ｲ/,､ l 　早起きは三文の得というが、
　　　　|ヽ　 ~~⌒γ⌒）　r'⌒　｀!´ `⌒）　今のお金にすると60円くらいだ。
　　　│　ヽー―'^ー-'　（ ⌒γ⌒~~　/| 　寝てたほうがマシだな。
　　　│　　〉　　　 |│　　|｀ー^ｰ― r'　|
　　　│　/───|　|　　|/　| 　l　　ﾄ､ |
　　　|　 irｰ-､ｰ　,}　|　　　 / 　　　　i
　　　| /　　　｀X´　ヽ　　 / 　入　　|

　・恐ろしい子！(ガラスの仮面)

ヽ、__ ／　　　　　　　　　｀ヽ／　　｀ヽ　　＼
｀ｰ,.　　　/　　/　　　　　　ヾ〃ヽ　　　ヽ　　〉　　＼＼　|
／　　　〈　　 {　　 {　{　　i'ヽ/｀i/ /　 / }　 {　 _、／／　|
　　　　　ヽ　　｀ｰj　}　}　{　　　{ /　ﾉ /　　｀ｰ' i
　　ノ　　ノ｀ｰ-‐'ﾉﾉ　ﾉノ　　　!_l　i {　{　　 _,.／　　　エ凡
　｀ｰ-‐'　＼__,／ノノ‐-'　,,.-‐''｀‐-｀!｀ｰ｀-- 'ヽ　　　ﾊ＿ヽヽ
　　　　i/　/ / （(_j }　　/ ,.-‐‐‐‐,'/i　i　|　}　ヽヽ
　　　 {　 {　ゝ､_,.ノ　　l|　｀‐--‐'､i/ ﾉﾉ　ﾉ　ノ　ﾉ　　 |
　　　　｀ヽ｀ニ-‐ノ　　 l|　　　　il|||jノノ　ノ- '　／　　　｀ｰ '
　　　ﾉ　　｀---'"　　　ili;　　　　||ヽ__,.／｀ｰ-'{　　　　 l
､__／ノ　ノ　ﾉ }　 ,. 　 '"　ヽ　/||ヽ__,.／i　/　ヽ_,.i　　ﾚ　ヽ
ヽ__／_／　.ノ-' 　 { {￣￣} } / /ヽ__,.／ヽ{　i　　ノ　　フ
｀､_／_／ノ-'ヽ.　　 '､___,ﾉ　　/| ヽ　ヽ　　}　ヽ"　　　 ‐┼‐
　　｀ｰ-‐'‐-‐' ヽ　　 --　／　l　 }　 }　　}　　|　　　　　'
　　　｀‐-----‐' ｀ヽ ___ ／　　　l /　/　　/　 /　　　　 |　|
　　　　ヽ _____ノ |　　　　　　　　 l'　/　　/　　{　　　　　・・

とりあえず、3キャリア(Docomo、AU、SoftBank)で非表示テスト成功。

そして、このブログでのAAの書き方は以下の通り。良かったらソースをコピペして使ってください(全角スペース注意!!)。

CSS
.aa{
　　　font-family:"ＭＳＰゴシック","Mona","mona-gothic-jisx0208.1990-0",sans-serif!important;
　　　font-size:12px!important;
　　　line-height:14px!important;
　　　background:#f6f6f6;
　　　border:dotted 1px #333;
}

(X)HTML
<span class="hidden"><span><</span>!--</span>
<div class="aa">　　
ここにAAが入る。
</div>
<span class="hidden">--<span>></span></span>