知っておくと便利なHTML5の機能、要素や属性のまとめ
今まであまり使用されていなかったけど、現在の環境では有用であるHTML5の便利な機能、要素や属性を紹介します。 10 useful HTML5 features, you may not be using by Tapas Adhikary 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに details要素 contenteditable属性 map要素 mark要素 data属性 output要素 datalist要素 値range meter要素 input要素 次に学ぶべきこと はじめに HTML5は、新しいものではありません。すでにわたし達は最初のリリース（2008年1月）からいくつかの機能を使用してきました。#100DaysOfCodeの取り組みの一環として、HTML5の機能リストを詳しく調べました。私が見つ
画像の遅延読み込みにloading属性とJavaScriptを併用した最大限のパフォーマンスを発揮させる実装方法
画像やiframeの遅延読み込みに使用するloading属性と非サポートブラウザ用にJavaScriptを併用した現代的なアプローチで、最大限のパフォーマンスを発揮させる実装方法を紹介します。 Best way to lazy load images for maximum performance by Adrian Bece 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 遅延読み込みのloading属性とは 遅延読み込みの現代的なアプローチ パフォーマンスとLighthouseスコアの向上 最大のパフォーマンスを得るための画像最適化テクニック はじめに 画像の遅延読み込みは比較的簡単に実装でき、パフォーマンスを大幅に向上させることができるため、Webサイトを最適化するために使用される選択肢の1つです。遅延読み込みで
canvasでキラキラした背景を作る方法 - KAYAC Engineers' Blog
tech.kayac.com、ささやかにリニューアルしました！ tech.kayac.comをご覧の皆さん、はじめまして。意匠部ME課のfuchigamiといいます。 どうして技術部ブログに意匠部の野郎が？って感じですが、 技術部ブログのリニューアル記念ということで、ちゃっかりcanvasについて記事を書こうと思います。 最初なので、、、 簡単にぼくの属性を説明すると、html5とか好き、CSS3とか好き、canvasとか興味ある、非モテ、javascriptはjQueryがなんとなくわかる程度、非リア充。こんな感じです。 今回のリニューアルではコーディング全般を担当しました。 特に、プログラミングに関してはド素人だ！ということを強調しておきます。 そんなぼくが、canvasを使ってキラキラした背景を作ってみました 「リニューアルするからには新しいことがやりたいよね。だったらhtml5とc
今更聞けないcanvasの基礎の基礎 - KAYAC Engineers' Blog
はじめまして。新入りのnagataです。 入社式で自転車乗ってた野郎です。 先輩方から「ブログ、書いてね！」とのお達しがあったので、 日報で書いたらウケがよさげだったcanvasのことについて書いてみようと思います。 ※各種サンプルはMac上のSafari4.05、Firefox3.6.3、Chrome5.0で動作を確認しています。 canvasってなんぞ？ 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル（かつ動的な）表現が行えるわけです。 とりあえずつかってみる 早速何か描いてみましょう。 こういうことは実践あるのみです。 処理にはJavascriptを使います。 canvasに描画を行うときは、canvas要素からcontextを取得して、
W3Schools Online Web Tutorials
W3Schools offers a wide range of services and products for beginners and professionals, helping millions of people everyday to learn and master new skills. Free Tutorials Enjoy our free tutorials like millions of other internet users since 1999
Canvasの複数の図形をprototypeで同時に扱う ｜ スターフィールド株式会社
JavaScriptのprototypeを利用すると、 同時に同様の図形を処理するような場合に、 メモリを節約した、効率的な処理を行うことができます。 この処理は、HTML5のCanvasを利用する際には、とても重要になりますので、 今回、prototypeを利用して、Canvas上で複数の図形を扱うプログラムを作ってみましたので、 ご紹介いたします。 今回作ってみたものは、Canvas上のなにもないところをクリックしたときに、その場所にサイズと色をランダムに設定した円を描画し、 円をドラッグした場合には、円を移動するというものです。 ↓作ってみたもの DEMO 方法 全体の処理 Canvasの初期設定 クリックした場所の取得 クリックした場所に円があるかを判定 (prototypeのインスタンスのメソッドを利用) 円がなければクリックした場所に円を追加 (prototypeのインスタンス
Web標準化時代のJavaScript
ページが読み込まれたら処理を呼び出すonloadの書き方 ページが読み込まれたら何か処理を行わせる場合、<body onload="～">のようにbodyタグにonloadを記述してスクリプトを呼び出すことは多いでしょう。例えば以下のようにページが表示されたらアラートダイアログを表示する、という場合にはbodyタグのonloadイベント部分にスクリプトを書く事になります（多くの場合は関数を呼び出して処理を行うはずです）。【サンプル1を実行】 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Sample</title> </head> <b
Sex club in Sarasota
Marital Status: Separated Age: 39 Hair: Blonde Nickname: Yaemrha Address: 6637 Taeda Dr, Sarasota, Florida 34241 Hmu I will definitely reply. Hello, I'm African American man very sensual, I looking for some adventure, exploration of sex and meet interesting people. ~ always creating goals or little missions. I do, of course, love club fucking, too. Marital Status: Divorced Age: 59 Hair: Blonde Nic
canvas要素の基本的な使い方まとめ
Written by defghi1977@xboxLIVE.この文書は全てテキストエディタで作成しています．えーと，そりゃもうゴリゴリと． 本文書はsvg要素の基本的な使い方まとめの姉妹版として作成を開始した．canvas要素の仕様は現在進行中で色々と変化しているため，一筋縄で行かないが大方のapiについて書き上がったので公開する．なお，まだ使えない機能等満載だったり，内容に間違いがあっても中々検証することができないので，その部分を了承した上でご利用下さい… 更新履歴 2012/07/18 初版 1・canvas要素の概観 canvas要素とは canvas要素はhtml5で採用されたwebブラウザ上でグラフィックを描画するための機構であり，webページの機能性・視認性が重要視される昨今では，svg要素と並び重要な役割を果たしている．もともとapple社が自社製osの機能向上策として，同
JavaScriptの読み込みを最適化してページの表示速度を高速化する6つの方法
[対象: 中〜上級] 僕のブログではてブ数がいちばん多いのはウェブページを高速化するTIPSを解説した記事です（まだ読んでない人はぜひ読んでください！）。 その記事では高速化全般を扱っていましたが、今日の記事ではJavaScriptに的を絞って表示速度をスピードアップできる施策を6つ紹介します。 もともとはSearch Engine PeopleブログのOptimizing JavaScript for Better Web Performanceで説明されていたものです。 記事作者のJoydeep Deb（ジョイディープ・デブ）氏に僕のブログでの転載許可をもらえました (Thanks, Joydeep!)。 逐一の翻訳ではなく、書かれている内容をもとに僕の言葉で解説していきます。 1. HTTPリクエスト削減のためにJavaScriptファイルを1つに統合する ウェブページの表示を高速化
[JS]Canvasでよく使う描画テクまとめ
HTMLで画像をいじくりたい時は、canvasを利用して編集するのは一般的ですが、WindowsストアアプリではHTML+CSS+JSでのアプリ開発ができる事もあって、簡単な画像編集であれば、C#やVBを使うより分かりやすいし資料が多く、C++でDirectXをガリガリ書くよりお手軽。入出力もファイルピッカーを使えば簡単に実装できます。今回は、Windowsのコードではなく、Canvasを利用する時のJavaScriptを使いどきに合わせてまとめていきます。 少し長いので目的の内容に飛ぶアンカー用意しました。 画像の取り込み Canvasの内容をコピーする Canvasの絵を動かす 線太いんだけど 画像の取り込みJavaScriptで画像を編集するには、とにかくCanvasへ画像を取り込む必要があります。画像の読み込みは簡単ですね。 var img = new Image(); img.s
CreateJSとNode.jsを使ってサーバーサイドでCanvasを扱おう–ICS LAB
HTML5 Canvasのフレームワーク「CreateJS」(基本的な使い方は入門サイトをご覧ください）について、2015年2月10日に開催されたCreateJS勉強会 (第5回) でライトニングトーク「CreateJSとNode.jsを使ってサーバーでCanvas要素を使おう」を発表しました。今回はそのスライドを元に、サーバーサイドでCreateJSを使うメリットを紹介します。 デモ 今回紹介するnode-easelを使ったデモです。スマホ画面にTwitterのアイコンが、PC画面には白い矩形が表示されています。スマホで選んだTwitterのユーザーのアイコンがPC側でアニメーションします。画像加工はサーバーサイドで動くCreateJSを使って行われています。 Section1. Node.jsとモジュールについて Node.jsはブラウザではなくサーバーサイドで動くJavaScript
WebSocketとCanvasでオンライン対戦オセロを作ろう 第1回 基礎の基礎
This document describes a multiplayer canvas game that allows two players to play tic-tac-toe using WebSockets. Players A and B can take turns placing X's and O's on a shared canvas and the game state is synchronized between clients in real-time via WebSockets so both players see the updated board instantly. A message is logged to show whose turn it is and the game continues until there is a winne
Drawing a 1px thick line in canvas creates a 2px thick line
In this jsfiddle there's a line with a lineWidth of 1. http://jsfiddle.net/mailrox/9bMPD/350/ e.g: ctx.lineWidth = 1; However the line is 2px thick when it's drawn on the canvas, how do you create a 1px thick line. I could draw a rectangle (with 1px height) however I want the line to also work on diagonals. So how do you get this line to be 1px high? Thanks!
HTML5 Canvasのブラウザによって異なる微妙な振る舞いについてまとめてみた。 - 風と宇宙とプログラム
はじめに CanvasはHTML5とは切り離された独立した仕様(HTML Canvas 2D Context)になっているようですが、現状のブラウザ上でのCanvasのについて、普段はあまり気にしない微妙な振る舞いについて調べた結果をまとめてみました。 調べたブラウザの各バージョンは以下の通りです。 Firefox Chrome Safari Opera 3.6.8 6.0.490.1 dev 5.0.1 10.61 線を描く (lineTo) ただの直線を描くだけのlineToですが、その単純なものにも、恐らく、多くの人が普段は気にしないような問題があります。それは座標値とアンチエリアスです。詳しく見る前に、実際の結果を示しましょう。下記のイメージ中に描かれている線は、いずれも線幅(lineWidth)が1の線です。 (左から、Firefox, Chrome, Safari, Opera
いい加減、<script src="http://.. と書くのはやめましょう - DQNEO起業日記
外部サイトのJSファイルを読み込むときに、こういう書き方するのはやめましょう。 <script src="http://example.com/js/jquery.js"></script> 理由 あなたのサイトが、いつの日かSSLに対応することになったとき、そのscriptタグがバグの原因になります。 ご覧のとおり、HTTPSページの中でHTTP要素を読み込もうとすると、ブラウザによっては安全装置が働いて読み込んでくれないのです。 上の例ではjQueryの読み込みに失敗していますが、エラーメッセージ「Uncaught ReferenceError: jQuery is not defined 」を見てもHTTPS/HTTPのプロトコルが原因だとはすぐ気づかないので、わかりにくいバグになってしまいます。 結論 JSファイル(とかCSSとか画像とか)を読み込むときは、"http:"の部分を省
YOPPA 田所淳の講義ノート
このサイトは田所淳の講義、仕事、日記、そのほか諸々の情報を公開しています。そもそもは、授業の履修者のために過去の授業の内容の記録を掲載するために始めたのですが、より多くの人に役にたてるのであればと思い、全てを公開することにしました。基本的にリンクはフリーです。どの階層のページにも勝手にリンクしていただいて構いません。また、リンクした旨を連絡をしていただく必要もありません。サイト内の全ての記事は、Creative Commons Licenseの条件に従う限り自由に利用していただいて構いません。記述の誤りご意見などありましたら、コメントもしくはメールにてお知らせください。 tadokoro[at]gmail.com
canvas要素 + Javascriptで作る、動的コンテンツ
HTML 5 + Javascriptで作る動的なコンテンツ 前回の授業では、HTML 5について、その成り立ちや特徴を解説した上で、新しい構造化のための要素について解説しました。また、あわせてCSS3によって格段に進歩した表現力について実際にサンプルページを作りながら解説しました。 今までは、Webページで動的に図や画像やアニメーションを描画するにはFlashが代表的な選択肢でした。しかし、ここ数年でその状況が大きく動きつつあります。Flashに代表されるような動的なコンテンツが、専用のプラグイン無しに、HTMLの要素とそれと連携するスクリプトだけで実現できるようになりつつあるのです。こうした技術は、今後のWebの動向を大きく変える可能性を秘めた技術として脚光を浴びています。 HTML 5で動的に画像やアニメーションを生成するためには、canvas要素という新規に導入された要素と、can
JSでオセロ盤表示 - teruuuのブログ
Canvasタグでオセロ盤表示 JSとCanvasタグを利用してオセロ盤の表示を行います。 最近はJSでゲームを作る場合enchant.jsやtmlib.jsなどといったフレームワークが 充実しているようだが基礎を大切にしたいのでまずは素のJSで作ってみようと思う。 ○作成に当たって jsでの開発用環境としてBracketsを利用することにした。まだあまり 使い慣れていないが補間の能力がすごく優れていた。それからライブプレビューで編集結果の リアルタイム反映でデザイン調整には便利な機能に力を入れている。 またNode.jsが標準で同梱されているなど、jsでの開発を行う人にはとってもお勧めできそうな気がする。 ○まずは、canvasタグ オセロ盤の表示にはhtml5のCanvasタグを使う。Html5を使う場合ブラウザにもそのことを明示 的に伝えることが推奨であるので、気にするのであればドキ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Create a new fiddle - JSFiddle