BLOG > GENERAL
Responsive w/ Nucleus

Nucleusでレスポンシブで、
しかもケータイ対応のサイトを簡単に作る


Nucleusでレスポンシブでケータイも対応のサイトを制作する場合、まずデスクトップPC、スマートフォン、タブレット端末については別項で説明しているレスポンシブ対応スキン「 Kilax 」を利用して制作すればOK。
ケータイについてもレスポンシブサイトデザインの流れに組込んでしまえば話は簡単だが、CSSやJava等のブラウザ対応のからみでそれは出来ない。そこでNucleusでのケータイ対応だが、ケータイからのアクセスのみプラグインでユーザーエージェントを判断させ、既存のスキン内でケータイ向けの表示をスキンパーツ「 Ketai 」に分岐させてやることにする。面倒なこと等一切ない。名前も長けりゃ指定も面倒なわけのわからない携帯対応プラグインや携帯対応のスキンを用意することなど全くない。用意するのは後述するNP_deviceというプラグインとスキンパーツ1つに携帯表示用のテンプレートだけ。
スキンパーツ「 Ketai 」はスペシャルスキンパーツとして既存の現行表示に設定しているスキンにて生成する。
既存のスキンのメインの目次ページ(インデックス)では以下の様にNP_deviceによるif分岐を記載する。既存の個別アイテムページも同様にケータイ向けの表示をスキンパーツ「 Ketai 」に分岐させる。<%if(device,ketai)%>とすることでDoCoMo|Vodafone|SoftBank|MOT-|J-PHONE|KDDI|UP.Browser|WILLCOMをユーザーエージェントとするケータイ端末の表示を分岐する。
プラグインのソースを修正することで各端末の表示をさらに分岐させることも可能だが多くの場合、そこまでしてケータイサイトの表示に注力する必要のあるケースはそうないだろうと思うので、ケータイ向け表示のスキンパーツ「 Ketai 」はUTF8でXHTML形式、Docomoブラウザver1.0にて表示可能なフォーマットとしている。なお、アイテムのテキストに含まれる全角カタカナと全角数字はそれぞれ半角カナ、半角数字に自動的に変換します。

メインの目次ページ 及び 個別アイテムページ
<%if(device,ketai)%>
  <%parsedinclude(ketai)%>
<%else%>
  既存のメインの目次ページ(個別アイテムページ)のソース
<%endif%>


ケータイでのアイテムの本文の表示はテンプレートでは<%syndicate_description%>を利用して基本的にはテキストのみの表示としている。NP_ImageExtractorプラグインをもちいてアイテムに含まれる画像のみ、あるいは本文等テキストのみ抽出して表示させることも可能だが、実際ケータイでのアクセスの際にどれだけそれら画像の表示の必要性があるのか。またアイテムの本文に含まれる外部リンクやファイルについても同様でケータイでのアクセスの場合においてそれらの表示が可能なのかあるいは需要があるのかということを考えて<%syndicate_description%>を設定してあります。

スキンパーツ、テンプレートとプラグインは以下よりダウンロードしてください。テンプレートはNucleus管理ページより「 読込/書出 」を利用して読み込んで下さい。

ケータイ対応キット(プラグイン、ケータイ用テンプレート等)

NP_ImageExtractor



LINEで送る
PREV : グルーブラインZの東塚菜実子って、あれだ
NEXT : ProcessWireのインストールと基本チュートリアル

ダンス教室の子どもの挨拶はおかしい


エイベックスダンスマスターとかいう子ども向けのダンス教室では講師や生徒の子どもたちが「お疲れさま」といって帰っていく。ジムには他に空手などの教室もあるのだが、こっちの子どもは普通に「さよならー」っ...つづきはこちら