SVGアニメーションの現状 | POSTD
SVG（Scalabe Vector Graphics）の世界は魅力的です。そして、これを使ってできることや、これに用意されているオプションには圧倒されてしまうほどです。 SVGはXMLベースの2次元ベクター画像形式で、インタラクティビティとアニメーションをサポートします。言い換えると、SVGは図形やグラフをレンダリングするXMLタグで、その図形やグラフはHTMLの構成要素がそうであるように、インタラクトしたりアニメーション化したりできるのです。 SVGに関して、私がよく受ける質問の1つは、SVG画像のアニメーション化についてです。そのやり方だけではなく、それが何なのかということも聞かれます。ですから、現在の（そして未来の）SVGアニメーションの状況を見ながら、あなたが苦痛を感じずに行えるようなヒントやツールについてお話ししましょう。 同期マルチメディア統合言語、またの名をSMIL（Syn
Himawari-8 Real-time Web - NICT
The Himawari-8 Real-time Web is an application via big-data technologies developed by the NICT Science Cloud project in NICT (National Institute of Information and Communications Technology), Japan. Development is in collaboration with JMA (Japan Meteorological Agency) and CEReS (Center of Environmental Remote Sensing, Chiba University).
Material Design Lite
Material Design Lite Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. Get started now. Templates The MDL components are created with CSS, JavaScript, and HTML. You can use the compone
シンプルでかつ最高のJavaScriptプロファイラ sjsp を作りました！ ― Webアプリケーションが複雑化する中でプロファイラに求められるものとは何か - プログラムモグモグ
あらすじ Web技術が複雑になる中で、JavaScriptのプロファイリングをとる方法とは。 プロファイリングを取るためのコードを手で書いてみましょう。 とてもシンプルで、かつ最高のJavaScriptプロファイラ sjsp を作りました。 本当にあった怖い話 上司 「とにかくJavaScriptのコードを速くしてくれ」 私 「分かりました、速くします」 (次の日) 私 「いいプロファイラがないなら作ればいいじゃない」 同じチームの人 「えっ？」 私 「最高のJavaScriptプロファイラ作ったよ」 同じチームの人 「「えっえっ？？？」」 私 「早速使ってみたらこことここが遅いって分かったよ」 同じチームの人 「「「この子は一体…」」」 JavaScriptのプロファイリングの難しさ 近年、Webブラウザーの処理速度は著しく向上し、その可用性の高さから、アプリケーションのプラットフォーム
Deep Learningによる画像認識を可能にする最も簡単なWebプラットフォーム「Labellio」のリリースのお知らせ - Alpaca技術ブログ
本日6/30にAlpaca(http://www.alpaca.ai/, blog: http://blog-jp.alpaca.ai/)はDeep Learningによる画像認識を可能にする最も簡単なWebプラットフォーム「Labellio(ラベリオ)」(URL: https://www.labell.io/ja/)をリリースしました。 リンク: Labellio ロゴ 代表画面 モデル一覧ページ ラベル付けページ モデル構築ページ 背景 近年の機械学習関連技術の発達により、Deep Learningを用いた画像の認識精度は人間に迫るレベルに達しました。しかし、そのソフトウェアとGPUを用いた計算環境のセットアップ、画像の管理、作成されたモデルのプロダクトへの有効利用と、実際に画像認識を行う上での課題はたくさんあります。 Labellioはそのようなソフトウェア、計算環境、有効利用などの
高品質な CSS を書く助けになるツール「Nozomi」を作った - I'm kubosho_
2015-06-29 高品質な CSS を書く助けになるツール「Nozomi」を作った CSS Gulp 登壇 リポジトリは kubosho/nozomi です。 JSオジサン「俺の話を聞け、5分だけでもいい」 #5でも、この「Nozomi」について話してきました。 その時のスライドが以下になります。JSオジサンなのに CSS の話をしてしまったのはご愛嬌です。 どんなツールか 書いた CSS をより良くするツールを集めて、npm の run-script (もしくは Visual Studio の拡張機能 Task Runner Explorer)で簡単に実行できるようにしたものです。 具体的には以下のツールが現時点(2015/6/29)で使えるようになっています。 Autoprefixer ベンダープレフィックスを自動的に追加 CSSComb プロパティの順番を設定ファイルをもとに並び
ALOS｜ALOS@EORCホームページ
トップ ホームページアドレス（URL）の変更 ホームページアドレス（URL）の変更 The address of our website has changed 当サイトにアクセスいただきありがとうございます。 この度、ホームページアドレス（URL）を変更いたしました。 つきましては、下記の新アドレスへアクセスをお願いいたします。 また、お気に入りやブックマークなどに登録されているお客さまはお手数ですが設定のご変更をお願いいたします。 今後とも当サイトを宜しくお願いいたします。
Scrapy 1.0が公開されました - orangain flavor
Pythonの有名なWebスクレイピングフレームワークのScrapyがバージョン1.0になりました。*1 0.24からの主要な変更点は下記のとおりです。 SpiderでItemの代わりにdictを返せるようになった Spiderごとにsettingsを設定できるようになった Twistedのloggingの代わりにPythonのloggingを使うようになった CrawlerのコアAPIがリファクタリングされた いくつかのモジュール配置場所が変更された 他にも数多くの変更点がリリースノートに記載されています。 Scrapy 1.0の感想 大きな機能の追加よりも、APIの整理と安定性の向上がメインのようです。これまではバージョンを重ねるごとに便利になっていくものの、あまりAPIが安定していない印象でしたが、APIを安定させた区切りのリリースと言えるでしょう。1.0というメジャーバージョンに到
主要ブラウザで実行可能なバイナリ形式「WebAssembly」の開発がスタート。Chrome、WebKit、Firefox、Microsoft Edge、LLVM、Unityらがサポートを相次いで表明
主要ブラウザで実行可能なバイナリ形式「WebAssembly」の開発がスタート。Chrome、WebKit、Firefox、Microsoft Edge、LLVM、Unityらがサポートを相次いで表明 GitHubで公開されている「WebAssembly High-Level Goals」によると、WebAssemblyが目指しているのは、どのWebブラウザでも実行可能なポータブルで、かつロード時間が小さくて済むコンパイル済みのバイナリフォーマットで、汎用的なハードウェアの能力を活用したネイティブスピードで実行でき、しかもモバイルやIoTを含む幅広いプラットフォームをサポートするもの。 要するに、プログラミング言語をコンパイルし、どのWebブラウザでも高速に実行できるバイナリフォーマットを開発する、というのがWebAssemblyが目指すものです。最初のWebAssemblyの実装ではC/
HTML の linkタグに prefetch 機能が追加され、より便利になるようです - latest log
linkタグに pre fetch 機能を追加する仕様 (Editor's Draft)が上がってきています。 Chrome - indevelopment IE - サポートするかも Firefox - 不明 Safari - 不明 <link rel="preload" href=“…" as=“…" onload=“…” onerror=“…”> 従来は、new Image や XHR と DOM API を使ってリソース毎に別々のJavaScriptを記述する必要がありましたが、お手軽になりますね。 これまで var img = new Image(); img.onload = function() { document.body.appendChild(img); }; img.onerror = ... img.src = url; var script = document
珍しいCSSプロパティたち - Qiita
あまり見かけない、かつ実用的なCSSのプロパティをまとめました。 他プロパティに依存するプロパティは割愛します。 ブラウザ対応状況はCan I Use等でご確認ください。 紹介するCSSプロパティ will-change scroll-behavior resize object-fit と object-position appearance user-select font-feature-settings text-rendering font-smoothing hyphens pointer-events will-change 予め演算処理をさせておくプロパティです。 これから変化する スクロール位置 / 要素 / プロパティ を値に設定すると、事前に変化をブラウザに知らせる事ができます。 アニメーションのカクつきを、いくらか抑えることができるでしょう。 ただ、何にでも指定して
CSS 設計の長い夢 - ペパボのフロントエンドスタンダード
フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。 スタイルシートの夢 (1) 予測しやすい (2) 再利用しやすい (3) 保守しやすい (4) 拡張しやすい 代表的な CSS 設計手法 既存プロジェクトの CSS に立ち向かう！ (0) 流れ (1) 既存の CSS ファイルを元に SCSS ファイルに変換する (2) イニシャライズ CSS や共通の箇所のスタイルを分離する (3) CSSLint を使って、修正しやすいところから整理していく (4) コンパイル (5) スタイルのスコープ（あ
Object-oriented CSS
Hosted Play with these in Firebug to learn the basics. Template Grids Module Content (very alpha) Downloads on Github Velocity download Alternate download Stuck? If you don't keep up with any of the exercises you can view (and download) the finished examples here. Starting Template Exercise 1: Template Exercise 2: Grids Exercise 3: Module Manipulation Exercise 4 Module Creation Welcome, Velocity C
Chrome、Flash再生のデフォルト設定を「重要なコンテンツのみ」に変更
GoogleのWebブラウザ「Chrome」は、Flashコンテンツを表示するプラグインを標準搭載しているが、FlashコンテンツがノートPCのバッテリーを浪費している場合もある。そこで同社はプラグインを使用するコンテンツの表示を、デフォルトで重要なコンテンツのみに制限するように変更する。 変更後の「コンテンツの設定」では、Flashアニメーションなどプラグインを使用するコンテンツがあるWebページを開いた際に、メインコンテンツに含まれるプラグインコンテンツだけを再生する。ブロックされたプラグインコンテンツを表示したい場合は、ワンクリックで再生可能。 新しいプラグイン設定は、Betaチャンネルで提供されている最新のデスクトップ版Chrome Betaで4日から有効になり、まもなく正式版も変更される。正式版ですぐに変更したい場合は、Chromeの設定で[詳細設定を表示…]を開き、[プライバシ
【CSS】決定版！リセットCSS総まとめ
HTML、CSSでコーディングを始めるときに各ブラウザが持っているデフォルトのCSSを一度リセットする目的のリセットCSS。今回は、現在使われているリセットCSSをまとめてみました。 リセットCSS とは？ 各ブラウザ(IE、FireFox、Chrome、safari等)は、タグ毎にデフォルトスタイルをそれぞれ独自にもっており、それらをリセットするスタイルシートは一般的に「リセットCSS」と呼ばれています。ブラウザのデフォルトスタイルを有効に使っていこうという考え方もありますが、ブラウザ間の表示差異(例えば、ブラウザ毎に文字サイズが変わったり、余白の広さが変わったりなど)に悩まされることも多々あり、それを解消するために一度まっさらな状態にリセットしてから CSS を書き始めるためのものです。 リセットCSS のメリットとデメリット メリット ブラウザ間の表示の違いを効率良く最小限に抑えるこ
Webのパフォーマンスモデル「RAIL」とは何か？ - ふろしき Blog
ここ数年のうちに、人々が利用するメインコンピューターは、デスクトップからモバイルへと移りました。 少ないハードウェアリソース、不安定なネットワーク、逼迫するバッテリー消費、シンプルなユーザインタフェース、開発者はこうした制約の中で、Webサイトを制作することが求めらるようになりました。Webのパフォーマンスに関する考え方も大きく変化があったのですが、我々は具体的に何を基準にし、どの程度にチューンすれば良いのでしょう？その答えが、パフォーマンスモデル「RAIL」にあります。 RAILは、開発者向けカンファレンス「Google I/O 2015」にて発表されました。厳密にはI/Oが初というわけではありませんが、実に2桁近いセッションでこのキーワードが紹介されています。今後は一般的になっていくのでしょう。 モバイル時代のWebのパフォーマンスモデル 一見するとRubyと関係しそうですが、全くコン
Google Photos
You get 15 GB of storage, so you can backup and keep your memories safe automatically — at no cost.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
［速報］Amazonクラウドが「AWS Device Farm」発表。モバイルの実機を大量に並べてテストを自動実行。AWS Summit 2015 New York
「HTTP/2」がついに登場！ 開発者が知っておきたい通信の仕組み・新機能・導入方法
GitHub Japan
