サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
TGS2024
creator.mynavi-agent.jp
【年末年始休業期間 2019年12月28日~2020年1月5日】この期間のお申込みは、2020年1月6日以降、順次対応させていただきます。
第20回PhantomJS/CasperJSを使ったお手軽スクレイピング(1) Webブラウザを自動で動かしてさまざまな処理を省力化する・・。情報の抽出や動作テスト等、目的はさまざまです。今回は手軽に使い始められる、画面のない(Headless)Webブラウザ「PhantomJS」と、それを簡単に使うためのユーティリティ「CasperJS」をご紹介します。 PhantomJS/CasperJSとは PhantomJSは、WebKitベースのJavaScriptコマンドラインツールです。Webブラウザの画面を立ち上げることなく、コマンドからWebブラウザに表示される特定のデータを取得することが可能です。 Webブラウザの処理を自動化するツールとしては、本連載でも取りあげたことがあるSelenium WebDriver(第11回 Selenium WebDriverを使ったテストの自動化)
第21回PhantomJS/CasperJSを使ったお手軽スクレイピング(2) Webブラウザを自動で動かしてさまざまな処理を省力化する・・。情報の抽出や動作テスト等、目的はさまざまです。今回は続きとして、PhantomJSとCasperJSを使った画面キャプチャやコンテンツの抽出方法のサンプルをご紹介します。 PhantomJS/CasperJSで実際にスクレイピングしてみよう! 前回はPhantomJS/CasperJSの概要とインストール方法をご紹介しました。今回はPhantomJS/CasperJSを用いて、実際にスクレイピングを体験してみましょう。 スクリーンキャプチャを取得 UserAgentとviewportを操作してスクリーンキャプチャを取得 Google Chartsの描画結果をキャプチャ 特定のコンテンツのみを取得 PDFの作成 スクリーンキャプチャを取得 ca
第15回awkを使ったデータ抽出・加工テクニック レコードの量が少なく、ファイルサイズの小さいファイルであれば、一般的な表計算ソフトでも簡単に操作がおこなえます。しかし、レコードの量が多く、ファイルサイズが極端に大きいファイルの場合、表計算ソフトだと操作がもたついてしまい、必要なデータを取りだすだけでも一苦労です。膨大なデータの中から必要なデータだけを取りだし、各種計算や加工を簡単におこなうにはawkコマンドが便利です。 awkとは awkとはAlfred V. Aho氏、Brian W. Kernighan氏、Peter J. Weinberger氏によって開発されたプログラミング言語です。Unixのツールであるgrepやsedを、文書だけではなく数も扱えて一般化できるか、という実験の一環として設計・作成されました。今日では、さまざまなawkの派生コマンドが登場しています。 awk
第17回パララックス効果を作ってみよう 最近よく見るようになった、奥行感を演出するスクロール。いわゆるパララックスと呼ばれる演出効果。 もちろんこれもJavaScriptを使って実装されています。 サンプルを見る 奥行を理解する。 パララックスを理解するには、2D空間における奥行感を理解する必要があります。 下の図を見てください。 これが奥行感を演出する際の鉄則です。 皆さんも、空を眺めたとき、飛行機がゆっくり空を飛んでいるのを見たことがあるはずです。 でも、普通に考えて、飛行機があんなにゆっくり飛んでるはずはありません。 そう、遠くにあるものはゆっくり動いて見えるのです。 そのあたりの理屈は、遠近法と同じですね。同じ10メートルでも、目の前の10メートルと1キロ先の10メートルでは視認できる大きさが違います。 もう一つ例を挙げると、空を浮かぶ雲を見たときに、速い雲と遅い雲がある
第4回 HTML5の新要素、videoタグについて知ろう。動画ファイルの作成について。 前回・前々回と、HTML5のVideoタグを使った作例を紹介しましたが、では肝心のHTML5で利用する、「H.264」「Web M」形式の動画は、どうやって用意すればいいのか? 今回はそのあたりを解説しましょう。 Adobe Media Encoderを利用する。 AdobeのCS製品のうち、Web制作向け・動画制作向けのスイート製品を交友すると、 「Adobe Media Encoder」というアプリケーションが同梱されます。 Web制作を生業にされている方は、大体はAdobe製品を使っていると思いますので、Adobe Media Encoderを使うのが一番手っ取り早いでしょう。 なお、Adobe Media Encoderでは、Web M形式の動画は書き出せないので、Web M形式の動画に関して
HTML5の新要素、videoタグについて知ろう。videoタグを使って、Flash無しでビデオ再生 HTML5で新たに追加された<video>タグを使うと、Flash無しでブラウザで動画を再生できます。 Flashに依存しないということで、Flashに対応していない端末、特にiPhone・iPad・iPod touchなどに対し、ビデオ配信を行う際は<video>タグだけが唯一の方法となります。 その一方で、HTML5の<video>タグの仕様では、動画の形式までは決められておらず、どの動画形式を採用するかはブラウザの実装側に委ねられ、混乱を招く原因となっています。 そこで、そういった諸々をおさらいし、正しく<video>タグを使えるようにしましょう。 <video>タグの記述方法を理解する。 動画を再生させるだけの簡単なサンプルを用意しました。 対応ブラウザは、最新のForef
第7回 CSS3のアニメーション効果アニメーションの終了を取得して、ちょっと凝ったUIを作る。 「transitionプロパティ」で設定したアニメーションでは、アニメーションの終了をJavaScriptのイベントとして取得することができます。 アニメーションイベントを利用することで、ちょっと複雑なアニメーションを作成することができます。 transition終了を検知 サンプルを見る このサンプルでは、2カラム構成のボックスを2段階のtransitionで表示します。 Flashコンテンツなどで、こういった展開をするサイトをよく見かけますね。 transitionプロパティと終了イベントをうまく利用することで、簡単にこういった処理を行えます。 ※今回も、CSS3の「transitionプロパティ」に対応した「Firefox」「Chrome」「Safari」でしか動作しません。 残
第6回 CSS3のアニメーション効果煩わしいベンダープリフィックスからの解放。 前回、 W3Cで未だ確定していないプロパティを、各ブラウザベンダーが独自に実装したプロパティに対して「ベンダープリフィックス」を記述する必要があると解説しました。 しかし、いちいち同じ記述をブラウザ毎に記述するのも面倒ですし、コードの可読性も悪くなります。 そこで、ベンダープリフィックスを記述しなくて済むようになる便利なライブラリ、「prefixfree.js」を紹介します。 「prefixfree.js」を使うと、アニメーションのプロパティだけでなく、シャドウやグラデーションなど、ベンダープリフィックスが必要なプロパティ全てで有効になります。 「prefixfree.js」の導入 サンプルを見る 今回は、オブジェクトの位置を移動するというアニメーションを付けてみました。 このサンプルは、CSS3の「t
ツイート WCBの人気コンテンツ「おきらくFLASH講座」(現在は連載完了)。 Webクリエイターの河野さんが作例をもとにFLASHアニメーションについてわかりやすく説明します。 インハウスのFlashクリエイターとして勤務後、2010年独立。 1年間のフリーランス期間を経て、2011年9月にスウィーツアンドストリーム株式会社を設立。 主にFlash・HTML5を駆使した、PC・スマートフォン向けインタラクティブコンテンツを中心に活動中。 ■河野さん新連載コンテンツ 「Webテク講座」 第1回 Scriptで車を走らせてみよう。 記念すべき第1回、まずは初歩的なところからやってみたいと思います。 第2回 車のスピードを変化させてみよう。 今回はボタンを押したら車の速度を変えられるようにしてみましょう。 第3回 夜空に瞬く無数の星。 数百個にも及ぶ星たちを、Scriptで一括で配置して
河野 義貴Kawano Yoshitaka インハウスのFlashクリエイターとして勤務後、2010年独立。 一年間のフリーランス期間を経て、2011年9月にスウィーツアンドストリーム株式会社を設立。 主にFlash・HTML5を駆使した、PC・スマートフォン向けインタラクティブコンテンツを中心に活動中。 マイナビクリエイターセミナー(WCBセミナー)の講師としてもおなじみ。 第6回 2012年06月 CSS3のアニメーション効果。 煩わしいベンダープリフィックスからの解放。 ベンダープリフィックスを記述しなくて済むようになる便利なライブラリ 第5回 2012年06月 CSS3のアニメーション効果。 CSS3のtransitionプロパティを使ってみよう。 CSS3の「transitionプロパティ」を使って、FlashやAjaxで実装するようなインタラクティブなUIの実装 第4回 2
第5回 CSS3のアニメーション効果CSS3のtransitionプロパティを使ってみよう。 「HTML5」という単語は、みなさんよく耳にすると思います。 しかし、HTMLと同時進行で策定さている「CSS3」に関しては、あまりなじみが無い方もいるのではないでしょうか? そこで、今回から、CSS3の「transitionプロパティ」を使って、FlashやAjaxで実装するようなインタラクティブなUIの実装について解説していきたいと思います。 まずは、簡単なプルダウンから作ってみよう。 サンプルを見る サンプルは、簡単なプルダウンを作成しました。 このサンプルは、CSS3の「transitionプロパティ」に対応した「Firefox」「Chrome」「Safari」でしか動作しません。 残念ながら現時点ではIEは「transitionプロパティ」には対応していません。 さて、今までの感
このページを最初にブックマークしてみませんか?
『マイナビクリエイター | Web・ゲーム・IT業界専門の転職エージェント』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く