【Tips研究会】開催レポート
「NORENユーザ会」（Tips研究会）
NOREN6でのスマートフォン対応のポイントと
問題解決について伝授！
NORENで構築したサイトをご自身のスマートフォンとNORENのプレビューで確認！
去る11月06日、アシスト本社（市ヶ谷）にて「NORENユーザ会」（Tips会）が開催され、12名のユーザ様に
ご参加いただきました。
当日は、NOREN6でマルチデバイス対応のサイト構築するときに使える機能やポイントを
株式会社のれん NORENエバンジェリストの八木よりご紹介いたしました。次に、NORENでスマートフォン
対応サイトを構築する際のポイントや検収時に実施する「テスト」の勘所について、株式会社サイビーンズの
松橋様、高口様にご説明いただき、デバイスによってどのような問題があるか、お客様ご自身のスマートフォンを
使用した実習も行いました。休憩時間中も技術的な質問が飛び交ったりとTips研究会ならではの、皆様の技術者魂が
垣間見られる場面もありました。
その後懇親会も行い、お客様同士でNORENに対する熱い思いを語っていただくなど、非常に良い会と
なりました。この場をお借りし、ご参加いただいた皆様に心より厚くお礼申し上げます。
【プログラム概要】
・NORENユーザ会ご挨拶
NORENユーザ会幹事 株式会社アップルワールド 雙木 好美 様
・のれんセッション
株式会社のれん 八木 康介
・NORENパートナーセッション
株式会社サイビーンズ 松橋 明彦 様
高口 一 様
NOREN6によるマルチデバイスの実現について
株式会社のれん 八木 康介
株式会社のれん NORENエバンジェリストの八木より、
「NOREN6によるマルチデバイスの実現について」と題して下記の3つのパターンに分けそれぞれの特徴をご紹介
いたしました。
１．レスポンシブ（One Web）
1つのHTMLでどのデバイスでも表示できるようにHTMLテンプレートでレスポンシブデザインを定義する。
一般的なCSSをテンプレートやコンポーネントに記述したり、CSSファイルそのものをアップロードすることで
対応できる。さらに、NORENのテンプレートは、タイプとファイル名を指定することにより、HTMLだけでなく
CSSやXMLも生成可能。
またNORENのプレビュー機能は画面のサイズがメニューで指定できるので、レスポンシブデザインのページを
サイズごとにどう表示されるのかを確認することができる。
２．アダプティブ（個別サイト）
PC／スマートフォン／タブレットなどそれぞれにHTMLテンプレートを用意し、NORENから各デバイス向けの
HTMLを配信する。
NORENにはワンソースマルチユース・マルチデバイスの機能があり、コンテンツとサイトのメニュー構成が
別々に定義でき、どのサイトに読込ませるかも指定できるので、1つのコンテンツを各サイトで共有できる。
また「陣」というオプション製品を利用することで、一つのコンテンツの中でブロック（本文や画像などの要素）
単位で、コンテンツの出し分けが可能。
３．変換ツール
PC用のHTMLを何らかの変換ツールを使ってスマートフォンやタブレット用に
変換する。
最後に、それぞれ長所や弱点がありスマートフォンサイトで何をやりたいかという目的によって、使い分けることも
必要と語りました。
NORENパートナーセッション：
スマートフォン対応における実装ベースでの問題点とは？
～NORENでの『アダプティブ対応』について～
株式会社サイビーンズ 高口 一 様
株式会社サイビーンズ様は、NOREN6にてアダプティブ対応のスマートフォンサイトを構築した経験による知見
から、実装時に起こりえる問題点とその解決策、検収時に実施するテストのポイントについてご説明いただき
ました。
まず高口様より「実装編」と題して、PCサイトからスマートフォンサイトを構築する上で、スマートフォンの
画面幅が狭いことなどによる代表的な問題点と解決策をご紹介いただきました。
１．表形式のコンテンツ
・テーブル構成が一定のパターンである場合
<table>タグを特定しルールに従いJavascript・CSSで対応／分解することで、 パソコン用のコンテンツを
流用でき、製造コストがやや高くなる傾向があるものの、データ移行や運用時の工数削減ができるため
運用コストは低くなる。
・テーブル構成が不規則であり、パターン化できない場合
運用時にパソコン用／スマートフォン用の2種類のデータを用意する必要があるものの、スマートフォン用の
コンテンツを別途用意することで、自由度が高く状況にあわせたコンテンツを用意することができる。
２．長文コンテンツ
スマートフォンサイト用のアクションフィールドを別途用意し、文章を短文に加工し体裁を整える。
３．画像コンテンツ
特に大きな画像を使用している特定のコンテンツのみ、スマートフォン用の画像を用意する。
NORENのアクションタグを利用し、スマートフォン用の画像が登録されていなければパソコン用の画像を
使い回すロジックを組み込む。
４．大量コンテンツ
スクロールが終端に達した際に「次のコンテンツ」を読み込む方式を採用。
NORENのAPIやDynamicサービスを利用することにより、静的コンテンツと動的コンテンツの共存が可能。
５．アダプティブ対応時のURLの違い
PC用／スマートフォン用のHTMLをNORENから配信しておくことで、NORENのアクションタグを使用し対応
するコンテンツを特定できるため、既定のタグ・位置にリンクを埋め込んでおくことにより、Javascriptで
ユーザエージェントを判別し取得したURLへリダイレクトすることで、ユーザを対応するページへ誘導できる。
６．クローラー対策
<head>タグにCanonicalタグを埋め込んだり、.htaccessでCaonicalタグを記述できないPDFなども追加する。
上記のようにコンテンツの特徴や運用面を考慮しながら実装方法を検討することで、検索結果や離脱率を
考慮したユーザビリティに優れたスマートフォンサイトの構築が可能であると高口様は語られました。
株式会社サイビーンズ 松橋 明彦 様
続いて松橋様より「テスト編」と題して、構築したスマートフォンサイトを確認するために留意すべきことをご説明
いただきました。
NORENのプレビュー機能では、画面サイズを変えたり日時を指定したプレビューが可能であるものの、
スマートフォンは機種依存の問題があるため、実機での確認が必要と語られました。
本来であれば様々なバリエーションの端末をそろえて確認できるとよいものの実際には難しいため、FireFoxの
アドオンであるUser Agent Switcherや、Google ChromeのFireMobileSimulatorなどを利用することにより、
端末やブラウザの種類といったユーザエージェントを強制的に変更して確認することも可能とご紹介いただきました。
さらにTipsとして、ブラウザのHTML Rendering Engine（以下、Rendering Engine）の種類や歴史についても
お話しいただきました。Rendering Engineとは、HTMLやCSS、XMLなどのデータを解析し、実際に画面に表示
する文字や画像などの配置を計算するプログラムのことです。各ブラウザのRendering Engineは、同じものを利用
していたり過去に共同開発や分岐したりという経緯があることから、iPhoneのSafariと、GoogleChromeは基本的には
HTMLの表示は同じような動作となり、SafariでHTMLの表示がおかしい場合はiPhone版GoogleChromeでも表示が
おかしいというケースが起こりえるという注意点があるそうです。
また、iPhoneではRendering Engineが統一されているため、いくつものブラウザを検証する必要はなく、1つの
ブラウザで検証をして問題が出るものについてはたいてい他のブラウザでも同じ問題が出るとのポイントも教えて
いただきました。
次にサイビーンズ様にて事前にご用意いただいたスマートフォンサイトをNORENのプレビューとお客様ご自身の
スマートフォンで比較してみました。
様々な種類のスマートフォンの画面を比較すると、問題なく表示できる端末とそうでない端末があり、機種ごとに
異なる事象を実際に確認することができました。お客様同士、スマートフォンの画面をお互いに見比べるシーン
では「音声が出ない」「FLASHが表示されない」など会話も弾み、機種／ブラウザごとの事象の違いをリアルに
体験でき、大変有意義な時間となりました。
NORENユーザ会では、今後も皆様に有益な情報発信をできるよう努めて参りますので、是非ご参加ください！
NORENに関する お申し込み・お問い合わせはこちら
資料請求・デモのご依頼など
