amp-bindが一般公開、ECサイトでのAMP対応がいよいよ現実的に
[レベル: 上級] AMP プロジェクトは amp-bind を一般公開しました。 amp-bind は、“オリジントライアル”に参加したサイトで試験的に公開されていました。 しかし、すべてのサイトでもはや完全に機能します。 amp-bind でダイナミックな機能を実現 一般的に言って、AMP は、ニュース記事やブログ記事、レシピなど静的なコンテンツに向いています。 だれがいつ読んでも、閲覧中にどんな動作をしても、コンテンツは変化しません。 いつも同じです。 しかし、ユーザーのアクションに応じてコンテンツが変化する動的なページが現代のウェブではそこかしこに存在します。 EC サイトであれば、たとえば次のような動的な機能は当たり前です。 サイズや個数に応じた合計金額の変化 タップしたサムネイル画像に応じた拡大画像の切り替え 商品の絞り込みや並び替え サイト内検索 ところが、従来の AMP の
はてなブログのAMP対応で学ぶウェブサービスのAMP対応 - hitode909の日記
プレゼンモード 再生 ← / →で移動 fでフルスクリーン escでおわる こんにちは，id:hitode909です．このあと14時から品川のマイクロソフト様のオフィスでおこなわれている，YAP(PはパチモンのP)Cで発表します． この記事では，発表資料を公開いたします．現地の方は今すぐCルームに来てください．そうでないかたは懇親会でお会いしましょう． はてなブログのトピックもあるようです． トピック「YAPC」 #yapc8ojic のツイート はてなブログのAMP対応で学ぶウェブサービスのAMP対応 2016/07/03 YAP(achimon)C::Asia Hachioji 2016 mid in Shinagawa hitode909 自己紹介 id:hitode909 @hitode909 京都から来ました はてなではてなブログを作っている 自己紹介 YAPC 2015でベスト
AMP(Accelerated Mobile Pages) HTMLしてみたという話 / masuP.net
Googleさんが発表したモバイル端末での表示高速化のAMP HTMLに対応してみたよ、という話です。 Introducing the Accelerated Mobile Pages Project, for a faster, open mobile web 概要などは上記見てもらえれば感じはつかめると思いますし、日本語で紹介してる記事だとKenichi Suzukiさんの紹介記事を見ると分かるかと思います。 なぜやってみようかと思ったかというと、「javascriptが無い静的なHTMLとCSSのページは爆速で表示したるで！」というGoogleさんの粋な計らいかと勘違いし、ほとんどが静的なページであるこのブログもサクーっと対応できたりするんじゃね、と思ったからですが、ちょっと苦労しました。 なおブログを完全に対応させたのではなく、記事ページのみ別にAMP HTML用の記事を出力してい
ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ - CSS Animation
ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ フロントエンド・デザイナーやデベロッパーは、スタイリングや配置、またデザイン性の良いサイトを作成するために CSS（Cascading Style Sheets、カスケーディング・スタイル・シート）を利用します。しばしばページに変化（英: Transition）やアニメーション（英: Animation）を加えるために CSS を利用しますが、まだまだ開発する余地がありそうです。 アニメーションは、訪問ユーザーにとってデザインをよリ理解しやすく、ためになる情報を伝える強力なツールとなるでしょう。ウェブサイト制作で活用でき、よりパワフルな使い方ができる基本原則を今回はご紹介します。 ディズニー社の現場で長年培われた、アニメーションの基本原則 12 個（英: 12 Principles of Animation）
schema.org 2.0が正式公開、CarボキャブラリやmainEntityOfPageプロパティの追加など
[レベル: 上級] schema.orgは、schema.org 2.0 の正式公開を発表しました。 2.0の数字が示すとおり、メジャーバージョンアップです。 非常に多くの追加と改善、追加があります。 いくつかピックアップしてみます。 Car ボキャブラリの追加 自動車を表現するボキャブラリが schema.org/Car として追加されました。 自動車のボキャブラリをschema.orgに採用するためにワーキンググループがしばらく前に発足していて、今回正式に採用されました。 エンジンの情報 (vehicleEngine) や燃料の種類 (fuelType)、燃費 (fuelEfficiency) など車関連のボキャブラリが豊富にそろっています。 自動車業界のサイトでは今後利用してみたいですね。 mainEntityOfPage プロパティの追加 mainEntityOfPage というプ
デザイナーやディレクターも知っておきたい、ページ表示速度の高速化の基本
スマホからウェブにアクセスするユーザが増え、ウェブサイトの表示速度の高速化がより重要な制作の課題になっています。1ページもののサイトなら、フロントエンド・エンジニアが一人で実装できるかもしれませんが、ある程度の規模のウェブサイトではワークフローやサイト全体の設計にも関わってきます。また、表示速度の高速化の方法を知らなければ、最適化しやすい、より高度なデザインは実現できないでしょう。エンジニアだけでなく、デザイナーやディレクターがこういった情報を知っていれば、よりスムーズに結果を出せるウェブサイト制作ができるはずです。 ページ表示速度の改善にはいろいろな方法がありますが、この記事では一番効果がありそうなところから攻めていきたいと思います。自分もまだまだ勉強中なので、まずはfilament groupのScottさんの記事 やClearleftのJeremyさんの記事 を参考に、フロントエンド
世界最大の家電量販店 Best Buy が利用している構造化データを探る at #SMX Advanced 2014
[対象: 上級] この記事では、先日参加したSMX Advanced 2014でのセッションをレポートします。 取り上げるのは、Best Buyの構造化データの取り組みです。 Best Buy（ベスト・バイ）はアメリカミネソタ州ミネアポリスに本社を置く世界最大の家電量販店です。 日本のビックカメラやヨドバシカメラみたいなものとらえてください。 Best Buyが、過去と現在、そして将来にどんなふうにして構造化データを利用してきたのか、また利用していくつもりなのかを紹介します。 Best Buyの早くからの積極的な構造化データ利用 Best BuyのSEOチームは、構造化データの専門家からRDFaやGoodRelationsを習い、セマンティックが注目される以前から積極的に構造化データを実装してきた。 Best Buyは全米に店舗を展開している。 店舗ページには、所在地や電話番号、営業時間な
[構造化データ初級者向け] schema.orgとMicrodata、RDFaって何が違うの？
[対象: 中級] この記事では、構造化データを実装するときに利用する、schema.orgやMicrodata、RDFaなどの役割とその違いについて、構造化データの初級者にわかりやすいように簡潔に説明します。 セマンティックの専門家が読むと「正しくは〜だ」とツッコミが入るかもしれませんが、僕たちは専門家ではありません。 SEOのために構造化データを利用するぶんには十分な理解が得られるはずです。 まず次の2つの質問を見てください。 Q1: 「schema.org」と「RDFa」ってどっちがいいの？ Q2: 「Microdata」と「RDFa」ってどっちがいいの？ Q1は答えられない質問です。 答えられないというのは、「どちらがいいか甲乙つけがたい」からではなくて質問として成り立っていないからです。 対して、Q2は「Microdataを勧める」または「RDFaを勧める」と答えることができます。
schema.orgによるマークアップが必要な理由
[対象: 中〜上級] schema.orgの設立と運用に深く携わってるGoogleのRamanathan V. Guha氏に、The Semantic Web Blogがインタビューしました。 そのなかから、検索に関わる一部分を紹介します。 質問は、schema.orgがハミングバードに与える影響はどうなのかというものでした。 しかし検索アルゴリズムの具体的詳細を提供することはしないGoogleの方針のもとに、Guha氏は次のよう回答しました。 schema.orgは検索だけでなくウェブ全体にとって必要 月日がたちますます多くのシグナルが手に入るにつれて、私たちがやることは、そうしたシグナルをランキングアルゴリズムに組み込む方法を見つけ出すことだ。そして、schema.orgのようなものによるシグナルはもちろん役に立つ。 ただ覚えておいてほしいのは、schema.orgを使っているのは今は
The World Wide Web project
The WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents. Everything there is online about W3 is linked directly or indirectly to this document, including an executive summary of the project, Mailing lists , Policy , November's W3 news , Frequently Asked Questions . What's out there? Pointers to the world's on
「Chrome」と「Firefox」間で直接チャットが可能に
GoogleとMozillaは、HTML5の「WebRTC」プロトコルの新たに開発された機能のデモを行った。その機能を利用すると、2つの異なるブラウザを使用するユーザー同士がサードパーティー製アプリを使わずに会話することが可能になる。 現在、「Chrome 25」ベータ版と「Firefox」の「Nightly」版のみで利用可能なこのWebRTCの新機能は、複数のグループの開発作業によってもたらされた。それらのグループには、World Wide Web Consortium（W3C）やInternet Engineering Task Force（IETF）のメンバー、さらにGoogleとMozillaのエンジニアが含まれる。 Chrome担当プロダクトマネージャーのSerge Lachapelle氏とFirefoxメディアプロダクト部門トップのMaire Reavy氏は共同でブログ記事を執
HTML5を中心とした「Web標準」がどれだけあるのか、図にしてみると……
急速に立ち上がろうとしている「プラットフォームとしてのWeb」。そのために現在たくさんのWeb標準が提唱され、標準化作業が行われています。 その全体像を1枚の図として示したのは、Mozilla Japanのdynamis（でゅなみす）氏こと浅井智也氏。先週行われたオープンソースカンファレンス2012京都で行った講演のスライドから許可を得て引用します。 HTML5を中心に、円の色は標準化団体の色を示しています。青ならW3C/WHATWG、黄色はIETF、茶色はECMA、赤はKhronos。また、円の外側はまだまだこれからの技術という位置づけになっているそうです。 こうして1枚の図にして見ると、実にたくさんの技術がWebで実現されようとしていることに驚かされます。 このすべての技術を使いこなす必要はないかもしれませんが、Webをプラットフォームとするアプリケーションの構築には、HTML5のマー
Excel(csv)から一瞬にして大量のhtmlを作成する方法.vol2 | 楽してプロっぽいデザイン | Forty-N-FiveBlog
先日もご紹介しましたexcelからhtmlの変換ソフトですが、またまた便利なフリーソフトがありましたので紹介したいと思います。作業としては前にご紹介したこととほぼ同じです。テンプレートとなるhtmlを作成し、excelの1行目にタイトルを挿入したい位置に記入して、あとはフリーソフトを使って1発変換すれば、一瞬にして大量のhtmlを作成することができます。もしもドロップシッピングの商品CSVを利用して実施に作業した内容をメモしておきます。 下記のサイトよりフリーソフトをダウンロードします 全体で230KBぐらいなのでお手軽にダウンロードできます。bptran.exeこれがフリーソフトになりますので、こちらを使用することになります。（それ以外は、ソフトの解説やサンプルなどが内包されています。） Excelファイルを整理します もしもドロップシッピングのCSVより必要な部分を抜き出し、整理します
Google HTML/CSS Style Guide
Revision 2.1 This style guide contains many details that are initially hidden from view. They are marked by the triangle icon, which you see here on your left. Click it now. You should see “Hooray” appear below. Hooray! Now you know you can expand points to get more details. Alternatively, there’s a “toggle all” at the top of this document. This document defines formatting and style rules for HTML
ウェブの進化
現在のウェブは、動画、写真、インタラクティブなコンテンツをふんだんに使用したウェブページやウェブ アプリであふれています。一般的にあまり知られていませんが、これらすべてを可能にしているのがウェブ技術とブラウザの相互作用なのです。.� ウェブ技術が徐々に進化するにつれて、ウェブ デベロッパーは便利で実体験のようなウェブ体験の新時代を築くことができるようになりました。今日のウェブは、オープンなウェブ コミュニティが、HTML5、CSS3、WebGL のようなウェブ技術の定義を支援し、あらゆるウェブ ブラウザでサポートされるように絶え間なく取り組んできた成果といえるでしょう。. このタイムラインのカラーの帯は、現在使用されている多くの優れたウェブ アプリケーションを実現した、ウェブ技術とブラウザの相互作用を表現しています。. もっと見る
Rainbow - Javascript Code Syntax Highlighting
Download Select what languages you want to include to build a custom package. Languages select all C C# Coffeescript CSS D Generic patterns Go Haskell HTML Java JavaScript JSON Lua PHP Python R Ruby Scheme Shell Smalltalk SQL CSS themes are available on GitHub. Download What is this? Rainbow is a code syntax highlighting library written in Javascript. It was designed to be lightweight (2.5kb), eas
コンテンツ指向から著作者指向へ - rel="author"はweb全てを出会いの場にする。 - あまたの何かしら。
一ヶ月前にGoogleがよくわからないものを発表して、理解に苦しんだ。 著者とコンテンツを関連付ける「rel="author"」タグ登場 など10+2記事（海外&国内SEO情報） - Web担当者Forum ここが一番わかり易い。 ところが、Google+の登場とGoogle Profilesの絶対的公開を受けてGoogleが目指す検索エンジンの姿がやっとわかった。 Authorshipについて Webmaster Tools Helpに、webページに著作者情報を記載する事について説明がある。 まずGoogleは記事（article）の同一性を確認するため、3つのページのつながりを確認する。 コンテンツページ ニュース記事やブログ記事など、コンテンツの一部となるもの。 一個人のブログに限らず、複数の執筆者がそれぞれで投稿するサイトも想定。 著作者ページ コンテンツページとして同一ドメイン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JPNIC インターネット歴史年表 
Toward Firefox OS
https://jp.techcrunch.com/2011/12/22/20111221guide-to-html5-14-predictions-2012/
