PhoneGap で deviceready イベントが発行されない問題への対処 - sandbox
2011/11/15 追記: きっともう Obsolete 公式にあるサンプルでも deviceready が発行されないケースがあったので、対処方法をメモ。 公式にあるサンプルは下記の通り。 <!DOCTYPE html> <html> <head> <title>PhoneGap Device Ready Example</title> <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> <script type="text/javascript" charset="utf-8"> document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { alert('なぜか呼ばれな
[CSS]100%幅のヘッダとフッタを天地に固定表示するスタイルシート
ビギナーズ向けに解説された、100%幅のヘッダとフッタを固定幅のコンテンツの天地に固定表示するスタイルシートをNoobcubeから紹介します。 Fixed Header & Footer Layout: A Beginner's Guide demo スタイルシートはIE6をはじめとする主要ブラウザをターゲットにしており、IE6用のスタイルシートファイルやdivの入れ子でIE6に対応しています。 HTML箇所の最小構成は、下記のようになります。 <textarea name="code" class="html" cols="60" rows="5"> <body> <div id="header-wrap"> <div id="header-container"> <div id="header">ヘッダ</div> </div> </div> <div id="ie6pagewrap"
ヘッダとフッタを固定して常に表示 « (X)HTML+CSS Tips « XHTML+CSS Webサイト制作Tips « ScuderiaWeb
少し前までのWebサイト制作ではフレームによって簡単に実装されていましたが、Web標準が重視されフレームの使用がご法度になった今、画面全体がスクロールするWebサイトが一般的になりました。しかし、コンテンツ部分が長くなると、コンテンツ上部にあるメニューボタンの利用が不便になるなど、ユーザビリティの低下も否めません。 好みや慣れもあると思いますが、XHTML+CSSでフレームのようにヘッダとフッタを画面の上下に固定し、常に表示する方法をご紹介します。 ページの情報量が少ない場合も画面最下部にフッタを表示する方法は、フッタ固定で紹介しています。 サンプル ヘッダとフッタを固定して常に表示するサンプル（別ウィンドウで表示） ソース 上記サンプルで使用しているソースです。 body{ margin: 0; padding: 100px 0 50px 0; } * html body{ overfl
PhoneGap で画面横幅いっぱいにズーム - パソコン・メモメモ備忘録
先日も、JavaScript なアプリをいじっていたが、それを PhoneGap 版にも反映させてみると、ISW13F では画面横幅一杯になってくれなかった。ブラウザ上で、Web ページとして開いた時はそんなことないのだが、PhoneGap 上だとダメだった。meta タグの Viewport を色々いじってみたが、一番惜しいのが target-densityDpi を high-dpi にした場合か。大きめには表示されるが、横幅一杯ではない。extrahigh-dpi とか適当にやると（この指定は効いてないのだと思うが）、今度は大きすぎてはみ出したり。 で、色々調べてみると、PhoneGap の Java ソースに２行ほど追加するとうまくいくらしい。src/com.phonegap/Droid.java/DroidGap.java の 210 行目辺りに、JavaScript を有効にし
スマートフォン(iPhone/Android)アプリ制作時に役立つ画像サイズのまとめ
こんにちは、鴨田です。 最近、スマートフォン関連の仕事が多いのですが、 スマートフォン絡みのデザインをするときに、 この画像はどんなサイズだったっけ、 っていうことが多いので、まとめておきたいと思います。 ■画面サイズ[画面解像度](単位：px) iPhone3G / 3GS 320×480 iPhone4 640×960 iPad / iPad 2 768×1024 HT-03A 320×480 Xperia (SO-01B) / Xperia arc (SO-01C) 480×854 HTC Desire (X06HT) 480×800 Nexus One 480×800 Galaxy S 480×800 IS03 640×960 Galaxy Tab 600×1024 主要な機種だけ載せておきます。 AndroidはWide対応が主流ですね。 ■Lancherアイコンサイズ(単位：p
MonacaでiOSアプリを作ろうとしてリリース出来なかった話 - 蟻の実験工房（別館ラボ）
MonacaでiOSアプリを作ろうとしてリリース出来なかった話です。 僕の個人の開発環境は以下の通りです。 PC: ノートPC / OS : Windows 7 モバイル : iphone 4sこの環境で何が問題かというと １．PCがwindows なのでobject-cの開発環境がなくiphoneアプリが作れない。 ２．androidアプリはeclipseで作れるがモバイルの実機テストが出来ない。 という感じで、いかんせん組み合わせが悪く何もできない状態です。 そこで目をつけたのがmonacaというクラウド上で動作するアプリ開発プラットフォームです。 http://monaca.mobi/ このmonacaを利用すれば、クラウド上でiOSのモジュールが作成できて、ダウンロードしたローカルのiphoneでテストが出来る。 という事でここ３日くらいそれっぽいiOSアプリを作っていました。 作
スマホ最適化、スマートフォン制作に関するメモ – T2
1．デバイス依存をどう乗り切るか。 エクスぺリア、iPhone、ギャラクシーはこれといった影響なくできていたのですが、 REGZAでFirefoxなどを使った時はもうね。泣きそうになりましたよね。 原因はmoz系に対応するjsとCSS3の記述を全て行っていなかった事だと思います。 初めにどのデバイスでどこまで対応するのかという仕様策定をしてから始めないと モバイル同様苦しむ事になるので注意が必要です。 androidのopera等。 2．横にした時の見え方。 これは意外と苦戦しました。縦だと綺麗なのにスマホサイトでよく見るwidth:100%とかを 適所に使わないといけない。 float:left; とかで2つの要素を詰めないと、縦では詰まっていたのに、横では両端に広がってしまうとか。 それによってhtmlの記述を変えないといけなくなったりとか。 2012/09/26 以前は上記の様に書い
HTML5アプリのviewportを統一的に設定、monaca.viewport.js
こんにちは、開発者の久保田です。 Monacaではプロジェクトのひな形が一新されて、新しいHelloWorldプロジェクトが用意されました。 そのプロジェクトの中には、異なる解像度の端末でも同じように画面を設定するためのmonaca.viewport.jsが含まれるようになりました。この記事ではmonaca.viewport.jsについて説明します。 なぜviewportを指定するライブラリが必要なのか? monacaでは、HTML5でモバイル用のアプリケーションを作成する必要があります。モバイルデバイスやタブレットには、それぞれ違った解像度を持つiPhone、iPadなどのiOS端末や様々なAndroid端末が存在します。アプリケーションの開発者は、違った解像度を持ったデバイスに対応しなければなりません。そのために、アプリケーションにviewportを設定します。 viewportとは?
PhoneGapでRetinaディスプレイに対応する - なんかの Log
Cordova 2.0利用。ずっとシミュレータで動かしてたから気づかなかったけどRetinaディスプレイの解像度で画面を組んでみると横幅がうまく設定されず表示が大きくなってしまう。viewportでスケールをすべて0.5にすればいい感じで表示してくれたのだけど、他になんかあるだろうと調べたらフラグがちゃんとあった。 プロジェクトのResourcesフォルダ下にあるCordova.plistで設定されているEnableViewportScaleをYESにしてあげるといいようだ。 （追記）2012-09-03 11:35 自分で書いてるのにハマったので整理。 PhoneGap初期状態ではおそらくviewportを無視する状態になっている。なのでEnableViewportScaleを有効にすることで読み込みをしてくれる。viewportのデフォルトの横幅(width)は980pxになっているの
Apache Cordova(PhoneGap) を導入して iOS と Android で Hello World してみた - 憧れ駆動開発
Apache Cordova とは PhoneGap がいつの間にか Apache 傘下にはいって Cordova という名前になってた。ざっくりとした理解としては HTML5+CSS+JS でつくったアプリを iOS Android 両方にビルドしてくれる便利環境*1。Titanium と似ているという感覚でとらえているし、だいたいそういう感じだと思っている*2。 導入の参考::PhoneGap（Apache Cordova）を触ってみた - aoki_pの日記 技評の連載::第1回 PhoneGap/Cordovaとは：もっと使おうPhoneGap／Cordova 2.0.0｜gihyo.jp … 技術評論社 PhoneGap 日本語情報::PhoneGap Fan - PhoneGap (Cordova) の日本語コミュニティ スライド::PhoneGapの始め方 スライド::Pho
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Android】PhoneGapを使用してDBアクセスするアプリを作成する
はてなブログ | 無料ブログを作成しよう