アイコン(PNG)を指定するには、linkタグで指定する方法と、特定のファイル名で保存する方法の2種類があります。 アイコン画像をlinkタグで指定する 全てのデバイス共通のアイコンを指定するには、次のコードをHTMLのheadタグ内に記入します。 <link rel="apple-touch-icon" href="apple-touch-icon.png" /> さらに、デバイス別にアイコンを変更するには、「sizes」属性でサイズを指定します。iPhone 4(Retinaディスプレイ)の記入例は次のとおりです。 <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png" /> このようにして3種類のサイズのアイコンを指定すると、次のようなコードになります。 <link rel="a
iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」 2011年02月17日- Skinkers Labs : TouchSwipe iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」。 タッチパネルを触って左にスライド、右にスライドといった操作をスワイプといいますが、このイベントを取得するjQueryプラグインのご紹介です。 1本指だけではなく、2本指でスワイプした際のイベントを取ることも出来ます(それぞれ区別可能) ブラウザ上でiPhoneアプリっぽい動作を簡単に実現できますね。 demoをiPhone等で見てみましょう(違和感なくスワイプできるはずです) 1本指スワイプのデモ 2本指スワイプのデモ スワイプを使った画像ギャラリー 実装はjQueryベースということでや
モバイルアプリケーションをHTML/CSS/JavaScriptなどのWeb標準技術を用いて開発するためのさまざまなツールや環境が登場しています。1つ前の記事で紹介した「jQuery Mobile」もその1つですが、それ以外のものもここでまとめて紹介しましょう。 jQuery Mobile jQuery Mobileは、JavaScriptライブラリとして知られるjQueryのプラグインです。オープンソースで提供されています。 「マークアップドリブン」をコンセプトとし、HTMLを記述していくことで、あらかじめ用意されているボタン、メニュー、ダイアログボックス、などのモバイル対応のタッチユーザーインターフェイスを備えたアプリケーションを開発できます。 クロスプラットフォームに対応し、iOS、Android、WebOS、Windows Phone、Symbianなど多数のデバイスでそのまま動作
こんにちは。普段からiPhoneを愛用している橋本です。 最近、「せっかくiPhone持ってるんだし、iPhone向けのアプリ作ってみようかしら?」と思い立ったのですが、iPhoneのネイティブアプリを作るには、"Objective-C"と、"cocoa Touch"というiPhone/ipodTouch向けのフレームワークを理解する必要があり、また、自分で開発したアプリを実機に入れて動かしてみるには、そこそこの費用と各種手続きが必要だったり(iPhoneエミュレータ上で動かす分には問題ないのですが…)と、何かと大変です。 「何かもっと手軽にiPhone特有の機能を活かしたアプリを作る方法はないかなぁ。。」と考え、思い立ったのがWebアプリ。Webアプリなら、今までの知識+αでアプリを作成することが出来るのではないかと。そこで、今回から数回に渡ってiPhoneとjavascriptを使って
キャッシングサービスとは、要するにお金を借りることで、最近はインターネットを活用して業者に融資申請をして、指定の銀行口座へ現金振り込みをしてもらえるという、大変便利なサービスを利用することができます。しかし、キャッシングをしているという事実を家族にばらしたくないという方も多いので、銀行口座への振込は履歴が残ってばれる可能性があるから、望ましくないと考える方も多くいます。そんな時には、キャッシング業者の店舗に足を運んで、直接受け取りの方法を選択することができます。キャッシング業者のほとんどが無人ATM機を導入していて、土日祝日関係なく、いつでも融資申請をすることができます。その場で所定の手続きを進め、審査に通過することができれば現金を手にすることができます。この方法だと、銀行口座を経由することなく、融資金を借り入れすることが可能となります。一度所定の手続きを踏めば、キャッシング専用のカードが
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / H.264で音声はAACな動画ファイルをもらって、video要素として突っ込んでいたんだけど、なんだか、iPhone4では再生できていたがiPhone3GSでは再生できていなかった模様。確認したらiPhone3Gでも再生できない状態になってた。ダメな動画の音声は、 サンプリングレート:32000Hz、ビットレート:94kbps だった。同じく幾つかもらった動画で、再生できていたものの音声は、 サンプリングレート:48000Hz、ビットレート:111kbps で、これは再生できていた。ちなみに、ダメだった動画をフリーの XMedia Recode とかいうエンコードソフトで、iPhone3Gとか
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / iPhone3GSとiPhone4のuserAgentは同一なので、これを判別するには、Retinaディスプレイであるか否かというのがわかる window.devicePixelRatio ってプロパティを見て判別しないと無理っぽい。(端末の1pxが何pxなんだーってやつ) あとはcssのmedia queryでも似たようなのがあり、これぐらいでしか判別できない風。サーバーサイドだと無理ってことか。
► 2023 (1) ► 1月 (1) ► 2022 (1) ► 3月 (1) ► 2021 (6) ► 12月 (1) ► 11月 (2) ► 9月 (2) ► 1月 (1) ► 2020 (15) ► 12月 (3) ► 11月 (5) ► 10月 (2) ► 4月 (3) ► 2月 (1) ► 1月 (1) ► 2019 (16) ► 11月 (1) ► 9月 (7) ► 8月 (1) ► 7月 (1) ► 6月 (1) ► 5月 (1) ► 4月 (2) ► 2月 (1) ► 1月 (1) ► 2018 (22) ► 11月 (3) ► 10月 (2) ► 9月 (6) ► 8月 (4) ► 7月 (2) ► 5月 (1) ► 4月 (1) ► 3月 (2) ► 1月 (1) ► 2017 (23) ► 11月 (4) ► 10月 (3) ► 9月 (3) ► 8月 (3) ► 7
IE6, 7, 8, 9をはじめとする主要ブラウザ、iOS, Androidのスマートフォンに対応させるための@font-faceの指定方法を紹介します。 The New Bulletproof @Font-Face Syntax [ad#ad-2] 各ブラウザ・スマートフォンに対応させる@font-faceの指定方法 各主要ブラウザ、スマートフォンに対応させる@font-faceの記述は、下記のようになります。 @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?') format('eot'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-w
弊社代表の著書、「iPhoneとツイッターで会社は儲かる」の出版記念と、巷で話題の「基礎文法最速マスター」ブームに便乗して、iPhone(iPod Touch)向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。 2010/11/18追記: iPhone向けサイト制作の書籍を執筆しました! 既存のデスクトップ向けサイトをモデルにした iPhoneに最適化したサンプルサイトの紹介と コードの解説をしています。 iPhone向けサイト制作の入門書に最適です。 「HTML5+CSS3で作る 魅せるiPhoneサイト」 基礎編 対象ブラウザはMobileSafariです レンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張(CSS)があります。検証の際は、通常のSafariのウィンドウサイズを狭くし
Androidの「target-densitydpi」でviewportの調整 どうも色々調べているとAndroidのviewport調整はtarget-densitydpiというプロパティで行うのがよさそうです。 「target-densitydpi」はAndroid2.0以上で利用でき、表示時のdpi(dots per inch/1インチの中に何ドット表示するか)を指定できます。 <meta name="viewport" content="width=device-width;target-densitydpi=device-dpi"> device-dpiを指定すると画面解像度とディスプレイ表示が同じサイズになります。これでかなり直感的でわかりやすくなると思いますが、画像が多いデザインだととファイルサイズが気になるところです。 キーワード指定では「low-dpi(120dpi)」、
Captcha security check sohaya.com is for sale Please prove you're not a robot View Price Processing
禁煙してから3ヶ月、着実に体重が増加しているishidaです。 先週土曜日にCSS Nite LP13に参加してきました。 ちょうどスマートフォンのデザインとコーディングのお仕事が進行中でしたので、とても参考になりました。現在セミナー内容を振り返り学習中です。 それとCSS Nite関連ですと、何やら CSS Nite LP14 にて弊社メンバーが登壇するとかしないとか。 スマートフォンコーディングでは、CSS3で角丸やらグラデーションが使えるので画像の使用頻度は少なくなります。ボタンまわりについてもCSSのみで実装する機会が多いです。 フォームのsubmitボタンをCSSのみで表現する際には、ちょっとクセがありましたので 解決方法をご紹介します。 検索するsubmitボタンを、以下のようなデザインをCSSのみで実装することにします。 まずは簡単に横幅と背景色・角丸をCSSで設定してみます
いくつかAndroidサイト制作の仕事をしていて、いろいろandroid機種でデバッグをして気づいたことがあります。 その中で一番はまったのが、「Androidサイトは横幅何pxで作ればいいのか?」という点です。 今では解決方法を見つけたので以下、まとめます。 Androidのデフォルト解像度について Androidサイトを作る際、横幅何ピクセルで作ればいいのかなあと思い、Android機種の解像度一覧の表を探すと思います。 ただ、その情報を鵜呑みにしてサイトの横幅を設計すると、失敗することになるのです。 なぜなら、「機種自体の解像度性能は高くてもwebブラウザのデフォルトの解像度設定が低くなってるケースが多いから」、なのです。 たとえば、IS03は640*960という解像度を持ってますが、viewportでサイズを指定しないで表示したときの横幅は、320pxなんですね…。 android
iPhone4 がついに届いて興奮気味のgunjiです。 2週間待ちでした! 待ってる間に、iPhone4も対象としたWEBアプリ(ネイティブアプリのweb view を含む) のコーディングで気をつけることについておさらいしていたところ、 Retinaディスプレイに画像を最適化させるのって意外とめんどいよね! という現実に打ちのめされたので、まとめてみます。 そもそもRetinaディスプレイってなんでしたっけ? はいはい、iPhone4の目玉のひとつで、今までの2倍の解像度で 画面がとってもキレイに見えるんですよね! 拡大しなくても小さな文字が読めるなんてサイコー! ところが、今までiPhone向けに作ったサイトをこのiPhone4で見るとちょっと 不思議な状態になってることがあるのです。 iPhone4で見たらなんか画像がにじんでるように見える・・・?! こういうイメージです。 そう、
Android端末のdevicePixelRatio WebKit系のブラウザではdevicePixelRatioというプロパティが定義されています。これは画像1pxを実際のデバイス上で何pxとしてレンダリングを行うかというもの。 CSSでdevicePixelRatioを特定できる -webkit-min-device-pixel-ratioなどは iPhone4のRetina Display対応などで一時期注目されましたね。 【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】 | KAYAC DESIGNER'S BLOG JavaScriptでは次のように取得できます。 window.devicePixelRatio そこで、Android端末のdevicePixelRatioがどうなってるかTwitterで色々な方に協力いただき調べてみました。
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー!古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く