白笹山と南月山 in 那須
先週はわたらせ渓谷に行きました
白笹山
11月も2週目になり、紅葉もだんだん終わりに近づいてきました。でも今日は暖かいです。
ちょっと辛い場所は熊笹地獄。
１箇所だけだけど土のある所を踏むと熊笹の根を踏んでどんどん土のないところへ滑っていく・・・しかも戻ろうとすると熊笹の根が足に引っかかって足が上がらないという残念な状態。
南月山
来週は伊豆半島で登山です！
わたらせ渓谷駅ハイと美登里湯
先週はよく歩きました。
先週の4連休は、ずっと歩き続けたので今週末はかるぅく行くことにしました。
紅葉映えるわたらせ渓谷散策と御朱印めぐり
紅葉の渓谷を行くハイキングで、今日は紅葉狩りといきます。
御朱印集めはしていないけれど、神社やお寺を見るのは楽しいです。
ここから、高津戸峡遊歩道にはいって渓谷沿いを歩きました。
先週秩父に行った時は、あとちょっとだった紅葉が最好調に色づいていました。
ひたすら県道沿いを歩きます。道路沿いは歩きにくいけれど秋の山々をみながら歩けるのはいいです。
貴船神社でおトイレを借りたら、横にご飯屋さん的なところへの矢印があった。
朝ごはんを食べ損ねてめっちゃ腹減りだったので早速行ってみたら、なかなか面白いところだった。
でっかい酒樽がたくさん並ぶ庭のある・・・と思ったら全部個室だった。
ご飯を食べ終わったら、猫がやってきて遊んでくれた。素敵なところだった。
スタート地点にもどって駅ハイ終了。
足立区美登利湯
りょうもう何とか号に乗って到着した北千住駅から学園通りを突き当たるまで歩いて横に曲がるとすぐにある美登利湯。
去年の台風19号で煙突がなくなってしまったらしい、残念。
少々熱めのお湯、ちょっと我慢して入っていると慣れてきていい湯になる。
来週は那須へ行って登山です。
ネイチャーミュージアム！天空の石切り場を廻る鋸山絶景ハイキング
昨日はあるきたをしました。
ネイチャーミュージアム！天空の石切り場を廻る鋸山絶景ハイキング
来週は、わたらせ渓谷で駅ハイです。
あるきたとテルメ末広
昨日は駅ハイと銭湯巡り
あるきた
お天気がいまいちなので朝から家でだらだらして、昼前からあるきた始めした。
王子豊島コース
豊島馬場遺跡公園、毎年来るけど何の遺跡か知りません。
自分が生きてないくらい昔にいまいち興味が持てません。
はじめて入るお蕎麦屋さん、喉ごし味値段、バッチリです！
赤羽岩淵コース
豊島からとぼとぼ荒川までやって来ました。
何と、荒川知水資料館が予約制になっておりました。
この辺に来る時は、おトイレを借りたりジュース買ったりしていたのに、入ることができない。
来る時期が遅すぎたのか、去年釣り人に沢山落ちていると教えてもらったクルミはありませんでした。
残念なので、これまた教えてもらったグレープフルーツを3つほどもいで行きました。
市販のものより苦味がなくて美味しいです。
ずっと行ってみたかった赤羽のダンボに入店。
テルメ末広
名前からそんなに古くも新しくもない銭湯だと思っていたら、なかなか綺麗で新しいところでした。
駅ハイと月見湯温泉と高砂湯
昨日は登山をしました。
今日は東中野スタートの駅ハイに参加するため、朝から東中野目指して歩きます。 なんとか受付開始の10:00過ぎに到着しました。
秋の神田川と神社・仏閣を巡り中野の自然を感じるウォーク
本日２つめの氷川神社、氷川神社って東京にいくつあるんだろう？
「こうようやま」ではなく「もみじやま」と読むらしい。
親子連れがたくさんいました。
世田谷区月見湯温泉
中野駅から下高井戸を目指して歩きます。東高円寺駅を通り過ぎて妙法寺を通り過ぎるついでに
妙法寺商店街を抜けて荒玉水道道路を進みます。大宮八幡あたりで水道道路を離れ永福町駅へ。
足立区高砂湯
お夕飯を商店街で食べて帰路に着きます。
永福町駅まで戻って善福寺川を越えて大六天神社横を通り過ぎて再び妙法寺横を抜け蚕糸の森公園まで戻りました。
最後は高田馬場駅まで歩いて帰りました。
1日の歩数が50,000歩を初めて越えました。
明日は、あるきたと銭湯巡りです。
日向山と丸山登山
10月31日ハロウィンです、安全情報確保支援士の試験が終わりました。 ITワールドから自然ワールドへ引っ越します。
日向山と丸山登山
10時前に駐車場に到着、出遅れたので満車になっていないか心配でしたが余裕です。
なかなか急な道が続いていて疲れたので、途中の東屋で一休憩。
道案内版は風化して文字が消えていますが「丸山」をどなたかが彫ってくれていました。ありがたい。
明日は駅からハイキングと世田谷の温泉銭湯です。
Docker DesktopをMacにインストールする方法
Docker for Macをインストールする
インストーラーでインストールする方法
- 環境 : macOS Catalina バージョン10.15.7
- Docker Hubを表示する
- [Get Docker]ボタンでdmgファイルをダウンロードする
Docker.dmgをダブルクリックしてアプリケーション・フォルダに Docker アイコンをドラッグする- Launchpadに追加されたDockerを起動する
ダイアログが表示されたら[開く]ボタンで進む 
ダイアログが表示されたら[OK]ボタンで進む - パスワードを入力して[ヘルパーをインストールする]ボタンで進むとダイアログが開いて[start]ボタンから使い方の説明が見られる
ボタンをぽちぽちしてくとクローンとかビルドの説明が見られる
ウィンドウの上にはくじらマークが出る 
くじらマーク > [About Docker Desktop]からバージョンを確認できる
# ターミナルでコマンドを使ってもバージョンを確認できる % docker --version Docker version 19.03.13, build 4484c46d9d
インストールできたか確認するためにhello-worldコンテナを作ってみる
- ターミナルを起動する
docker run hello-worldを実行- ローカルにはないよと表示される :
Unable to find image 'hello-world:latest' locally - 自動でDocker Hubからイメージがpullされる :
latest: Pulling from library/hello-world
- ローカルにはないよと表示される :
# hello-worldコンテナを作る % docker run hello-world Unable to find image 'hello-world:latest' locally latest: Pulling from library/hello-world 0e03bdcc26d7: Pull complete Digest: sha256:8c5aeeb6a5f3ba4883347d3747a7249f491766ca1caa47e5da5dfcf6b9b717c0 Status: Downloaded newer image for hello-world:latest Hello from Docker! This message shows that your installation appears to be working correctly. To generate this message, Docker took the following steps: 1. The Docker client contacted the Docker daemon. 2. The Docker daemon pulled the "hello-world" image from the Docker Hub. (amd64) 3. The Docker daemon created a new container from that image which runs the executable that produces the output you are currently reading. 4. The Docker daemon streamed that output to the Docker client, which sent it to your terminal. To try something more ambitious, you can run an Ubuntu container with: $ docker run -it ubuntu bash Share images, automate workflows, and more with a free Docker ID: https://hub.docker.com/ For more examples and ideas, visit: https://docs.docker.com/get-started/ # コンテナができた % docker ps -a CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 79377c1d5f44 hello-world "/hello" 14 minutes ago Exited (0) 14 minutes ago trusting_jang
Homebewでインストールする方法
- 環境 : macOS Monterey バージョン12.2.1
# 1. 使う前に更新しておく $ brew update Already up-to-date. # 2. 使う前に健康診断しておく $ brew doctor Your system is ready to brew. # 3. バージョンを見ておく $ brew --version Homebrew 3.3.16 Homebrew/homebrew-core (git revision 892f65b1c21; last commit 2022-02-28) Homebrew/homebrew-cask (git revision 9cc168aba7; last commit 2022-02-28) # 4. 「Casks」にあるのがDocker Desktopで、もう一つはCUIのDocker $ brew search docker ==> Formulae docker docker-ls docker-machine-parallels docker-clean docker-machine docker-slim docker-completion docker-machine-completion docker-squash docker-compose docker-machine-driver-hyperkit docker-swarm docker-compose-completion docker-machine-driver-vmware docker2aci docker-credential-helper docker-machine-driver-vultr dockerize docker-credential-helper-ecr docker-machine-driver-xhyve lazydocker docker-gen docker-machine-nfs mockery ==> Casks docker docker-toolbox homebrew/cask-versions/docker-edge # 5. インストールする $ brew install --cask docker Running `brew update --preinstall`... ==> Auto-updated Homebrew! Updated 3 taps (homebrew/core, homebrew/cask and homebrew/cask-fonts). ==> New Formulae aarch64-elf-binutils quick-lint-js ==> Updated Formulae Updated 6 formulae. ==> New Casks font-lxgw-bright font-mengshen-regular iptvnator ==> Updated Casks Updated 36 casks. ==> Downloading https://desktop.docker.com/mac/main/amd64/74594/Docker.dmg ######################################################################## 100.0% ==> Installing Cask docker ==> Moving App 'Docker.app' to '/Applications/Docker.app' ==> Linking Binary 'docker-compose.bash-completion' to '/usr/local/etc/bash_completion.d/docker-compose' ==> Linking Binary 'docker.zsh-completion' to '/usr/local/share/zsh/site-functions/_docker' ==> Linking Binary 'docker.fish-completion' to '/usr/local/share/fish/vendor_completions.d/docker.fish' ==> Linking Binary 'docker-compose.fish-completion' to '/usr/local/share/fish/vendor_completions.d/docker-compose.f' ==> Linking Binary 'docker-compose.zsh-completion' to '/usr/local/share/zsh/site-functions/_docker_compose' ==> Linking Binary 'docker.bash-completion' to '/usr/local/etc/bash_completion.d/docker' 🍺 docker was successfully installed! # 6. Docker Desktopのアプリを起動するとdockerコマンドが使える $ docker --version Docker version 20.10.12, build e91ed57
MySQLを作ってみる
- Docker Hubからイメージをpullする
docker pull {イメージ名}
- imageを確認する
- イメージをビルドして起動する
docker run -e MYSQL_ROOT_PASSWORD={rootのパスワード} -d -p 3306:3306 {イメージ名}
# イメージをpullする % docker pull mysql Using default tag: latest latest: Pulling from library/mysql bb79b6b2107f: Already exists 49e22f6fb9f7: Pull complete 842b1255668c: Pull complete 9f48d1f43000: Pull complete c693f0615bce: Pull complete 8a621b9dbed2: Pull complete 0807d32aef13: Pull complete a56aca0feb17: Pull complete de9d45fd0f07: Pull complete 1d68a49161cc: Pull complete d16d318b774e: Pull complete 49e112c55976: Pull complete Digest: sha256:8c17271df53ee3b843d6e16d46cff13f22c9c04d6982eb15a9a47bd5c9ac7e2d Status: Downloaded newer image for mysql:latest docker.io/library/mysql:latest # imageを確認する % docker images REPOSITORY TAG IMAGE ID CREATED SIZE mysql latest db2b37ec6181 6 days ago 545MB nginx latest f35646e83998 2 weeks ago 133MB hello-world latest bf756fb1ae65 10 months ago 13.3kB # ビルドして起動する % docker run -e MYSQL_ROOT_PASSWORD=root -d --name mysql80 -p 3306:3306 mysql 0e2b57b5753826e7d3921037f22665eb331f0861b489245cce27377bc666d0a1 # mysql80が作られて起動している % docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 0e2b57b57538 mysql "docker-entrypoint.s…" 5 seconds ago Up 4 seconds 0.0.0.0:3306->3306/tcp, 33060/tcp mysql80
docker run のオプション
参考 : run — Docker-docs-ja 19.03 ドキュメント
| オプション | 意味 |
|---|---|
| -d, --detach | コンテナをバックグラウンドで実行し、コンテナIDを表示 |
| -e, --env= | 環境変数を指定 |
| --name | コンテナに名前を割り当てる |
| -p, --publish= | コンテナのポートをホスト側に公開-p {ホスト側ポート}:{コンテナ側ポート} |
MySQLにログインする
- ホストか作ったコンテナにログインする
- MySQLにログインする
# コンテナにログインする % docker exec -it mysql80 bash # MySQLにログインする root@0e2b57b57538:/# mysql -u root -p Enter password: Welcome to the MySQL monitor. Commands end with ; or \g. Your MySQL connection id is 8 Server version: 8.0.22 MySQL Community Server - GPL Copyright (c) 2000, 2020, Oracle and/or its affiliates. All rights reserved. Oracle is a registered trademark of Oracle Corporation and/or its affiliates. Other names may be trademarks of their respective owners. Type 'help;' or '\h' for help. Type '\c' to clear the current input statement. # まだ初期DBしかない mysql> show databases; +--------------------+ | Database | +--------------------+ | information_schema | | mysql | | performance_schema | | sys | +--------------------+ 4 rows in set (0.01 sec) # MySQLからログアウトする mysql> quit Bye # コンテナからログアウトする root@0e2b57b57538:/# exit exit %
JMeterを使ってみた記録
- 環境
- Windows10 Pro バージョン1909
- java version "1.8.0_251"
JMeterで負荷をかけたいのです。
アプリケーションにおいて、パフォーマンスは重要な要素です。また、どの程度の負荷まで耐えられるのかも、同じく重要な要素となります。JMeterを使用して、このような重要な要素を計測し、より信頼性の高いアプリケーションの開発・改良に役立てましょう。
やりたいこと
ローカル環境で実行しているWebアプリケーションで任意の操作中に負荷をかけたい。
JMeterをインストールします。
- Apache JMeter - Download Apache JMeterを表示する
- [Binaries]からzipファイルをダウンロードする
- zipファイルを解凍して任意の場所に配置する
# zipファイルを解凍して「/c/apps/」に配置する $ unzip apache-jmeter-5.3.zip -d /c/apps/ Archive: apache-jmeter-5.3.zip creating: /c/apps/apache-jmeter-5.3/ inflating: /c/apps/apache-jmeter-5.3/LICENSE #...省略... inflating: /c/apps/apache-jmeter-5.3/docs/api/org/apache/log/package-summary.html inflating: /c/apps/apache-jmeter-5.3/docs/api/org/apache/log/package-tree.html # 「apache-jmeter-5.3/bin/」配下のコマンドでバージョンを確認する WARNING: package sun.awt.X11 not in java.desktop _ ____ _ ____ _ _ _____ _ __ __ _____ _____ _____ ____ / \ | _ \ / \ / ___| | | | ____| | | \/ | ____|_ _| ____| _ \ / _ \ | |_) / _ \| | | |_| | _| _ | | |\/| | _| | | | _| | |_) | / ___ \| __/ ___ \ |___| _ | |___ | |_| | | | | |___ | | | |___| _ < /_/ \_\_| /_/ \_\____|_| |_|_____| \___/|_| |_|_____| |_| |_____|_| \_\ 5.3 Copyright (c) 1999-2020 The Apache Software Foundation
JMeterの画面を起動します。
# apache-jmeter-5.3/bin/jmeterを実行すると画面が起動する $ /c/apps/apache-jmeter-5.3/bin/jmeter WARNING: package sun.awt.X11 not in java.desktop ================================================================================ Don't use GUI mode for load testing !, only for Test creation and Test debugging. For load testing, use CLI Mode (was NON GUI): jmeter -n -t [jmx file] -l [results file] -e -o [Path to web report folder] & increase Java Heap to meet your test requirements: Modify current env variable HEAP="-Xms1g -Xmx1g -XX:MaxMetaspaceSize=256m" in the jmeter batch file Check : https://jmeter.apache.org/usermanual/best-practices.html ================================================================================
メニューを日本語表示にする
初期段階ではメニューが英語になっているので日本語表示にします。
- [Option] > [Choose Language] > [Japanese]
- メニューが日本語表示になる
画面の操作を記録する(書き途中)
Thread Groupを作成する
- 左に表示されている[Test Plan]を右クリック
- [追加] > [Thread(Users)] > [スレッドグループ]で追加する
- 表示された画面で以下を設定する
| 項目 | 意味 | 設定値 |
|---|---|---|
| 名前 | 任意、初めてなのでデフォルトのまま | |
| コメント | 任意の値、とりあえず未設定 | |
| サンプルエラー後のアクション | テスト停止 | |
| スレッド数 | 1回の実行でのアクセス数 | 初めてなのでデフォルトのまま |
| Ramp-Up期間 | 全リクエストの作成時間 | 60秒 |
| ループ回数 | シナリオを繰り返す回数 | 初めてなのでデフォルトのまま |
各項目の意味は、【図解】はじめてでもわかるJMeterの使い方 - RAKUS Developers Blog | ラクス エンジニアブログが図まであってとても分かりやすいです。
記録コントローラーを作成する
- スレッドグループを右クリック
- [追加] > [ロジックコントローラー] > [記録コントローラー]で追加する
- 表示された画面で以下を設定する
| 項目 | 設定値 |
|---|---|
| 名前 | 任意、初めてなのでデフォルトのまま |
| コメント | 任意の値、とりあえず未設定 |
HTTPプロキシサーバを作成する
- TestPlanを右クリック
- [追加] > [Non-Test エレメント] > [HTTP プロキシサーバ]で追加する
- 表示された画面で以下を設定する
| 項目 | 設定値 |
|---|---|
| 名前 | 任意、初めてなのでデフォルトのまま |
| コメント | 任意の値、とりあえず未設定 |
| ポート | 使用していないポート番号、デフォルトの8888はちょうど使っていないのでそのまま |
| 対象となるコントローラ | 作成した記録コントローラを選択 |
プロキシを設定する
今回使用するのはChromeです。
Win + R> [ファイル名を指定して実行]ダイアログを表示control inetcpl.cplを入力して[OK]ボタンで[インターネットのプロパティ]ダイアログを開く- [接続]タブ > [LANの設定]ボタンでダイアログを開く
- [LANにプロキシサーバーを使用する] > ON
- 以下を設定し、[OK]ボタンで保存する
| 項目 | 設定値 |
|---|---|
| アドレス | localhost |
| ポート | JMeterでHTTPプロキシサーバのポートに設定した値 |
画面の操作を記録する
- HTTP プロキシサーバの画面にある[開始]ボタンで記録を開始する
- ダイアログが表示されるので[OK]ボタンで進める
- ダイアログがさらに表示されるけど気にせずブラウザ画面の操作を開始する
- 操作を終了する場合は上記ダイアログの[停止]ボタンで終了する
localhostで記録する場合の注意ポイント
localhost:{アプリサーバのポート}/{アプリのURL}で画面の操作を記録をしたところ記録されたポートがアプリサーバの管理画面のポート(Payaraを使ったので4848)の記録しか取れませんでした。アプリでの操作が記録されなかったのです。
- localhostで記録する場合
-
ipconfigでPCのIPアドレスを確認する -
{PCのIPアドレス}:{アプリサーバのポート}/{アプリのURL}をブラウザで表示する- この時点では「このサイトにアクセスできません」となって画面が表示できません。
- 「プロキシを設定する」をする
- HTTP プロキシサーバの画面にある[開始]ボタンで記録を開始する
- ブラウザをリロードするとアプリケーションの画面が表示される
- 操作を記録する
-
- 参考 : たぬきさんのメモ帳:【JMeter】HTTPプロキシサーバとアプリケーションのお話
TCPとUDPの違いから知る特徴
- 前回の勉強内容
- 勉強のきっかけになった問題
- TCPとUDPは、トランスポート層のプロトコルです。
- UDPは、リアルタイム性に優れたプロトコルです。
- TCPは、いろんな仕組みで高信頼性を高めるプロトコルです。
- 次回の勉強内容
前回の勉強内容
勉強のきっかけになった問題
TCPのコネクション確立方式である3ウェイハンドシェイクを表す図はどれか。
TCPとUDPは、トランスポート層のプロトコルです。
| OSI参照モデル | TCP/IP | 役割 | プロトコル |
|---|---|---|---|
| アプリケーション層 | アプリケーション層 | サーバとアプリケーションとの間の通信 | HTTP/FTP/Telnet |
| プレゼンテーション層 | データの表現形式や文字コードを規定し、テキスト・画像などのデータ形式を区別 | ||
| セッション層 | プロセスを区別して論理的な通信路を確立 | ||
| トランスポート層 | トランスポート層 | 通信における信頼性を確保する | TCP/UDP |
| ネットワーク層 | インターネット層 | IPアドレスを元にネットワークを識別して転送に必要な情報を付け加える | IP |
| データリンク層 | ネットワークインターフェース層 | データリンク層では物理アドレスのMACアドレスが識別にデータの送信先を特定 | |
| 物理層 | ハードウェア | データを通信回線に送るのに必要な物理的な仕様を規定 | |
TCP/IP階層モデルにおいて， TCPが属する層はどれか。
答. トランスポート層
IPプロトコルとセッション層以上のプロトコルとをつないでいます。
インターネットで使われるプロトコルであるTCP及びIPと，OSI基本参照モデルの7階層との関係を適切に表しているものはどれか。
UDPは、リアルタイム性に優れたプロトコルです。
トランスポート層のプロトコルであり，信頼性よりもリアルタイム性が重視される場合に用いられるものはどれか。
答. UDP
IPアドレスの偽装が容易にできてしまいます。
答. DNSリフレクタ攻撃
| プロトコル | TCP | UDP |
|---|---|---|
| タイプ | コネクション型プロトコル | コネクションレス型プロトコル |
| 高信頼性 | 高い | 低い |
| 速度/負荷 | 遅い/高い | 早い/低い |
TCPは、いろんな仕組みで高信頼性を高めるプロトコルです。
ポート番号でセッション層以上のプロトコルを識別します。
TCP/IPで使われるアドレスやポート番号のうち，TCPのコネクションを識別するために必要なものの組合せはどれか。
答. あて先IPアドレス，あて先TCPポート番号，送信元IPアドレス，送信元TCPポート番号
OSI基本参照モデルでTCPが属するトランスポート層は、通信の信頼性を確保する機能のほかに、アプリケーション間の通信を実現するという機能があります。
| 使われる情報 | 情報から識別すること |
|---|---|
| あて先IPアドレス | 情報を届ける先のホスト |
| あて先TCPポート番号 | 情報を届ける先アプリケーション |
| 送信元IPアドレス | 返信する時に宛先にするホスト |
| 送信元TCPポート番号 | 返信する時に宛先にするアプリケーション |
アプリケーションやプロトコルによってウェルノウンポートというお決まりのポート番号があります。 そのため、悪い人に狙い撃ちされることもあります。
PCへの侵入に成功したマルウェアがインターネット上の指令サーバと通信を行う場合に，宛先ポートとしてTCPポート番号80が多く使用される理由はどれか。
答. Webサイトの閲覧に使用されることから，通信がファイアウォールで許可されている可能性が高い。
マルウェアが80/TCPを使用するのは、このポートを使えば指令サーバへの通信をファイアウォールで遮断されにくく、さらに業務上行われる大量のHTTP通信に自身の通信を紛れ込ませられるからです。
通信を始める前に3ウェイハンドシェイクでコネクションを確立します。
| 順番 | SYN synchronize 同期する |
ACK acknowledgement 承認 |
シーケンス番号 | 確認応答番号 |
|---|---|---|---|---|
| 1 | 1 | 0 | ランダムな値 | なし |
| 2 | 1 | 1 | 相手から受信したシーケンス番号 | 相手から受信したシーケンス番号 + 1 |
| 3 | 0 | 1 | 相手から受信した確認応答番号 | 相手から受信したシーケンス番号 |
1. Aは、Bに接続要求(SYN)をします。
2. Bは、確認応答(ACK)をして、Aに接続要求(SYN)をします。
3. Aは、確認応答(ACK)をします。
確認応答は、受信側がデータを受け取ると「受け取ったよ連絡(ACK)」をする仕組みです。
TCPのフロー制御に関する記述のうち，適切なものはどれか。
答. 確認応答がない場合は再送処理によってデータ回復を行う。
フロー制御は、通信状況に応じてデータの転送量を制御することです。
TCPを使用したデータ転送において，受信ノードからの確認応答を待たずに，連続して送信することが可能なオクテット数の最大値をなんと呼ぶか。
答. ウィンドウサイズ
ウィンドウサイズは、TCP通信において受信側が現在受信可能なデータサイズを送信側に伝えるために使用されるTCPヘッダ内のフィールドです。
相手からの応答がなくても１度に送信できるデータ量をウィンドウサイズといいます。
毎回、「受け取ったよ連絡」を確認してから次を送信していると効率が悪いのです。 受信側で受け取れるデータ量を教えてくれるのでその量までACKがこなくてもデータを送ります。
TCPヘッダ中のウィンドウサイズの説明として，適切なものはどれか。
答. 受信側からの確認応答を待たずに，データを続けて送信できるかどうかの判断に使用される。
送信側ではウィンドウサイズで指定されたデータを送信し、そのデータの受信確認応答を待つ間に、最新の確認応答内のウィンドウサイズを確認してデータを送信することを繰り返します。このようにデータの確認応答を待たずに次のデータ送信を行うことで、TCPでは効率のよいデータ転送が可能となっています。
次回の勉強内容
DNSの基本を学ぼう
- 前回の勉強内容
- 勉強のきっかけになった問題
- DNSは、ドメイン名やホスト名などとIPアドレスとを対応付けます。
- ゾーンは、特定のDNSサーバが管理するドメインの範囲のことです。
- ダイナミックDNSでは、PCのIPアドレスが変わっても、そのPCには同じホスト名でアクセスできます。
- DNSサーバに対して、IPアドレスに対応するドメイン名又はドメイン名に対応するIPアドレスを問い合わせるクライアントソフトウェアをリゾルバといいます。
- 次回の勉強内容
前回の勉強内容
勉強のきっかけになった問題
DNSに関する記述のうち，適切なものはどれか。
DNSは、ドメイン名やホスト名などとIPアドレスとを対応付けます。
TCP/IPを利用したネットワークでは、各ノードを識別するため一意のIPアドレスが割り当てられていますが、このIPアドレスは数字の羅列で人間にとって覚えにくいため、IPアドレスと対応する別名であるドメイン名が付けられています。DNS(Domain Name System)はこのドメイン名とIPアドレスを結びつけて相互変換する(名前解決する)仕組みです。
平成20年秋期問35 DNSが果たす役割はどれか｜基本情報技術者試験.com
ゾーンは、特定のDNSサーバが管理するドメインの範囲のことです。
【図解】DNSゾーン転送の仕組みとシーケンス～フォワーダとの違い,AD統合ゾーン,notify,スタブゾーンのメリット/デメリット～ | SEの道標
ゾーン転送は、DNSサーバのゾーン情報全体を別のDNSサーバに転送することです。
【図解】DNSゾーン転送の仕組みとシーケンス～フォワーダとの違い,AD統合ゾーン,notify,スタブゾーンのメリット/デメリット～ | SEの道標
ゾーン情報が設定された大元のサーバをプライマリサーバといいます。
プライマリサーバでは、無駄に情報を公開しないために設定でゾーン転送を許可するDNSサーバを限定できます。
DNSサーバに格納されるネットワーク情報のうち，第三者に公開する必要のない情報が攻撃に利用されることを防止するための，プライマリDNSサーバの設定はどれか。
- 答. ゾーン転送を許可するDNSサーバを限定する。
定期的に実行される「プライマリ」から「セカンダリ」へのゾーン情報のコピー(同期処理)は、ゾーン転送(53/TCP)という機能を使用して行われますが、特に制限をしていない場合「セカンダリサーバ」以外のホストからの要求でも実行可能になっています。したがって攻撃者がこれを用いた場合「プライマリサーバ」からゾーン情報やサーバ／ネットワーク構成を不正に取得されてしまう可能性があります。
これを防ぐためには、ゾーン転送を行うホストをセカンダリサーバのみに制限し、ゾーン転送する情報の範囲を最小とする対策が有効です。
平成23年秋期問8 プライマリDNSサーバの設定｜情報処理安全確保支援士.com
セカンダリサーバは、プライマリサーバからゾーン転送を受けてゾーン情報の複製を保持します。
ダイナミックDNSでは、PCのIPアドレスが変わっても、そのPCには同じホスト名でアクセスできます。
ダイナミックDNS(DNS UPDATE)の説明として，適切なものはどれか。
- 答. PCのIPアドレスが変わっても，そのPCには同じホスト名でアクセスできる。
ダイナミックDNSは、インターネット接続の度に動的に割り振られるIPアドレスとそのホスト名の対応を動的に管理する仕組みです。
常時接続環境ではインターネット接続の度にDHCPからグローバルIPアドレスが割り振られるため、個人が自宅サーバを公開するときにホスト名とIPアドレスの対応をとることができないという問題が生じます。ダイナミックDNSでは、この問題に対応するために接続がある度(IPアドレスが割り振られる度)にIPアドレス・ホスト名対応情報の登録・更新をDNSサーバへ行います。これによって固定IPアドレスがない環境でも常に同じホスト名でアクセスさせることができるようになります。
平成19年秋期問35 ダイナミックDNS｜応用情報技術者試験.com
DNSサーバに対して、IPアドレスに対応するドメイン名又はドメイン名に対応するIPアドレスを問い合わせるクライアントソフトウェアをリゾルバといいます。
| 種類 | 問合せ方 | 機能 |
|---|---|---|
| スタブリゾルバ | 再帰的問合せ 代理で他のDNSサーバに問い合わせをしてもらって最終結果をもらうこと |
自分で名前解決できないからDNSリクエストを送信するだけのクライアント |
| フルサービスリゾルバ | 反復問合せ 名前解決できるまで繰り返して他のDNSサーバにお問合わせすること |
自分で持っているキャッシュ情報か権威DNSサーバへの合わせで名前解決ができるサーバ |
キャッシュポイズニング攻撃対策として、再帰的な問合せに対しては内部ネットワークからのものだけに応答するように設定します。
攻撃者がDNSキャッシュサーバに偽のキャッシュ情報を登録させる手順を追ってみます。
- 攻撃者は、キャッシュサーバに対して偽の再帰的な問合せを行い反復問合せを強制的に生じさせる。
- キャッシュサーバは、コンテンツサーバに対して反復問合せを行う。
- 攻撃者は、コンテンツサーバが正規の応答を返すよりも先にキャッシュサーバへ偽の応答を送りつける。
- キャッシュサーバは、攻撃者から送られた偽の応答を正規のものと判断しキャッシュに登録する。この時点でDNSクエリは解決済なのでコンテンツサーバから送られた正規の応答は破棄される。
(省略)再帰的問合せの役割は、内部ネットワークのホストが外部ネットワークに接続する際の名前解決であり、原則として外部からの再帰的な問合せに応じる必要はないはずですから、再帰的な問合せを受け付けるホストを内部ネットワークだけに限定することがキャッシュポイズニング攻撃への対策となります。
平成29年春期問41 キャッシュポイズニング攻撃への対策｜応用情報技術者試験.com
次回の勉強内容
伊香保温泉と水沢山登山
1日目：始めて伊香保温泉に行きました。
2日目：いよいよ水沢山登山
2日目は晴れたのでいよいよお楽しみの登山です。
伊香保温泉から車で15分くらいで着きました。
水沢観音駐車場に車を停めてスタートです。
事前に調べた情報では水沢観音で駐車場を提供しているとのことだったのですが、拝観者に提供しているのであって登山者向けではありません。
なので登山の前後は参拝を忘れずしてきました。
結構境内にはいろいろあって楽しかったです。
mizusawakannon.or.jp
登山口は、階段を上がった権現様の横にあります。
途中に何かの歌の碑があります。が、漢字が読めなくて何かはよくわかりませんでした。
この白い花はお家で調べて、サラシナショウマ・・・かな・・・と。
サラシナショウマ | 薬草データベース
登山道は最後の辺り以外は階段が主体となっていました。
時間は2-3時間くらいで距離も2kmとライトですが・・・階段は辛い。
体重が多いので・・・なかなか体力のいる登山でした。
ぜぇぜぇいいながら休憩をすると木々の間からは素敵な景色が見えます。
登山の楽しみです。
途中はお地蔵様が迎えてくれます。ありがたいことです。
山頂は、狭めで登頂したときには10人くらいのパーティーがご飯中でぎゅうぎゅう状態でした。
折り返さずに反対側へ行くルートもあるそうです。
いつか挑戦してみたいものです。
山頂で出会った常連っぽいおじさんのお話では、散歩がてらに朝登る方もいるそうです。
どおりで、スタスタと登る人とぜぇぜぇいいながら登る人がいるわけです。
最後はやっぱり名物の水沢うどんです。駐車場の前にはいくつものおうどん屋さんがあって登山後には嬉しいお食事どころとなります。
CP932とMS932の違いを調べて知ったCP932とSJISの違い
- 「統合したCP932」とMS932は同じようなもんです。
- CP932の歴史
- 「誕生したばかりのCP932」とSJISと同じですが、「統合されたCP932」とSJISには違いがあります。
- SJISやCP932で2byte目が「5C」「7E」の文字には問題が起こることがあります。
「統合したCP932」とMS932は同じようなもんです。
「統合したCP932」をJavaではMS932といいます。
わざわざ「統合したCP932」としたのには理由があります。
CP932は時代によってものがちょっとずつ違うのです。
CP932の歴史
| 西暦 | CP932 の歴史 |
ざっくり説明 |
|---|---|---|
| 1982 | CP932誕生 | マイクロソフトが日本語ようにSJISという文字コードを作りました。このSJISの管理番号はコードページ932(CP932)でした。 |
| 1982以降 | NECとIBMがCP932をそれぞれで拡張 | 各社が自社製品用にCP932を拡張したのでCP932種類ができました。 |
| 1993 | CP932を統合 | マイクロソフトは拡張されたCP932を統合してWindows-31Jという名前でIANAに登録しました。CP932っていうと種類があるからJavaでは統合されたCP932(=Windows-31J)をMS932と呼ぶことにしました。 |
これをまとめてわかりやすい図で紹介しているのが以下のサイトです。
「誕生したばかりのCP932」とSJISと同じですが、「統合されたCP932」とSJISには違いがあります。
「統合されたCP932」にはあるけどSJISにはない文字があります。
「誕生したばかりのCP932」はSJISと同じですが、紆余曲折の結果「統合されたCP932」にはあるけどSJISにはない文字があります。
NECやBIMが拡張した部分です。
なんだかんだで結構いっぱいあります。どれもむつかしい漢字ばっかり・・・読めない書けない見分けられない。
漢字以外にもあります。
(CP932にはあるけどSJISにはない漢字の一例)
奓 奛 奝 奣 妤 妺 孖 寀 甯 寘 寬 尞 岦 岺 峵 崧 嵓
﨑 << これは「タチサキ」というらしい
鋗 鋙 鋐 﨧 鋕 鋠 鋓 錥 錡 鋻 﨨 錞 鋿 錝 錂 鍰 鍗 鎤 鏆 鏞 鏸 鐱 鑅 鑈 閒 隆 﨩 隝 隯 霳 霻 靃 靍 靏 靑 靕 顗 顥 飯 飼 餧 館 馞 驎
髙 << これは「ハシゴダカ」というらしい(CP932にはあるけどSJISにはない漢字以外の一例)
㌔ ㌢ ㍍ ㌘ ㌧ ㌃ ㌶ ㍑ ㍗ ㌍ ㌦ ㌣ ㌫ ㍊ ㌻ ㎜ ㎝ ㎞ ㎎ ㎏ ㏄ ㎡
SJISやCP932で2byte目が「5C」「7E」の文字には問題が起こることがあります。
Shift_JIS(SJIS, cp932) の文字コードで、2byte目が0x5c の \ になっているものの俗称(だめ文字、駄目文字)
0x5cの \ は使用するフォントやロケールによりバックスラッシュまたは￥記号で表示されます。
ダメ文字を含む文字列やパス、ファイル名を処理する場合には文字化け、検索不可など様々な不具合が起きることがあります。
ダメ文字には ー ソ 十 表 など、使用頻度の高いものもあるので cp932を扱う場合には注意が必要です。
fudist - Shift_JIS(cp932)の「ダメ文字」
WindowsにPython3とPyCharmをインストールする方法
- 環境
- Windows10 Pro 64bit バージョン1909
Pythonをインストールする
参考 : Pythonのダウンロードとインストール | Python入門
exeファイルをダウンロードする
- Python Releases for Windows | Python.orgを表示する
- [Latest Python 3 Release - Python 3.x.x]リンクを押下する
- 今回はPython 3.8.5
- ページの下のほうにある一覧から「Windows x86-64 executable installer」からexeファイルをダウンロードする
インストールする
- ダウンロードしたexeファイルを実行してダイアログを表示する
- [Add Python 3.x to PATH]にチェックを入れて環境変数のPATHに追加されるようにする
- [Customize installation]リンクで次の画面を表示する
- [Optional Features]でオプションを選択する
- 今回は初めてなので全選択
- [Advanced Options]でオプションを選択する
- インストール先を指定したい場合は[Customize install location]で指定する
今回はこんな感じ
- [Install]ボタンでインストールする
- [Setup was successful]が表示されたら[Close]ボタンでダイアログを閉じる
バージョンを確認する
インストールされたことを確認するためにバージョンを確認する
$ python -V Python 3.8.5
PyCharm(統合開発環境)をインストールする
PyCharmは無料版をインストールします。
exeファイルをダウンロードする
- PyCharm：JetBrainsによるプロ開発者様向けPython IDEを表示する
- [ダウンロード]ボタンで次の画面を表示する
- [Windows]の[コミュニティ]にある[ダウンロード]からexeファイルをダウンロードする
インストールする
- ダウンロードしたexeファイルを実行してダイアログを表示する
- [Next]ボタンで[Choose Install Location]画面へ進んでインストール先を指定する
- [Next]ボタンで[Installation Options]画面へ進んでオプションを選択する
- 各オプションについては PyCharmのインストール方法（Windows） | ガンマソフト株式会社が参考になる
- 今回は全部未選択
- [Finish]ボタンでダイアログを閉じる
プロジェクトを設定する
既存のプロジェクトをインポートする
gitでcloneしてきた既存プロジェクトをインポートします。
参考 : 既存のソースコードからプロジェクトをインポートする — PyCharm
- pyCharmを起動する
- [Open]でcloneしたフォルダを選択してインポートする
既に別のプロジェクトがある場合
PyCharmを使っていてほかのプロジェクトがある場合はこちらの方法でインポートします。
- [File] > [New Project...]でダイアログを開く
- 以下を設定して[Create]ボタン
- Location : cloneしたフォルダを選択
- New enviroment using : Virtualenv
- Location : 仮想環境を作る空のフォルダを指定(今回は初期値の
プロジェクトフォルダ/venv/) - ここを設定すると次の「仮想環境を作成して設定する」が不要になります。
- Location : 仮想環境を作る空のフォルダを指定(今回は初期値の
- Create a maion.py welcome script : OFF
- ダイアログ(cloneした場所にいろいろ作っていい？)で[Create from Existing Sources]ボタン(選択はお好みで)
- 次のダイアログ(既存のプロジェクトと別Windowにする？)で[New Window]ボタン(選択はお好みで)
- ちょっと待つとプロジェクトがインポートされる(仮想環境用のディレクトリもできている)
仮想環境を作成して設定する
参考 : 仮想環境を構成する — PyCharm
- 「Ctrl+Alt+S」で設定画面を表示する
- [Project:{プロジェクト名}] > [Python Interpreter] > 歯車アイコン > [Add]でダイアログを表示する
- 左側のペインで[Virtualenv Enviroment]を選択して以下を設定する
- Location : 仮想環境を作る空のフォルダを指定(今回は初期値の
プロジェクトフォルダ/venv/) - Base interpreter : 使うPythonのバージョンを選択する
- Inherit global site-packages(グローバル site-packages を継承する) : OFF
- Make available to all projects(すべてのプロジェクトで使用可能にする) : OFF
- Location : 仮想環境を作る空のフォルダを指定(今回は初期値の
- [OK]ボタンで仮想環境を作成する
- [Apply]ボタンで反映して、[Close]ボタンで設定画面を閉じる
- Locationフォルダが作成されて中にいろいろ入ってる
ライブラリをインストールする
- 画面下にある[Terminal]でターミナルを開く
pip install {ライブラリ}の形式で開発に必要なものをインストールする
# Pythonのパッケージの形式であるwheel(ホイール)をインストールする(PyInstallerを使うのに必要) (venv) C:\path\project>pip install wheel # ...省略... Successfully installed wheel-0.35.1 # 処理の高速化をしてくれるCython(サイソン)をインストールする(NumPyを使うのに必要) (venv) C:\path\project>pip install Cython # ...省略... Successfully installed Cython-0.29.21 # 数値計算ライブラリであるNumPyをインストールする (venv) C:\path\project>pip install numpy # ...省略... Successfully installed numpy-1.19.2 # PythonコードをWindows用のexeファイルに変換してくれるPyInstallerをインストールする (venv) C:\path\project>pip install pyinstaller # ...省略... Successfully installed altgraph-0.17 future-0.18.2 pefile-2019.4.18 pyinstaller-4.0 pyinstaller-hooks-contrib-2020.8 pywin32-ctypes-0.2.0 # ファイルにライブラリとバージョンを書いてインストールすることもできる (venv) C:\path\project>pip install -r requirements.txt # ...省略... Successfully installed astroid-2.4.2 colorama-0.4.3 et-xmlfile-1.0.1 isort-4.3.21 jdcal-1.4.1 lazy-object-proxy-1.4.3 mccabe-0.6.1 numpy-1.19.0 openpyxl-3.0.4 pandas-1.0.5 pyinstaller-hooks-contrib-2020.7 pylint-2.5.3 python-dateutil-2 .8.1 pytz-2020.1 six-1.15.0 toml-0.10.1 typed-ast-1.4.1 wrapt-1.12.1 xlrd-1.2.0
Macにインストールしたい場合
CookieにはWebアプリケーションでのユーザ情報やセッションIDが格納されます
- 前回の勉強内容
- 勉強のきっかけになった問題
- Cookieは、Webサーバに対するアクセスがどのPCからのものであるかを識別するためにブラウザにユーザ情報などを保存する仕組みです。
- セッションは、サーバとの一連のやり取りの流れです。
- CookieにSecure属性を設定することで、httpsのときだけWebブラウザからCookieが送出されます。
- 次回の勉強内容
前回の勉強内容
勉強のきっかけになった問題
CookieにSecure属性を設定しなかったときと比較した，設定したときの動作として，適切なものはどれか。
Cookieは、Webサーバに対するアクセスがどのPCからのものであるかを識別するためにブラウザにユーザ情報などを保存する仕組みです。
cookie(HTTP cookie：クッキー)は、状況によって異なるページを提供したいというニーズにより開発され、ユーザ識別やセッション管理を実現する目的などに利用されています。
平成19年秋期問36 cookieの説明｜基本情報技術者試験.com
セッションは、サーバとの一連のやり取りの流れです。
Googleアナリティクスの基本指標を正しく理解しよう＜セッション・ユーザー・ページビュー数＞ : ビジネスとIT活用に役立つ情報
CookieでセッションIDを持ってセッションの管理をします。
5.8. セッション管理 — TERASOLUNA Global Framework Development Guideline 1.0.0.publicreview documentation
セッションハイジャックとは、利用者のセッションIDを不正に取得しその利用者になりすましてサーバにアクセスすることです。
セッションIDによってセッションが管理されるとき，攻撃者がログイン中の利用者のセッションIDを不正に取得し，その利用者になりすましてサーバにアクセスする。
平成29年春期問23 ディレクトリトラバーサル攻撃｜情報セキュリティマネジメント試験.com
セッションハイジャックされると、Cookieの情報では正規ユーザーによる操作なのかは判別できません。
セッションハイジャック等によって、ログイン中のセッションが第三者に乗っ取られても、URLやCookieに格納されているセッションIDが正規のものである限り、Webアプリケーション側では「攻撃者によって乗っ取られたリクエスト」なのか「正規ユーザによるリクエスト」なのかの区別がつきません。
平成28年春期問41 ブラウザに送信する直前に行う対策｜応用情報技術者試験.com
Webアプリケーションのセッションが攻撃者に乗っ取られた場合は、重要な情報をWebブラウザに送信する直前にはパスワードによる利用者認証などを行う必要があります。
Webアプリケーションのセッションが攻撃者に乗っ取られ，攻撃者が乗っ取ったセッションを利用してアクセスした場合でも，個人情報の漏えいなどの被害が拡大しないようにするために，Webアプリケーションが重要な情報をWebブラウザに送信する直前に行う対策として，最も適切なものはどれか。
エ. パスワードによる利用者認証を行う。
平成28年春期問41 ブラウザに送信する直前に行う対策｜応用情報技術者試験.com
CookieからセッションIDをパクられるとセッションハイジャックされます。
- 「推測」への対抗
- 予測困難なランダム値を使う
- ログイン（ユーザ認証）成功のたびに異なる値を使う
- 「奪取」への対抗
利用者のログアウト時には、WebサーバにおいてセッションIDを無効にします。
Webシステムにおいて，セッションの乗っ取りの機会を減らすために，利用者のログアウト時にWebサーバ又はWebブラウザにおいて行うべき処理はどれか。ここで，利用者は自分専用のPCにおいて，Webブラウザを利用しているものとする。
イ. WebサーバにおいてセッションIDを無効にする。
平成30年春期問43 セッションハイジャック対策｜応用情報技術者試験.com
CookieにSecure属性を設定することで、httpsのときだけWebブラウザからCookieが送出されます。
secure属性が指定されていないと，暗号化されていない通信経路上にクッキーが送信されてしまい，盗聴される危険がある。最近の開発環境では，アプリケーション・サーバーや，フレームワークがsecure属性の設定を自動的に設定することが多いため気付きにくいかもしれない。マニュアルを確認し，正しく設定する必要がある。
第1回 まずは「クッキー」を理解すべし | 日経クロステック（xTECH）
Cookieを発行する際に指定できる属性にはほかにもいろいろあります。
expires属性は，被害が発生してしまう可能性と関連する。この指定がある場合，指定された日時までクッキーが送信される。つまり，クッキーは指定された日時までファイル上に保存され，ブラウザ再起動後もその値が読み込まれ使用される。指定がない場合，有効期限はブラウザが終了するまでとなる。
この属性が指定されていなければ，ブラウザを起動していないユーザーが被害に遭うことはない。しかし，この属性が指定されていると，ブラウザ起動時にクッキーが自動的に読み込まれ送信されるため，ブラウザを起動していないユーザーも被害に遭う対象となる。この属性は，オートログイン機能を実現するために設定されることが多いが，このようなリスクが発生することは認識しておかなければならない。
第1回 まずは「クッキー」を理解すべし | 日経クロステック（xTECH）
次回の勉強内容
レスポンシブ対応で知ったメディアクエリの基本
- メディアクエリは、表示するディバイスなどによって適用するCSSを切り替える機能です。
- メディアクエリの指定方法
- メディアは、メディアタイプかメディア特性を論理演算子で組み合わせて指定します。
- スマートフォン用にはどんな指定がいいか集めてみました。
- メディアクエリを使うにはHTMLのheadタグにviewportを指定します。
メディアクエリは、表示するディバイスなどによって適用するCSSを切り替える機能です。
表示された画面環境に応じて適用するスタイルを切り替える機能。
メディアクエリ（Media Queries）とは - IT用語辞典 e-Words
メディアクエリは画面の解像度 (例えばスマートフォンの画面とコンピュータの画面) といった条件に対応してコンテンツの描画が行えるようにするCSS3のモジュールである。
メディアクエリ - Wikipedia
メディアクエリは、一般的な端末の種類 (プリンタと画面など)や特定の特性 (画面の解像度やブラウザーのビューポートの幅など) に応じてサイトやアプリを変更したいときに便利です。
メディアクエリの使用 - CSS: カスケーディングスタイルシート | MDN
メディアクエリの指定方法
HTMLファイルにタグの属性として指定する
<!--linkタグのmedia属性で指定する--> <link rel="stylesheet" href="hoge.css" media="screen, projection, tv" /> <!--styleタグのmedia属性で指定する--> <style type="text/css" media="aural, speech"> ...スタイルの指定... </style> <!--pictureタグの内部でのみsourceタグで使える--> <picture> <source media='(min-width: 650px)' srcset='hoge.png'> </picture>
CSSファイルに指定する
/* @mediaで指定する */ @media only screen and (max-device-width: 480px){ ...スタイルの指定... } /* @importでCSSファイルと一緒に指定する */ @import url(example.css) screen and (color);
メディアは、メディアタイプかメディア特性を論理演算子で組み合わせて指定します。
メディアタイプの種類
メディアタイプは端末の全般的なカテゴリを説明します。 not 又は only の論理演算子を使用する場合を除いて、メディアタイプは任意であり、 all タイプが暗黙に含まれています。
メディアクエリの使用 - CSS: カスケーディングスタイルシート | MDN
| メディアタイプ | 対象 |
|---|---|
| all | すべての端末 |
| screen | printに一致しないすべての端末 |
| ページ付きの素材や、印刷プレビューモードで画面に表示された文書 |
- 以下のメディアタイプは、メディアクエリ4から非推奨
- tty(文字幅が固定の機器) / tv(テレビ) / projection(プロジェクタ) / handheld(携帯機器) / braille(点字ディスプレイ) / embossed(点字プリンタ) / aural(音声出力) / speech(音声出力)
- 参考 : Media Queries Level 4
メディア特性の種類
メディア特性は、特定のユーザーエージェントや、出力端末や、環境などの特性を記述します。メディア特性式は、存在又は値を検査するもので、完全に任意です。それぞれのメディア特性式は、括弧で囲む必要があります。
メディアクエリの使用 - CSS: カスケーディングスタイルシート | MDN
| 名前 | 概要 | 値 |
|---|---|---|
| color | 出力端末の色コンポーネントあたりの色数、または端末がカラーでなければゼロ | |
| height | ビューポートの高さ | |
| orientation | ビューポート (またはページ付きメディアではページボックス) の向き | portrait(縦長) / landscape(横長) |
| scripting | スクリプト(例えばJavaScript)が利用できるかを検出する | |
| width | ビューポートの幅 |
※. 使いそうなのだけ抜き出したましたが、@media - CSS: カスケーディングスタイルシート | MDNにはたくさん乗っているので参照してください。
論理演算子の種類
論理演算子 not, and, only を使用して、複雑なメディアクエリを構成することができます。複数のメディアクエリをカンマで区切って、単一の規則にまとめることもできます。
メディアクエリの使用 - CSS: カスケーディングスタイルシート | MDN
| 論理演算子 | 意味 | 例 |
|---|---|---|
| and | 複数のメディア特性・メディアタイプをまとめる。 真になるためには結合されたそれぞれの特性が真を返す必要がある。 |
@media (min-width: 30em) and (orientation: landscape) { ... } |
| not | メディアクエリを否定する。 クエリが偽を返せば真を返す。 使用する場合は、メディアタイプも指定しなければならない。 |
@media not all and (monochrome) { ... } 上記の解釈は以下 正解: @media not (all and (monochrome)) { ... } 誤り: @media (not all) and (monochrome) { ... } |
| only | クエリ全体が一致した場合にスタイルを適用。 使用する場合は、メディアタイプも指定しなければならない。 メディア特性がついたメディアクエリに対応していない古いブラウザーで、そのスタイルが適用されるのを防ぐ。 最近のブラウザーでは効果がない。 |
@media only screen and (color) { ... } |
| ,(カンマ) | 複数のメディアクエリを一つのメディアクエリに結合する。 リストは論理 or 演算子のように動作する。 |
@media (min-height: 680px), screen and (orientation: portrait) { ... } |
スマートフォン用にはどんな指定がいいか集めてみました。
いろいろやると訳わかんなくなるので、シンプルにスマートフォンの縦用だけをいろんなサイトから集めてみました。
スマートフォンの横からはPCと共通のCSSで頑張って見てもらう感じ。
@media screen and (max-width: 480px) { }
スマートフォンのシェアが増え、かつほとんどが縦画面で見ていると想定するなら、これが落ち着きどころと言える
【2020年4月修正追記】レスポンシブ CSSメディアクエリ（@media）ブレイクポイントまとめ | モバイル・スマホWeb・WordPressのSEO塾.com
スマホ向けは「タブレットじゃなくなったら」の否定法で
@media only screen and (max-width: 767px)
が主流。
レスポンシブウェブデザインのメディアクエリのオススメの書き方 [無料ホームページ作成クラウドサービス まめわざ]
@media screen and (max-width:768px) {
/*スマホ用のcssを記述*/
}
CSSでメディアクエリ（@media）を使ってレスポンシブ（スマホ対応）にする方法 | HikoPro Blog
560px未満をスマホと設定
ポートレートとランドスケイプは用途を分けて考える。←これ重要
※iPhoneSEのランドスケープ（568px）、iPad Pro 11の5:5 Split Viewもタブレット扱いにするために560pxに設定。<省略>
560px未満 @media screen and (max-width: 559px) {...}
960px未満 @media screen and (max-width: 959px) {...}
※「以下」ではなく「未満」にするために、メディアクエリの数字を一つ減らすのがポイントですね。
【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ
スマホ縦 @media screen and (max-width: 480px) 【2020年3月】レスポンシブ CSSブレイクポイント・メディアクエリ（@media） | SEO塾/株式会社アルゴリズム
メディアクエリを使うにはHTMLのheadタグにviewportを指定します。
<head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head>
