5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

HTMLAdvent Calendar 2018

Day 12

なんとなく、フィーチャーフォン(ガラケー)対応ウェブページを作ってみる。

Last updated at Posted at 2018-12-11

tl;dr

  • フィーチャーフォン対応(i-mode用)ウェブページを作ってみる。

作ってみる。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.3) 1.0//EN" "i-xhtml_4ja_10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">

<head>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
  <meta name="description" content="過去の天気を表示" />
  <meta name="keywords" content="過去の天気" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Cache-Control" content="no-cache" />
  <title>過去の天気</title>
</head>
<body bgcolor="#FFFFFF">
  <font size="-2">
    <div align="center">過去の天気</div>
    <div align="center">2018/12</div>

    <table width="100%">
      <tr bgcolor="99ccff">
        <td></td>
        <th><font size="-6">降水</font></th>
        <th><font size="-6">気温</font></th>
        <th><font size="-6">天気(昼)</font></th>
      </tr>
      <tr align="right">
        <td>1</td><td>0.0</td><td>12.0</td>
        <td align="left">&#xE63E;/&#xE63F;<br><font size="-2">晴一時薄曇</font></td>
      </tr>
      <tr align="right">
        <td>2</td><td>0.0</td><td>10.0</td>
        <td align="left">&#xE63F;<br><font size="-2"></font></td>
      </tr>
      <tr align="right">
        <td>3</td><td>0.0</td><td>13.2</td>
        <td align="left">&#xE63F;<br><font size="-2"></font></td>
      </tr>
      <tr align="right">
        <td>4</td><td>0.0</td><td>17.7</td>
        <td align="left">&#xE63F;-&#xE63E;<br><font size="-2">曇後晴</font></td>
      </tr>
      <tr align="right">
        <td>5</td><td>0.0</td><td>16.8</td>
        <td align="left">&#xE63F;-&#xE63E;<br><font size="-2">曇一時晴</font></td>
      </tr>
      <tr align="right">
        <td>6</td><td>18.0</td><td>10.1</td>
        <td align="left">&#xE640;-&#xE63F;<br><font size="-2">雨後曇</font></td>
      </tr>
    </table>
  </font>
</body>
</html>

なにがしたかったって?
絵文字が使いたかった。

でも、実機持ってない。

そんな時は、シミュレータを使いましょう!

iモードHTMLシミュレータ (windows) の導入

  1. iモードHTMLシミュレータII | サービス・機能 | NTTドコモ にアクセス。
  2. ページの下のほうの iモードHTMLシミュレータIIのダウンロード をクリック。
  3. 使用許諾契約書 を読んで、 同意する をクリックしてダウンロード。
  4. zip ファイルがダウンロードされるので、解凍。
  5. 中に入っている Setup.exe を実行してインストール。

インストーラのダウンロード

www.nttdocomo.co.jp_service_developer_make_content_browser_html_tool2

シミュレータ起動画面

起動画面

絵文字

html内に数値文字参照を使って、絵文字を表示することができる。

絵文字一覧:
作ろうiモードコンテンツ:基本絵文字一覧 | サービス・機能 | NTTドコモ

www.nttdocomo.co.jp_service_developer_make_content_pictograph_basic__edit.png

コード(数値文字参照) タイトル
1 1 &#xE63E; 晴れ
5 5 &#xE642;
8 8 &#xE645; 小雨
25 25 &#xE656; サッカー
134 134 &#xE6EB; 0
135 135 &#xE70B; 決定
150 150 &#xE6FA; ぴかぴか(新しい)

絵文字の入力

絵文字の入力に、表から探して、一つ一つ入力するのは大変ですので、入力用のソフトがあります。
こちらも指示の通りにダウンロード&インストールで使うことができます。
(詳しい使い方については割愛。)

表示結果

シミュレータの表示結果のスクリーンショット

※ちなみにこの画像は、シミュレータの
ファイル(F) - 画面キャプチャ(C)… をクリックで出てくるポップアップウィンドウより、
全体コピー で画像編集ソフトに貼り付けて保存したものです。

最後に

自分でも、最初はフィーチャーフォンで使えるタグの数は限られてるよー
とかを書こうと思っていましたが、あまりにも面白くなかったので、
シミュレータ&絵文字についても書きました (というか、それメイン)。

(需要は別として、)天気程度ならSSRで生成とかでできそうですね。

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?