ちょっと変わったキーボードを作った

この記事は rogy Advent Calendar 2019 の2日目の記事です。

こんにちは。ふらい(@ynhrt1250)です。
ちょっと変わったキーボードを作ったお話です。
実はこのキーボードは先日行われた展示会で展示してました。

こんなやつです!

特徴としては

  • キーが左右に5個ずつしかない
  • 左右完全セパレートで完全無線化
  • キーボードだけでなくマウス操作も可能
  • PC側に特殊なドライバ不要

などです。

“ちょっと変わったキーボードを作った” の続きを読む

猫でもできるsomething

この記事は rogy Advent Calendar 2018 16日目の記事です。

初めまして。猫(=・ω・=)になりたかったふらいです。普段は2匹の猫^ↀᴥↀ^と暮らしています。

簡単な自己紹介をすると、今年の6月までMaquinistaでNHKロボコンをやっていました。
今年のロボコンは(猫∩(^ω^∩)でもできる!?)4足歩行が課題として課せられていて後輩たちは頑張っているようです。
なおMaquinistaは12/23にADCの担当になっているのでお楽しみに!

自分はMaquinistaにいた時ははロ技研での活動はロボコンしかしてなかったのですが、引退したのでやることがなくなりました。(卒論を書け!)

今回はサーバーを立てるということに挑戦してみたので、そのことについて書こうと思います。

この記事は

  • サーバーっていう単語は聞いたことあるけどなんだかよくわからない
  • 無料でサーバー構築して遊んでみたい

という猫(^・o・^)ノ”向けに初心者が書いた記事ですので、ご容赦下さい。

なおタイトルに「猫(ฅ^・ω・^ ฅ)でもできる」とありますが、これは登録する際に何も考えなかったのでこうなってしまいましたが

  • お金がない猫(=ΦÅΦ=)でもできる
  • 専門知識がない猫(=^・^=)でもできる

という意味ということにしておきます。

サーバーとは

Wikipediaで調べてみます。

サーバーあるいはサーバ(英: server)は、サービスを提供するコンピュータである。

サービスを提供すれば、サーバーということです。英語訳しただけですね笑。

ではここでいうサービスとは何でしょうか。身近な例で考えてみます。

今あなたは、この記事をスマホで読んでいるとしましょう。(PCかもしれませんが)
実はこの記事はロ技研のサーバーに保存されています。
この記事を表示するために、あなたのスマホはロ技研のサーバーにこの記事を欲しいとお願いします(リクエスト)。
そのリクエストを受け取ったロ技研のサーバーはこの記事を送ってくれて(リスポンス)、それをスマホが表示してくれるのであなたは今この記事を読めています。

ここで既にサーバーという単語を使ってしまいましたが、Webページを提供してくれているのでサーバー、あなたのスマホはサーバーにお願いしてWebページをもらうのでクライアントと呼ばれます。

ここではWebサーバーを一例に挙げましたが、その他にもメールサービスを提供してくれるメールサーバー等、色々なサーバーが存在します。

どうやってサーバーを作るの?

サーバーと言うと、もしかしたら

こういうすごく強そうなやつを想像するかもしれません。(ちなみにこれはGoogleのデータセンターです。https://www.google.com/about/datacenters/gallery

しかし、上で説明したようにサービスを提供するコンピューターはサーバーです。自分のパソコンだってサービスを提供すればサーバーになれます。

自分のパソコンで簡単なWebサーバー

Node.jsを使った例を示します。Node.jsについてはここで説明しませんが、調べればいっぱい記事出てくるので調べてみて下さい。

const http = require('http');
const server = http.createServer(
  (request, response) => {
    response.write('Hello World!!');
    response.end();
  }
).listen(3000);

ただリクエストが来たらHello Worldとリスポンスを返すだけですが、これだけでできます。すごいニャン =^∇^*=
これを起動してブラウザでlocalhost:3000と入力すればHello Worldと表示されると思います。

今回はサーバーとクライアントが同一のパソコンなので、localhostと打つだけで自分自身が立ち上げてるサービスにアクセスできます。後ろについてる3000はポートと呼ばれる番号です。ポートがあることで、1つのサーバーで複数のサービスを動かしていても混ざってしまうことはありません。実はWebサーバーは80番ポートというお約束があり、普段はWebページにアクセスする時に毎回:80とは入力しませんが、サーバーの80番ポートにリクエストしています。

パソコンで立ち上げたWebページにスマホからアクセスしてみる

まずはサーバーもクライアントも同じネットワーク内にいる状態で試してみます。
つまりパソコンもスマホも家のWifiにつなげておけばOKです。
先程はlocalhostでアクセスしてましたが、今回はクライアントはサーバーとは別なのでそうはいきません。
ここでスマホからパソコンにアクセスするためにはパソコンのIPアドレスというものが必要になります。
ではパソコンのIPアドレスを調べてみましょう
ターミナルなりコマンドプロンプトなりを立ち上げて

ipconfig

と入力します。
するとズラーッと情報が表示されると思います。
その中で

IPv4 Address. . . . . . . . . . . : 192.168.1.8

と書かれた部分があると思います。私のパソコンはIPアドレスが192.168.1.8だということがわかりました。

あともう一つだけやることがあります。firewallをオフにします。
普段は外部から悪さをされないようにfirewall君が守ってくれてますが、今回は外からアクセスしたいのでオフにします。用が済んだらオンに戻しておきましょう。

Windowsの場合はこれでOK!
では、スマホのブラウザに

192.168.1.8:3000

と入力してみます。

やったニャン V(=^・ω・^=)v

家の外からでもアクセスしたい

今やったのは、同じネットワーク内にいるサーバーにアクセスする例でした。
つまり、家の外からモバイルネットワークを通してアクセスすることはできません。

それを実現するためには

  • 自宅のルーターのグローバルIPアドレスを調べる。
  • ルーターでサーバーになってるパソコンへポートフォワーディングの設定をする。

ことでできますが、話が長くなるので今回は省略します。
やってみたい方はポートフォワーディング等で検索してみて下さい。

サーバーを借りる

ここまでは自分のパソコンをサーバーにするお話をしてきました。
サーバーに求められることはリクエストが来たらリスポンスを返すことでした。
つまりサーバーは常時稼働しててインターネットに接続されていることが望まれます。
ですが、自分のパソコンを常時起動しっぱなしにするというのはあまりしたくないですよね。
そこでサーバーを借りるというという選択肢が出てきます。
つまり、どこかで動いているコンピューターを使わせてもらうということです。
でも借りるからにはお金がかかるんじゃない?と思いますよね。
そこで、今回は無料で借りられるサーバーを紹介します。

GCP(Google Cloud Platform)

Googleが提供するクラウドサービスです。仮想マシンを動かすことはもちろん、色々なサービスがあります。
https://console.cloud.google.com/getting-started?hl=ja
ここにアクセスするとこんな事が書いてあります。

色々制約はありますが、登録すると最初に$300分のクレジットをもらえて、1年間はもらったクレジットを使って色々なサービスを試すことができます。
一年間しかありませんが、サーバー立てて遊んでみたいという猫(=^ ڡ ^=)には十分ですね!

仮想マシンの設定などはここでは省略しますが、こちらも調べると丁寧に解説してくれてる方がいます。
自分はこのページとかを参考にさせてもらいました。

ネームサーバー

IPアドレスという話が先程もでてきました。
インターネットに繋がっているデバイスには全てIPアドレスが割り振られるので、それを使って特定のサーバーにアクセスできるというものでした。
ですが、皆さん普段Webページを見る時にIPアドレスを入力しませんよね。なんででしょう?
例えば昨日のADCの記事は https://blog.rogiken.org/blog/2018/12/16/adcなのでadcを作った と入力すればアクセスできます。IPアドレスはどこにも見つかりません。これを実現するためにはドメインを取得する必要があります。
この場合ドメインはblog.rogiken.orgにあたります。
実はネームサーバーというこれまたサーバーが世の中には存在して、blog.rogiken.orgと言われたらIPアドレスはxxx.xx.xx.xxxだよと返してくれるのです。つまり https://blog.rogiken.org/blog/2018/12/16/adcなのでadcを作った とURLを入力してアクセスすると一度ネームサーバーがIPアドレスを教えてくれて、最終的にはやっぱりIPアドレスを使ってロ技研のサーバーにアクセスしてます。d(=^・ω・^=)b

ドメインを取得

それではいつまでも自分のサーバーにIPアドレス直入力でアクセスするのもかっこ悪いので自分用のドメインを取得しましょう!
ですが、これも普通はお金がかかります。
今回はもちろんドメインも無料で取得していきます。
そこでこれです。
https://www.freenom.com/ja/index.html

freenomでは無料で自分用のドメインを取得することができます。やったニャン Σ(^._.^=ノ)ノ
ですが、無料であることにはもちろん理由があります。
freenomで無料で取得できるドメインは

.tk (トケラウ)
.ml (マリ)
.ga (ガボン)
.cf (中央アフリカ)
.gq (赤道ギニア)

と、あまり馴染みのない国に割り振られているドメインに限られます。.comとか.jpなどよく見るやつは無料ではゲットできません。
でもこれも遊びでドメイン欲しい程度なら全然ありだと思って私は使ってます。

SSL

こういう表示に出会うことがたまにあります。

これはサーバーとの通信が暗号化されていない場合に表示されることがあります。
Webサーバーを立てて何もしないと基本的に通信は暗号化されていません。暗号化にはSSLというプロトコルが使われていますが、これを使うための証明書を取るのにこれまたお金がかかります。
そこでSSLの証明書も無料で取ろうということをやっていきます。ฅ(≚ᄌ≚)
https://letsencrypt.org/

Let’s Encryptを利用することで無料でSSLの証明書を取得することができます。
https://letsencrypt.jp/usage/にあるようにcertbotというのを使うと簡単です。

certbotを使うとDNS TXT recordというのを吐き出してくれます。これをコピーしてFreenomのドメイン管理ページに行きTXTレコードを追加します。

****mKmy5****と書かれている部分です。
ちなみに35.***.*7.120は私のサーバーのIPアドレスです。

freenomの設定ができたらnginxにも証明書とキーファイルを指定してあげる必要があります。

nginxって?

こことか参考になるかな。調べてみても「Apacheとの比較」みたいのばっかでてきて初心者には優しくない記事が多い気がします。

nginxは一言でいうとWebサーバーです。例えば

https://luciole.gq/about.html

にアクセスすると私のサーバー上にある about.html が表示されます。これをやってくれてるのがnginxです。最初にやった例だとlocalhost:3000のあとに何をつけてもHello World!! しか返って来ませんが、それでは到底Webサーバーとは呼び難いですよね。

またnginxは単純なWebサーバーとしての機能の他にのリバースプロキシやバーチャルホストの機能もあります。nginxがリバースプロキシの役割をしてくれることによって、サーバーと外部の間でSSLで暗号化された通信が可能になっています。

バーチャルホストとは
app.luciole.gq
wiki.luciole.gq
など、複数のドメインを1つのサーバーで扱う技術です。いずれも同じIPアドレスですが、バーチャルホストによって別のものが返ってきます。

サーバーで何してるの?

ここまでずっとサーバー構築のお話でしたが、やっと中身についてです。

上で書いたように私のサーバーはluciole.gq です。

ここで動いているのは

です。blogは書くつもりがないので立ち上げてないです。

wikiは自分用のメモや記録等に毎日役立ってます。

Node.jsのアプリはWebSocketを使ってなんか遊んでみようということで、本当は今日までにもう少し面白いものを作る予定でしたが、今はただ足し算するだけのが動いてます。これはサーバーがないとできないことをやろうと思って、今アクセスしている人全員の数字を足した結果が表示されてます。まあこれができればチャットとかも同じ要領で作れるねって感じです。

twitter bot は今の所、毎日猫^ↀᴥↀ^をつぶやくだけです。こちらももう少し機能を追加したいなーと思ってます。暇になったらやろうと思います。

 

以上長くなりましたが、ふらいでした。(=^・ω・^=)丿