あなたがまだ使っていないかもしれないHTML5の便利機能10選 - Qiita
こんにちは、たかとーです🧑🎤 こちらは、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
実はHTMLだけで多くのことが実現できる！知っておくと便利なHTMLの使い方
HTMLだけで多くのことが実現できるのは素晴らしいことです。一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。 知っておくと便利なHTMLの使い方をまとめて紹介します。 HTML can do that? by Ananya Neogi 先日紹介した「CSSでここまでできるのか！」の続編です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. datalist -フォームに入力候補を表示 2. dialog -ダイアログ ボックス 3. progress -プログレスバー 4. detailsとsummary -開閉パネル 5. inputmode -スマホで入力時に適したキーパッドを表示 6. inpu
[HTML5] autocomplete属性を用いた入力補完を実装する - YoheiM .NET
こんにちは、@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
![[HTML5] autocomplete属性を用いた入力補完を実装する - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/9665554e8e1b6977f7cac377281f4d01277c5a0f/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F464.jpg)
HTML5 Experts.jp 2015年の年間読まれた記事ランキングTOP20！
HTML5 Experts.jp 2015年の年間読まれた記事ランキングTOP20！ 仲 裕介（HTML5 Experts.jp副編集長） 日本初のHTML5技術専門サイト「HTML5 Experts.jp」も開設から2年5カ月が経ちました。2015年も2014年に引き続き、エキスパート・コントリビューターの方々に、ホットな技術トレントをタイムリーに、記事として取り上げていただきました。また、白石編集長と豪華なパネリストによる様々な対談企画や、当メディアをネタにしたパフォーマンス改善企画等、新しい試みにも挑戦してきました。皆様、お楽しみいただけましたでしょうか？ 今年最後の記事は、記事公開後１週間の閲覧数（PV）をもとに、2015年の年間読まれた記事ランキングTOP20！をお届けします。 ＜1位＞ 【及川卓也・清水亮・羽田野太巳・藤村厚夫】すごい人達呼んで「Webは死ぬか？」をマジメに語り
2015年のWebクライアントサイドの温度感 - Tetsuharu OHZEKI - Medium
この3~4年間でJavaScriptとかWebクライアントサイドを取り巻く温度感も大きく変わった。これからはHTML5だぜイエーイと騒いでいたのも随分過去の話になったように思う。だけど、このあたりの温度感はそんなに掴みやすいものでは無い。別に放っておいてもいいんだけど、放っておくと10年20年経たないと誰も書かなんてのも割とよくある話。でも、そこまで待ちたくは無い。なにとなしに説明してみようと思う。 だいたい2011~13年ぐらいはHTML5がバブルっていた。今からすると「バブルだった」というのが一番説明しやすい。Node.jsあたりが世の中に認知を拡大していたのもこの時期だし、スマートフォンのシェアの伸びに合わせて、クロスプラットフォームで出せるWebにみんな夢を見ていた。MVCだの設計だの何だの言い出したのも、だいたいこのくらいの時期だし、Single Page Application
お疲れさまXMLHttpRequest、こんにちはfetch - Qiita
Service Workersでプッシュ通知を受信できるようになったわけですが([1]: GCM)([2]: Web Push)、Chromeではバージョン48まではGCMで通知だけができるようになっただけで、メッセージ本体は通知を受けてからService Workerでサーバから改めて受け取るような実装をする必要があったりします。 ここで、Service Workersでは、XMLHttpRequestが使えません。その代わり、XMLHttpRequest (以下、XHR)に代わるWHATWGの仕様としてFetch APIがあり、Service WorkersではこのFetch APIを使うことになっていますので、その使い方を簡単に紹介します。 Fetch API自体は、Service Workers専用のものではなく、メインスレッドでもXHRの代わりに使うことが可能です。現時点で実装し
HTML5でWebページを作成する時のベースになるシンプルなコードで書かれたテンプレート
HTML5でWebページを作成する時に役立つ、必要最小限のブランクのテンプレート、ナビゲーションを上部に固定配置、写真画像などの背景画像をブラウザいっぱいに表示させるシンプルなテンプレートを紹介します。 画像: Girly Drop HTML5で作成する時の必要最小限のテンプレート ナビゲーションを上部に固定配置 背景画像をブラウザいっぱいに表示 ※以前、当ブログで紹介したものもバージョンアップされています。 HTML5で作成する時の必要最小限のテンプレート まずは、HTML5でWebページを作成する時にのシンプルなブランクのテンプレート。 A Generic HTML5 Template -GitHub ライセンスはCC0 1.0で、個人でも商用でもクライアントの案件でも無料で利用できます。利用する際に、許可やコピーライトの明記などは必要ありません。 テンプレートはIE9や8以下への最低
TechBuzz 第17回 HTML5+JS勉強会資料
About TechBuzz 第17回 HTML5+JS勉強会のためのGithub Repositoryです。 概要 時間 2015/09/24 (木) 19:30 to 22:00 発表内容 「JavaScriptでマルチスレッドプログラミング」 〜事例『JSで作るInstagramのFilter』を通して〜 発表の目的 Web Worker APIの基本の使い方を知ること 事例を通してWeb Worker APIの実践例と応用方法について知ること 資料 Github : サンプルコードや資料など Wiki : 講義で話す内容の補完やサンプルコードの解説 Slide : 発表資料 サンプルコード一覧 sample01 : 2の50乗を出力します sample02 : 10万までのうち最大の素数を探し出します sample03 : 2のn乗を出力します（nはユーザからの入力を想定） sam
Substance - Webページをそのまま編集できるWYSIWYGエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサービスの種類によってはユーザにコンテンツを作成してもらうタイプのものがあります。最近ではMarkdown記法で書かせることが多いようですが、それも記法に慣れた人向けでしょう。初心者はHTMLも分からないものです。 そんな中使えるのはWYSIWYGなエディタです。HTMLをインラインで修正できるSubstanceはとても便利そうです。 Substanceの使い方 Substanceを適用しているページです。普通のWebページのように見えますが編集できます。 選択して見出しにしました。 太字にすることもできます。 リンクを追加する場合。 メニューを使って文字の種類を変更できます。 Substanceの特徴としてはHTMLやXMLのインポートができること、サーバ/クライアントサイ
サクッと読める話題 - ネット等様々な話題を誤報を防ぎながら更新
京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …
HTML5オールスターズ勉強会 資料まとめ - dackdive's blog
6/13 (土) は htmlday ということで、こちらのイベントに参加してきました。 HTML5オールスターズ勉強会｜IT勉強会ならTECH PLAY［テックプレイ］ 第58回 HTML5とか勉強会 - HTML5最新情報@Google I/O, de:code 2015｜IT勉強会ならTECH PLAY［テックプレイ］ とりあえず今の時点で公開されてるスライド資料やらキーワードやらをまとめ。 （随時更新します） Twitter でのハッシュタグは #dotshtml5 , #htmlday , #html5j などなど。 （2015/06/15追記） 若狭さんの『ハードウェアこわい』、川田さんの『The next generation mobile web!』 のスライドを追加しました。 （2015/06/19追記） 『Edge だけじゃない! Build 2015 で発表されたそれ
第5回 HTML5の広がりとこれから
みなさん、こんにちは。hifive開発チームの下田です。2013年11月、アメリカのスミソニアン博物館は、所蔵品の3Dデータの公開を始めました。3Dデータは無償でダウンロードでき、3Dプリンターで印刷すれば文字通り“手にする”ことができます。また、ブラウザー上で自由に拡大・回転させながら鑑賞することも可能です（図1）。実は、このブラウザー上での表示には、HTML5の関連技術である「WebGL」が使われています。 従来、こうした高度なリアルタイム3DレンダリングをWebブラウザー上で行うことは難しく、（1）事前に動画にしておいたり、様々な角度から写真を撮って切り替えたりすることで疑似的に3D表現する、（2）3D表示のためのプラグインソフトを別途導入する――などの必要がありました。 しかし、WebGLという標準化された技術の登場によって、リアルタイム3D描画がブラウザーの標準機能になりました。
第4回 HTML5を使った実際の開発の進め方
みなさん、こんにちは。hifive開発チームの横山です。第2回と第3回では、HTML5で実現可能な表現や機能について詳しく解説しました。これらを用いると、業務システムに従来のWebシステムでは実現できないレベルの高い操作性を持たせることができます。直観的に操作できるUIにより誤操作を防止しやすくなり、ユーザー教育のコストも減らせるのではないか---。そんな期待を持った人も多いのではないでしょうか。 しかしながら、そうしたリッチなUIを備えた業務システムの開発は、単純な画面遷移を繰り返すことで業務を進めていく従来型Webシステムと比べて、開発プロセスを適切に管理し、予定通りの工数で開発を進めることが難しくなりがちです。 そこで今回は、HTML5を使ってリッチなUIを提供する業務システムを開発する際に必要となる「成功させるために考慮すべき点」や「失敗しないための開発の進め方」「役に立つツールや
面白法人カヤックのウェブフロントエンド術
23. Application cache／Canvas／Drag and Drop／Device Orientation ／File API／Geolocation API／History API／Selectors API／Web Audio／Web GL／Web Speech／Web Socket／Web Storage／Web Workers／ Full Screen API／Typed Array／Server Sent Events／SVG／Media Capture API／System Information AP 24. Application cache／Canvas／Drag and Drop／Device Orientation ／File API／Geolocation API／History API／Selectors API／Web Audio／Web GL／
第3回 データ可視化のための三種の神器「チャート＆グリッド＆図形」
みなさん、こんにちは。hifiveエヴァンジェリストの中津川です。前回はHTML5で加わった新しい仕様や機能のうち、業務システムを開発するうえで役立つものを中心に取り上げました。今回はさらに掘り下げて、業務Webアプリケーション開発という観点からHTML5がどう活用できるのかを紹介します。 企業システム、とりわけ情報系システムにおいては、日々蓄積される大量の業務データに対して、仮説に基づき様々な観点から情報の抽出が行われています。HTML5を使えば、こうして抽出した情報を「チャート（グラフ）」や「グリッド」、「図形」などを用いて可視化することが比較的容易に実現できます。これら三つはデータ可視化における「三種の神器」と言えるものです。以下、それぞれ詳しく見ていきましょう。 1.チャート（グラフ） 業務で発生するデータを可視化する際には、「チャート（グラフ）」がよく使われます。棒グラフや円グラ
第2回 HTML5でここまでできる！入力補助からオフライン実行まで
みなさん、こんにちは。MOONGIFTの中津川です。開発者に対して情報発信などを行う「hifiveエヴァンジェリスト」としてhifive開発チームと一緒に活動しています。 第1回では、HTML5を使った業務システムの開発を検討するに当たって、まず押さえておくべき基本的な知識を中心に解説しました。今回は、それを踏まえてより実践的に、HTML5が現在どのように進化しており、業務システムを開発する中でどう役立つのかを紹介します。 なお、前回も説明した通り、広義のHTML5が指す仕様の範囲はとても広く、様々な関連仕様が存在します。全てを網羅的に説明することはとても無理なので、今回は業務システムを開発する上で特に役立ちそうな仕様を中心に見ていきましょう。 フォーム入力 従来のHTML4（HTML4.1）がサポートしている入力フォーム関連のコンポーネント（UI部品）は、テキストボックスやドロップダウン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
完全負け組なモバイルWebが、これから復活する(多分)
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
http://practice.miyamacat.info/2014/0909-localStorageNotepad/index_vuejs.html
HTML5 for the Java Web Developer