HTML or XHTML
XHTMLは、CSSが使用できるため様々な表現を必要とするモバイルサイトの制作を考慮すると、
XHTMLでの作成がオススメ。
DOCTYPE宣言
現状では、キャリアごとに異なった宣言を推奨しているがキャリアごとにサイトを作成するのには手間がかかるので、3キャリア共通のモバイルサイトを作成するには、
XHTML Mobile Profileか
XHTML 1.0 Transitionalに従って記述するのが望ましい。以下が、その設定例となる。
XHTML Mobile ProfileのDOCTYPE宣言
<!--XML宣言-->
<?xml version="1.0"?>
<!--文書型宣言-->
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd" >
<!--名前空間-->
<html xmlns="http://www.w3.org/1999/xhtml">
XHTML 1.0 TransitionalのDOCTYPE宣言
<!--XML宣言-->
<?xml version="1.0" encoding="Shift_JIS"?>
<!--文書型宣言-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--名前空間-->
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
コンテンツMIMEタイプ
XHTMLの場合は、
application/xhtml+xmlが推奨されているため、以下のように設定する。
metaタグ
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
また、DocomoでXHTMLを動作させるためにはサーバが送り出すHTTPヘッダーでも出力される必要があるため、
.htaccsessに以下の記述を入れておく。
.htaccess
AddType application/xhtml+xml .htm .html
これを入れるとPCでモバイルサイトを見た場合に閲覧できなくなることもあるが、モバイルでは問題なく見ることができる上、GoogleやYahoo!のクローラもこの形式に対応しているため、モバイルサイトという観点からみるとあまり問題はない。
なお、モバイルサイト作成に関するより詳しい解説は、以下の本を参考にするとよい。この本を1冊買えば、3キャリアに対応可能なタグの使い方をマスターできる．これからモバイルサイトを作ろうとしている人は是非手元に置いておいて欲しい1冊だと思う。
携帯サイト コーディング&デザイン (大型本)
ホームページ作成のためにロゴを作成する必要があり、フリーで使えるロゴ作成サービスをいろいろ試してみたので結果をまとめておく。
アイコンを使ったオリジナルロゴを作成可能
プロがデザインしたようなロゴを簡単に作成可能。豊富に用意されたアイコンとフォントを組み合わせることでクールなオリジナルロゴが作成可能。Web上での利用はフリーで、自由に利用が可能。インターフェースも分かりやすく、特にオススメのロゴ作成サービス。
日本語が使えるロゴメーカー
上で紹介したLogoMakerをはじめ、海外のサービスでは日本語に対応していないサイトも多い。日本語を使いたい場合は、以下のロゴメーカーが役立ちそう。
こちらもグーグルやヤフーのアイコンを作成できるが、1文字ずつ文字のサイズや色を指定できるため、自分にあったロゴを作りたい人にオススメ。日本語にも対応している。
Web2.0風のロゴが作成できる。こちらもフォントでMSゴシックなどを選ぶことで日本語の使用が可能。
そのほかオススメ
Ferrariやスターウォーズなど、映画などで見かけたことがあるロゴを作成可能。2009/04/30時点では、Ferrari、STAR WARS、Harry Potter, Monster’s INC、Yahoo、Nintendoのロゴが作成可能。
上のLogo54.comと同じように、企業や映画のロゴを作成できるサービス。こちらはGoogleやコカコーラ、マトリックスなどのロゴが作成できる。
Tシャツなどでおなじみの、「I Love NY」のロゴを作成可能。ハート以外にも様々なアイコンが使えるのでTシャツのデザインを頼まれた人には役立ちそう。
フリーでも様々なものが作れることが分かったが、やはり自分の手でデザインした方がよりイメージ通りのものを作りやすい。photoshopを使うのであれば、以下の本が説明が詳しいので参考にするといいかもしれない。
Photoshopプロフェッショナル ロゴデザイン CS3/CS2/CS/7.0対応
FirefoxでRemember the milk(RTM)を立ち上げようとするとブラウザがフリーズしてしまう現象に陥った。何度試しても、RTMを開くと止まってしまう。試しにIE8で開いたところ問題なし。やはりブラウザに問題がありそうだと思い調べてみると、公式サポートでこんな回答を発見。
Some users have reported slowness when using RTM in Google Chrome with Gears enabled for RTM. We’re investigating this further, but if you experience this issue in the meantime, it may be necessary to temporarily remove permission for RTM from Gears (so that RTM loads without using Gears in Google Chrome).
そうやらGoogle Gearsが悪さをしている模様。Gearsを無効化したところ無事に開くことができた。とりあえずめでたし、めでたし。
ついでに、RTMをサイドバーに表示させるという記事を見つけたので早速実行してみる。これはなかなか便利なので試してみるといいと思う。
「Remember the Milk」をFirefoxのサイドバーで使う方法。－ Mozilla Re-Mix
使用時はこのようになる。
URLを書き換えようと思ってWordPressのアドレスをいじったらハマってしまった。管理画面にも入れず、MySQLと格闘すること1時間あまりでやっと復旧。やはりこういうことは、バックアップを取ってからやらないとダメ。
まずはSSHでMySQLにアクセス
今回使用したのは、
Poderosaというクライアントソフト。GUIベースで操作しやすいのが特徴。
Puttyとか
Teratermでもいいけど。
MySQL起動
% mysql -u [user] -p [database_name]
データ書き換え
UPDATE wp_options SET option_value='元のURL' where option_name='siteurl';
UPDATE wp_options SET option_value='元のURL' where option_name='home';
これで元に戻るはずである。もし戻らない場合は、
SELECT * FROM wp_options WHERE option_name = 'siteurl';
などで、正しいURLがセットされているか確認するといいだろう。
このブログにも少しだけAdsense広告を張っているわけですが、表示される広告を見るとなぜか英語の広告ばかり。せっかく張るなら日本語の広告で表示させたいと思い解決策を調べたらwebdogにて解決策が見つかりました。
解決策としてはアドセンス用のタグで、
＜script type="text/javascript"＞
google_ad_client = "12345678";
google_ad_width = 600;
となっているところを
＜script type="text/javascript"＞
google_language = 'ja';
google_ad_client = "12345678";
google_ad_width = 600;
に変更するだけ。
英語の広告にお困りの方はぜひ試してみてください。
※2009/08/31 追記
アドセンスタグを改変するのは規約違反になるみたいです．
Google八分を避けるためにも，タグを改変しないほうが賢明．
ちなみに自分も元のタグに戻しています．
WordPressで記事を編集している際に、編集画面で改行したところに自動で改行を入れてくれる便利なプラグイン、brBrbrを入れているのだが、記事中にソースコードを入れたいと思い、<pre>タグで囲んだところ、<pre>タグ内で改行したところにさらに改行を入れてしまい、
#include
main(){
printf("hogehogen");
}
といったように、1行おきにソースが表示されてしまい困っていたが、調べたところ同じように悩んでいる人がたくさんいるらしく、すぐに解決。
以下が、解決方法
『wp-content/plugins/brBrbr.php』を開き、26行目から以下を追加します。
$brbr = preg_replace(‘/()(.*?)<¥/code>/ise', "clr_br('$0')", $brbr);
$brbr = preg_replace('/()(.*?)<¥/pre>/ise', "clr_br('$0')", $brbr);
WordPressでは、何か問題があっても先に誰かが解決してくれているというのは便利だと思う。
未成熟なモバイル広告市場
なんというかネット広告･･･とりわけモバイル広告って、全然イケてない・・・。
mixiでもエロ漫画サイトが出てきて云々という話をよく聞くけど、adsenseでもエロ漫画サイトのイメージバナーが出てきました。
確かにモバイルの広告ってイケてないものが多い。この方が言っているように、モバイル広告はエロ系やキャッシング系の広告ばかりが目をひくような気がする。誰にも見られることなくサイトを見れるという特性上、ワキガやダイエットなどのコンプレックス市場の広告が多いのもなんとなく理解できる。
実世界におけるモバイル広告
しかし、実世界と関連した広告があまり出てこないのはすごく疑問に思っている。先ほど紹介したブログを書かれた方も、
外歩いてケータイ見て、そこに載ってる広告見て、効果が高いといえば、近隣に存在する全国規模のチェーン店に決まってるじゃないですか。
と言っているし、私自身もモバイルの利点は、“24時間365日常に30cm以内にあるメディア”であり、いつでもどこでもユーザにアプローチできることだと考えている。
こうした利点を活かしている企業ももちろんあって、その例として挙げられるのがマクドナルドである。これは、メルマガでマクドナルドのクーポンが配布されるというオーソドックスな仕組みであるが、このメルマガは携帯ユーザの4人に1人が利用していると言われていて(※1)、実世界におけるモバイル広告市場では成功したマーケティングといえる。私自身もこのメルマガには登録しているが、たった数十円の割引とはいえ、クーポンを見てマクドナルドに行こうと思ったことは何度もあり、少し小腹が空いて何か食べたいと思った時にクーポンが届いたらその効果は絶大なように思える。
(※1) 参考 : http://markezine.jp/article/detail/7028
企業のモバイル広告への取り組み
マクドナルドをはじめ、モバイル広告に取り組み始めている企業もいる一方で、モバイル広告どころか
モバイルサイトすら持っていない企業も多い。たとえば、Googleモバイルなどである有名な企業の名前を検索しても、その企業のサイトが1位に表示されていないことがよく見られる。このことから企業のモバイル分野への関心の薄さがうかがえる。逆をいえば、
モバイルに進出してこない企業が多い今は、PCサイトでのSEO、SEM対策で遅れを取っている企業にとっては非常にチャンスであると言えるだろう。私としては、成長が期待できる市場だと思うので、各企業のモバイルサイトへの取り組みには引き続き注目していきたい。
ＰＣでアクセス解析といえばGoogle Analyticsが有名ですが、JavaScriptを使用しているため、モバイルのアクセス解析には利用することができません。
最近モバイルサイトを制作する機会があり、無料で使えるアクセス解析ツールについて調べてみたのでまとめておきます。
RTmetricsという導入に何百万円もかかる超高機能アクセス解析ツールを提供するオーリック・システムズ社が無償提供しているモバイルアクセス解析ツール。
■現時点ではNo.1
無償提供といえども、さすがはオーリック社。導入はページ内にphpタグを埋め込むだけなのでphpに対応しているサーバならすぐに設置が可能。また、解析メニューも豊富で特に
来訪しているユーザの動きがリアルタイムで見れる機能は非常に有用で、いつもユーザの動きを把握するのに役立っています。
無料で携帯サイトのアクセス解析ができるmyRTmobileを使ってみよう
上記のサイトで詳しく説明しているので、興味がある方はどうぞ。
サイト内に広告が表示されてもいいという方にオススメなのがこの
i2i。こちらもモバイルのアクセス解析では有名とのことです。
■機能は十分、有償で広告なしも
上にあげたmyRTmobileと同様に、phpタグを埋め込むだけで簡単に設置が可能で導入の敷居は低い。広告が邪魔だと思う人は
1か月あたり367円で広告をなくすこともできます。他の有料アクセス解析に比べたら安いもんなので、無料で使ってみてよさそうなら有料で使うのもありかもしれません。
MySQLのDBを用意する必要がありますが、されさえパスすれば設置は容易でしょう。デザインも見やすく、今後導入してみたいアクセス解析です。
PCサイト向けアクセス解析サービス「なかのひと」の携帯サイト版。どういう方法で算出するのかは定かではありませんが、
年齢・性別・地域などのユーザー分析機能は非常に役立ちそう。こちらも今後機会があれば導入していきたいと思います。
まとめ
現状で役に立つモバイルアクセス解析ソフトって思ったより少ないようです。
これもやはりドコモの携帯がクッキーに対応してなかったりする影響なのでしょうか。早くモバイル版のGoogle Analyticsが出て欲しいですね。
とりあえずWordPressの設置が完了。
設定していく上で参考にしたサイトが、
- CORESERVER（XREA）でWordpressを構築する手順
- WordPressでブログを作ったらまずやる26項目―SEO・アクセスアップのためのカスタマイズ
の２サイト。
まずはインストール
１のサイトを見ながらWordPressをインストール。
インストール自体は驚くほど簡単。
しかし、少し迷ったのはMySQL作成時の文字コードの設定。
WordPressではUTF-8が推奨されているようなのでそちらを選択しておくのがよさそう。
ほかは特に問題なく終了。
所要時間は約５分。
プラグイン
WordPressのよい所は豊富なプラグインがあること。
豊富すぎてどれを入れたらいいか分からないくらいだが、２のサイトが参考になる。
この中でSEO的に特に重要だと思うものをまとめてみる。
A.基本設定
１．テーマ（テンプレート）を選ぶ。
２．URL（パーマリンク）設定を『/%category%/%postname%/』にする
３．Pingooに登録して、Pingooで送信できない分のpingも設定をする。
１はデフォルトのままでは寂しいので好みで選びましょう。
２はURLにキーワードを含められるためSEO的に重要。
３は検索エンジンやブログランキングにインデックスされるのを早めてくれる。
B.サイトマップ生成＆登録
１．Google XML Sitemap Generatorを有効化して、サイトマップ生成
２．Googleウェブマスターツールに登録。
３．Yahooサイトエクスプローラーに登録。
全て検索エンジンにインデックスされるために重要。
msnは……
時間があればしておいた方がいいでしょう。
C.アクセス解析設置
１．Google Analyticsにサイトを登録。
PC用のアクセス解析はとりあえずこれを入れておけば間違いないかと。
D.ソーシャル化する
全部
アクセスアップのために最低限このくらいはしておきたい項目。
WordPress以外でもブログを作成後はやっておきたい。
そのほか加えておきたいプラグイン
最後に個人的にここに加えて導入したプラグインをまとめておく
１．All in One SEO
２．MightyAdsense
１は個別ページごとにメタキーワード、デスクリプションを設定でき、SEO対策の上では重要。
２はアドセンスの導入を簡素化してくれるプラグイン。
アドセンスを導入するなら入れておくと勝手に広告を出してくれるので便利。
一応、こんなところでしょうか。
いろいろとやることがあり面倒そうですが、作業としては簡単なのでぜひお試しあれ。
