20190828のHTMLに関する記事は4件です。

投稿日：2019-08-28T23:07:31+09:00

xampp + VScode でWebサービス開発環境構築

はじめに

サークルでphpを使ってWebサービスを作りました。
後輩に引継ぎをする時期となったのでWebサービス環境構築方法をここに掲載しておきます。
phpを使用せずにWebサービスを開発する場合でも、ローカルで動作を確認するためのツールを導入するということで参考になるかと思います。

導入環境

Windows10 (64bit)

概要

Visual Studio Code (VScode) のインストール

xampp のインストール

パスを通す

動作確認

手順

VScode

インストール

VScodeのインストールに際しては以下のサイトが参考になったので、ここでの説明は割愛させていただきます。
https://www.kkaneko.jp/tools/win/vscode.html

今回はダウンロードとインストールまで済んでいればOKです。

VScodeの拡張機能のインストール

メニューバーの表示(View)を選択し、拡張機能(Extensions)を押します

またはCtr + Shift + Xを押します。

検索でphp serverを押し、PHP Serverを探します(画像のもの)

installを押して完了です

xampp

またまた他のサイトが参考になりましたのでここでの説明は割愛させていただきます。
https://qiita.com/minuro/items/d7f2b95b922ae302577c

xamppのコントロールパネル(以下の画像)が出てくるところまででOKです

パス

これでラストです。ちょっとややこしいので注意して見てください！
1. PCの検索等で環境変数と打って画像のような画面が出てきたら、下の環境変数を押します

2. システム環境変数のPathを選択して編集を押します
3. 環境変数名の編集という画面に移るので、新規を押してC:\xampp\phpと記入します(プライバシーの都合上黒塗りしています)

4. あとは、OKを押してPCを再起動するだけです

動作確認

適当なところでいいので、
フォルダ：test
ファイル名：index.php
を作成し、index.phpには以下のコードをコピペしてください


<!DOCTYPE html>
<html lang="ja-JP">
<head>
    <meta charset="UTF-8">
    <title>テスト</title>
</head>
<body>
    これはテストです。以下の文章はphpで出力されています<br>
    <?php
        echo "これはphpです";
    ?>
</body>
次に、VScodeを起動します。
メニューバーからファイルを選択してフォルダーを開くで今作ったtestフォルダを開きます。
index.phpを開き、コードの上で右クリックし、PHP Server: Serve Projectを押します。
すると、ブラウザが立ち上がり、このような画面がでるはずです。

注意

フォルダから開かずにファイル単体(ここだとindex.php単体)でVScodeで開くとエラーが起きるので注意してください。必ずフォルダから開くようにしてください

また、フォルダの直下には必ずindexと名前の付いたファイルをだた一つ作成するようにしてください。

最後に

ここまでできていれば、Webサービス開発環境は整っています！
正確にはローカル開発環境ですが...

今回はindex.phpで確認しましたがindex.htmlであっても問題はありません。
(自身、HTML, CSS, JSのみでサービスを作る際にここで作成した開発環境を利用しました)

　 Tweet
Qiitaで続きを読む

投稿日：2019-08-28T19:13:40+09:00

WEB関連の用語を分かりやすくまとめてみる①

はじめに

web関連の用語を自分なりにまとめていきます。お付き合いいただければ幸いです。

webとは

Webとは、World Wide Webの略称で、頭文字をとってWWWと呼ばれることもあります。web上の文書はハイパーテキストと呼ばれる言語で書かれ、web同士がハイパーリンクと呼ばれるwebページの参照によりまるでクモの巣のように繋がっていることからそう呼ばれるそうです。

ユーザーインターフェースとAPI

コンピューターの機能とユーザーのやり取りを橋渡しする機能をユーザーインターフェースと呼びます。また、ソフトウェア同士のやり取りを橋渡しする機能をAPI（アプリケーションプログラミングインターフェース）と呼びます。

HTMLとXMLとXHTML

HTMLは（Hyper Text Markup Language)の略称で、web上の文書であるハイパーテキストを記述するためのマークアップ言語のひとつです。タグによって記述されます。HTMLは特にwebに特化した機能を持ちます。XMLは（Extensible Markup Language)の略称で、HTMLと同じマークアップ言語のひとつです。webに特化したHTMLに比べて、XMLは様々な用途に汎用的に利用されます。XHTMLは(Extensible Hyper Markup Language)の略称で、HTMLをXMLの文法で再定義したものになっています。

webブラウザ

safariやchromeなどがあります。主要な役割として、webサーバーから送られてきたHTMLを人間が見やすい形に変換します。
上図のように、webブラウザはまずwebサーバーに「HTMLを送ってくれ！」というGETリクエストというものを行います。それを受けて、webサーバーはHTMLをwebブラウザに送信します。そのあとに、webブラウザはHTMLを人間が分かりやすいのように変換します。そのような動作により、webサイトを閲覧することが可能となっています。

webサーバー

webサーバーはブラウザからコンテンツを送信するように要求があった際に、コンテンツをwebブラウザに送信する役割を担っています。

HTTP

webブラウザがwebサーバーにコンテンツを要求し、それにwebサーバーが応答するといったやり取りの手順と、そのメッセージの書式は世界共通になっています。このやり取りの手順をHTTP(Hyper Text Transfer Protocol)といいます。webブラウザやwebサーバーには様々なものがありますが、HTTPは全てに共通です。

URL

Uniform Resouce Locatorの略称で、どの手順で、どのサーバーに、何のコンテンツを取りにいくかが示されています。これをwebブラウザが解釈することで、webサーバーにgetリクエストを送ることができます。

静的ページと動的ページ

いつも同じコンテンツが示されるwebページを静的ページとよび、検索結果のように状況に応じて毎回異なる結果が表示されるwebページを動的ページと呼びます。

CGI

webブラウザからコンテンツを要求された際に、サーバー側でプログラムを起動してHTMLを作成する場合があります。このようにサーバーでプログラムを起動させる仕組みをCGIと呼びます。
サーバーサイドスクリプトにはpythonやPHP、Perlなどがあります。また、サーバーサイドスクリプトに対して、webブラウザにより実行されるプログラムであるクライアントサイドスクリプトが存在します。クライアントサイドスクリプトには、主にJavaScriptが用いられます。

プロトコル

ネットワークに繋がれた機器が相互にやり取りする際の約束事のことです。HTTP(Hyper Text Transfer Protocol)はその名前の通り、ハイパーテキストを送受信する際のプロトコル、という意味になります。

TCP/IP

TCP/IPとは(Transmission Control Protocol/Internet Protocol)の略称で、簡単にいうとインターネットの多くのサービスに用いられるプロトコルの集合体です。HTTPもTC/ICPの一部となっています。

IPアドレスとポート番号

IPアドレスとは、32ビットの数字の羅列で表されるインターネットの世界における住所のようなものです。グローバルIPアドレスとプライベートIPアドレスが存在し、グローバルIPアドレスはインターネット上におけるコンピューターを一意に決定する必要があるため、自由に変更することはできません。プライベートIPアドレスは、自宅や会社のLAN内での通信で利用されるものであり、同一LAN内でのみ一意である必要があります。
ポート番号は、IPアドレスをインターネット上の住所とした際の部屋番号のようなものであり、IPアドレスで指定したコンピューターのサービスの種類を決定できます。

ドメイン

IPアドレスは文字列の羅列であるため、IPアドレスの別名としてドメインが利用されます。例えば、Qiitaのドメインはqiita.comですよね。IPアドレスと同様に、インターネット上で一意である必要があります。

DNS

ドメインはIPアドレスの別名として用いられますが、webブラウザがサイトにアクセスする際にはIPアドレスが必要になります。例えば、Qiitaにアクセスする際にqiita.comというドメインが用いられますが、webブラウザはこのドメインを一度IPアドレスに変換する必要があります。このドメインをIPアドレスに変換する仕組みがDNS(Domein Name System)であり、DNSを行うサーバーをDNSサーバーと呼びます。このようにドメインとIPアドレスを紐づけることを名前解決といいます。

HTTPリクエストとHTTPレスポンス

webブラウザはwebサーバーにHTTPリクエストを送ることによってデータを要求します。HTTPリクエストは「リクエスト行」「メッセージヘッダー」「メッセージボディ」に分けることができます。HTTPレスポンスはwebサーバーからwebブラウザへのHTTPリクエストに対する返答であり、「ステータス行」「メッセージヘッダー」「メッセージボディ」に分けることができます。

HTTPS

HTTPSとはHTTP Over SSL/TLSの略称で、HTTPにおいて暗号化方式であるSSLやTLSを用いることで、安全にWebサイトが利用できます。簡単にいうと、安全なHTTPです。

ステートフルとステートレス

ステートフルとは、状態を保持するということであり、ステートレスとは状態を保持しないことです。HTTPはステートレスなプロトコルであり、webブラウザとwebサーバーの間の一連のやり取りの状態を保持することはできません。つまり、HTTPのみを用いる場合においては、一連の流れを必要とする作業はできません。

Cookie

HTTPSはステートレスなプロトコルであるため、ネットで買い物をするときなどに①商品をかごに入れ②レジに進み③注文を確定する、などといったことはできません。②でレジに進んだ状態で①の商品をかごに入れたことサーバーは忘れているため、かごの中が空になっています。しかし、ステートフルな通信をwebサーバーが行うとwebサーバーが一連の流れをすべて記録しなければならなくなるため、サーバーへの負担がとても大きなものになるます。これを防ぐ手段がCookieです。cookieにおいては①の商品をかごにいれたという情報をwebブラウザに送り、webブラウザはその情報を保存します。そして、次にwebサーバーとやり取りする際にcookieを送ることで、商品をかごに入れた状態で②レジに進むことができる、というわけです。

終わりに

今回はここまでになります。ここまで読んで下さりありがとうございました。もしよろしければ次回の記事も読んで頂けると幸いです。

　 Tweet
Qiitaで続きを読む

投稿日：2019-08-28T19:13:40+09:00

WEB関連の用語を分かりやすくまとめてみる

はじめに

web関連の用語を自分なりにまとめていきます。お付き合いいただければ幸いです。

webとは

Webとは、World Wide Webの略称で、頭文字をとってWWWと呼ばれることもあります。web上の文書はハイパーテキストと呼ばれる言語で書かれ、web同士がハイパーリンクと呼ばれるwebページの参照によりまるでクモの巣のように繋がっていることからそう呼ばれるそうです。

ユーザーインターフェースとAPI

コンピューターの機能とユーザーのやり取りを橋渡しする機能をユーザーインターフェースと呼びます。また、ソフトウェア同士のやり取りを橋渡しする機能をAPI（アプリケーションプログラミングインターフェース）と呼びます。

HTMLとXMLとXHTML

HTMLは（Hyper Text Markup Language)の略称で、web上の文書であるハイパーテキストを記述するためのマークアップ言語のひとつです。タグによって記述されます。HTMLは特にwebに特化した機能を持ちます。XMLは（Extensible Markup Language)の略称で、HTMLと同じマークアップ言語のひとつです。webに特化したHTMLに比べて、XMLは様々な用途に汎用的に利用されます。XHTMLは(Extensible Hyper Markup Language)の略称で、HTMLをXMLの文法で再定義したものになっています。

webブラウザ

safariやchromeなどがあります。主要な役割として、webサーバーから送られてきたHTMLを人間が見やすい形に変換します。
上図のように、webブラウザはまずwebサーバーに「HTMLを送ってくれ！」というGETリクエストというものを行います。それを受けて、webサーバーはHTMLをwebブラウザに送信します。そのあとに、webブラウザはHTMLを人間が分かりやすいのように変換します。そのような動作により、webサイトを閲覧することが可能となっています。

webサーバー

webサーバーはブラウザからコンテンツを送信するように要求があった際に、コンテンツをwebブラウザに送信する役割を担っています。

HTTP

webブラウザがwebサーバーにコンテンツを要求し、それにwebサーバーが応答するといったやり取りの手順と、そのメッセージの書式は世界共通になっています。このやり取りの手順をHTTP(Hyper Text Transfer Protocol)といいます。webブラウザやwebサーバーには様々なものがありますが、HTTPは全てに共通です。

URL

Uniform Resouce Locatorの略称で、どの手順で、どのサーバーに、何のコンテンツを取りにいくかが示されています。これをwebブラウザが解釈することで、webサーバーにgetリクエストを送ることができます。

静的ページと動的ページ

いつも同じコンテンツが示されるwebページを静的ページとよび、検索結果のように状況に応じて毎回異なる結果が表示されるwebページを動的ページと呼びます。

CGI

webブラウザからコンテンツを要求された際に、サーバー側でプログラムを起動してHTMLを作成する場合があります。このようにサーバーでプログラムを起動させる仕組みをCGIと呼びます。
サーバーサイドスクリプトにはpythonやPHP、Perlなどがあります。また、サーバーサイドスクリプトに対して、webブラウザにより実行されるプログラムであるクライアントサイドスクリプトが存在します。クライアントサイドスクリプトには、主にJavaScriptが用いられます。

プロトコル

ネットワークに繋がれた機器が相互にやり取りする際の約束事のことです。HTTP(Hyper Text Transfer Protocol)はその名前の通り、ハイパーテキストを送受信する際のプロトコル、という意味になります。

TCP/IP

TCP/IPとは(Transmission Control Protocol/Internet Protocol)の略称で、簡単にいうとインターネットの多くのサービスに用いられるプロトコルの集合体です。HTTPもTC/ICPの一部となっています。

IPアドレスとポート番号

IPアドレスとは、32ビットの数字の羅列で表されるインターネットの世界における住所のようなものです。グローバルIPアドレスとプライベートIPアドレスが存在し、グローバルIPアドレスはインターネット上におけるコンピューターを一意に決定する必要があるため、自由に変更することはできません。プライベートIPアドレスは、自宅や会社のLAN内での通信で利用されるものであり、同一LAN内でのみ一意である必要があります。
ポート番号は、IPアドレスをインターネット上の住所とした際の部屋番号のようなものであり、IPアドレスで指定したコンピューターのサービスの種類を決定できます。

ドメイン

IPアドレスは文字列の羅列であるため、IPアドレスの別名としてドメインが利用されます。例えば、Qiitaのドメインはqiita.comですよね。IPアドレスと同様に、インターネット上で一意である必要があります。

DNS

ドメインはIPアドレスの別名として用いられますが、webブラウザがサイトにアクセスする際にはIPアドレスが必要になります。例えば、Qiitaにアクセスする際にqiita.comというドメインが用いられますが、webブラウザはこのドメインを一度IPアドレスに変換する必要があります。このドメインをIPアドレスに変換する仕組みがDNS(Domein Name System)であり、DNSを行うサーバーをDNSサーバーと呼びます。このようにドメインとIPアドレスを紐づけることを名前解決といいます。

HTTPリクエストとHTTPレスポンス

webブラウザはwebサーバーにHTTPリクエストを送ることによってデータを要求します。HTTPリクエストは「リクエスト行」「メッセージヘッダー」「メッセージボディ」に分けることができます。HTTPレスポンスはwebサーバーからwebブラウザへのHTTPリクエストに対する返答であり、「ステータス行」「メッセージヘッダー」「メッセージボディ」に分けることができます。

HTTPS

HTTPSとはHTTP Over SSL/TLSの略称で、HTTPにおいて暗号化方式であるSSLやTLSを用いることで、安全にWebサイトが利用できます。簡単にいうと、安全なHTTPです。

ステートフルとステートレス

ステートフルとは、状態を保持するということであり、ステートレスとは状態を保持しないことです。HTTPはステートレスなプロトコルであり、webブラウザとwebサーバーの間の一連のやり取りの状態を保持することはできません。つまり、HTTPのみを用いる場合においては、一連の流れを必要とする作業はできません。

Cookie

HTTPSはステートレスなプロトコルであるため、ネットで買い物をするときなどに①商品をかごに入れ②レジに進み③注文を確定する、などといったことはできません。②でレジに進んだ状態で①の商品をかごに入れたことサーバーは忘れているため、かごの中が空になっています。しかし、ステートフルな通信をwebサーバーが行うとwebサーバーが一連の流れをすべて記録しなければならなくなるため、サーバーへの負担がとても大きなものになるます。これを防ぐ手段がCookieです。cookieにおいては①の商品をかごにいれたという情報をwebブラウザに送り、webブラウザはその情報を保存します。そして、次にwebサーバーとやり取りする際にcookieを送ることで、商品をかごに入れた状態で②レジに進むことができる、というわけです。

終わりに

今回はここまでになります。ここまで読んで下さりありがとうございました。

　 Tweet
Qiitaで続きを読む

投稿日：2019-08-28T14:38:55+09:00

HTML Metadata Scrapping by URLitor

HTML Metadata Scrapping with URLitor

The tool can scrape a maximum of 100 URLs per time and accepts up to 10 xPath expressions. xPath is a language for finding information in an XML document. xPath uses expressions to select nodes or node-sets in an XML document.

Scrapping procedure is given below:

STEP 1:

Access to the URLitor
Click on "ADD HTML ELEMENT" button to add your desired meta tags you want to scrap.
Meta Tag examples: Page Title, Meta Description, Meta Keywords, Canonical Tag, etc.

STEP 2:

Enter the website URLs separated by Line Feed (Enter) and click on submit to scrap.
Example:
https://www.w3schools.com/html/
https://www.w3schools.com/css/

STEP 3:

You will see the extracted Metadata in a table added to the bottom of the page.
Now you can download extracted Metadata by clicking on "Download CSV".

　 Tweet
Qiitaで続きを読む

20190828のHTMLに関する記事は4件です。

xampp + VScode でWebサービス開発環境構築

はじめに

導入環境

概要

手順

VScode

インストール

VScodeの拡張機能のインストール

xampp

パス

動作確認

注意

最後に

WEB関連の用語を分かりやすくまとめてみる①

はじめに

webとは

ユーザーインターフェースとAPI

HTMLとXMLとXHTML

webブラウザ

webサーバー

HTTP

URL

静的ページと動的ページ

CGI

プロトコル

TCP/IP

IPアドレスとポート番号

ドメイン

DNS

HTTPリクエストとHTTPレスポンス

HTTPS

ステートフルとステートレス

Cookie

終わりに

WEB関連の用語を分かりやすくまとめてみる

はじめに

webとは

ユーザーインターフェースとAPI

HTMLとXMLとXHTML

webブラウザ

webサーバー

HTTP

URL

静的ページと動的ページ

CGI

プロトコル

TCP/IP

IPアドレスとポート番号

ドメイン

DNS

HTTPリクエストとHTTPレスポンス

HTTPS

ステートフルとステートレス

Cookie

終わりに

HTML Metadata Scrapping by URLitor

HTML Metadata Scrapping with URLitor

STEP 1:

STEP 2:

STEP 3:

日付別

タグ一覧