【AMP】Googleが推進するAMPとは？概要と対応方法まとめ
突然ですが、最近スマホで検索をした時にたまにカミナリ⚡マークが付いたページが表示されるのをご存知でしょうか？ 赤い枠で囲っているリンクにはカミナリのマークがついています。このようなリンクはAMP HTMLで構築されたWebページに遷移します。 リンクをタップして見てみると、非常にシンプルな見た目のコンテンツが表示されます。 これらは「AMP(Accelerated Mobile Pages)」という、Googleが推進しているモバイルページを高速に表示させるための手法によって作成されているコンテンツです。 「最近よく聞くけど、AMPってなんなの？」と疑問をお持ちの方も多いのではないかと思います。 SEO界隈で何かと話題のAMPについて、概要から対応方法までまとめてみました。 AMPのメリットや設定方法について、こちらの動画でもわかりやすく解説しています。 記事とあわせてぜひご覧ください。
How AMP works
AMP の仕組み AMP ページが非常に高速で、瞬時に読み込まれるように見えるのは、次の最適化を組み合わせていることが理由です。理由は全部で7つだけですが、それでも読みきれない場合はこの説明動画をご覧ください。 すべての AMP JavaScript を非同期に実行 JavaScript は強力で、ページのほぼすべての要素を変更することができますが、DOM の構築をブロックしたりページのレンダリングを遅延したりする場合もあります（「JavaScript を使用してインタラクティブにする」もご覧ください）。JavaScript によってページのレンダリングが遅延しないよう、AMP は非同期の JavaScript のみを許可しています。 AMP コンポーネントは内部的に JavaScript を使用している場合がありますが、パフォーマンスが低下しないように慎重に設計されています。 独自の J
adding-interactivity-with-javascript?hl=ja
Adding Interactivity with JavaScript Stay organized with collections Save and categorize content based on your preferences. JavaScript allows us to modify just about every aspect of the page: content, styling, and its response to user interaction. However, JavaScript can also block DOM construction and delay when the page is rendered. To deliver optimal performance, make your JavaScript async and
[レスポンシブ対応] CSSでチャット風デザインを実装する | vdeep
「好きなプログラム言語何？」と聞かれれば、ためらいなく「CSS」と答えるokutani(@okutani_t)です。(ちなみにCSSはプログラム言語ではありません…) 今回はCSSでチャット風のデザインを作ってみました。レスポンシブ対応。 これで面白いやりとりし放題ですね。 スポンサーリンク 画像の準備 チャット画面の隣に自分と相手の写真を載せるので、90×90px以上の画像を用意しておきましょう。 ・自分 ・相手 相手の画像は下記リンクから拝借。 LINKFLAT ICON DESIGN -フラットアイコンデザイン-『FLAT ICON DESIGN』 両方ともサーバーにアップロードしておきます。 基本のレイアウト まずは基本のレイアウトを作っていきます。 HTMLはこちら。 <div class="chat-box"> <div class="chat-face"> <img src=
![[レスポンシブ対応] CSSでチャット風デザインを実装する | vdeep](https://cdn-ak-scissors.b.st-hatena.com/image/square/885f887b7b91d32c8a1e115dd41685ae7b4acf5f/height=288;version=1;width=512/http%3A%2F%2Fvdeep.net%2Fwp-content%2Fuploads%2F2015%2F04%2Fcss-chat-design.png)
10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。 - 日々、とんは語る。
2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。 最初に結論を書いておくと、 『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』 という組み合わせが、いま僕の採用しているJavaScriptの環境です。 主要ライブラリは React A JavaScript library for building user interfaces | React 去年、一気に普及したReact
シンプルでかつ最高のJavaScriptプロファイラ sjsp を作りました！ ― Webアプリケーションが複雑化する中でプロファイラに求められるものとは何か - プログラムモグモグ
あらすじ Web技術が複雑になる中で、JavaScriptのプロファイリングをとる方法とは。 プロファイリングを取るためのコードを手で書いてみましょう。 とてもシンプルで、かつ最高のJavaScriptプロファイラ sjsp を作りました。 本当にあった怖い話 上司 「とにかくJavaScriptのコードを速くしてくれ」 私 「分かりました、速くします」 (次の日) 私 「いいプロファイラがないなら作ればいいじゃない」 同じチームの人 「えっ？」 私 「最高のJavaScriptプロファイラ作ったよ」 同じチームの人 「「えっえっ？？？」」 私 「早速使ってみたらこことここが遅いって分かったよ」 同じチームの人 「「「この子は一体…」」」 JavaScriptのプロファイリングの難しさ 近年、Webブラウザーの処理速度は著しく向上し、その可用性の高さから、アプリケーションのプラットフォーム
Rubyist Magazine - スはスペックのス 【第 1 回】 RSpec の概要と、RSpec on Rails (モデル編)
『るびま』は、Ruby に関する技術記事はもちろんのこと、Rubyist へのインタビューやエッセイ、その他をお届けするウェブ雑誌です。 Rubyist Magazine について 『Rubyist Magazine』、略して『るびま』は、Rubyist の Rubyist による、Rubyist とそうでない人のためのウェブ雑誌です。 最新号 Rubyist Magazine 0063 号 バックナンバー Rubyist Magazine 0063 号 Rubyist Magazine 0062 号 Kaigi on Rails 特集号 RubyKaigi Takeout 2020 特集号 Rubyist Magazine 0061 号 Rubyist Magazine 0060 号 RubyKaigi 2019 直前特集号 Rubyist Magazine 0059 号 Rubyist
ソースコード20万行の大規模サイトのPHPを5.1から5.4に上げるためにやったことまとめ · DQNEO日記
所要期間 着手しはじめたのが2010年12月ごろ、完了したのが2013年9月だったので何と３年近くかかったことになります。 長引いた原因は、日々の機能追加や運用をしながら孤独に片手間で細々とやってたからです。(単純に人手不足とも言う) また、PHPバージョンアップと同時にCentOSサーバを5から6にあげることにしたのでサーバ再構築のための工数も含まれています。 後半は仕事仲間が増えてその人が専業でバージョンアップ作業をやってくれたのでだいぶ楽できました。 それと専任のテスターさんたちにも参加していただいたので本番で大きなトラブルなく完了することができました。 感謝感謝です。 サーバ入れ替え作業が終わってPHP5.1の入った古いサーバを削除したときの、まさに「技術的負債」を返済し終わった瞬間の、あのスッキリ感、もう言葉にはできません。 終わってみてこの件に関するRedmineのチケットを数
月間38億PVを6人でさばくpixivインフラチーム久保氏のパフォーマンス向上術 | Hitch Blog
■プログラミングを始めたきっかけ なぜプログラミングを始められたのでしょうか？ 久保 達彦さん（、以下久）： 小、中学校ぐらいのときにWindows95が大きなニュースになったんですが、これからコンピュータの時代が来るんだろうなと思ったことが最初のきっかけですね。その後入学した大学でコンピューター部に入部してそこでプログラミングがどういうものなのか知りました。大学ではあまり実践的なことはあまり学べなかったので、コンピューター部の仲間と勉強会を開催したり、自分で買った技術書を読んで勉強していましたね。 ■新卒ではウノウに入社、フロントエンドからバックエンドまで、あらゆる業務を担当 新卒ではウノウに入社されたとお伺いしたんですが、ウノウではどういう業務を担当されていたのでしょうか？ 久：入社して始めの頃は「映画生活」というWebアプリケーションを僕を含めて3人のエンジニアで開発していました。
HTTPSを使ってもCookieの改変は防げないことを実験で試してみた
寺田さんのブログエントリ「他人のCookieを操作する」には、通信路上の攻撃者がいる場合は、SSLを使っても、Cookieの盗聴を防ぐことはできるが、Cookieの改変を防ぐことはできないと指摘されています。いかにも寺田さんらしい簡にして要を得たエントリで、これに付け加えることはあまりないのですが、残念ながらまだ読んでいない人が多そうだと言うことと、より広い読者に向けて具体的に説明した方がよいだろうと考えました。 そこで、通信路上に攻撃者がいる典型例として、公衆無線LANの偽AP（アクセスポイント）があるケースを題材として、「HTTPSを使ってもCookieの改変は防げない」ことを説明します（Secure属性使うと盗聴は防げますが、改変は防げません）。長いエントリなので結論を先に書いておきます。 Secure属性がないCookieはHTTPSでも盗聴できる Cookieの改変についてはSe
非技術者のためのOAuth認証(?)とOpenIDの違い入門【2023年版】
昔から、「OpenIDは認証でOAuthは認可だ」などということが言われます。しかし、その言語の意味を取り違えている方が結構多い気がしています。「もうOpenIDなんていらね。OAuthだけでいいじゃん」というような言説がよく流れてくるのがその証拠だと思います。OAuth認証というのもその類ですね。 そこで、今日はOAuthとOpenIDの違いを考えてみたいと思います。 Youtube版 OpenIDは紹介状、OAuthは合鍵 まずはOpenIDの概要の復習です。「OpenIDは認証」という言葉の内容をまずは復習してみましょう。 「認証」とは大変広い言葉でいろいろな場面で使われますが、「OpenIDは認証」という使い方の時は、「OpenIDは、いま来ている人の身元を認証」（ユーザ認証）という意味です。図にすると図1のような流れになります。 この例では、有栖さんがお客としてサービス提供をして
単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる
In some of the feedback I have gotten on the openID Connect spec, the statement is made that Connect is too complicated. That OAuth 2.0 is all you need to do authentication. Many point to Identity Pro… 英語読みたくないという人のために簡単に解説すると… OAuth 2.0 の implicit flow を使って「認証」をしようとすると、とっても大きな穴が開きます。 カット＆ペーストアタックが可能だからです。 OAuth 認証？は、図１のような流れになります。 図１ OAuth 認証？の流れ 一見、問題なさそうに見えます。しかし、それはすべてのサイトが「良いサイト」ならばです。 Site_A
ApacheのVirtualHostによる高集積Webホスティングでsymlink問題を根本解決する方法について考えた
人間とウェブの未来（旧） 「ウェブの歴史は人類の歴史の繰り返し」という観点から色々勉強しています。2014年までの人間とウェブの未来の旧ブログです。 最近、各所でApacheのVirtualHostを利用した高集積ホスティングのセキュリティに関するインシデントが起きています。僕自身、自分の専門の一つがWebサーバのセキュリティなので、他人事には思えず、毎日各所の経過情報を眺めています。また、数社からApacheのセキュリティに関してもいくつか質問を受けたりしており、公に話せるような内容はこのブログでも公開していきたいと思います。 ということで、ApacheのVirtualHostによる高集積Webホスティングにおけるsymlink問題を根本解決するにはどうしたら良いのかを考えました。まずは、静的コンテンツも動的コンテンツのようにファイルのユーザ権限で処理する方法から紹介します。その後、ホス
「PHPエンジニア養成読本」が9月13日に出版されます - Blog::koyhoge::Tech
来月9月13日(金)に技術評論社より「PHPエンジニア養成読本」というムックが発売されます。新原さんのエントリや増永さんのエントリがすでにホッテントリ入りしているので、もうご存知の方も多いかもしれません。大きく変わりつつある PHP 開発のイマドキの常識を、可能な限りピックアップした本です。 内容についてはすでに上記の2エントリで的確に解説されていますので、ここでは視点を変えて、きっかけを作った一人としてこのムックが生まれた背景などを書いておこうと思います。 企画の相談が来たのは4月中旬 私は以前にWEB+DB PRESSで「PHPこども電話相談室」というふざけたタイトルの連載をしていました。その時からお世話になっている技評の編集者の細谷さんから、「PHPエンジニア養成読本」というムックの企画があるので相談に乗ってもらえないかというメールが来たのは4月中旬でした。PHP を取り巻く開発環境
PHPerのMVCの一体どこが間違っていたのか - MugeSoの日記
メリークリスマス！ PHP Advent Calendarもいよいよ24日目に突入です。 昨日はxhprofについてでしたね。僕もパフォーマンスチューニングの際に使っています。手軽に利用できるのでお勧めです。 さて、このエントリーでは表題の通りMVCについて書かせていただきます。これは、PHPカンファレンス2012&WordCamp Tokyo2012合同LT大会で発表した「やはりお前らのMVCは間違っている」で煽るだけだったこの問題をきちんと解説するものです。 この発表資料を公開するとPHPの枠を超えて広く閲覧いただき*1、また多くの方から突っ込みを戴きました。「LTだから」と言って逃げていた回答をして、気持ち新たに新年を迎えようと思います。 MVCとはなんなのか 間違いを指摘する前にMVCがそもそもどういうアーキテクチャであるのかを確認しなければいけません。 MVCは1970年代にパロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コンテナ＆サーバーレス：トレンドの考察と少し先の未来の展望
Zabbix概論
PHP7 で堅牢なコードを書く - 例外処理、表明プログラミング、契約による設計 / PHP Conference 2016
Free prototyping tool for web & mobile apps - Justinmind
Webアプリ開発者のための MySQL 基礎研修の資料を公開します : DSAS開発者の部屋
