イナヅマTVログ

2012.10.18
10:47
author: taikiken
0件のコメント

Memo, mobile Safari各パーツサイズ

iOS(iPhone)の各パーツサイズ メモ
【Normal】
Status bar: 20px
URL text field: 60px
Button bar: 44px

【Keyboard】
キーボードが表示された時
Status bar: 20px
URL text field: 60px
Form assistant: 44px
Keyboard: 216px(Portrait), 162px(Landscape)
Button bar: 44px(Portrait), 32px(Landscape)

【Display】
スクリーンサイズ
iPhone 4s under
320px x 480px

iPhone 5
320px x 568px

・表示可能領域
【Normal】
iPhone 4s under
320px x 356px

*hide URL text field
320px x 416px

iPhone 5
320px x 444px

*hide URL text field
320px x 504px

【Standalone mode(Full Screen)】
iPhone 4s under
320px x 460px

iPhone 5
320px x 548px

【meta】Standalone mode
Full screen指定
iOS 2.1 later

<meta name="apple-mobile-web-app-capable" content="yes">

default: no
yes, no

Status bar
iOS 2.1 later

<meta name="apple-mobile-web-app-status-bar-style" content="black">

default: default
default, black, black-translucent

【Web クリップ アイコン】Web Clip Icon
iPhone
57 x 57, 114 x 114（高解像度）
iPad
72 x 72, 144 x 144（高解像度）

四角形のアイコンを作成(PNG)
角丸、ドロップシャドウ、反射光 はiOS側で設定される

画像名を apple-touch-icon-precomposed.png とすると上記3つの効果を付けない。

【関連投稿】
Memo, [iOS][mobile Safari]フルスクリーンに対応させるmetaタグやスプラッシュ画像の指定
Memo, iOS, Androidブラウザのアドレスバーを消す方法

android design guideline

2012.10.15
03:28
author: taikiken
0件のコメント

Android Design GuidelineのPDF版ってないんすかね

Androidのデベロッパーガイドラインがオンライン版しかなくて使い勝手が悪いんですけど…
デザインっていうかUI回りの資料がPDFで欲しいんだけどなぁ〜
http://developer.android.com/design/index.html

ネット上にあれば常に最新版に更新されるから良いじゃん、なノリなのでしょうがオフラインで使えないとか印刷しにくいとかとかとか。
古い人間なんで手元に持っておきたいんですよね。

PDFになってればiPadやタブレットに入れて持ち歩けるしオフラインでも読めるのに、なんて思わずにはいられません。
公式サイトには無いようだしGoogle大先生にお聞きしてみました。

サードパーティーせいですけどいくつかあるようです、ありがたいです。
続きを読む →

2012.10.07
19:46
author: taikiken
1件のコメント

JavaScript 1.6, Array.indexOfを下位互換実装する

JavaScript 1.6から追加されたArrayのindexOf。
配列の中に要素が存在するかを調べる関数です。
見つからない時は -1 を返します。
見つかるとその要素の添え字を返します。

配列の中を走査するのに大変便利です。
しかし実装していないブラウザも存在するため、下位実装を担保して使わないとエラーになってしまいます。

続きを読む →

2012.10.06
10:02
author: taikiken
1件のコメント

JavaScript, Singleton Patternを作ってみた

Classmethodさんのステキ記事、「ちょっと高度にJavaScript／クロージャの基礎」

JavaScriptで関数や変数の隠匿には気をつかいますよね。
特に複数の人間が開発に携わっている時。
ほっとくとglobal領域を汚染したり上書きが発生したりとよろしくないことが発生しがちになります。

プロジェクトとして開発に同時参加なら規約など作って情報共有できたり、まずいことが見つかればお互いに連絡を取れたりするので人力でカバーすることも出来るのですが…

誰かが作ったJavaScriptで機能実装済みのHTMLファイルをわたされ、さらに別の機能を実装する時はそんな規約も連絡もありはしないので、さらに神経質にならないといけません。

名前空間を汚染しないように*即時関数にファイルを閉じ込めて作成します。
これは以前投稿している「名前空間の汚染問題を考える」当たりをご興味があればご覧下さい。

Classmethodさんの記事を見たからというわけでもないのですが、普段使っているオレオレJavaScript Singletonをご紹介しておきます。
続きを読む →

2012.10.05
23:27
author: taikiken
2件のコメント

Ajax, jQueryでXMLをParseそしてAccess-Control-Allow-Originについて

絶賛JavaScriptカキカキしてます。

AjaxでXMLを取得してパース処理をJavaScriptでの巻。
みんな大好きjQueryさんの登場です。

AjaxといってもJSONでデータ取得することが多くXMLよりはるかに簡単にデータを展開可能なところが魅力です。
とは言ってもこちらの希望ばかりで世の中が回る訳でもなくAjax本来のXMLをパースしてみます。

さて、ローカルにXML吐き出しようのダミーサーバーとダミーXMLをおき取得の準備を整えました。
XML吐き出しサーバーとJavaScriptで取得するファイルを置いているドメインを変えています。
続きを読む →

svg gradient generator

2012.10.02
09:15
author: taikiken
0件のコメント

CSS3, IE 9のためにSVG付きグラデーション生成サービス

先日も投稿したようにIE 9で背景にグラデーションの指定をしたい時はSVGを使います。

SVGってツールがないと作るのが超めんどくさいです。
私はCompassで作ってますが、なんかイヤって方は色々Web上で生成ツールを公開してくれている方がいるのでそちらを使うといいよな話です。

CSS3 Gradient Generatorをいくつか。
続きを読む →

デベロッパー ツール

2012.10.01
18:43
author: taikiken
0件のコメント

[Android][iOS], Chrome デベロッパー ツールでUser Agentを変更して確認

運良くiPhone 5を発売日に手に入れることができました。
電話会社は「やりましょー」のソフトバンクです。
iPhone 5の軽さは驚きです。
前の4Sを手にすると「重たさ」が異常なくらいに感じられてしまいます。

基本使用料金が2年縛りしかなくなり、パケット料金も値上げされ1年ごとに新機種に更新している私には実質2,000円/月の値上げになりました。
ブツブツ。
なんか、安さが一番とか言われると「大嘘つき！」と言わずにいれないのをお許しください。

【スマホ サイト開発シミュレータ】
さて、近年スマホサイト制作の依頼が増え、机に端末が7~8台並んだ状況はなかなか見応えがあります。
充電用のコンセント確保が最大の仕事かもです。

実機テストは最終段階で外すことが出来ませんが、途中はシミュレータレベルで手抜きしたいことがあります。

Safariの開発メニューにはユーザーエージェント切替機能がありiOS 5でテスト可能です。
Androidは残念ながらメニューにはありません。

ChromeならAndroidをシミュレート テストできる

続きを読む →

2012.09.26
04:55
author: taikiken
4件のコメント

Memo, iOS, Androidブラウザのアドレスバーを消す方法

スマホサイトで上の方にどかんと居座ってじゃまなブラウザのアドレスバー(Address bar)URLバー(URL bar)を消す方法。
JavaScriptを使うしか方法が無いらしい。

JavaScript(jQuery使用)

(functino (window, $) {
    $(window).on('load', function () {
        setTimeout(scrollTo( 0, 1), 0);
    });
}(window, jQuery));

scrollTo( 0, 1 )をsetTimeoutで実行させるのがキモらしい。
参考：Hide the Address Bar within Mobile Web Applications
続きを読む →

2012.09.25
23:12
author: taikiken
4件のコメント

Memo, [iOS][mobile Safari]フルスクリーンに対応させるmetaタグやスプラッシュ画像の指定

iOS Safari(mobile Safari)には「ホーム画面に追加」機能があります。
「ホーム画面に追加」に追加したアイコンをタップして起動させた場合はmetaタグを追加でフルスクリーン表示が可能です。
描画エンジンはSafariの様なのですが通常（のSafari）とは違う表示が可能です。

ステータスバーもロケションバーもないアプリのようなフルスクリーン表示が可能です。
続きを読む →

2012.09.24
00:43
author: taikiken
1件のコメント

Memo, [CSS3]iPhone 5専用Media Query

iPhone 5(iOS 6)の地図のできの悪さがネット界隈で話題沸騰中です。
確かに至らぬところは多々ありますが使えない訳でもなさそうなのでこれでもいいかなぁなんて思います。

それよりもショップなどを表すアイコンがApple製品とはとうてい思えないできの悪さの方が気になります。
どうしたんでしょう…

新しいCPUや2倍になったメモリの恩恵は素晴らしいと感じましたし、iOS 6の進化具合もいい感じです。

iPhone 5専用のCSS3 Media Query

続きを読む →