JavaScriptでスマホ判定する2つの方法

Webページを閲覧しているデバイスがスマホかどうかをJavaScriptで判定するには、様々な方法があります。
UserAgent文字列から判定するのが代表的な方法ですが、ブラウザサイズから判定する方法や、デバイス判定ライブラリを使う方法もあります。

しかしながら、UserAgentはOSやブラウザのバージョンアップによって変更されたり、デバイス判定ライブラリによっては日本で発売されている端末に対応していなかったりと、注意すべき点もあります。

そこで今回は、日本で利用されているスマホを対象として、Javascriptで正しくスマホ判定するための方法を2つ解説します。
続きを読む

スマホのCookieを特定サイトだけ削除する方法 | スマホ | Webサイト開発

Cookieを使うWebサイトをテストするとき、特定サイトのCookieだけクリアしたいときがあります。
「すべてのCookieをクリアする」という手順はすぐにわかるのですが、特定サイトのCookieを削除する方法、特にスマホブラウザで行う方法についての情報は多くありません。

そこで、今回はスマホの代表的なブラウザで特定のドメインのCookieを削除するやり方をまとめてみました。

続きを読む

Datepickerを日本語化/祝日対応/スマホ対応する | JavaScript | Webサイト開発

jQuery UIのDatepickerは、日付をカレンダー表示できるウィジェットです。
フォームで日付を入力するときに大活躍するのですが、いざ使ってみると「日本語化」「祝日表示」「スマホ対応」をどうすればよいか、悩むことになります。

そこで今回は、jQuery UI の DatePicker ウィジェットの実践的な使い方を解説します。

※本記事のサンプルコードでは、CDNのURLを指定していますが、実案件ではJSやCSSをダウンロードして使うようにしてください。
続きを読む

Lazy Loadで画像を遅延ロードする | JavaScript | Webサイト開発

大量の画像を含むWebページは、一般に表示速度が遅くなりがちです。
imgタグを使って、普通に実装すると次のような現象が起きてしまいます。

  • 画像の読み込みが終わるまでブラウザが重くなり、画面操作に支障が出る
  • ネットワークやサーバーの負荷が瞬間的にひっ迫する
  • PageSpeed Insightsで低スコアになる

これだと、サイト利用者にとっても、サーバー側にとっても、いいことはないですね。
対処方法として、スプライト画像を使うとか、CDNを使うとか、Expiresヘッダを設定するとか様々な方法がありますが、Webフロント側でお手軽にできる対策が画像を遅延ロードできるライブラリ「Lazy Load」の導入です。

今回は、Lazy Load で画像を遅延ロードする方法を解説します。
続きを読む

開発環境/開発ツール テクニック集

シンメトリックがWebサイトの制作現場で得た技術情報をまとめました。

Apache

Linux

Git

Hyper-V

Eclipse

Vagrant

テスト

Webサイト開発 テクニック集

シンメトリックがWebサイトの制作現場で得た技術情報をまとめました。

ランディングページ制作

スマホ

HTML

JavaScript / jQuery

CSS

HTTP

プログラミング テクニック集

シンメトリックがWebシステム開発や製品開発の現場で得た、ニッチな技術情報をまとめました。

Java

アプリケーションサーバーTomcat上で発生するマルチスレッド問題や、各種エラー・例外への対応方法をまとめています。

JavaScript

Google Apps Script

C

誤解しやすい型や関数の使い方についてまとめています。

VBScript

SQL

LP制作会社を比較するための4つのポイント | LP | Webサイト開発

新たな商品、新たなサービスを立ち上げて、これから集客を行う時に必ずといって良いほど用意するのがランディングページ(LP)です。しかしながら、ランディングページ(LP)をどこの制作会社に依頼するかは迷うところです。そこで、今回は数ある制作会社から自分に適した制作会社を決めるために注意すべきポイントについて書きます。

続きを読む

ランディングページのデザイン参考まとめサイト4選 | LP | Webサイト開発

デザインの参考になる!スマホ向けランディングページ参考サイト4選

本記事では、スマホ向けのLPの制作を依頼する前に必要なデザイン調査の際に、参考にしたいまとめサイトを、4つ紹介します。

LPの制作を依頼する際に、イメージしているデザインを制作側に共有することで、依頼側と制作側のギャップを少なくすることができるので、制作依頼前のデザイン調査はとても大事です。

スマホ向けLPの制作を考えている方、ぜひ参考にしてみてください。

続きを読む

スマホのランディングページの基本構成 | LP | Webサイト開発

ランディングページは通常のWebサイトのトップページとは異なります。ランディングページは1ページ内で集客したユーザーを特定のアクションへ導くために作り込まれたページになります。これからランディングページを作成する時にどのような構成にすると良いか迷った時に抑えたい基本構成をここにまとめます。

しかも、BtoB向けにも増えてきたスマホ向けのランディングページを想定し、ユーザーが縦一直線にコンテンツを辿ることをイメージした構成とします。

続きを読む