2016-05-13

円形(円弧?)の進捗率を表すメーター(グラフ?)をHTML5で

ちょっとしたプログラムを依頼されたんですが、その中に進捗を表す円のメーターをつけて欲しいと要望がありました。

(50%とか20%とか文字でええやんとか思ってはいけない)

sample

こんな感じのやつです。

CSSとかでは難しかったので、Javascript、Canvasで対応しました↓

まず、一つ円を描画して、その後太い円を開始位置から、終了位置まで時計回りで描画するようにしてます。

ソースはこちら。

こちらのページを参考にしました

次の記事: speedifyを使ってnetflixの動画を見た件

http://speedify.com/   speedifyで日本のhuluは見れないようだ OCN 70MB/dayとぷららの無制限SIMをspeedifyでまとめてみたこと なんどかspeedifyの事を書いてたんですが、おさらいすると幾つかのネット回線をひとつにまとめて、高速通信を可能にするサービスです。 たとえば、下りが10MbpsのADSLと、5Mbpsのモバイルルーターを別々に利用しているとして、これを一つにまとめて15Mbpsの回線としてしまうイメージです。 (実際15Mbpsになるかは別として) ①speedifyのサイトから、専用のソフトをダウンロード(アカウントも作る) ②ADSLなりモバイルルータなりの回線設定をspeedify設定する ③speedifyのサーバに接続 こんな感じで回線のおまとめ(B...続きを読む

前の記事: Macの容量不足を解決。SDカードと内蔵SSDの合体技「Fusion Drive化」

私のMacBookPro(Mid 2014)はストレージ容量が128GBですが、仕事で使うために開発ツールなど様々インストールしていて、容量不足でした。 USBメモリやSDカードを取り付けてデータをそちらに保存すれば良いかもしれませんが、いまいち読み書き速度が遅いことや操作が面倒でした。 ところがSDカードなどや内蔵SSDを仮想的に一つのドライブとして取り扱うことができる「FusionDrive」を私のMacでも構築できるということだったので、早速試しました。 今回使用したのが、こちらの「JetDrive Lite 330」MacbookPro(mid 2014 )のSDカードに差し込んでも出っ張らないので、引っ掛けて壊したりする恐れもありません。 たぶんSDカードでなくとも、USBメモリでもできると思いますが、すでに2つあるUSBのうち1つをマウス用に使っ...続きを読む

最近の投稿

ページ