こんにちは、@yoheiMuneです。 今日は、久しぶりにHTML5のお話。Canvasにて文字を表現する方法を学んだので、ブログに記載したいと思います。 Canvasに文字を描くText Canvasで文字を描く為に、fillTextとstrokeTextの2つのメソッドが用意されています。その…

こんにちは、@yoheiMuneです。 HTML5の関連機能であるGeoLocation APIを使いました。何個かオブジェクトがあるようですが、まとまった情報があまり無かったので、自分なりに纏めてみました。指定するオプションの内容など、知りたかった情報を集めることが出…

こんにちは、@yoheiMuneです。 今日はHTML5のGeoLocationAPIを利用した位置情報取得、第2弾。 継続的に位置情報を取得する方法を試してみたので、それをブログに残しておきたいと思います。 HTML5の位置情報を取得する機能とは GeoLocation APIという機能を…

こんにちは、@yoheiMuneです。 今日は、HTML5の関連機能であるGeoLocation APIを利用して、位置情報を取得する方法を学びましたので、ブログに残しておきたいと思います。 Webページで位置情報を取得するには Webページで位置情報を取得するには何個か方法は…

こんにちは、@yoheiMuneです。 今日は、HTML5から新しく追加されたinput要素のスライダーを試してみたので、ブログに記載したいと思います。 HTML5から追加されたスライダーを利用したインターフェース 今迄のHTMLでもラジオボタンやチェックボックスなど、…

こんにちは、@yoheiMuneです。 今日は、WikipediaのようなWebページだけど、訪問者（利用者）がページを編集できるようなページを作ってみました。その作り方をブログに残しておきたいと思います。 http://www.yoheim.net/labo/wiki/wiki.php ページの編集を…

こんにちは、@yoheiMuneです。 HTML5について色々調べて、見て回ったサイトを纏めてみました。ブラウザー各社、個人制作ページ、ゲーム、など色々あって面白いです(*´∇｀*) 各Webブラウザのベンダーが運営しているHTML5に関するサイト 01 Apple - HTML5 http…

こんにちは、宗定洋平（@yoheiMune）です。 CSS3のTransitionsという要素を紹介します。TransitionsとはJavaScriptを使わずにCSSのみでHTML要素に動きを与えることができます。凄いなと思ったのは、CSSのみで動きが出るというところ。現在はまだ仕様策定中で…

こんにちは、宗定洋平（@yoheiMune）です。今日は、HTML5で使えるようになったドラッグ＆ドロップを使ってみたので、ブログに書きたいと思います。 http://html5learner.appspot.com/html/dnd/DnDinPage.html ドラッグ＆ドロップの可能性 私はドラッグ＆ドロ…

こんにちは、宗定洋平（@yoheiMune）です。 HTML5はどんなモノか、どんな可能性があるのかを探っています。 今日はCanvasに画像を読み込む処理を試してみましたのでブログにその内容を記載したいと思います。 http://html5learner.appspot.com/html/canvas/l…

こんにちは。宗定洋平（@yoheiMune）です。 HTML5の可能性を探りたい。そんな思いの中、Canvasのグラデーション描画機能を試してみたのでブログに残したいと思います。 Canvasのグラデーション描画機能を利用した感想は、「比較的簡単にグラデーションを描画…

最近HTML5の可能性が凄く気になっている、宗定洋平（@yoheiMune）です。 今日はCanvasタグを利用してどんな事が出来るかに挑戦したページたち！！Canvasタグを利用する事で簡単に図形を描画出来ます。その図形描画機能を活用した事例を3つ紹介します。 線／…

こんにちは、宗定洋平（@yoheiMune）です。HTML5でどんな事が出来るんだろうと、HTML5の可能性に魅了されてるエンジニアです。 今日はHTML5のLocalStorage機能を触ってみたので、その結果と感想をブログに残したいと思います。 http://html5learner.appspot.…

こんにちは、宗定洋平（@yoheiMune）です。 HTML5でいったい何が出来るの？そんな思いの中、今日はHTML5のFile APIについて調べてサンプル実装しました。File APIについてどんな事が出来るのか、今回分かったことを書きたいと思います。 File APIを利用する…

HTML5のcanvasタグを利用して、ラインアートを表示するページを作成してみました。ページを開くと画面いっぱいのcanvasにラインアートが自動で表示されます。50行くらいのライトな実装でできています。 http://html5learner.appspot.com/html/canvas/LineArt…

HTML5で音を再生する。それはaudioタグを使うだけの簡単な実装で実現出来ました。HTML5は実際に触ってみて思いましたが、簡単に実装出来て、初心者に優しいのかも。以下のサンプルは一部動作しないブラウザがあるかもしれません。音声ファイルを１種類しか用…

HTML5を利用して動画を再生するサンプルページを作ってみました。 http://html5learner.appspot.com/html/video/video1.html videoタグの書き方 HTML5のvideoタグを利用します。ビデオタグの使い方は簡単です。以下のようなHTMLでビデオを表示出来ます。 <video id="video" width="600" height="338" controls> <source src="h264_003.mov"></source> <source src="theora_003.ogv"></source></video>

最近HTML5を始めました。今日はCanvasタグを利用して、お絵描きが出来るページを作ってみました。自分の書いた絵はヘタッピですが、絵が簡単に描けるのは楽しいです。 http://www.facebook.com/pages/HTML5Learners/204670386227533?sk=wall実装は150行程度…