BootStrapのGridLayout
- GridLayoutとは??
- 今回使用したBootStrapのGridLayoutのクラス説明
- Bootstrap、GridLayoutのレスポンシブ対応
- Bootstrap、GridLayoutの特徴
- ハンズオン
- 参考サイト
GridLayoutとは??
- Grid・・・格子状のもの、方眼紙。
- Layout・・・何をどこに配置するかの割り付けのこと。
- GridLayoutは格子状のものに、例えばボタンやデザインを配置することを言います。
今回使用したBootStrapのGridLayoutのクラス説明
名前 | 説明 |
---|---|
container | Gridコンテナを作成。横幅が固定となるため、余白が生まれる。 |
container-fluid | Gridコンテナを作成。横幅が可変となるため余白なし。 |
row | 行 |
col | 列 |
col-offset-1 | 1Grid分のスペースを空ける。 |
Bootstrap、GridLayoutのレスポンシブ対応
ブラウザ、タブレット、スマホなどの画面の大きさごとにレスポンシブ対応がされるようになっています。
各ブレークポイント(画面のサイズ)ごとのcontainerとcontainer-fluidの違い。
fluidの場合はwidth100%が指定されるため余白なしで流動的に変化していきます。
getbootstrap.jp
Bootstrap、GridLayoutの特徴
- 基本は横幅を12分割。
- レスポンシブ対応
ハンズオン
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <title>Document</title> </head> <body> <!-- 固定幅 --> <div class="container"> <div class="row"> <div class="col-2 bg-success">layout2</div> <div class="col-2 bg-danger">layout2</div> <div class="col-2 bg-success">layout2</div> <div class="col-2 bg-danger">layout2</div> <div class="col-2 bg-success">layout2</div> <div class="col-2 bg-danger">layout2</div> </div> </div> <!-- 可変幅 --> <div class="container-fluid"> <div class="row"> <div class="col-2 bg-success">layout2</div> <div class="col-2 bg-danger">layout2</div> <div class="col-2 bg-success">layout2</div> <div class="col-2 bg-danger">layout2</div> <div class="col-2 bg-success">layout2</div> <div class="col-2 bg-danger">layout2</div> </div> </div> <!-- 2分割分のスペース。 --> <div class="container"> <div class="row"> <div class="col-2 bg-success">layout2</div> <div class="col-2 offset-2 bg-danger">layout2</div> <div class="col-2 bg-success">layout2</div> <div class="col-2 bg-danger">layout2</div> <div class="col-2 bg-success">layout2</div> <div class="col-2 bg-danger">layout2</div> </div> </div> <!-- 2分割を12分割 --> <div class="container"> <div class="row"> <div class="col-2 bg-success"> <div class="row"> <div class="col-2 bg-success">layout2</div> <div class="col-2 bg-danger">layout2</div> <div class="col-2 bg-success">layout2</div> <div class="col-2 bg-danger">layout2</div> <div class="col-2 bg-success">layout2</div> <div class="col-2 bg-danger">layout2</div> </div> </div> <div class="col-2 bg-danger">layout2</div> <div class="col-2 bg-success">layout2</div> <div class="col-2 bg-danger">layout2</div> <div class="col-2 bg-success">layout2</div> <div class="col-2 bg-danger">layout2</div> </div> </div> </body> </html>
一番最後は応用で、2分割した列をさらに12分割しています。
Gridの分割数によっては独自のCssを定義してあげないと実装できない場合もある。
参考サイト
Layout saruwakakun.com GridLayout ferret-plus.com
勉強会⑲
Hands-on and Lightning Talks
開催日時 2021年5月1日(土) 7:00-9:00
本日の発表者は私と、koboriさんとNakagawaさんの3人!
発表者 | テーマ | 資料 | 時間 |
---|---|---|---|
Nakagawa | seed.rbの話 | 5分 | |
Toku | Node.jsでhttpメソッド② PUTとDELETE | 発表用資料 | 25分 |
Kobori | 一緒にフロント画面をスタイリングしてみましょう! | 1時間 |
各テーマの感想
Railsのseedの話
DBへのデータ投入時に使用できる。
Rubyを使ったスクリプトファイルに書ける。
Node.jsでhttpメソッド② PUTとDELETE
XMLHttpRequestを使用。
HTTPメソッドのPUTとDELETEを検証ツールで確認。
一緒にフロント画面をスタイリングしてみましょう!
Boostrap DL
getbootstrap.jp
CDNで読み込んだ後、スタイリングのハンズオン。
ドキュメントが充実している。
フォーム、ボタン、ドロップダウンも簡単に作れる。
Node.jsでhttpメソッド② PUTとDELETE
前回の続きです。
HTMLのinputタグはPUTとDELETEをサポートしていないため、 XMLHttpRequest を使用します。 https://getbootstrap.jp/
XMLHttpRequestについて
今回はDELETEとPUTメソッドが実際にサーバー側に送信ができているかの
確認のみ行いたいと思います。Google Chromeの検証ツール、Networkを使用。
POSTとPUTとPUTCHの違い
POST
リソースの作成、送信を行う。
PUT
PUTは更新対象のリソースが無い場合は新しく作成する。
更新対象のリソースが存在する場合はすべて置換(更新)を行う。
何度リクエストを繰り返しても同じ結果となる特徴を持っている。
PUTCH
PUTCHは部分的な置換(更新)を行う。
どのような置換(更新)を行うかの選択ができる。
PUTとDELETEのハンズオン
index.js
const http = require('http'); const fs = require('fs'); const hostname = "127.0.0.1"; const port = 3000; const indexhtml = fs.readFileSync('./index.html', 'utf-8'); const sendjs = fs.readFileSync('./send.js', 'utf-8'); const server = http.createServer(function (request, response) { switch (request.url) { case "/": response.end(indexhtml); break; case "/?get=getValue": response.end(indexhtml); break; case "/user": response.end(indexhtml); break; case "/send.js": response.end(sendjs); break; case "/delete": response.end(indexhtml); break; case "/put": response.end(indexhtml); break; default: break; } }); server.listen(port, hostname, () => { console.log(`Server running at http://${hostname}:${port}/`); });
send.js
var sendDeleteMethod = document.getElementById('sendDeleteMethod'); sendDeleteMethod.addEventListener('click', function () { var request = new XMLHttpRequest(); request.open("DELETE", "/delete", true); request.send("delete"); }); var sendPutMethod = document.getElementById('sendPutMethod'); sendPutMethod.addEventListener('click', function () { var request = new XMLHttpRequest(); request.open("PUT", "/put", true); request.send("put"); });
new XMLHttpRequest()で生成。
openでメソッドとURLと真偽値で非同期か同期を選択。
sendでサーバー側に送信します。
Deleteボタン押下時はDELETEメソッドを生成後にサーバーへ送信。
Putボタン押下時はPUTメソッドを生成後にサーバーへ送信。
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="/" method="GET"> <input name="get" value="getValue"> <input type="submit" value="GET送信" /> </form> <form action="/user" method="POST"> <input name="post" value="postValue"> <input type="submit" value="POST送信" /> <input type="hidden" name="_method" value="put / delete"> </form> <button id="sendDeleteMethod">delete</button> <button id="sendPutMethod">put</button> <script type="text/javascript" src="./send.js"></script> </body> </html>
値の更新や、削除は次回行う予定。
参考サイト
XMLHttpRequest XMLHttpRequest についてのメモ - Qiita
POST、PUT、PUTCHの違い architecting.hateblo.jp
勉強会⑱
Hands-on and Lightning Talks
開催日時 2021年4月29日(木) 7:00-9:00
本日の発表者は私と、koboriさんとNakagawaさんの3人!
発表者 | テーマ | 資料 | 時間 |
---|---|---|---|
Toku | サーバーとは?Node.jsで立ててみる。 | 発表用資料 | 25分 |
Nakagawa | チーム開発振り返り | 5分 | |
Kobori | dockerでアプリケーションサーバーを起動させる | 20分 |
各テーマの感想
サーバーとは?Node.jsで立ててみる。
GETとPOSTを実装。
DELETEとPUTに関しては後日実装予定。
サーバー間のやりとりについて復習したい。
チーム開発振り返り
1週間の振り返り。
学習コストについて考慮していない。
タスクの粒度が細分化されていない。
その結果、スケジュールが大幅に遅れてしまった。
dockerでアプリケーションサーバーを起動させる
アプリケーションサーバーは問題ないが、DBサーバーを立ち上げるときにエラーとなっていた。
解決方法。
knowledge.sakura.ad.jp
リモートとローカルのストレージがマウンティングしていなかった??
Node.jsでhttpメソッド① GETとPOST
HTTPメソッドとは?
クライアントからサーバーに対して送られる要求のこと。
HTTPメソッドでサーバーに何をしてほしいかを伝えることができる。
メソッドの種類
MDNによると全部で9種類。
developer.mozilla.org
今回は代表的な4つのメソッドについて調べました。
GET、POST、PUT、DELETEこれらの4つのメソッドで
データ操作するうえで基本となるCRUDの性質を満たしています。
まずは4つのメソッドを学んでいきましょう。
メソッド名 | CRUD | 説明 |
---|---|---|
GET | READ | 読み込み |
POST | CREATE | 作成 |
PUT | UPDATE | 更新 |
DELETE | DELETE | 削除 |
GETとPOSTのハンズオン
index.js
const http = require('http'); const fs = require('fs'); const hostname = "127.0.0.1"; const port = 3000; const server = http.createServer(function (request, response) { fs.readFile('./index.html', 'utf-8', readIndex); function readIndex(error, data) { console.log(request.method); console.log(request.url); response.end(data); } }); server.listen(port, hostname, () => { console.log(`Server running at http://${hostname}:${port}/`); });
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="/" method="GET"> <input name="get" value="getValue"> <input type="submit" value="GET送信" /> </form> <form action="/" method="POST"> <input name="post" value="postValue"> <input type="submit" value="POST送信" /> </form> </body> </html>
inputボタンを押下時に、サーバー側に送られたRequestを
検証ツールとログに確認を行う。
HTMLのinputタグは、GETとPOSTのみサポートしているため、DELETEとPUTは別の方法を考えたい。
勉強会⑰
Hands-on and Lightning Talks
開催日時 2021年4月24日(土) 7:00-9:00
本日の発表者は私と、koboriさんとNakagawaさんの3人!
発表者 | テーマ | 資料 | 時間 |
---|---|---|---|
Toku | サーバーとは?Node.jsで立ててみる。 | 資料 | 25分 |
Kobori | kintone のJavaScriptカスタマイズをプラグイン化したお話 | 資料 | 20分 |
Nakagawa | 初めてのレビュー | 5分 |
各テーマの感想
kintone のJavaScriptカスタマイズをプラグイン化したお話
- 内容はテーブルにレコードを作成する時の自動化プラグインを作ってみた話。
- マニフェストファイルに設定を記述してnpmからpackage化するモジュールをinstallして、プラグインを作成していく。
- 渡すデータはJSON形式で記述することが多いため、pushではなく、mergeを利用すると良い。
Object.assign()
サーバーとは?Node.jsで立ててみる。
- サーバーって何?
- Node.jsでWEBサーバーを立てる際の動きの確認。
- requestとresponseで何をしているか?
- httpプロトコルの役割等。
初めてのレビュー
- GitHubでのレビューの仕方
- ツールの使い方や、観点など。
- 最終的には褒めることが大事。否定的にならない。
サーバーとは?Node.jsで立ててみる。
サーバーとは?
サーバーはクライアントからの要求(リクエスト)に応じて、何らかのサービス(処理)を提供する側の機能あるいはシステムである。
ja.wikipedia.org
サーバーについて調べて満たしたが、かなり抽象的な言葉だと感じました。
リクエストとレスポンスの話をよく聞きますが、リクエストに対してレスポンス(データを提供)していればコンピューターだけではなくプログラムもサーバーになりうる??
さらに分類していくと、物理サーバーと仮想サーバーに分けられる。
物理サーバー とは?
物理サーバーとは物理的に存在する1台のサーバーのこと。
ハードウェア上で、原則1つのOSを利用する。
仮想サーバー とは?
仮想サーバーとは1台の物理サーバー上で、専用のソフトウェアを使い、複数の仮想的なサーバーを構築すること。
CPUやメモリは物理サーバーのリソースを利用する。分割することで複数のOSと複数のサーバーを動作させることが可能。
サーバーの用途
提供するサービスはサーバーの種類によって異なり、WEBサーバー、メールサーバー、FTPサーバー、DBサーバー、SSHサーバー等がある。
今回はWEBサーバーについてふれていきたい。
WEBサーバーとは?
サーバーの種類の一つで、クライアント(ブラウザ)側からの要求(リクエスト)に対して、文書や画像などをの表示を提供するサーバーのこと。
特徴
- クライアントとサーバーがやり取りを行う際にHTTPという通信プロトコル(ルール)を使用する。
- プロトコル(通信の決まり事)があることで、異なる機器同士のデータ交換を可能としている。
- HTTP(プロトコル)は主にhtmlなどのファイルを送信、受信する際に使う。
Node.jsでWEBサーバーを立ててみる
公式ページのサンプルを参考にしました。
nodejs.org
ハンズオン①
WEBサーバーを立てていきます。
// httpモジュール const http = require('http'); // port番号 const port = 3000; // hostname const hostname = '127.0.0.1' // サーバーを建てる var server = http.createServer(function (request, response) { // requestURLの確認 console.log(request.url); // requestが正常に終了したかの確認 console.log(response.statusCode); // 表示 response.end('hello'); }); // portとipを設定 server.listen(port, hostname, () => { console.log(`Server running at http://${hostname}:${port}/`); });
ハンズオン①の結果を見てみる。
ブラウザを立ち上げてURL欄にhttp://127.0.0.1:3000/
を打ち込む。
ちなみに打ち込むURLの説明をすると、httpの部分が通信プロトコル。
127.0.0.1の部分がローカル・ループバック・アドレスと呼ばれ、自分自身のこと。
3000の部分がport番号となります。
request.url
の部分でurl欄に入れたクエリが表示される。
http://127.0.0.1:3000/
の場合だと/
が表示される
response.statusCode
でrequestが成功したことがわかる。(成功レスポンスの200が表示される。
response.end('hello')
ここで文字列をブラウザ側に提供していることがわかる。
ハンズオン②
次はcontentTypeとstatusCodeを指定してみる。
// httpモジュール const http = require('http'); var fs = require('fs'); // port番号 const port = 3000; // hostname const hostname = '127.0.0.1' // サーバーを立てる var server = http.createServer(function (request, response) { // File読込 fs.readFile('./cat.png', function (err, data) { // statusとcontentTypeを指定 response.writeHead(200, { 'Content-Type': 'image/png' }); // 送信後、終了 response.end(data); } ); }) // portとipを設定 server.listen(port, hostname, () => { console.log(`Server running at http://${hostname}:${port}/`); });
ハンズオン②の結果を見てみる。
fs.readFile('./cat.png',
にてcat.pngファイル(画像)を読み込んでいます。
response.writeHead(200, { 'Content-Type': 'image/png' });
この箇所でステータスコード200(成功)とContent-Typeを指定してみました。
ブラウザ側に返された情報がどんなものなのかをContent-Typeで伝えています。
参考サイト
httpについて
プロトコル
通信プロトコルのHTTPとは何かわかりやすく解説します! | 押さえておきたいWeb知識