こんにちは、たかとーです🧑🎤 こちらは、10 useful HTML5 features, you may not be usingの翻訳記事になります。 当記事は、Tapasさんの許可を得て翻訳しています。Tweet 10 useful HTML5 features, you may not be using HTML5は新しいものではありません。最初のリリース（2008年1月）以来いくつかの機能を使用してきました。100DaysOfCodeの取り組みの一環として、HTML5の機能リストをもう一度よく見てみました。何か見つけたかな？私は今のところあまり使っていません。 この記事では、過去にあまり使ったことがなかったが、今では便利になったHTML5の機能を10個挙げています。また、Netlifyでホストされている、実際に動作する例を作成しました。参考になることを願っています。 htt
HTML5でWebページを作成する時のベースになる必要最小限の構成で記述されたHTML5のテンプレートを紹介します。 スニペットに登録しておくと、便利ですね。 イラスト: Girls Design Materials HTML5 Boilerplate -GitHub HTML5のテンプレート HTML5のテンプレートの解説 HTML5のテンプレート HTML5 Boilerplateのテンプレートを日本語化しました。 オリジナルライセンスで、商用利用、修正、配布、サブライセンス可です。 <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>タイトル</title> <met
注 updated: 2018/01/25 本記事の投稿当時に紹介したアプリケーションキャッシュは、現在では廃止予定の機能となりました。 順次、各種ウェブブラウザからも廃止されていくことでしょう。 かわりに Service Workers / Cache API を使用するべきです。 Service Worker の紹介 | Web | Google Developers Service Workerの利用について - Web API インターフェイス | MDN はじめに ちょっとした JavaScript ミニアプリの作成で、キャッシングを無効にしたコンテナ用 HTML ページを1枚用意したかったんですが、ひっさびさに W3C Validation Service にかけたらエラーの烙印を食らったのでメモしておきます。 留意事項 本稿執筆時点で HTML5 の仕様は「勧告候補」の段階で
HTML5＋CSS3は「メニューの作り方」を覚えるだけ！：にわかデザイン（1）（1/3 ページ） Photoshopなどの画像処理ソフトを使わず、CSSでできる表現の幅が広がっています。にわかデザイナーになれる、簡単Tipsをお伝えします。 Web製作の現場では、予算の都合上Webサイトのデザインをデザイナーに発注できず、エンジニア自身が担当しなければならないことがままあります。昨今は「Twitter Bootstrap」などのCSSフレームワークを使って、そんな状況に対応している方も多いと思います。確かに、Twitter Bootstrapはリッチなデザインや機能を持つパーツがそろっていて、素早くレイアウトを組み上げるには便利です。しかし、そのためには独自の指定方法やお作法をそこそこ知っておかなければならないのも事実です。 であるならば……、CSS自体を覚えてしまうというのも1つの手では
※2014年2月26日に更新しました。要素及び属性をなるべく新しい仕様書に準拠、その他頂いたコメントへの対応を行いました。 ※2014年3月3日更新しました。タグと要素の違いについて追記。本文内でタグと要素の記述が間違っていた部分を修正。「要素が要素をまたがってはいけない」というのはどの形式でも同じなので、記述を削除。 どうも、くーへいです。 今日はある方からリクエストされた記事を書こうかと思います。 皆さんは、コーディングをするときに「HTML 4.01」、「XHTML 1.0」、「HTML5」のどれを使っていますか？ 実際には案件ごとに使い分けているかもしれませんね。 この投稿では、それぞれの違いについて、考えていきたいと思います。 ※要素とタグを混同する方も多いですが、要素とタグでは意味が全く異なります。 例えば、「<html>・・・</html>」は要素ですが、「<html>」や「
「HTML5 Advent Calendar 2013」の24日目の記事です。 Webアプリのパフォーマンス改善と言えば、JavaScriptやDOMアクセスなど、既存の技術ベースな改善手法を想像する方も多いでしょう。最近では、こうした改善のあり方を、別の視点からもう少し広げようというアイデアが存在感を持ち始めています。それは「Web標準」です。 そこで今回、Web標準側でできるWebアプリのパフォーマンス改善について、掻い摘んで紹介します。全てを説明となるとキリがないので、キーワードを中心とさせて頂きます。最近になって、結構実用化が進んできているので、悩んだ時には試してみる価値はあるでしょう。 1. リソースを先に読み込む linkタグにてURLなどを指定することで、これから先に読み込ませる可能性が高いWebページのリソースを予め読み込むWeb標準があります。ニュースサイトでは次のページ
Enterprise x HTML5 Web Application Conference 2014の発表資料です。
（1）Ajax XmlHttpRequestオブジェクト（JavaScript）を利用した非同期通信処理のこと。Googleマップを筆頭とするWebアプリケーションで活用されている。ブラウザからサーバ側に非同期でリクエストを実施してデータを受け取り、JavaScriptにより部分的にページを更新することで、ページ全体を更新するよりも低負荷でサーバと通信できる。また、通信中も操作を継続できるので、エンド・ユーザーの操作を妨げられることもなく、ユーザビリティに優れる。デメリットとして、基本的にブラウザからのリクエストで動作する仕組みなので、サーバ側から自動でデータを送信することはない。
先日書いた「Web StorageやindexedDBを扱う上でのセキュリティ上の注意点」の続き。 sessionStorage を使うと解決するか この用途なら sessionStorage でよい (はてなブックマーク - ssig33 - 2013年3月9日)sessionStorageはウィンドウあるいはタブが開かれてから閉じるまでの間をひとつのセッションとして管理し、そのセッションの期間中だけデータを保持します。ウィンドウやタブを閉じる際にはセッションは終了し、ストレージ上のデータは破棄されます。通常のWebアプリケーションでは、ログイン/ログアウト間というアプリケーション側が想定しているセッションと、sessionStorageのいうところのセッションとは異なる概念であり、ウィンドウを閉じる前に異なるユーザでログイン/ログアウトを繰り返した場合には同種の問題が発生する可能性があ
こんにちは。たごまさゆきです。 HTML5特集として記事を書くことになりました。HTML5の仕様にもいろいろありますが、この記事ではWeb Storageについて書いてみたいと思います。 Web Storage Web Storageは、ブラウザにデータを保存するための仕組みです。データはkey-valueペアで扱われ、JavaScriptで保存したり取り出したりできます。 よくCookieと比較されますが、それより保存できるデータ量がかなり大きく、毎回のリクエストでサーバーに自動送信されないなどの違いがあります。 Web Storageにはデータの保存期間が違う2種類のストレージがあり、用途に応じて使い分けができます。 Session Storageは、ブラウザのウインドウ（またはタブ）が閉じられると削除されます。 Local Storageは、保存したデータは削除しない限り残り続けます
![[HTML5] Web Storage よく使う検索条件を保存する | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/a18d742778bb675192c3331b71122e80fc5dc1fa/height=288;version=1;width=512/https%3A%2F%2F2.zoppoz.workers.dev%3A443%2Fhttps%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F11%2Fhtml5.png)
連載目次 ■Web Storageの概要と活用例 旧来（＝HTML 4.1以前）のWebブラウザでは、eコマース・サイトのカート情報やログイン状態の管理情報などのデータをブラウザに保存する仕組みとして、大半のWebサイトではクッキーを利用していた。しかし、クッキーでは、保存容量が4KBytesまでであることや、すべてのリクエストに対してサーバにデータを自動で送信するため、容量制限やセキュリティ対策に悩まされることも多くあった。 HTML5では、クッキーに代わるデータ保存の仕組みとして、「Web Storage」と呼ばれる機能を利用できる。Web Storageは、ブラウザ側でKey-Value型でデータを保存する機能のことで、現在のインターネットを取り囲む環境に対応した「クッキーの後継技術」ともいえる。 Web Storageとクッキーの機能の差異は、以下の表のとおりだ。
2013-09-14 50行で作る、HTML5+JavaScriptな簡単ライフゲーム【プログラミング】 やり方 はじめに。 ライフゲームを知っていますか？ライフゲームは世界でとっても有名なシュミレーションゲームです。Wikipediaによると、 1970年にイギリスの数学者ジョン・ホートン・コンウェイ (John Horton Conway) が考案した生命の誕生、進化、淘汰などのプロセスを簡易的なモデルで再現したシミュレーションゲームである。 らしいです。 眺めているだけでもさまざまなパターンを観測することができてとても興味深く、魅力的なゲームです。 見つけだすのに賞金も賭けられたという「グライダー銃」というパターンは特に有名ですね。 もっとライフゲームについて詳しく復習したい方は秀逸なWikipediaのページを見ることを薦めます。 ライフゲーム - Wikipedia また、ライフ
WebRTCへの最近の僕 今年最初のブログ記事ポスト。いやーもう4月も半ば。桜も散っちゃいました。ほんと、更新頻度の低いブログです・・・今日は、WebRTC関連の話題。 DataChannel(映像、音声以外の任意のデータを送受信できる機能)が実装されたり、Firefox nightlyでも実装が始まったり、Chrome for Android(beta)でも実装が始まったりと、最近ホットなニュースが目白押しのWebRTC（Web Real Time Communication）。僕も、ちょいちょいプロトタイプ実装を試しています。 例えば、3/22のWeb先端味見部の時に、当日講師の吉川さんに取り上げていただいたチャット実装(github)とか（その後、吉川さん、大津谷さんのcontributeのおかげで、ビデオチャット機能実装とかバグ改修とか進められています） なお、上のコードは、サンプ
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。
はじめに 昨日公開した「第一回 プログラマ向けデザイン勉強会の内容を参考にして妻のパン屋のWebサイトをリニューアルしてみた」の続編を書きます。 今回は僕が苦労したIE6〜8対応のお話です。 実はIE8ユーザーの割合はIE9に次いで第2位！ Mac万歳！Chrome万歳！な僕にとって、IEは「どうせ使うことないし、どうでもいいよね〜」という「心の中でサポート対象外なブラウザ」でした。 しかし、店のWebサイトのアクセス解析を見てみると、実はIE9とIE8が1位、2位を占めていることがわかりました。 よく見ると8位にはIE6がまだしぶとく生き残っています。 この結果を見ると、「うーん、こりゃ完全に無視するわけにはいかんな・・・」と考えざるを得ませんでした。 IE対応を全く考慮していないとこうなる まず最初に、IE対応を全く考慮していないと、いったいどんな表示になるか見てみましょう。 トップペ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
