4歳でiPad中毒も--乳幼児のスマホ・タブレット利用の危険性とは
ベネッセ教育総合研究所の「乳幼児の親子のメディア活用調査 報告書」（2013年3月）によると、母親がスマートフォンを使用している2歳児のスマートフォンとの接触は、「ほとんど毎日」が 22.1％、「週に3～4日」が10.9％。子どもにスマートフォンを使わせる場面は、「外出先での待ち時間」が2歳児では53.3％と最多。続いて、「親が家事などで手をはなせないとき」が14.3%となっていた。さらに、0〜6歳の約1％前後が「家で食事をしている間」利用していることが分かっている。 デジタルネイティブ世代がデジタル機器を使いこなす能力は恐ろしく高い。寝かしつけ目的でiPadを使っていたところ、我が家でも当時0歳だった子どもが、iPadやiPhoneでお気に入りのアプリで遊ぶようになっていた。0歳児でも、スリープ解除、アプリ起動、YouTube動画を履歴から閲覧などができてしまうのだ。いま育児をしている方
スマホWebサイト/ハイブリッドアプリ開発を高速化するJavaScriptフレームワークまとめ | BACKEND AS A SERVICE mbaas BLOG
デスクトップ向けのWebサイト開発ではjQuery/Backbone.js/AngularJS/Ember.jsなどを採用するケースが多いのかなと思います。しかしスマートフォン、タブレット向けのWebサイトとなるとまた勝手が違います。特にUI周りの取り回しであったり、タッチ/マルチタッチイベント、スマートフォン特有のAPIなどを適切に扱えなければなりません。何よりハードウェアの性能がデスクトップより低いので高速にストレスなく動作させるためには軽量でなければなりません。そこで今回はスマートフォン、タブレット向けのWebサイトを構築したり、HTML5によるハイブリッドアプリを開発するのに使えるJavaScriptフレームワークを紹介します。ぜひ皆さんの開発に役立ててください。mBaaSお役立ちブログ トップ> ブログ> Tips> スマホWebサイト/ハイブリッドアプリ開発を高速化するJava
スマートフォンサイトのコーディング Tips あれこれ | バシャログ。
ゴールデンウィークはゴールデンに過ごせそうにない Latin です。 今回はスマートフォンサイトのコーディング周りでのあれこれをまとめてみます。 先日の macky の記事、「スマホサイトの矢印付きメニューをCSSのみで実装する。」もあわせてご覧ください。 viewport 系の設定 描画サイズをデバイスの横幅に合わせる、拡大縮小を不可に これが一番よく見る形式でしょうか？ <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 文字サイズの自動調整をオフにする 各スマホブラウザでは、横向きにすると text-size-adjust の処理が走り、自動で文字サイズを最適化（拡大）する機能があります。 読
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
ようやくこのブログ用の スマートフォン用テーマ作りました – VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-
現在、iPhoneでこのブログにアクセスすると、上記のようなスマートフォン用のテーマで表示されます。 （※4/21 1:30 Androidでもスマートフォンテーマで表示されるようにしました！） 今回、プラグイン（wp-touchなど）や既存のiPhone用のテーマを改良していく方法ではなくて、 今使っているPC用のテーマをベースに、テーマを作る方法にしてみました。 とりあえずカタチにがなったので、これからちょっとずつ見やすいテーマ目指して改良頑張ります☆ （あといろいろコード見直してもうちょいスムーズに表示されるようにします＞＜たぶんいろいろと無駄なことしてるはず。） で、スマートフォン用デザイン。 やらなきゃやらなきゃと思いつつ、 なにを気にして作ったらいいか実はイマイチよくわかっていなかったのです。 スマートフォン用デザインの基本などに関しては、 今回以下のページがとっても参考になり
WordPressサイトをスマートフォン表示へ対応させるためにやったこと
MS Office カテゴリ MS Office (100) 関連タグ Access (35) Excel (83) PowerPoint (8) Python (0) YouTube (6) 入門 (34) Web カテゴリ Web (85) 関連タグ facebook (4) jQuery (10) linux (3) Photoshop (18) PHP (24) tips (21) twitter (10) WordPress (76) YouTube (6) アプリ (28) イラスト (42) デザイン (15) ブログ (39) 入門 (34) 分析 (20) Adobe カテゴリ Adobe (28) 関連タグ facebook (4) Fresco (2) Illustrator (8) JavaScript (7) Photoshop (18) Premiere (3)
スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン
※コメントにも頂いておりますが、この公開版はバグがありますので、承知の上でご利用になるか、ご自身でカスタマイズされる方がお使いください。 スマートフォンサイトにおいて、左のムービーのようなフリック動作ができる画像スライドのjQueryプラグインを作りました。（ムービーはiOSシミュレータによるデモです）iPhone・Androidでご覧の方はデモに直接アクセスしてください（ムービーは再生されません）。 【デモを見る（iPhone・Androidで見てください）】 【ダウンロード】 なぜプラグイン化したか 横向き対応がハードルを高くする ご自身でこの手のUIを組んだ経験がある方はわかると思いますが、絶対配置（position:absolute）を使ったリキッドレイアウトを組むのはなかなか手の込んだことが必要で、今後の仕事で都度ゼロからUI作成を行うのは効率が悪くなってしまうと思ったからです。
jQuery mobileはじめの一歩！「jQuery mobileで簡単なページを作成してみる」のまとめ | jQeryMobileでサイトをつくろう
jQuery Mobileの概要 jQuery Mobileは、jQueryをベースとした、スマートフォン向けのフレームワーク※1です。 スマートフォン向けの直観的かつ使いやすいUIを瞬時に作成できます。 ※1フレームワーク：アプリケーション制作の土台を作ってくれるソフトウェアのこと デザイナー好みの「手軽さ」と「自由さ」を兼ね備え、デベロッパーが求める「リッチなヴィジュアル」のスマートフォンUIが作成できます。 指定した形式でHTMLを書くことで、自動的にスマートフォン向けにデザインされたネイティブアプリケーションさながらのページが瞬時にしてできあがります。（jQuery Mobileが作成できるのは、ウェブアプリケーションです。） 2010年10月にアルファ版がリリースされ、2011年11月ついにjQuery Mobile1.0正式版が公開されました。現在も、jQueryの開発者で
スマートフォン、タブレット、デスクトップのためにレイアウトの幅をどのように設計すればよいか
iPhoneやAndroidなどのスマートフォン、「新しいiPad」などのタブレット、そしてデスクトップなど、さまざまなデバイスの幅に対応させるResponsive Web Designのために、どのようにレイアウトの幅を設計し、いくつレイアウトを用意するのか3つの方法を紹介します。 各デバイスの幅は、2012年3月のデータです。 A Simple Device Diagram for Responsive Design Planning [ad#ad-2] 下記は各ポイントを意訳したものです。 キャプチャに使用している画像は元記事よりPSDファイルでダウンロードできます。 各デバイスのサイズ レイアウトを3つ レイアウトを4つ レイアウトを6つ 各デバイスのサイズ まずは、2012年3月現在の各デバイスの幅です。 ※クリックで拡大 ポイント 上段：ポートレイト（縦置き）、下段：ランドスケ
PC・モバイルSEO ： iPhone/Safari、Xperia・IS/Android用サイトの作り方
iPhone（Safari）やXperia、IS（Android）用のサイト制作について参考になる記事をまとめておきました。 このまとめが、あなたの知識の穴を埋めてるのに役立てば幸いです。 他にも良い情報や、「いやこのサイト・この本だけ見れば万事OKだから」とかそういう情報があれば教えて下さい。 ※紹介する記事に過去エントリと重複するものもありますがご容赦下さい。 初心者向け iPhone用の画面幅調整について、初心者向け。 → 今から始めるiPhoneコーディング iPhoneの画面幅調整について、より深い言及。 → iPhoneとViewPortとXHTML Mobile DOCTYPEと.mobiドメイン 画面幅調整とアクセス制御とCSSに関する知識について。 → iPhone向けサイト構築 基礎文法最速マスター meta name=”viewport”や表示調整に関する
CSS で作るスマートフォン向け片手操作メニュー
ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。 久々にこの手のネタ書いた気がしますけども… ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック （タップ） で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript （jQuery 使用） で作ってみたので紹介。多分言葉で言っても伝わりにくいと思いますので実際のサンプルをまずは見てみてください。 CSS で作るスマートフォン向け片手操作メニュー サンプル 現在最新版の Firefox
jQuery Mobileを使った国内スマホサイトまとめ (1/3)
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
iPhoneサイト制作（スマートフォンサイト制作）最適化のために最低限必要なreset.cssをつくってみよう | HTML5でサイトをつくろう
iPhoneサイト制作（スマートフォンサイト制作）をする上で、ソースの無駄な記述を最低限に抑え、通信速度を上げることが「最適化」へとつながります。 スマートフォンサイト用に最適化したcssを制作する場合、reset.cssの記述を減らすことで、重複する命令を減らして、読み込みのスピードを上げることができます。 今回はスマートフォンサイトを制作する上で、最低限必要となるreset.cssの記述について紹介します。 iPhoneサイト制作（スマートフォンサイト制作）にreset.cssは必要？ そもそもreset.cssは各ブラウザ(IE・FireFox・safariなど)のブラウザ間のデフォルトのCSSの違いをなくすために読み込むものであり、必ずしもコーディングの際に必要となるものではありません。 PCサイトの場合は様々なブラウザやそのバージョンによって独自のデフォルトスタイルがあるため、r
【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする HTML テンプレート。
こんにちは、ウェブ開発の林です。 スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。 ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。 スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。 こちらを参考に組んでみてはいかがでしょうか。 HTML テンプレートコード（ヒント付き） こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。 追記： ライセンスフリーです。自由に使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <!--
スマフォサイト作る際に覚えておくと便利なモバイル用jQueryプラグインいろいろ:phpspot開発日誌
8 Best jQuery Mobile Plugins | ZoomZum スマフォサイト作る際に覚えておくと便利なモバイル用jQueryプラグインがまとまっていましたのでご紹介。 １から作るとかなり大変そうな機能もライブラリで瞬間的に実装できます。一通りチェックした上でご紹介。 Drag And Scale For IOS ブロック要素をピンチイン、アウトによって拡大、回転させることも可能です。これでiPhone向けのWEBサイトといってもアプリのような自由度が得られます（デモ）。 こんなことできるんっ、という声が出てしまうかも（Androidはドラッグのみ） jQuery Mobile Photo Album リッチなフォトアルバム実装が可能 Jquery Mobile Device Drag And Drop 要素のドラッグ＆ドロップが可能 Jquery Swipe スワイプイベン
スマートフォン用ページに振り分けるときはrel=”canonical”を設定する
iPhoneやiPad、Android端末の普及でスマートフォン専用のページを用意するサイトも増えてきています。 スマートフォンからのアクセスに対して「リダイレクトによってスマートフォン専用のURLに振り分けるとき」の注意点を今日はお伝えします。 rel=”canonical”タグで、対応するデスクトップ用ページのURLを指定してください。 重複コンテンツの発生を防止するためです。 現状GoogleはデスクトップPCとスマートフォンを区別せず同等に扱います。 スマートフォン用の検索結果も用意していません。 共に、ウェブクローラのGooglebotがクローリングします。 ※従来のモバイル端末はモバイルクローラのGooglebot-Mobileがクローリングします。詳しくはこちらの記事を参照。 スマートフォン用のコンテンツはデスクトップ用のページと、完全ではないにしてもほぼ同じになるはずです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
flipsnap
スマートフォン対応、気をつけたいトラブル
http://www.codiqa.com/builder
スマホアプリの作り方【超まとめ】UI編：スマホアプリのデザイン／グラフィック描画に役立つ記事39選 - ＠IT