Webアプリを高速化してユーザー体験を快適にするWebAssemblyの入門書が発売
ブラウザで多くのコンテンツが提供されるようになり、Webアプリの処理を高速化する手法が重要になっています。特にJavaScriptでは快適なユーザー体験を届けられない場合には、何か別の手法が必要です。 そこで役立つのがソフトウェアアーキテクチャのWebAssemblyです。ブラウザで重くなる処理をバイナリに変換して実行できる技術で、パフォーマンスを最適化して高速な処理を実現できます。 新刊『入門WebAssembly』は、このWebAssemblyに興味があるエンジニアが仕様や機能、実装方法を基本から学べる入門書です。 どのようなケースでWebAssemblyを利用したらいいのか、また利用すべきでないかも説明しており、デバッグやメンテナンスなど運用面も解説が充実しています。 Webエンジニアにとって必須となる高速化の技術として、ぜひWebAssemblyを試してみてください。 ※本書は『T
フォント素人のWebエンジニアが、「フォントおじさん」に聞いてみた！Webフォントの最近の事情とか
フォント素人のWebエンジニアが、「フォントおじさん」に聞いてみた！Webフォントの最近の事情とか 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されるHTML5 Conference 2017に登壇するエキスパートに、予定しているセッションのトピックを中心に、いろいろ伺ったものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ソフトバンク・テクノロジーの関口浩之さんです。 関口さんのセッションは「Webフォント最新事情2017～導入事例も一挙紹介～」（ルームE 11:20-12:00）です。（現在HTML5 Conferenceは定員オーバーの状態ですが、無料イベントということもあってキャンセルも多めに出るらしいので、あきらめ
divとsectionとarticle要素それぞれの特徴、使い分けと組み合わせ方 -HTML5のセクショニング コンテンツ
HTML5は、ドキュメントを構造化する際に用いるセマンティックなコードです。あなたがどんなタグを使うかによって、ユーザエージェントにその意味を伝えます。 HTML5のタグにはさまざまなものがあり、中でもsectionとarticle要素は、div要素より有意義な方法でコンテンツを区分する手段として導入されました。これら3つをどのように使い分けるか確認しておきましょう。 Sectioning Content in HTML5 -Div or Section or Article 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 divとsectionとarticle、それぞれの特徴 divとsectionとarticle、どれを使う？ sectionとarticleの組み合わせ方 divとsectionとarticle、それぞれの特徴 d
CSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこなそう – ICS MEDIA
mix-blend-modeというCSSのプロパティ。これはDOM要素を重ねた時の見え方を指定するCSSプロパティです。デザイナー視点だとブレンドモードはごく当たり前に使う機能のひとつ。mix-blend-modeはウェブの表現手法が広がり、デザインの自由度が広がる注目すべきCSSプロパティです。本記事はmix-blend-modeの魅力と使い方をデモを交えて紹介します。 そもそもブレンドモードとは？ ブレンドモードはクリエイティブな表現を作る上での基本機能のひとつです。Adobe PhotoshopやIllustrator、After Effects、XDや、Figmaで搭載されていて、レイヤーを重ねたときにどのように重ねて表示するかの設定になります。ソフトによっては「ブレンドモード」や「描画モード」「モード」と異なる名称が使われていますが、機能としては同じものになります。本記事ではCS
HTML5 Video Player Comparison
* See What Sucks O hai.We’ll help you choosing the best HTML5 based video player for your next project. Last update: 2017-08-10 Feedback on Twitter.Let’s use the simple and easy-to-remember hashtag #videosws for feedback and news. See you there! Information.Made by Philip Bräunlich and Gerrit van Aaken. New players and updates? Demo video by Visuelle Zeiten. Still missing some players:Accessible H
HTML5のvideoタグで利用するmp4の動画を作る時のTips - Qiita
最近、スマホやタブレットを使う機会も多いですが、その辺りの端末に動画コンテンツを提供する時に楽なのがmp4形式の動画をvideoタグで貼り付ける事です。 ただ、ちょっとした注意点があって、どういう状況で再生するかによって細かい調整をしておかないと、再生開始までにえらく時間がかかるようになって、非常に不便になります。 既に作成済みの動画を再生する場合 mp4形式の動画を再生するためにはメタデータ情報が必要です。メタデータは通常ファイルの末尾に付与されます。ファイルサイズが小さい時は気付かないのですが、10分、20分ぐらいあるような動画を再生しようとすると末尾まで読んでから再生できるかどうかを判別するので、再生が開始できるようになるまでに異様に時間がかかるようになります。 そこで動画作成時にメタデータをファイルの先頭に移動させておきます。 こうする事で、ファイルサイズが大きい動画でも一瞬で再生
2014年僕が個人的に気になったツール・サービスなどなど10選
こんにちは！てっちゃんです。 今日は12月24日クリスマスイブですね。皆さん今夜は予定があるんですかね？ 僕は安定の...(´・ω・｀) 年末になりボチボチ今年を振り返ろうかなって時期なので今年のまとめとして僕が個人的に気になった2014年のツールとかサービスを10選ほどご紹介しようと思います。 選定と感想は僕の独断と偏見なのであしからず。 HTML5勧告 http://www.w3.org/2014/10/html5-rec.html.ja 2014年10月28日、HTML5の仕様が勧告となりました。「勧告」とはすべての仕様が確定したときにするもので、これによりHTML5という仕様が「正式な規格」になったことをさします。とはいえ、制作側としてHTML5を使っていく以上安定した制作が出来るとは限りません。ブラウザの実装が完璧ではなく周辺技術の仕様には差がでているのが現状ですが、今後もバージ
エンタープライズで使える！実践から学ぶJavaScript MVCフレームワークの選び方
エンタープライズで使える！実践から学ぶJavaScript MVCフレームワークの選び方 酒巻瑞穂（html5jエンタープライズ部） 現在エンタープライズシステムの開発現場では、シングルページアプリケーション（SPA: 単一のWebページで構成されているWebアプリケーションのこと）アーキテクチャの採用が模索されるなど、根本的な開発パラダイムにおいて大きな変化が起きようとしています（全体的にどのような変化があるかはエキスパートNo59の佐川夫美雄さんの書かれた「JavaからHTML5ヘ。業務システムの開発におけるWeb技術の変化と適応事例」によくまとまっています）。 こうした変化の一部を支えているのが、JavaScriptによるMVCフレームワークです。数あるフレームワークの中で、実際にどのフレームワークを採用するかというのは、開発コストだけではなく学習・運用コストにも関わる、非常に大きな
Yahoo! JAPAN Creative Blog — 「SCRIPTY#1 」の資料を公開します #scripty01
先日弊社にて、「SCRIPTY#1〜フロントエンド紳士・淑女のための勉強会〜」を行いました。 その際に発表させていただいた資料を公開いたします。 遠方の方や、ご都合によりご参加いただけなかった方はぜひご覧ください。 なお、当日はグラフィックレコーディングがなされ、発表内容がリアルタイムに可視化されていました。 そちらの内容も併せてお楽しみいただければと思います。 発表セッション 1.本当にあった怖いCSS 〜BEMのすすめ〜 発表者：小川 健史 実務で実際に遭遇した怖いCSSと、解決策の一つとして、 BEMを導入し得られた知見について発表しました。 発表スライド： http://i.yimg.jp/images/creativeblog/140916/takogawa.pdf グラフィックレコーディング 2.backbone.js 光と闇 発表者：柴田 和祈 Backbone.jsとそのプ
WebRTCのオープンソースソフトウェアまとめ - Qiita
WebRTCは変化が速いのできちんとキャッチアップしているPeerJSとEasyRTCがよさそうです。 ただし、EasyRTCはなぜかサンプルのビデオチャットが真っ黒になってうまく動きませんでした。原因は調べていません。 ICEサーバー 上記のOSSにはICEサーバーは含まれておらず、だいたいstun.l.google.com:19302というGoogleのSTUNサーバーをデフォルトで指定しています。 本番で動かすにはICEサーバーも自前で立てるのが望ましいです。 ICEサーバーは元々いろいろなOSSがあります。 表にまとめるのは力尽きたので、リストで。一番上のがいいんじゃないかなってなんとなく思っています。 rfc5766-turn-server - High-performance free open source TURN and STUN Server implementatio
「今どきのGruntを使ったフロントエンド開発（HTML/CSS編）」HTML5 Conference 2013 セッションレポート
「今どきのGruntを使ったフロントエンド開発（HTML/CSS編）」HTML5 Conference 2013 セッションレポート 出口 達也 2013年11月30日（土）に開催された「HTML5 Conference 2013」の、株式会社サイバーエージェント・石本光司さんによるセッション「今どきのGruntを使ったフロントエンド開発（HTML/CSS編）」の内容をご紹介します。 なお、セッションのターゲットはGruntを使ったことのないHTML/CSSコーダーやWebデザイナーさんです。 なぜGruntを使うのか Gruntとは、JavaScriptで書いたタスクを実行してくれるアプリケーション（JavaScript Task Runner）です。 Webアプリケーションの開発が複雑になってきて、CoffeeScript、Sassなどのコンパイルが必要な技術を使うことが多くなってきた
カジュアルJavaScript AST
今日の概要 実は使われてるJavaScript AST JavaScript AST(Abstract Syntax Tree)とは? JavaScript ASTを使ったツール紹介 使うだけじゃなくて書いてみよう browserify Node.jsで書かれたものをブラウザ向けに変換するツール Node環境で開発 -> browserifyでビルド -> ブラウザで動く JavaScriptのコードを 変換 する ≒ JavaScript ASTを見て変換 する 本体の色々な部分、transform pluginなどでASTを使ってる
双方向通信を実現！ WebSocketを使いこなそう
（1）Ajax XmlHttpRequestオブジェクト（JavaScript）を利用した非同期通信処理のこと。Googleマップを筆頭とするWebアプリケーションで活用されている。ブラウザからサーバ側に非同期でリクエストを実施してデータを受け取り、JavaScriptにより部分的にページを更新することで、ページ全体を更新するよりも低負荷でサーバと通信できる。また、通信中も操作を継続できるので、エンド・ユーザーの操作を妨げられることもなく、ユーザビリティに優れる。デメリットとして、基本的にブラウザからのリクエストで動作する仕組みなので、サーバ側から自動でデータを送信することはない。
Move Over Google Plus Hangouts. Appear.in Is Here & It's Really Good
Video conferencing isn't something most people get excited about. Until recently, the field has been dominated by the likes of Polycom and Cisco in the enterprise sphere, and Skype and Google Plus picking up the slack in the consumer sphere. Commonly, video conferencing hasn't been done especially well. For the most part Skype stutters and glitches out more than a Max Headroom marathon, even with
2010年の2ちゃんねる
・ニコニコ動画にもアップしています。よろしければそちらに感想などどうぞ～。 ・もしくは、このサイトを攻撃する （スペースキーで攻撃、十字キーでいろいろ移動） 10年くらい前に流行ったFlash動画風に、2010年の2ちゃんねるをHTML5で動画にしてみました。 インターネットに触れだしたころ、Flashアニメが面白く、自分も作ってみたいという理由でFlashの勉強をはじめました。 それから10年たって、HTML5というものが出てきて、10年前と同じように作ってみようと思いました。 ※FRENZ2010という動画イベントで流させていただいたものを、修正したものになります。 作者：http://www.tatsuaki.net/ twitterID：tatiaki お使いのブラウザでは、このページは正しくご覧いただけません。 推奨環境： Chrome、Safari --------------
重要！ まずは「オリジン」を理解しよう
連載目次 皆さんこんにちは。ネットエージェントのはせがわようすけです。今回から、HTML5やJavaScriptに関連したセキュリティの話題について連載することになりました。よろしくお願いします。 もう読みましたか？ HTML5のWebアプリセキュリティに関する報告書 皆さんすでにご存じかと思いますが、2013年10月30日にJPCERTコーディネーションセンター（以下、JPCERT/CC）から「HTML5 を利用したWebアプリケーションのセキュリティ問題に関する調査報告書」が公開されました。 この報告書の調査の一部は、弊社が行いました。また、JavaScriptのセキュリティ上の問題について次々と鋭い指摘を行っているmalaさんにもさまざまな技術的アドバイスを頂いた上、日常的にWebアプリケーションのセキュリティ検査や構築を実際の業務として行っておられる専門家の方々にも査読をお願いして
「英語のオープンソースドキュメントを日本語翻訳する」html5j英語部キックオフレポート
「英語のオープンソースドキュメントを日本語翻訳する」html5j英語部キックオフレポート 谷拓樹（株式会社サイバーエージェント） html5j英語部では、英語のオープンソースドキュメントを日本語に翻訳する活動を開始しました。そのキックオフとなる11/1（土）に開催された、html5j英語部のイベントの報告をします。 世界を日本に。日本から世界へ。Web開発者のための架け橋となる。 html5j英語部の谷です。html5j英語部では、英語のオープンソースドキュメントを日本語に翻訳する活動を行っています。ただそれだけではなく、日本語の情報を世界に届けるために、日本語を英語に翻訳するといった活動にも今後取り組んでいく予定です。 今回のキックオフイベントでは、部長の斎藤（@cssradar）からこうした英語部発足の目的についての話や、英語部での翻訳フローなどについてのプレゼンテーションをおこないま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Turbulenz
use-init.com