ちょっとだけ容量オーバーした携帯コンテンツを容量内に収める方法

PC向けサイト携帯向けサイト(コンテンツ)の違いは、PCに比べ携帯コンテンツにデザインや配置などの自由度が少ないことが挙げられます。携帯端末の画面のサイズはPCと比べて小さいので、一度に表示できる情報も極端に少なくなります。また、ナビゲーションも自由度が少なくなります。

もうひとつ重要な違いは、一度に取り込める情報量に制限があることです。PC向けサイトではあまり意識されませんが、携帯端末は非常に厳しい容量制限があります。最近の携帯端末は大容量化し、かなり余裕ができでいます。が、一番古いiモードHTML1.0では、1ページの容量は5kBytes以下である必要があります。この5kBytesというのは、HTML文章の容量だけではなく、同時に読み込まれる画像も含めた総量のことなのです。ちょっと頑張ると、すぐに容量オーバーしてしまいます。

スポンサーリンク

携帯端末向けサイトを製作するのに、一々携帯端末で確認していてはパケット代が勿体ない(もっとも、パケット定額制が普及してきているので、杞憂ではありますが…)のと、作業効率が落ちる(PC上でコンテンツを編集し、それをホームページスペースにアップロードし、携帯端末で確認という手間がある)ので、PCローカルで確認できる方が効率は良いと思われます。ですので、大抵 PC上で、携帯端末用のサイトの表示を確認できるツールを使って携帯向けサイトを作成することになると思います。

PC上で、携帯端末用のサイトの表示を確認できるツール、特にiモードHTMLシミュレータを使っていて気がつくことがあります。3kBytesを越えると「警告」メッセージが表示されます。「可能であれば3kBytes以下に抑えて下さい」ということなのでしょう。おそらく、パケット代やインフラ(通信帯域、バックボーンのトラフィック等)にしわ寄せがいかないようにとの配慮が必要だと(だったと)いうことかも知れません。

とにかく、なるべくコンテンツの容量をコンパクトにするのが望ましいということです。

容量オーバーした時は(一般的な方法)

容量オーバーしてしまった時はどうしたら良いのでしょう。以下に一般的な対処方法を示します。

  • 画像などの容量を小さくする。

    画像などのコンテンツがある場合は、画質を落とす等して画像の容量を小さくしてみて下さい。また、簡単な絵(お絵描きツールなどで書いた画像)などは、画像フォーマット(形式)はjpegではなくgifの方がコンパクトになる場合もありますので、適切なフォーマットを選ぶようにしたいものです。写真の場合はjepgのほうが良いのですが、保存時に(設定で)画質を落とすなどして容量を小さくしてみてください。

    画像を編集するには、Adobe Photoshop Elementsが良く使われています。個人的には、Corel DRAW Graphics Suite X3(13) 通常版 / Windowsもお勧めです。フリーのソフトでは、GIMPがあります。GIMPについては検索すると色々情報が得られます。

  • コンテンツを分割する

    文章中心のコンテンツの場合、適当な箇所でコンテンツを分割し、1ページを2ページにしてしまえば、おおよそ半分の容量になります。

  • 無駄なタグ(未対応のタグ)を外す

    PC用のサイトを携帯向けサイトへ作り変えている場合によくやってしまうのが、携帯向け端末に対応しないタグを使用してしまうことです。 携帯端末シミュレーターのエラーログを良く確認して、未対応のタグがあった場合は削除すれば良いと思います。

姑息(?)な手段

あまりコンテンツを弄りたくない場合や、あとちょっとで容量が収まると言うような場合は、かなり姑息(?)ではありますが、以下のような方法があります。「姑息」と言いましたが、決して不正などではなく、むしろ閲覧者の立場に立った方法と言えるでしょう。うまく行えば、コンテンツの質を落とさずにコンテンツ容量を削減することが可能なのですから…

  • 全角カタカナを半角カタカナへ置き換える

    iモードHTMLはShift-JISコードです。半角カタカナが使用可能です。全角カタカナは1文字2Bytesですが半角カタカナは1文字1Byteです。つまり、全角カタカナを半角カタカナに置き換えると、その部分は容量が半分になります。ただし、濁点はそれ自体が1Byteとカウントされますので、濁点付きのカナは2Bytesになってしまいます。濁点付きばかりのカタカナには効果がないのが残念です。また、見栄えも変化してしまうということも念頭に置いておくべきです。

    この方法は姑息でもなんでもありません。一般的な方法です。

  • アルファベットや数字は全て半角

    これは半角カタカナと全く同じ原理です。半角カタカナを採用しておいて、アルファベットや数字を全角にしていては意味がありません。徹底して容量を減らしましょう。勿論、括弧なども半角にできるものは全て半角にします。

  • HTMLソース上の「コメント」を削除する

    HTMLを手作業で編集している場合、コメントを入れてHTMLを見やすくすることが行われます。コンテンツ製作者側にとっては多少意味があるかも知れませんが、コメントはコンテンツに全く影響しないので、閲覧者にとっては全くの無駄です。どうせ5kBytes以下の小さなHTMLソースですので、極端にHTMLソースの見やすさが損なわれる訳ではありません。削除してしまいましょう。

  • 無駄なダグを外す

    一部重複してしまいますが、無駄なタグを削除するのは重要です。特に、iモードHTMLでは、通常のHTMLでは省略できないとされているタグを省略できる場合があります。例えば、liタグは閉じる必要がありません。「必要ないものは徹底して省く」というのが携帯端末向けHTMLの基本方針のようです。

  • HTMLソースの、無駄な空白を削除する

    HTMLを手作業で編集している場合、入れ子の関係を見やすくするために「字下げ(インデント)」をおこなったりします。こういった空白(スペース)は、実際の表示には反映されないので、閲覧者からすれば無駄です。容量オーバーしているのであれば、HTMLの見やすさを犠牲にしてでも削除してしまうという方針です。

  • HTMLソースの、不必要な改行コードを削除

    これは最後の手段ですが、HTMLソースの見やすさのために挿入しているHTMLファイルの改行コードを削除するものです(実際のコンテンツ表示に反映される改行のことではありません)。

    例えば、







    のようになっているHTMLソースを、



    のように変更するということです。HTMLソースの見やすさは著しく損なわれますが、確実にコンテンツの容量を削減することが可能です。例えば、元々30行あったHTMLソースの改行を全て削除すれば、29Bytesの容量削減になります(念のため、最終行の改行コードは残しておく方がよいでしょう)。

この他にも方法はあるかも知れませんが、この程度で十分でしょう。うまく行えば、コンテンツの質を落とさずに容量を削減できると思います。

残念ですが、ブログの場合、なかなかこの手の方法を実行するのは難しいと思います(携帯端末向け専用ブログなら可能かも知れませんが…)。

関連記事

参考

iモード(i-mode)、Openwave SDKは各社の商標または登録商標です。

このエントリーをはてなブックマークに追加
[`yahoo` not found]
Facebook にシェア
[`yahoo` not found]
[`livedoor` not found]

スポンサーリンク


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*