Firefox の画像の色が変…？
なぜ色が変わってしまったの？ 原因から先に言ってしまうと Firefox が 3.5 からカラープロファイルに対応したためです。 「カラープロファイルって何？」という方はこちらの記事を見てみて下さい。 Firefox公式ページでも以下のようにアナウンスされています。 つまり今回の対応によって Firefox 3.5 は 過去バージョンの Firefox に比べて 正しい色の画像で表示できるようになったということです。 あれ？でも Windows 上の色と違う…？ そう、実は Windows の表示の方が正しい表示ができていないのです。 Windows VISTA になってからは表示が一部改善されたようですが Windows XP 以前では手付かずの状態で放置されていた問題のようです。 （Mac では既にしっかりと対応済みのようです） ちなみにカラープロファイルに対応しているブラウザは 現在
Rubyプログラムの実行箇所をブラウザで見れるようにしてみた - こけし出張所
現在実行している行をソースコード上で可視化する Ruby の拡張ライブラリ wisp を作りました。 これが Ruby の set_trace_func() の真面目な使い方だよ！嘘だよ！ まともに動くか自信がないよ！ どんなもの？ 上述の通り、現在実行している行をブラウザ上で可視化する拡張ライブラリです。 インストール gem install wisp 必要な gem は sinatra と sinatra-websocket です。 使い方 例えば foo.rb というスクリプトを走らせる場合、 $ ruby -rwisp foo.rb == Sinatra/1.3.2 has taken the stage on 4567 for development with backup from Thin >> Thin web server (v1.3.1 codename Triple
もうアイコン画像はいらない！ Webフォントを使って、iOS風タブバーとアイコンを作成する方法
こんにちは、鴨田です。 最近、アイコンがセットされたWebフォントを使うことで、 画像を使わずにアイコンを表示するという手法が流行っていますね。 すごく興味はあったのですが、なかなか使う機会もなく、 便利そうだなと思っていただけで、今まで使ったことがありませんでした。 しかし、先日、とある案件でやっと使う機会に恵まれたので、やり方をご紹介いたします。 (プロトタイプだけ作って、結局プロダクトとしては使いませんでしたが・・・) 最近話題になっていたこちらのサイトがとても便利です。 Fontello - http://fontello.com/ 使いたいフォントを選択します。 ここでは、「Entypo」フォントから5つ選択します。 選択が終わったら、上部のタブから「Edit codes」をクリックします。 アイコン画像の上部のバーをクリックして、アイコンに割り当てる文字列を決めます。 英語で頭
Javascriptで扱えるカッコイイグラフのまとめ - Qiita
結論:Highchart ccchart(canvasChart)と悩みましたが、Highchartを選んだ理由は、下記の通りです。 1.円グラフや棒グラフを組み合わせた複合的なグラフのサンプルを載せている 2.複合グラフのアニメーションがかっこいい 商用ライセンスなので、無料にこだわる方は、ccchart(canvasChart)がおすすめです。 Highchart 表現力、完成度の点でいちばんだと思います。商用なのでお金さえあればこれがイチオシ。 ccchart(canvasChart) 私のイチオシは canvasChart です ライセンスは PUBLIC DOMAIN! raphael.js qiitaのプロフィールの円グラフで使われているjQueryプラグイン 美しめなグラフを作成することができる。 raphael.jsのプラグインのelycharts.js http://el
IE6から使えるSVG/VMLを使った高機能JavaScriptグラフライブラリ·Highcharts MOONGIFT
HighchartsはSVG/VMLを使って描画するJavaScript製のグラフライブラリです。 Webサービスにおいてグラフを使うとデータのインパクトが違います。だからこそ使い勝手の良いグラフライブラリを積極的に使っていくべきです。HighchartsはSVGを基本として多様なWebブラウザに対応したグラフライブラリになります。 折れ線グラフです。 Ajaxによるデータロード対応です。 グラデーションをかけることもできます。 滑らかな曲線です。 アイコンを貼付ける例です。 プロットのみで。半透明なドットを使っています。 エリアグラフです。 マイナスの値にも対応しています。 積み上げグラフです。 棒グラフです。 左右比較型の棒グラフです。 複数のデータを並べられます。 棒グラフもマイナス値を出せます。 こんな感じの棒グラフも。 さらにドリルダウン対応です。 HTMLのテーブルからデータを
顔のニキビを一刻も早く治す効果的な方法
顔のニキビを一刻も早く治す効果的な方法 大事な日が控えている時に限ってできてしまうこと、ありませんか？ ニキビができてしまうと、それだけで気分も落ち込み、印象も大分変わってしまいますよね？ 私も最近まではチョコチョコニキビができてしまうことがありました。 最近は以下の対策をすることで、劇的にニキビに悩むことが少なくなりました。 よかったら参考にしてみてください。 【YouTube】赤ら顔を治す方法こちら 顔のニキビの原因 まずはニキビができてしまった原因を特定しましょう。 ニキビの原因は様々です。 食生活の乱れ、角質の汚れ、メイクがきちんと落とせていない。 乾燥によるニキビ、または疲れが溜まっていたり、ストレスが溜まっている場合、ホルモンのバランスが崩れている場合などが挙げられます。 自分のニキビの原因が何なのかを知ることもとても大切です。 対処法その１ 原因が分かったら、その原因を排除し
ブログなどに埋め込みできるグラフ作成ツール「Google Image Chart Editor」 | ライフハッカー・ジャパン
モバイルバッテリーとは呼べない。「ほぼポタ電」なコレ1台で有事の時もアウトドアも大活躍!【AmazonスマイルSALE】
CSSでキュウべえ(FULL)を描いてみた - jsdo.it - Share JavaScript, HTML5 and CSS
/* * CSSでキュウべえ(FULL)を描いてみた * ※Google Chrome, FireFox, Safari, Operaに対応しています。 */ <div class="qb"> <!-- tail --> <div class="tail"> <div class="parts-1"></div> <div class="parts-2"></div> <div class="parts-3"></div> <div class="parts-4"></div> <div class="parts-5"></div> <div class="parts-6"></div> <div class="parts-7"></div> <div class="parts-8"></div> <div class="parts-9"></div> </div> <!-- ear --
第8回 WebページにGoogle APIで簡単にきれいなグラフを描く
Googleが提供しているAPIライブラリ「Google API」と聞いてパっと思いつくのは，検索系（Google AJAX Search API）か，地図系（Google Maps API／Google Earth API）でしょう。しかしGoogle APIには他にもいくつか種類があります。今回ご紹介するのは「Google Visualization API」です。Visualizationってなんだろうということですが，実はこれグラフを描画するためのAPI群です。 グラフを作るということだけであれば，Excelのような表計算ソフトを使うのが一番手っ取り早い方法です。しかし，例えばWebサイトの中でグラフを利用しようと思えば，Excelでグラフを作り，これを画像としてキャプチャし，HTMLに貼り付けるという手順を踏まなくてはなりません。実際にIT系の記事では，特にハードウエアのベンチマ
顔認識APIを無料公開 商用利用もOK
ソフトウェア開発のインクリメント（東京都多摩市）は5月21日、顔を含む画像を送ると、顔や目、鼻などの位置を認識して座標データを送り返す顔認識APIを提供するサイト「detectFace（）;」を公開した。APIの提供は無料で、商用利用もできる。 顔、目、鼻、口、眉の位置と輪郭を認識し、その座標データをXML形式で送り返すWeb API。各パーツの輪郭情報まで提供するため、凝ったアプリケーションを構築できるという。 同APIを使ったサンプルサービスとして、画像をアップロードすると、画像中の人間の顔がパンダのイラストに変わる「ぱんだら」も公開している。 「価格はまちまちだが、顔認識エンジンの価格は安くても100万円以上。高い場合には1000万円以上するものもある」ため、個人のアプリ開発者は顔認識エンジンを使ったWebアプリが作りにくかったという。「今まで高価で手が出せなかったデベロッパーやWe
2次関数のグラフ
グラフの作成は，ASCIIｓｖｇを用いている．ASCIIsvg コマンドとJavaScriptを変更して更新ボタンを押すと，グラフが変更される．入力 (ASCIIsvg コマンド と JavaScript) 参照ページ 2次関数のグラフの例として， のグラフを右に示す． この2次関数のグラフの描き方はここを参考にしてください． setBorder(0) initPicture(-4,8,-4,8) axes(1, 1, "labels", 1) stroke = "blue" plot("3*x^2-12*x+9") 上記ボックスの plot(" 数式 ") の数式を書き変えて，更新ボタンを押すと，グラフを描き変えることができる．
お隣中国の地図サイト事情〜Google Mapsより人気の地図サービスとは
日本の地図サイトは、Google MapsやYahoo!地図など著名なもののほかにも、本誌連載「趣味のインターネット地図ウォッチ」で紹介しているように、さまざまなサービスがある。 海の向こうの中国でも、百度やGoogleが地図サービスを提供しているが、それ以外にもさまざまな地図サイトが存在する。先日、中国のIT系メディア「天極網」が地図サイトの利用実態についてのレポート「2006年中国ネットワーク地図検索利用者調査報告（中文、http://data.chinabyte.com/427/3053427.shtml ）」を発表した。ここでは、この調査結果を紹介しつつ、「へぇ、こんなのあるんだ」と思うような中国の地図サイトも合わせていくつかご紹介しよう。 ● 中国の利用者は実用性重視で、Google Mapsや百度地図は不人気 天極網の調査によると、中国のインターネット利用者の地図サイト利用の目
Webブラウザ向け3D標準規格、「WebGL」は2010年前半登場 － ＠IT
2009/08/05 OpenGLやOpenCLなどの標準規格を策定するKhronos Groupは8月4日、米国ニューオーリンズで開催中のSIGGRAPHで「WebGL」ワーキンググループの詳細について発表した。WebGLは、Webブラウザから直接にハードウェアによる3D描画を行うための規格で、Webブラウザに搭載されたJavaScriptとOpenGL／OpenGL ESのバインディングを規定する。 現在、WebGLにはAMD、エリクソン、グーグル、Mozillaファウンデーション、NVIDIA、Operaソフトウェアなどが参加。2010年前半にはWebGLの最初のリリースを行うという。これまでブラウザベンダは、Canvas 3D（OperaやMozilla）、O3D（Google Chrome）など、個別に3Dグラフィックの実装に取り組んできたが標準化に向けて動き出したと言えそうだ。
Webの3Dグラフィックスが変わる?!GoogleのO3Dとは？
Googleがリッチな3Dグラフィックスを制作できるWebアプリケーションO3Dを発表した。 Google Developer Day2009で、O3Dの開発に携わったグーグルソフトウェアエンジニアのグレッグ・タヴァレス（Gregg Tavares）氏とグーグルプロダクトマネージャーのヘンリー・ブリッジ（Henry Bridge）氏にO3Dの開発秘話やO3Dの可能性を聞いた。 Web 3Dの歴史 O3Dの話題に入る前にWeb上でのWeb 3Dの歴史について振り返ってみよう。実は約10年前の1990年代にもブラウザで3Dを表現する技術VRMLが登場した。Webの登場が1990年あたりと考えると、この段階で3Dを表現する技術が発表されたことには驚きを感じる。 しかし、当時はまだインターネットの回線速度が遅く、PCのスペックも高いものではなかった。モデリングツールも少なく、扱うには高度な技術が必
リアル「シムシティ」の気分が味わえる、中国のものすごい地図サイトたち
思わず惚れ惚れするほどの描き込み具合 ちょっと前、「Google Earth」が欧米やアジアの大都市のいくつかを3D化して話題になっていましたが、お隣中国ではもっと斬新な地図サービスが人気を集めているようです。 今回紹介するのは「E都市」と「都市圏」というふたつの地図サービス。普通、地図サイトと言えばのっぺりした線や図形の集合体を思い浮かべますが、これらのサイトではいずれも「シムシティ」のようなドット絵風タッチで中国の街並みを再現しているのが大きな特徴。ドット絵世代のゲームファンにとっては、3Dでグリグリ動かせる「Google Earth」よりも、むしろこちらの方が興味をそそるかもしれません。 「E都市」で天安門周辺を覗いてみたところ こちらは「都市圏」。場所は同じく天安門周辺 どちらもグラフィックのタッチはよく似ていますが、「シムシティ」や「A列車で行こう」シリーズを思わせる街並みは、ま
JavaScriptを使って描画するCanvasとは？
Canvasとは、JavaScriptを使って動的に図を描くために策定された仕様です。これまで、動的に図を表示させる方法としては、Flashが代表的な選択肢でした。しかし、Canvasを使うことで、テキストエディタさえあれば、誰でも無料で動的に図を描くアプリケーションを作ることができるようになるのです。 手前みそで恐縮ですが、図1は筆者がCanvasを使って作った棒グラフを描くJavaScriptライブラリのキャプチャ画像です。Canvasを使うことで、簡単な図だけではなく、かなり凝ったデザインも扱うことができることがおわかりいただけると思います。 しかし、Canvasは決してFlashの代替技術ではありません。まずは、Canvasの特徴を簡単にまとめてみましょう。Canvasの特徴としては、「JavaScriptを使って描画する」「文字は描けない」「アニメーション機能がない」の3つがあり
HTML Canvasの3D対応への道を探る
はじめに Webの世界はベクタグラフィックスで溢れており、FlashやSVGなど、さまざまなグラフィックスのフォーマットが登場しています。その中でも比較的最近登場したHTML Canvasは、他のベクタグラフィックスシステムと異なる独特の立ち位置にあります。 SVGはどんなプログラムからもレンダリングできる宣言型グラフィックスのファイルフォーマットであり、Flashはある完結したマルチメディアシステム（ブラウザ用のプラグインライブラリと、スクリプト言語の ActionScript、そしてコンテンツ作成ツール群で構成されるシステム）を中心に築かれています。これに対し、HTML CanvasはHTMLそのものです。事実、HTML Canvasは来るべきHTML 5仕様に含まれています。それゆえ、HTML CanvasはDOMツリーに統合されます。つまり、JavaScriptからアクセスできると
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSXGraph
JavaScript Diagram Builder
Google Chart Tools入門