├── style.css
├── uninstall_tilt.png
├── index.html
└── README.md
/style.css:
--------------------------------------------------------------------------------
1 | #sample-id {
2 | color: blue;
3 | }
4 |
5 | .sample-class {
6 | color: green;
7 | }
8 |
--------------------------------------------------------------------------------
/uninstall_tilt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/catatsuy/support_programming/HEAD/uninstall_tilt.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | タイトルをここに書く
6 |
7 |
8 | 見出し1
9 | ここは段落
10 | 見出し2
11 | ここも段落
12 |
16 | 見出し3
17 | 段落
18 | 見出し3
19 |
20 | 段落
21 | 段落段落
22 |
23 |
24 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # pixivエンジニアが教えるプログラミング入門サポートページ
2 |
3 | 実際に作る画像投稿掲示板
4 |
5 | * [catatsuy/sinatra_keijiban](https://github.com/catatsuy/sinatra_keijiban)
6 | * [catatsuy/sinatra_simple](https://github.com/catatsuy/sinatra_simple)
7 |
8 | ## 正誤表
9 |
10 | | 正誤箇所 | 誤 | 正 |
11 | | :------------ | :--------------- | :----- |
12 | | 88ページ | `cd sinatra_simple_template` でこのフォルダに入って | `cd sinatra_simple` でこのフォルダに入って |
13 | | 134ページ下 | `js:main.js` | （必要なし） |
14 |
15 |
16 | ## 第1章 Web サイト作りの基本のキ
17 |
18 | * [index.html](https://github.com/catatsuy/support_programming/blob/master/index.html)
19 | * [style.css](https://github.com/catatsuy/support_programming/blob/master/style.css)
20 |
21 | ## 第2章 Macを使った開発環境構築
22 |
23 | ### ターミナルの開き方
24 |
25 | アプリケーション > ユーティリティ > ターミナル.app
26 |
27 | #### 覚えて欲しいコマンド
28 |
29 | * `ls`
30 | * `cd`
31 | * `open` （Mac 限定）
32 |
33 | ### Macで開発をできるようにする
34 |
35 | xcode-select --install
36 |
37 | ### Git / GitHubの使い方
38 |
39 | #### Git の便利な設定
40 |
41 | git config --global color.diff auto
42 | git config --global color.status auto
43 | git config --global color.branch auto
44 | git config --global color.grep auto
45 | git config --global core.editor nano
46 | git config --global core.excludesfile $HOME/.gitignore
47 | echo .DS_Store >> $HOME/.gitignore
48 | echo Thumbs.db >> $HOME/.gitignore
49 |
50 | 名前・メールアドレス
51 |
52 | git config --global user.name "catatsuy"
53 | git config --global user.email "catatsuy@catatsuy.org"
54 |
55 | 名前とメールアドレスは GitHub に登録したものを使ってください
56 |
57 |
58 | #### Git の覚えて欲しいコマンド
59 |
60 | * `git clone`
61 | * `git status`
62 | * `git diff`
63 | * `git add`
64 | * `git commit`
65 | * `git pull`
66 | * `git push`
67 |
68 | #### Ruby から SQLite を操作する
69 |
70 | 本書の例を表示するための `INSERT` 文
71 |
72 | ```sql
73 | INSERT INTO books (title, author, price) VALUES ('武器としての交渉思考', '瀧本哲史', 860);
74 | INSERT INTO books (title, author, price) VALUES ('キャバ嬢の社会学', '北条かや', 820);
75 | INSERT INTO books (title, author, price) VALUES ('２０歳の自分に受けさせたい文章講義', '古賀史健', 840);
76 | ```
77 |
78 |
79 | ## 第5章 実際にコードを書いて画像投稿掲示板を作ろう
80 |
81 | ### GitHubでリポジトリをForkする
82 |
83 | [catatsuy/sinatra_simple](https://github.com/catatsuy/sinatra_simple)
84 |
85 | ### Rubyの書き方を覚えよう
86 |
87 | * p
88 | * コメントアウト
89 | * `#`
90 | * 変数 (Variable)
91 | * 配列・ハッシュ (Array/Hash)
92 | * `[]`, `{}`
93 | * if
94 | * each
95 |
96 | ```rb
97 | a = 1
98 | a = a + 3
99 |
100 | p a # => 4
101 |
102 | array = [1, 4, 9]
103 |
104 | p array[0] # => 1
105 | p array[1] # => 4
106 | p array[2] # => 9
107 |
108 | hash = {
109 | "key" => "value",
110 | "key2" => "value2"
111 | }
112 |
113 | p hash["key"] # => "value"
114 |
115 | a = 1 + 2
116 |
117 | if a == 3
118 | # もし a が 3 ならここが実行される
119 | p "1 + 2 は 3 です"
120 | else
121 | # もし a が 3 ではないならここが実行される
122 | p "1 + 2 は 3 ではありません"
123 | end
124 |
125 | a = [1, 4, 9, 16]
126 |
127 | a.each do |x|
128 | p x
129 | end
130 |
131 | # OR
132 |
133 | a.each { |x| p x }
134 | ```
135 |
136 | ### SQlite とデータベースの基礎
137 |
138 | #### テーブルの作成・確認・削除
139 |
140 | * `CREATE TABLE`
141 | * `.schema`
142 | * `DROP TABLE`
143 |
144 | #### レコードの追加・確認・更新・削除
145 |
146 | * `INSERT`
147 | * `SELECT`
148 | * `UPDATE`
149 | * `DELETE`
150 |
151 | ### JavaScriptを覚えよう
152 |
153 | ```js
154 | window.onload = function() {
155 | var hello = 'Hello world!';
156 | console.log(hello);
157 |
158 | var a = [1, 4, 9];
159 | console.log(a[0]);
160 |
161 | var h = {
162 | key: 'value',
163 | key2: 'value2'
164 | };
165 | console.log(h['key']);
166 | };
167 | ```
168 |
169 | ### jQueryを使ってみる
170 |
171 | [Download jQuery | jQuery](http://jquery.com/download/)
172 |
173 | ```html
174 |
175 | ```
176 |
177 | ```js
178 | $(function() {
179 | // ここに処理を書く
180 | });
181 | ```
182 |
183 | # 補足
184 |
185 | ## Visual Studio Codeを使う
186 |
187 | 2021/02/11現在、Sublime TextよりもVisual Studio Codeの方がメジャーなエディタだと思います。簡単に使い方を紹介します。
188 |
189 | https://code.visualstudio.com/
190 |
191 | こちらからダウンロードします。
192 |
193 | インデントを調整する機能も使えます。⌘キー・Shiftキー・Pを同時に押して、"format"と入力すると様々な機能を選択できるようになるので、"Format Document"を選択してください。そうすればインデントを調整できます。
194 |
195 | Rubyのコードのインデントを調整するには別途プラグインのインストールが必要になります。Visual Studio Codeが提案してくれるので、提案通りにインストールすれば使用できます。
196 |
197 | ## M1 Mac
198 |
199 | Apple M1チップが使われたMacが2020年末から発売されています。M1チップのMacで開発するのは数年間は難しい状況が続くと思われるので、初心者の人は避けてください。
200 |
201 | ## sinatra-contribをインストールしてサーバーが起動しなくなった方
202 |
203 | 2015/3/24 に sinatra のバージョンアップがあり，それに 2015/06/06 まで sinatra-contrib が追従していませんでした。2015/3/24 から 2015/06/06 までに `gem install sinatra-contrib` をした方は以下の手順を行う必要があります。
204 |
205 | 1. `sudo gem uninstall tilt` とターミナルに入力
206 | 2. `Select gem to uninstall:` と出るので `tilt-2.0.1` の左に書かれている数字を入力して Enter を押す
207 |
208 | 
209 |
210 | 2015/06/07 現在この手順は必要ありません。
211 |
--------------------------------------------------------------------------------