JavaScript

Webサイトのしくみをやさしく解説してみる(2)


Earth_AsiaSide


前回記事「Webサイトのしくみをやさしく解説してみる(1)」の続きです。

通信の決まり事

■通信プロトコル(HTTP)

Webページを表⽰するときには、クライアント(みなさんのパソコンを指します)はインターネットという通信網を利⽤してWebサーバと通信を⾏っていますが、この通信はHTTP(Hyper Text Transfer Protocol)というプロトコル(規約、決まり事)に従って⾏われています。

スクリーンショット 2016-08-31 20.47.36

続きを読む

シェアして頂けると嬉しいです

Webサイトのしくみをやさしく解説してみる(1)


インターネット


Webサイトのしくみについて、概要程度はつかんでおきたいという方のために以前書いた記事を総括して書きなおしてみました。
→「WebサーバとかHTTPとかわからない人のためにWebのしくみを超カンタンに説明してみる
→「とりあえず難しいことは抜きにしてJavascriptっていったい何なの?

インターネットやSNS(Facebook、Instagram、ツイッターなど)などの様々なWebサービス、Webコンテンツを普段当たり前に利用してはいるものの仕組みがよくわからない人のために、Webのしくみを説明しています。難しいことは置いておいて、まずはこんなカンジでイメージしておけば良いのではというレベルの内容となっています。専門家でない人にも理解できるように、できるだけ簡素な表現で説明しています。

続きを読む

シェアして頂けると嬉しいです

とりあえず難しいことは抜きにしてJavascriptっていったい何なの?




「WebサイトとかWebページはHTMLファイルがブラウザに表示されているんだよね」ってところまでは理解しているけど、Javascriptっていうのも何かWebに関係しているようだけど何だか良くわからないなーという人向けに簡単に説明してみます。

HTMLもよくわからないんだけどという方はこちらを読んでからのほうが理解できると思います。→「WebサーバとかHTTPとかわからない人のためにWebのしくみを超カンタンに説明してみる

まずはHTMLについて

HTMLファイルはブラウザ上に表示したい文字や画像・動画などを書式指定付きで書かれた文書ファイルです。「書式指定付き」というのは、段落や文字の位置や大きさ、色、装飾などを指定して書かれているという意味です。具体的には「あいうえお」という文字を太字で表示したい場合はHTML書式に従って書くと「<strong>あいうえお</strong>」とか「<b>あいうえお</b>」となります。このような<>で囲まれたものがHTMLタグと呼ばれています。HTMLタグはものすごいたくさん種類があって文章や文字、画像などブラウザ上に表示したいものに対してさまざまな効果を与えることができます。「HTMLタグ」でGoogle検索などをしてみるとHTMLタグの一覧サイトなどがたくさん出てきます。(参考:HTMLクイックリファレンス http://www.htmq.com/html/)
続きを読む

シェアして頂けると嬉しいです

Javascriptフレームワーク CasperJS 基本的な使い方(5) ファイル入出力


casperjs


CasperJSの基本的な使い方を具体的なサンプルプログラムで紹介したいと思います。インストール済みという前提で話を進めます。まだインストールしていない場合はこちらを参考にインストールしてください。
Macにcasperjsをインストール
Windowsにcasperjsをインストール

入力データをファイルから読みこんだり、Webのスクレイピングを行った結果をファイルに保存したりするケースがあると思います。ファイル読み込みとファイル保存を行うプログラムを紹介します。

ファイルの読み込み

例として以下のようなCSVファイルを読み込みます。

 

続きを読む

シェアして頂けると嬉しいです

Javascriptフレームワーク CasperJS 基本的な使い方(4) Webスクレイピングしてみる


casperjs


CasperJSの基本的な使い方を具体的なサンプルプログラムで紹介したいと思います。インストール済みという前提で話を進めます。まだインストールしていない場合はこちらを参考にインストールしてください。
Macにcasperjsをインストール
Windowsにcasperjsをインストール

実際にCasperJSを使用する場合、複数のWebページにアクセスして、各ページごとに処理をしていく場合がほとんどだと思います。そのようなケースを想定したサンプルプログラムを紹介したいと思います。以下ののYahooのニュース・トピックを対象とします。
スクリーンショット 2015-11-03 15.28.02
続きを読む

シェアして頂けると嬉しいです