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

学習履歴

プログラミングなどの学習履歴

webサーバとアプリサーバの違い

webサーバは翻訳を直で記すと以下のように表現されます。

webサーバーはユーザーから送られてきた自サイトへのリクエストを受け取り、なんらかの処理を加えるプログラムです。そして、場合によってはあなたのRailsアプリケーションにリクエストを投げます。

 

アプリサーバだと、

アプリケーションサーバーはあなたのRailsアプリケーションを動かしているものです。

 

関係性を例えると、ラジオDJがリスナーから音楽のリクエストを受け取ってそれを専用の機器で流すような感じです。

ここではラジオDJがwebサーバで専用の機器がアプリサーバです。

 

あとRailsに限って言えば、Rails用のアプリサーバは山のようにあります。

しかもそれぞれのアプリサーバの仕様が違うのでアプリを動かす時にはそれぞれのサーバのルールにのっとって設定しなければならないので余計にややこしくなります。

それを解決してくれるのがRackという機能です。

RackはRuby専用の万能通訳者のようなものでRubyに関するフレームワークとアプリサーバの間にたって通訳してくれるので、何の設定をしなくても作ったアプリを動かすことができる大変べんりな機能です。

electronで実行ファイルを生成するときにwindows環境では注意

Windows環境でElectronで作成した作品の実行ファイルを生成するときに少し躓きました。

 

ドットインストールではMac環境、他のサイトでも大多数がMac環境で実行ファイルを生成する方法がありましたが肝心のWindowsではどうすればいいのかの情報がめちゃくちゃ少なかったです。

 

まずElectronのバージョンの確認ですが、electron -vとしても何も表示されませんでした。だから私の場合ですが、バージョンを確認するためにユーザーフォルダまで移動します。

その中に「.electron」という隠しフォルダがあるのでそこへ移動します。

そしてその隠しフォルダの中にはバージョンの入ったzipフォルダかファイルが存在するのでバージョン確認ができます。

 

次に実行ファイルの作成ですが、いちいち長いコマンドをうつのが面倒なので下記のサイトを参考にしました。

tj.hateblo.jp

 

ここではbuild.jsファイルをelectronアプリがあるフォルダ下へ作成しました。

作成したら参考サイトにあるように「node build.js」コマンドを入力すると指定したところに実行ファイルが入ったフォルダが作成されます。

これで完了です。

npmコマンドでvue.jsの環境を作成(Windows)

Node.jsとVue.jsを組み合わせて何か作れればと思い、環境を整えようと思いましたが、少しつまづいてしまったのでその記録を残します。

 

私の環境はWindows8.1です。

まずNode.jsのインストールですが、最新版ではうまくいきませんでしたので

バージョンを5.11.1にしました。(上手くいかなかったというのはwebpackでプロジェクトを作る時です)

その際にNode.jsのバージョン管理ツールであるnodistを使いましたのでバージョンによって環境を整えることができませんということを防ぎます。

 

nodistのインストールのやり方

qiita.com

 

 あとは以下のリンク先の通りにすればうまくいきました。

zhuanlan.zhihu.com

 

中国語で書かれていますが、中国語が分からなくてもコマンドのみを

追っていけばうまくいきます。始まりは「npm install vue」からです。

そこから順を追って進めていくだけです。

 

最後の「npm run dev」で開発環境にアクセスできることが確認できたら、

「npm run build」で実際に動くソースを作成したら準備完了です。

以下のサイトも参考になります。

qiita.com

 

beautifulsoupでスクレイピングサンプルを作成

pythonスクレイピングライブラリの一つであるbeautifulsoupを使ってサンプルを作ってみました。

GitHubにあげています⇒

https://github.com/yyyuuuiii/myscraping

 

基本的にはお目当てのデータがのっているタグまで階層を降りていくというものですが、入れ子になっているタグのデータを抜き出す際には注意が必要でした。

beautifulsoup関連のサイトを見ていくと気づいたのがよくfindAllを使っていることに気づきました。でもこのfindやfindAllは使ってみると結構な曲者で、抜き出したいデータがある一番外側のタグのID名かクラス名を指定してfindAllで抜き取ると確かに一番外側のタグから内側までの情報が全て抜き出せます。

ただし欲しい情報がその内側のある個所だけだった場合、findAllを使ってから以下のようにすると上手く抽出できるだろうと思いきやエラーがでてしまいました。

 

yt_thumb_clip = soup.find_all("span", {"class": "yt-thumb-clip"})
srcb = yt_thumb_clip.img
print(srcb["src"])

 

しかしこれを以下のようにすると抽出できました。

for yt_thumb_clip in soup("span", {"class": "yt-thumb-clip"}):
srcb = yt_thumb_clip.img
print(srcb["src"])

基本的な書き方としてはfor文を使ってから、タグを指定していくのが失敗の少ない方法だと思います。
あとbeautifulsoupにしろ他のスクレイピングのライブラリはバージョンによってimport文が異なるのでどれが正しいimport文なのか見分けるのに少し躓きました。
pythonスクレイピングのライブラリのチュートリアルは日本語へ訳されたものが少ないので書き方を特定するまでに英語があまり得意ではない人にとっては少し時間がかかると思います。

ただbeautifulsoupの基本的な書き方はGitHubに載せているような形なのでご参考にんれれば幸いです。

IT用語でなぜこういう名前を付けた?

IT業界にいるとどうしてもなんでこういう名前をつけたのか?と思うことが多々あります。

 

一番突っ込みたくなったのがcookie(クッキー)です。

ウェブサイトを訪問した際にコンピュータに一時的に保存される情報のこととありますが、お菓子のクッキーと何も関係がないので他の人に説明するために由来を知っておこうと思いました。

でもcookieはmagic cookieから来ているそうです。magic cookieを省略してcookieと読んでいて意味は皆さんが普段使っているcookieの意味と同じです。

ウェブが発明される前からあったようでX端末(下の機器)の

f:id:ayshi:20161119103158p:plain

MIT-MAGIC-COOKIE-1認証プロトコルにおいてサーバーを起動するたびにサーバーとシステムを起動したユーザーを紐づけるためにmagic cookieが作成されるという仕組みが元ネタだそうです。

 

今回は自分が一番知りたかったcookieについてだけですが、普段何の気なしに使っている用語がなぜこの名前を付けたんだろうと由来を知ると他の人に説明するときにプラスになると思います。

プログラミング言語pythonなんてニシキヘビじゃなくて空飛ぶモンティ・パイソンっていう昔のコメディ番組からきてるそうですからね。

自分にとってサーバー関連は難しく感じてしまう

サーバーはPCを触る上で欠かせないものですが、私は正直このサーバー関連やネットワーク関連のことへの理解が乏しく何か難しく感じてしまいます。

 

共有できたり、HPを閲覧できたり、ファイルなど送ることができたりserveっていう単語から来てるのに給仕とはほとんど関係ないことまで含まれているのでサーバーの役割を理解というか、想像しにくいことが私にとってものすごく嫌な気分にさせるものだなという印象でした。

 

自分なりにサーバーを説明してみると、サーバーは英語のserverという給仕する人、提供してくれる人という意味から来ています。

インターネットでホームページを閲覧するのにリクエストというホームページがおいているサーバーにこのホームページが見たいんですと依頼をかける意味の言葉を使います。

給仕をふまえて言うと、居酒屋で店員に料理や飲み物を注文することと同じで、

このホームページを見たいと注文をだしていることになります。

 

ではサーバーにファイルなどを送る場合はどうでしょうか?

サーバーにファイルなどを送る時には公開鍵、秘密鍵が必要になってきますが、これも居酒屋関連でいうとお酒を自前で持ち込んでお店に置いてもらうとします。

これでいうとお酒がファイルです、でもこれを決まったメンバー以外に飲まれてしまうのは困るので店に飲まれないようにするための錠前を渡して、その錠前の鍵はメンバーで共有するとメンバー以外の人はそのお酒を飲むことはできなくなります。

ここでいうと錠前が公開鍵で錠前の鍵が秘密鍵にあたります。

つまりファイルをメンバー以外見ることができないようにサーバーに公開鍵を預けておいて秘密鍵はメンバーで管理するという流れになります。

 

でも反対に誰でも飲んでもOKですとなった時は店の中にいる他のお客さんが共有してそのお酒を飲むことができます。サーバーには例えばオフィス内にいる人全員がそのファイルを見ることができる、いわゆる共有という顔も持っています。

 

大体自分なりに例えて説明したつもりですが、間違えていたら訂正お願いします。

ドラッグアンドドロップの実装で必要な機能

Vue.jsでドラッグアンドドロップの実装をしている時に必要な機能とは何だろうかと考えてみました。

その時にふっと思いましたのがドラッグアンドドロップってクレーンゲームと同じなのではということです。

 

ドラッグアンドドロップには7つもイベントがありますが、

基本的にドラッグアンドドロップで必要な機能は大きく分けて3つ

①dragstart

②dragover

③drop

 

これをクレーンゲームにあてはめると

①マウスでドラッグしたいところまで移動

 ⇒クレーンを景品の上まで移動させる

 ここはマウスの移動だけなので特に実装はなし

 

②クリックしたままにする

 ⇒クレーンで景品をつかむ

  ondragstart

 

③クリックしたままで移動

 ⇒クレーンで景品をつかんだまま、移動先まで移動

  dragover

 

④移動先でクリックを外す

 ⇒移動先でクレーンが景品を離す

  drop

 

ドラッグアンドドロップを実装するとき必要な機能は何ぞやと

なった時に思い出してもらえると嬉しいです。