HP IceWall技術レポート：

PC・スマートフォンの
双方に対応するサイトの構築
コンテンツに進む

1. はじめに
スマートフォンやタブレット端末といったスマートデバイスの急速な普及を背景に、企業においてもモバイル環境から社内ITシステムにアクセスし、業務を行うモバイルワークの導入が進んでいます。その一方、企業において、スマートデバイスの業務利用を促進するためには、セキュリティ対策が大きな課題であり、これまで以上に「認証」「認可」「アクセス管理」「監査証跡」を行う統合認証基盤の重要性が増してきています。このような市況を背景としたニーズに応えるため、HP IceWall SSOでは”モバイル SSO”の実現を支援するいくつかのソリューションを提供しています。

本レポートでは、モバイル SSOのソリューションの一つとして提供されている”スマートフォン端末用HTMLテンプレート”の使用方法を簡単にご紹介すると共に、実際のWebサイトの構築で必要となる、同一サイトでPC・スマートフォンの双方に対応する方法を具体的な設定例と交えご紹介します。

2. スマートフォン端末用 HTMLテンプレート
HP IceWall SSOではスマートフォン向けに最適化した解像度とレイアウトによるHTMLテンプレートを提供しています。スマートフォン アプリケーションライクなアイコン表示が可能な「Stylish Template」、カスタマイズが容易な「Simple Template」の2種類があります。

※スマートフォン用画面テンプレートは、HP IceWall SSO製品の保守サービスをご契約のお客様が、「HP IceWallサポートページ」から無償でダウンロードすることが可能です。




2.1 スマートフォン端末用HTMLテンプレートのインストール
あらかじめ「HP IceWallサポートページ」よりスマートフォン端末用HTMLテンプレートの２つのファイルをダウンロードします。ここではダウンロードしたファイルが/tmp/配下にあることを前提にしています。
# ls /tmp
IceWall-SSO_HTML_DFW_Ver100_1_stylish_UNIX.tar.gz
IceWall-SSO_HTML_DFW_Ver100_1_simple_UNIX.tar.gz

HP IceWall SSOをインストールした、標準の状態では以下のようにPC用の画面テンプレートと、フィーチャーフォン用（いわゆるガラケー）の画面テンプレートが用意されています。
# ls /opt/icewall-sso/dfw/
cgi-bin  chtml  html

ここに、ダウンロードしたスマートフォン端末用HTMLテンプレートを展開します。 
# cd /opt/icewall-sso/
# tar zxvf /tmp/IceWall-SSO_HTML_DFW_Ver100_1_stylish_UNIX.tar.gz
# tar zxvf /tmp/IceWall-SSO_HTML_DFW_Ver100_1_simple_UNIX.tar.gz
# chown -R apache:apache dfw/shtml*

スマートフォン用画面テンプレートがインストールされたことを確認します。 
# ls /opt/icewall-sso/dfw/
cgi-bin  chtml  html  shtml_simple  shtml_stylish

2.2 スマートフォン端末用HTMLテンプレートの設定
展開したHTMLテンプレートの使用方法については、
「導入ガイド for Dynamic Menu Portal」マニュアルを参照してください。

3. PC・スマートフォンの双方に対応するWebサイトの構築
同一サイトでPC・スマートフォンの双方にWebコンテンツを提供する場合が多くあります。以降では具体的な設定例を提示しながら、HP IceWall SSOを用いてPC・スマートフォンの双方に対応するサイトの構築方法を紹介いたします。

3.1 アクセスURLとコンテンツAPサーバーのパターン
PC・スマートフォンの双方に対応するWebサイトを構築する場合、ユーザーがアクセスするURLとコンテンツを提供するサーバーそれぞれについて、PCとスマートフォン用で別々にするか同一にするかで以下のパターンが考えられます。

(1) コンテンツAPサーバーがPC用とスマートフォン用で分かれていて、それぞれユーザーからは別のURLでアクセスする。


(2) コンテンツAPサーバーがPC用とスマートフォン用で分かれていて、ユーザーからは同じURLでアクセスする。


(3) コンテンツサーバーがPC用とスマートフォン用で同じ、ユーザーからは同じURLでアクセスする。

3.2 HP IceWall SSOを導入した際のURL例
HP IceWall SSOを導入し、PC・スマートフォン対応サイトのURLを分けた場合、ユーザーから見たURLは例えば以下のようになります。TOPページでアクセスしてきた端末が、PCかスマートフォンかをチェックして、自動的に画面遷移させれば、違和感なく利用できます。

[TOPページの例]
https://www.example.com/

[PC用URLの例]
https://www.example.com/pc/dfw/portal/

[スマートフォン用URLの例]
https://www.example.com/mobile/dfw/portal/

PC・スマートフォン対応サイトのURLを同一にした場合、ユーザーから見たURLは例えば以下のようになります。

[PC・スマートフォン共通URLの例]
https://www.example.com/fw/dfw/portal/

3.3 HP IceWall SSOの設定パターン
前述の3つのパターンを実現するHP IceWall SSO設定の概要を以下の表にまとめます。

パターン URL APサーバー フォワーダ
インスタンス 		フォワーダ設定ファイル 解決策
(1) 別々 別々 複数 複数 Apacheにてフォワーダのインスタンスを分ける
(2) 同一 別々 1 複数 Apacheにてフォワーダの設定ファイルを分ける
(3-1) 同一 同一 1 複数 Apacheにてフォワーダの設定ファイルを分ける
(3-2) 同一 同一 1 1 フォワーダにてHTMLテンプレートを動的に生成する

3.4 各方式でのHP IceWall SSOの設定方法
(1) コンテンツAPサーバーが分かれていて、URLも分かれる設定方法
PC用とスマートフォン用で、コンテンツを提供するAPサーバーが分かれていて、ユーザーからアクセスするURLも分かれる場合には、フォワーダのインスタンスを複数立てることで対応します。

[利用例]

①ユーザーはTOPページにアクセスします。
https://www.example.com/

②TOPページのApache設定により、User-AgentにiPhoneまたはAndroidの文字が含まれる場合、以下に遷移します。
https://www.example.com/mobile/dfw/portal/

③含まれない場合、以下に遷移します。
https://www.example.com/pc/dfw/portal/

このようにHP IceWall SSOフォワーダを構成する際には、TOPページのApacheにて以下のように設定します。

User-AgentによるURL書き換えを設定（/etc/httpd/conf/httpd.conf） 
<Directory "/var/www/html">
    RewriteEngine On

    RewriteCond %{HTTP_USER_AGENT} iPhone [NC]
    RewriteRule ^$ https://www.example.com/mobile/dfw/portal/ [R,L]

    RewriteCond %{HTTP_USER_AGENT} Android [NC]
    RewriteRule ^$ https://www.example.com/mobile/dfw/portal/ [R,L]

    RewriteRule ^$ https://www.example.com/pc/dfw/portal/ [R,L]
</Directory>
※上記はあくまで設定例です。実際に運用する場合には、例えばiPadなどのタブレット端末は、PC用コンテンツを表示するなど検討が必要です。

HP IceWall SSOフォワーダのインスタンスを複数立てます。 
# cd /opt/
# mkdir pc
# mkdir mobile
# cp -pr icewall-sso pc/
# cp -pr icewall-sso mobile/

オリジナルのインスタンスの他に２つのインスタンスが作成されたことを確認します。
# ls /opt/
icewall-sso  mobile  pc
※オリジナルのインスタンス（icewall-sso）は認証モジュール、ライブラリ参照用などのために、そのままにしています。

HP IceWall SSOフォワーダを２つ設定（/etc/httpd/conf/httpd.conf） 
Alias /img/ "/opt/pc/icewall-sso/dfw/html/image/"
Alias /cont/ "/opt/mobile/icewall-sso/dfw/shtml_stylish/contents/"
SetEnv LD_LIBRARY_PATH "/opt/icewall-sso/lib/dfw:/usr/lib64"


ScriptAlias /pc/ "/opt/pc/icewall-sso/dfw/cgi-bin/"
<Directory "/opt/pc/icewall-sso/dfw/cgi-bin">
AllowOverride All
Options ExecCGI
SetHandler cgi-script
Order allow,deny
Allow from all
</Directory>


ScriptAlias /mobile/ "/opt/mobile/icewall-sso/dfw/cgi-bin/"
<Directory "/opt/mobile/icewall-sso/dfw/cgi-bin">
AllowOverride All
Options ExecCGI
SetHandler cgi-script
Order allow,deny
Allow from all
</Directory>
※各HP IceWall SSOフォワーダ設定ファイルはインストール先を変更したため、参照先ファイルパスの変更が必要になります。

PC用フォワーダ設定（/opt/pc/icewall-sso/dfw/cgi-bin/dfw.conf） 
#------------------------------------------------------------------------------
#  [ Template HTML File Info ]
#    DOCS          : template HTML configuration file location
#                    (default: /opt/icewall-sso/dfw/cgi-bin/html.conf)
#    LOCATIONURL   : location allowed for redirection in the template HTML
#    LOCATIONRETRY : retries allowed for redirection to the template HTML page
#                    (default: 1)
#    HTML_CHARSET  : character set for the template HTML
#------------------------------------------------------------------------------
DOCS=/opt/pc/icewall-sso/dfw/cgi-bin/html.conf

PC用HTMLテンプレート設定（/opt/pc/icewall-sso/dfw/cgi-bin/html.conf） 
#------------------------------------------------------------------------------
#  IceWall SSO 10.0 Configuration File for Document Forwarder.
#  $Workfile: html.conf $ $Revision: 7 $ $Date: 10/02/25 18:54 $
#------------------------------------------------------------------------------
#------------------------------------------------------------------------------
#  [ HTML Files Info ]
#    XXXXXX=file://[Local HTML File Location][,[status code],[status message]]
#           http://[host:port][[File Location],[status code],[status message]]
#           https://[host:port][[File Location],[status code],[status message]]
#------------------------------------------------------------------------------
LOGIN_UID=file:///opt/pc/icewall-sso/dfw/html/login.html
LOGIN_CERT=file:///opt/pc/icewall-sso/dfw/html/login_cert.html
（省略）

スマートフォン用フォワーダ設定（/opt/mobile/icewall-sso/dfw/cgi-bin/dfw.conf） 
#------------------------------------------------------------------------------
#  [ Template HTML File Info ]
#    DOCS          : template HTML configuration file location
#                    (default: /opt/icewall-sso/dfw/cgi-bin/html.conf)
#    LOCATIONURL   : location allowed for redirection in the template HTML
#    LOCATIONRETRY : retries allowed for redirection to the template HTML page
#                    (default: 1)
#    HTML_CHARSET  : character set for the template HTML
#------------------------------------------------------------------------------
DOCS=/opt/mobile/icewall-sso/dfw/cgi-bin/html.conf

スマートフォン用HTMLテンプレート設定（/opt/mobile/icewall-sso/dfw/cgi-bin/html.conf） 
#------------------------------------------------------------------------------
#  IceWall SSO 10.0 Configuration File for Document Forwarder.
#  $Workfile: html.conf $ $Revision: 7 $ $Date: 10/02/25 18:54 $
#------------------------------------------------------------------------------
#------------------------------------------------------------------------------
#  [ HTML Files Info ]
#    XXXXXX=file://[Local HTML File Location][,[status code],[status message]]
#           http://[host:port][[File Location],[status code],[status message]]
#           https://[host:port][[File Location],[status code],[status message]]
#------------------------------------------------------------------------------
LOGIN_UID=file:///opt/mobile/icewall-sso/dfw/shtml_stylish/login.html
LOGIN_CERT=file:///opt/mobile/icewall-sso/dfw/shtml_stylish/login_cert.html
（省略）
※同様に他の設定についても、参照先ファイル名の変更が必要です。


(2) コンテンツAPサーバーが分かれていて、URLが同一の設定方法
PC用とスマートフォン用で、バックエンドのコンテンツAPサーバーが分かれていて、ユーザーがアクセスするURLを１つにする場合、フォワーダのインスタンスは１つで実現できます。

[利用例]

①ユーザーはTOPページにアクセスします。
https://www.example.com/fw/dfw/portal/

②フォワーダのApache設定によりUser-AgentにiPhoneまたはAndroidの文字が含まれる場合、dfw_mobile.confを読み込みます。

③含まれない場合はdfw.confを読み込みます。

このようにHP IceWall SSOフォワーダを構成する際には、フォワーダのApacheにて以下のように設定してください。なお、PC用フォワーダ設定は通常通りとなります。


User-Agentによるフォワーダ設定ファイルの書き換えを設定（/etc/httpd/conf/httpd.conf） 
<Directory "/opt/icewall-sso/dfw/cgi-bin">
	SetEnvIf User-Agent ".*iPhone" IWDFWCONFIG=/opt/icewall-sso/dfw/cgi-b
in/dfw_mobile.conf
	SetEnvIf User-Agent ".*Android" IWDFWCONFIG=/opt/icewall-sso/dfw/cgi-b
in/dfw_mobile.conf
	SetEnv LD_LIBRARY_PATH "/opt/icewall-sso/lib/dfw:/usr/lib64"
	AllowOverride All
	Options ExecCGI
	SetHandler cgi-script
	Order allow,deny
	Allow from all
</Directory>

スマートフォン用フォワーダ設定ファイルを設定（/opt/icewall-sso/dfw/cgi-bin/dfw_mobile.conf）
#------------------------------------------------------------------------------
#  [ Template HTML File Info ]
#    DOCS          : template HTML configuration file location
#                    (default: /opt/icewall-sso/dfw/cgi-bin/html.conf)
#    LOCATIONURL   : location allowed for redirection in the template HTML
#    LOCATIONRETRY : retries allowed for redirection to the template HTML page
#                    (default: 1)
#    HTML_CHARSET  : character set for the template HTML
#------------------------------------------------------------------------------
DOCS=/opt/icewall-sso/dfw/cgi-bin/html_mobile.conf
#LOCATIONURL=welcome.hp.com:80
#LOCATIONRETRY=3
HTML_CHARSET=Shift_JIS

スマートフォン用HTMLテンプレート設定（/opt/icewall-sso/dfw/cgi-bin/html_mobile.conf） 
#------------------------------------------------------------------------------
#  IceWall SSO 10.0 Configuration File for Document Forwarder.
#  $Workfile: html.conf $ $Revision: 7 $ $Date: 10/02/25 18:54 $
#------------------------------------------------------------------------------
#------------------------------------------------------------------------------
#  [ HTML Files Info ]
#    XXXXXX=file://[Local HTML File Location][,[status code],[status message]]
#           http://[host:port][[File Location],[status code],[status message]]
#           https://[host:port][[File Location],[status code],[status message]]
#------------------------------------------------------------------------------
LOGIN_UID=file:///opt /icewall-sso/dfw/shtml_stylish/login.html
LOGIN_CERT=file:///opt /icewall-sso/dfw/shtml_stylish/login_cert.html
（省略）


(3-1) コンテンツサーバーが同一、URLも同一の設定方法

前述(2)の方法で、フォワーダ設定ファイルを複数設定すれば実現することができます。


(3-2) コンテンツサーバーが同一、URLも同一の設定方法
コンテンツを提供するコンテンツAPサーバーが動的に画面生成する場合、フォワーダのインスタンスは１つ、設定ファイルも１つで実現できます。

HP IceWall SSO PC・スマートフォン用コンテンツAPサーバー

[利用例]

①ユーザーはTOPページにアクセスします。
https://www.example.com/fw/dfw/portal/

②フォワーダは画面テンプレートをHTTPプロトコルで動的に取得します。
このようにHP IceWall SSOを構成する際には、フォワーダのApache設定は通常通りとなります。
また、通常画面テンプレートは静的に決定しますが、HTTPプロトコルで動的に取得するよう変更します。使い方はlogin.plを、以下のURLでアクセスできるように設置します。
http://localhost/cgi-bin/login.pl


HTMLテンプレート設定（/opt/ icewall-sso/dfw/cgi-bin/html.conf） 
#------------------------------------------------------------------------------
#  [ HTML Files Info ]
#    XXXXXX=file://[Local HTML File Location][,[status code],[status message]]
#           http://[host:port][[File Location],[status code],[status message]]
#           https://[host:port][[File Location],[status code],[status message]]
#------------------------------------------------------------------------------
LOGIN_UID=http://localhost/cgi-bin/login.pl
(省略)

login.pl 
#!/usr/bin/perl
print "Content-type: text/html; charset=Shift_JIS\n\n";
$style="html";
foreach $var (keys(%ENV)) {
        $name = $var;
        $value = $ENV{$var};
        if ( ($name eq "HTTP_USER_AGENT") && (-1 < index ($value, "iPhone") || -1 < index
($value, "Android")) ) {
                $style="shtml_stylish";
                break;
        }
}
open(HTMLFILE, "< /opt/icewall-sso/dfw/$style/login.html");
while (my $line = <HTMLFILE>){
print "$line";
}
※上記はあくまで設定例です。実際に運用する場合にはCGIの配置場所や、パスワード変更画面、ログアウト画面、エラー画面などについても検討が必要です。

4. まとめ
本技術レポートでは、PCとスマートフォンの両方に対応するサイトを構成する際の設定例を説明しました。　スマートフォン用HTMLテンプレートと合わせて、モバイル対応のWebサイトを構築する際の参考になればと思います。また、この方法は、言語によってコンテンツを切り替える多国語サイトといったケースなどにも応用が可能です。

5. 参考URL

≫ HP IceWall SSO モバイルソリューション
2013.5.15  日本ヒューレット・パッカード テクノロジーコンサルティング統括本部　テクニカルコンサルタント　並木岳夫