スマホ（携帯サイト）｜インコの技術メモ

スマホ（携帯サイト）

2018年10月09日 16:50 ～（2008年4月15日 22:56 ～）

■ iQuery オンクリックが効かない
iOS で $(document).on('click',～が効かないです。 css で cursor: pointer; を設定すると発火します。

■ 縦横比を維持してウィンドウいっぱい（スクロール無し）に表示
横：縦　7:10 の例。

<html>
<head>
<style>
.wrapper {
  background: #acac56;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: calc((70vh - 100vw) / 2) calc((100vw - 70vh) / 2);
}
.content {
  background: #fefe56;
  width: 100%;
  height: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
  <div class="content">
へ(-。-)ノ
  </div>
</div>
</body>
</html>

要はこの一行。
padding: calc((70vh - 100vw) / 2) calc((100vw - 70vh) / 2);
padding でマイナスが効かないのを利用します。
Cordova 使うときとかに。

■ スマホでもＰＣの見た目

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">

スマホで見て表示が小さくなったら嫌というとき、上の１行を head に書いてやると、まるで 72dpi（PCのディスプレイ）のように表示されます。

■ Unity
→ Unity のサイト
Flash のようなもの。ゲーム作るならこれで間違いないです。

■ CORDOVA
→ CORDOVA のサイト
HTML + CSS + JavaScript つまり普通にサイト制作したものをスマホアプリ化してくれます。
ゲームみたいに凝ったものでなくてよい＋スマホサイト制作できてるならこっちのが良いでしょう。

■ Android Studio
→ Android Studio のインストール
Unity も Cordova も、やっていることは Android Studio 形式や Xcode 形式で出力するということなので、それぞれ（Android, ios）用のソフトはインストールしていないといけません。
Android Studio を取り込んでいたら Unity, Cordova ともに、そのままコンパイルしてスマホにインストールするところまで自動でしてくれます。
可能であれば、直接こっちだけで開発してもぜんぜん可です。

■ Xcode
→ Xcode 10 のサイト
上に同じ。
ただし、こちらは Mac じゃないとインストールできません。
１つの結論として、Android と iPhone の両アプリを作りたい場合、Mac を購入するしかないです。
上記ソフトが全部インストールできます。
ヘビーなゲームでなければ（もともとの性能が良いので）ライト向けの Mac でもだいたい開発できます。

■ そんなでもないものをアプリ化するメリット
スマホ依存でない私のようなおっちゃん的には「そんなもんアプリやのうてホームページでええやん」ということがしばしばあるのですが、それでもアプリ化した方がよい点。
1. 画面にアイコン化されるのが良い。
　　「ブラウザ開いてブックマーク登録してもらってそこから」という些細と思える手間が実は結構ダメみたいです。
2. ストアに出るとリーチされやすくなる。
　　露出が増えるのが単純に良いです。だいたいこの２点。
3. プッシュ通知ができるとかその他もろもろ。
　　上記２点以外にもある感じですが、もうそうなると PWA でもいいんじゃないかなってなりますので忘れて可。

以下、ガラケー

■ Google Analytics を使用する。
ログインしてトップページ。
携帯用にプロファイルを作る。
「編集」をクリック。
「ステータスの確認」をクリック。
「詳細」タブをクリック。
「携帯電話向けのサイト」をチェック。
　PHP,Perl,JSP,ASPX のいずれかを選ぶ。
　コードを指定の場所に貼り付ける。２箇所あるので注意。
　ga.php をダウンロードしてルートディレクトリにアップロードする。パーミッションに注意。

■ Google Map を使用する。
固定画像ですがkeyを取得(→http://code.google.com/intl/ja/apis/maps/signup.html)していれば表示できます。
Google Static Maps サンプル

■ CSS
DoCoMoはタグのオプションの位置に直接書き込む方法しかできません。
リンクの色指定だけは<head>で出来ます。

■ DoCoMo、i-cssをつかうときの拡張子
ファイルの拡張子は .xhtml にしないといけません。
したくないときには、 .htaccess に以下の１行を書いて、DoCoMo用のルートディレクトリの中にでも入れて置きます。
AddType application/xhtml+xml .html

■ DoCoMo、i-cssをつかうときのXML宣言
例えばバージョン２なら
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.0) 1.0//EN" "i-xhtml_4ja_10.dtd">
<head>?
DoCoMoは上とこの２点を踏まえないとcssが効きません。
XML宣言は表現したいCSSの種類によって選びます。バージョンが上がると表現の幅は広がりますが、対応機種は限られてゆきます。詳しくは↓
http://www.nttdocomo.co.jp/service/imode/make/content/xhtml/about/index.html

■ DoCoMoのマーキー（CSSを使うとしたとき）
<span style="display:-wap-marquee; background-color:#41bffa;";">知的な人が幸せでいるのは、私が知っている最もまれなことである。　アーネスト・ヘミングウェイ</span;">

■ 最近の文字サイズ
<span style="font-size:small";">大</span;">
<span style="font-size:xx-small";">小</span;">
これぐらいな感じです。2008.11.12現在

■ hr
<hr style="height:2px; border-style:solid; border-color:#8f9807;">
特に携帯に限ったものでは有りませんが。

■ 背景色
<div style="background-color:#e9f8ff;">へ(-。-)ノ</div>
３キャリアとも幅いっぱいになります。

■ 背景画像
<div style="background-image:url(/img/hoge.gif);">へ(-。-)ノ</div>
DoCoMoは<body>タグにしか使えません。
au、SoftBankは<table><tr><td>の中にも書けます。

■ 画像の回り込み　３キャリア対応
<div><img src="hoge.jpg" align="left" style="float:left" /><span style="font-size:small">You'll never find rainbows if you're looking down.
もし下を向いたままならば、虹を決して見つけることはできないだろう。
チャーリー・チャップリン</span></div><div style="clear:both;"></div>

■ 画像の回り込みでauの絵文字は不可。
auの絵文字は<img>タグなのでボックス要素とみなされ、絵文字の後ろで改行されてしまいます。
どうしても使いたいときには<table>タグを使うしか有りませんが、文字数がはみ出た時に下に回りこんでくれません。

■ 画像の拡張子
最近では全部.jpgでいけますが、念のため。
DoCoMo　.gif
au　.jpg
SoftBank　.png
どのみちgifしか表示できないDoCoMoの機種は容量制限も厳しすぎるので切り捨てて良いと思う。

■ CSSでリンク色指定
<style type="text/css">
<![CDATA[
a:link{color:#FF0000;}
a:focus{color:#0000FF;}
a:visited{color:#009900;}
]]>
</style>
</head>
DoCoMoもこれだけは<head>で指定できるようです。

■ .htaccess でキャリア振り分け

こんな感じのディレクトリ構成の場合。

public_html
├d　（DoCoMo用ディレクトリ）
├a　（au用ディレクトリ）
├s　（SoftBank用ディレクトリ）
└.htaccess

↓.htaccessに書く

RewriteEngine On
# imode
RewriteCond %{HTTP_USER_AGENT} ^.*DoCoMo*.
RewriteRule ^$ /d/index.html [R,L]
RewriteCond %{HTTP_USER_AGENT} ^.*DoCoMo.*
RewriteRule ^(s|a)/(.*)$ /d/$2 [R,L]
# au
RewriteCond %{HTTP_USER_AGENT} ^.*KDDI.*
RewriteRule ^$ /a/index.html [R,L]
RewriteCond %{HTTP_USER_AGENT} ^.*KDDI.*
RewriteRule ^(s|d)/(.*)$ /a/$2 [R,L]
# jphone , vodafone
RewriteCond %{HTTP_USER_AGENT} ^.*(J\-PHONE|vodafone|softbank|Vemulator|MOT\-).* [NC]
RewriteRule ^$ /s/index.html [R,L]
RewriteCond %{HTTP_USER_AGENT} ^.*(J\-PHONE|vodafone|SoftBank|Vemulator|J-EMULATOR|MOT\-).* [NC]
RewriteRule ^(d|a)/(.*)$ /s/$2 [R,L]

■ DoCoMo　背景色 i-css css xhtml
?拡張子は　.xhtml
拡張子を変えることができない場合は、.htaccessに次の１行を書き足す。
AddType application/xhtml+xml .html

?ヘッダは以下の通り
http://www.nttdocomo.co.jp/service/imode/make/content/xhtml/about/index.html

iモード対応XHTML 1.1
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.1) 1.0//EN" "i-xhtml_4ja_10.dtd">

iモード対応XHTML 2.0
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.0) 1.0//EN" "i-xhtml_4ja_10.dtd">

iモード対応XHTML 2.1
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.1) 1.0//EN" "i-xhtml_4ja_10.dtd">

ｉモード対応XHTML 2.2
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.2) 1.0//EN" "i-xhtml_4ja_10.dtd">

?サンプル
（DoCoMo以外では色付かない）

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.1) 1.0//EN" "i-xhtml_4ja_10.dtd">
<html>
<head>
<title></title>
</head>
<body>

<div style="color: #FFFFFF; background-color: #FF0000;">
DoCoMo　背景色
</div>

</body>
</html>

スマホ（携帯サイト）

About

Category

Elsewhere