結論:Highchart ccchart(canvasChart)と悩みましたが、Highchartを選んだ理由は、下記の通りです。 1.円グラフや棒グラフを組み合わせた複合的なグラフのサンプルを載せている 2.複合グラフのアニメーションがかっこいい 商用ライセンスなので、無料にこだわる方は、ccchart(canvasChart)がおすすめです。 Highchart 表現力、完成度の点でいちばんだと思います。商用なのでお金さえあればこれがイチオシ。 ccchart(canvasChart) 私のイチオシは canvasChart です ライセンスは PUBLIC DOMAIN! raphael.js qiitaのプロフィールの円グラフで使われているjQueryプラグイン 美しめなグラフを作成することができる。 raphael.jsのプラグインのelycharts.js http://el

連載のはじめに みなさんこんにちは、今回より「聞いたら一生の宝、プログラミングの基礎の基礎⁠」⁠ の連載を担当させていただく本橋佑介です。 本記事では、広く利用されている技術から新しい技術まで、基本的な部分を現場のエンジニアの声を取り上げつつ解説していきます。習得している方にとっては振り返りとなり、また今から学ぶ方にとっては同じ疑問にぶつかった方の意見が参考になれば幸いです。 現場のエンジニアの声は私が開発に携わっている技術系QAサイトteratailから抜粋しています。 第1回では、現在では様々な環境で利用されているJavaScriptの基礎をteratailの初心者投稿とともに振り返っていきます。 JavaScript JavaScriptは主にウェブブラウザを実行環境とし、動的なウェブサイト構築などに利用されてきました。 また、今ではNode.jsをサーバサイドで利用することが増え、

FlashDevelopのすすめ Q. FlashDevelopって何？ A. エディタだよ。統合開発環境(IDE)だよ。 ダウンロード http://www.flashdevelop.org/ FlashDevelopをすすめるわけ 軽い インストールや日本語化が簡単 部分一致による入力補完(diobcと入力するとDisplayObjectContainerが補完されるみたいなの) そして… FlashDevelopがサポートしてる言語は以下の通り ブラウザ系 HTML CSS,SCSS,LESS,HSS JavaScript,TypeScript,Haxe ActionScript2,ActionScript3,Haxe サーバーサイド PHP Python Haxe その他いろいろ C++ C# Loom 各言語のサポート状況 AS3 シンタックスハイライトと高度な入力補完 強力なリ

昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgとJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかったというのがあります。 html5ではsvgをhtml中に埋め込んで、更にそのsvgにcssでスタイルを当てたり、JavaScriptでいろいろやったり出来ます。 この時、要素のクリック領域は要素の形そのままなので、昨日のリモコンのような変な形のクリック領域を簡単に作ることが出来ます。 以下の画像の色のついた箇所にマウスを乗せたりクリックをしたりしてみてください。 100km 画像はWikipediaより。 上記の画像は、クリックできる箇所に .svg-area というクラス名と、data-name属性に市町村の文字列が入っており、以下の様なcss/jsによって動作を実現しています。 path.svg-area { cursor: pointer;

オセロや将棋のような盤をHTML5+JavaScriptで実装する場合、 1.盤全体をひとつのCanvasにする 2.マスそれぞれをCanvasにする 3.マスを構成する要素imgなどをそれぞれ並べる という方法が考えられる。どれを選択するか。 1.盤全体をひとつのCanvasにする (+)HTMLスッキリ (+)CSS(position, top, leftやら)の設定がめんどくさくないかもしれない (+)Canvas内部はブラウザによって見た目が変わりにくい (-)Canvasって重くね？ 2.マスそれぞれをCanvasにする (+)HTMLちょっとスッキリ (+)onmousedownとか登録すればオブジェクト指向的でわかりやすい (+)Canvas内部はブラウザによって見た目が変わりにくい (-)Canvasって重くね？ 3.マスを構成する要素imgなどをそれぞれ並べる (+)重く

Web屋ならチェックしておきたい！作業効率が激変するChrome DevToolsの便利な使い方まとめ こんにちは、デザイナーの王です。 今回の記事では、ChromeのDevTools（デベロッパーツール）について、「多分、周知されていないけど、使わないともったいない！」的な機能を紹介させて頂きたいと思います。 フロントエンジニアにも、デザイナーにも、きっと効率アップに繋がる小技が見つかるはずです。 開発者なら「Chrome Canary」を使おう！ みなさんはChrome Canaryを使っているんでしょうか？一般向けにリリースされている安定版であるChromeより、ほぼ毎日アップデートしている「Canary」ビルトを選ぶ理由があります。 それは、開発者向けの新機能がいち早く利用できるからです！リリースがノロノロしているChromeを使ってたら、いつまでも最新の便利な機能の恩恵が受けられ

Webのテストツール selenium IDEの使い方を世界一わかりやすく説明します。 これよりわかりやすい説明を作った人は世界一の名前を譲るので教えてくださいwww 間違い等ありましたら、コメント欄にどうぞ。 ここのサイトからインストールできます。 https://addons.mozilla.org/ja/firefox/addon/2079 ちょい下にスクロールすると、 「Firefoxへ追加」ボタンがあるのでクリックします。 インストール確認ダイアログが出てくるので、「今すぐインストール」をクリックします。 インストール中。 「Firefox を再起動」ボタンでFirefoxを再起動させればインストールは完了です。 まずgoogleでも開きましょう。 Selenium IDE を起動したときのページがディフォルトのベースディレクトリ(基準位置)になるのでテストしたいページを最初に開

この資料では、JavaScript でオブジェクト指向プログラミングを行う際に備えておくことが望ましい、基礎知識や概念について解説します。 【対象者】 ・JavaScript でアプリケーションを構築できる方 ・JavaScript におけるオブジェクト指向プログラミングの 実現手法や原理への理解を深めたい方 ・Java 的なクラスベースの言語との違いに違和感や混乱を 感じてらっしゃる方Read less

ツイッター社が提供する、今風のウェブサイトを構築するための言語です。これを使ってHTMLとCSS、JavaScriptを簡単に拡張することができます。

Webデザインのセオリーを学ぼう / Webデザインのウソ・ホント ～ Web らしく... / コンテンツで改善する UI デザインの極意他...全21件

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。これまで、JavaScriptで非同期処理を書く上での問題として、コールバック地獄やエラー処理に例外が使えないことなどを解説してきました。 これらの問題に対処するライブラリの1つであるjQuery.Deferredに関して、もう少し丁寧に解説いたします。なお、jQueryのバージョンは記事執筆時点の最新である、1.9.1を想定しています。 jQuery.Deferredとは jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結

Sugar is a Javascript utility library for working with native objects. It lets you do stuff like this:

2017年6月29日 Web関連記事, ライフハック 2011年がスタートしましたが、「なんだか調子でないなー」という方！今年の目標はもう設定しましたか？私は毎年「新年の抱負」を考えているのですが、今年は何にしましょう？ということで、Web屋さんが設定できそうな新年の抱負案を考えてみたので、参考にしつつ新年の抱負を考えてみてはいかがでしょう？ ↑私が10年以上利用している会計ソフト！ 1. CSS3の勉強をする 角丸・グラデーションをはじめ、画像を使わなければできなかった効果がCSS3を使えば簡単に実装できます。デザインの幅がぐんっと広がります。IEで対応していないなどの問題もありますが、CSS3 PIEを使えばIEでも使えるようになりますよ。 CSS3リファレンス CSS3のリファレンスサイト。コードの例もわかりやすいです。 たった一行を追加するだけでIE6/7/8をCSS3対応にする

(追記)JavaScriptで実装してみました 昔、何かの雑誌*1でマリオのジャンプの実装法を見た覚えがあって、あの放物線運動は、 マリオの速度ベクトルを保存しておいて座標を計算するんじゃなくて、 マリオの前回の座標を保存しておいて座標を計算しているんだそうです。 y_temp = Mario.y; Mario.y += (Mario.y - Mario.y_prev) + F; Mario.y_prev = y_temp;Fはその瞬間の力で、ジャンプの瞬間はF=10にして、空中ではF=-1にします。 するとこんな放物線になります。 [0,10,19, 27, 34, 40, 45, 49, 52, 54, 55, 55, 54, 52, 49, 45, 40, 34, 27, 19, 10, 0] 加減算しか使わないので、非常に高速にできたと。 これがVerlet積分に似ているなと思った