TypeScript EvolutionFor html5 Conference 2018
PWA導入の成果と課題 / nikkei-pwa-html5conf2018 - Speaker Deck
HTML5 Conference 2018 https://events.html5j.org/conference/2018/11/ で発表したPWAに関するスライドです。 [日経電子版 サイト高速化とPWA対応] https://speakerdeck.com/sisidovski/nikk…
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 で発表されたそれ
誰でもハイパフォーマンス！OnsenUIが変えるハイブリッドアプリ開発の常識ーng-japan 2015
誰でもハイパフォーマンス！OnsenUIが変えるハイブリッドアプリ開発の常識ーng-japan 2015 佐川 夫美雄（Ashiras, inc.） この記事は、Angularをテーマとした日本初のカンファレンス 「ng-japan」のイベントレポート（第2回目）です。 はじめに HTML5ハイブリッドアプリケーションとは、内部の実装にHTML5が利用されているモバイルアプリケーションです。アプリの内部実装にHTML5を使うことでクロスプラットフォーム対応が可能になりますが、その代わり問題となるのがUIとパフォーマンスです。このセッションでは、Angularの上に構築されたUIフレームワークであるOnsen UIを紹介しながら、Angularでどうすれば高速かつ快適なUIを持つモバイルアプリを作れるかについて話します。 AngularとOnsen UIで作る最高のHTML5ハイブリッドアプ
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
これからiPhoneアプリを作ってみたいけど、プログラミング知識のない方へ！ワンコインセミナーでその一歩を踏み出してみよう！Yoshinori Kobayashi
HTML5 で Windows、Mac、Linux 向けデスクトップアプリが開発できる「Monaca」 [インターネットコム]
モバイルアプリ開発プラットフォームのアシアルは、HTML5 アプリ開発プラットフォーム「Monaca」に Chrome Apps 開発機能を追加した。 Chrome Apps は新しいタイプのデスクトップ アプリケーションで、Chrome OS、Windows、Mac、Linux 向けに提供されるが、Chrome ブラウザだけでなく、Windows や Mac 上でネイティブアプリのように実行できる。 このため、Monaca の Chrome Apps 開発機能を利用して、HTML5 や JavaScript などの Web 標準技術で、Windows や Mac 向けデスクトップアプリ開発ができるようになる。 Monaca の Chrome Apps 関連機能には、HTML5 で Chrome Apps を開発するためのコーディング環境を提供する Chrome Apps 開発機能、Mon
![HTML5 で Windows、Mac、Linux 向けデスクトップアプリが開発できる「Monaca」 [インターネットコム]](https://cdn-ak-scissors.b.st-hatena.com/image/square/d7280ed29123094c0becc3655dd92389b191d93c/height=288;version=1;width=512/https%3A%2F%2Fimage.internetcom.jp%2Fimg%2F20140709%2F1404874720.jpg)
いまさらですが、増井雄一郎さんのメモ帳サービス「wri.pe」がすごい件 #HTML5 #プログラミング #wri.pe #markdown - CodeIQ Blog
CodeIQ中の人、babaQです。 ちょっと前になるのですが、コワーキングスペース茅場町 Co-Edo（コエド） で開催されたmasuidriveこと増井雄一郎さんのトークセッションに参加してきました。 HTML5を活用したメモ帳アプリ「wri.pe」誕生のきっかけ テーマは、増井さんが個人でつくった（とは思えない）メモ帳アプリ「wri.pe」 ゴールデンウィークを利用して、何かゴリゴリと作りたいと思い立ち、 1週間で「自分で使いたいものを作る！」と決めたのがきっかけなんだとか。 まず、浮かんだアイデアは2つ。 煩雑なメモをどうにかできるアプリと、未読のチャットを整理できるアプリ。 でも、1週間で開発するにはチャットはちょっと重い… ということで、メモアプリを作ることに決定。 まず最初に「メモアプリの課題」を整理したそうです。 - いつでも、どこでも使える（iPhone、iPadでも）
HTML5で情報最適化／視覚化＆WebRTCで変わる未来～QCon Tokyo 2013レポート
WebRTCで変わるWebの未来 QCon Tokyo 2013のモバイル／HTMLカテゴリの2つ目のセッションは、吉川徹氏による「WebRTCで変わるWebの未来」。 冒頭では、吉川氏より「WebRTCについて多少でも知っているか」と参加者に問い掛けたところ、3～4割の参加者が挙手。WebRTCについて初めて聴講する参加者も多かったため、吉川氏は基本的な部分も含めた形で話を展開した。 WebRTCとは 講演は、WebRTC（Web Real-Time Communications）についての話から始まった。ここでは、「Webブラウザ上でリアルタイムコミュニケーションを実現するために使用されていること」「双方向性のあるコミュニケーションを必要とするさまざまなアプリを開発できること」の2点がWebRTCの特徴であることが語られた。 デバイスのカメラにアクセスして画像をWebブラウザに表示する
HTML5 CanvasとCSS3のスマホブラウザでの描画性能 - ICS MEDIA
スマートフォンのブラウザでどの程度のグラフィック表現が可能なのか、性能が気になりませんか？ 近年、HTML5を利用できる分野はウェブサイトのみならず、ゲームやSPA（シングルページアプリケーション）など多岐に渡っています。そこで、本記事ではiOSやAndroidの新旧さまざまな端末を使ってパフォーマンスを検証。記事の前半では描画性能を、後半ではJavaScriptの計算性能を測定しています。 描画性能の検証ビデオをご覧ください さまざまな端末を使って、描画検証の様子を録画しました。この80秒の動画では画像のオブジェクトの表示可能な個数を測定しています。ビデオの後半が見どころで、iPhone 5のパフォーマンスが良すぎてビデオを早送りするほどスコアがでるまで時間がかかっています。 さまざまな端末のスコアを測定しました 次の表に、2012年までに発売されたスマートフォンのスコアを掲載しました。
[iOS] iOS Safari の Web インスペクタが便利すぎる
自分のブログのスマホ版をチェックする時とかに いまさらですが iOS 6 の Safari に備わっている Web インスペクタを試してみました。 まずは上図の通り、Web インスペクタ機能を ON に設定します。設定は iOS の設定から Safari＞詳細 と進めば OK です。 これだけでは全然不十分なので、上図にもある通りコンピュータ (Mac) 側の設定も行います。
第38回HTML5とか勉強会「Webアプリ×テスト最新事情」 - Yuji Blog
2012/4/26に行われた第38回HTML5とか勉強会「Webアプリ×テスト最新事情」に参加してきました。 JavaScriptのテストフレームワークについていろいろな話を聞くことができました。 遅れて参加したうえに、ノートパソコンの電源入れたとたんに電池切れ orz 途中の休憩時間にコンセントのある席へ移動したのですが、前半はメモれてないですｗ メモとるのが全然追いつけなかったので、コードとか省略してたり間違ってたりすると思いますが、雰囲気だけでも感じて頂ければと。 Sinon.jS 外村和仁さん テストしにくいもののダミーを作成する。 spy メソッドの代わりにダミーを作成できる。 // オブジェクト作成。spyはメソッドオブジェクト // これをテストしたいメソッドを上書きする感じで。 var spy = sinon.spy(); // 試しにメソッド読んでみる spy('foo'
IE9.jsで実現するシンプルなclearfixとその他の恩恵 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 既に広く知られているであろう、IE9.jsは、 新旧IEの差異を（出来るだけ）埋めてくれる素晴らしいスクリプトです。 今日のお話は、IE9.jsで実現出来るシンプルなclearfixと、 このスクリプトで実際どんな恩恵が受けられるかの備忘録です。 cf) ie7-js – Project Hosting on Google Code シンプルになったclearfix 念の為スクリプトのロードも記載しておきます。 IE用の条件分岐コメントを外すと他のブラウザでエラーが出ますのでご注意を。 （これも内部で条件分岐して頂けると大変幸せだなぁ） <!--[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script> <
HTML5でコーディングするならとりあえずie9.jsとhtml5shiv.jsを入れる : 森のコーディング
9月8 HTML5でコーディングするならとりあえずie9.jsとhtml5shiv.jsを入れる カテゴリ:javascriptHTML5 Tweet 最近のマークアップ界隈を観察してみると、 HTML5でマークアップするときは２つのjsを読み込ませるのが多いみたいです。 ie9.js とhtml5shiv.js ■ ie9.js これは、internetexplore6,7,8をie9に近づけるためのライブラリ。 ・position:fixed; ・max-heightやmin-heightなどの最大サイズ設定 ・aタグ以外での:hover ・margin:0 autoで中央寄せ ・透過PNG ・opacityで透明度 などなどを対応させるという。 これまでIE6やIE7のハックをしてきたコーダーの方々にとっては、 「そうそう、IE6と７に対応させるときは大体ソレだよね」 なやつらですね
HTML5.jsとIE9.js｜Webクリエイターネット
以前、当サイトの”HTML5導入前に覚えておきたいこと“の記事に関して、｢html5.jsとIE9.jsのどちらを使う方がよいのですか？｣といったお問い合わせをいただきました。 また、個人的に同種の内容を質問されたことが何度かありますので、トピックスで取り上げてみたいと思います。 ※当サイトの記事にも一部追記しました。 ⇒ HTML5導入前に覚えておきたいこと~html5.jsとIE9.jsは両方必要なの?~ html5.js html5.jsは、Internet Explorerの8以前のように、HTML5の新要素に対応していないブラウザにも一部の新要素を対応させることがメインのJavascriptです。 IE9.js それに対しIE9.jsは、CSS3に対応していないInternet Explorerの5.5～8にも一部のセレクタやプロパティを対応させることがメインのJavascrip
ie9.jsを使うと出来ること、出来なくなること。 - Toro_Unit
最近ie9.jsを活用することが少々あるので、 いまさらながらまとめです。 配布場所 ie7-js http://code.google.com/p/ie7-js/で配布されています。 デモはhttp://ie7-js.googlecode.com/svn/test/index.htmlで見れます。 使い方 head内に [html] <!–[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]–> [/html] と貼り付けるだけです。フッターに貼ると誤作動起こす場合がたまに合ったような気がします。 できるようになること E > F 子セレクタ。直下の子要素にのみ適応するやつ。 E + F 隣接兄弟セレクタ。Eのすぐ下隣に居る弟要素
Ajalog.7z: [HTML5][JavaScript] Notifications APIを使ってみる
2010/08/08 [HTML5][JavaScript] Notifications APIを使ってみる Tag HTML5, JavaScript Notifications APIって？Notifications APIを使うと、ブラウザからデスクトップの右下に通知メッセージを出すことができます。 こんな感じ。なかなかに魅力的。Chromeの拡張ではもともと使える機能だったらしいけど、いつの間にやら普通のWebサイトでも使えるようになっていた（のかな）。ちなみに仕様はここhttp://dev.w3.org/2006/webapi/WebNotifications/publish/でまとめられているみたい。Chromiumでの仕様はhttp://sites.google.com/a/chromium.org/dev/developers/design-documents/deskt
HTML5で組んでるならこの魔法のjsも入れておけっていう話
現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS
Drag and DropとFile APIを試す - NullPointer's
HTML5のDrag and Drop APIとFile APIを試してみました。 Drag And Drop APIは HTML上の要素のドラッグアンドドロップをサポート File APIとの連携でデスクトップからのドラッグアンドドロップをサポート 1番はHTML5でなくてもjQuery等を用いれば実現可能ですので、File APIとの連携を試します。 File APIのサンプル jQueryでFile APIを使うために以下のおまじないを実行します。 jQuery.event.props.push('dataTransfer'); DropイベントとFile APIとの連携にはevent.dataTransferプロパティを使いますが、jQueryのイベントオブジェクトにはdataTransferが存在しません。このおまじないで、jQueryのeventオブジェクトにブラウザネイティブ
HTML5 File Uploads with jQuery
Today we will be developing a small web application called Upload Center, that will allow people to upload photos from their computers by dragging and dropping them onto the browser window, possible with the new HTML5 APIs exposed by modern browsers. The photos will have a preview and a progress bar, all of which controlled on the client side. Currently, the photos are only stored in a folder on t
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
