プロジェクト

全般

プロフィール

編集 履歴

WikiStart »

InstallRuby » 履歴 » バージョン 11

Yuumi Yoshida, 2018-05-10 15:37

1 1 Yuumi Yoshida 
# 「非技術者むけプログラミング入門」インストール手順
2 





    3
    3
    Yuumi Yoshida
    
更新日： 2018-05-08





    4
    1
    Yuumi Yoshida
    





    5
    
    
    
## Ruby





    6
    
    
    





    7
    
    
    
1. ブラウザーで https://rubyinstaller.org/downloads をアクセス





    8
    
    
    
2. 左側の **WITHOUT DEVKIT** の下の Ruby 2.5.1-1 (x64)  をクリックしダウンロードする





    9
    
    
    
3. ダウンロードされた rubyinstaller-2.5.1-1-x64.exe ファイルをダブルクリックしインストラーを起動





    10
    
    
    
4. インストラーが起動したら I accept the License を選択し、Nextボタンをクリック





    11
    
    
    
5. 次の画面(タイトル Installation Destination and Optional Tasks)が表示されたら、以下をチェックし Installボタンをクリック





    12
    
    
    
    * Add Ruby executables to your PATH





    13
    
    
    
    * Use UTF-8 as default external encoding.





    14
    
    
    
6. Run 'ridk install' to setup .... をチェックし、Finshボタンをクリック





    15
    
    
    
7. コマンドプロンプトが表示されるので 1 を入力し Return





    16
    6
    Yuumi Yoshida
    
8. 新たにコマンドプロンプトを起動し、以下のコマンドをタイプして下さい。





    17
    1
    Yuumi Yoshida
    





    18
    4
    Yuumi Yoshida
    
```





    19
    
    
    
gem install bundler -N





    20
    
    
    
```





    21
    5
    Yuumi Yoshida
    





    22
    
    
    





    23
    
    
    
![](ruby_install.gif)





    24
    4
    Yuumi Yoshida
    





    25
    
    
    





    26
    1
    Yuumi Yoshida
    
## Atomエディター





    27
    
    
    





    28
    7
    Yuumi Yoshida
    
1. ブラウザーで https://atom.io/ をアクセス





    29
    1
    Yuumi Yoshida
    
2. Downloadボタンをクリックしダウンロードする





    30
    
    
    
3. ダウンロードされた AtomSetup-x64.exe ファイルをダブルクリックしインストラーを起動





    31
    
    
    
4. インストラーが終了するまで待つ





    32
    
    
    
5. Atomエディターが起動し、右上に Register as Default atom:// URI handler? というダイアログが表示されたら Yes をクリック





    33
    
    
    





    34
    
    
    





    35
    3
    Yuumi Yoshida
    
![](atom_install.gif)





    36
    
    
    





    37
    1
    Yuumi Yoshida
    
## Git





    38
    
    
    





    39
    
    
    
1. ブラウザーで https://git-scm.com/downloads をアクセス





    40
    
    
    
2. Windowsボタンをクリックしダウンロードする





    41
    
    
    
3. ダウンロードされた Git-2.17.0-64-bit.exe ファイルをダブルクリックしインストラーを起動





    42
    
    
    
4. インストラーが起動したら Nextボタンをクリック





    43
    
    
    
5. 次の画面(タイトル Select Destination Location)が表示されたら、そのままで Nextボタンをクリック





    44
    
    
    
5. 同じような画面がさらに7回表示されれますが、そのままで Nextボタンをクリックを繰り返します





    45
    
    
    
7. 次の画面(タイトル Configuring extra options)が表示されたら、そのままで Installボタンをクリック





    46
    
    
    
6. 次の画面(タイトル Completing the Git Setup Wizard)が表示されるまで待ち、全てのチェックを外し、Finishボタンをクリック





    47
    
    
    





    48
    3
    Yuumi Yoshida
    
![](git_install.gif)





    49
    1
    Yuumi Yoshida
    





    50
    
    
    
## Heroku CLI





    51
    
    
    





    52
    
    
    
1. ブラウザーで https://devcenter.heroku.com/articles/heroku-cli をアクセス





    53
    
    
    
2. Windowsの 64-bit installerボタンをクリックしダウンロードする





    54
    
    
    
3. ダウンロードされた heroku-x64.exe ファイルをダブルクリックしインストラーを起動





    55
    
    
    
4. インストラーが起動したら、そのままで Nextボタンをクリック





    56
    
    
    
5. 次の画面が表示されたら、そのままで Installボタンをクリック





    57
    
    
    
6. 次の画面(タイトル Installation Complete)が表示されたら、Closeボタンをクリック





    58
    3
    Yuumi Yoshida
    





    59
    
    
    
![](heroku_install.gif)





    60
    8
    Yuumi Yoshida
    





    61
    
    
    





    62
    
    
    
----





    63
    
    
    





    64
    
    
    
### Tableタグ





    65
    
    
    





    66
    
    
    
~~~





    67
    
    
    
require 'sinatra'





    68
    
    
    
require 'sinatra/reloader'





    69
    
    
    





    70
    
    
    





    71
    
    
    
get '/' do





    72
    
    
    
  html = "<html><body>"





    73
    
    
    
  html += '<table border="1">'





    74
    
    
    
  html += "  <tr>"





    75
    
    
    
  html += "    <td>カルボナーラ</td>"





    76
    
    
    
  html += "    <td>玉子とベーコンとクリームソース</td>"





    77
    
    
    
  html += "  </tr>"





    78
    
    
    
  html += "  <tr>"





    79
    
    
    
  html += "    <td>ペスカトーレ</td>"





    80
    
    
    
  html += "    <td>エビとあさりの漁師風</td>"





    81
    
    
    
  html += "  </tr>"





    82
    
    
    
  html += "</table>"





    83
    
    
    
  html += "</body></html>"





    84
    
    
    
end





    85
    
    
    
~~~





    86
    9
    Yuumi Yoshida
    





    87
    
    
    
### ファイルに文字列を追加する





    88
    
    
    





    89
    
    
    





    90
    
    
    
~~~





    91
    
    
    
file = open("data2.txt", "a")





    92
    10
    Yuumi Yoshida
    
file.write("5/8,BOOK,2300")





    93
    9
    Yuumi Yoshida
    
file.close





    94
    
    
    
~~~





    95
    11
    Yuumi Yoshida
    





    96
    
    
    
### 結果表示と入力フォームの両方がある 足し算ページ





    97
    
    
    





    98
    
    
    
~~~





    99
    
    
    
require 'sinatra'





    100
    
    
    
require 'sinatra/reloader'





    101
    
    
    





    102
    
    
    
get '/' do





    103
    
    
    
  %!





    104
    
    
    
<html><body>





    105
    
    
    
  <form action="/add" method="post">





    106
    
    
    
    <input type="text" name="a"> + <input type="text" name="b">





    107
    
    
    
    <input type="submit" value="計算">





    108
    
    
    
  </form>





    109
    
    
    
</body></html>





    110
    
    
    
!





    111
    
    
    
end





    112
    
    
    





    113
    
    
    
post '/add' do





    114
    
    
    
  a = params["a"].to_i





    115
    
    
    
  b = params["b"].to_i





    116
    
    
    
  %!





    117
    
    
    
<html><body>





    118
    
    
    
  #{a} + #{b} = #{a + b}





    119
    
    
    
  <form action="/add" method="post">





    120
    
    
    
    <input type="text" name="a"> + <input type="text" name="b">





    121
    
    
    
    <input type="submit" value="計算">





    122
    
    
    
  </form>





    123
    
    
    
</body></html>





    124
    
    
    
!





    125
    
    
    
end





    126
    
    
    
~~~