Tagged ‘iPhone’

iPhoneに元号アイコン

元号アイコン
WEBは西暦表記が多いですが書類を書いたりする際には未だ元号(年号)で記入する事が多々あります。
Siriに「今年は平成何年?」と聞いたらも答えてくれますが恥ずかしいです。
IT4コマ漫画:今って平成何年だっけ? – ITmedia ニュース
によるとそういうアプリがあるとの事ですが年号がバッジ(右上の数字)で表現されていて見た目が微妙です。
そこで、巷にあるアイコンをカスタムするアプリの方法を使って元号の書かれたアイコンを貼れないか試してみた。
(さらに…)

iPhone6のWEB制作

本日iPhone6が発売になりました。
WEB制作を生業としている私も増加した解像度をWEBブラウザ上で表示するのか気になるので調べてみた。

結論から言うと
iPhone 5はモニタ解像度は幅640pxをdevice-widthが320px(320pxのふりをして)表示します。
iPhone 6はモニタ解像度は幅750pxをdevice-widthが375px(375pxのふりをして)表示します。
iPhone 6 Plusは解像度がフルHDなので幅1090pxをdevice-widthが414px(414pxのふりのふりをして)表示します。

iPhone 5やiPhone 6の場合はdevice-pixel-ratioが2.0なので単純に2分の1で理解できるのですが
iPhone 6 Plusはdevice-pixel-ratioが3.0なのでdevice-widthは3分の1の360px(一桁四捨五入)と思っていたので不思議に思っていたが
PaintCodeによると1.15の縮小補正が入るので414pxでいいらしい。

ややこしい。

ちなみに同じく解像度が1090pxでdevice-pixel-ratioが3.0の「Sony Xperia Z」や「HTC One X」は普通に3分の1(360px)です。

PassBookに対応したペット用電子名刺「iPetcards」

PassBookでペット用電子名刺作成「iPetCards」
先日、ペット用電子名刺「iPetcards」を公開しました。

思いついたのは約一年前で最初はtenhp.comを間借りして細々とやろうと思ったのですが作っていくうちに「世界初(たぶん)のPassBookに対応したペット用電子名刺なので、iPetcardsの影響でペットを飼ったら電子名刺を作るのが当たり前の世の中になったりして、世界の常識をかいちゃうかもと」という気持ちが強くなり、独自ドメインでVPSを借りてSSL証明書も買ってと準備万端で、公開後も汎用のプレスリリースサイトやiPhoneアプリ系サイトとペット系のプレスリリースサイトなどに依頼した。
しかし、プレスリリースは結局ペット系のところしか掲載してもらえなかった。

PassbookのWEBアプリ開発は資料が少なく困難だったのに、
使いやすさも考慮し、かなり練って作ったのに、
無駄にそこそこの価格のサーバーも用意したのに、
利用者が増えない、昨日の電子名刺作成者ゼロ。

お金になる要素が無いのでどうしようか悩むところだけどネット広告やチラシを作ったりする事も考えてみます。

ちなみにPassBookの方はPassを作るのは簡単なんだけど更新を通知するサーバーを作るのが面倒で必要な情報は公式には日本語の解説PDFがあるが私は下記ブログの解説の方がわかりやすかった。
仕事たのしいなーもーの「Passbookの更新(アフターケア)。(1)
Ian Lewisの「Python でPassbookファイルを作成する

PhoneGap(Cordova)でアプリ制作

Dog-AgeようやくHelloWorld以外のアプリを作った。
Javaは携帯アプリの時に2回開発環境を構築し2回ともHelloWorldまでで諦め、androidアプリも2回開発環境を構築し同じくHelloWorldまでで辞めてしまっていた。
どうしてもJavaだと学習コストを考えると面倒になってしまうのだ。
今回はJavaやobject-cを諦めてhtml5(PhoneGap)にし何とか3ヶ月かけて完成にこぎ着けた。 (さらに…)

iPhone対応サイト制作のまとめ

まず、iPod touch(iPhoneも同じ)のSafariの問題点
・Flashが使えない。
・オンマウスで情報を表示する事が出来ない。
・専用に作られていないとクリックミスが多い。
・大きいページはよく落ちる(ホームに戻ってしまう)
・大きいページは動作が読み込みに時間がかかり、動作がもっさりする。
・フォームからファイルがアップできない。
・jQueryを使ったドラッグ&ドロップをしようとするとスクロールしてしまう。(専用にスクリプトを書けば回避できる)

cssやjavascriptが効いてるのでそこそこ見れるが普通の PCサイトをパソコンの様に見れるという訳では無く、Flashが使える分PSPなどのゲーム機の方がマシに思える。
結局、画面が小さいので専用ページは携帯サイト用のものを元に一回り大きく作る感じが効率的で、色々と複雑な事をしたいならアプリを作る方がいい。

■フォント
iPod touch、iPhone 3Gは日本語フォントが「ヒラギノ角ゴシック ProN」 のみだったがiPadには「ヒラギノ明朝 ProN 」が追加されたらしい
。等幅フォントを使いたいときは「font-family:monospace;」
font-family : ‘HiraMinProN-W3’ ;
font-family : ‘HiraMinProN-W6’ ;

■横幅
iPod touch・iPhone 3G
ポートレート(縦向き):320px
ランドスケープ(横向き):480px
iPhone4
ポートレート(縦向き):640px
ランドスケープ(横向き):960px
iPad
ポートレート(縦向き):768px
ランドスケープ(横向き):1024px

■電話番号を勝手にリンクにしてしまう
「-」(ハイフン)を含む数値をSarfariが勝手に電話番号としてリンクしてしまうので下記を記述して、その機能を抑制する。
<meta name="format-detection" content="telephone=no">

■回転させると文字が大きくなる
画面方向の切り替え時にSarfariが勝手に文字サイズを調整してしまうので、CSSを使ってその機能を抑制する。
body {-webkit-text-size-adjust: none;}

■スクロール
「overflow:scroll」が効かない。
http://cubiq.org/scrolling-div-for-mobile-webkit-turns-3
これは、拡大して二本指でなぞるとなんとかスクロール出来ない事はない。

■アイコン
iPod touch、iPhone 3G、iPhone4、iPadのWebClipアイコンは
以前(iOS1時代)は60x60pxで作成し、iPhoneで自動に57x57pxに変換されるのがキレイとされてましたがiOS2以降は57x57pxで作成する方がキレイに表示できる様になりました。
それがiPhone4、iPadの出現で今までのサイズだとボケボケになってしまうようになりました。
各端末のアイコンサイズは
iPod touch・iPhone 3G:57x57px
iPhone4:114x114px
iPad:72x72px
とまちまちです。
ただ大きい場合は縮小され、角を丸めたり、ライティングしたりしてくれるので大きい方が良くなりました。
実際、どんなサイズがいいのかというと、当のAppleは129x129pxなのでこれに合わせて作成した方が無難かと思われます。

uda2はiPhoneに対応してます。

ブログに書いたつもりだったんですが、uda2のトップページをiPhone(iPod touch)対応版を用意しています。
iPod touchを入手してすぐに作ったので約一月前になります。
iPod touchを弄ってて気づいたのは携帯サイトに対応してるサイトと比べるとiPhoneに対応したサイトが圧倒的に少ない。
殆どは縮小されたパソコン版のWEBサイトを見る事になる。当然クリックしにくいし、拡大すると一部しか見えないので読みづらい。
(拡大表示時にスクロールするのに誤ってクリックしてしまったりしてイライラしてたが、これは二本指でスクロールすると解決される)
携帯対応サイトがあるならiPhoneとiPod touchはそっちに飛ばしてくれた方がマシな気がする。
iPhone対応サイトは色々な問題があり、実際は「WEBもなんとか見れる(かも)」程度でガンダム00の劇場版はWEBでも十分可能なコンテンツなのにわざわざアプリとして配布している。企業はiPhone対応サイトを作るぐらいならアプリを作るという選択をしてるのかもしれない(ユーザーにとってもアプリをGETして得した気分になる)。ただ、そうなるとAndroid携帯に対応したいとき別途アプリが必要になる。
Android携帯を持っていないので正確な事は言えないがモダンブラウザだろうからiPhone対応サイトでもそこそこ見れそうな気がするのでAndroid携帯がそこそこシェアを延ばしてくれればスマートフォン対応サイトとして生きてくるかと思う。

iPod touchを一月ばかり使った感想
いいところ
・アプリが続々と出て期待感がもてる。
・UIが優れてるので意味なく触りたくなる。
・音楽プレイヤーで歌詞が表示されるのにいいサイズ。
・Youtubeを見るのにいいサイズ。
・Twitter専用端末にちょうどいい。
悪いところ
・文章を読むのは問題無いが新聞・雑誌・コミックを読むには画面が小さすぎる。
・実際使うアプリはそんなに無い。
・十字キーが無いのでゲーム機としては劣る。
・本当に欲しい機能は普通の携帯に大体入ってる。
・宮崎駿に「自慰行為をしているようで気色悪い」と言われる。

docomoの2010年夏モデルとiPad


機能と価格で選ぶドコモ携帯にdocomoの2010年夏モデルを掲載した。
昨日、iPadが発売され結構なお祭り騒ぎだったようだがdocomoの新機種は至って普通な感じ、メーカーも様子見で抑えたラインナップなのかただ飽和状態なのか分からないが、もうちょっと攻めた製品が見たかった。
サービス面は殆ど追加が無かったが個人的には「i Bodymo」が欲しいけどその為に買い替えるほどの機能では無い。

iPadも毎日パソコンの前にいる仕事をしてるオレには今のところ魅力的に感じない、iPhoneの様にパソコン版と解像度が極端に違えば専用のページを作るのに検証用として欲しい所だけど、iPadの場合、Flashを無くすとかボタンを押しやすくするぐらいの配慮は必要かと思うが専用のページを作る程ではない。
ただ、今回はiPhoneの成功の後なので、iPhoneの時の様に「当たるかどうか怪しい端末」ではなく「当たるのがある程度確約された端末」なので開発者も多く参入するだろうし、WEBもiPad向けに最適化されたページを作るサイトが結構出てきそう。

iphoneのパケット代がまた安くなった!

先日、docomoが「パケ・ホーダイ ダブル」を発表してパケット代が1029円~4410円(フルブラウザの場合5985円)となるサービスを始めたけど、これにsoftbankが対抗して「パケット定額フル」定額料金の下限を1029円に引き下げた。
iphoneユーザーのパケット代が下記のように値下がる事になる。
5985円
↓  8月5日
1695円 ~ 5985円
↓  今回の改訂
1029円 ~ 5985円
最低限必要な金額は2324円(ホワイトプラン基本料:980円+ウェブベーシック315円+パケット定額フル最低金額:1029円)って事になる。
iphoneは無線LANを搭載してるので頑張れば安く使えるようになりました。
これで、iphoneが爆発的に売れるかも・・・

iPhone用サイト制作について

main_safari20080609.jpgiPhoneで私を含め世間は色めきだっているが、WEBクリエーターとしてはiPhoneのサイト制作も気になるところ、
asahi.comなど既に対応してるところもあるし、iMTなるものを入れたらmovabletypeの管理画面もiPhone仕様になるらしい。
今のところ分かったのは
ユーザーエージェント
iPhoneは
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3
iPod touchは
Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/3A100a Safari/419.3
(ん?iPod touchってブラウザが付いてたんですね。)
但し、iPhone 3Gでは無いので微妙に数値は変わると思う。
表示可能範囲は
縦長表示時 横320px × 縦356px
横長表示時 横480px × 縦208px(Telomere参照)
metaタグの「view-port」で表示領域や拡縮等の表示設定ができる
javascriptのwindow.onorientationchangeで方向が分かるらしい。サンプル
iUI.jsというのを使えばWEBサイトをiPhoneのOS(?)の様な見た目になるらしい。
Yahoo!画像検索でも使われてるとの事。
以前タッチパネルPC(今はタブレットPC)使ってたんで分かるんだけど普通のWEBサイトは指でクリックしづらいので、こういった作り込みは必須になるかと思う。
iPhoneにはアプリ制作のSDKが用意されていておそらくそれで作ったであろうゲームが買える様になっている。だが私のメモリ容量はいっぱいいっぱいでこれ以上覚える事は避けたい、Flashが対応してくれたら色々出来そうな気もするけど、Flash対応は未だ噂の域を超えてない。
Flash liteでいいから使えたらな~

WWDC、iPhone 3Gが$199で7月11日発売!

hero20080609.pngWWDCをリアルタイムで見てみようと思って起きてたけど、それまで作業してたらすっかり忘れていていつの間にか終わっていた・・・
ギズモード・ジャパンのリアルタイム翻訳の方は途中で止まってるみたいで、いつものGIGAZINEを見たらさっき終わったみたい。
ま~安い$199っていったら
199米ドル = 2.10782756 万円(Googleで換算)
日本でこの価格は安い!殺到するだろうなと思って今の隙にソフトバンクオンラインショップで予約しようと思ったけど、まだ何も載ってない。
7月11日発売なのにまだ予約できないんやね。
なんか買えない予感がする。
AppleのサイトにもうiPhone 3Gが載ってる。
ってページ重い。
Appleストアにも載ってるので買えるかなと思ったら「ソフトバンク ショップでお求めください。」との事、そりゃそうだな。
しゃあないんでmobile meってのに申し込んでみようかなと思ったら年間9,800円・・・。
無料じゃないとは思ったけど、高すぎる、なんかアップルの金銭感覚がようわからん。