ネットの基礎 ドメイン名：IPネットワークでそれぞれのコンピュータを識別する名称 IP：インターネットの通信の約束事 IPアドレス：IPネットワークに接続された機器を識別するための番号 DNS:ドメインとIPアドレスを紐付ける仕組み インターネット上のコンピュータ同士が接続するとき→IPアドレス(192.168.1.1) 人間が使うとき→ドメイン →www.google.co.jp フロントエンドの三大要素 HTML 文書構造を記述 Webページの内容を記述するためのマークアップ言語(タグで意味付けをすること) CSS 文字のサイズ、色、レイアウトなどを指定できる。 HTMLで書かれた構造化された文章のスタイルを指定するための言語 JavaScript Webサイトの振る舞いを記述（クライアント側での動き） Javaと全然違う フロントエンド？バックエンド？ フロントエンドエンド ユーザーが見て、操作する部分 ブラウザで動作するもの -HTML, CSS, JavaScriptで記述 バックエンド サーバー側で処理が行われるもの DBアクセス、ファイルへのアクセス、計算など Rubyなどで記述 フロントエンド→インターネット→バックエンドってイメージ 静的なページ？動的なページ？ 静的なページ Webサーバー上に置かれたHTMLファイルをブラウザで表示するだけ。 動的なページ アクセスするたびに、表示する内容が変わる可能性のあるページ ユーザーによて表示を書き換えたりする。 Ex: ツイッター（アクセスするたびに表示が変わる）
インターネット上のコンピュータ同士が接続するとき→IPアドレス(192.168.1.1) 人間が使うとき→ドメイン →www.google.co.jp
フロントエンド→インターネット→バックエンドってイメージ
ネットの基礎 ドメイン名：IPネットワークでそれぞれのコンピュータを識別する名称 IP：インターネットの通信の約束事 IPアドレス：IPネットワークに接続された機器を識別するための番号 DNS:ドメインとIPアドレスを紐付ける仕組み インターネット上のコンピュータ同士が接続するとき→IPアドレス(192.168.1.1) 人間が使うとき→ドメイン →www.google.co.jp フロントエンドの三大要素 HTML 文書構造を記述 Webページの内容を記述するためのマークアップ言語(タグで意味付けをすること) CSS 文字のサイズ、色、レイアウトなどを指定できる。 HTMLで書かれた構造化された文章のスタイルを指定するための言語 JavaScript Webサイトの振る舞いを記述（クライアント側での動き） Javaと全然違う フロントエンド？バックエンド？ フロントエンドエンド ユーザーが見て、操作する部分 ブラウザで動作するもの -HTML, CSS, JavaScriptで記述 バックエンド サーバー側で処理が行われるもの DBアクセス、ファイルへのアクセス、計算など Rubyなどで記述 フロントエンド→インターネット→バックエンドってイメージ 静的なページ？動的なページ？ 静的なページ Webサーバー上に置かれたHTMLファイルをブラウザで表示するだけ。 動的なページ アクセスするたびに、表示する内容が変わる可能性のあるページ ユーザーによて表示を書き換えたりする。 Ex: ツイッター（アクセスするたびに表示が変わる） HTML 基本構文 <タグ名>コンテンツ</タグ名> ← 要素 MDN ウェブ開発に関する技術が公開されてるらしい。 「MDN キーワード」でググればだいたいいいのが出るみたい。MDN html p みたいな。 HTML文書の基本構造 DOCTYPE宣言・・・使用するHTMLの種類を宣言(HTML5など) html要素 head要素 文書タイトル、文書コード、説明文など。文書の基本情報。ブラウドには表示されない。 body要素 ブラウザに表示される内容。ユーザーに見える。 基本構造 <! DOGTYPE html> <html lang="ja"> <head> <title>はじめてのHTML</title> ブラウザのタブに表示される名前 </head> <body> <h1>はじめてのhtml見出し</h1> </body> </html> 基本タグ <h1> ~ <h6> <title> 検索タイトル、ブラウザタグ <p> 段落 <br>改行 <strong> 強調。boldかな？ <i> イタリック 参照を表す <em> イタリック 強調
<タグ名>コンテンツ</タグ名> ← 要素
ウェブ開発に関する技術が公開されてるらしい。 「MDN キーワード」でググればだいたいいいのが出るみたい。MDN html p みたいな。
<! DOGTYPE html> <html lang="ja"> <head> <title>はじめてのHTML</title> ブラウザのタブに表示される名前 </head> <body> <h1>はじめてのhtml見出し</h1> </body> </html>
<h1> ~ <h6>
<title>
<p>
<br>
<strong>
<i>
<em>
GoでHttpサーバと簡単なCGIプログラム go言語でhttpサーバと簡易CGI動作確認用プログラムを作ります。 実行ファイル直下にhtmlフォルダを作成して、index.html以外の適当なHTMLファイルを作成してください。 httptest.go package main import ( "fmt" "net/http" ) func cgiRun(w http.ResponseWriter, r *http.Request) { tmp := r.URL.RawQuery fmt.Fprintf(w, "%s", tmp) } func main() { http.HandleFunc("/cgi", cgiRun) http.HandleFunc("/html/", func(w http.ResponseWriter, r *http.Request) { //html/にアクセスしてindex.htmlが存在しないとき http.ServeFile(w, r, r.URL.Path[1:]) }) http.ListenAndServe(":8080", nil) } http://localhost:8080/cgi?a=aa&b=bb にアクセスするとa=aa&b=bbが表示されます。 http://localhost:8080/html にアクセスするとhtmlフォルダ内のファイルリストが表示されます。 cgiRunの関数部分を改造すれば、簡単なCGIが組めそう
go言語でhttpサーバと簡易CGI動作確認用プログラムを作ります。 実行ファイル直下にhtmlフォルダを作成して、index.html以外の適当なHTMLファイルを作成してください。
package main import ( "fmt" "net/http" ) func cgiRun(w http.ResponseWriter, r *http.Request) { tmp := r.URL.RawQuery fmt.Fprintf(w, "%s", tmp) } func main() { http.HandleFunc("/cgi", cgiRun) http.HandleFunc("/html/", func(w http.ResponseWriter, r *http.Request) { //html/にアクセスしてindex.htmlが存在しないとき http.ServeFile(w, r, r.URL.Path[1:]) }) http.ListenAndServe(":8080", nil) }
http://localhost:8080/cgi?a=aa&b=bb にアクセスするとa=aa&b=bbが表示されます。 http://localhost:8080/html にアクセスするとhtmlフォルダ内のファイルリストが表示されます。 cgiRunの関数部分を改造すれば、簡単なCGIが組めそう
きっかけ 求人をみてるとよく、レスポンシブ対応ができる人〜とあり 「あ、レスポンシブはやっとかないといけない項目だ！」と思って ポートフォリオで使うことにしました。 いつもSassを使っているので今回も使っていきます！ （Sassって関数が使えるのを今回知りました〜） 導入と使い方 HTMLにviewportを記載する 参考サイト もう逃げない。HTMLのviewportをちゃんと理解する 時間ができたら細かく噛み砕いてここに追記します。 メディアクエリをかく 今回はスマホ、タブレット、PCに対応させます。 参考サイト SCSSの基本的な書き方 この、メディアクエリの部分を参考に書きました。 優先させたい画面サイズがもしスマホサイズなら、 スマホ対応メディアクエリから書いていき、最後にPCサイズのメディアクエリ のように順番が変わるようです。 レスポンシブ対応した見た目を確認するときはChromeのデベロッパーツールで確認できます。 おわり 今回の記事はほぼ参考サイトを書くだけになってしまいました... CSSは書くより見た目を考える方のが時間かかっちゃう気がします>< 関係ないですが、スマホ対応について色々調べてたら PWAなるものがあるらしく、やってみたいな〜って思いました。 PWAに興味を持っている人向けに概要とか動向とかをまとめた
求人をみてるとよく、レスポンシブ対応ができる人〜とあり 「あ、レスポンシブはやっとかないといけない項目だ！」と思って ポートフォリオで使うことにしました。
いつもSassを使っているので今回も使っていきます！ （Sassって関数が使えるのを今回知りました〜）
参考サイト もう逃げない。HTMLのviewportをちゃんと理解する 時間ができたら細かく噛み砕いてここに追記します。
今回はスマホ、タブレット、PCに対応させます。
参考サイト SCSSの基本的な書き方 この、メディアクエリの部分を参考に書きました。
優先させたい画面サイズがもしスマホサイズなら、 スマホ対応メディアクエリから書いていき、最後にPCサイズのメディアクエリ のように順番が変わるようです。
レスポンシブ対応した見た目を確認するときはChromeのデベロッパーツールで確認できます。
今回の記事はほぼ参考サイトを書くだけになってしまいました... CSSは書くより見た目を考える方のが時間かかっちゃう気がします><
関係ないですが、スマホ対応について色々調べてたら PWAなるものがあるらしく、やってみたいな〜って思いました。 PWAに興味を持っている人向けに概要とか動向とかをまとめた
概要 ボタンを押すとAPIを通じて、GitHubのユーザーが一覧表示されます。 環境 MacOS Mojave xamppをインストール&起動している前提で記述します。 ディレクトリ構成 htdocs ├── ajax.html HTMLの雛形 下記ファイルをhtdocsへ配置します。 ajax.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Ajax - External API</title> </head> <body> <!-- buttonタグの設置 --> <button id="button">GitHubのユーザー読み込み</button> <br><br> <h1>GitHub Users</h1> <div id="users"></div> </body> </html> APIの取得 認証等が特に必要ない下記URLから取得します。 https://api.github.com/users Ajaxの記述 URLからAPIを取得する ajax.html <body> <button id="button">GitHubのユーザー読み込み</button> <br><br> <h1>GitHub Users</h1> <div id="users"></div> <script> // Ajax処理記述 document.getElementById('button').addEventListener('click', loadUsers); // APIを読み込む function loadUsers(){ var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.github.com/users', true); xhr.onload = function(){ if(this.status == 200){ // JSONを変数に格納できる形に変更する var users = JSON.parse(this.responseText); } } xhr.send(); } </script> 取得した情報をHTMLに表示させる ajax.html <script> // Ajax処理記述 document.getElementById('button').addEventListener('click', loadUsers); // APIを読み込む function loadUsers(){ var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.github.com/users', true); xhr.onload = function(){ if(this.status == 200){ // JSONを変数に格納できる形に変更する var users = JSON.parse(this.responseText); // for文でuser情報を一つずつ抜き出す var output = ''; for(var i in users){ output += '<div class="user">' + '<img src="'+users[i].avatar_url+'" width="70" height="70">' + '<ul>' + '<li>ID: '+users[i].id+'</li>' + '<li>ID: '+users[i].login+'</li>' + '</ul>' + '</div>'; } // HTMLに抜き出した情報を表示させる document.getElementById('users').innerHTML = output; } } xhr.send(); } </script> この状態で、localhost/ajax.htmlにアクセス→ボタンを押すと、ユーザ一覧が表示されます。 見た目を良くする 見た目が寂しいので、cssを記述します。 ajax.html <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Ajax - External API</title> <!-- cssの記述 --> <style> .user{ display: flex; background: #f4f4f4; padding: 10px; margin-bottom: 10px; } .user ul{ list-style: none; } </style> 完成 最終的なコードは下記のとおり ajax.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Ajax - External API</title> <!-- cssの記述 --> <style> .user{ display: flex; background: #f4f4f4; padding: 10px; margin-bottom: 10px; } .user ul{ list-style: none; } </style> </head> <body> <button id="button">GitHubのユーザー読み込み</button> <br><br> <h1>GitHub Users</h1> <div id="users"></div> <script> // Ajax処理記述 document.getElementById('button').addEventListener('click', loadUsers); // APIを読み込む function loadUsers(){ var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.github.com/users', true); xhr.onload = function(){ if(this.status == 200){ // JSONを変数に格納できる形に変更する var users = JSON.parse(this.responseText); // for文でuser情報を一つずつ抜き出す var output = ''; for(var i in users){ output += '<div class="user">' + '<img src="'+users[i].avatar_url+'" width="70" height="70">' + '<ul>' + '<li>ID: '+users[i].id+'</li>' + '<li>ID: '+users[i].login+'</li>' + '</ul>' + '</div>'; } // HTMLに抜き出した情報を表示させる document.getElementById('users').innerHTML = output; } } xhr.send(); } </script> </body> </html> 参照元 AJAX Crash Course (Vanilla JavaScript)
ボタンを押すとAPIを通じて、GitHubのユーザーが一覧表示されます。
MacOS Mojave xamppをインストール&起動している前提で記述します。
xampp
htdocs ├── ajax.html
下記ファイルをhtdocsへ配置します。
htdocs
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Ajax - External API</title> </head> <body> <!-- buttonタグの設置 --> <button id="button">GitHubのユーザー読み込み</button> <br><br> <h1>GitHub Users</h1> <div id="users"></div> </body> </html>
認証等が特に必要ない下記URLから取得します。 https://api.github.com/users
<body> <button id="button">GitHubのユーザー読み込み</button> <br><br> <h1>GitHub Users</h1> <div id="users"></div> <script> // Ajax処理記述 document.getElementById('button').addEventListener('click', loadUsers); // APIを読み込む function loadUsers(){ var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.github.com/users', true); xhr.onload = function(){ if(this.status == 200){ // JSONを変数に格納できる形に変更する var users = JSON.parse(this.responseText); } } xhr.send(); } </script>
<script> // Ajax処理記述 document.getElementById('button').addEventListener('click', loadUsers); // APIを読み込む function loadUsers(){ var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.github.com/users', true); xhr.onload = function(){ if(this.status == 200){ // JSONを変数に格納できる形に変更する var users = JSON.parse(this.responseText); // for文でuser情報を一つずつ抜き出す var output = ''; for(var i in users){ output += '<div class="user">' + '<img src="'+users[i].avatar_url+'" width="70" height="70">' + '<ul>' + '<li>ID: '+users[i].id+'</li>' + '<li>ID: '+users[i].login+'</li>' + '</ul>' + '</div>'; } // HTMLに抜き出した情報を表示させる document.getElementById('users').innerHTML = output; } } xhr.send(); } </script>
この状態で、localhost/ajax.htmlにアクセス→ボタンを押すと、ユーザ一覧が表示されます。
localhost/ajax.html
見た目が寂しいので、cssを記述します。
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Ajax - External API</title> <!-- cssの記述 --> <style> .user{ display: flex; background: #f4f4f4; padding: 10px; margin-bottom: 10px; } .user ul{ list-style: none; } </style>
最終的なコードは下記のとおり
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Ajax - External API</title> <!-- cssの記述 --> <style> .user{ display: flex; background: #f4f4f4; padding: 10px; margin-bottom: 10px; } .user ul{ list-style: none; } </style> </head> <body> <button id="button">GitHubのユーザー読み込み</button> <br><br> <h1>GitHub Users</h1> <div id="users"></div> <script> // Ajax処理記述 document.getElementById('button').addEventListener('click', loadUsers); // APIを読み込む function loadUsers(){ var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.github.com/users', true); xhr.onload = function(){ if(this.status == 200){ // JSONを変数に格納できる形に変更する var users = JSON.parse(this.responseText); // for文でuser情報を一つずつ抜き出す var output = ''; for(var i in users){ output += '<div class="user">' + '<img src="'+users[i].avatar_url+'" width="70" height="70">' + '<ul>' + '<li>ID: '+users[i].id+'</li>' + '<li>ID: '+users[i].login+'</li>' + '</ul>' + '</div>'; } // HTMLに抜き出した情報を表示させる document.getElementById('users').innerHTML = output; } } xhr.send(); } </script> </body> </html>
AJAX Crash Course (Vanilla JavaScript)
