JavaScriptでスマホ判定する2つの方法
- 2020.01.10
- JavaScript
Webページを閲覧しているデバイスがスマホかどうかをJavaScriptで判定するには、様々な方法があります。UserAgent文字列から判定するのが代表的な方法ですが、ブラウザサイズから判定する方法や、デバイス判定ライブラリを使う方法もあります。 しかしながら、UserAgentはOSやブラウザの …
Webページを閲覧しているデバイスがスマホかどうかをJavaScriptで判定するには、様々な方法があります。UserAgent文字列から判定するのが代表的な方法ですが、ブラウザサイズから判定する方法や、デバイス判定ライブラリを使う方法もあります。 しかしながら、UserAgentはOSやブラウザの …
jQuery UIのDatepickerは、日付をカレンダー表示できるウィジェットです。フォームで日付を入力するときに大活躍するのですが、いざ使ってみると「日本語化」「祝日表示」「スマホ対応」をどうすればよいか、悩むことになります。 そこで今回は、jQuery UI の DatePicker ウィジ …
こんにちは、開発チームの青木です。普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode(ジーンコード)」に携わっています。 今回は、レスポンシブ対応のためのJavaScriptによる2つの切替手法についてお話していきます。 レスポンシブウェブデザインのページで、CSSではメディア …
前回はd3.scaleLinear(), d3.line()を使用し、折れ線グラフの描画を行いました。 今回は前回作成した折れ線グラフをもとに、x軸、y軸、目盛りの追加をご紹介します。
今回は、D3.jsを使った折れ線グラフの描画をご紹介します。 前回は簡単なsvg描画を紹介しましたが、今回はデータビジュアライゼーションを目的としているD3.js本来の利便性を感じられるかと思います。 さっそく実装を紹介します。 日本のオリンピックにおけるメダル取得数の推移グラフ 今回もオリンピック …
アナトミーではD3.jsを使用しsvgタグでタイルを描画しています。 データごとに属性の値を変更する処理は複雑ですが、D3.jsを使用すると比較的簡単に描画できます。 簡単なデータの可視化 前回に引き続き、リオ・オリンピックの国別メダル獲得数のデータを使用し、データごと描画する図形の大きさ、色を変え …
アナトミーでは、webサイトの情報を俯瞰するというコンセプトで開発しており、多量のデータをブラウザの1画面に収める必要がありました。 そこで利用したのが D3.js です。 D3.jsはデータの可視化のためのJavaScriptライブラリです。(公式サイト:https://d3js.org/) アナ …
こんにちは!エンジニアの宇都宮です。 普段はジーンコードを利用したスマートフォンサイトの構築を担当しています。今回はiPhoneのGoogle Chrome(以下、iOS版Chrome)でポップアップウィンドウがあるサイトを変換する際のTipsをご紹介したいと思います! 「ポップアップの住所検索画面 …
業務システムがiPadで見れない!? 社内業務システムなどIEをターゲットとしたWebサイトをスマホで見ると、JavaScriptエラーが発生してサイトが正しく動作しないことがあります。PCの場合なら「IEを互換モードで使用する」といった回避策がありますが、AndroidやiPhone/iPadの場 …