Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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で生成とかでできそうですね。

lemon2003
The Coder (雑魚ーダー) フロントエンドメイン Qrunch: https://lemon2003.qrunch.io/
https://resume.id/lemon2003
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした