加速するフロントエンドとPWAat DevSumi 2018
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
君はHTML5の contentEditable 属性を知っているか ｜ Tips Note by TAM
知っている方には、すみません。 HTML5 には contentEditable という属性がありまして、この値が true だと、その要素はブラウザ内で編集可能となります。 ちょっと試してみましょう。 <div contentEditable="true">ここは編集できる</div> ↑ ここは編集できるのです。(ただの <div> 要素なのですが！) 編集内容はどこかに保存されるわけではないので、ブラウザをリロードすれば元に戻ります。 body要素に contentEditable 属性をつけてみる さきほどのボタンでは、クリックすると JavaScript が実行され、<body> 要素の contentEditable 属性を変更しています。結果、ブラウザで表示されるすべてが編集可能になるのです。 JavaScript コードはこんなかんじ。 javascript:(functi
JavaScriptでデスクトップ通知（HTML5 Notification） - Qiita
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Desktop Notification</title> </head> <body> <script> // Notification対応しているかどうか if (window.Notification) { alert('Notificationは有効です'); // Permissionの確認 if (Notification.permission === 'granted') { // 許可されている場合はNotificationで通知 alert('通知許可されています'); var n = new Notification("Hello World"); } else if (Notification.permission === 'denied') { al
W3C文書を読むときに気をつけたい7つのポイント（超簡易版） - 水底の血
超簡易版だからものすごい手抜きの説明だよ。下の画像のらくがきは、見出し番号と対応しているよ。 1. ステータス 文書*1のステータスは何段階かあるよ。少し詳しい説明はW3C勧告プロセスの概要を見てね。「W3C Recommendation」がW3C勧告、「W3C Working Group Note」がW3Cノートと呼ばれるもので、この2つはその時点で確定した文書だよ。それ以外のステータスは作成途中のものだよ。勧告とノートを比較する場合、勧告の方が優先されるべき文書だよ。多くの文書で「Status of This document」の最後に"This document is governed by the 14 October 2005 W3C Process Document. "みたいな形でどのW3Cプロセスで作成されているかがわかるよ。正規のW3C文書はhttp://www.w3.o
プログラム組んだら負け！実はHTML/CSSだけでできること2015夏
2. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 平尾優典（ひらお ゆうてん） === 株式会社ディーゼロ Webエンジニア ## コミュニティ活動 - 福岡フロントエンド友の会 Fukuoka Frontend Frogs - 福岡マークアップ勉強会 - baserCMSユーザー会 Yusuke Hirao @cloud10designs 3. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 ## コミュニティ紹介 ### 福岡フロントエンド友の会 Fukuoka Frontend Frogs ### 福岡マークアップ勉強会 ### baserCMSユーザー会 「井の中の蛙」にはならないようにと集まった フロントエンドエンジニアのためのコミュニティ。 Webコーディング・アプリ開発の悩める蛙たちが その場で話題を決めて、アンカンファレンス形式で
Extensible Web を支える低レベル API 群 - Block Rockin’ Codes
Intro 最近 Extensible Web の話がたまに出るようになりましたが、なんというかレイヤの高い概念(ポエム)的な話が多い気がしてます。 もう少し具体的な API とか、「それコード書く上で何が変わるの？」って話があまりないので、今日はそこにフォーカスして、 Extensible Web 的な流れの中で整理された API の話をします。 しかし、実際には API が 「Extensible Web という理念で生まれたかどうか」は自明ではないので、 今標準化されている低レベルな API を拾い、それを整理するというエントリだと思ってもらと良いかもしれません。 あまり知られてない API もあると思うので、これを期に「これがあれば、今までできなかったアレが、標準化や実装を待たなくても、できるようになるな」と思ったら是非書いてみると良いと思います。 実際はそれこそが Extensi
ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks
How browsers work Stay organized with collections Save and categorize content based on your preferences. Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrot
HTML5 File API で画像をアップロードしてプレビュー - Qiita
<input type='file'/> で画像を選択させる input.onchange が発火するのでコールバックをとる File APIがあれば input.files[0] にFileオブジェクトが入ってるの抜き取る FileReader の FileReader#readAsDataURL に Fileオブジェクトを渡す FileRead#onload が発火するのでevent.target.result に Data uri が入ってる imgのsrcにData uri ぶち込む <img class='image-preview'/> <input type='file' class='file-selector'>upload</input> $preview = $('img.image-preview') $file = $('input.file-selector')
レンタルサーバーナレッジ
Twitter CPIのTwitterアカウントでは、サイト、サーバー管理者のための重要なセキュリティ情報や、サイト運営者のためのヒント、お得なキャンペーン情報をお知らせしています。 Follow @cpiadjp Tweets by cpiadjp 掲載内容について、当社は情報の掲載には細心の注意を払っておりますが、完全性などについて保証を行うものではありませんので予めご了承ください。 掲載されている情報をご利用いただいた際に、損害が発生・誘発した場合や、情報自体の真偽性・合法性・道徳性・著作権の許諾等について問題が発生した場合などについて、当社は一切の責任を負いません。掲載されている情報を利用したサイト製作については、ご自身の責任において行ってください。
tjun月１日記
コロナウイルスが流行する前の2020年1月上旬、中国の杭州に行ってきたのでその記録を書いておく。 はじめに 自分はこれが中国へ行くの5回目。それなりに慣れている方だと思うけど、中国人と一緒に行ったほうが圧倒的に楽です。 数年前にキャッシュレスが普及して、その後も規制が変わったりして行くたびに状況が変わっています。なので、ここで書いてあることは半年後には参考にならないかも。 事前にやっておくこと WeChatPayのアカウントを作る、可能なら本人確認とチャージをやっておく Alipayのアカウントを作って、可能なら本人確認とチャージをやっておく 中国で使える香港SIMを買う WeChatPayとAlipayのアカウントは、外国人でも作れるときと作れないときがある。またお金もチャージできるときとできないときがある。 事前にググってできるかどうか試しておくのが重要。 また、中国はいわゆるGrea
SPDYやQUIC登場の背景。Webの進化がプロトコルを変えつつある。HTML5 Conference 2013
SPDYやQUIC登場の背景。Webの進化がプロトコルを変えつつある。HTML5 Conference 2013 Webをより速くしようと、HTTPよりも優れたプロトコルとして提案されたSPDY（スピーディ）。しかしそのSPDYによって、下位レイヤであるTCPの制限が顕著に見えるようになってしまい、そのことでTCP以外のプロトコルとしてQUICをGoogleが提案しています。 Webの進化は、インターネットのプロトコルにまで影響を与えようとしている、という非常に興味深い話が、HTML5のコミュニティ「html5j」主催のイベント「HTML Conference 2013」で行われた小松健作氏のセッション「最新Webプロトコル、傾向と対策」で行われました。 その内容をダイジェストで紹介しましょう。 最新Webプロトコル、傾向と対策 小松です。所属はNTTコミュニケーションズでHTML5の研究
アドインなしで実現可能！ ドラッグ＆ドロップを使いこなそう
HTML5のDrag and Drop APIは、Insider.NETの読者諸氏ならば習得が容易なはずだ。なぜなら、ドラッグ＆ドロップの実装方法が.NET FrameworkのWindowsフォーム・アプリケーションのそれと類似しているからだ。 HTML 5のDrag and Drop APIの実装方法は「ドラッグ操作」と「ドロップ操作」に切り分けて考える必要があるが、この考え方はずばりWindowsフォーム・アプリケーションのそれと同様である。これは、Drag and Drop APIの設計にマイクロソフトが大きな影響を与えている点に由来している。 WHATWG（Web Hypertext Application Technology Working Group）がHTML5の仕様策定を進める際、「先進的な機能を実装しているブラウザの挙動を規格化する」という基本理念があった。マイクロソ
Canvas APIの基礎
もともと、Appleが主にDashboardウィジェットの描画のためにWebKitに導入したCanvas API。サンプルコードと見比べながら、効率良く学習しよう Canvas APIの基礎 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。今回はHTML5のcanvas要素で使える2次元描画コンテキスト、俗にいう「Canvas API」を取り上げます。 Canvas APIは、もともとAppleが主にDashboardウィジェットの描画のためにWebKitに導入したものです。それがFirefoxやOpera、Internet Explorer（9以降）に実装され、現在はW3Cによって標準化が進められています。JavaScriptのメソッドで直接図形を描画するのが特徴で、ビットマップ画像の加工や、ゲームのようなインタラクティブ性の高いアプリケーションに向
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DevDocs
GitHub - sbidolach/video-live-streaming: Video live streaming with jpeg renders in html5 and nodejs
How to Implement WebRTC Screen Sharing
IBM Developer
http://www.enoie.net/blog/2011/03/native-client-sdk-technical-overview/
これがMozillaのモバイルOS「Boot2Gecko」だ