自サイトスマホ版
遅ればせながら、Dreamweaver CS5.5とjQuery Mobileを使って、仕事用サイトのスマホ版を作っています。
制作の参考にしたのはこちら。
CS5.5はまだ購入していないので、とりあえず試用版をダウンロードして制作開始。
静的なページを制作するには上記サイトの情報で十分でした。
ところで、仕事用サイトはMODxで作っているのですが、動的に生成するコンテンツはなくてトップページのNews部分も、テンプレート変数だけ設定してhtmlを直接編集して更新しています。
というのは、その時々によりリンクがあったりなかったり、更新日以外の日付を表示したかったり、並び替えもしたかったりで、条件を考えて動的に生成するようにするよりhtmlを書く方がチャチャッと簡単に更新できるから、あえてそうしていたのです。
が、スマホ用サイトのトップページにPC用と同じhtmlコードをまた書くっていうのは… さすがに「素人やないんやから」つー話です。
仕事サイトトップページにはこのブログの最新記事も表示していますが、Google AJAX Feed APIでRSSを取得しています。
この部分はそのままスマホ用トップページで使えたので、NewsもMODxからフィード出力さえできれば同じように取り込めるな、と。
で、トライ！
ニュース部分だけ管理画面から更新できるように変更する
MODｘで新着情報更新システムを作ってみるを参考にさせていただきました。
うちのnews_tplはこんな簡単なコードです。
一応動いてるようですが、間違ってたら誰か教えてください…。
1 2 | <dt>[+news_disp_date+]</dt> <dd>[*phx:if=`[+news_link_url+]`:is=``:then=`[+news_body+]`:else=`<a href="[+news_link_url+]">[+news_body+]</a>`*]</dd> |
もともとYuga.jsを使ってリンク先が別ドメインの場合は自動的に別ウィンドウを開くようにしているので、参考サイトにあったリンクターゲットに関するテンプレート変数や条件分岐は入れていません。
テンプレート変数の名前を一部変更して表示日付のフォーマットは変更しました。
また、参考サイトで使ってらっしゃるらしいManagerManagerは入れていません。自分が更新するので別にえーわ、と。
Ditto2.1は以前から入れるだけは入れていたので（使ったことはなかったけど）、特にスニペットは追加していません。
PHｘはDitto2.1に含まれているとのことです。
ニュース部分をRSSで出力する
こちらを参考にさせていただきました。
RSS 2.0を出力する
上記記事で出力するのはサイトマップですが、フィードを作りたいのでコードをフィード用にします。
また、あくまでGoogle AJAX Feed APIで日付と本文を拾えればいいだけで公開するつもりはないので、コードはてきとーです。
テンプレート：rssFormat
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <?xml version="1.0" encoding="UTF-8" ?> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:admin="http://webns.net/mvcb/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns="http://purl.org/rss/1.0/"> <channel rdf:about="[(site_url)]"> <title>[(site_name)]</title> <link>[(site_url)]</link> <description>[(site_name)]</description> </channel> [*content*] </rdf:RDF> |
チャンク：rssTpl
1 2 3 4 5 | <item rdf:about="[+url+]">
<title>[+news_body+]</title>
<link>[+news_link_url+]</link>
<dc:date>[+news_disp_date+]</dc:date>
</item> |
通常のフィードなら<link>〜</link>は記事があるページにすべきだと思いますが、本文が1行しかないページを表示しても仕方ないので、記事内のリンク先[+news_link_url+]にしました。
リンクないときはどうなるんやろ…。（テストしてません…）
あと、Google AJAX Feed APIで取得するrssファイル用にリソースを新規作成します。
上記rssFormatをテンプレートとして指定し、コンテントタイプをtext/xmlに。
そして本文[*content*]）は以下のようにしました。
各変数と値についてはMODxの関連サイトで見てみてください。その他にも指定できます。
1 | [!Ditto? &parents=`24` &tpl=`rssTpl` &display=`5` &language=`japanese-utf8` &sortBy=`news_disp_date`!] |
これで無事にフィード出力→取得できたのでよしとします。
Safariで確認したスマホ用「更新情報」ページ
レスポンシブデザインとかモバイルファーストとかを意識してサイト全体を作り直せば、わざわざモバイルサイト用にフィードを出力する必要はないのでしょうけれどね…。
GAを見ると去年まで多かったIE6〜7ユーザーがだいぶ減ってきてるので、そろそろやらんとあかんですね。
完成したら公開します。
（2011-08-31追記）
やっとアップしました。
スマホでPCサイトのトップページにアクセスするとアラート画面が出てスマホページへ誘導されます… たぶん。
振り分けのjsは以下のサイトより使わせていただきました。
Posted by sponge design on 6/22, 2011 :: Categories 仕事
Tags :: Android, MODx
コメントはこちらから↓ トラックバック
