技術書典5 で本記事をさらにパワーアップさせた本を書いたのでよかったらどうぞ Chromeデベロッパーツールを使いこなそう Console編 Chrome デベロッパーツールの Console には Web 画面を解析するための便利な機能が備わっています。 この便利機能を覚えておくと Web 画面からの情報抽出 や、 Chrome Extension 開発 がとても捗ります。 ※ 筆者はこの機能を利用して、 ウェブスクレイピング時のDOMセレクタを調べたり、 Q Accelerator などの Chrome 拡張機能を開発しています。 本記事では、次の３つを解説します。 Console の便利機能 実際に Qiita の画面を解析する手順 リアルタイムで評価結果を返す Eager Evaluation （Google IO 2018 で発表されました） 便利機能（コマンドライン API）

つい最近、初めて作った Google Chrome エクステンション「Feedly をはてブ対応させる Chrome エクステンション」をブログで紹介したので、その時の技術的なメモなどを Qiita に残しておきたいと思います。まあ検索すればすぐに集まる程度の情報ではあるものの、一箇所にまとまってなかったので、自分用の備忘録でもあります。 全てのソースコードは github 上で公開しているので、気になる方は参考にしてみて下さい。実際に書いたスクリプトの簡単な解説もこの記事の最後に付録として付けています、 超最低限な Chrome エクステンションの作成 Chrome エクステンションは基本的に、一つのフォルダに保存された複数のファイルからなります。エクステンションのルートに必要な最初のファイルは、manifest.json というファイルで、これがエクステンションの基本的な情報を含んでい

AMP 拡張コンポーネントには、カルーセルやスライドショー、あるいはアコーディオン式の UI を実装したり、ソーシャルボタンを設置するためのコンポーネントも用意されています。そこで個人的に気になったものをいくつか取り上げて、簡単に解説してみたいと思います。 以前、AMP （Accelerated Mobile Pages） HTML に関する基本的な記事と、拡張コンポーネントを利用した AMP HTML への Google Analytics 導入方法について記事を書きました（下記リンク参照）。 AMP （Accelerated Mobile Pages） HTML を出力するようにしてみたけど面倒くさかった話 amp-analytics コンポーネントを使用した AMP HTML への Google Analytics 導入方法 AMP の拡張コンポーネント （Extended comp

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

<iframe width="560" height="315" src="//www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allowfullscreen></iframe> I have a few questions on what happens when I embed a YouTube video using source code like above. The code should generate a YouTube Player object that processes the video the way users like. When I generate a Youtube Player by myself using Youtube Player API(instead of using the em

DevTools、使ってますか？ もはやChromeじゃないと開発できないくらいに飼い慣らされています。 ブレークポイントやconsole.logなど基本的な使い方から、TimelineとAuditsを使ってのパフォーマンス計測などなど、DevToolsのポテンシャルは計り知れません。 個人的にはConsole APIが好きなんですが、今回はConsoleパネルで使える Command Line API の使い方についてまとめてみました。 $_ $_には最後に評価した式の結果が保存されています。 Console上で計算を行なった場合や、$セレクタなどでDOMを検索した結果など、最後の結果が常に保存されます。 $0 〜 $4 $0から$4にはElementsパネルで選択した要素が5つ保存されています。$0が最後に選択した要素で数字が増えるごとに過去に選択した要素になります。 $0は特に使いや

「SEO的に優れた無限スクロールの実装方法」Googleからのアドバイス Googleが検索エンジンに配慮した無限スクロールの導入方法を公式ブログでアドバイス。クローリングできるようページ分割したものを用意するのが原則。プログレッシブ・エンハンスメントを前提に設計しよう。 公開日時：2014年02月14日 02:16 米Googleは2014年2月13日、検索エンジンフレンドリーな無限スクロール（Infinite Scroll）の導入方法についてのアドバイスを公式ブログに掲載した。John Mueller, Maile Ohyed, Joachim Kupkeの3人による上級者向けの投稿だ。 本記事では、翻訳ではなく、軽く Google のアドバイスの要点を押さえつつ、私個人の意見を述べていく。 無限スクロールとは Twitter や Facebook でも導入されているので既にお馴染みか

Google タグマネージャ （Google Tag Manager） をこの Blog 内の各ページで読み込んでいる JavaScript コードの管理に数ヶ月前から使い始めていますが、結構使いやすくて便利なのと、ページの表示速度的にもいい結果が出たので紹介してみます。 Google タグマネージャ公式サイト 機能 ： Google タグマネージャ Google タグマネージャとは？ Google タグマネージャは無料で簡単に使用できるタグ管理システムです。ウェブ上の使いやすい管理画面から自分でタグを管理してモバイル アプリを設定できるため、面倒なコード書き換えは不要で、IT 部門に依頼する必要もありません。 機能 ： Google タグマネージャ から引用 と公式には書いてありますが、簡単にいえば Web ページ内で読み込む各種の JavaScript コード、例えば Google A

Webフロントエンドのパフォーマンスチューニングについて全体的な話。javascript、Chrome DevToolsの紹介、ボトルネック、ポイントなど。

jQuery 1.9 がリリースされました。1.9 の新機能の中ではあまり注目されていませんが、ソースマップに対応したのが地味に便利そうです。 というのも、圧縮版の jquery.min.js を使っていると 何か問題が起きたときにスタックトレースを眺めても jQuery の部分が意味不明 デバッガーで jQuery のソースにステップインしても意味不明 といった理由で、開発中には非圧縮の jquery.js を使うことが多かったわけです。 それが、1.9 からはソースマップに対応したので圧縮版のままでのデバッグが簡単になってます。 超簡単な使い方 ソースマップに対応したブラウザーは現時点では Google Chrome のみなので、Google Chrome の手順を説明します。 (Firefox はソースマップへの対応を計画中らしい) 事前準備を忘れずに Google Chrome で

GoogleSwiffyではFLASH内のtraceがJavaScriptのconsole.logとして出力されるメモ Posted on 2012-11-21 今回の記事は、最近GoogleSwiffyを扱っていて、FLASH内のtraceがJavaScriptのconsole.logとして出力される事に気づいたのでメモしておきます。 これが導入されたのはいつかは定かで無いのですが、少なくともバージョン4.9の段階では導入されているようです。 早速、簡単に挙動を追ってみます。 まず、FLASH。 http://www.1ft-seabass.jp/memo/archives/google-swiffy-014/google-swiffy-014.swf,320,480 このように、書いてある通りのtrace文をフレームスクリプトで実行しています。 trace( 1234567890 );

こんにちは。会社を抜けだしてiPhone5を予約しに行ったら熱中症になりかけたkintone開発チームの天野(@ama_ch)です。 kintoneでは10万行以上のJavaScriptが動いており、ライブラリにはClosure Libraryを利用しています。この規模になると、1ページあたりで読み込むjsファイルの容量が数MB単位(！)になってしまいます。そこで、通信量を減らすためにClosure CompilerでJavaScriptをミニファイしています。今となっては特に珍しい話ではないですね。 ところで、Closure Compilerの最適化レベルには3段階あるのをご存知でしょうか。 ・WHITESPACE_ONLY コメントとホワイトスペースの除去など ・SIMPLE_OPTIMIZATIONS（デフォルトレベル） WHITESPACE_ONLY に加え、ローカル変数のリネーム