Webページの構成を取得し、ページ全体を把握できるマップを自動生成するスクリプト -pagemap | コリス

2019/08/28 61 users コリス スクリプト 自動生成 構成 マップ

Webページ内のコンテンツの構成を取得し、ページ全体を把握できるマップを自動生成するスクリプトを紹介します。マップはページ内リンクにも対応しています。 pagemap pagemap -GitHub pagemapの特徴 pagemapのデモ pagemapの使い方 pagemapの特徴 pagemapはページ全体の構成を取得し、全体を把握できるマップを自動生成... 続きを読む

【知ってた？ Chrome裏技】縦に長いWebページ全体のスクリーンショットを撮る方法（拡張機能も不要！） | Chrome | できるネット

2018/08/12 337 users Chrome スクショ スクリーンショット ブラウザー ネット

拡張機能を使わずに縦長ページのスクショが取れる！ Webページのスクリーンショット（画面キャプチャー、スクショ）を撮る際に、ブラウザーの画面上に表示されている部分だけでなく、スクロールした先も含めたページ全体を撮りたいことがあります。今回は、そんなときに便利なテクニックを紹介します。 Chromeブラウザー... 続きを読む

【拡張不要】Chromeでスクロールするページ全体のスクリーンショットを撮る方法！

2018/08/01 1360 users Chrome モバ スクリーンショット 拡張 プレゼン資料

拡張機能を使わずに、Chromeでスクロールするページ全体のスクリーンショットを撮る方法を紹介します。 例えばプレゼン資料を作っているときに、PCサイトでページ全体のスクリーンショットが必要なことがあります。 また、モバ... 続きを読む

Python: Selenium + Headless Chrome で Web ページ全体のスクリーンショットを撮る - CUBE SUGAR CONTAINER

2018/07/27 317 users Selenium ProductName Python スク

スクレイピングした Web サイトからページ全体のスクリーンショットを撮影したい機会があった。 そこで Selenium の Python バインディングと Headless Chrome を使ったところ実現できたのでメモしておく。 使った環境は次の通り。 $ sw_vers ProductName: Mac OS X ProductVersion: 10.13.5 BuildVersion: 17F77 $ pyth... 続きを読む

通信の最適化の実施内容について | スタッフブログ | マイネ王

2018/05/07 262 users マイネ王 バッファリング 通信 YouTube mineo

新参者＠運営事務局です。今回は現在mineoにて実施している通信の最適化の内容について説明いたします。 最適化の基本的な考え方について 最適化を実施するにあたり、基本的な考え方は、「混雑時の通信速度を改善する」というものです。最適化を行うことで、昼休みにWeb閲覧する際、静止画のダウンロードがもたつきページ全体の表示に時間がかかる、とか、YouTubeを見る際、バッファリングに時間がかかり再生が始... 続きを読む

Webスクレイピングをする時に便利なnode.jsライブラリ「article-parser」 | cupOF Interests

2018/01/06 58 users クローラー Webスクレイピング フィード ソーシャルブック

2017年 9月12日 01時20分 3ヶ月前 Webスクレイピングをする時に便利な node.js用ライブラリ「 article-parser 」の紹介です。 " Webスクレイピング "、簡単に言えば、Webサイトからコンテンツの情報を抜き出すことです。RSSなどのフィードとは違いページ全体を抜き取ります。あまり聞こえはよくありませんが、Webサイトを巡回する クローラー や ソーシャルブック... 続きを読む

Webデザインが圧倒的に捗るChromeの拡張機能12選 | UX MILK

2016/03/10 618 users Chrome キャプチャ UX MILK webデザイン 効率

みなさんはChromeの拡張機能を活用していますか？　拡張機能を使えば面倒な作業でも効率良くこなすことができます。今回はWebデザインのときに使うと仕事が圧倒的に捗るChromeの拡張機能を紹介します。 1. FireShot ダウンロードURL： FireShot ページのキャプチャを撮影できる拡張機能です。ページ全体をキャプチャ、目に見える部分をキャプチャ、選択してキャプチャすることができます... 続きを読む

[JS]操作が気持ちいいさまざまなアニメーションでモーダルウインドウを表示させるスクリプト -animatedModal.js | コリス

2015/03/04 150 users コリス jQuery モーダルウインドウ スクリプト 操作

最近のUIの傾向として、ユーザーが操作して楽しくなるようなアニメーションは大切なポイントです。そんな気持ちいいCSS3のアニメーションでモーダルウインドウをページ全体に表示するjQueryのプラグインを紹介します。 横からアニメみたいにひゅっとスライドさせたり、ぼい～んとバウンドさせたり、気持ちよくて面白いものが簡単に実装できます。 animatedModal.js animatedModal.j... 続きを読む

[JS]YouTubeの動画をページ全体の背景に配置し、レスポンシブ対応の今時のテクニックを使ったチュートリアル | コリス

2015/02/03 96 users YouTube コリス チュートリアル レスポンス デモペー

動画をページいっぱいの背景として使用するのは、ここ数年人気の高いテクニック。 その方法はいくつかありますが、今回はレスポンシブ対応、動画の上にコンテンツを配置しスクロールでカーテンのように引き上げるページを実装するチュートリアルを紹介します。 HTML5のvideo要素で自サーバーの動画を配置するのではなく、YouTubeの動画を使うので、サーバーのレスポンスを気にする必要もありません。 デモペー... 続きを読む

Chrome拡張「Awesome Screenshot」ページ全体のスクショが撮れ、書き込みや加工までできる！

2014/05/23 51 users Awesome Screenshot スクショ Pin 加工

Chrome lapel pin / stshank とある事情でブログ記事全体のキャプチャ（スクリーンショット）を撮りたいなと思っていたのですが、スクロールして撮る、またスクロールして・・・なんて非効率的なことはなるべくやりたくない。何枚にも分かれてしまうのは見る方も面倒ですし。 そう思って何か方法はないか探していたところ、発見したのが「Awesome Screenshot」というChrome拡... 続きを読む

[JS]ページ全体、ページ上のさまざまな要素にオーバーレイをかっこよく表示するスクリプト -plainOverlay | コリス

2014/04/22 70 users jQuery コリス スクリプト アニメーション 実装

ページ全体、ページ上のさまざまな要素にオーバーレイをアニメーションでかっこよく表示するjQueryのプラグインを紹介します。 実装は非常にシンプルで、オーバーレイのカラーや不透明度、アニメーションなどのカスタマイズも簡単です。 plainOverlay plainOverlay -GitHub plainOverlayのデモ plainOverlayの使い方 plainOverlayのデモ デモで... 続きを読む

Windows XPだとページ全体に警告表示するJavaScriptを配布します | Stocker.jp / diary

2014/01/14 59 users Microsoft Stocker.jp 警察庁 diary

Web技術 Windows XPだとページ全体に警告表示するJavaScriptを配布します Top diary Tuesday, January 14th, 2014 Microsoft による Windows XP のサポートはあと数十日で終了します。 サポート終了後はどのような脆弱性が見つかったとしても修正されません。 参考: 警察庁も注意喚起、サポート終了後のWindows XP利用は危険... 続きを読む

[JS]納品前の確認に最適、使用されていないCSSのセレクタを見つけ出すスクリプト -Helium | コリス

2013/06/09 381 users jQuery Helium セレクタ コリス CSS

ウェブサイトの多数のページ全体に渡り、スタイルシートで定義されたセレクタが使用されているかどうかチェックし、使われていないセレクタのレポートを生成するスクリプトを紹介します。 納品する際に、不要なセレクタを除去するのに役立ちますよ。 Helium -GitHub Heliumの準備 Heliumの使用方法 Heliumの準備 HeliumはjQueryなど他のスクリプトを必要せず動作し、URLのリ... 続きを読む

[CSS]ページが長くても、ページ全体を角丸のボーダーで囲むスタイルシートのテクニック | コリス

2013/04/09 101 users コリス スクロールバー CSS Step ボーダー

ページ全体を角丸のボーダーで囲み、そのページがスクロールするくらい長くても全体を囲むスタイルシートのテクニックを紹介します。 Body Border, Rounded Inside Step 1: ページ全体を角丸で囲む（スクロール非対応） Step 2: ページ全体を角丸で囲む（スクロール対応） Step 3: ページ全体を角丸で囲む（スクロールバーを変更） Step 1: ページ全体を角丸で囲... 続きを読む

フルスクリーンでページめくりをするUI実装デモ:phpspot開発日誌

2012/12/20 86 users phpspot開発日誌 フルスクリーン インタフェース デモ

Fullscreen Pageflip Layout with BookBlock フルスクリーンでページめくりをするUI実装デモ。 なかなかいい感じのインタフェースのデモとサンプルのダウンロードが可能。 ページめくり部分はjQuery+CSSで実装されており再利用ができそう ページ全体をめくるというのもなかなかいい、と感じるデモでした。 完成度が高いのでそのままサイトに移植してもよさそうですね ... 続きを読む

[JS]ページ全体やコンテンツ（画像や動画）をフルスクリーンで表示するだけのシンプルなスクリプト -BigScreen | コリス

2012/08/28 61 users minified コリス エレメント スクリプト 超軽量

指定したエレメントをクリックすると、ページ全体をフルスクリーンで表示したり、画像や動画をフルスクリーンで表示するシンプルで超軽量（1KB）のスクリプトを紹介します。 BigScreen BigScreenの特徴 BigScreenのデモ BigScreenの使い方 BigScreenの特徴 BigScreenはページ全体やコンテンツをフルスクリーンで表示するシンプルで軽量（minified:1KB... 続きを読む

[CSS]モーダルウインドウをCSS3アニメーションを使ってエレガントに表示するチュートリアル | コリス

2012/04/12 56 users コリス モーダルウインドウ ズームアウト ズームイン CSS

モーダルウインドウを表示する際、CSS3アニメーションでズームイン・アウトさせるチュートリアルを紹介します。 デモページ：ズームアウト 実装 HTML div要素でモーダルウインドウを作成し、ページ全体を覆うオーバーレイのdiv要素で内包します。 <div class="overlay-container"> <div class="window-container zoomin"> <h3>He... 続きを読む

ページ全体に広がるスライドショーを実装できるjQueryプラグイン「jQSlider」:phpspot開発日誌

2012/04/04 52 users jQueryプラグイン phpspot開発日誌 プラグイン

jQuery jQSlider :: Example Slimple ページ全体に広がるスライドショーを実装できるjQueryプラグイン「jQSlider」 ブラウザを紙芝居っぽくしたスライドショーが作れます。この手のプラグインでは当然ですが、１ファイルのHTML内に全スライドを書けます。 ブラウザ幅が変わっても伸縮するレスポンシブな仕様になっています ブロック要素内にスライドショーを入れ込んだり... 続きを読む

[JS]ページ全体をダイナミックに横にスライドし、コンテンツを表示するスクリプト -PageSlide | コリス

2012/03/12 135 users PageSlide コリス stylesheet スクリプト

デモ PageSlideの使い方 外部ファイル スタイルシートをhead内に記述します。 <link rel="stylesheet" type="text/css" href="jquery.pageslide.css"> ページの下（</body>の上）にスクリプトを記述します。 <script type="text/javascript" src="https://ajax.googleap... 続きを読む

フルスクリーン背景がスライドショーになるCSS3サンプル:phpspot開発日誌

2012/01/12 56 users phpspot開発日誌 スライドショー Codrops 背景

Fullscreen Background Image Slideshow with CSS3 | Codrops フルスクリーン背景がスライドショーになるCSS3サンプル。 ページ全体の背景がCSS3によってアニメーションされ切り替わるサンプルとチュートリアルが公開されています。 画像・文字が綺麗にクロスフェードしながら切り替わってなかなかカッコいいものがCSS3をベースに構築されていて勉強にな... 続きを読む

指定したウェブページを丸ごととりこみ、カスタマイズして保存できるサービス「BO.LT」*二十歳街道まっしぐら

2011/07/19 56 users bo.lt ウェブページ divタグ HTML ウェブ魚拓

BO.LT 短縮URL＋ページ保存＋編集 「BO.LT」は指定したウェブページのURLを短縮し、その後ページ全体を保存できるサービスです。 さらに、保存したページを自由にカスタマイズすることが可能。 HTMLの divタグで囲まれた部分をささっと削除できたり。 指定した部分に新しくリンクを貼れたり。 ウェブ魚拓というサービスがありますが、それに編集機能が加わった感じですね。 以下に使ってみた様子を... 続きを読む

[CSS]box-shadowを使って洗練されたエフェクトを加える二つのテクニック | コリス

2011/04/18 346 users コリス box-shadow ウェブデザイン シャドウ CSS

CSS3の「box-shadow」を使用して、ウェブデザインに洗練された美しいエフェクトを加えるテクニックを二つ紹介します。 下記は各ポイントを意訳したものです。 box-shadowプロパティとは ページ全体に奥行きを加えるエフェクト 紙がめくれたようなエフェクト 対応ブラウザ box-shadowプロパティとは 「box-shadow」は、ボックス要素の内側・外側に多数のシャドウを加えることが... 続きを読む

はてなハイクをバージョンアップしました - はてなハイク日記

2011/02/14 62 users はてなハイク はてなハイク日記 バージョン デバイス 改良

14:41 | 本日、はてなのミニブログサービス「はてなハイク」をバージョンアップしました。ユーザーの皆さまに、より快適にお使いいただけるように、数多くの改良と不具合の修正を施しました。より軽快に動作し、ストレスなく利用できるサービスに システムを全面的に再設計して、処理速度が大幅に向上しました。投稿や閲覧も、ページ全体の再読み込みを行わずに実行できます。さまざまなデバイスからいつでも利用できるサ... 続きを読む

プロレベルのサイト作成時に使える実用Photoshopチュートリアル集:phpspot開発日誌

2008/12/21 304 users phpspot開発日誌 ヘッダー ナビゲーション 個別 プロ

25 Photoshop Tutorials for Web Designers - Six Revisions プロレベルのサイト作成時に使える実用Photoshopチュートリアル集。 ページ全体だけではなく、ヘッダーやナビゲーション等、パーツによって個別に別れているので使いやすそうです。 テンプレート作成のチュートリアル Photoshop Paper Texture from Scratch... 続きを読む

[JS]チョー簡単にサイトをAJAX対応にするスクリプト -com.bydust.ajax | コリス

2008/11/10 186 users コリス スタティック チョー AJAX対応 スクリプト

com.bydust.ajaxは、スタティックなサイトでもWordPressのようなサイトでも、ページ全体のロードをせずに必要な箇所のみロードして表示するAJAX対応にするスクリプトです。 com.bydust.ajax demo サイトをAJAX対応にする基本的なスクリプトの設置方法は、下記の通りです。 下記は、対象となる全ページに適用します。 ダウンロードした２つのスクリプト（com.bydu... 続きを読む