JavaScript | SYMMETRIC Web開発ブログ

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

2020.01.10
JavaScript

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

Datepickerを日本語化／祝日対応／スマホ対応する

2019.12.25
JavaScript

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

レスポンシブ対応のためのJavaScriptによる2つの切替手法

こんにちは、開発チームの青木です。普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode（ジーンコード）」に携わっています。今回は、レスポンシブ対応のためのJavaScriptによる2つの切替手法についてお話していきます。レスポンシブウェブデザインのページで、CSSではメディア …

【D3.js講座】D3.jsで折れ線グラフを描画する（後編）

2017.01.06
JavaScript
D3.js

前回はd3.scaleLinear(), d3.line()を使用し、折れ線グラフの描画を行いました。今回は前回作成した折れ線グラフをもとに、x軸、y軸、目盛りの追加をご紹介します。

【D3.js講座】D3.jsで折れ線グラフを描画する（前編）

2016.10.07
JavaScript
D3.js

今回は、D3.jsを使った折れ線グラフの描画をご紹介します。前回は簡単なsvg描画を紹介しましたが、今回はデータビジュアライゼーションを目的としているD3.js本来の利便性を感じられるかと思います。さっそく実装を紹介します。日本のオリンピックにおけるメダル取得数の推移グラフ今回もオリンピック …

【D3.js講座】D3.jsを使用した図形の描画

2016.09.21
JavaScript
D3.js

アナトミーではD3.jsを使用しsvgタグでタイルを描画しています。データごとに属性の値を変更する処理は複雑ですが、D3.jsを使用すると比較的簡単に描画できます。簡単なデータの可視化前回に引き続き、リオ・オリンピックの国別メダル獲得数のデータを使用し、データごと描画する図形の大きさ、色を変え …

【D3.js講座】 D3.jsとは？

2016.08.31
JavaScript
D3.js

アナトミーでは、webサイトの情報を俯瞰するというコンセプトで開発しており、多量のデータをブラウザの１画面に収める必要がありました。そこで利用したのが D3.js です。 D3.jsはデータの可視化のためのJavaScriptライブラリです。（公式サイト：https://d3js.org/）アナ …

window.openerがiOS版Chromeで使えない問題に対処するには？

2016.06.14
JavaScript

こんにちは！エンジニアの宇都宮です。普段はジーンコードを利用したスマートフォンサイトの構築を担当しています。今回はiPhoneのGoogle Chrome（以下、iOS版Chrome）でポップアップウィンドウがあるサイトを変換する際のTipsをご紹介したいと思います！「ポップアップの住所検索画面 …

attachEvent 関数をスマホで動作させるには？

2016.06.07
JavaScript

業務システムがiPadで見れない！? 社内業務システムなどIEをターゲットとしたWebサイトをスマホで見ると、JavaScriptエラーが発生してサイトが正しく動作しないことがあります。PCの場合なら「IEを互換モードで使用する」といった回避策がありますが、AndroidやiPhone/iPadの場 …