タグ

スマホに関するvent0819のブックマーク (6)

  • 1行のコードでモバイルブラウザに開発者ツールを搭載できるJavaScriptライブラリ「Eruda」を使ってみた! -

    どうも、まさとらん(@0310lan)です! 今回は、スマホのモバイルブラウザに格的な開発者ツールを組み込むことができるJavaScriptライブラリをご紹介します! 「コンソール」機能を使ったデバッグやエラーログの確認、「ネットワーク」機能で通信状態を確認したり、「リソース」機能でCookieデータを確認するなどなど…、開発する上で便利な機能が満載です。 スマホ1つあれば開発者ツールが利用できるので、ぜひみなさんも試してみて下さい! 【 Eruda 】 ■「Eruda」の使い方 それでは、「Eruda」を利用して開発者ツールを使うための準備作業から始めましょう! 準備といってもやることは簡単で、「Eruda」のライブラリファイルをインストールするだけです。 Node.jsの開発環境を持っている人であれば、npmから以下のようにインストールできます。 npm install eruda

    1行のコードでモバイルブラウザに開発者ツールを搭載できるJavaScriptライブラリ「Eruda」を使ってみた! -
  • もう逃げない。HTMLのviewportをちゃんと理解する

    と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返すし、media queryの条件判定でも480pxの画面幅が使われる。 次にviewportを実際の液晶画面に表示する。この時、view

    もう逃げない。HTMLのviewportをちゃんと理解する
  • スマホ対応パララックス!簡単便利な skrollr の使い方 | 株式会社メイプルシステムズ

    こんにちは、うっちーです。 先日、スマホ用サイトを作ってたのですが、パララックス効果を入れるのに四苦八苦したので、備忘録も兼ねてシェアしたいと思います。 Jqueryでパララックス 最初はJqueryを使って普通に作ってたんです。 こんな感じで。 <HTML

    スマホ対応パララックス!簡単便利な skrollr の使い方 | 株式会社メイプルシステムズ
  • サイトをスマホ対応した時に意識したこと5つ - Design Color

    もくじ サイト幅はリキッドレイアウト&リンク領域は大きめに 動画やGoogleマップも画面サイズに応じて伸縮するように なるべく画面遷移をしないように PC版のデザインでも見れるように 最後までスクロールした後のことも考える 1.サイト幅はリキッドレイアウト&リンク領域は大きめに サイト幅は基的には320px想定で作っています。ですが、一言で「スマホ」といっても様々な解像度がありますよね。特にAndroidとか!しかも、スマホを横向きにするとまた解像度が変わってきます。 なので、ある程度どのサイト幅でも対応できるようにリキッドレイアウトで画面サイズに応じてサイト幅が変わるようにしています。 また、スマホは指で操作するため、リンク領域はなるべく大きめにするよう心がけました。(とはいえ、タグやはてブのリンクまでは大きくできなかったのですが)一部を除いては基的にはリンク要素は「44px以上」

    サイトをスマホ対応した時に意識したこと5つ - Design Color
  • いままで多すぎ? ドコモは機種数を絞るそうです −日刊工業新聞報道|タブロイド|オトコをアゲるグッズニュース

    お店で苦労した経験ある方は多いはず NTTドコモは、来年度投入するスマホの新機種数を1〜2割減すると、日刊工業新聞が報じています。 なるほど、なかなかいい判断かも知れません。ここ最近のドコモは、投入する新機種が多すぎる印象を受けていたのは私だけではないはずでしょう。 ドコモは2012年中に、総計30近い新機種スマホを発売する予定です。店頭には1年分の機種が並んでいる訳ですから、機種変しようと思ったら30種類の中から選ばないといけないわけですね。 しかもカタログを見れば Xperia AX、Xperia GX、Xperia SX、AQUOS PHONE SV、AQUOS PHONE ZETA、AQUOS PHONE st と並んでる訳です。 これが2割減となれば、大体25機種前後。まだ多いかもしれませんが、少なくとも2013年夏モデルはちょっぴり選びやすくなってるはず。 ちなみにドコモがどれ

    いままで多すぎ? ドコモは機種数を絞るそうです −日刊工業新聞報道|タブロイド|オトコをアゲるグッズニュース
  • 企業向けスマホサイト変換サービス6選、PCサイト → スマホ変換を徹底比較 | Product Showcase

    Webアクセスにおけるスマートフォン比率が高まるにつれ、多様な「変換サービス」が出揃ってきた。これまで企業サイトのスマホ対応はスクラッチ(ゼロからの独自開発)での制作が主流だったが、今後は、ワンソースでマルチデバイスに対応できる「PCサイト → スマホサイト変換」サービスの導入が常識になるだろう。企業担当者からすれば、開発、運用におけるサイトのコストパフォーマンスやマーケティング的な利便性が重要となってくるからだ。 検索するだけでもさまざまな変換サービスを見つけることができるが、今回は企業サイトに相応しい変換サービスの選び方とともに、「PC → スマホ」変換に絞り、製品をピックアップして紹介する。 ADPLAN SG(オプト) ショーケース・ティービーのエンジンを採用、ADPLANシリーズの各種ツールと連携Mobify(ドーモ) 米スターバックスほか、海外で2万件以上の実績を有するツールの

    企業向けスマホサイト変換サービス6選、PCサイト → スマホ変換を徹底比較 | Product Showcase
  • 1