2020-03-15

Webの歴史

現在、HTML5&CSS3 レッスンブックを読んでいて、Webの歴史について触れているページがあったので自分で色々調べてみたことの備忘録として今回の内容を書きます。

ちなみにHTML5&CSS3 レッスンブックのリンクは次に。

作者:エビスコム
発売日: 2013/05/24
メディア: 単行本

「どのようなコンピュータからでも情報を閲覧し、共有できるようにする」ということを目的に、1989年にCERN(Conseil Européen pour la Recherche Nucléaire : 欧州原子核研究機構)で研究をしていたティム・バーナーズ・リーによって提案されたものが現在のWebの起源である。正式にはWWW(World Wide Web)。

その後、WWWはCERNを中心とした研究機関や大学を中心に開発が進み、1993年にオープンな形となった。同時に、Mosaicというブラウザや少し後だが、Netscapeというブラウザがリリースされ、WWWは爆発的に普及した。

しかし、当時はCSSという規格はなかったため、HTMLで見た目のデザインを指定する機能が独自拡張されていった。その結果、OS、ブラウザ依存という問題が発生してしまった。そこでMITのコンピュータ科学研究所にW3C(World Wide Web Consortium)という組織を発足。そして、先の問題を解決するために規格を決めていった。1999年には、HTML4.01という規格が制定され、「見た目のデザインはCSSで行う」という方針が明確になった。

そして、HTML5では「セマンティクス」という概念が取り入れられた。

大まかな流れを書いていったが、Webで検索するとものすごくわかりやすい記事を見つけたのでリンクを貼っておきます。

https://www.internetacademy.jp/special/history.html

ちなみに、著者は1999年生まれなので、今回、1999年からCSSが主に使われるようになったということを知り、CSSに親近感が湧きました。

次の記事では、じゃあ、最初に作られたWebページはどんなものなの？ということに対して答えていくのでぜひ見てください！

osa.hatenablog.jp

2020/03/15 18:11

2020-03-14

pythonでバイナリファイルに変換し、画像を作ってみた

今回は、16進数でファイルを作成し、それをバイナリファイルにそのまま変換して画像を作成してみました。

参考としたブログは次のものです

https://qiita.com/chooyan_eng/items/151e67684e5ef8d1a695

このブログを見て、これこそ自分がやってみたかったものだと思い、実際にやってみました。その中で、自分なりの変更を加えたので刮目してください。

完成図

f:id:OSa:20200314101403p:plain

この画像を自分でバイナリから作成できるようにすることが今回の目標。

作り方

まずは先のブログにあるsquare_bitmap.txtを作成する
square_bitmap.txtをバイナリファイル(square_bitmap.bpm)に変換する
作成したバイナリファイルのサイズを確認してsquare_bitmap.txtを完成させる
もう一度square_bitmap.txtをバイナリファイル(square_bitmap.bpm)に変換する
バイナリファイルの完成！ macならopen square_bitmap.bmpで開いて見てみよう！

詳しく説明

1. まずは先のブログにあるsquare_bitmap.txtを作成する

vimなどでsquare_bitmap.txtを作成しましょう

 vim square_bitmap.txt

以下square_bitmap.txt

 ## ファイルヘッダ ##

42 4d           # ファイルタイプを2バイトで指定。Bitmapは必ず'BM' (16進数で 42 4d)
00 00 00 00     # ファイルサイズを4バイトで指定。TODO: あとで
00 00           # 予約領域1を2バイトで指定。常に0
00 00           # 予約領域2を2バイトで指定。常に0
00 00 00 00     # ファイルの先頭から画像データまでのバイト数を4バイトで指定。 TODO:あとで

## 情報ヘッダ ##
28 00 00 00     # 情報ヘッダサイズを4バイトで指定。
10 00 00 00     # 画像の横幅（単位はピクセル）を4バイトで指定。
10 00 00 00     # 画像の高さ（単位はピクセル）を4バイトで指定。
01 00           # プレーン数を2バイトで指定。常に1
01 00           # 色ビット数を2バイトで指定。今回は白黒2色なので1
00 00 00 00     # 圧縮形式を4バイトで指定。
40 00 00 00     # 画像データ部分のサイズを4バイトで指定。
10 00 00 00     # 横方向の解像度を4バイトで指定。
10 00 00 00     # 縦方向の解像度を4バイトで指定。
00 00 00 00     # パレット数を4バイトで指定。
00 00 00 00     # 重要色数を4バイトで指定。

## パレットデータ ##
ff ff ff 00     # RGB指定。4バイト目は常に0。
00 00 00 00     # RGB指定。4バイト目は常に0。

## 画像データ ##
00 00 00 00
7f fe 00 00
40 02 00 00
40 02 00 00
40 02 00 00
40 02 00 00
40 02 00 00
40 02 00 00
40 02 00 00
40 02 00 00
40 02 00 00
40 02 00 00
40 02 00 00
40 02 00 00
7f fe 00 00
00 00 00 00

2. square_bitmap.txtをバイナリファイル(square_bitmap.bpm)に変換する

次のpythonのファイル(バイナリファイルへ変換するファイル)を作成しましょう

 vim translate.py

import re
with open('square_bitmap.txt', 'r') as fin:
  s = fin.read()
  s = re.sub(r'[\r\n\t ]|0x|##|#(.*)|[ぁ-んァ-ン一-龥g-zA-Z]|。|、|\'|\(|\)|:|ー|（|）', '', s)
  bins = [int(a+b,16) for a, b in zip(s[::2], s[1::2])]
  with open('square_bitmap.bmp', 'wb') as fout:
     fout.write(bytearray(bins))

作成したら、square_bitmap.txtをバイナリファイルに変換しましょ変換しましょう

 python translate.py

3. 作成したバイナリファイルのサイズを確認してsquare_bitmap.txtを完成させる

次のコマンドを実行してバイナリファイルのサイズを確認しましょう

 $ ls -l square_bitmap.bmp
-rw-r--r--@ 1 username  staff  126  3 12 17:27 square_bitmap.bmp

これでバイナリファイルのサイズが126バイトとわかる。また、このことから全体のファイルサイズから画像データの部分を除いたオフセットは 126 - 4バイト×16行 = 62であることがわかる。

それぞれを126 → 7e、62 → 3eと16進数に変換して、バイナリファイル内のファイルヘッダにおけるTODO : あとでの部分を書き換えます

 vim square_bitmap.txt

でバイナリファイルを開いて書き換えた後のファイルヘッダ内

 ## ファイルヘッダ ##
42 4d           # ファイルタイプを2バイトで指定。Bitmapは必ず'BM' (16進数で 42 4d)
7e 00 00 00     # ファイルサイズを4バイトで指定。
00 00           # 予約領域1を2バイトで指定。常に0
00 00           # 予約領域2を2バイトで指定。常に0
3e 00 00 00     # ファイルの先頭から画像データまでのバイト数を4バイトで指定。

4. もう一度square_bitmap.txtをバイナリファイル(square_bitmap.bpm)に変換する

それでは、もう一度square_bitmap.txtをバイナリファイルに変換しましょ変換しましょう

 python translate.py

5. バイナリファイルの完成！ macならopen square_bitmap.bmpで開いて見てみよう！

はい！画像ファイルsquare_bitmap.bmp完成！

 open square_bitmap.bmp

をして画像が表示されると思います！

ちなみに、square_bitma.bmpの中身は次のコマンドで見ることができるので参考にしてみてください！

 $ od -Ad -tx1 -v square_bitmap.bmp

0000000    42  4d  7e  00  00  00  00  00  00  00  3e  00  00  00  28  00
0000016    00  00  10  00  00  00  10  00  00  00  01  00  01  00  00  00
0000032    00  00  00  00  00  00  10  00  00  00  10  00  00  00  00  00
0000048    00  00  00  00  00  00  ff  ff  ff  00  00  00  00  00  00  00
0000064    00  00  7f  fe  00  00  40  02  00  00  40  02  00  00  40  02
0000080    00  00  40  02  00  00  40  02  00  00  40  02  00  00  40  02
0000096    00  00  40  02  00  00  40  02  00  00  40  02  00  00  40  02
0000112    00  00  40  02  00  00  7f  fe  00  00  00  00  00  00
0000126

最後に

今回はバイナリから画像ファイルを作成してみました。

参考にしたブログの方と異なるのは作成したテキストファイルをバイナリファイルに変換する方法でした。

私はpythonで変換ファイルを作成したのですが、ブログにおけるコマンドが実行できなかったからであり、おそらくF#をインストールしていないからだと思います。

というわけでpythonでバイナリファイルに変換するという方法でバイナリマップを作成してみました。

参考ブログ

https://qiita.com/chooyan_eng/items/151e67684e5ef8d1a695

https://qiita.com/chooyan_eng/items/ce1216c947d81d287582

https://qiita.com/int_main_void/items/439d75f6673e5db53d96

2020/03/14 10:20

2020-03-12

Mac ターミナルからurl指定でWebページを開くコマンド

今回は題名通り、Macターミナルからurl指定でWebページを開くコマンドを紹介します。

前回の投稿で、自分でchromeコマンドというものを作成しましたが、必要なかったみたいです。

前回作成したchromeコマンド↓

$ chrome https://osa.hatenablog.jp

openコマンド↓

$ open https://osa.hatenablog.jp

それだけです。Macって便利ですね。

前のブログ

osa.hatenablog.jp

2020/3/12 14:23

2020-02-24

zshにおいてgoogle chromeでURL指定ページを開く方法 .zsh

zsh

今回はzshから、googleの検索エンジン(url指定)始動方法を紹介します。

目標

$ chrome https://osa.hatenablog.jp

というようなコマンドを打った時に、"https://osa.hatenablog.jp"をgoogle chromeで開くようにする。開いたページが次のようになれば良い。

f:id:OSa:20200224122739p:plain

方法

$ vim .zshrc

で.zshrcファイルを開き、次のコードを入力する。

 # terminalからurl指定で表示
 #
chrome() {open -a "Google Chrome" "$1"}

入力したら、

$ source .zshrc

で更新する。

これでchomeコマンドを使用することができる。

今回はgoogle chromeにおけるurl指定の方法がネット上に見られなかったので、方法を記載した。

参考

https://qiita.com/sayama0402/items/46241c07c30e431fe38f

2020-02-24

zshでのgoogle検索をする方法 .zshrc

zsh

今回は、zshから、googleの検索エンジン(ワードでの検索を行う)始動方法を紹介する。

目標

$ google zsh google検索

というようなコマンドを打った時に、google chromeを開き、"zsh google検索"となるようにする。コマンドを打ったら次のような画面を出せるようにしたい。

f:id:OSa:20200224121048p:plain

方法

$ vim .zshrc

で.zshrcファイルを開き、次のコードを入力する。

 # Goolge Search by Google Chrome
 # terminalからググれる
 #
 google() {
     local str opt
     if [ $# != 0 ]; then
         for i in $*; do
             # $strが空じゃない場合、検索ワードを+記号でつなぐ(and検索)
             str="$str${str:++}$i"
         done
         opt='search?num=100'
         opt="${opt}&q=${str}"
     fi
     open -a Google\ Chrome http://www.google.co.jp/$opt
 }

入力したら、

$ source .zshrc

で更新する。

これでgoogleコマンドを使用することができる。

このような記事は巷に溢れているが、自分用のまとめを作りたかったために、今回の記事を書いた。

ただ、google chromeにおけるurl指定の方法はあまり見られなかったので、次の記事に記載しておく。

osa.hatenablog.jp

参考

qiita.com

2020-02-13

ls, mv, rmなどのコマンドはどこから来たのか、それらは何者か、それらはどこへ行くのか、、、

コマンドコンピュータ

我々はどこから来たのか我々は何者か我々はどこへ行くのか

D'où venons-nous ? Que sommes-nous ? Où allons-nous ?

f:id:OSa:20200213215100j:plain

ポール・ゴーギャンの有名な絵画にあるように、我々人間は色々な疑問を抱えている。しかし、今の私にとっての大きな疑問は題名の通り、コマンドは何者なのか。

それだけだ。

さて、茶番はここら辺で終えて本題に入る。

今回はターミナル上でよく使うコマンドls,mv,rmなどがどこにあり、どのようなものなのかについて説明する。

ターミナル上で操作する時に必要なものがコマンドであるが、あまりにも当たり前のように感じているため、どっかから降ってくるもののように感じてしまう筆者であるが、今回はこのコマンドたちについて調べてみた。

結論から言うと、これらのコマンドはそれぞれファイル( ls なら lsファイル, mv なら mvファイル)である。

今回は "ls" についてみてみよう。

まず始めに、lsファイルを探すために次のコマンドをターミナルで実行する。

$ which ls

すると、次のように返ってくる

$ /bin/ls

これが意味することは、ルートディレクトリの下のbinディレクトリの下にlsファイルがあるよと言うことだ。

それでは、binディレクトリに移動しよう

$ cd /bin

それでは、実際にlsファイルの中身をみていこう！

$ vim ls

$ cat ls

上記の2つの方法でみれる。

f:id:OSa:20200213213332p:plain

お分かり頂けただろうか。

そう！人間には読めないようなデータファイルである。

これが "ls" コマンドの正体である。

これで目標は達成したが、せっかくなのでコンピュータはこのファイルをどう見ているのか、2進数とまではいかないが、16進数表記で見てみよう！

バイナリファイルを表示させるなら、

$ hexdump -C ls
00000000: cffa edfe 0700 0001 0300 0080 0200 0000  ................
00000010: 1200 0000 1807 0000 8500 2000 0000 0000  .......... .....
00000020: 1900 0000 4800 0000 5f5f 5041 4745 5a45  ....H...__PAGEZE
00000030: 524f 0000 0000 0000 0000 0000 0000 0000  RO..............
00000040: 0000 0000 0100 0000 0000 0000 0000 0000  ................
00000050: 0000 0000 0000 0000 0000 0000 0000 0000  ................
00000060: 0000 0000 0000 0000 1900 0000 2802 0000  ............(...
00000070: 5f5f 5445 5854 0000 0000 0000 0000 0000  __TEXT..........
00000080: 0000 0000 0100 0000 0050 0000 0000 0000  .........P......
00000090: 0000 0000 0000 0000 0050 0000 0000 0000  .........P......
000000a0: 0700 0000 0500 0000 0600 0000 0000 0000  ................
000000b0: 5f5f 7465 7874 0000 0000 0000 0000 0000  __text..........
000000c0: 5f5f 5445 5854 0000 0000 0000 0000 0000  __TEXT..........
000000d0: 080f 0000 0100 0000 1835 0000 0000 0000  .........5......
000000e0: 080f 0000 0200 0000 0000 0000 0000 0000  ................
000000f0: 0004 0080 0000 0000 0000 0000 0000 0000  ................
00000100: 5f5f 7374 7562 7300 0000 0000 0000 0000  __stubs.........
...

とか、

$ xxd ls
00000000  cf fa ed fe 07 00 00 01  03 00 00 80 02 00 00 00  |................|
00000010  12 00 00 00 18 07 00 00  85 00 20 00 00 00 00 00  |.......... .....|
00000020  19 00 00 00 48 00 00 00  5f 5f 50 41 47 45 5a 45  |....H...__PAGEZE|
00000030  52 4f 00 00 00 00 00 00  00 00 00 00 00 00 00 00  |RO..............|
00000040  00 00 00 00 01 00 00 00  00 00 00 00 00 00 00 00  |................|
00000050  00 00 00 00 00 00 00 00  00 00 00 00 00 00 00 00  |................|
00000060  00 00 00 00 00 00 00 00  19 00 00 00 28 02 00 00  |............(...|
00000070  5f 5f 54 45 58 54 00 00  00 00 00 00 00 00 00 00  |__TEXT..........|
00000080  00 00 00 00 01 00 00 00  00 50 00 00 00 00 00 00  |.........P......|
00000090  00 00 00 00 00 00 00 00  00 50 00 00 00 00 00 00  |.........P......|
000000a0  07 00 00 00 05 00 00 00  06 00 00 00 00 00 00 00  |................|
...

を使うと良い。

参考

rdera.hatenadiary.org

2020/02/13 21:45

2020-02-13

初めてのVimプラグイン

Vim コンピュータ

今回は、本当に本当に初歩のVim プラグインを作ってみます。

まずはじめに、ターミナルを開いて、my-vim-pluginディレクトリを作ります。

mkdir my-vim-plugin

次に作ったディレクトリに移動

cd my-vim-plugin

そして、pluginディレクトリとREADME.mdを作成(README.mdは作らなくてもいいが、習慣として)

mkdir plugin

touch README.md

そのあとはpluginディレクトリに移動

cd plugin

そして、script.vimにプラグインするテキストを書き込む

vim script.vim

書き込む内容は別の方が作られたものをお借りしました。ランダムに日付、時刻などを作成するプラグインです。

function! GetRandom(min, max)
  return reltime()[1] % (a:max - a:min + 1) + a:min
endfunction

function! GetRandomDate()
  return GetRandom(1980, 2017) . '-' . GetRandom(1, 12) . '-' . GetRandom(1, 28)
endfunction

function! GetRandomDateTime()
  return GetRandomDate() . ' ' . GetRandom(0, 23) . ':' . GetRandom(0, 59) . ':' . GetRandom(0, 59)
endfunction

function! InsertRandomDateTime()
  let datetime = GetRandomDateTime()
  execute ":normal a" . datetime
endfunction

command! RandDateTime call InsertRandomDateTime()

書き終えたら、:wqで保存！

最終的なファイル構成は次のようになっています

my-vim-plugin
├── README.md
└── plugin
    └── script.vim

早速、プラグインを体験してみましょう！

まずvimでの編集中にscript.vimを読み込む必要があるので、簡単のためscript.vimのあるディレクトリで試してみます。

したがって、pluginディレクトリでvim sampleなどとして編集画面を開きます

そして、編集画面上で:source script.vimを実行します。(:wqと同じように)

そうしたら、プラグインされるので、:RandDatetimeを実行します。(tabキーで予測変換してくれます)

実行すると、ランダムな年月日と時刻(e.g. 2010-11-16 9:1:17)が表示されます

以上が本当に本当に初心者の私が伝えられるVim プラグイン入門でした。

今回作成してみて、毎回:source <file>を実行しなければならないのか、面倒と感じるかもしれませんが、パッケージ機能を使用すればVimを起動するのと同時にプラグインが読み込まれるので安心してください。

パッケージについては私自身まだまだ勉強中なので、いつかのブログでお知らせしたいと思います！

2020/02/13 16:11

OSの日記

通信に関する研究をする学生A

Webの歴史

pythonでバイナリファイルに変換し、画像を作ってみた

完成図

作り方

詳しく説明

1. まずは先のブログにあるsquare_bitmap.txtを作成する

2. square_bitmap.txtをバイナリファイル(square_bitmap.bpm)に変換する

3. 作成したバイナリファイルのサイズを確認してsquare_bitmap.txtを完成させる

4. もう一度square_bitmap.txtをバイナリファイル(square_bitmap.bpm)に変換する

5. バイナリファイルの完成！ macならopen square_bitmap.bmpで開いて見てみよう！

最後に

参考ブログ

Mac ターミナルからurl指定でWebページを開くコマンド

zshにおいてgoogle chromeでURL指定ページを開く方法 .zsh

目標

方法

参考

zshでのgoogle検索をする方法 .zshrc

目標

方法

参考

ls, mv, rmなどのコマンドはどこから来たのか、それらは何者か、それらはどこへ行くのか、、、

初めてのVimプラグイン