SYMMETRIC Web開発ブログ | フロントエンド開発

【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を使用すると比較的簡単に描画できます。簡単なデータの可視化前回に引き続き、リオ・オリンピックの国別メダル獲得数のデータを使用し、データごと描画する図形の大きさ、色を変え …

SVGで作るスマホ用チェックボックスの基本

2016.09.05
CSS

前回はCSSだけで作る角丸ボタンの基本を紹介しました。今回はSVGを使ってきれいにチェックボックスを作る作り方を紹介します。チェックボックスもスマホサイトではよく見かけると思います。同意を求めるときや、最終確認の際にチェックボックスは必需品だと思います。目立たせたい場合もあると思うの …

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

2016.08.31
JavaScript
D3.js

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

CSS だけで作る角丸ボタンの基本

2016.06.29
CSS

CSS だけで角丸ボタンを作る作り方こんにちは！我々は弊社の製品ジーンコードを使って日々PCサイトのスマホ最適化に向けて変換を行っています。実際に仕事の中で使ったマルチデバイス対応におけるちょっとした技術を、このブログに書き留めておきます。今回はCSSだけで角丸ボタンを作る作り方です。スマ …

スマホサイトで横長のテーブルをどう扱うか

2016.06.22
デザイン

PCサイトでよくみる横長のテーブルですが、同じ情報をスマホサイトに組込む場合、その限られた表示幅ゆえに見せ方を工夫する必要があります。（PCサイトによくある横長のテーブル）今回は弊社が構築したサイトの中から、複雑なテーブルをスマホ用に組み替えた変換例をご紹介します。テーブルの見出しを固定し、ペ …

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の場 …

スマホ入力フォームを最適化する4つの方法（後編）

「スマホ版：入力フォーム改善メソッド（後編）」です。今回は入力エラーを未然に防ぐ４つのメソッドを解説し、スマホサイトのフォーム離脱を防ぐUI改善施策（EFO）を紹介します。 ▼前回の記事はこちらからスマホ版入力フォーム改善メソッド（前編）〜膨大な項目数と情報量をもつ入力フォーム〜 /archiv …

エンジニア歴1年未満でもサイト変換ができる！？その参

2016.03.10
コラム
GENECODE

前回のブログでは、ゼロからプロモーションサイトを作り上げた話をしました。今回はサイト変換をした話をして、シリーズを終えたいと思います。ジーンコードIDEを使ってサイト変換をやってみることに HTML,CSS,JavaScriptに慣れてきた私は、先輩から以下のように言われました。実際の案件をジ …