読者です 読者をやめる 読者になる 読者になる

yagisukeのWebなブログ

フロントエンドとサーバーサイドをさまようエンジニア

Wiresharkでパケットキャプチャしてみた

Wiresharkとは

TCP/IPで流れるデータを確認できる「パケットキャプチャ」ソフトの代表格。
Windows版, Mac版, Linux版それぞれあります。
ここではMac版を試します。
Wiresharkの公式サイト: https://www.wireshark.org/

Wiresharkをインストール

Wiresharkはhomebrewでインストールできるらしい。
参考: homebrewでwiresharkのQt版をインストール - Qiita

それではTerminalを開いて、下記コマンドをえいやっ。

$ brew install wireshark --with-qt

なんかwaringがでて--with-qtは非推奨だぜって怒られてます。
が、勝手に推奨されているものをinstallしてくれているので問題無し。 f:id:yagi_suke:20170311194901p:plain

古かったみたいです。最新は以下のようです。

$ brew install wireshark --with-qt5

それではWiresharkを起動してみます。

$ wireshark

….ありまっ。。No interface foundとでてきました。。 f:id:yagi_suke:20170311194924p:plain

先ほどのinstall時のログを見てみるとIf your list of available capture interfaces is empty と書いてあり、brew cask install wireshark-chmodbpfを実行してって。 f:id:yagi_suke:20170311203502p:plain

ということで、言われるがままに、えいやっ。

$ brew cask install wireshark-chmodbpf

そして再度Wiresharkを起動すると、
今度はインターフェイスリストが表示されました。 f:id:yagi_suke:20170311203435p:plain

上記を踏まえると、以下の手順でやるとスムーズですね。

$ brew install wireshark --with-qt5
$ brew cask install wireshark-chmodbpf



補足:

homebrewを入れていない人は
下記記事を参考にしてみて使えるようにしてみては。
参考: パッケージ管理システム Homebrew - Qiita

Wiresharkの使い方

Wiresharkを起動したら、「キャプチャ」メニューから「オプション」を選択。
f:id:yagi_suke:20170311211258p:plain インターネットとの通信をパケットキャプチャしたいので、
インターネットと繋がっているネットワークを選択して、開始! f:id:yagi_suke:20170311211313p:plain

UDPのパケットを見る

画面上部のFilterにudp.port==53といれると、
DNSのパケットに絞り込んで見れます。 f:id:yagi_suke:20170311211328p:plain

TCPのパケットを見る

TCPUDPと同様にFilterにtcp.port==80といれると、
TCPのパケットに絞り込んで見れます。

ただし、上記だけでは他のアプリの通信も拾ってしまうので
パブリックIPアドレスを絞り込み条件に加えます。

パブリックIPアドレスはTerminalからnslookupコマンドで確認できます。
こんな感じです。

$ nslookup leihauoli.com

すると、こんな感じで表示され、54.249.34.46がパブリックIPアドレスです。 f:id:yagi_suke:20170311211346p:plain

Filterにtcp.port==80 and ip.dst_host==54.249.34.46のように入力すれば
通信を見たいサイトのパケットを確認できます。 f:id:yagi_suke:20170311211409p:plain

上記imgのNo206 - 209は「SYN」「SYN+ACK」「ACK」の3ウェイハンドシェーク。
また、中央部にはGETコマンドが送信されていることもわかります。


ひっさしぶりの投稿でした。

土居健太郎「10年使えるSEOの基本」を読んで - 検索エンジンは最高の回答者であろうとする -

「どうすれば検索されたときにサイトを上位表示できるか」
そんなふうに捉えてSEO対策を行うとかえってうまくいかなかったりすることがあるようです。

本書は,すぐに効かなくなってしまうような小手先のテクニックではなく、

  • 検索エンジンは、どんなことをしようとしているの?
  • SEOって,なんのためのもの?

といった変わらない「考え方」をおさえることで、 目先のトレンドにふりまわされないための基礎が身につくSEO入門書となっています。

検索エンジンはなんのためにどんなことをしているのか

検索エンジンは「だれにとっても、どんな質問に対しても、最高の回答者」であろうとしています。
最高の回答者であるためには、以下のような能力が必要となります。

  • なんでも知ってて、知識の引き出しが多い
  • 質問した人のことをちゃんと理解してくれている
  • 質問した人が知りたいことを正しく教えてくれる

検索エンジンも同じような能力が必要となり、その仕組みとして「クローラー」「インデックス」「アルゴリズム」があります。

  • クローラー: インターネット上のあらゆる情報を集める
  • インデックス: 集めた情報にどういう言葉が書いてあるかを解析して整理し、検索時に取り出しやすくする
  • アルゴリズム: インデックスされた情報の中から良質な回答を選定する

SEOとは「回答」を用意し、検索で取り出されやすい情報を作ること

以上のことから、SEO対策の基本的な取り組みは、以下の3点に集約できるそうです。

  1. 検索する人にとって「回答」となるようんコンテンツを用意する
  2. 検索エンジンに正しくクロールされ、インデックスに登録される状態を保つ
  3. アルゴリズムによって選定された結果、優先的に表示されるようにする

SEO対策とはランキング競争でも検索順位を操作するテクニックでもない

「どうやって他のサイトより上位に表示するか」 「どうやって効率よく順位を上げていくか」 といった短絡的な施策を指すものと解釈されがちですが、 本来は 「検索エンジンが検索する人にどのような結果を提示しようとしているのか?」 を理解し、検索結果でより優遇されるに値するサイトにしていくことになりません。

佐藤ナオキ「問題解決ラボ」を読んでみて

佐藤ナオキさんに興味を持ったのは、NHKプロフェッショナル 仕事の流儀」を見てから。 世界で活躍している若手デザイナーで、ルイ・ヴィトンコカ・コーラエルメスなど世界的な企業とやり取りをしており、デザインの領域はクリップ1つから建築物や駅前広場とかなり広範囲。常に300以上のプロジェクトを同時進行しているというのだから驚愕。3つくらいの異なるタスクを持つだけでアウトオブメモリーな僕には想像できない。

書評の前に..

僕はWeb制作会社に務めるエンジニアです。 お客さんの要望をまとめ、要望を叶えるための設計をして、納期までにWebサイトに機能を更新していくような仕事をしています。 エンジニアという職業ですが、楽しい時間はお客さんの要望を導き出して、自分の意見を提案できたとき。 正直、プログラミングや技術といった類は二の次でイイと思っています。 技術は手段だと思ってますし、その道のプロフェッショナルになりたいかと言われればそんなに..な私なので。 そんなこと思ってる時点でエンジニア向いてないかもと考えちゃったり、Webディレクターに憧れたり。

ブレークスルーは「職人型」ではなく「発想型」から生まれる

そんな僕がこの本を読んでグッときたのは、第5章の10項 ブレークスルーは「職人型」ではなく「発想型」から生まれるです。

今後、国内にもっと「発想型」のデザイン事務所が増え、彼ら(クライアント)の能力を活かせるようなプロジェクトが増えていけば、日の丸メーカー復活の足がかりとなるのかもしれない。 第5章 デザイン目線で考えると、見えない「価値」が見えてくる P.235


佐藤ナオキさん曰く、デザイン事務所には2つのタイプがあるそうです。

  • 職人型。クライアントが作りたいものがはっきりしている場合、それをドンピシャで具現化する技術者。
  • 発想型。クライアントの頭の中の漠然としたイメージを基に、企画開発から製造、販売、PR広告宣伝に至るまでトータルで俯瞰し、コンセプトを提供していくもの。


"Web"がつく時点でWeb制作会社は「職人型」かなと思っています。 しかし、お客さんの要望通りに実装して終わりなエンジニアだけではつまらないなと思ってますし、自分はそうなりたくないなと。

例えば、
・ 会員登録のデザイン変更という要件に対して、登録動線のフローを短縮して登録率UPを計れないか。
・ コーポレートサイトのリニューアルという案件に対して、既存のコーポレートサイトを活かすことで工数を削減して、 名刺や封筒のデザインといった異なることに工数を割くことでブランディング強化を計れないか。

P.4で紹介されているエステーの「自動でシュパッと消臭プラグ」のリニューアル案件では、外装だけをキレイに整えてほしいと依頼されたそうです。 しかし、外装だけでなく、内部の構成要素の簡略化や配置換えを実現し、約25%のコンパクト化に成功し、安く製造できるようになった上に売上も半年で前年比2倍に伸びたそうです。

エンジニアだからプログラミング技術を磨き、Webに身を置くのだからSEOSEMといったマーケティング知識もつけていきたいですが、 エンジニアのみんながみんな「職人型」になる必要もないなと、少し気が楽になれました。 お客さんの要件の根本を今よりもっとさらけ出して、最適な手段を提供するような取り組みができたら自分はもっと仕事が好きになれると思うし、自分の存在価値も高められるのかなとそんな風に感じました。

SQLで集合演算にトライ 〜和集合/積集合/差集合について〜

SQLの集合演算についてまとめてみた

テーブル同士の集合演算について簡単に書き留めたので投稿。 集合演算は、和集合・積集合が一般的ですが、 差集合というのもあるらしいのでそちらについても記載しときます。

サンプルデータ

以下は説明で使用するテーブルです。
PERSONテーブル

NAME ADDRESS WORK
田中みほ 東京 モデル
潮田れいこ 福岡 元スポーツ選手
伴とみこ 熊本 歌手
吉瀬みちこ 福岡 女優


TOKYO_PERSONテーブル

NAME ADDRESS WORK
田中みほ 東京 モデル
上戸あや 東京 女優
平井りお 東京 アナウンサー

UNIONで和集合を求める

和集合は、UNIONという演算子を使います。
こんな感じ。

SELECT *
FROM PERSON
UNION
SELECT *
FROM TOKYO_PERSON;
NAME ADDRESS WORK
田中みほ 東京 モデル
潮田れいこ 福岡 元スポーツ選手
伴とみこ 熊本 歌手
吉瀬みちこ 福岡 女優
上戸あや 東京 女優
平井りお 東京 アナウンサー

PERSONとTOKYO_PERSONテーブルの和集合が出力されまます。 ここでポイントなのが、"田中みほ"さんの両テーブルのデータは、すべての列で完全に同一である重複データであるということです。
UNIONは和集合のため、重複しているデータは削除します。重複を削除させたくない場合は以下のようにUNIONにALLオプションをつけます。これはこの後説明する、積集合(INTERSECT)と差集合(EXCEPT)も同様です。

SELECT *
FROM PERSON
UNION ALL
SELECT *
FROM TOKYO_PERSON;
NAME ADDRESS WORK
田中みほ 東京 モデル
潮田れいこ 福岡 元スポーツ選手
伴とみこ 熊本 歌手
吉瀬みちこ 福岡 女優
田中みほ 東京 モデル
上戸あや 東京 女優
平井りお 東京 アナウンサー

INTERSECTで積集合を求める

積集合は、INTERSECTという演算子を使います。
PERSONとTOKYO_PERSONテーブルに共通するレコードが出力されます。

SELECT *
FROM PERSON
INTERSECT
SELECT *
FROM TOKYO_PERSON;
NAME ADDRESS WORK
田中みほ 東京 モデル

EXCEPTで差集合を求める

差集合は、EXCEPTという演算子を使います。
ORACLEの場合は、EXCEPTをMINUSに置き換えて読んでください。なお、ORACLEにはALLオプションはないそうです。

SELECT *
FROM PERSON
EXCEPT
SELECT *
FROM TOKYO_PERSON;
NAME ADDRESS WORK
潮田れいこ 福岡 元スポーツ選手
伴とみこ 熊本 歌手
吉瀬みちこ 福岡 女優

UNIONとINTERSECTはテーブルの順序は関係なく同一の出力結果となりますが、 四則演算と同じで、EXCEPTはテーブルの順序で出力結果が異なるという注意点があります。

順序を変えた四則演算

  • 和集合(UNION): 4 + 3 = 7, 3 + 4 = 7
  • 積集合(INTERSECT): 4 * 3 = 12, 3 * 4 = 12
  • 差集合(EXCEPT): 4 - 3 = 1, 3 - 4 = -1



参考書籍:

Vim(テキストエディタ)の備忘録

Vimエディタの備忘録

Vimエディタの使い方

Vimは起動しただけでは文字入力を受け付けない。 この状態をノーマルモードというらしい。

ファイル編集の最低限

ノーマルモードで文字を挿入する位置まで移動して、iを入力。 これを文字入力可能状態(挿入モード)という。 文字入力が終わったらEscキーを押してノーマルモードに戻す。 ファイルの編集が完了したら:wで保存する。 編集が終了したら:qでファイル編集を終了する。 ファイルを保存せずにVimを終了したい場合には、:q!を入力する。

ファイル編集の便利操作

  • 行の末尾に文字を挿入するには、A(大文字)を入力する。
  • カーソル位置の文字を削除するにはxを入力する。
  • カーソルの左側の文字を削除するには、X(大文字)を入力する。
  • 範囲選択を行うには、v を押して範囲の先頭を選択し、矢印キーで移動する。
  • 選択範囲のコピーにはyを入力し、選択範囲の切り取りにはdを入力する。
  • コピー/切り取ったものの貼り付けには、P(大文字)を入力する。
  • 範囲選択せずにカーソル行のコピーにはyyを入力し、カーソル行の切り取りにはddを入力する。
  • ファイルの最初の行にカーソル移動するには、ggを入力する。
  • ファイルの最後の行にカーソル移動するには、G(大文字)を入力する。
  • 直前の操作の取り消しには、uを入力する。
  • 操作の取り消しの取り消しには、Ctrl + rを入力する。

参考: