ブラウザベースのjQuery Mobileアプリ開発環境「codiqa」と「Application Craft」
jQuery MobileなどのすぐれたJavaScriptフレームワークの登場で、HTML5とJavaScriptを組み合わせたWeb標準によるモバイルアプリケーション開発が普及し始めています。 この記事では、Web標準によるアプリケーション開発をさらに簡単にしてくれる、WebブラウザベースのjQuery Mobile対応モバイルアプリケーション開発環境「codiqa」と「Application Craft」の2つを紹介しましょう。 Codiqa～jQuery Mobileアプリのモックアップがすぐ作れる モバイルデバイス対応のアプリケーションを開発するときに手間がかかるのが、小さい画面でも使いやすいユーザーインターフェイスの構築です。モックアップを作り、使い勝手を試す必要があります。 先月公開が始まった「codiqa」は、そのモックアップを手軽に、Webブラウザ上でドラッグ＆ドロップす
その場でサクッとiPhoneやiPad等の幅でWebサイトの表示確認が出来るレスポンシブWebデザインの補助用ブックマークレット・Resizer
ここ何日かずっとレスポンシブWebデザイン のネタが続きますが・・便利なブックマーク レットです。閲覧中のWEBサイトをiPhoneや iPadの幅で見たときの表示状態で確認出来る ブックマークレットです。というか単純に リサイズしてくれる、ってやつですね。 その場でレシポンシブWebデザイン対応の表示確認が出来るブックマークレットです。UAの切り替えとかじゃなく、単純にリサイズするだけですが、シンプルで手軽に表示確認出来るので使おうかなと思います。 地味に便利でした。使い方・・・の説明は不要だと思いますが他に書くこと無いので一応ｗ ブックマークレット使うと右上になんか出ます。 あとは好みのデバイス選べばその場でリサイズされます。Webサイトのほうで背景色を決めてないとオーバーレイの色に依存しちゃいますけど。 でもこのブックマークレットはGithubでコードが公開されてますので好みのブック
全て同時に確認できる、スマートフォンやデスクトップなどさまざまなサイズで表示できるブックマークレット -Responsive Design Test
全て同時に確認できる、スマートフォンやデスクトップなどさまざまなサイズで表示できるブックマークレット -Responsive Design Test
testmobileview.com
testmobileview.com This domain is expired. The domain owner has to renew it from the admin setting if you continue using it. 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owne
モバイルサイズになると自動でグローバルメニューをPathのような横スライド式に切り替える軽量jQueryプラグイン・PageSlide Responsive
結構良さそうだったので備忘録。レスポンシブWebデザイン向けのライブラリです。モバイルのサイズになるとグローバルナビを横スライド式に切り替える、というもの。面白いですねー。 これ結構いいんじゃないでしょうか。レスポンシブWebデザインにするとどうしてもナビゲーションが縦長になりがちなのでその不満は解消できるアイデアですね。 PathやFacebookのiPhoneアプリのような横スライドメニューは使いやすいかもしれない。 Pathのようにというか、全く同じじゃないんですが、モバイルサイズになると横スライド式のメニューに変更するjQueryプラグインです。 ちょっといいアイデアですね。プラグインも圧縮版は3KBと軽量です。 タップすると左からメニューがスライドします。 手抜きで申し訳ないんですがサンプルです。 Sample※表示確認はresponsivepxを使うと楽です 実機で重いのは僕が
ke-tai.org > Blog Archive > P1エミュレータがバージョンアップしiPhoneにも対応したようです
P1エミュレータがバージョンアップしiPhoneにも対応したようです Tweet 2011/8/18 木曜日 matsui Posted in タレコミ | 1 Comment » フォーラムからタレコミをいただきました。 情報提供ありがとうございます。 P1エミュレータが2011年08月10日付けでバージョンアップし、新たにiPhoneにも対応したようです。 → NetFarm P1 Emulator ニュース バージョン1.0.1.179をリリース! [p1.netfarm.ne.jp] P1エミュレータは、国内3キャリア・700機種に対応した、強力なケータイサイト検証用シミュレータです。 今回ガラケーのみならず、iPhoneのシミュレートにも対応したようです。 機種選択で、SoftBankのメニュー内から「iPhone」が選択できるようになっています。 iPhoneのUAが出力される
スマートフォンにも対応可能・ウィンドウサイズに応じてレイアウトを自動調整する軽量jQueryイメージスライダー・FLEXSLIDER
スマートフォンやiPadなどのタブレットはもちろん、 様々なウィンドウサイズにも自動でレイアウトを 調整するレスポンシブなjQueryスライダーのご 紹介。FLEXSLIDERは4KBと軽量で、実装も 手軽なので覚えておくと重宝しそうです。マーク アップも簡単なのでiPhone向けサイトの構築 時に導入を検討したいですね。 以前もレスポンシブWebデザイン対応のスライダーをご紹介しました（Blueberryというスクリプトです）が、こちらは加えて軽量なスクリプトで表示も速いようです。 見た目はシンプルなスライダーですが、iPhoneやiPadのようなウィンドウサイズの狭いデバイスにもレイアウトを自動で調整してくれます。スクリプトも4KBと、とても軽量なのでMediaQueriesとうまく併用したいところですね。 iPhoneでの表示。自動で幅を調整しています。 iPadの幅だとこんな感じ。
iPhoneやiPadやネットブックなど、さまざまなスクリーンサイズでウェブサイトを確認できる -Screenfly
iPhoneやiPadやネットブック・ノートブック・デスクトップやテレビなど、さまざまな解像度のスクリーンでウェブサイトの表示を確認できるオンラインサービスを紹介します。 Screenfly [ad#ad-2] Screenflyの対応スクリーン 現在、対応しているスクリーンは下記の通りです。 Desktop ネットブック10インチ(1024x600) ネットブック12インチ(1024x768) ノートブック13インチ(1280x800) ノートブック15インチ(1366x768) デスクトップ19インチ(1440x900) デスクトップ20インチ(1600x900) デスクトップ22インチ(1680x1050) デスクトップ23インチ(1920x1080) デスクトップ24インチ(1920x1200) Tablet ViewSonic(800x480) Velocity Cruz(800
ke-tai.org > Blog Archive > FireMobileSimulatorにホストごとに端末設定できる機能を追加するパッチが公開されたようです
FireMobileSimulatorにホストごとに端末設定できる機能を追加するパッチが公開されたようです Tweet 2011/7/7 木曜日 matsui Posted in 記事紹介・リンク | No Comments » タグ: FireMobileSimulator, シミュレータ 最近の記事 2013/6/1に第四回札幌MySQL勉強会開催を行います 2013/1/26に札幌で「LOCAL DEVELOPER DAY ’13 / Infra & Security」が開催されます 2012年11月にEZwebのIPアドレス帯域の一部削除がありました Titanium Mobile で Android, iOS 両対応のアプリを開発する際の注意点 2012年11月にEZwebのIPアドレス帯域の一部が削除されるようです コメントを書く お名前 メール URL « iPhoneやAn
スマフォにも対応・ディスプレイサイズに自動で幅調整するレスポンシブなjQueryイメージスライダー・Blueberry
どのようなディスプレイサイズでも自動で レイアウトを調整してくれるレスポンシブな イメージスライダーを実装出来るjQueryプ ラグイン・Blueberryのご紹介です。イメージ スライダーを取り入れているサイトは多い のでこういうのは助かりますね。 iPhone等のスマートフォンにも自動でサイズを調整してくれます。痒いところに手が届く系ですね。地味にありがたい。 見た目はシンプルなイメージギャッラリーです。が、閲覧するディスプレイのサイズに依存する事無く、自動で幅を調整、最適化してくれます。MediaQueryと相性良さそうですね。 表示確認 Media Queries Testerでのキャプチャです。 Mobilizerでのキャプチャです。 コード<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery
スマフォ向けサイト最適化にも使えそうなブラウザ幅に応じCSSが切り替えられるJSライブラリ「Adapt.js」:phpspot開発日誌
スマフォ向けサイト最適化にも使えそうなブラウザ幅に応じCSSが切り替えられるJSライブラリ「Adapt.js」 2011年04月19日- Adapt.js - Adaptive CSS スマフォ向けサイト最適化にも使えそうなブラウザ幅に応じCSSが切り替えられるJSライブラリ「Adapt.js」。 見ているユーザによってディスプレイのサイズなんかはまちまちで、ブラウザのサイズも結構違いますね。 このフレームワークを使えば、幅が600〜800px は a.css、800〜1200px の場合は b.css のように使い分けるのが容易になります。 端末の違いなんかもCSSによって分けてしまえると、プログラム的な無駄な分岐を省けて綺麗に作れますね。 ここら辺の分岐を簡単な使い方で勝手にやってくれるのがAdapt.js。スマートフォン向けサイトなんかにも使えます。 iPhoneだと縦で大体320p
【スマホ集中連載 第7回】 小技紹介 "Android端末で画面キャプチャを撮る方法 (Win/Mac)" : LINE Corporation ディレクターブログ
こんにちは。スマートフォングループ ディレクターの石野です。 本日はスマートフォンの企画に役立つ "小技" 紹介ということで、Android端末で画面キャプチャ (スクリーンショット) を撮る方法を紹介したいと思います。 プレスリリースの文面を用意するときや、Androidマーケットにアプリ公開を行うとき、アプリの改善点をエンジニアと共有するとき等々、自分もスマートフォン担当になってから頻繁に使っています。また、同僚に聞かれる回数の一番多いノウハウでもあります。 はじめに スマホ集中連載 第2回の記事で触れましたが、Androidはセキュリティ上の理由で端末から気軽にキャプチャを撮る方法がありません。 そのため、PCにケーブル接続をしてツールを使って撮りますが、設定が正直非常に面倒なのでまとめたいと思います。Windowsユーザ向け / Macユーザ向けにそれぞれ記載していきます。 ※なお
ke-tai.org > Blog Archive > FireMobileSimulatorがFirefox4にも対応したとのことです
FireMobileSimulatorがFirefox4にも対応したとのことです Tweet 2011/4/4 月曜日 matsui Posted in ソフト紹介, タレコミ, 記事紹介・リンク | No Comments » フォーラムからタレコミをいただきました。 （情報提供ありがとうございます） しかしながら風邪で寝込んでいたため、タレコミから6日も遅れてのご紹介です。すいません。 ケータイ開発で最も多く使われているであろうエミュレーションツールの「FireMobileSimulator」ですが、先日の3月26日にFirefox4に対応したようです。 （その後、28～30日の間に幾つかの問題修正が行われ、現時点ではVer1.1.15リリースされています） → FireMobileSimulator トップページ [firemobilesimulator.org] → FireMob
【スマホ集中連載 第3回】 "iPhone・AndroidアプリのUI・挙動はどこが違う？" 〜LDNReaderで徹底検証 : LINE Corporation ディレクターブログ
こんにちは。スマートフォングループの石野です。 「ディレクターのためのスマートフォン講座」第3回目を担当します。 前回に引き続いて Android と iPhone の比較ですが、アプリについてもう少し突っ込んでみます。Android アプリを使ったことが無い方はぜひご覧ください。 はじめに / サンプル紹介 なるべく直感的に把握していけるよう、実際に iPhone / Android でアプリをリリースしている『LDNReader』を例に見ていきます。ニュースリーダー系アプリです。機能面はほぼ同一であり、比較しやすい対象です。 ※以下は iPhone / Android アプリを開発する上でのガイドラインではありませんのでご注意ください。あくまで『LDNReader』は一例にすぎず、Android の概念を学習するのが目的です。 ※実際にダウンロードする際は以下よりお願いします。 iPh
スマホサイトの作り方で、あんまり書かれてないことを書いてみた - Kaleidoscope
【スマホ対応サイト制作のより詳しい記事はこちら】 1.メニュー編 2.HTMLとCSSで画像を操る編（前編） 2.HTMLとCSSで画像を操る編（後編） スマホサイトの作り方関連のブログとかを見てて、viewport周りの基本的な設定は書かれているのですが、 個人的に重要だと思うポイントが、なかなかどなたも書いてらっしゃらないような気がするので、まとめてみました。 それは、 とにかく内側のHTML要素をハミ出さないように作る どうしてか？ ふつうは、スマホサイトというのは縦スクロールしかさせたくないですよね。 例えば、iPhoneで言うPortrait（縦）表示のとき、横幅320pxを超えたページ構成になると、 おかしな横スクロールが発生してしまいます。 viewportで拡大とかの禁止をおこなっていても、そうなります。 （まぁ、拡大とは意味が違うので当然なのですが。。。） 具体的にどうい
モバイル開発に欠かせないテストツール14選
Adobe Device Central CS5 Adobe CS5 をパッケージ購入すると一緒についてくるモバイルデバイスのテスト環境。様々なエミュレーターが存在しますが、オールインワンで素早くテストがしたい場合はこちらがオススメです。特に Flash を活用したモバイルサイトをテストするのであれば欠かせない存在です。 Android SDK Javaで開発されているので、Mac, Windows, Linux で動作する公式のエミュレーター。2011年1月現在、Android OS 1.1 〜 2.3 までのテストが可能。エミュレーターは実際のスマートフォンと同じ動作をするので、ディフォルトのブラウザだけでなく、Opera Mini や Firefox など他のブラウザをインストールしてテストすることができます。 iOS SDK XCode も含め諸々ダウンロードしなければいけませんし
スマートフォン用のサイト作成に役立つテスティングツール７:phpspot開発日誌
7 Useful Tools for Mobile Website Testing | Tools スマートフォン用のサイト作成に役立つテスティングツールが７つ紹介されており、便利そうなものをピックアップしてみました。 サイトチェッカー W3C mobileOK Checker W3Cのモバイルサイトチェッカー。サイトのURLを入れるだけで、対応状態を〜％として表示してくれます。 何を改善すればポイントを上げられるか？についても詳細にレポートしてくれるところがいいですね。 mobiReady URLを入力するとサイトのモバイル対応状態をレポート結果として表示してくれる。 レポート結果は次のようになります 機種が微妙ですが、JAVAをつかったシュミレーターで動作確認できたりします Gomez Mobile Website Readiness Test URLのほか必要情報を入れるとサイトのモ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
作成したサイトをタブレットや携帯デバイス、テレビなどでどう見えるのかを確認できるフリーツール「Screenfly」 | ライフハッカー・ジャパン
Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報*ホームページを作る人のネタ帳
iPhone 4の表示をシミュレートするオンラインサービス -iPhone 4 Simulator