サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
●HTML5ビデオを埋め込む <video id="videotest" width="640" height="480" controls="controls" preload="auto" poster="bg.png" onabort="log('abort');" oncanplay="log('canplay');" oncanplaythrough="log('canplaythrough');" ondurationchange="log('durationchange');" onemptied="log('emptied');" onended="log('ended');" onerror="log('error');" onloadeddata="log('loadeddata');" onloadedmetadata="log('loadedmetadata');
スマホアプリ開発はHTML5／jQuery Mobileとネイティブ どっちがいいの？ 第2回テックヒルズまとめレポート 柴田克己 2012/4/27 インストールする広告なんて、あり得ない 3人目の登壇者は、カヤックの比留間和也氏だ。比留間氏は「最新事例に見るHTML5でつくるアプリの可能性」と題し、同社が広告案件として実際に手掛けたキャンペーンアプリの開発事例を通じて、Webアプリベースで開発を行うことのメリットとデメリットを紹介した。 同社では、以前よりキャンペーンサイトや商品紹介サイトの開発を多く手掛けているが、近年ではそのサイト制作自体が、以前に比べて「動きのある、ゲーム的なWebアプリを作るような感じにシフトしている」という。またクライアントから「Flashを使わないで制作してほしい」という要望も増えつつあり、状況は大きく変わってきているとした。 比留間氏は、同社が手がけた事
ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいなUI をCSS と超簡単なJavaScript （jQuery 使用） で作ってみたので紹介。 久々にこの手のネタ書いた気がしますけども… ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいなUI をCSS と超簡単なJavaScript （jQuery 使用） で作ってみたので紹介。多分言葉で言っても伝わりにくいと思いますので実際のサンプルをまずは見てみてください。CSS で作るスマートフォン向け片手操作メニュー サンプル 現在最新版の Firefox
iOSシミュレータ内のMobileSafariを、スマートフォン向けWebサイトの開発に使っている人は多いのではないでしょうか。 Safariで言うところの「Webインスペクタ」、GoogleChromeで言うところの「デベロッパー ツール」がiOSシミュレータ内のMobileSafariでも使えたらなぁ、と思いませんか？ 上記のサイトの情報によれば、プライベートメソッドを実行することでMobileSafari内でWebサーバを起動、iOSシミュレータの外からMac側のブラウザで「http://localhost:9999」にアクセスしに行くと、Safariで言うところの「Webインスペクタ」相当の機能がブラウザ越しに使えるということです。 実際にやってみました。大変便利ですね！ そこで、iOSシミュレータ内のMobileSafariの「Webインスペクタ」の有効/無効を切り替えるアプリ
スマートフォンサイト制作で、iPhoneとAndroidで表示がズレてしまった時の対処法。 例：中央揃えにしたが、Androidだとちゃんと表示されるのに、iPhoneだと若干左にズレて中央揃えにならないAndroidでの表示。iPhoneでの表示。なぜか左にズレている。 複雑なレイアウトをしたわけでもなく、ただ単に中央揃えにしたかっただけです。 なのに表示が違う。理由は不明… こういう場合は、CSSハックに頼らざるを得ません。 結論から言うと、iPhone4でのみCSSが適用されるようにするには、次にように記述します。 <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" /> これにより、iPhone4
iScroll finally received a complete rewrite. Nowit’s smoother than ever and adds some new important features: pinch/zoom, pull down to refresh, snap to elements and more custom events for a higher level of hackability. Download Screencast Live DemoGitHub Forum Project info Last code update: 2012.07.14 – v4.2 Device compatibility:iPhone/Ipod touch >=3.1.1,iPad >=3.2,Android >=1.6, Desktop Webk
初めての投稿となります。エンジニアのmatsuです。 携帯向けウェブサイトを1時間でスマートフォン対応する方法を紹介します。 概要 2011年4月7日のニュースにて携帯電話の新規契約数のうち、スマートフォンが占める割合が50%を越え、スマートフォンが本格的に普及する兆しが見えてきました。 現在、スマートフォン向けサイトを新規構築するためのチュートリアルは数多く出ていますが、既存の携帯サイトをスマートフォンに最適化する方法があまり紹介されていないのでこの記事で紹介したいと思います。 このチュートリアルを行うと以下のようになります。 実装 全部で8ステップあります。 このチュートリアルではブログのトップページを例にとって説明します。 前半では文字コードの変更、HTMLの変更といった構造を変更します。後半では絵文字や文字スタイルを行い、仕上げとしてHTML5のバリデーションを行っていきます。最初
ChocolateChip-UIはHTML5製のスマートフォン最適化サイト用フレームワーク。 ChocolateChip-UIはHTML5製スマートフォン用のオープンソース・ソフトウェア。スマートフォンはこれまでのデスクトップ型に比べると圧倒的に画面サイズが小さい。そのためWebサイトのデザインを行う上で注意すべきことが色々ある。またiOS風にデザインするのも難しい。 リスト そのためデザインテンプレートを使うのが一般的になっている。Webデザインだけを提供するもの、jQuery Mobileのように統合的に提供するものなど色々あるが、ChocolateChip-UIは後者に属するスマートフォンWebサイト向けフレームワークだ。 ボタン ChocolateChip-UIで提供されるのはテーブルビュー、アコーディオンビュー、ナビゲーションバー、リスト、各種ボタン、ポップアップ、スライダーなど
スマホ向けのWebアプリ用JavaScript製フレームワークです。 動作サンプルを日本語にしたのでお手持ちのiPhoneなどでサンプルを触りながら記事を読んでいただけると嬉しいです。 [note]お持ちでない場合でも、Safariでご覧頂くと同様の動作確認が出来ます。Chromeでも多少確認出来ました。また、デモ動画もいくつかありますので宜しければご覧ください。[/note] サンプル ※Androidも動くらしいですが、僕が持っていないのでiPhone以外は動作確認していません。 サンプルにアクセスすると以下のような画面になります。 結構な数のサンプルが用意されているのですが、ここでは一部ご紹介したいと思います。 アコーディオン アコーディオンコンテンツです。タップで開閉します。 ページめくり ページめくりです。フリックすると本をめくるようなアニメーションエフェクトで次のコンテンツに進
携帯電話 (Nokia, Sonye Eicsson,iPhone) やMac、写真、吉田カバン、スマートフォンサイト制作 (HTML5,CSS3) などについてのブログiPhone 4とiPhone 3G/3GSとで、スタイルシートを切り換える方法を考えてみました。iPhone 4のディスプレイ解像度は従来機と比べて縦横それぞれ2倍になりましたが、iPhone 4のSafariではviewportを従来どおり「width=device-width」と指定しても、320×480ピクセルの画面を2倍に拡大して表示されるため、ディスプレイ解像度の違いを考慮しなくても、従来と同様に表示できます。 しかし、これでは画像にジャギーが発生してしまうので、iPhone 4を区別できないかと色々探っていたところ、JavaScript（DOM？）に「window.devicePixelRatio」と
11/16/2010:It’s been a long time since my fixed positioning script was released. I’m very pleased thatit was the precursor for much more robust solutions to this problem. Please continue on if you’d like to read through the history of this hack. If you’re looking for a real-world solution please take a look at one of the following, ranked (subjectively) in order of scroll performance: Sencha Tou
Tile5は地図およびタイル表示を行うiOS用Webサイト向けライブラリ。 [/s2If] Tile5はJavaScript/HTML5製のオープンソース・ソフトウェア。HTML5を試してみたいと思うならば、モバイルから開始するべきだろう。さらに言えば表示領域の大きいiPad向けサイトをHTML5で作ってみることをお勧めする。対象を限定すれば既存サイトへ与える影響も大きくない。 地図表示 iOS向けのサイトを開発する時に一から開発する必要はなくなってきている。既に多数のライブラリやテーマが存在する。それらを必要に応じてピックアップして組み合わせるだけで素敵なサイトができあがる。地図や写真を扱うならTile5を使ってみよう。 Tile5は主に二つの機能がある。一つは地図表示のライブラリだ。iPad対応になっているライブラリで、左側に地図サービスの切り替えや機能切り替えが行える。ルート表示やピ
PeekはiPhone用のフリーウェア（ソースコードは公開されている）。iPhoneではWebKitをベースにしたMobile SafariがWebブラウザとして利用できる。Safariとはいえ、iPhone用とあって異なる動作をする部分も多い。CSSやメタも特別なものが追加されている。 アプリを立ち上げた所 そのような中でiPhone向けのWebアプリケーションを作っていても、実際にiPhoneで使ってみたら動作が異なるというケースは少なからず存在する。だがiPhoneの小さな、限られた機能ではデバッグもままならない。そこで使ってみたいのがPeekだ。 PeekはiPhoneアプリとして提供されるが、システム的にはほぼHTML/JavaScriptで作られてる。アプリを立ち上げたら、塔のマークのアイコンをタップする。すると専用のWebサーバが内部で立ち上がり、8080番ポートでアクセスで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
