こんにちは、@yoheiMuneです。 久しぶりのフロントエンドネタ。input要素についてautocomplete属性を使うと簡単に入力候補を表示することができます（最近初めて知りました）。それについてブログを書きたいと思います。 目次 Inputタグに対する入力補完 inputタグには色々と要素がありますが、以下のように実装することで入力候補を表示することができます。 実行例 ソースコード <input type="text" autocomplete="on" list="mylist"> <datalist id="mylist"> <option value="渋谷"></option> <option value="新宿"></option> <option value="新橋"></option> <option value="新大阪"></option> <option v

こんにちは、@yoheiMuneです。 先日の日曜日にHTML5カンファレンス2015に参加してきて、LTもさせていただきました。LT内容の共有と、カンファレンスの感想をブログに残したいと思います。 http://events.html5j.org/conference/2015/1/ LTしてきた内容 LTでは最近個人的に熱いと思っていた「The Extensible Web」について話してきました。主に標準化に関する内容で、ディベロッパーの役割がどんどん増えていて面白いよー、という思いを共有したくLTに応募しました。 LTネタを選んだあんどうさん曰く「自分も興味あるネタだから選んだ」と、なんだかネタ勝ちな感じ。発表した内容は以下のスライドです。 カンファレンスでは、The Extensible Webについて3つのセッションもあったし、W3Cやブラウザベンダーの方々もそれに注目していて

こんにちは、@yoheiMuneです。 7月になってやっとブログを書く余裕が出てきた(´∀｀∩)〜〜。 今日は、Chromeでも最近使えるようになったWeb Speech APIについて入門記事を書きたいと思います。 Special Thanks to https://flic.kr/p/7fADmS 目次 Web Speech APIとは Web Speech APIはW3Cコミュニティグループによって策定されている仕様で、Web Speech API Specificationに仕様が掲載されています。この仕様書はリンク先にも記載の通り「It is not a W3C Standard nor is it on the W3C Standards Track（このドキュメントはW3C標準でもなければW3Cの標準トラックに則ったものでもない）」とW3C標準ではありません。しかしWebki

[パフォーマンス] 画像をLocalStorageへキャッシュして、Webページの表示を少し速くしてみる こんにちは、@yoheiMuneです。 以前のブログで、「CSSとJSをLocalStorageにキャッシュして、2回目以降の表示を速くしてみる」を紹介させて頂きました。 今回はサイトで頻繁に利用する画像をLocalStorageへ保存することで、表示を高速化する方法をブログに書きたいと思います。 画像をLocalStorageへ保存すると表示が速くなる？ 画像やCSSやJSなどのファイルは、Expireヘッダなどを使ってブラウザへキャッシュすることが可能です。 ただ多くのスマホの場合、画面を開くたびにキャッシュ確認のためサーバーへ問い合わせを行ってしまい、そのリクエスト待ちで表示が遅れるのがもったいないのです。 ただしLocalStorageの上限が5MB程度のブラウザが多いので、た

こんにちは、@yoheiMuneです。 久しぶりにHTML5 Canvasを触ったので、それに関するブログを書きたいと思います。 HTML5 Canvasでテキストを描画する際に、上下左右中央に表示するのは大変？ 最近、自分のポートフォリオサイトを作り始めました。 TopページにHTML5 Canvasを使って、文字をページの真ん中に表示するように作っています。 Canvasでテキストを表示したのは、色々とアニメーションさせたかったからで、 ページの真ん中にテキストを表示するのが案外面倒だったので、その方法をブログに残しておきたいと思います。 テキストを左右中央に表示する テキストを左右中央に配置するのは簡単です。 以下のどちらかの方法で、左右中央に表示することが出来ます。 実装方法１：textAlignを利用する（オススメ） １つ目の方法は、textAlignをcenterに指定すること

こんにちは、@yoheiMuneです。 今日は、HTML5 Canvasのブレンドモードについてブログに書きたいと思います。 Cnavasのブレンドモードとは HTML5 Canvas上に、画像・図形・文字などを描画する際に、通常は重なり合う部分は後に描画した内容が描画されると思います。 例えば、以下のコードの場合は、四角形の上に丸が描画されます。 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // 四角形を描画する。 ctx.fillStyle = '#cc00cc'; ctx.fillRect(canvas.width/4, canvas.height/4, canvas.width/2, canvas.height/2); ctx.fillStyle = '#ccc

こんにちは、Canvasでバリバリ仕事中の@yoheiMuneです。 最近のWebアプリでCanvasを使っているアプリが多いですが、Retina対応できておらず、にじんだ感じになっているアプリが多々あり。。 なので、CanvasでRetina対応できるのかを調べました。今回はその結果を記載したブログとなります。 Canvasで普通に描画するとにじむ Canvasの描画内容をRetinaでない多くのPCブラウザで見る分には問題ないのですが、 iPhoneなどのRetina対応したブラウザで見るとにじんで見えてしまいます。 画像などの表示ではRetina対応を行う事が多いですが、 CanvasでもRetina対応する事でにじまずに描画内容を表現できるようです。 CanvasでRetina対応をする方法は、画像のRetina対応の考え方と同じで、 描画した内容を1/2のサイズで表示することでキ

Mozilla supports a wide variety of exciting open web technologies, and we encourage their use. This page offers links to interesting demonstrations of these technologies. If you know of a good demonstration or application of open web technology, please add a link to the appropriate section here.

前回（連載第2回）に引き続き、HTML5開発者コミュニティーの管理人を務める白石俊平氏に、HTML5の基本を解説してもらう。今回は、仕様の標準化プロセスの実態を解き明かすことによって、HTML5がいつごろから本格的に利用できるようになるかを分析する。 HTML5がもたらす新機能によって、Webはどう変わるのだろうか。企業の一般的なホームページのように、基本的に動きのない静的な「Webサイト」と、GmailやGoogle Mapsなど、表示内容が動的に変化する「Webアプリケーション」で、そのインパクトは異なる。 Webサイトの構造を明確化 静的なWebサイトについては、ページの構造を示すHTMLコードの可読性やメンテナンス性などが向上する。さらに、より検索されやすいWebサイトを、容易に作成できるようになる。 こうした変化が起こる理由は、HTML5で文書の論理構造を示すタグが多数追加される