ウェブパフォーマンスの基礎と今後の動向について、Web標準周りを中心に解説しています。GREEのMini Tech Talkで発表時の資料です。Read less
![ウェブパフォーマンスの基礎とこれから](https://cdn-ak-scissors.b.st-hatena.com/image/square/6d12646a82468e1a8085734278c7d04d1a6d3c0f/height=288;version=1;width=512/https%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2Fslide-150322200123-conversion-gate01-thumbnail.jpg%3Fwidth%3D640%26height%3D640%26fit%3Dbounds)
Image and Video API for Powerful Visual Experiences Store, transform, optimize, and deliver all your media assets with easy-to-use APIs, widgets, or user interface. LEARN MORE → AI-Powered Image & Video Transformation at Scale Transform your image and video workflows with Cloudinary’s Generative, LLM, and Content-Aware AI features. LEARN MORE → TRY OUR GENERATIVE AI DEMOS → Create, manage, and del
厳密には無関係ということはないのですが、僕は直接的に広告に関連のある事業をやっているわけではありません。しかし、最近アドテクの世界が面白くて、基本的なことから勉強しています。 インターネット広告はテクノロジーのかたまり インターネットはテクノロジーの世界です。そして、この世界でとても大きなお金を生んでいるのが広告です。 今をときめくGoogleもFacebookも広告で収益を上げている企業です。日本でも同様にインターネット広告の市場規模はとても巨大で、1兆円程度とのことです。 必然的に、広告という世界には、インターネットの業界のテクノロジーが結集します。だから、技術的にも、とてもおもしろいです。 広告はどこからやってくるのか? 広告とは、これのことですよね。 そもそもは、これがどうして表示されるのか、というを調べていました。調べてみると、裏側にはとんでもない世界が広がっていました。 純広告
グリーの藤本真樹CTOは12月4日に開いたメディア向け技術説明会で、オープンソース(OSS)への取り組みを拡大していくと語った。PHPコミュニティーに積極的に貢献してきた1人で、PHPの国産フレームワーク「Ethna」のメイン開発者としても知られてる藤本CTO。グリーのサーバサイドソフトウェアも99%がOSSという。 グリーのサーバサイド、99%がOSS 「こういう言い方をすると偽善っぽいが」――藤本CTOは何度もそう断りながら、「ネットサービスはOSSなしでは実現できない。OSSのシュリンクは、サービスや業界のシュリンクにも直結する」と話す。同社のサーバサイドソフトは、OS(Linux)、データベース(MySQL)、Webサーバ(Apache HTTP Server、nginx)、プログラミング言語(PHP、Ruby)などほぼすべてがOSSで、「OSSなしでは続けるのが無理」な状態だ。
多くのWebサイトが乱立するなか、ユーザーに対してわかってもらうという課題があります。 出来るWebページは、この「わかってもらう」事が最も重要であり、そしてこの課題をキッチリクリアしています。はたしてわかってもらえるWebサイトとは一体どんな工夫がなされているのでしょうか。 よく陥る3つの失敗から学ぶ わかってわかってもらえないサイトになるための3つの条件とでもいいましょうか。 Webサイトにて一番陥りやすいトラップの一つに、「わかってもらえるだろう」という思い込みがあります。この「わかってもらえるだろう」という感情は何処から来るのかというと、実は結構シンプルな答えですが、「制作するときに参考にしたサイトに似せる」という部分から来ています。 最大の過ちが起こる過程には、Webサイトを作ろうと考える企業と、Web屋との間に、上下関係がある為と言えます。 例えばWeb屋に全て丸投げする企業。
このブログがフロントに関する記事が多いもんだから、たまにデザイナーと呼ばれることがあるんですが、僕は業務としてはデザインよか制作ディレクションの方がどちらかと言えばメインなんですよね。 そんなディレクターとしての役割の一つに、周りにいる優れたデザイナーやプログラマー、デベロッパーの業務効率を考えることが挙げられます。 何を取るわけでもなく中途半端な僕ですが、ディレクターとして周りの各プロフェッショナルの役に少しでも立てればと、そして制作する上での効率を向上させるべく色々情報収集をする中で、よくチートシートの存在を目にします。(チートシートってどれだけ普及してるのかわかりませんが、つまりカンニングペーパーのことらしいです。) WEB屋にとってのチートシートって、どれだけ優れた技術力やデザイン力を持っていても、何かしら新しい発見がある物ですよね。以前書かせてもらった時間の価値は人によって違う!
原色大辞典とは 原色大辞典は1997年にオープンしたネットの色見本サイトです。 9種類の色見本と色に関する各種サービスから構成されています。 色見本コンテンツは ブラウザで定義されているHTMLカラーネーム、 日本の伝統色、 世界の伝統色、 Webセーフカラー、 パステルカラー、 ビビッドカラー、 モノトーン、 地下鉄のシンボルカラー、 国鉄制定の塗装色 の9つから構成され、特に日本の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。 文字列と背景色の組み合わせを試せる配色大辞典、 規則性のある組み合わせから色を選べる配色パターン。 色見本の他にも、今日のラッキーカラー、 コトバから色を解析して調合する成分解析、 ストライプを生成するストライプメーカー、 グラデーションを生成するグラデーションメーカー、 あなたの好きな色と色を調合する色調合、 サ
@torizoです。 今回はChromeをメインブラウザにするための絶対にはずせない超オススメエクステンションを紹介します。
ここ数日、8.8.8.8や8.8.4.4というIPv4アドレスを持つGoogle Public DNSに関する話題が盛り上がっているのですが、多くの人が「よくわからないけど設定変更したら早い!」と言っているので、そこら辺の話を調査してみました。 昨日、Twitterとブログでtracerouteやdigによる調査協力のお願いを発信し、8.8.8.8へのtracerouteを37件、8.8.8.8とISP DNSへのtraceroute比較及びAkamaiキャッシュサーバへのtraceroute比較を21件、日本各地及び海外のいくつかの地点からご協力頂けました(皆様ありがとうございました!)。 それらのデータをもとに、Google Public DNSを利用した場合の通信経路と、それによる遅延に関する検証を行いました。 Google Public DNSに対する私の感想 まず最初に。 調査前
Twitter、Facebook、Googleの初期デザインにびつくり。2011.09.19 12:007,034 びつくりっ!ウェブサイトというものは機能が増えたり仕様が変更したりで、そのデザインがどんどん変わって行くものです。今や有名なあのサイトも初期はさっぱりとざっくりと作られていたのです。 そう、トップ画にあるTwitterだって。 TwitterじゃなくてTwttrだし。なんかtimelineとかwhat up? とかグラフィティぽい中二病風なフォントだしね。 そう、Facebookだって。 映画ソーシャルネットワークでもでてきましたけど。Theがはいってるし、顔があるし。 そう、Googleだって。 Yahoo! みたい! [Kottke] そうこ(Casey Chan 米版)
The web today is a growing universe of interlinked web pages and web apps, teeming with videos, photos, and interactive content. What the average user doesn't see is the interplay of web technologies and browsers that makes all this possible.� Over time web technologies have evolved to give web developers the ability to create new generations of useful and immersive web experiences. Today's web is
OAuthやOpenID、仕組みもよく知らずに使ってきた僕が、その最新動向に追いつくために勉強したことをまとめます。 きっかけは OpenID TechNight #7 をUstで見たことで、わからないことが山盛りだったので色々と調べてみた。 OpenID TechNight #7 : ATND 各発表のスライドへのリンクがあるよ。 キーワードとしては、OAuth 2.0、OpenID Connect、Cloud Identity、RESTful API、といったあたりについて。それぞれ基本的なことと、Ustで話されてたことをまとめる。 OAuth 2.0 OAuth 2.0でWebサービスの利用方法はどう変わるか(1/3)- @IT を先に読めばよかった。 簡単にまとめると、OAuth 1.0の問題点は3つあって。 認証と署名のプロセスが複雑 Webアプリケーション以外の利用が考慮されて
Webを見ていると、フレームワークっていう言葉をよく目にします。初心者の頃は、このフレームワークっていうものがどんなものなのか、いまいち分かりませんでした。今回は、色んな例でフレームワークというものを紹介してみました。なので、フレームワークって何だろうっていう人向けの記事です! Web制作関連のブログを読んでいると、ときどきフレームワークっていう言葉がでてきます。例えば CSSのフレームワークとか、HTML5 + CSS3 のフレームワークとか …。 今でこそ、このフレームワークって何だかわかりますが、初心者の頃は、このフレームワークっていう言葉が何だか難しそうで、意味の分からないものでした(私だけ?)。何となく雰囲気で、使ってみると便利なのかなーという感じはしましたけど、そもそもフレームワークという言葉自体の意味が分かっていなかった頃は、使ってみよう!というところまで行きませんでした。
何百回、何千回と見慣れた画面、見間違えるはずもない。すぐにそれが自分の作品だと直感したものの、どうしても信じられなかった。いや、だって、一介のアマチュアプログラマが作ったWebアプリが、ミッションの中でも一番クリティカルな大気圏再突入前のミッションコントロールセンターの画面に映っている*1。これで信じろという方がおかしい。見慣れたアイコン、昼夜境界線、ISS/シャトルの軌道を示す赤いグラウンドトラック、うっすら見える左上の設定アイコン、全部同じだ。でも... そして、すぐに一つの事実に気づいた。いつもは、軌道離脱噴射の終了を見届けた後シャトルのトラッキングを止める。公開されているデータではここから先の軌道を追うことはできない。放っておけば徐々にずれが大きくなる。でも、もし、あそこに映っているのが本当に自分の作品なら、ここで設定を変えるとあの画面からシャトルが消える、そんなことをしていいのか
最適な画像の書き出しは、JPG, GIF, PNG、どれを使うべきか 2011-07-26 デザインされたものをコーディングする上で、画像はサイトのパフォーマンスにも影響する重要な要素の1つです。 画像形式には、jpg, gif, pngなど種類があり、それぞれの特性を理解した上で選定できているでしょうか? 画像形式についてまとめてみます。 画像の種類 JPEG インターネットでよく使用される画像形式で、静止画像を圧縮する方法の1つです。 ブロック単位で圧縮変換を行うため、圧縮率を上げるとブロックノイズというノイズが生じます。 特に小さくすると赤の部分でノイズが発生しやすい。 IE6~8(IE9は未確認)において#02050aというバグがあり、 JPEG画像でopacityを使用すると#02050aの部分が透過jpgになるバグがあります。 上記の点を注意する必要がありますが、1670万色ま
先日このブログを HTML5 で作り直しました。その時に思った、HTML5 でコーディングするときの基本的な注意書きです。なので、HTML5 をこれからやってみようかなーという人向けです。canvas、video、audio などには触れていません。もっと基本の文章構造、アウトラインについての記事です。また、後半は実際に HTML5 でコーディングする時の tips になってます。 先日このブログ – Webデザインレシピを、HTML5で作り直しました。HTML5 … クライアントさんのページでは、まだ一度も使ったことがないし、勉強のためのサンプルはいくつも作ってみたんですけど、実際に運営しているページで試したいなーと思い、思い切って HTML5 にしました。 とりあえず作ってはみたものの、まだまだ分からないことだらけ。これから HTML5 でコーディングをする時に、とても大事だなーと思っ
フォントのサイズの単位に何を使ってますか? px? em? それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。 Font sizing with rem [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに pxを使ったサイズ指定 emを使ったサイズ指定 remを使ったサイズ指定 はじめに フォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。 それらの中で短所が少なく、よく利用されるテクニックは2つあります。 pxを使ったサイズ指定 emを使ったサイズ指定 これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。 pxを使ったサイズ指定 ウェブの初期に、私たちはテキストのサイズを定めるために「px」を使用していました。これは一貫しており
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く