ケータイ互 換 はもうあたりまえ

マルチデバイス対応
ウェブ変換ソフトの実力

Illust :Tojimbara Norihisa

PDA や複数キャリアの携帯電話などインターネット端末が多様化するなか、コンテンツを配信する側はさまざまなデバイスに対応したサイト構築が求められている。ここでは、それに対応すべく登場
徳丸 浩
したウェブコンテンツ変換サービスについて解説しよう。

多様化するインターネットデバイス
携帯電話を筆頭にインターネットに接続できるデバイスが増加している現在、マルチデバイス向けのコンテンツが求められている。

接続場所別、利用機器別日本国内のインターネット利用者推移

1997年〜 2001年

4000
携帯電話/PHSのみの利用者
勤務先、学校からの利用者
3000

自宅、勤務先・学校の機器両方からの利用者
自宅の機器からの利用者2000急増する携帯電話からのインターネットユーザー

1000

1999年2月22日のiモード開始に始まった
携帯電話からのインターネット接続サービス0

1997年 1997年 1998年 1998年 1998年 1998年 1999年 1999年 1999年 2000年 2000年 2000年 2001年 2001年 2001年
2月
12月
2月
6月
8月
12月
2月6月
12月
2月
6月
12月
2月
6月
12月
©Access Media International,2001

は、その後爆発的にユーザー数を伸ばしており、現在ではi モード、EZweb、J-スカイのの地位を築いている。

ら」と答えている今日、この傾向は続いていく可能性が高い。

3 つのサービスを合わせたユーザー数は1800

これまでも携帯電話は画面サイズの拡大か万人を超えた。また、「携帯やPHS からしから、液晶のカラー化、高画質化、Java アプ

また携帯電話だけでなく、ザウルスやポケインターネットに接続しない」という人も650

リケーションの搭載まで、さまざまなインターットPC、パームなどの端末を利用したブラウ万人を超えている。携帯電話のインターネッネット端末としての機能を付加してきている。

ジングも増加しており、「インターネット端ト接続サービスはすでにパソコンの代替品で携帯電話端末を買い替えた人の半数が、その末＝パソコン」という発想からの脱却が急速はなく、1つのインターネット接続端末として理由を「インターネット接続機能がほしいかに進んできている。

214 INTERNET magazine 2001/10

インターネットマガジン／株式会社インプレスR&D

Java（ジャバ）：サン・マイクロシステムズ社の開発したプログラミング言語。ネットワーク環境で利用されることを前提とし、Javaで開発されたソフトウェアは特定のOSに依存せず、基本的にどのようなプラットフォーム上でも動作することになっている。
©1994-2007 Impress R&D

各デバイスの規格一覧
パソコン

EZwebi モード

J-スカイ

タグ言語

HTML

HDML

CompactHTML

MML

H"リンク
Open

サイズ上限なし

1.4k バイト

5k バイト6k バイト5k バイト

画像形式

GIF/JPEG

BMP/PNGGIF

PNG/JPEGBMP

CGIによる機種判定と振り分け

激しい競争のなかで失われた互換性

マルチデバイスの実現に向けての模索

インターネットユーザー拡大の一方で、キ増える一方である携帯電話からのアクセスがある」という問題を解決するための方法とャリア間に発生した激しいサービス競争と、をビジネスチャンスと捉えているポータルサイして、ホームページのトップページに機種判定

それによる急成長とによって、大きな弊害もトや検索サイトなどでは、以下のような方法

用のCGI を置き、これがデバイスごとのペー出てきている。キャリアがそれぞれ規格を打でデバイスごとのコンテンツを配信している。

ジに飛ばすリダイレクトという方法が出てき次に「ユーザーがデバイスを意識する必要ち出し、そして新しい機能を追加してきたたた。これによってシングルURL が実現された

めに、キャリアや端末によってコンテンツの互ディレクトリーによる分類が、この方法でもサイト運営者側はデバイス換性が失われてしまったのである。右上の表ごとにコンテンツを作成する必要があり、そを見てもらえばわかるが、タグ言語から表示

まず主流になったのは、デバイスごとにホー可能な画像、ファイルサイズまでバラバラとムページのディレクトリーを分けるという方法なっている。

だ。たとえばi モードに対して「/i」といったかつてパソコンのブラウザー市場をめぐっての負担を軽減するにいたらなかった。
●図2

ディレクトリーを用意する方法である。

CGIによるソース変換

マイクロソフトのインターネットエクスプロー

この方法の問題点は、キャリアごとにURL

ラとネットスケープのネットスケープナビゲーが変わるためユーザーが自分のデバイスを意識そこで出てきたのが、CGI 自身がデバイスターとが争った際に、それぞれが独自機能をして接続しなければならないのと、サイト運営ごとにソースを書き出す方式である。この方追加したためクロスブラウザーのコンテンツ作

者側がコンテンツを提供する際にデバイスの法だと1 つのソースファイルからデバイスごと成が難しくなったが、携帯電話ではそれ以上数だけディレクトリーを用意する必要があるに適切なソースコードを出せるため、コンテンの困難が発生している。

ため負担が大きいということである。

ツの共有ができる。
●図3

●図1

図1

図3

デバイスごとに別のURLのファイルにアクセス

同じファイルにアクセス

携帯電話

パソコン

PDA

図2

同じURLからデバイスごとに違うファイルにアクセス

CGI

CGI

携帯電話
携帯電話

パソコン

パソコン

PDA

PDA

インターネットマガジン／株式会社インプレスR&D

ディレクトリー：コンピュータの世界で、ディスクなどにあるファイルを管理するための仕組み。ツリー構造をしたディレクトリーによってファイルが階層的に管理されている。

©1994-2007 Impress R&D

INTERNET magazine 2001/10215

ケータイ PHS 完全対応 OpenKSP の登場

ソフトウェアの 収録 先
+CD-ROM Å Win→ OpenkspCGIでソース変換というと難しいように聞こえるかもしれないが、すでに無料で使える個人向けのソフトも出てきている。ここでは OpenKSP を例にマルチデバイス対応コンテンツの作り方を紹介しよう。てきたデバイスに対してソースを最適化して配ただし、OpenKSPのCGIはC++で記述さ信するというものだ。もしEZwebのカラー液れているため、サーバーはLinuxもしくはウィ

晶端末からのアクセスがあれば、HDML にコンドウズNTでバイナリーCGIが動作する環境

ンバートしたうえでファイルサイズが1.2K バでなくてはならない。まずは自分のサーバーをOpenKSP（Open Kyocera Server Pages）イト以内になるように分割する。画像があれ確かめておこう。

は京セラコミュニケーションズが販売しているば、その部分のソースを書き直して同名のマルチデバイスツール「μ-スクリプトPro」

png ファイルを配信する。このようにKSP フの簡易版だ。データベースとの連携やキャリァイルを1回作ってしまえば、あらゆるデバイアによる料金回収代行などのサービスは受けスに対して同じコンテンツを提供できる。

CGIを利用したソース変換られないが、マルチデバイス変換サービスを実感するには十分の機能が備わっている。

ソース変換のポイント

CGIや独自規格などというと難しそうだが、プログラミングの必要がなく、KSP ファイル

それではOpenKSP が行うデバイスごとの基本的な仕組みは、サーバーにCGIを設置もOpenKSP に付属するツールでHTML から最適化とは具体的に何かを解説していく。

してKSP という独自の拡張 HTML で記述しコンバートするだけで良いため、KSP 環境のKSP を使ったマルチデバイスのサイトをデザたファイルを置き、そのファイルにアクセスし構築はさほど難しくはない。

インする際の参考にしてもらいたい。

各デバイスにコンテンツを配信するまで② アップロード

① KSPファイルを生成
KSP

HTML

KSP
③ CGIによってソースコードを変換して配信
CGI
大きなファイルだと自動的にファイルを分割する。下にあるのは分割したファイルへのリンクボタン。

MML

216 INTERNET magazine 2001/10

WAPHTML

インターネットマガジン／株式会社インプレスR&D

CGI（シー・ジー・アイ／ Common Gateway Interface）： WWW サーバーで、外部プログラムを起動して、その結果をWWW クライアント（ブラウザー）に返す仕組み。ユーザーのリクエストによってウェブページの表示内容を変えたり、ユーザーの入力したフォームのデータをサーバー側へ読み込んだりできる。
©1994-2007 Impress R&D現在時刻が表示されているが、これはサーバーサイドのスクリプト実行結果だ。

同じURLだが、違う画像を表示している。

ページの分割定しておくと、i モードからのアクセスに対し込み方法は、マイクロソフトのASP（Activeては同ファイル名のGIF データを、J-フォン

Server Pages） や サ ン の JSP（ Java

先の表のとおり、携帯電話では一度に受信に対しては同ファイル名のPNG データを指定Server Pages）と同じように「<%」「%>」できるファイルサイズが制限されている。特にするタグに書き換える。そのため、あらかじで囲むだけだ。

EZweb 端末では、画像などを含めて1.2K バ

め同名のGIF データをすべてi モード端末の画イト以内に収める必要がある。これはパソコ面に収まる大きさで準備しておけば、パソコンなどファイルサイズに制限のないデバイスかンに対しては大きなJPGの画像を、iモード端ら見るとかなり小さなサイズで、これに合わせ末に対しては小さなGIF の画像を送れる。どウェブページではページごとに処理が完結てファイルを分割していくとパソコンユーザーのデバイスにどの形式のデータを配信するかはするため、ページをまたいで情報を保持するにとって見にくい構成になってしまう。

219 ページの表を参考にしてほしい。

ことが難しい。そのため、ショッピングペー
ジバスケットのように処理を次のページに持そこでOpenKSP では、ファイルサイズがデバイスに適切なサイズを超えているとこれをセッション管理

スクリプトの実行ち込む必要のあるサイトでは、クッキーを使うことが多い。しかし、携帯電話のようなデ分割して送る機能がある。そのため、ファイサーバーサイドのスクリプトをウェブコンテバイスではクッキーが使えないこともあるた

ンツ作成者には馴染みの深いJavaScript でめ、OpenKSP では別の方法でセッション管記述できる。右上にあるPC と携帯電話の画理を行っている。具体的には、コンテンツに面にはそれぞれ時刻が表示されているが、こアクセスしているユーザーごとにセッション変れはスクリプトの結果を配信したものだ。こ数という一種の不揮発性メモリーのような変画像は画面の大きさとともにデータがバラの機能を使えば、掲示板のようなインタラク数を与え、ページで代入した変数値を別のペバラなため、デバイスごとの違いがもっとも出ティブなコンテンツの作成も可能だ。CGI でージで参照できるようにしているのだ。

やすい。そこでOpenKSP ではデバイスごとよく使われるPerl と比べてもパーミションのこれと先に挙げたスクリプト機能とを合わに適切な画像を選択して配信する方法をとっ設定が必要なく、HTML ソースの間にスクリせることで、個人サイトにとどまらず、高機ている。

プトを埋め込むだけでできるため、比較的簡能が要求されるEC を目的としたビジネスサ単にできるだろう。ちなみにスクリプトの埋めイトの構築もできる。

ルサイズを気にせずに作成してもケータイでも見られる。

画像の切り替え

たとえば、<IMG>タグでJPGのデータを指インターネットマガジン／株式会社インプレスR&DASP（エー・エス・ピー／ Active Server Pages）：サーバー上で動作するサーバーサイドの処理環境。HTML、スクリプト、および再利用可能なActiveXサーバー コンポーネントを組み合わせて構築する。スクリプトをHTMLに埋め込むことで、アクティブなコンテンツを提供できる。
©1994-2007 Impress R&D

INTERNET magazine 2001/10

217

KSPファイルコンテンツを公開するまでKSPStudioを使ってKSPファイルを作るている「bin」、ksp に関する資料が入っている「d o c 」、サンプルファイルが入ってる「sample」と4 つのフォルダーがある。

サーバー側 の環 境 が整 ったところで、それではOpenKSP を使ったマルチデバイスコンテンツを作成してみよう。

OpenKSPをサーバーに設置する

KSPStudio を使ってKSP ファイルを作る。
KSP ファイルはテキストのため、テキストエディターでも作成できるのだが、HTML から次にバイナリーファイルをサーバーにアップOpenKSPを解凍するロードする。アップロードするファイルとそれのコンバートができるKSPStudio を使ったほうが手軽だ。

まずはOpenKSP を解凍しよう。付属CD-のディレクトリー構造は下左図のとおりだ。サ

まずHTML でファイルを作って、コンバーROM の [ A ] Win → OpenKSP に あ るーバーがウィンドウズかLinux かによってアットしよう。コンバート方法はKSPStudioを起

openkspall1003.exe を実行すればよい。

プロードするファイルも、ディレクトリー構造

動してメニューバーの「ファイル」にある「開も異なる。自分のサーバーを調べてから設置

く」からHTML を読み込む。すると読み込ましよう。

れたHTMLソースが右側に表示されるはずだ。

解凍後のopenkspall1003フォルダーには、サーバーに設置するバイナリーファイルが入っバイナリーファイルのディレクトリー構造

KSPStudioによるKSPファイルのコンバート

Linuxの場合/home/user

cgi temp
cgi-bininstall.ksp

sessionksp.cnf

ksp.cgi

HTMLファイルを開いているところ。これをKSPファイルにコンバートする。

ウィンドウズの場合
C:￥inetpub ￥ wwwroot

cgi tempbininstall.ksp

sessionksp.cnf

ksp.exe
cgiparts.dll
tagparts.dll
kspparse.dll
kspmojnoper.dll
csessionfile.dll
win.dll
KSPファイルにコンバートした結果。

218 INTERNET magazine 2001/10

インターネットマガジン／株式会社インプレスR&D

バイナリーファイル：コンピュータが実際に実行したり参照したりするファイルのこと。任意の2進数で記述される。対義語はテキストファイル。

©1994-2007 Impress R&D

<KSP NAME="オケゲムの部屋"><P KEY=R2> オケゲムのホームページへようこそ </P>
<P KEY=R3> 現在時刻は 00:00:00 です。</P><P KEY=R4> メニュー </P>
<A KEY=R5 HREF="favorite.ksp"> 好きなもの</A><A KEY=R6 HREF="family.ksp"> 家族 </A>
<A KEY=R7 HREF="bookmark.ksp"> お勧めページ</A><A KEY=R8 HREF="bbs.ksp"> 掲示板 </A>
<A KEY=R9
HREF="http://www.openksp.org/index.ksp">
このサイトは OpenKSP で記述されています。</A></KSP><KSP>〜 </KSP>
ここがKSP部だ。それぞれ変数であるR2、R3などに代入をしている。

<!-- FILTER HTML PC -->FILTER部 。デバイスごとに変数単位で変化を加える場合は、ここで行う。変数名を記述する際は「$」で囲む必要がある。
ちなみにここでは「パソコンで見る場合」について記述している。

<!--FILTER HTML PC -->$R4$=<CENTER>$R4$</CENTER>

それぞれのデバイスに配信する画像ファイル
サービス名<!--StyleSheet HTML--><HTML><HEAD><TITLE>$KSP.NAME$</TITLE></HEAD><BODY>$R2$<BR>$R3$<BR><BR>$R4$<UL><LI><A HREF=$R5.HREF$>$R5$</A><LI><A HREF=$R6.HREF$>$R6$</A><LI><A HREF=$R7.HREF$>$R7$</A><LI><A HREF=$R8.HREF$>$R8$</A>
</UL>
<HR>
<IMG SRC="/img/oksp.gif" ALT="Powered by
OpenKSP"><BR><A HREF=$R9.HREF$>$R9$</A></BODY></HTML><!-- StyleSheet HTML -->STYLESHEET部 。 FILTER では一部の変数を変更していたが、 STYLESHEET部
ではソース全体の構成を書き示す。ここでは HTML で配信される際のことを書いている。

画像識別子

パソコン

○○.jpgi モード（カラー）○○.gifi モード（モノクロ）○○.gif

Ezweb（カラー）○○.pngEzweb（モノクロ）○○ 2.bmp

J-SKY○○.pngH"LINK（カラー）○○.bmpH"LINK（モノクロ）○○ 2.bmp

次に「HTML」のなかの「変換」を押せば、てきたデバイスごとに<IMG> タグを書き換えのため、同名でデバイスごとの画像を作成し自動的にKSP ファイルに変換される。

ることで対 応 している。 たとえば S R C =て同じフォルダーに置いておくことで、デバイ"IMAGE.JPG"と指定しておくと、i モードかスごとに最適な画像を送れる。ちなみにどのらの接 続 に対 してはソースを S R C =デバイスからのアクセスがに対して、どの拡張"IMAGE.GIF"と拡張子のみを書き換える。そ子に書き換えるかは上の表のとおりだ。

KSPファイルを編集する
KSP ファイルはデータやページ遷移を定義する

KSP部、KSP で定義されたデータを一部変更する FILTER 部 、応答の形式をカスタマイズする STYLESHEET 部の3つで構成されている。この FILTER部

やSTYLESHEET 部

コレはできない!

を変更することで、デそれでは、一方でKSPではできないこバイスごとに違った表示ができる。
ちなみにKSPStudio でKSP ファイルを作
成 すると < I M G > タグがパソコン用 のSTYLESHEET 部

注意

際に気を付けてもらいたい。

かのデバイスでは画像表示がなくなる。どのースを書き直さなければならない。

ケータイ用画像の用意
画像はそれぞれのデバイスごとに規格が違うため、それぞれに対応した画像を配信する

画面を分割することでユーザビリティーを高めることもあるフレームだが、パソで記述されるため、ほデバイスにも画像を出すのであれば、直接ソ2.フレームとを解説しておこう。コンテンツを作る

1.クライアントサイド
スクリプト

コンのようなある程度の大きさがあるデデバイスによってはスクリプト実行環

そのためOpenKSP ではフレームに対応境がないため、マルチデバイス環境でクしていない。コンテンツをデザインする際

ライアントサイドのスクリプトは使えなは、利用者が自分と同じ環境であるとはい。サーバーサイドスクリプトで代替で限らないということを認識しておこう。

バイス以外だとかえって画像が細切れとなって見にくいなどの問題が発生する。

きるものは、そちらで実行しよう。

必要がある。そこでOpenKSP では、接続しインターネットマガジン／株式会社インプレスR&D

拡張子：ファイル名が「yougo.txt」の場合、「.」（ピリオド）のあとに表記された「txt」を拡張子という。ファイルの種類を示す文字で、おもにウィンドウズで使われる。たとえば、「txt」
はテキストファイル、「exe」や「com」は実行型ファイル、「xls」はエクセルで作成したファイルの意味を持つ。
©1994-2007 Impress R&D

INTERNET magazine 2001/10219

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバーアーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.