なつかしの携帯サイト

ブログの振り分け~PC版とモバイル版~

プラグインやサービスを使う手もありますが、PC版のページと携帯版のページを作るのが面倒でないなら、それぞれのテンプレートを作るのもシンプルで良いです。

<1>携帯版インデックスページを作る
MTで「インデックステンプレートを複製」(ファイル名の左側のチェックボックスを入れて、アクションのプルダウンからテンプレートの複製を選択)します。
Dreamweaverなどでざっとhtml組んで(手打ちでももちろんいいですが)複製したインデックステンプレートにコピーペーストし、テンプレートの設定画面でファイル名をPC版とは別の名前にしたあと、保存・再構築をかけます。

<2>携帯版のブログ記事ページを作る。
以下のサイトを参照しました。
http://webdesigner.hikonet.net/mt/20090110.php
アーカイブテンプレートで、PCのブログ記事のテンプレートを複製します。
テンプレートの設定で新しいアーカイブマッピングを作成にし、種類を「ブログ記事」パスのところは私は「m/%y/%m/%d-%s%x」としました。最初のm/はmディレクトリに携帯関係のファイルを入れる決まりにしたからです。
保存をクリックします。

携帯インデックスページに戻り、プログ記事へのリンクを
<a href="<$mtBlogURL$>m/<$MTEntryDate format="%Y/%m/%d-%S"$>.html"><$mt:EntryTitle$></a>
と設定します。再構築をかけます。
これで、携帯版ブログ記事が
http://ドメイン/m/2011/08/12-09.html
などのように生成されます。

<3>同じ要領で携帯月別ブログ記事リストを作成する
月別ブログ記事を複製し、アーカイブマッピングは「m/%y-month/%m/%d-%s%x」、種類が月別、インデックスページじ記述するリンクは、
<a href="<$mt:BlogURL$>m/<$MTArchiveDate format="%Y-month/%m/%d-%S"$>.html"><$mt:ArchiveTitle$>(<$mt:ArchiveCount$>)</a>
にしました。

これで、各プログ記事と、月別記事のページが生成されます。

さて、うまく行かなかったのが、カテゴリ別ブログ記事のページです。
考え方は同じはずなのに、何がいけないのか、ページ生成されないし。
この仕事にいつまでもかかりっきりになってる訳にもいかないし。
そこで。

いや、大したことしてません。すみませんもったいぶって。
カテゴリ用にMT新規で作りました。別のMTにカテゴリ関係だけ飛ばして、記事はインクルードで対応しました。
長くなってしまったので、詳しくは、次回にて。m(_~_)m

Movable Type Open Sourceでつくったモバイルサイトの落とし穴

さて、前述のモバイルポータルサイトですが、ひとつ解決できずにGOが出てしまった問題があります。

それは、文字コードの問題です。
さくらインターネットのデータベースは文字コード「utf-8」で動いています。
Movable Type Open Sourceのシステム自体も、「utf-8」で構築されています。
携帯主要3機種docomo・au・softbankも問題なく表示はされます。

ただ、auは「utf-8」入力をサポートしていません。なので、検索窓に打ち込んだ文字は「Shift-JIS」でインプットされるためここで激しく文字化けが起こります。(文字化けに激しいもおとなしいもありませんが)

この問題を解決するために、本当にいろんなことを試しました。
ネット検索するとそれらしい記事が出てきますが、片っぱしから試しても全くうまくいきません。
ファイルを全て「Shift-JIS」に変換してみるというご苦労なこともしてみましたが、データベースに情報を読みに行った時点で文字化けが起こります。

このポータルサイトの構造は、絵文字対策でトップページのみ、docomo・au・softbank用と振り分けて3つファイルを用意しています。
結果としてこのめんどくさい作業が身を救ったことになりました。
検索はトップページだけに設置されているのですが、納期も差し迫った極限状態の私、auのみ検索窓のない仕様でスタートさせてくださいとクライアントさんを拝み倒し、なんとかOK。

一応、検索窓部分はコメントアウトして、いつでも解決策が見つかったら復活できるようにしてあります。

良い解決策をお持ちの方は、コメントを心よりお待ち申し上げております。

Movable Type Open Source について

レンタルサーバさくらインターネットのウェブアプリケーションのところを見ていたら、「Movable Type Open Source」の文字が。

Open Source?Movable Typeとは違うのか?

早速、クイックインストールしてみましたところ、Movable Typeの簡易版にしては、十分な機能満載の優れたツールでした。しかも、商用でも無料。
こんないいツールがあったとは。

で、現在、これで携帯用のポータルサイトを構築しています。

各カテゴリーごとに情報を分類して自動的に表示したいので、とても便利です。
ただ、カテゴリ分けてで表示しようとすると、なぜか同じ情報が2回づつ表示されてしまいました。

なんでだろう・・・

考えてる時間がもったいなかったので、@をあたまに置いたプライベートタグタグでタギングしてアップしておき、タグごとに表示できるようにしました。こっちはうまくいくようです。

ひとつの情報に、@地域A・@職種Bなどのタグを設定しておきます。地域Aで検索する場合、地域Aのひな型ページを作成しておき、そこに@地域Aタグをもった情報が、入力の新しい順で表示されるようにします。

ブログのシステムって、前述の不動産の情報もそうですが、ブログ以外にもかなり使えます。
ひねりひとつ加えるだけですね。

ただ、携帯サイトで応用するには、多少問題が。
後日また、報告いたします。

携帯サイトにプルダウンリンクを置く

携帯サイト制作三昧の毎日です。

サイト内リンクでプルダウンメニューを置きましたが、docomoで表示できません。
auでは、表示できますが、submitボタンが表示されない、不完全なことに。

Dreamweaverで、ささっと組んだものなので、クライアントサイドなコンテンツです。

よ~くよく考えたら、携帯はJavaScript使えないのだから、当然ですよね。
で、CGI使うことにしました。

All Aboutさんで配布プログラムいただきました。

http://allabout.co.jp/internet/hpcreate/closeup/CU20020331A/

で、めでたくメニュー設置できました。\(^O^)/

All Aboutって、面白いサイトですよ。いろんな分野の情報が載ってます。
コンピュータ分野にとどまらず、マネー、住まい、健康、育児、冠婚葬祭、人間関係、恋愛関係...。
そして、それぞれの記事を専門家が書いているので、非常に詳しいです。
広く、深い。難しくない。素晴らしい。

AD-EDITと仲良くなれるか?!

AD-EDITをカスタマイズ中です(^_^;)v
(このサイトはMovable Typeで作ってますが)

携帯画面、だいぶできてきました。
新着情報もばっちり表示できたし、キャリア振り分けも完ぺき。

cgiファイルをいじって、リンク切れも解消させました。スキンファイルで各々のページがこちらのレイアウトで表示されるようにもしました。


ただ、基礎的なところで、つっかえてます。

auはプルダウンページセレクトフォーム使えるのに、docomoがなぜか表示されません。

この辺のノウハウを詳しく書いてあるサイトとか書籍はないものか・・・。

明日は午前中新規サイトの打ち合わせです。
ついでにヨドバシカメラの書籍コーナーに行ってみます。

今年は、携帯案件5倍増位になりそう。頑張れ。私。

auでjpeg画像が表示されなかったけど(~_~;)

60ページものPCサイトが完納となりました。おめでとう!私。

ここのところ、モバイルサイト作成作業がメインになっています。

で、キャリア振り分けは出来たけど、.jpg画像がauだけ表示されない問題が。
検索で調べてたら、保存時にプログレッシブ保存にチェックを入れてると、auは表示されないとの記事を見つけました。早速、Photoshopでチェックを外して保存し直したら、めでたく表示されました~。

先人の知恵。本当に感謝します。

現在、auだけphpプログラムが反映されない壁に激突。
納期も迫っているので、振り分けないで絵文字はgifにしようかと、及び腰中。

モバイル業界、どうよ?

モバイル案件二つかけ持っています。

mobbook.jpg携帯サイトの参考書も結構出てきましたね。
一昔前は全くなくて、docomoのサイトから情報を得るしかなかったけど。今、参考にしている本はソフトバンククリエイティブ社の「Mobile Site Coding Design」です。
ソースがたくさん載っていて分かりやすいです。なかなかソースが載っている本が少ないので、重宝しています。

今、請け負っている案件のひとつは、CGIもPHPも.htaccessも使えないサーバで、結局絵文字のキャリア分けができず、アイコン画像を独自でアップロードしようとおもっています。
支店が30以上あり、その各地図画像を支給されたのですが、ここはGoogleマップのページに飛ばすリンクを入れようと思っています。それで容量を稼ぐ。ユーザも自分でスクロール出来る方がうれしいでしょう。

携帯サイトを作る目的を考えると、PCサイトより、もうちょっと切実に情報を求められているのがモバイルサイトだと思う。だって、ローディングに時間がかかる。私は流し見だけなら絶対PC立ち上げる。
年齢層にもよるだろうな。
私の年代の人はPCサイト閲覧派が多く、あんまりモバイルサイトの話は出ない。
無料解析ツールのi2i.jp(http://www.i2i.jp/)の統計でも、PC閲覧が70%で携帯閲覧が30%。
ただし、昼間の何時間かだけ、PCよりわずかに携帯の方がサイト閲覧率が上回る時間があるのだ。
サラリーマンは仕事中。専業主婦はPCがある。つまり、この時間のターゲットユーザは「若い子」なのだ。

 

案件2つ目で、クライアントが楽に更新できるスペースを作ってほしいと言われました。
クライアントは、不特定多数で、PCがないかもしれないし、あってもホームページ作成ソフトをわざわざ開くような作業は不親切ですよね・・。

そこで、レッツPHPさんの「写メールBBS」というPHPプログラム(http://php.s3.to/bbs/bbs7.php)に手を加えて、サイトの中に更新スペースを作りました。クライアントが更新情報を、メールでシステムに送るだけで、そこの情報が書き換えられる仕組みです。
結構いけそうでしょ?
レッツさん。感謝。

台風接近

朝から寒い雨降りの一日です。

今日は、プログラマーさんとユニットを組んでいる携帯サイトメール配信システムの仕事から始めました。
このプログラマーさん、以前からお世話になっている方の甥っ子さんなのですが、すごい切れ者!
1話すと5ぐらい先まで読んでくれてしまう。いるんですね~そういう人って。とても仕事がやりやすいです。

相棒のMac

大昔(12~13年前)、WEBデザインを始めたころは、世の中のインターネットは静的ページが主だったのでただ感情のおもむくままに、勝手なものを作っていればよかった。

それから、CGIやJavaScriptで動的なものができると感づき始めたクライアントが、デザイナーがなんでもできると思って無理な要求を出してくるようになった。
よく、クライアントさんとケンカしてました。

一人がすべて行うには、WEBの世の中は広すぎることが周知されたので、制作作業が分業されるようになって、自分の組み立てたもので他人が作業しやすいようにという考えが生まれ。

WEBの世界は、ものすごく倫理的に成長していると思う。(一部の違法なコンテンツを除いて。)

 

この世界で生きていくのは、とても楽しいです。
自分と違う分野の人と仕事ができて刺激をもらったり、自分が正しい仕事のやり方をしていると確認できる手段がたくさんあるから。

忙しかったのですが(^_^;)

やっと時間が取れて、Movable Typeカスタマイズ~♪

ここのところ、PCサイト60ページものと格闘してました。
それから、携帯サイトを2本。
携帯サイトについては、かなり勉強したー。
一番の収穫は、携帯キャリア別の振り分けについて。
.htaccess(知り合いのプログラマに聞いた。エッチティーアクセスと読むらしい)に以下記述する。

--------------------

Options +FollowSymLinks
RewriteEngine On

# DoCoMo
RewriteCond %{HTTP_USER_AGENT} DoCoMo [NC]
RewriteRule ^$ http://ドメイン/i/index.html [R]

# SoftBank
RewriteCond %{HTTP_USER_AGENT} J-PHONE [NC,OR]
RewriteCond %{HTTP_USER_AGENT} Vodafone [NC,OR]
RewriteCond %{HTTP_USER_AGENT} SoftBank [NC]
RewriteRule ^$ http://ドメイン/y/index.html [R]

# au
RewriteCond %{HTTP_USER_AGENT} UP.Browser [NC]
RewriteRule ^$ http://ドメイン/e/index.html [R]
-----------------------

ただし、携帯案件2本目のサーバはお名前.comで、.htaccessが置けなくて、コントロールパネルからモバイル振り分け設定ができた。
いろんなサーバがあるから、受注する前にサーバの確認をする必要があるな。

 

ところで、各キャリアの実機動作確認だけど、docomoは自分の携帯があるのでいいとして。
softbankはすごくいいシュミレータがあった。

http://creation.mb.softbank.jp/web/web_wcv_terms.html

でも、auはシュミレータが古いバージョンなのか、うまく動かない。
というわけで、買ってしまった。au。
ちょっと前の機種なので、機体はタダ。月額分は稼げるだろうと踏んで。
au、結構面白い!動画がきれい!
買ってみて良かった。絵文字とか、キャリアによって全然違う!
携帯サイトの仕事、今後コンスタントに入りそうなので。久々に正しい買い物した感がありました。

満足。