暗号ツール Webアプリケーション  その2

前書き

 この記事は,SLP KBIT Advent Calendar 2019 の20日目の記事です。

adventar.org

この記事は、「暗号ツール Webアプリケーション  その2」です。その1を見ていない人は、先にその1を閲覧してもらえるとありがたいです。

目次

Webアプリケーション

 続いて、Webアプリケーションの作り方について簡単に説明します。
まず、初めに文字を表示させてみましょう。 今回は、やっほーと表示させましょう。 文字を表示させるには、以下のようなプログラムになります。

require 'sinatra'
require 'sinatra/reloader'
enable :sessions

class App < Sinatra::Base
    get '/' do
        'やっほー'
    end
end
App.run!

require 'sinatra'は、sinatraというフレームワークの組み込むための宣言です。
require 'sinatra/reloader'は、ソースコードが変更された時、サーバに適応してくれる便利な機能と思っておいてください。 get '/' do~end は、'/'にgetメソッドでアクセスされたら、do~endの内容が実行されます。

Ruby {ファイル名}.rbで実行し、ブラウザからhttp://localhost:4567でアクセスします。 以下のように表示されると思います。 f:id:Drink_15:20191219122346p:plain

 次に、erbファイルを利用して文字を表示させたいと思います。 プログラムは、以下のようなものになります。

rbファイル

class App < Sinatra::Base
    get '/' do
      @title = 'やっほー'
      @subtitle = 'ここは、富士参か?'
      erb :{erbのファイル名}
    end
end
App.run!

erbファイル

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title><%= @title %></title>
    </head>
    <body>
        <form action="/" method="post">
            <h4><%= @title %></h4>
            <p><%= @subtitle %></p>
        </form>
        <br>
    </body>
</html>

@titleと@subtitleに文字列を代入し、erbファイルで表示しています。 ブラウザには、以下のように表示されると思います。 f:id:Drink_15:20191219124028p:plain

 次にテキストとボタンを付け加えていきましょう。 <input type=" " name=" " value=" ">のコードを付け加えます。typeのところをtextにすればテキスト、submitにすればボタンが生成されます。nameは変数、valueは属性を設定しています。今回は暗号ボタンと復号ボタンを付け加えましょう。また、暗号を生成するWebアプリケーションと分かりやすいようにtitleとsubtitleも’暗号ツール!’と’使ってね!’に変えたいと思います。 付け加えたプログラムが以下のものになります。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title><%= @title %></title>
    </head>
    <body>
        <form action="/" method="post">
            <h4><%= @title %></h4>
            <p><%= @subtitle %></p>
            <input type="text" name="sts1">
            <input type="submit"  value="暗号">
            <br>
            <input type="text" name="sts2">
            <input type="submit"  value="復号">
            <br>
        </form>
        <br>
    </body>
</html>

以下のように表示されると思います。 f:id:Drink_15:20191219130358p:plain

 作業もいよいよ終盤です。 ここから、一気に完成させようと思います。現段階では、同じフォームの中にボタンが2つあります。1つのフォームに1つのボタンしか設定できないため、フォームをもう1つ作成し、送信先を区別します。区別するため<form action="/" method="post">の"/"を"/cip"と"/dec"に変えます。続いて送信したデータを受け取る部分でrbファイルに作成します。その時、post "/cip" do ~ endpost "/dec" do ~ endのコードを付け加えます。<form action="/" method="post">では、ユーザーがボタンを押したとき'/'に対してpostを送信し、それをサーバが受け取ります。'/'に対してpostが送られた時にdo~endの内容が実行されます。この部分でテキストの文字列を暗号化、復号を行います。なので、この中にその1で考えた暗号化と復号のプログラムを挿入します。その際、@before1と@before2にtextの文字列、@result1に暗号化した文字列、@result2に復号した文字列を代入し表示します。 プログラムは、以下のようになります。

rbファイル

require 'sinatra'
require 'sinatra/reloader'

enable :sessions

class App < Sinatra::Base
    get '/' do
        @title = '暗号復号ツール!'
        @subtitle = '使ってね!'
        erb :{erbのファイル名}
    end
    post '/cip' do
        @title = '暗号復号ツール!'
        @subtitle = '使ってね!'
        @before1 = params[:sts1].to_s
        keyword = params[:sts1].to_s
        code = [] 
        j = 1
        keyword.chars.each do |char|
            if (65 <= char.ord && char.ord <= 90) then
                num1 = char.ord 
                num2 = 77 - num1
                num5 = 2 * num2 + 1 + num1
            end  
            if (97 <= char.ord && char.ord <= 122) then
                num1 = char.ord 
                num2 = 109 - num1
                num3 = 2 * num2 + 1 + num1
                num4 = num3 - 96 
                if (num4 == 26) then 
                    num5 = 99  

                elsif (num4 % 3 == 0) then 
                    num4 = num4 - 1 
                    num6 = (num4 + 3) % 26
                    num5 = num6 + 97

                elsif (num4 % 3 == 1) then 
                    num5 = num4 + 97 
                                    
                else 
                    num5 = num4 + 98 
                end
            elsif(48 <= char.ord && char.ord <= 58)then
                num1 = char.ord - 48
                num2 = (num1 + j) % 10
                num5 = num2 + 48
                if(j >= 3)then
                    j = 1
                        
                else
                    j = j + 1
                end
            end    
            code << num5.chr
        end
        @result1 = code.join("")
        erb :index
    end    
    post '/dec' do
        @title = '暗号復号ツール!'
        @subtitle = '使ってね!'
        @before2 = params[:sts2].to_s
        keyword = params[:sts2].to_s
        code = [] 
        j = 1
        keyword.chars.each do |char|
            if (65 <= char.ord && char.ord <= 90) then
                num1 = char.ord
                num2 = 77 - num1
                num5 = 2 * num2 + 1 + num1
            end  
            if (97 <= char.ord && char.ord<=122)then
                num = char.ord

                if(num == 97)then
                    num3 =120

                elsif((num+1)%3==0)then
                    num1 = num - 97
                    num2 = (num1 - 1) % 26
                    num3 = num2 + 97

                elsif((num+2)%3==0)then
                    num1 = num - 97
                    num2 = (num1 - 2) % 26
                    num3 = num2 + 97

                else
                    num1 = num - 97
                    num2 = (num1 - 3) % 26
                    num3 = num2 + 97
                end

                num4 = 109 - num3
                num5 = 2 * num4 + 1 + num3
                
            elsif(48 <= char.ord && char.ord <= 58)
                num1 = char.ord - 48
                num2 = (num1 - j) % 10
                num5 = num2 + 48
                if(j >= 3)then
                    j = 1
                    
                else
                    j = j + 1
                end 
            end
            code << num5.chr
        end
        @result2 = code.join("")
        erb :index
    end
end
App.run!

erbファイル

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title><%= @title %></title>
    </head>
    <body>
        <form action="/cip" method="post">
            <h4><%= @title %></h4>
            <p><%= @subtitle %></p>
            <input type="text" name="sts1">
            <input type="submit"  value="暗号">
            <br>
            <span><%= @before1 %></span>
            <br>
            <span><%= @result1 %></span>
        </form>
        <br>
        <form action="/dec" method="post">
          <input type="text" name="sts2">
          <input type="submit"  value="復号">
          <br>
          <span><%= @before2 %></span>
          <br>
          <span><%= @result2 %></span>
        </form>
    </body>
</html>

以下のように表示されます。 f:id:Drink_15:20191219135732p:plain f:id:Drink_15:20191219135748p:plain このように暗号化前の文字列と暗号化後の文字列を表示させます。

終り

 以上で紹介が全て終りました。やってみた感想として、意外と簡単にWebアプリケーションが作れるんだと思いました。まぁ、大きなWebアプリケーションを作成していないからかもしれませんが。世間では、Rubyはオワコンという声もありますが、使っていて非常に書きやすく楽しかったので、気に入りました。使用頻度は、下がっていく一方と予想されますが、私はもう少し使ってみようと思います。今後、もう少し大きなWebアプリケーションを作成できれば、いいなぁーと思います。