今や「スマートフォン」ブームである。 スマートフォンは、これまでの携帯電話とはかなり違う情報通信機器だ。PCに近い多彩な機能を備え、画面も操作方法も大きく違うことで新しい利用シーンが広がる。 ただ、そんなスマートフォンもデメリットはある。「これまでより料金が高くなった」「これまでよりバッテリーが持たない」「使い勝手は前の携帯電話の方がよかった」などを心配する人も多いだろう。 これは、 多機能な分、データ通信(パケット通信)が多くなるので、特にパケット通信費分が高額になる 同じく、データ通信の発生頻度が高まるので(待受時間のスペックはこれまでの携帯電話と同じでも)相対的によりバッテリーを消費する 電話をかけるとき、携帯電話は瞬時に扱えたが、スマートフォンは数ステップ踏む必要がある などの理由から、 スマートフォンに興味はある。でも、今までの携帯電話のほうがよかったと後悔しそう スマートフォン
スマートフォン向けサイトでは、デスクトップに及ばないスペックや接続回線を考慮し、いかに「軽い、表示が速い」サイトを作るかが重要です。一方で、様々な画面解像度の端末があり、高解像度の画面を搭載した端末向けには、そのサイズに対応した大きな画像が必要となる場合もあります。画像の扱いひとつをとっても、「パフォーマンス」と「見栄え」の双方を考慮しなければいけない難しさがあります。そこで今回は、前回のサンプルサイトを元に、画像関係の扱いや最適化などを解説します。 スマートフォンブラウザーはPNGに対応しています。デスクトップブラウザーでPNGを使う場合、Internet Explorer 6などの古いブラウザーに気をつける必要がありますが、スマートフォンブラウザーの場合は気にする必要がありません。 PNGは圧縮率が高く、容量を抑えることができます。また、アルファチャンネル(透過機能)を持つので、半透明
発見して記事書き始めて、もしや他でも紹介されているのかと思ったらコリスさんとかでも紹介されてた。なので書くの一度やめてたのですが、やっぱりこのサイトは、もっと広く知られるべきかと思ってご紹介。 なんというか、きっちり絞ってまとめるっていうのはそれだけで価値があるんだなと感じさせられるWebサイトでもありますよね。 素材、デザインなんでもあり 特に注力したいのがインターフェイスデザインの豊富さ。 UI Patterns | Mobile Tuxedo とにかく豊富なリソース。 モバイルインターフェイスの中でもカテゴリがたくさんあります。 ナビゲーション コメントインターフェイス ログインインターフェイス 写真ギャラリーインターフェイス この他、マップやサインアップインターフェイス、設定画面、電卓など色々ありますので、モバイル開発者なら一度は目を通しておくといいかもしれませんね。 またインター
jQuery Mobileの採用が国内でも進んでいる。jQuery Mobileは、iPhone/Android、WindowsPhoneやBlackBerryなど、主要なスマートフォンに対応したUIフレームワーク。HTMLに簡単な記述を追加するだけで、スマートフォンに最適化したサイトやWebアプリケーションを制作できる、注目のフレームワークだ。 昨年11月には、待望の「jQuery Mobile 1.0」正式版がリリースされ、実務でも本格的に利用しやすくなった。今後、ますます増えそうなjQuery Mobileを使ったスマートフォンサイトの事例をチェックしておこう。 ※商品紹介/キャンペーンサイトに、「太鼓の達人学園(太鼓の達人×AKB48キャンペーンサイト)」を追加しました。(2012年3月1日16時更新) ※ネットサービスに、「一休.com」「recbike」を追加しました。(201
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい! ↑私が10年以上利用している会計ソフト! スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください! 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック(タップ)範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
こんにちは、ウェブ開発の林です。 スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。 ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。 スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。 こちらを参考に組んでみてはいかがでしょうか。 HTML テンプレートコード(ヒント付き) こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。 追記: ライセンスフリーです。自由に使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <!--
NTTドコモの回線が悲鳴をあげている。平成23年6月から立て続けに発生した、ドコモのトラブルに対して遂に総務省が行政指導を行った。対象となった事故は下記の五件。 1 平成23年6月6日に発生した事故(携帯電話の音声通話、パケット通信が利用しづらい状況となった事案) (1)影響時間:13時間9分 (2)影響サービス:音声通話、パケット通信(電子メール、インターネット接続等) (3)影響利用者数:約150万 2 平成23年8月16日に発生した事故(SPモードのパケット通信が利用しづらい状況となった事案) (1)影響時間:7時間 (2)影響サービス:SPモードに係るパケット通信(電子メール、インターネット接続等) (3)影響利用者数:約110万 3 平成23年12月20日に発生した事故(SPモードメールにおいて、一部利用者のメールアドレスが別の利用者のメールアドレスに置き換わる状況等が発生した事
前回の続きで、マルチデバイスの具体的な対応方法をviewportの設定とcssの出し分けの2点でまとめてみました。 スマホ、タブレットに対応させるための方法として、やることは主に以下の二つです。 1,viewportの設定 2,cssの出しわけ それぞれまとめてみました。 viewportの設定 viewportとは、スマートフォンのブラウザのウィンドウサイズに該当するものです。 一方、スマートフォンの画面サイズ、いわゆるdevice-widthは980pxもありません。 iPhoneでいえば、viewportは横幅980px、device-widthは横幅320px、縦幅480pxです。 通常のPCサイトを見ると、ブラウザ上で縮小されて表示されます。 例えば、コンテンツ幅が800pxのサイトでは、縮小されて横幅が左右合計180pxの余白がでます。 また、スマホの画面サイズが横幅32
2011年、当サイトでブックマークが多かったエントリーBest 20+αの紹介です。 今年は、HTML5、CSS3、スマートフォン、の3つが目立ったように思います。来年もこの流れは変わらない感じですかね。 コリス [ad#ad-2] 当サイトの購読は、RSS Feedをご利用すると便利です。 コリスのRSS Feed また、Twitterではここに掲載していないウェブ関連の話題、クリエイティブなもの、面白いものを数多く紹介しています。 Twitter@colisscom [ad#ad-2] 2011年、ブックマークが多かったエントリー 漢字も揃ってる、日本語のフリーフォントのまとめ -2011年版 美しい日本語を使いたい、ワンランク上のビジネスメールの作法 全653種、商用利用無料、再配布可能な太っ腹のフリーアイコン -Default Icon サイトやブログの運営でよく使いそうな.hta
編集部注:こちらの記事は諸事情によりURLを http://www.atmarkit.co.jp/fsmart/index/matome/smapho.html に移動しました。ブックマークなどは移動先URLでお願いします(2012年1月6日) 夏休みの自由研究にマイコンボードで「電子サイコロ」を作ったり、音楽プログラミングをしたりしてみよう (2017/7/24) 子ども向け電子工作&プログラミング用マイコンボード「chibi:bit」の基本的な使い方を紹介する企画。夏休みの自由研究に「電子サイコロ」を作ったり、音楽プログラミングをしたりしてみよう 子ども向け電子工作&プログラミング用マイコンボード「chibi:bit」の基本的な使い方 (2017/7/20) 子ども向け電子工作&プログラミング用マイコンボード「chibi:bit」の基本的な使い方を紹介する。夏休みの子どもの自由研究など
スマートフォン市場の拡大は、広告主にとって新しく魅力的な、消費者とのコミュニケーションプラットフォームの登場と言える。革新的でエンターテイメント性に優れた新たなデバイスが生み出すユーザの行動の変化に着目し、その特徴をビジネスに活かす。これを可能にするのが、アプリケーションを中心としたGoogleの広告ネットワーク「AdMob」だ。スマートフォンがもたらす消費者行動のパラダイムシフト、「AdMob」の特徴や戦略について、モバイル広告営業部を統括する香村竜一郎氏に聞いた。 スマートフォン市場の伸びがグローバル、国内ともに顕著だ。IDCによると、グローバルのスマートフォン市場の2011年は2010年に比べ55.0% 増加すると予測している。また国内の携帯電話契約者数は1億2,000万台。(社団法人電気通信事業者協会調べ)そのうち、スマートフォンの保持者数は年内に2,100万人を突破し、2014年
最近スマートフォンサイトの案件が増えてきました。そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。…最近スマートフォンサイトの案件が増えてきました。 そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。 すべてのデモ(chromeなどのwebkit系ブラウザまたはスマートフォン実機でご覧ください) download ヘッダーの右にメニュー <h3>ヘッダーの右にメニュー</h3> <!--ヘッダーの右にメニュー--> <header class="header1"> <h1><a href="#"><img src="title.png" alt="SIT
拡大しないと、見えないなぁ・・・ 皆さんがお持ちのサイト、スマホから見たときどんな風に見えるかご存知ですか? これらのキャプチャは、有名なニュースサイトのもので、各ニュースサイト名を検索して、まず表示されるページ(ランディングページ)です。この中で、真ん中の「毎日jp」だけが、スマホ対応されているのですが、いかがですか?どのサイトが見やすいか、使いやすそうか、一目瞭然ですね。中にはアプリが用意されていているサイトもありますが、実際、まずサイトを探すにはスマホのブラウザから検索してアクセスすることの方が多いと思います。ただでさえ狭くて小さいスマホのブラウザにパソコン向けのサイトが出てきたら・・・。他の見やすいサイトを探すのではないでしょうか? スマホのブラウザで検索してみるとわかるのですが、大手企業のサイトですら、まだまだスマホ未対応ものが多く見られます。・・・ということは、早めにスマホ対策
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く