サイトの作り方。

しらぎくモバイルシステムで処理するサイトをお作りの際は、以下の点にご留意下さい。

推奨する記述法。

しらぎくモバイルシステムで取扱うｉモードサイトをお作りになる場合は、以下のいずれかを推奨致します。

コンパクトHTMLによる記述(ｉモードなどCSS非対応環境を想定した記述)。
この場合、<font color="…">要素やalign属性などは、WAP 2.0ではインラインスタイルシートに置換されます。
XHTMLベーシック/XHTMLモバイル・プロファイルによる記述(WAP 2.0などCSS対応環境を想定した記述)。
この場合、WAP 1.0以外のCSS非対応環境では、論理インライン要素に関しては予め設定ファイルで指定している表示色が、見出しについては予め設定ファイルで指定している表示色及びテキスト配置が適用されます。
  • 但し、指定が無い場合、当該要素にスタイルは適用されません。

要素・属性の扱い。

要素、属性の扱いについてはHTMLの各要素に関する制約をご覧下さい。

その他の記述上の注意点。(平成19年 3月17日)

しらぎくモバイルシステムで取扱うウェブを作成する場合は、以下の点にも注意して下さい。

文字コード
日本語でコンテンツを作る場合は、必ずシフトJISコードで記述して下さい。その他の文字コード(EUC日本語コード, JISコード及びユニコードなど)はシステム及び端末の制約に依りサポート出来ません。
半角カナ文字
半角カナ文字は問題無く利用出来ます。但し、PC及びH"リンクでは出力時に全角に変換されます。
カラーコードについて
HTMLでもインラインCSSでも、カラーコードは必ず「#XXXXXX」(「#」に続けて十六進数六桁)のフォーマットまたはW3C標準カラーコード(16色・「fucusia」など)を用いて下さい。
  • 「rgb(…)」の形のカラーコード，独自仕様のカラーコード(「pink」など)及び「#XXX」のフォーマットはサポートしておりません。
  • <style>要素及び外部ファイルのCSSには制限はありません。
サイト内部のリンクについて
サイト内部のハイパーリンクは、しらぎくモバイルシステムを通さなくても機能するようにURLを指定します(相対アドレスでの記述を推奨します)。
画像の表示方法について
画像はH"リンクでは常に前後で改行して表示されます。このため、H"リンクに合わせて画像の前後で常に改行させる場合は設定ファイル「KConfig.pl」内の$imageInline変数を設定する事で対応出来ます。
<blockquote>要素について
字下げなどの目的で<blockquote>要素を使わないで下さい。<blockquote>要素に対して、当システムは引用である事を分かり易くするテキストを追加します。title属性に引用元の題名などを記述すると、その内容を引用元として明示します。
  • ソフトバンク在来機，EZウェブWAP 1.0機及びH"リンクでは、<blockquote>要素での字下げ機能が無いため、内容となる各行の先頭に「>」を付ける事で引用と分かるようにします。
連続する改行
連続する空行は一行以内に纏められます。スクロール効果を狙った文書では問題が起こる可能性があります。

<a>要素でのリンク先に内部の画像を指定した場合。

<a>要素でのリンク先に内部の画像を指定した場合、当該画像と元のページへのリンクからなるページを生成するようにしております。

  • これは、WAP 1.0やH"リンクで画像のみを表示させる事が出来ないためです。

また、このリンクを開いた際に表示させたいタイトルを当該<a>要素のtitle属性で明示する事も出来ます。

  • 明示していない場合及びWAP 1.0の白黒端末では「画像」と言うタイトルになります。

例えば、以下の画像へのリンクを開くと「マーガレット」と言うタイトルが表示されます。

<a href="Marguerite.GIF" title="マーガレット">画像</a>

<form>要素に関する注意事項。

ソフトバンク在来機, WAP 1.0及びH"リンクには<form>要素の扱いにより処理が変わる場合があります。

  • 特に<form>要素はH"リンクでは実現出来ないため、<form>要素開始タグから終了タグまでの全コンテンツが削除されます。

ファイルサイズの制限。(平成19年 3月17日)

ファイルサイズの制限として、以下を厳守して下さい。

  • <link>要素を除いた本文が 5キロバイト未満
  • <link>要素を含めた全体で 8キロバイト未満

これは、端末制限に対応するためのものです。

  • 通常のモバイルサイトでは<link>要素を記述する事は余りないと思われますので、常に 5キロバイト未満とするようにすれば良いでしょう。
  • またPC向けに<link>要素を記述する場合は、全体で 8キロバイト未満とし、<link>要素が記述されていない状態で 5キロバイト未満とするようにすれば良いでしょう。

但し、実際に配信されるコンテンツに画像が加わった場合や制限ぎりぎりのファイルサイズのコンテンツの場合に、一部旧型端末で閲覧不能に陥る場合がありますのでご注意下さい。

サイト設置の際の注意点。

サイト設置の際には、以下の点に注意して下さい。

  • HTML文書を収めるディレクトリは必ずCGI設置サーヴァに設置して下さい。
    • CGIから相対パスでアクセスできるディレクトリにHTML文書収納ディレクトリを設置して下さい。
    • HTML文書が複数のサーヴァに跨る場合は、各サーヴァにCGIを設置してそれぞれサーヴァ単位で管理するようにして下さい。
  • 全てのHTML文書は必ず拡張子を大文字小文字の区別を含めて統一して下さい。
  • HTMLファイル名について、以下の制限がありますのでご注意下さい。
    • ファイル名の先頭が「/」または「+」で始まるファイルはアクセスできません。
    • ファイル名に「<」「>」または「|」が含まれているファイルはアクセスできません。
    • ファイル名に全角文字が含まれているファイルはアクセスできない可能性があります。

画像ファイルについて。

画像ファイルはGIF画像, JPEG画像及びPNG画像が利用出来ますが、GIF画像をご利用になる事を強く推奨します。詳しくは取扱える画像をご一読下さい。

実際にHTMLファイル内で画像をリンクする場合は、GIF画像はカラー標準サイズのGIF画像ディレクトリ内の画像を、JPEG画像は標準サイズのJPEG画像ディレクトリ内の画像を指すように記述します。要するにｉモードやWAP 2.0及びPCでならシステムを通さなくても閲覧出来るようにすれば良い訳です。

外部リンク(掲示板などを含む)について。

ｉモード向けサイトの場合、リンクした外部サイトが端末に依っては正しく表示出来ない場合もあります。このようなリンクは端末制限で表示を回避する事が出来ます。

ｉモード対応端末以外での表示を避けたい場合。
GIF画像を用いているなど、ソフトバンク在来機やH"リンクでの表示できないサイトは、そのリンクの前後にそれぞれ「<-- ionly -->」と「<-- /ionly -->」で挟む事でこれらの端末での表示を避ける事が出来ます。
  • 「<-- ionly -->」と「<-- /ionly -->」で挟んだ箇所はｉモード。WAP 1.0/2.0・エアーエッジフォン・Lモード・PDA・PCで表示されます。
H"リンクでの表示を避けたい場合。
H"リンクはHTMLの表示が出来ません。このためH"リンクに対応していないコンテンツはその前後を「<-- noh -->」と「<-- /noh -->」で挟む事でこれらの端末での表示を避ける事が出来ます。この場合、他の端末ではすべて表示されます。

検索エンジンに情報を送りたいとき。

また、ページのヘッダに「content="description"」属性を持つ<meta>要素を記述して、その要素のcontent属性値に解説文を記述した場合も、非携帯電話向けに出力されます。

さらに、<body>要素内にある要素にtitle属性で情報を附与した場合、検索エンジンのクローラにもその情報が伝達されます。

  • これらの情報の一部または全部を評価しない検索エンジンもあります。
  • この他のcontent属性値の<meta>要素で与えられる情報は出力されません。これらは無視されます。

PCでの閲覧者にPC向けページ及び関連ページを案内したい場合。

元のHTMLのヘッダに<link>を埋め込むと、PCで閲覧した場合及び検索エンジンがクロールする場合に、関連ページ一覧に編集されて文書に付与されます。

この場合、関連ページ一覧の排列は、以下の条件に従います。

  • 基本的には以下の前後関係となります。
    1. media属性が無いか、media属性値に「screen」が含まれているものを「PC向けページ」として纏めて並べます。
    2. media属性値に「handheld」か「tty」が含まれているものがその後に「モバイル向けページ」として纏められます。

    尚、各カテゴリ内の順序は、HTML文書内に現れる順序に従います。

  • 但し、以下に該当する<link>要素で一番初めに現れたものは、「本コンテンツPC版」として元の順番に関係無く一番初めに表示されます。

    また、これに該当した<link>要素は、関連ページ一覧以外にも文書の先頭に表示される情報となります。

    • media属性が無いか、media属性値に「screen」が含まれている。
    • 且つ、rel="alternate"属性が付与されている。

    尚、上記の条件を満たす<link>要素でも、二番目以降に現れたものは正規の順序に従って排列されます。

  • 以下に該当する<link>要素は排列の対象外となります。
    • rel属性もrev属性も無いもの。
    • media属性があって、且つ「screen」「handheld」「tty」のいずれも含まれないもの。
      • media="all"属性も該当しますのでご注意ください。
    • rel属性値に「stylesheet」が含まれているもの。

関連ページ集のアンカーは、以下の通りになります。

「本コンテンツPC版」扱いになるアンカー。
元のHTML文書の<title>要素の内容をアンカーとします。
その他の扱いになるアンカー。
  • 空で無いtitle属性があればその値をアンカーとします。
  • title属性が無いか、あっても空の場合は、rel属性値かrev属性値がアンカーとなります。

リンク先のアドレスは絶対アドレスで(モバイルシステム内で取扱われるリンク先は相対アドレスでも可)、href属性で指定します。

以下、記述例です。

<link rel="alternate" media="screen, projection " href="http://www.fiction.ne.jp/uso800/pc/index.html">

案内するページの内容は、特に問いません。通常は対応するPC版のページですが、PC版サイトの表紙を案内することも出来るでしょう。

サイト外のページへリンクする場合。(平成17年 8月26日)

しらぎくモバイルシステムで設定されたアドレス外へのリンクは、サイト内の画像を除いて、原則的に外部リソースと見なし、しらぎくモバイルシステムで変換されないページとなります。

これとは別に、外部のHTML文書扱いとする事も出来ます。

それには、<a>要素に「rel="external"」属性を付けます。

  • 既に<a>要素にrel属性が付いている場合は既存のrel属性値の前か後ろに「,external」を追加して下さい(例：rel="next" ⇒ rel="next,external")。
  • H"リンクで開いた場合、「rel="external"」属性を付けられた<a>要素にはアンカーが生成されません。

「rel="external"」属性のあるHTML文書へのリンクでは、例え内部文書であっても、直接当該HTML文書へリンクし、しらぎくモバイルシステムでの処理が行われなくなります。

例を以下に挙げておきます。

元のHTML
<a href="PC/index.html">PC版</a>
以下のように変更して下さい
<a href="PC/index.html" rel="external">PC版</a>

H"リンクでの回線切断機能。(平成17年10月 8日)

外部サイトの多くは、H"リンクには対応しておりません。

このため、第3.509版(平成17年10月 8日)以降では外部サイトへのアンカーについて、H"リンクではリンクしないで回線切断とする事が出来ます。

これには、<a>要素に「rel="disconnect"」属性を追加して下さい。

「rel="disconnect"」属性は他キャリアでは無視されます。

例えば、以下のアンカーはH"リンクでは回線切断のアンカーとなり、その他のサイトではhref属性で指定されたアドレスへのアンカーとなります。

<a href="http://www.uso800.ne.jp/" rel="disconnect">アンカー</a>

しらぎくモバイルシステム 運用マニュアル・記事一覧。