レスポンシブWebデザイン、CSSフレームワークなど、Webフロントエンド開発に関するBLOGです。
※SYMMETRIC公式BLOGと統合し、ブログ名称を変更しました

JavaScript

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

NO IMAGE

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

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

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

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

NO IMAGE

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

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

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

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

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

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

NO IMAGE

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

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

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

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

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

Page Top