JavaScriptの多用はSEOに悪影響なのか？Vercelが徹底的に調査、結果は？
8月1日、Vercel Newsで「Google がインデックス作成プロセスで JavaScript を処理する方法 – Vercel」と題した記事が公開された。この記事では、Googleがインデックス作成プロセスでJavaScriptをどのように処理しているかについて詳しく紹介されている。 以下に、その内容を簡潔にまとめて紹介する。 まず、Googleがインデックス作成プロセスでJavaScriptをどのように扱うかについて、以下の主要な誤解があることが指摘されている。 「GoogleはクライアントサイドのJavaScriptをレンダリングできない」 「GoogleはJavaScriptページを異なる扱いをする」 「レンダリングキューとタイミングがSEOに大きく影響する」 「JavaScriptを多用するサイトはページ発見が遅くなる」 これらの誤解を解消するため、VercelはSEOおよ
Scroll-driven Animations
# Introduction Scroll-driven animations are a common UX pattern on the web. These are animations that are linked to the scroll position of a scroll container. This means that as you scroll up or down, the linked animation scrubs forward or backward in direct response. Think of interesting effects such as parallax background images or reading indicators which move as you scroll. A similar type of s
モダン JavaScript チートシート
Skip to the content. モダン JavaScript チートシート 画像クレジット: Ahmad Awais ⚡️ イントロダクション 動機 このドキュメントはモダンなプロジェクトでよく見られる JavaScript のチートシートと最新のサンプルコードです。 このガイドは読者に JavaScript をゼロから教えるものではありません。 基礎知識は持っていて、モダンなコードベースに慣れる（例えば React を学ぶ）のに苦労している開発者を助けるためのものです。 説明の中で JavaScript の諸概念が使われています。 また、議論の余地のあるポイントについてときどき個人的な tips を載せますが、その際はあくまでも個人的なおすすめであることを述べるように気をつけます。 メモ: ここで紹介されている概念のほとんどは JavaScript 言語のアップデート（ ES2
How to use SVG as a Placeholder, and Other Image Loading Techniques
How to use SVG as a Placeholder, and Other Image Loading Techniques I'm passionate about image performance optimisation and making images load fast on the web. One of the most interesting areas of exploration is placeholders: what to show when the image hasn't loaded yet. During the last days I have come across some loading techniques that use SVG, and I would like to describe them in this post. G
Payment Request APIを試す - mmag
Payment Request APIという仕様の策定が進んでいるという話を聞きまして、ちょっと触ってみました。 あまりコードは書いてないですが、ここに置いてあります。 github.com https://joe-noh.github.io/payment_request_api/でも試せるようにしてあります。108円取られそうになりますが、途中で失敗して中断するようになってます。 できること ECサイトなんかで買い物をするとき、フォームにクレカ番号とか届け先とかを入力すると思いますが、あの辺の情報の入力をブラウザに丸投げできちゃいます。言葉で書くより、以下のページのスクショを眺めたほうが速いと思いますので貼っておきます。 developers.google.com ここではブラウザの画面で説明されていますが、今後はPCはもちろんもっと多様なデバイスで使えるようになって、夢が広がるねとい
そのコードが標準化されてるJavaScriptなのかを判定する方法
ECMAScript Version Detector ECMAScript Version Detectorというツールとライブラリを書きました。 azu.github.io/ecmascript-version-detector/へアクセスして、好きなコードをペーストすると、そのコードの構文がECMAScriptのどのバージョンから使える機能なのかを表示してくれます。 たとえば、以下のコードはasyncとawaitの部分がまだProposalであるAsync Functionsであることを検出してくれたりします。 目的 Babelなどの変換ツールでECMAScriptのProposalな機能などが身近になりました。 しかし、それがまだ仕様に入ってないもの(Proposal段階であるもの)ということを意識しないで書いてる人もよく見かけるようになりました。 そのため、まだProposalの
知られてそうで知られてない少し知られてるECMAScript 2015 (ES6)の新機能: Days on the Moon
Kyoto.js #10で「知られてそうで知られてない少し知られてるECMAScript 2015 (ES6)の新機能」というライトニングトークをしたので、そのスライドに当日しゃべった内容や補足を追記して以下に掲載します。 自己紹介 nanto_vi 情報規格調査会SC 22/ECMAScript Ad hoc委員会 editional issueの報告 ECMAScript 2015 (ECMA-262 6th Edtition) クラス構文 アロー関数 ブロックスコープ Promise etc... 2015年にECMAScriptが大幅に改定されました。クラス構文やアロー関数の追加はあちこちで取り上げられているので皆さんご存知でしょうが、ここではあまり取り上げられていない地味な新機能を紹介します。 Unicodeの符号位置 // 🍣 '\uD83C\uDF63'; // ES5 '
カスペルスキーがWEBサイトに不審なスクリプトを埋め込んでいた件 - wp.bmemo.pw
タイトルが不穏ですが調査やサポートに連絡した結果「通常使用は問題ない」との結論になりましたので先に言っておきます。じゃあなぜ記事にしたかというと「WEBサイト作るときに超困る」からです。 追記：以下の検証等は（2015年11月バージョンの）カスペルスキー2016 Windows版です。 一体何が起きているのか カスペルスキー 2016および2015の話です。2016はつい最近パッケージ版が発売されましたね。このカスペルスキー2016 Windows版 をインストールすると、アクセスする（ほぼ全ての）WEBサイトに**「カスペルスキー謹製 javascriptコード」**が挿入されます。 これはカスペルスキーと全く関係ないMicrosoftのWEBサイト(https://www.microsoft.com/ja-jp)を表示した時のhtmlソースです。 見辛くてすいません。microsoft
Service Worker で作る 最新モバイル ウェブ エクスペリエンス - Google Developers Summit まとめ
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
気軽にプログラミングを始められるWebエディタ『runstant』作りました - Qiita
7月19日. 久しぶりの３連休. 予定はぎっしりだった. だが神からのお告げがあった. なんか作れと. 気づいたらオレの指は Macbook Air の薄いキーボードの上だった. ってことで連休中にちょっとしたツール作りました. 気軽にプログラミングを始められるWebエディタです. 名前は runstant. run + instant の略で, インスタントラーメンのように一瞬で気軽に実行できるよって意味です. ログイン不要, サーバー通信なしで一瞬で プログラミングを始めることができます!! 一応, tmlib.js 公式エディタ的な 位置づけなのでデフォルトで tmlib.js のサンプルが入ってます. とりあえず触ってみてください -> こちら 特徴 ログインの必要ないよ 状態を hash で保存するのでサーバー通信しないよ html/css/javascript が書けるよ ちょ
JavaScriptのクロスドメイン問題対応方法
皆さん、こんにちは。笹亀です。 しばらく立て混んでいた関係でブログがかけませんでした。 久しぶりにブログを書かせていただきます。 JavaScriptでいろいろと実装しているとき、別ウィンドでページを呼び出し、その別ウィンドーと呼び出しウィンドー間にて通信を行うといったときによくクロスドメイン問題に悩まされます。 今回はそのようなクロスドメイン問題を解決する方法についてご紹介します。 そもそもクロスドメインとは、異なるドメイン間をまたがったデータに対してアクセスをすることをいいます。 Webアプリケーションを設置・公開するホストのドメインと、そのアプリケーションがアクセスするWebサービスのドメインが、サブドメインやポート番号も含め異なる場合は、JavaScriptなどでのデータのアクセスは遮断されます。 JavaScriptにてクロスドメイン間の通信をする場合には、JSONPを利用して行
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Evidence - Business Intelligence as Code
Redirecting to https://mermaid-js.github.io/mermaid/#/