stop watch




埋め込みコードをコピー
URL



埋め込みコードをコピー
URL



埋め込みコードをコピー
URL



埋め込みコードをコピー
URL


ストップウォッチを作ってみた

今回は、ストップウォッチです。
基本的なつくりは、数字が切り替わる部分なので、前回のデジタル時計と似ている部分がありますね。
このSVG画像についても、URL 埋め込みコードをコピーボタンを押して、お好きなようにご活用ください。

ちなみにストップウォッチと言ったら、僕はJavaScriptを書く練習をするために制作する、というイメージがあります。
作ったことがある人もいるんじゃないでしょうか。
意外と自分で作ってみようと思うと簡単ではないですよね?

ボタンを押した時の細かい制御からデザイン面まで、一から作ろうと思うとなかなか時間がかかってしまうものです。
もしストップウォッチをあなたのサイトで機能させたいと思った時は,このACTIVE-FRAMEのstop watchを検討してみてください。
1分もたたずに、埋め込みは完了しちゃいます。

使い方

見たまんまですね、普通のストップウォッチと変わらず、スタート、ラップ、リセットの3つのボタンを用意しています。
今回、ストップウォッチをつくった理由として、SVGでonclick属性が正常に動作するのか確認するという、意味がありました。
結果的には、書き方に多少の違いはあったものの、HTMLファイルに記述する場合とほとんど動作に違いはありませんでした。
SVGが台頭してきた初期の段階から、使い勝手がかなり良くなってきているように感じます。

それと、使う際の用途についてです。
何にでも可能だとは思いますが、僕は、料理ブログなどをやっている人におすすめします。
もし料理ブログを書いていて、自分のオリジナルのレシピを公開しているなら、多くの方に実際に作ってもらいたいと思うのは当然ですよね。
そのためにも、キッチンタイマーとしてこのストップウォッチを埋め込んで見てください。
利便性が格段に向上するかと思います。

あくまで画像

当初のACTIVE-FRAMEは、どれだけ簡単にプログラムコードを共有できるかを優先的に考え、開発を始めました。
実際に、ストップウォッチのコードを他のサイトに埋め込もうと考えると、普通はHTML,CSS,JavaScriptのプログラムをコピー、ダウンロードする必要があります。
また、基本的にファイルは別々に記述されるので、一つの機能のコードが様々な場所に散らばってしまい、プログラムの可読性が下がってしまいます。

そこで、画像という考え方が出てきます。
画像を直リンクをするような感覚で、元からサーバーに上がっているデータを引っ張ってくれば、利用するユーザーの負担は大きく減らすことできます。
また、あくまで画像なので、縦横比は変わったりせず、新たにCSSでデザイン調整はする必要がありません。
そして、もちろん参照するファイルはたったの1つだけです。

SVG画像に集約することで、今まで広くありふれていた簡単なプログラムに新しい価値を付与することができるようになりました。
これからは、ネットに上がっているレベルのJavaScriptのプログラムをSVGに置き換える、という作業が続きそうです。