<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title>ma-san.org - 仙台でWeb制作をするWebデザイナー</title>
    <link rel="alternate" type="text/html" href="http://ma-san.org/" />
    <link rel="self" type="application/atom+xml" href="http://ma-san.org/atom.xml" />
    <id>tag:ma-san.org,2009-02-05://1</id>
    <updated>2010-03-15T16:53:16Z</updated>
    <subtitle>仙台でWeb制作。自称Webデザイナーが仙台のホームページ作成について書き綴ります。</subtitle>
    <generator uri="http://www.sixapart.com/movabletype/" version="4.23-ja">Movable Type Pro</generator>

<entry>
    <title>東京都青少年健全育成条例改正問題について</title>
    <link rel="alternate" type="text/html" href="http://ma-san.org/2010/03/post-30.html" />
    <id>tag:ma-san.org,2010://1.84</id>

    <published>2010-03-15T15:41:27Z</published>
    <updated>2010-03-15T16:53:16Z</updated>

    <summary>このブログを読んでくれている方に少しでも伝わればいいと思います。 	現在、テレビ...</summary>
    <author>
        <name>ma-san</name>
        
    </author>
    
    
    <content type="html" xml:lang="ja" xml:base="http://ma-san.org/">
        <![CDATA[<p>このブログを読んでくれている方に少しでも伝わればいいと思います。<br />
	現在、テレビなどであまり騒がれていない「東京都青少年健全育成条例改正問題」ですが、もしあなたがクリエイター、「ものづくりを提供する人間」もしくは「サービスを提供する人間」であればきっと反対をするはずです。</p>
<p>信じられないのですが、この条例「不健全な作品」の販売を規制する条例です。</p>
<p><b>非実在青少年とは、「年齢設定が18歳未満のキャラクター」か、「外見が18歳未満に見えるキャラクター」です。</b><br />
	なにやらこの条例を「ロリコンや性犯罪を減らすための条例」と思ってる方がいますが、全然そんなことはありません。むしろ、「ものづくり」に関わっている人がこの条例に興味がないだなんて信じられません。表現の自由が奪われることになります。</p>
<p><b>・性的描写はNG（規定がないことが問題）<br />
	・暴力シーンNG<br />
	・酷い目に合うこと自体がアウト（いじめ、暴力、不幸な目にあう、等）<br />
	・不健全と見なされるものはNG（なにを持って不健全かは決まってません）</b></p>
<p>この条例が通った場合、僕たちの周りには沢山の影響がでますね。</p>
<p>漫画・アニメ。<br />
	少年漫画を代表とするジャンプ漫画（ドラゴンボール、スラムダンク、ハンターハンター等）全部NGです。バトルは基本、暴力ですからね。また、少女漫画なんかもNGの場合が多いですね。性的描写は沢山あるので（NANA、のだめカンタービレ、君に届け等）もうアウトでしょう。また、陰湿なイジメのシーンなんかも多かったりするのでアウトです。テニスの王子様やキャプテン翼なんかもアウトです。必殺技で人が吹っ飛んだりして血まみれになったりしますからね。</p>
<p>さて、なんでわざわざ久しぶりにこんな記事を書いたかと言えば、一言で言ってしまえば<b>「クリエイターを自称しているのに行動を起こさない人が多い」</b>ということです。<br />
	漫画家や作家は行動を起こしている人が多いのですが、Web業界で動いてる方はほとんど見ません。当たり前ですがWeb業界にも影響が出るでしょう。説明するまでもないですよね。</p>
<p>この条例で最も恐ろしいところは<b>「なにを持って不健全なのか明確な基準がない」</b>ところです。</p>
<p>この条例で最も大切なところ、本来は<b>「保護されるのは架空の存在じゃない。実在する人なんだ」</b>というところをもっと詰めるべきです。架空の存在を作ることにより、作品に意味を込める場合なんか沢山あるじゃないですか。<br />
	こんなことでは当たり前ですが犯罪なんか減りません。アメリカなどが良い例じゃないですか。ドラゴンボールやワンピースに規制をかけても意味なんかないんですよ。</p>
<p>もう遅いなんてことはありません。<br />
	あなたに「好きな作品」があるのであれば、それは保護されますか？<br />
	あなたは綺麗事だけ並べて教育を行っていきますか？<br />
	犯罪を起こしたり、違法行為を行うのはこうした作品に影響されたからだと言いますか？</p>
<p>それだったら、インターネットそのものが不健全です。当たり前ですが、検索エンジンそのものも不健全ですね。犯罪などの情報を取り扱いますので。<br />
	Web業界で働いている方々、もし自分をクリエイターや、クライアントに対してサービスを提供することに誇りがあるのであれば、この条例は無関係ではない、と考えてください。どんな影響がでるか、わかったものではありません。</p>
<p>もしこの記事を読んでいるあなたがものづくりを行う方。クリエイターである方。サービス業を行ってる方。<br />
	実際に行動を起こさなければ意味はありません。<br />
	どんな業界でも表現の自由がなくなる可能性のあるものに対して「自分には関係ない」なんて言ってる方にはものづくりを行う資格も、サービス業を行う資格もありません。</p>
<p><b>一人でも、この記事を見て行動に移してくれる人がいれば幸いです。</b><br />
</p>
<br />
<h3>以下、まとめサイト、ニュースなど</h3>
<p>グーグルやマイクロソフトが参加する団体も、都の青少年条例改正案に対し反対表明へ<br />
	<a href="http://www.rbbtoday.com/news/20100315/66363.html" target="_blank">http://www.rbbtoday.com/news/20100315/66363.html</a></p>
<p>東京都青少年健全育成条例改正問題のまとめサイト <br />
	<a href="http://mitb.bufsiz.jp/" target="_blank">http://mitb.bufsiz.jp/</a></p>
<p>東京都議会の条例改正によって影響があるアニメ・漫画・ゲームの例 <br />
	<a href="http://tokyo.cool.ne.jp/jfeug/siryou/togikai_eikyou.html" target="_blank">http://tokyo.cool.ne.jp/jfeug/siryou/togikai_eikyou.html</a></p>
<p>残り100時間で出来ること（緊急） <br />
	<a href="http://nogami.firstspear.com/" target="_blank">http://nogami.firstspear.com/</a></p>
<p>「非実在青少年規制」に反対したい人は実際にはどうすればいいのか <br />
	<a href="http://blog.livedoor.jp/goldennews/archives/51451551.html" target="_blank">http://blog.livedoor.jp/goldennews/archives/51451551.html</a></p>
<p>民主党メールフォーム <br />
	<a href="https://form.dpj.or.jp/contact/" target="_blank">https://form.dpj.or.jp/contact/</a></p>]]>
        
    </content>
</entry>

<entry>
    <title>[iPhone]ドラえもん - この発想はなかった[アプリ]</title>
    <link rel="alternate" type="text/html" href="http://ma-san.org/2010/02/iphone--.html" />
    <id>tag:ma-san.org,2010://1.83</id>

    <published>2010-02-03T14:18:07Z</published>
    <updated>2010-02-03T14:19:22Z</updated>

    <summary>  iPhoneのアプリがドラえもんで埋まっていました。 なんだろうなーと思って...</summary>
    <author>
        <name>ma-san</name>
        
    </author>
    
        <category term="iPhone" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://ma-san.org/">
        <![CDATA[ <p><img src="/img/IMG_0204.PNG" alt="iPhoneアプリ" /></p>
<p>iPhoneのアプリがドラえもんで埋まっていました。<br />
なんだろうなーと思ってダウンロードしてみたら、なるほど、画像のように並べるとドラえもんが表示されるんですね（笑）</p>
<p>なかなかユニークというか...。これは思わず全てダウンロードしたくなる仕掛けですよね！！</p>
<p>こうしたユニークなアイディアを盛り込みつつ、宣伝効果を狙っていくのはとても面白いと思います。<br />
Flash CS5 ではiPhoneのアプリも作成が可能になるようですし、今年の夏に次世代iPhoneがでるんじゃないかとの噂もでています。</p>
<p>これからのiPhoneにも大注目ですね！！</p>]]>
        
    </content>
</entry>

<entry>
    <title>[だんご]久しぶりに食べ物で感動した【仙台】</title>
    <link rel="alternate" type="text/html" href="http://ma-san.org/2010/01/post-29.html" />
    <id>tag:ma-san.org,2010://1.82</id>

    <published>2010-01-20T12:36:05Z</published>
    <updated>2010-01-20T12:42:57Z</updated>

    <summary><![CDATA[   私はおろかでした。&nbsp;   「団子？うーん、あまり好きじゃない.....]]></summary>
    <author>
        <name>ma-san</name>
        
    </author>
    
        <category term="日常" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://ma-san.org/">
        <![CDATA[ <p><img src="/img/IMG_0191.PNG" width="320" height="480" /></p>
<p> 私はおろかでした。&nbsp;<br />
  「団子？うーん、あまり好きじゃない...」&nbsp;<br />
  私は無知でした。&nbsp;<br />
  「団子？コンビニとかで売ってるよね」&nbsp;<br />
  <br />
  そんな私が本日、出会った天使（のようなだんご）。&nbsp;<br />
  巳年屋は2009年12月19日に仙台で開店した、だんご屋さん。&nbsp;<br />
  <br />友人とたまたま発見し、行ってみようかということで、行ってみました。&nbsp;<br />
  正直、甘く見てました...。&nbsp;<br />
  <br />
  だんごってこんなに口当たりが軽いものだったの？&nbsp;<br />
  みたらしってこんなにコクのあるものだったの？&nbsp;<br />
  ごまってこんなに口当たり優しい味だったの？&nbsp;<br />
  蔵王チーズあんって、なにそれ...？初めての味わい...。というか超おいしい...。&nbsp;<br />
  <br />
  まぁ、言いたいことは山ほどあるのですが、だんごでここまで感動したのは想像もしなかった。&nbsp;<br />
  注文してから焼きはじめる...。&nbsp;<br />
  店員さんの人当たりの良さ...。&nbsp;<br />
  注文をした後、店内のスペースで待つのですが、そこで注文しただんごをいただくことも可能です。&nbsp;<br />
  その日によってメニューが変わるようなのですが、なんてこった。これではma-sanは毎日通いたくなるではないか...。&nbsp;<br />
  <br />
  なにが言いたいかと言うと、とても素晴らしいだんごでしたので、仙台に住むみなさんはもちろん、全国からも客が集まれば良いなと思いました。&nbsp;</p><p>美味しいものは共有したいので、ブログで紹介させていただきました。<br />もし、仙台にお住まいの方、仙台駅から徒歩10分程度の場所にありますので、足を運んでみてはいかがでしょうか？<br />
  <br />
  ■メニュー（1本）&nbsp;<br />
  やきみたらし...100円&nbsp;<br />
  つぶあん...110円&nbsp;<br />
  しろあん...120円&nbsp;<br />
  ごま...120円&nbsp;<br />
  ずんだ...130円&nbsp;<br />
  いそべ...120円&nbsp;<br />
  <br />
  ▼ホームページ&nbsp;<br />
  <a href="http://www.itohiroki.com/midoshiya/" target="_blank">http://www.itohiroki.com/midoshiya/</a>&nbsp;<br />
  <br />
  ▼仙台経済新聞&nbsp;<br />
  <a href="http://sendai.keizai.biz/headline/606/" target="_blank">http://sendai.keizai.biz/headline/606/</a>&nbsp; </p>
<p>
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps?q=%E5%AE%AE%E5%9F%8E%E7%9C%8C%E4%BB%99%E5%8F%B0%E5%B8%82%E9%9D%92%E8%91%89%E5%8C%BA%E4%B8%AD%E5%A4%AE%EF%BC%92%EF%BC%8D%EF%BC%96%EF%BC%8D%EF%BC%93%EF%BC%94&amp;ie=UTF8&amp;hq=&amp;hnear=%E5%AE%AE%E5%9F%8E%E7%9C%8C%E4%BB%99%E5%8F%B0%E5%B8%82%E9%9D%92%E8%91%89%E5%8C%BA%E4%B8%AD%E5%A4%AE%EF%BC%92%E4%B8%81%E7%9B%AE%EF%BC%96%E2%88%92%EF%BC%93%EF%BC%94&amp;gl=jp&amp;ei=3fhWS_reKJCgkQXanK3nBA&amp;ved=0CAgQ8gEwAA&amp;ll=38.262113,140.87825&amp;spn=0.004734,0.009645&amp;z=17&amp;brcurrent=3,0x5f8a28233b2a6149:0xcfd0c5f875e48176,0&amp;output=embed"></iframe>
</p>]]>
        
    </content>
</entry>

<entry>
    <title>明けましておめでとうございます</title>
    <link rel="alternate" type="text/html" href="http://ma-san.org/2010/01/post-28.html" />
    <id>tag:ma-san.org,2010://1.81</id>

    <published>2010-01-14T06:32:28Z</published>
    <updated>2010-01-14T06:57:41Z</updated>

    <summary>しばらく更新ができずに申し訳ありませんでした。   今年もよろしくお願いいたしま...</summary>
    <author>
        <name>ma-san</name>
        
    </author>
    
        <category term="日常" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://ma-san.org/">
        <![CDATA[<p>しばらく更新ができずに申し訳ありませんでした。<br />
  今年もよろしくお願いいたします。</p>
<p>さて、年末年始、いろいろと環境が変わりましたのですが、ちょっと考えさせられることがありましたのでご報告させていただきます。</p>
<p>昨夜、ボクは交通事故で轢かれてしまいました。<br />
  幸い、怪我は利き腕を少しだけ負傷したのですが奇跡的にその他に負傷もなく、服が多少汚れた程度で済みました。<br />
  頭を打ってしまい、脳震盪をおこして近くの病院まで救急車で運ばれたのですが、意識はすぐに回復し、普通に歩くこともしゃべることもできました。<br />
  つくづく「生きてて良かった...」と思えたのです。<br />
  事故に遭った直後、すぐに人が集まってきていろいろな人に助けてもらえました。<br />
  年齢性別関係なし、間違いなく自分を助けてくれようとしてました。</p>
<p>今までの自分は凄い小さいことで悩んでいたのだなぁ、と思いました。<br />
  今は絶好の機会だと思うので、自分にできること、沢山したいと思います。</p>
<p>&nbsp;</p>
<p>加害者とのやり取りですが、示談で進めて「治療費のみ」をいただくことになりました。 <br />
  本当は浅ましい考えとかいろいろと考えたのですが、人を轢いたことで相手の人生は十分に狂う可能性があるなかで（警察の人が免許剥奪の可能性もあるねって言ってたし。タクシーの運転手にとってそれって致命的じゃ...）、その上でこれ以上なにかをしようという考えはボクにはありませんでした。 <br />
  人間って浅ましいからさ、「相手の人生を左右する権限」を持つと調子にのると言うか、大きくでちゃうところってあると思います。 <br />
  が、そこで「俺がこういったらあいつはこうなる」ということがわかった上で実行しちゃう人って、「権限」や「盾」に頼らないと自分ではなにもできないって勝手に思ってますし、そうしたことは必ず自分に帰ってくると勝手に信じています。 </p>
<p>ボクは結構迷信ごととか信じるので、拾った財布は必ず届ける。これまで財布を何度か落としてるけど全部届けてもらったし。 </p>
<p>轢かれたのは運が悪かったとして、轢かれた瞬間からは幸運続きなので、日ごろの行いが帰ってきたのだなぁと思いました。</p>
<p>でも事故に遭わないようにみなさんも気をつけてくださいね！！</p>
]]>
        
    </content>
</entry>

<entry>
    <title>好き嫌いは時間の無駄使い</title>
    <link rel="alternate" type="text/html" href="http://ma-san.org/2009/11/post-27.html" />
    <id>tag:ma-san.org,2009://1.80</id>

    <published>2009-11-08T12:54:22Z</published>
    <updated>2009-11-08T12:57:56Z</updated>

    <summary> 好き嫌い、というのは物凄い時間の無駄使いだと思います。 特に食べ物。食べ物の好...</summary>
    <author>
        <name>ma-san</name>
        
    </author>
    
        <category term="日常" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://ma-san.org/">
        <![CDATA[ <p>好き嫌い、というのは物凄い時間の無駄使いだと思います。<br />
特に食べ物。食べ物の好き嫌いが多いのというのは非常に我侭で、嫌いなものを避けるというのは無駄な時間が発生します。かつ丼に入ってる玉葱を抜く作業、お好み焼きに入っているキャベツを取り除く作業、ラーメンに絡みつくネギを避ける作業などなど...。</p>
<p>僕は一般の方々よりも好き嫌いが多いので（野菜、魚、肉、果物、上げていくときりがないというか何が食えるのか疑問に思えてくるくらい）、いつも嫌いなものを避けるのに時間が掛かります。これをスーパーやコンビニ、外食などで毎日続けているだけで一生分にしたら「嫌いなものを避けるために掛ける時間と労力」を考えるとすごく馬鹿らしくなってしまいました。</p>
<p>そのため、今では好き嫌いをなくすために気にしないように目の前にあるものは口に運ぶようにしているのですが、これが効いているのか仕事や人の好き嫌いも少なくなってきました。</p>
<p>嫌いというのは時間の無駄使いでもあると同時に贅沢、我侭ということもあるのだなと思う。<br />
しかし未だに口に運ぶだけで涙目になるので、これからも頑張るだす。</p>
]]>
        
    </content>
</entry>

<entry>
    <title>[PHP]携帯サイトの絵文字分岐方法</title>
    <link rel="alternate" type="text/html" href="http://ma-san.org/2009/11/php.html" />
    <id>tag:ma-san.org,2009://1.79</id>

    <published>2009-11-07T12:59:51Z</published>
    <updated>2009-11-07T13:02:08Z</updated>

    <summary> 僕は携帯サイトを構築する際、PHPで構築するのですが、PHPだと分岐など融通が...</summary>
    <author>
        <name>ma-san</name>
        
    </author>
    
        <category term="XHTML CSS" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="コーディングノウハウ" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="php" label="PHP" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="コーディング" label="コーディング" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="モバイル" label="モバイル" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://ma-san.org/">
        <![CDATA[ <p>僕は携帯サイトを構築する際、PHPで構築するのですが、PHPだと分岐など融通が効くので絵文字の分岐は以下のような対応をしています。<br />
まず、以下のソースを貼り付けます。<br />
アクセス環境を取得し、キャリア毎に振り分けるためです。このソースはできるだけ分かりやすい場所に張り付けるのが良いと思います。<br />
&lt;body&gt;直下でもどこでもご自由に～。</p>
<pre>&lt;?php
$agent = $_SERVER['HTTP_USER_AGENT'];
?&gt;
</pre>
<p>
上記のソースを挿入した後は絵文字を振り分けるために以下のソースを記述します。</p>
<pre>&lt;?php
if(ereg("DoCoMo",$agent)){
echo '絵文字';
}
else if(ereg("^UP.Browser|^KDDI", $agent)){
echo '絵文字';
}
else if(ereg("^SoftBank|^Vodafone|^J-PHONE", $agent)){
echo '絵文字';
}else{
echo '&lt;img src="絵文字と同じ画像.jpg"&gt;';
}
</pre>
<p><strong>絵文字</strong>と書いてある箇所には各キャリア毎に適正なコードを記述してください。<br />
  これでキャリア毎に切り替えることが可能です。最後のelseにはPCサイトなどでもちゃんと見れるように、絵文字と同じ画像を用意しておくのですが、PCサイトなどで閲覧可能にしない場合は不要です。もっと良い方法があると思いますが、どうしてもすぐに対応したい場合、複雑なソースを使いたくない場合は上記のような方法で十分だと思います。</p>
]]>
        
    </content>
</entry>

<entry>
    <title>Safari4とFireFox3.5に使うCSSハック</title>
    <link rel="alternate" type="text/html" href="http://ma-san.org/2009/11/safari4firefox35css.html" />
    <id>tag:ma-san.org,2009://1.78</id>

    <published>2009-11-05T08:51:58Z</published>
    <updated>2009-11-05T08:54:12Z</updated>

    <summary> これまでのコーディング人生、IE以外にほとんどclearFix以外のCSSハッ...</summary>
    <author>
        <name>ma-san</name>
        
    </author>
    
        <category term="XHTML CSS" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="css" label="CSS" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="html" label="HTML" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://ma-san.org/">
        <![CDATA[ <p>これまでのコーディング人生、IE以外にほとんどclearFix以外のCSSハックは使ってこなかった私ですが、どうしてもSafari4のみ表示の崩れが発生する箇所があり、泣く泣くSafari4用のCSSハックを使ってみることにしました。（納期が迫ってたので...、うぅぅ；；）<br />
  Safari4用のCSSハックはこちら。</p>
<p><strong>body:first-of-type</strong></p>
<pre>
  body:first-of-type #main {<br />
  background-color: #333;<br />
  margin: 0;<br />
  }<br />
</pre>
<p>
うーん、なんだか負けた気分。こちらはFireFox3.5にも適用されるので注意してください。
  <br />
こんなハック使わないでも解決できるようにもう一度設計を見直そう。</p>]]>
        
    </content>
</entry>

<entry>
    <title>とあるブログがリニューアルされたのでチェックしてみた</title>
    <link rel="alternate" type="text/html" href="http://ma-san.org/2009/10/post-26.html" />
    <id>tag:ma-san.org,2009://1.77</id>

    <published>2009-10-28T11:15:33Z</published>
    <updated>2009-10-28T11:19:16Z</updated>

    <summary>16:00 一人言です...。   とある方のサイトがリニューアルされたらしく（...</summary>
    <author>
        <name>ma-san</name>
        
    </author>
    
        <category term="日常" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://ma-san.org/">
        <![CDATA[<p><strong>16:00</strong></p>
<p>一人言です...。<br />
  とある方のサイトがリニューアルされたらしく（RSSフィードが突然10件分更新されたことに...。多分pngの問題）、おぉ！と思ってデザインを確認しに行ったら開かない...。<br />
  リニューアル途中なのかなと思い時間を空けて訪問しても開かない...。<br />
  と思ってたら単純に重いらしい。<br />
  原因を探ってみたらそりゃそうだよね、というところを見つけたのでご報告...。<br />
  （超私信になってますね...）</p>
<p>▼重いと思う理由は以下<br />
  ブラウザによって速度が違う模様。<br />
  jqueryとprototype.jsは同時に使うとコンフリクトが発生するために重くなってる？<br />
  そもそもprototype.js自体が重いので、両方使うときはよほどのとき以外は回避したほうがいいです。<br />
  その影響かIEだと一部機能していないライブラリがあり（6、7、8全てでエラー出てます）、多分そこらへんが重い原因じゃないかなーと。<br />
  また、jqueryのバージョンは1.3以降はSafari2.0以下でエラーが発生し、落ちてしまう可能性があるのであまりお薦めできません。</p>
<p>解決策：<br />
  コンフリクトを回避するコードを追加すること。<br />
  それで解決できなければ使っているライブラリが双方で多すぎるのでどちらかだけで統一（jqueryだけで全部表現できるはず...。prototype.jsは動きをつけやすいから楽だけど）<br />
</p>
<p>▼全体をチェックしてみて...<br />
  ヘッダー周りが崩れてる気がするので、randomのmargin周りを弄くると回避できる、と思う。<br />
  charsetもhtmlとcssで合わせたほうが良いと思うんだなぁ...。<br />
  タイトルが重複して表示されてるので、多分管理画面で直せる。<br />
  content-style-typeが重複している。<br />
  空要素周りが整理されていない（&lt;link /&gt;となっていないなど）<br />
  &lt;h1&gt;の外に&lt;a&gt;があるので、&lt;h1&gt;の中に入れましょう！（ロボットさん怒るかも）<br />
  求人の枠で&lt;/span&gt;が余分にあるよ！（ロボットさん怒るかも）<br />
  アンカー周り、多分WPの独自タグを使ってるせいだと思うけど、リンク先が同じなのにテキスト文が違うのでスパム扱いになっちゃうよ！<br />
  それと折角のリニューアルだからSEOに活かした設計にするために、サイドメニューにテキストリンクを追加したりすると良いですね。<br />
  IE6でmargin幅2倍バグ発生。<br />
</p>
<p>しかしこれが自分の知ってる人だったらすごい努力して習得したんだろうなぁ（僕の知ってる範囲でこういう構築できる人知らないし）。<br />
  でもそろそろ自分が作ったCSSテンプレートは新しいものに改良して欲しい。致命的なものがあったので...（import周りとmodule周り）<br />
</p>
<p><strong>20:00</strong><br />
  この記事書いてる間に少し軽くなってました(^ω^)ﾉｼ（IEのエラーも）<br />
でもやっぱりコンフリクトしてるからか重い...。<br />すごい良いブログになってると思ってるのでがんばってください！（というか知ってる人がこのブログを見ているのか不明すぎる...）</p>]]>
        
    </content>
</entry>

<entry>
    <title>今更ながらHTMLとXHTMLの違いについて</title>
    <link rel="alternate" type="text/html" href="http://ma-san.org/2009/10/htmlxhtml.html" />
    <id>tag:ma-san.org,2009://1.76</id>

    <published>2009-10-16T09:06:48Z</published>
    <updated>2009-10-16T09:10:08Z</updated>

    <summary>HTMLとXHTMLの違いについて質問されることが未だに多いので、自分用メモとし...</summary>
    <author>
        <name>ma-san</name>
        
    </author>
    
        <category term="XHTML CSS" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="html" label="HTML" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="xhtml" label="XHTML" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://ma-san.org/">
        <![CDATA[<p>HTMLとXHTMLの違いについて質問されることが未だに多いので、自分用メモとしてエントリしておきます。</p>
  <h3>HTMLとXHTMLについて</h3>
  <dl>
    <dt>HTML4.01</dt>
    <dd>Hyper Text Markup Languageの頭文字を取ったもので、文書を意味付け（マークアップ）しWWW上に発信する共通言語です。HTML4.01はその最新版です。</dd>
    <dt>XHTML1.0</dt>
    <dd>上記のHTMLをXMLの文法に基づいて再定義したものでHTMLに比べ文法が厳密になっていています。現在では、HTMLに変わりほぼ主流となっています。</dd>
  </dl>
  <p>HTMLとXHTMLは同じハイパーテキストマークアップ言語であり、文法もよく似ています。そのためHTMLを知っている人なら今直ぐにでも  XHTMLでWebページを作ることができます。しかし、似ているせいで「どこが違うのか・何が違うのか」があまり分かり易くありません。そこで、  HTML4.01とXHTML1.0の相違点を比較します。</p>
  <h3>コードサンプル</h3>
  <h4>■ HTML4.01(Strict)</h4>
  <pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;HTML lang="ja"&gt;
&lt;HEAD&gt;
&lt;META HTTP-EQUIV=content-type CONTENT="text/html; CHARSET=UTF-8" /&gt;
&lt;TITLE&gt;ページタイトル&lt;/TITLE&gt;
&lt;/HEAD&gt;
&lt;BODY&gt;
&lt;P&gt;あいうえお
&lt;P&gt;&lt;SPAN&gt;かきくけこ&lt;/P&gt;&lt;/SPAN&gt;
&lt;HR&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;
</pre>
  <h4>■ XHTML1.0(Strict)</h4>
  <pre>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"&gt;
&lt;head&gt;
&lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" /&gt;
&lt;title&gt;ページタイトル&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;あいうえお&lt;/p&gt;
&lt;p&gt;&lt;span&gt;かきくけこ&lt;/span&gt;&lt;/p&gt;
&lt;hr /&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
  <p> 似たような形をしていますが、細かいところが違っています。<br />
    もっと分かり易く、表にして比較してみましょう。 </p>
  <h3>相違点比較表</h3>
  <table summary="相違点比較表" cellpadding="0" cellspacing="2">
    <tbody>
      <tr>
        <td nowrap="nowrap">行番号</td>
        <td>HTML4.01</td>
        <td>XHTML1.0</td>
      </tr>
      <tr>
        <td>01</td>
        <td></td>
        <td>&lt;?xml version="1.0" encoding="UTF-8"?&gt;</td>
      </tr>
      <tr>
        <td colspan="3"><p> XHTMLにはHTMLにはないものが記述されてます。これはXML宣言と言うもので、XHTMLはXMLの文法に基づいて再定義したものなので、文書の先頭に記述することが推奨されてます。<br />
          「version="1.0"」は、その名の通りにバージョン情報のことで、1.0にしておけば問題ありません。「encoding="UTF-8"」  は、その文書がどの文字コードで記述されているかを示すもので、日本語の場合は「UTF-8、EUC-JP、Shift-JIS」の何れかです。 </p></td>
      </tr>
      <tr>
        <td>02</td>
        <td>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;</td>
        <td>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;</td>
      </tr>
      <tr>
        <td colspan="3"><p> この行にはHTML、XHML共に同じようなものが記述されていますが、XHTMLでは"HTML"が"html"と小文字で記述しなければいけません。<br />
          これは、DOCTYPE宣言（または、文書型宣言）と呼ばれるものです。一口にXHTMLと言っても複数のバージョンがあるため、その文書がどのバージョン・定義（DTD）に基づいて記述されているか示すために必ず必要なものです。<br />
          DTDとは、以下の三つのことです。 </p>
          <dl>
            <dt>Strict（厳密型）</dt>
            <dd>非推奨要素・属性を使用せず、厳密な文法に則ってWebページを作成する場合に使います。</dd>
            <dt>Transitional（移行型）</dt>
            <dd>非推奨要素・属性を使用し、互換性の高いWebページを作成する場合に使います。</dd>
            <dt>Frameset（フレーム使用型）</dt>
            <dd>フレームを使用し、Webページを作成する場合に使います。</dd>
          </dl></td>
      </tr>
      <tr>
        <td>03</td>
        <td>&lt;HTML lang="ja"&gt;</td>
        <td>&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"&gt;</td>
      </tr>
      <tr>
        <td colspan="3"><p> このhtml要素の部分では名前空間と言語コードを指定します。HTMLは言語コードだけでいいのですが、XHTMLでは「xmlns="http://www.w3.org/1999/xhtml"」と名前空間を指定する必要があります。<br />
          また、XHTMLの場合は言語コードをxml:lang属性で指定しますが、後方互換を考慮してlang属性でも同じ値を指定します。 </p></td>
      </tr>
      <tr>
        <td>04</td>
        <td>&lt;HEAD&gt;</td>
        <td>&lt;head&gt;</td>
      </tr>
      <tr>
        <td colspan="3"><p>HTMLでは要素を記述する際には大文字でも小文字でもよいことになっていましたが、XHTMLでは小文字と決められています。</p></td>
      </tr>
      <tr>
        <td>05</td>
        <td>&lt;META HTTP-EQUIV=content-type CONTENT="text/html; CHARSET=UTF-8" /&gt;</td>
        <td>&lt;meta http-equiv="content-type" content="text/html; charset=UTF-8" /&gt;</td>
      </tr>
      <tr>
        <td colspan="3"><p>XHTMLでは要素・属性共に小文字のみと決められ、ダブルクォーテーション(")の省略もできません。しかし、ブラウザによっては文法が間違っていてもそのまま表示してしまうので気付かない場合があります。注意しましょう。</p></td>
      </tr>
      <tr>
        <td>09</td>
        <td>&lt;P&gt;あいうえお</td>
        <td>&lt;p&gt;あいうえお&lt;/p&gt;</td>
      </tr>
      <tr>
        <td colspan="3"><p>XHTMLでは終了タグを省略できません。</p></td>
      </tr>
      <tr>
        <td>10</td>
        <td>&lt;P&gt;&lt;SPAN&gt;かきくけこ&lt;/P&gt;&lt;/SPAN&gt;</td>
        <td>&lt;p&gt;&lt;span&gt;かきくけこ&lt;/span&gt;&lt;/p&gt;</td>
      </tr>
      <tr>
        <td colspan="3"><p>XHTMLは整形式で記述しなければいけません。<br />
          サンプルのHTMLでは&lt;span&gt;の中に&lt;p&gt;の終了タグが混入してしまっています。</p></td>
      </tr>
      <tr>
        <td>11</td>
        <td>&lt;HR&gt;</td>
        <td>&lt;hr /&gt;</td>
      </tr>
      <tr>
        <td colspan="3"><p> 空要素の場合は、" /"と記述します。<br />
          空要素とは、要素で囲まないもののことです。例えばmeta要素、link要素、img要素がそれに当たります。 </p></td>
      </tr>
    </tbody>
  </table>
  <p> 以上、HTMLとXHTMLの記述の違いでした。どれも小さな違いですが、それだけに間違いに気づき難いものです。<br />
    XHTMLが主流の今でも、古いサイトの更新をするときなどにはHTMLで書くことがありますし、元々HTMLで書いていたものに間違ってXHTMLを追加してしまうことがないように気をつけましょう。 </p>
  <p>更に、今後はHTML5+CSS3の普及も見越しておきたいですね。</p>
]]>
        
    </content>
</entry>

<entry>
    <title>preタグ内のテキストを自動改行させるためのCSS</title>
    <link rel="alternate" type="text/html" href="http://ma-san.org/2009/10/precss.html" />
    <id>tag:ma-san.org,2009://1.75</id>

    <published>2009-10-14T08:49:05Z</published>
    <updated>2009-10-14T08:50:45Z</updated>

    <summary>  みなさんは利用規約などでpreタグを使っていますか？ preタグで囲ったテキ...</summary>
    <author>
        <name>ma-san</name>
        
    </author>
    
        <category term="XHTML CSS" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="css" label="CSS" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://ma-san.org/">
        <![CDATA[ <p>
みなさんは利用規約などでpreタグを使っていますか？<br />
preタグで囲ったテキストは自動改行されないため、文章量が多いとコンテンツ領域を越えてしまったりします。<br />
越えないように overflow: auto  などを指定するのですが、利用規約などをpreでマークアップしたときにはちょっと見難いものになってしまいます。<br />
縦横にスクロールバーが出てしまい、見る側にとって非常に確認しにくい...。</p>
<p> そんなときに使えるのがpreタグで囲ったテキストも自動改行させるスタイルシートです。記述はとても簡単で以下のコードをpreタグに対して指定してあげるだけです。 </p>
<pre>pre {  
    /* Mozilla */  
    white-space: -moz-pre-wrap;  
  
    /* Opera 4-6 */  
    white-space: -pre-wrap;  
  
    /* Opera 7 */  
    white-space: -o-pre-wrap;  
  
    /* CSS3 */  
    white-space: pre-wrap;  
  
    /* IE 5.5+ */  
    word-wrap: break-word;  
}  
</pre>]]>
        
    </content>
</entry>

<entry>
    <title>流行りのThickboxを試してみた - jQueryで画像やHTMLのポップアップをお手軽に！</title>
    <link rel="alternate" type="text/html" href="http://ma-san.org/2009/10/thickboxjqueryhtml.html" />
    <id>tag:ma-san.org,2009://1.74</id>

    <published>2009-10-13T04:58:00Z</published>
    <updated>2009-10-13T05:11:21Z</updated>

    <summary> 先日公開した携帯サイトをHTMLではなくPHPで組むときのDOCTYPE分岐方...</summary>
    <author>
        <name>ma-san</name>
        
    </author>
    
        <category term="XHTML CSS" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="コーディングノウハウ" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="html" label="HTML" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="jquery" label="jQuery" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://ma-san.org/">
        <![CDATA[ <p>先日公開した<a href="http://ma-san.org/2009/10/htmlphpdoctype.html">携帯サイトをHTMLではなくPHPで組むときのDOCTYPE分岐方法</a>のはてなブックマークが300に達しました。ありがとうございます(｀･ω･´)<br />
こんな記事がこんなに伸びるとは夢にも思いませんでしたが...^^;</p>
<p>さて、 「ThickBox」とはjQueryを使用したAjaxライブラリの一つで、画像をページ上に表示させるときに使われます（lightboxのような）。<br />
  画像だけではな  くHTMLファイルも表示することが出来るため、これ一つで画像とHTMLをポップアップ表示（正確には同じページ上にオーバーレイ表示される）させることが可能です。<br />
  <a href="http://ma-san.org/sample/thicbox/sample.html" target="_blank">◆サンプル</a></p>
<p> このライブラリの人気の理由は、小難しい設定をしなくても使えることや、ポップアップした画像を自動的にブラウザに収まるサイズに縮小してくれるところだと思います。<br />
  ※HTMLを表示する場合にはサイズを指定する必要があります。 </p>
<p> 使い方の手順を下記にまとめました。 </p>
<h3>必要なデータを揃えよう</h3>
<p>まずは、配布元である<a href="http://jquery.com/demo/thickbox/" target="_blank">ThickBox3.1</a>に行き、Downloadから下記ファイルをダウンロードしましょう。 </p>
<p><img src="http://ma-san.org/sample/thicbox/image01_thumb.gif" height="90" width="520" /></p>
<p><strong>ファイル名</strong></p>
<ol>
  <li>thickbox.js</li>
  <li>thickbox.css</li>
  <li>loadingAnimation.gif</li>
  <li>jquery-latest.js</li>
</ol>
<p>リンクを左クリックしてしまうと、ファイルが開かれてしまいますので、右クリックから「名前を付けてリンク先を保存」を選びましょう。<br />
このとき、保存するフォルダは下記の用にしてください。 </p>
<p><img src="http://ma-san.org/sample/thicbox/image02.gif" /></p>
<p>imagesフォルダの中にloadingAnimation.gifが入ります。この画像データはポップアップ画像を読み込んでいるときに表示されるローディングアニメーションです。</p>
<h3>HTMLからjsとcssデータを読み込む</h3>
<p>ThickBoxを使用するHTMLファイルからjsとcssファイルを読み込みます。<br />
{path}の部分はHTMLファイルからのパスにしてください。 </p>
<pre>&lt;script type="text/javascript" src="{path}/jquery.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="{path}/thickbox.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="{path}/thickbox.css" type="text/css" media="all" /&gt;
</pre>
<p>ここまでくれば準備は完了です。あとはThickBoxを使いたい画像に特定の指定をするだけです。</p>
<h3>画像をポップアップさせる</h3>
<p>a要素に対して class="thickbox" と指定することでポップアップさせることが出来ます。<br />
また、title属性を入れることで説明文を入れることも出来ます。 </p>
<pre>&lt;a&nbsp;href="image01.jpg"&nbsp;class="thickbox"&nbsp;title="説明文（なくても大丈夫です）"&gt;&lt;img&nbsp;src="image01_thumb.jpg"&nbsp;alt=""&nbsp;/&gt;&lt;/a&gt;&nbsp;
</pre>
<h3>画像をポップアップさせスライドショーを行う</h3>
<p>複数の画像をグループ化させ、スライドショーを行うことができます。グループ化させるためにはa要素に rel="グループ名" を指定します。 </p>
<pre>&lt;a&nbsp;href="image01.jpg"&nbsp;class="thickbox"&nbsp;title="説明文（なくても大丈夫です）"&gt;&lt;img&nbsp;src="image01_thumb.jpg"&nbsp;alt=""&nbsp;/&gt;&lt;/a&gt;&nbsp;
&lt;a&nbsp;href="image01.jpg"&nbsp;rel="グループ1"&nbsp;class="thickbox"&nbsp;title="説明文（なくても大丈夫です）"&gt;&lt;img&nbsp;src="image01_thumb.jpg"&nbsp;alt=""&nbsp;/&gt;&lt;/a&gt;
&lt;a&nbsp;href="image02.jpg"&nbsp;rel="グループ1"&nbsp;class="thickbox"&nbsp;title="説明文（なくても大丈夫です）"&gt;&lt;img&nbsp;src="image02_thumb.jpg"&nbsp;alt=""&nbsp;/&gt;&lt;/a&gt;
&lt;a&nbsp;href="image03.jpg"&nbsp;rel="グループ1"&nbsp;class="thickbox"&nbsp;title="説明文（なくても大丈夫です）"&gt;&lt;img&nbsp;src="image03_thumb.jpg"&nbsp;alt=""&nbsp;/&gt;&lt;/a&gt;
&lt;a&nbsp;href="image04.jpg"&nbsp;rel="グループ1"&nbsp;class="thickbox"&nbsp;title="説明文（なくても大丈夫です）"&gt;&lt;img&nbsp;src="image04_thumb.jpg"&nbsp;alt=""&nbsp;/&gt;&lt;/a&gt;
</pre>
<h3>インラインフレームでHTMLファイルを表示させる</h3>
<p>画像以外にもHTMLファイルをポップアップさせることも出来ます。</p>
<pre>&lt;a&nbsp;href="example.html?keepThis=true&amp;TB_iframe=true&amp;height=250&amp;width=400"&nbsp;class="thickbox"&nbsp;title="説明文（なくても大丈夫です）"&gt;インラインフレームでHTMLファイルをポップアップ&lt;/a&gt;</pre>
<p>インラインフレームで表示させたいHTMLファイルへのパスを記入し、その後ろに ?keepThis=true&amp;TB_iframe=true&amp;height=250&amp;width=400 という指定をします。インラインフレームの大きさは、height=○○&amp;width=○○ の部分で指定できます。</p>
<p>さて、無事ThickBoxを使うことができましたか？出来なかった！という方は今一度、jsとcssへのパスが間違っていないか、ThickBoxを使うための指定が間違っていないか確認してみましょう。</p>
<p class="continue"><a href="http://ma-san.org/sample/thicbox/thicbox.zip" target="_blank">thicboxサンプルファイル</a></p>
]]>
        
    </content>
</entry>

<entry>
    <title>HTMLやCSS等入れてはてブに登録するだけで異常なまでにアクセスが増えた...</title>
    <link rel="alternate" type="text/html" href="http://ma-san.org/2009/10/htmlcss.html" />
    <id>tag:ma-san.org,2009://1.73</id>

    <published>2009-10-11T10:29:56Z</published>
    <updated>2009-10-11T11:10:32Z</updated>

    <summary>ある人からこんなことを言われました。「Web業界って新しい技術に行こうにも、足踏...</summary>
    <author>
        <name>ma-san</name>
        
    </author>
    
        <category term="SEO" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="便利なこと" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="日常" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://ma-san.org/">
        <![CDATA[<p>ある人からこんなことを言われました。<br /><strong>「Web業界って新しい技術に行こうにも、足踏みしてる人多いからHTMLとかCSSとか、Tips系のタイトルだけでとりあえず見るって人多いみたいだねﾜﾛﾀ」</strong><br />僕の場合は軽く検索してみて、すぐに出なかったもの等をTips化してみて公開してみる（たとえその情報が相当昔のだったり簡単なのでもメモになる）スタイルでやってるのですが、別にTips系の記事を書いてみてもアクセスが伸びることはありませんでした。</p><p>で、その人にそんなことを言ったら<strong>「あぁ、はてブに登録するだけで良いよ」</strong>と言われてしまいました。うーん、確かにはてブに登録したらアクセスが増える、みたいなことは聞いたことあるし今更だけど、実際にやってみたことないなぁ...。</p><p>で、実際に各記事をはてブに登録してみた。</p><p>こんなブログにあっという間にたくさんの人が来てくれました\(^o^)/<br />ここ数日検索エンジンから来る人よりもはてブから来る人多いです。ﾅﾝﾃ/(^q^)\ｺｯﾀｲ</p><p>エントリした記事へのアクセスに差が極端にあり、その中でもHTMLとかCSSとか、XMLなどWeb屋さんであれば誰でも知ってるようなキーワードがタイトルに入ってる場合、極端なアクセスがあり、その他の一般エントリはまったく見向きもされてませんｗ<br />最新の技術（笑）でなくてもこれほどだとは思いませんでしたよ。<br /></p><p><strong>タイトルの重要性とはてブの恐ろしさを実感しました。</strong><br />とりあえず「やってみたことない、でもそんなの知ってるよｗｗｗ」というスタンスはいけないですな...。<br />当たり前ですが(^^;)</p><p>当然ですが、直帰率が超高いです＞＜<br /></p>]]>
        
    </content>
</entry>

<entry>
    <title>いざ知事選。伊達正宗公の御膝元【仙台】</title>
    <link rel="alternate" type="text/html" href="http://ma-san.org/2009/10/post-25.html" />
    <id>tag:ma-san.org,2009://1.72</id>

    <published>2009-10-10T14:35:32Z</published>
    <updated>2009-10-10T14:40:31Z</updated>

    <summary>  That All Right！いざ知事選、行くぜ！ 本日仙台駅前に用事があっ...</summary>
    <author>
        <name>ma-san</name>
        
    </author>
    
        <category term="日常" scheme="http://www.sixapart.com/ns/types#category" />
    
    
    <content type="html" xml:lang="ja" xml:base="http://ma-san.org/">
        <![CDATA[ <p><img src="http://ma-san.org/img/IMG_0148.PNG" alt="" height="480" width="320" /></p>
<p><strong>That All Right！いざ知事選、行くぜ！</strong><br />
本日仙台駅前に用事があったので駅前にあるAER前を通ると写真のような垂れ幕がありました！<br />
おいおい、これって<a href="http://www.capcom.co.jp/sengoku/" target="_blank">戦国BASARA</a>の伊達正宗じゃない？と思って帰ってから調べてみたら本当にそうだったー！？思わず写真を撮ってしまって公開。<br />
いくら人気が出て、いろいろな方面で影響が出てると言ってもさすがにこれは...。萌えキャラとかで町興しや販売促進してるところがあるけど、こういうのはあまりないんじゃないかなぁ。こんなんで若い人たちは本当に行くのかなとちょっと心配。アニメなどの影響で変な方向に進んでいるように、知事選に変な影響が出なければ良いけど...(^_^;)</p>
<p class="continue"><a href="http://www.j-cast.com/2009/10/09051448.html" target="_blank">宮城県知事選に「伊達政宗」が登場</a></p>]]>
        
    </content>
</entry>

<entry>
    <title>携帯サイトをHTMLではなくPHPで組むときのDOCTYPE分岐方法</title>
    <link rel="alternate" type="text/html" href="http://ma-san.org/2009/10/htmlphpdoctype.html" />
    <id>tag:ma-san.org,2009://1.71</id>

    <published>2009-10-10T12:53:03Z</published>
    <updated>2009-10-10T12:55:47Z</updated>

    <summary>  携帯サイトを構築するとき、キャリア毎の分岐などがHTMLだと非常に面倒くさい...</summary>
    <author>
        <name>ma-san</name>
        
    </author>
    
        <category term="XHTML CSS" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="コーディングノウハウ" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="doctype" label="DOCTYPE" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="html" label="HTML" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="php" label="PHP" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="モバイル" label="モバイル" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://ma-san.org/">
        <![CDATA[ <p>
携帯サイトを構築するとき、キャリア毎の分岐などがHTMLだと非常に面倒くさいので僕の場合はPHPで構築します（というかPCサイトでもPHPで構築してますが、それはまた、別の、話）。<br />
各キャリアで使用できるタグや、セレクタにも差があり、特にDocomoなんかは拡張子をxhtmlにするとCSSが上手く適用される（解釈の違いはあると思いますが...）とか、CHTMLの独自の仕様があったりとコーダー泣かせ。<strong>もう辛抱たまらん。</strong>
</p>
<p>
DOCTYPEなんかは各キャリアで分ける必要があったり、このDOCTYPEで表示に差が出る、なんてこともあるので非常に厄介。<br />
ということで携帯サイトをPHPで構築する場合、DOCTYPEの振り分け方一例を紹介します。
</p>
<pre>&lt;?php<br />$agent = $_SERVER['HTTP_USER_AGENT'];<br />if(ereg("DoCoMo",$agent)){<br />	header('Content-Type: application/xhtml+xml; charset=Shift_JIS');<br />	echo '&lt;!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.1) 1.0//EN" "i-xhtml_4ja_10.dtd"&gt;';<br />}<br />else if(ereg("^UP.Browser|^KDDI", $agent)){<br />	echo '&lt;!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML 1.0//EN" "http://www.openwave.com/DTD/xhtml-basic.dtd"&gt;';<br />}<br />else if(ereg("^J-PHONE|^Vodafone|^SoftBank", $agent)){<br />	echo '&lt;!DOCTYPE html PUBLIC "-//J-PHONE//DTD XHTML Basic 1.0 Plus//EN" "xhtml-basic10-plus.dtd"&gt;';<br />}else{<br />	header("location: 3キャリア以外からのアクセスの場合、飛ばしたいURLを記入");<br />	exit;<br />}<br />?&gt;</pre>
<p>
上記コードをソース上の一番上に記入して3キャリアの振り分けと、携帯以外でのアクセス（PCなど）をはじいてます。はじいた後のURLはPCサイトがあればPCサイトのURLへ。なければelseを削除でもいいです。<br />
また、インクルードで読み込むのもありです。<br />
</p>
<pre>&lt;?php
  require_once($_SERVER['DOCUMENT_ROOT']."/include/doctype.php");
  ?&gt;</pre>
<p>
  僕の場合は楽をするためにPHPでこのような形にしていますが、もしもっと良い方法があれば教えてください！<br />
  コーダーの方々はどのようにして携帯サイトを構築しているのかとっても知りたいです。 </p>
<p>みなさんは携帯サイトの場合、DOCTYPEはどのように指定していますか？</p>
]]>
        
    </content>
</entry>

<entry>
    <title>誰でもできる被リンクを増やすための4つの施策</title>
    <link rel="alternate" type="text/html" href="http://ma-san.org/2009/10/4.html" />
    <id>tag:ma-san.org,2009://1.70</id>

    <published>2009-10-09T09:16:05Z</published>
    <updated>2009-10-09T10:07:23Z</updated>

    <summary>被リンクを増やすための施策は大きく分けて4つあると考えます。   ブログ型、テン...</summary>
    <author>
        <name>ma-san</name>
        
    </author>
    
        <category term="SEO" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="seo" label="SEO" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://ma-san.org/">
        <![CDATA[<p>被リンクを増やすための施策は大きく分けて4つあると考えます。<br />
  ブログ型、テンプレート配布型、購入型、自作自演型（笑）と考えています。</p>
<dl>
<dt>1.ブログ型</dt>
<dd>
ブログ型の場合はそのままですが、ブログの本文やメニューに順位を上げたいサイトへのリンクを作成します。<br />
ブログはMTなどの静的URLを作るタイプを使うことが望ましい（動的URLだと内容が変わる可能性があると判断されるため）。<br />
ただし、ブログ型の特権として無料ブログからのリンクでも十分に価値があるということ。ライブドアやココログなどの無料ブログを利用し、リンクを張ることで十分にリンクを稼ぐことができます。<br />
難点としては定期的に更新をしなければいけない点と、価値があるサイトとして判断されるまでに時間が掛かるという点。<br />
定期的に更新しなければいけない点の解消としては、辞典サイトや用語集サイトを作るのが手っ取り早い。<br />
例えばHTMLタグひとつとっても100ページ以上のネタには困らない状態になる。<br />
どんな業界にでも専門用語はあるはずなので、ぜひ試してみましょう。<br />
<strong>ただし、最低でも順位を確実に上げたいのであればひとつのサイトに対して100程度のブログは欲しいところ。</strong><br />
キーワードの難易度や、SEOを行う必要性のあるサイトか判断して個数を決めると良いです。
</dd>
</dl>
<dl>
<dt>2.テンプレート配布型</dt>
<dd>
このテンプレート配布型は誰でもできるというと語弊があるかもしれませんが、実現できれば非常に有効な手段です。<br />
ブログテンプレートを作成し、公開するだけで良いのです。<br />
そのブログテンプレートの必要であるテキストリンクを入れることで、テンプレートを利用してくれる方々に被リンクを増やしてもらうことになります。自身でテンプレート配布サイトを作ることで、良質なサイトそのものを作成することも可能ですし、ライブドアなどで自身が作ったテンプレートを公開することで、公開する場にも困りません。特にライブドアのテンプレート公開は異常なまでに強力で、人気のテンプレートになればそれだけ被リンクを稼げることになります。<br />
  <strong>1のブログ型で100という数字を簡単に書いている理由は、このテンプレート配布型と合わせることで簡単に実現することが可能です。</strong><br />
  自分で100個もブログなんて作ってられないですしね...。 </dd>
</dl>
<dl>
<dt>3.購入型</dt>
<dd>
リンクを購入する、というのは例えば自治体などが公開しているサイトにリンクを有償で張ってもらうなどを含みます。購入型の場合は「地域性キーワード」を購入するときに利用しましょう。ページランクの高いサイトや無料リンク集からのリンクだからと言って、適当に選別していては価値がありません。労力の無駄とも言えます。<br /> 
<strong>僕が住んでいる仙台だけでもリンク集はたくさんあります。</strong>以下に一部の例をあげますので仙台のキーワードが欲しい場合は利用してみてください。 <br />
<a href="http://www.itsendai.com/yp/index.cgi">http://www.itsendai.com/yp/index.cgi<br />
</a><a href="http://www.s-ling.com/">http://www.s-ling.com/</a><a href="http://www.itsendai.com/yp/index.cgi"><br />
</a><a href="http://tamezon.no-ip.com/">http://tamezon.no-ip.com/</a><a href="http://www.itsendai.com/yp/index.cgi"><br />
</a><a href="http://www.sendaicity.ne.jp/index.html">http://www.sendaicity.ne.jp/index.html</a><a href="http://www.itsendai.com/yp/index.cgi"><br />
</a><a href="http://lsx.cool.ne.jp/f/l/tohoku/miyagi/index.html">http://lsx.cool.ne.jp/f/l/tohoku/miyagi/index.html<br />
</a><a href="http://www.miyaginet.jp/">http://www.miyaginet.jp/</a><a href="http://lsx.cool.ne.jp/f/l/tohoku/miyagi/index.html"> </a><a href="http://www.itsendai.com/yp/index.cgi"><br />
</a><a href="http://www.s-se.jp/">http://www.s-se.jp/</a><a href="http://www.itsendai.com/yp/index.cgi"><br />
</a><a href="http://www.wakuwaku-town.jp/">http://www.wakuwaku-town.jp/</a><a href="http://www.itsendai.com/yp/index.cgi"><br />
</a><a href="http://www.impulse-navi.ne.jp/miyagi/">http://www.impulse-navi.ne.jp/miyagi/</a><a href="http://www.itsendai.com/yp/index.cgi"><br />
</a><a href="http://www.net-miyagi.com/">http://www.net-miyagi.com/</a><a href="http://www.itsendai.com/yp/index.cgi"><br />
</a><a href="http://www.web2sendai.com/">http://www.web2sendai.com/</a><a href="http://www.itsendai.com/yp/index.cgi"><br />
</a><a href="http://www.csm.ne.jp/sarch/miyagi/">http://www.csm.ne.jp/sarch/miyagi/</a><a href="http://www.itsendai.com/yp/index.cgi"><br />
</a><a href="http://area-links.skr.jp/">http://area-links.skr.jp/</a><a href="http://www.itsendai.com/yp/index.cgi"><br />
</a><a href="http://sendai.chintai-map.info/">http://sendai.chintai-map.info/</a><a href="http://www.itsendai.com/yp/index.cgi"><br />
</a><a href="http://www.sendai-web.jp/">http://www.sendai-web.jp/</a><a href="http://www.itsendai.com/yp/index.cgi"><br />
</a><a href="http://www.wakuwaku-town.jp/">http://www.wakuwaku-town.jp/</a><a href="http://www.itsendai.com/yp/index.cgi"></a><br />
</dd>
</dl>
<dl>
<dt>4.自作自演型</dt>
<dd>
これは非常に簡単で、有効な手段です（笑）<br />
はてななどのFAQサイトで質問を行い、別アカウントで「ここのサイトにこんなこと書いてありましたよ」などの自作自演を行うことで被リンクを稼ぐことが可能です。また、自作しなくてもFAQサイトであれば質問に応じてリンクを紹介することも可能のはずです。<br />
しかし、ちょっとしたコツも必要で、ブックマークがされやすく、他の方々からの返答もいただけるような内容にしなければいけません。<br />
更に、<strong>作成したてのサイトに対してリンクを紹介するのはあまりにもひどい自作自演になるので、大きいサイトや長く運営をしているサイトに対して有効です。</strong>あまりにもバレバレな自演や業者丸出しの文章で返答をすると叩かれますよ（笑）<br />
テンプレート配布型のサイトの価値を高めたり、テンプレートの紹介をすることにも使えるなど、FAQサイトは非常に有効なSEOツールとして利用できますよ。</dd>
</dl>
<p>
以上が簡単で、それほど特別な知識がなくても手段さえ知っていれば誰でも可能な被リンクを増やすための施策になります。ブログがどうしても面倒な場合はTwitterでも代用が可能ですよ！ただしコンテンツとして増やすことはできないので、また別の運用方法になります（コメントにリンクを張ることはできてもテキストリンクは無理など、制限があります）<br />
上記以外にも簡単な被リンクを増やすための施策があればぜひ教えてください！</p>]]>
        
    </content>
</entry>

</feed>
