これも Service Worker Hackathon で聞いてきたネタ。 Android Chrome 42 から、Web サイトにて、 アプリのインストールや「ホーム画面に追加」のためのバナーを自動表示できる ようになっているらしい。 なお、Service Worker を使う = SSL サイトであることが必須となるので、SSL 化してない場合は、あきらめる。 前提 Working Draft の仕様を前提に書いているので、今後実装方法などは変わるかもしれない。 Android Chrome Beta (42.0.2311.68) で動作確認した。 Service Worker を用意する 参考記事で紹介されているようなカスタムオフラインページを実現する サンプルでも良いし、Service Worker さえあれば良いので、空でもOK。 これを /sw.js で取得できるように配備

「売れるECサイト」は何をやっているのか？ 7000社超のEC支援実績を持つ「いつも.」のコンサルタントが、売上アップに欠かせない戦略・戦術・施策をまとめた書籍『ECサイト[新]売上アップの鉄則119 オムニチャネル時代の集客から接客まで』から、現場ですぐに使えるノウハウを厳選して紹介します。 ページの下部は「第2のファーストビュー」と言えるぐらい重要です。特にスマートフォンでは一気にページ最下部までスクロールするので、充実していないとすぐに離脱します。コンテンツが充実していれば、検索でも有利です。 スマートフォンユーザーの行動を意識する 従来のECサイトの最下部は「お買い物ガイド」「カード・決済情報」などの基本情報が当たり前でした。これらの情報は、すでに利用したことのあるお客さまにとっては必要ないものですし、何よりスマートフォン時代にはそれではもったいないです。 スマートフォンユーザーは

というネタ的な Web ページを作ってみた。 iPhone 6s (Plus) の Force Touch (3D Touch) 機能を使ったネタ的なサンプル。 ⇒ Force Touch (3D Touch) sample (音が鳴るので注意) iPhone 6s (Plus) + Safari でページを表示して、空の画像を強く押しこんでから離すと、 画面が割れたような画像が表示されてガシャーンて音が鳴るだけ。 Force Touch とは何か Force Touch は Apple の開発した感圧タッチパネル技術のこと。 3月10日のアップル Spring Forward スペシャルイベントで発表された Apple Watch と新MacBook はまるで別ジャンルの製品ですが、新技術「感圧タッチ (Force Touch)」を採用した共通点があります。 アップル、次期 iPhone

iOS9がリリースされ、iPhone6sも発売され、iOS9 Safari9で使える新機能をWebプログラマ目線で使ってみたいものをいくつか試してみました。iOSはアップデートの進捗がわりと良いので、新機能でもモバイルサイトであれば積極的に使える…はず。デスクトップ版の方は…お察しください。 ぶっちゃけ今回はそこまで目玉機能はなく、地味です。地味ですが、SafariでWebアプリを作れるようになりそうな気配がどことなくするようなしないような感じの内容です。残念ながらServiceWorkerには対応していないので、それに対応してくれたらもっとアレなんですが。 iOS Safari9の新機能（OSX版含む） CSS系 backdropフィルタ対応 新し目のiOSやOSXとかのメニューバーが半透過されるあれが作れます。要は背景要素に対してフィルタがかけられるプロパティです。綺麗で良いですね。

The method for getting access to camera was initially navigator.getUserMedianavigator.mediaDevices.getUserMedia. Browser vendors have recently ruled that getUserMedia should only work on https: protocol. You'll need a SSL certificate for this API to work. Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these AP

リモートで 実機検証可能な クラウドサービス テスト効率化の課題を抱えている方へ。 クラウド上の端末をＰＣで操作可能＆便利な機能も多数搭載。 従来の実機検証を効率化！

仕事でハイブリッドアプリケーションを使っていてはまったので、他山の石となるべくメモ。 あと、これは 4.2.2 (Jellybean) でのことなので、4.4の Chromiumベースの WebViewでは 話が違っている可能性も大。 WebViewの session cookieは、かなり生存力高くリブートしても消えない！ Session cookieっていうのは、expireが指定されておらず、ブラウザのセッションが終わったら (= PCではブラウザアプリが終了したら) 消えてなくなる cookieです。 ところが Androidではこれがほっといても消えない！ Activityがなくなっても、あまっさえデバイスが再起動しても消えない！まあ、考えてみるとスマフォでは「セッションってなんだ？アプリケーション終了って？」って話なので、セッションなんて環境依存したものに依拠した仕様がどうかと

モバイルファースト室の @slightair です。 クックパッドの iOS/Android アプリは、少し前のバージョンからWebP形式の画像をサーバから取得して表示するようにしています。 この記事では、なぜ画像形式をWebPに切り替えたのか、また切り替える上で注意した点などを説明します。 Cookpad アプリと画像 クックパッドのアプリはユーザさんに投稿していただいたレシピを表示するアプリケーションです。その性質上、レシピ画像や調理手順、検索画面のサムネイルなどたくさんの画像をサーバから取得して表示する必要があります。 画像の数が増えたりサイズが大きくなればなるほど通信量が増えます。最近はスマートフォンの画面サイズがどんどん大きくなっているので、それに合わせて取得する画像を大きくしていくとさらにファイルサイズが増え、通信量も増えていってしまいます。 サーバとやりとりするデータが多くな

スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に

このドメインは、お名前.comで取得されています。 お名前.comのトップページへ Copyright © 2020 GMO Internet, Inc. All Rights Reserved.

ハイブリッドアプリ中の WebView で、ネイティヴっぽさを削いでしまう機能やメニューを排除するためのCSSメモ。 body { /* アンカー要素をタップしたときに出てくる枠を見えなくする */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0) /* リンクの長押しでメニューを出さないようにする */ -webkit-touch-callout: none /* 文字列や画像を選択してコピーなどのメニューを出さないように、選択不可にする */ -webkit-user-select: none; }

Mac(本投稿ではOS X 10.9〜で説明)でのiPhoneのパケットキャプチャについて投稿します。 色々なやり方があると思いますが、自分は ・HTTPリクエストとレスポンス内容を確認する場合はCharles。 ・ネットワーク関連のエラー解析を行う場合はWireShark を使っております。 上記２つについて手順や自分が思う良いところ（個人的な見解ですが。。）などついて記載します。 Charlesを使用する場合 HTTPプロキシとしてPC上で動作し、iPhoneからのリクエストとレスポンスをモニタリングします。 参考： http://www.charlesproxy.com/ 手順 Mac側 １．下記Webページの”Download a free trial”からCharlesをダウンロード/インストール。 http://www.charlesproxy.com/download/ ２．

スマートフォンやタブレットが絡むサイト制作時に実装することが多い、レスポンシブ対応やスワイプ（フリック）などといった機能を簡単に実装できるスライダー・カルーセルのプラグインやチュートリアルのまとめです。 いずれかひとつの機能のみ実装するだけでなく、中にはひとつのプラグインで複数の機能を同時に実装できるのもあります。 普段からよく使うものは大体決まっていたりするんですが、見せ方、対応ブラウザ、一部の機種で挙動が怪しいなどの理由で他のものを探すということもたまにあるので、そういった時の手間を省くためにメモしていたものです。 全てのプラグインをじっくり使ったことがあるわけではないのと、僕はiPhone持ちなので特にAndroidで上手く動作してくれるかわからないものも正直幾つかありますが、いずれもPCやiPhoneで確認した際には問題なく動作してたものです。

iOSで選択できる言語を調べました。 NSLocaleのpreferredLanguagesを使うと、iOSの言語の設定(設定 -> 一般 -> 言語環境 -> 言語)に表示される選択肢の言語が同じ並び順で取得できます。iPhone5s(iOS7.0.6)では36種類あります。設定で選べるこの36種類が、ユーザがiOSで指定しうる言語といえるでしょう。 （OSのバージョンアップ等で今後増える可能性はある） for (NSString *localeId in [NSLocale preferredLanguages]) { NSLocale *locale = [[NSLocale alloc] initWithLocaleIdentifier:localeId]; NSLocale *jaLocale = [[NSLocale alloc] initWithLocaleIdentifie

あらすじ とあるWebサーバのファイルの内容を変えたとき、 UIWebView 経由でアクセスすると更新が反映されない現象が起こった。 また、戻るボタンも更新ボタンもなにもつけていなかったため、その状況でどうやったらキャッシュを捨てて新しいファイルを取得できるかわからなかった。 環境 サーバ apache バージョン失念 クライアント iOS 6.0 と 5.1 の UIWebView と Safari サーバの内容 変更したファイル index.html − <p>Hell World</p> ＋ <p>Hello World</p> とりあえず更新がわかるようにテキトウな文言で。 上記 index.html にアクセスした結果 iPhone Safari 更新された iPhone 独自アプリ内の UIWebView 更新されない場合があった 上記とは別の iPhone Safari 更

device-pixel-ratio: 2.0 縦向き device-width: 375px device-height: 559px 横向き device-width: 667px device-height: 375px device-pixel-ratio: 3.0 縦向き device-width: 414px device-height: 628px 横向き device-width: 736px device-height: 414px レスポンシブなコーディングや設計大事ですね。device-pixel-ratioが3.0なデバイスはXperia Zとか、他にもちょこちょこあるようです。 Device pixel density tests Xcode 6.1のダウンロード 可能な限りSVG等で対処していきたいですね。 追記：iPhone 6 Screens Demysti