Tag Archives: GCMobileFirst

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 で画像を遅延ロードする方法を解説します。
続きを読む

SSL/TLS通信の疎通確認用コマンドライン 3選 | Linux | 開発環境・ツール

サーバーにApacheやnginxをセットアップした後の動作確認は、ブラウザを使うのが通常です。
しかし、公開準備中のシステムの場合、外部からWebサーバーへの接続ができず、ブラウザを使った動作確認ができないことがあります。

HTTPページであれば、telnetクライアントを使ったWEBサイト確認方法にある方法が使えますが、SSL/TLSページの場合は使えません。

そこで、SSL/TLSページでも使える、コマンドラインによるWebサイトの動作確認方法をまとめてみました。
なお、この記事はCentOSやRHELなどLinux系OS上にWebサーバーをセットアップし、サーバー証明書をインストールしたときの動作確認を想定しています。

続きを読む

Google Apps Script で社内システムを作ってみた (2) | Google Apps Script | プログラミング

さて、前回(「Google Apps Script」で社内システムをつくってみた~GASとの出会い編~)はHTMLファイルの作成方法についてお話させていただきましたが、今回はいよいよスクリプトを使って、入力フォームと新規スプレッドシートの繋げ方について触れてみようと思います。

続きを読む

Google Apps Script で社内システムを作ってみた (1) | Google Apps Script | プログラミング

Googleが提供する「Gmail」や「スプレッドシート」、「カレンダー」、「ドキュメント」などの各種アプリをJavaScriptで操作し、お互いを繋げたり組み合わせたり、動かしたり出来るサービス「Google Apps Script」をご存知でしょうか?

かく言う私もつい最近まで知らなかったのですが、先日営業チームから、クライアント先訪問後の営業レポートを社内で共有できるシステムがほしいとの要望があったので調べてみたところ、このGoogle Apps Script(頭文字をとってGASと表記されているようなので、以下そのように記載させていただきます)を発見しました。

普段使っているGoogleの各アプリが自動で連携する様がとても面白かったので、備忘録も兼ねて3部作でご紹介いたします。

続きを読む

Windows 10 日本語版の仮想環境を構築する | Hyper-V | 開発環境・ツール

Windows 10がリリースされてから1か月が過ぎました。今後、多くのWebサイトやアプリケーションでWindows 10への対応が必要になります。

今回は、Windows 10日本語版の仮想環境をWindows 8.1上のHyper-Vで構築する方法をまとめました。

続きを読む

REMOTE_ADDRをプロキシ先サーバーにも保持させるには? | Apache | 開発環境・ツール

リバースプロキシサーバーを経由してオリジンサーバーにHTTP接続する環境では、接続先サーバーにブラウザのIPアドレスが記録されません。そのため、アクセスログ解析ができなかったり、IPアドレスベースの認証ができないといった問題があります。

ジーンコードなどWebサイト変換製品もリバースプロキシ型なので、同様の問い合わせを受けたりします。

この問題に対処する方法を3つ紹介します。

続きを読む

スマホ向けページャデザイン 3選 | スマホ | Webサイト開発

商品一覧や検索結果のように、一覧を表示するページでは、ページを切り替えるためのページャー(ページナビゲーション)がよく使用されます。スマートフォンサイトでも、ページャーを使用することが多いのですが、PCサイトで使われるページャーといくつかの違いがあります。

続きを読む