http://infinityforest.net/home/archives/3055
iBeaconとは？ | iBeaconなら「ストアビーコン」
iBeaconとは、iPhoneのiOS7に標準搭載されたことで、いま注目を集めているBluetooth Low Energy（BLE）を使った新技術です。ネットから店舗への誘導などに使える、新しいO2Oの切り札としてマーケッターの期待を集めています。 しかし、新しい技術であるがゆえに、 「いったい何ができるのだろう？」 「そもそも仕組みが分からない」 などなど、様々な疑問を持たれる方が多いのが現状です。 そこで、iBeaconの概要や仕組み、活用法などをまとめてご紹介します。 O2Oマーケティングの切り札！ iBeaconとは何か？ 分かるようで分からないiBeaconの基本 iBeaconは何故注目されているのか？ iBeaconが注目されるきっかけになったのは、エスティモート社（米国）が、2013年9月10日に公開したYouTube動画です。 動画では店舗の前を歩くユーザーのiPho
PC向けサイトがスマホでも崩れないようにする方法 - Qiita
PC向けに作った Web サイトをスマートフォンでみると、「 部分的に意図せず文字が大きくなる 」といった不具合が起きることがあります。 解決策ググって修正しようとすると、こんどは「 毎回、ページの左上が拡大された状態で表示されてしまう 」状況に陥ってしまうことがあります。 （私はありました。） ということで、PC向けサイトも最低限スマートフォンで見られるようにする方法をメモっときます。 勝手に文字が大きくなる対策 -webkit-text-size-adjust という、モバイル版ブラウザでのみ有効なプロパティがあるようです。 このプロパティが、デフォルトでは auto になっているため、文字が自動的に調整されて大きくなってしまう、というカラクリでした。 reset.css あたりに追記しておくのが妥当かと思います。 参考：iPhone版Safariで文字サイズがおかしくなるときは-we
スマートフォン（iPhone/Android）のページ内振り分け - JavaScriptテックラボ - [SMART]
ページ内でスマートフォンかどうかを判別し、表示を切り替えたい場合のスクリプトを紹介します。 JavaScriptでiPhone、Androidを識別してそれぞれの端末へメッセージを表示には、ユーザエージェントを使います。 navigator.userAgent で取得したユーザエージェント情報から「iPhone」という文字が合った場合の処理をする場合は、 indexOf を使って以下のようにします。 /* iPhoneという文字が見つかった場合 */ if ( navigator.userAgent.indexOf('iPhone') > 0 ){ } indexOf()メソッドは、指定したキーワードの発見位置を返します。発見できなければ-1の数値を返すので、値が0より上であればキーワードが発見できたと分かります。 iPhone/iPad/iPod/Android毎に処理を分けるには次のよ
![スマートフォン（iPhone/Android）のページ内振り分け - JavaScriptテックラボ - [SMART]](https://cdn-ak-scissors.b.st-hatena.com/image/square/efeb6493234f33406d242c048873a805fca99c63/height=288;version=1;width=512/https%3A%2F%2Frfs.jp%2Fwp-content%2Fthemes%2Fsmart%2Fogpimage.png)
なぜグノシーはパーソナライズをやめたのか？ Gunosy・竹谷氏、「マスに響かなかった…」と理由を語る
スマートフォン時代の2つの論点 福島良典氏（以下、福島）：いろいろ論点が出てきてるかと思いますが、2つ大きなものがあるんじゃないかと思っていて。1つはスマートフォンになって、そもそもトラフィックの質が変わりましたよという話なのかなと思ってます。 そして、もう1つは先ほどの発表でもお話させてもらったようにPCが前向きというか検索を中心に様々なサービスとつながっていて目的がはっきりしていたと。かつ1セッションあたりの時間がすごく長かったと。 一方、スマホでは電車の中とか余った時間で何か面白いことをしたいとか、あまり目的がない状態でそれでも入り口としてはそういう状態になっていると。だからSNSですとか、我々のニュースキュレーションサービスみたいな曖昧なおもしろいモノを集めているところに来るというか、目的がはっきりしていないんだけど、ただ欲求が満たされると。 よくスマホ時代におけるフォームってどん
スマートフォン・タブレット・PCの場合の条件分岐(JavaScript)
例えばスマートフォンでアクセスした時に、スマートフォン用のアドレスに飛ばすなどユーザーエージェントで判別して処理を変える方法のメモです。 ▼スマホ（iPhone,iPod touch,Android）の場合の条件分岐 if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0)) { //スマホ（iPhone,iPod touch,Android）の場合 alert('おっす、スマホちゃん！'); }
jQueryのlightbox系のプラグインColorboxをiPhone(スマホ)で使う : kagzugiの備忘録
Colorboxのダウンロードはこちら。 Colorboxはlightbox風の動作をするJavaScriptで、jQueryのプラグインとして動作します。 CSSのMedia Queriesを使ってレスポンシブなページを作っていると、lightbox系のJavaScriptでつまずきました。 iPhoneで幅480pxで作っています。 画像をクリックして「みよ～ん」と拡大されるのはいいのですが、画像の元の幅が480pxを超えてるとサイトのサイズをはみでて画像が表示されます。 当然の動きです。 でも、それだとかっこわるいです。 今作ってるサイトの幅は超えないでほしいです。 そこで英語のドキュメントとにらめっこしてみました。 で、解決方法です。 まず、Colorboxの設置作業は他のサイト等で情報がたくさんあるので省略します。 Colorboxが動くようにしてください。 次に<head>~<
レスポンシブデザインをコーディングする時の、自分なりのちょっとしたTips
前にこの記事で、レスポンシブデザインをコーディングの仕方の基本的なことを説明をしましたが、今回は自分が製作してる時に気をつけていることや、よく使う方法を書いておこうと思います。 案件や作業フローによって全然違う方法がよい場合もあるかもしれませんので、参考程度にどうぞ。 要素のマークアップ順序 会社や作業フローによるかと思いますが、今のところ、PC用とスマートフォン用のデザイン2枚が出来上がってくる事が自分は多いです。 そのデザインを見ながらHTMLを作っていきますが、この時スマートフォンのデザインを見ながらマークアップしたほうが良いと思いました。 文章の意味付け的にデザインで順序変えるのはどうなのよというのはありますが・・・。 positionを使って再現するデザインの場合はPCは簡単に位置を入れ替えることができますが、スマートフォンのデザインは320px～リキッドデザインにすることが多い
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
スマートフォン時代のWebサイト制作 第4回 画像の扱いと最適化 | デベロッパーセンター
スマートフォン向けサイトでは、デスクトップに及ばないスペックや接続回線を考慮し、いかに「軽い、表示が速い」サイトを作るかが重要です。一方で、様々な画面解像度の端末があり、高解像度の画面を搭載した端末向けには、そのサイズに対応した大きな画像が必要となる場合もあります。画像の扱いひとつをとっても、「パフォーマンス」と「見栄え」の双方を考慮しなければいけない難しさがあります。そこで今回は、前回のサンプルサイトを元に、画像関係の扱いや最適化などを解説します。 スマートフォンブラウザーはPNGに対応しています。デスクトップブラウザーでPNGを使う場合、Internet Explorer 6などの古いブラウザーに気をつける必要がありますが、スマートフォンブラウザーの場合は気にする必要がありません。 PNGは圧縮率が高く、容量を抑えることができます。また、アルファチャンネル（透過機能）を持つので、半透明
切り抜きジャック
GW中は家族サービスの傍ら、ずっとブログのことを考えていたのでした。 はじめはいつかやろうと思っていたサーバー移転を考えていたわけです。 すると考え出したら出てくるわ出てくるわ、色んな気になることが…。 で、色々考えた末 […]
【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】
iPhone4 がついに届いて興奮気味のgunjiです。 2週間待ちでした！ 待ってる間に、iPhone4も対象としたWEBアプリ（ネイティブアプリのweb view を含む） のコーディングで気をつけることについておさらいしていたところ、 Retinaディスプレイに画像を最適化させるのって意外とめんどいよね！ という現実に打ちのめされたので、まとめてみます。 そもそもRetinaディスプレイってなんでしたっけ？ はいはい、iPhone4の目玉のひとつで、今までの2倍の解像度で 画面がとってもキレイに見えるんですよね！ 拡大しなくても小さな文字が読めるなんてサイコー！ ところが、今までiPhone向けに作ったサイトをこのiPhone4で見るとちょっと 不思議な状態になってることがあるのです。 iPhone4で見たらなんか画像がにじんでるように見える・・・？！ こういうイメージです。 そう、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5-memo.com
トップページ - ソフトウェアテスト・第三者検証ならウェブレッジ
Engadget | Technology News & Reviews
東京のアプリデザイン・UIデザイン制作会社｜株式会社ハラハラ｜harahara Inc.
ikeay.net
http://www.webcreatornote.com/2012/02/%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3%E7%94%A8%E3%82%B5%E3%82%A4%E3%83%88%E3%81%A7%E9%9B%BB%E8%A9%B1%E7%99%BA%E4%BF%A1%E6%A9%9F%E8%83%BD%E3%82%92%E6%89%8B%E5%8B%95%E3%81%A7/
イオンSIM、イオンのスマホ、スマホの月額料金を格安に。音声通話も可能 | b-mobile SIM