pixiv 63
はじめまして ピクシブ 株 式 会 社 でエンジニアをやってい ます 金 子 と 申 します 本 書 を 手 にとってくださり あり がとうございます この 本 では 画 像 投 稿 掲 示 板 を 作 ってみる という シン プルな 作 業 を 通 して プログラミングの 基 礎 を 学 んで 頂 き たいと 思 っています 本 書 は エンジニアでない 人 のためのプログラミング 入 門 書 です 例 えば 次 のような 方 にオススメをします システムエンジニアやプログラマーとプロジェクトを 共 にする Web ディレクター/デザイナーの 方 プログラミングに 興 味 はありつつも なんとなく 難 しそ うではじめるきっかけが 摑 めない 方 (10 年 前 の 筆 者 ) 就 職 / 転 職 の 結 果 全 くの 未 経 験 からシステムエンジニ アになることになった 方 プログラミングによって 何 か 動 くものが 作 ってみたい 方 本 書 に 書 かれていることを 実 践 して 頂 き 見 事 画 像 投 稿 掲 示 板 を 作 りあげることができれば 上 記 の 方 々が 直 面 して いる 課 題 のいくつかを 解 決 することができるでしょう 本 書 は 私 が 社 内 で 行 った 新 卒 社 員 向 けの 研 修 ( 非 エンジニア の 新 卒 にプログラミング 研 修 を 行 いました pixiv engineering blog http://inside.pixiv.net/entry/2014/04/28/140859)が 元 になってい ます 研 修 は コード(コンピュータに 指 示 を 出 すための 言 語 )を 1 行 も 書 いたことのない 全 くの 素 人 に 向 けた 6 日 間 の 集 2
中 講 義 でした 英 語 で 言 えば アルファベットも 知 らないような 状 態 から 英 作 文 ができるように 仕 上 げなさいという 話 で 大 変 骨 の 折 れる 仕 事 でした おかげで 普 段 何 気 なく 使 っている 言 葉 やテクニック 概 念 について 考 え 直 すことができました 書 籍 化 にあたり 研 修 の 過 程 で 受 講 者 から 出 た 疑 問 に 答 え るのはもちろん 詰 まりがちな 部 分 についても 丁 寧 な 補 足 を 加 えています 相 当 実 践 的 な 内 容 になっているは ずです 非 エンジニアの 方 々に 読 んで 頂 くにあたり 分 かりやす さ にも 徹 底 してこだわりました パラパラとめくって 頂 くとコードが 多 数 目 につき 取 っつきにくい 印 象 を 持 たれ るかもしれませんが ご 安 心 を 順 番 に 読 んでもらえれば 100% 理 解 して 頂 けるように 書 いてあります 講 義 に 入 る 前 に 大 事 な 言 葉 を 紹 介 したいと 思 います プログラマの 三 大 美 徳 と 呼 ばれるもので Perl という プログラミング 言 語 を 作 ったラリー ウォールの 名 言 です 怠 惰 (Laziness) 短 気 (Impatience) 傲 慢 (Hubris) これだけを 見 るとプログラミングをする 人 の 人 間 性 が 疑 わ れるかもしれません しかしこれはプログラミングに 必 要 な 心 得 を 非 常 に 端 的 に 表 しています 3
怠 惰 とは 面 倒 だと 思 ったら 自 動 化 をしたい 短 気 とは 気 が 利 かないソフトウェアを 見 るとイライラして 直 そうとする 傲 慢 とは 文 句 をいう 余 地 のない 完 璧 なプログラムを 書 く いずれも プログラミングをする 上 で 重 要 な 心 得 ですので ぜひ 覚 えてください なお 本 書 の 内 容 をサポートする Web サイトとして https://github.com/catatsuy/support_programming を 用 意 しました 合 わせて ぜひご 活 用 ください それではさっそく 講 義 をはじめましょう PC(できれば Mac)に 電 源 を 入 れ ページをめくってください 4
2 1 Web 11 サイトはみるものじゃなくて 作 るもの 12 HTML とCSSってなに? 13 CSSの 書 き 方 17 ひとまずエディタをインストールしよう 20 2 Mac 25 なぜWindowsではダメなのか 26 ターミナルの 操 作 を 覚 えよう 29 Macで 開 発 が 出 来 るようにする 32 Git/GitHub の 使 い 方 33
Git がなぜ 必 要 なのか 33 GitHub を 使 ってみる 34 Git の 便 利 な 設 定 35 Git の 流 れ 37 Ruby 環 境 をインストールする 45 Rubyってなに? 45 Ruby の 書 き 方 を 覚 えよう 46 実 行 の 仕 方 47 書 き 方 紹 介 48 p 48 コメントアウト 48 変 数 49 配 列 ハッシュ 51 if 53 each 54 SQLite とデータベースの 基 礎 55
SQLiteの 使 い 方 57 SQLiteの 起 動 方 法 58 テーブルの 作 成 確 認 削 除 58 まとめ 61 レコードの 追 加 確 認 更 新 削 除 61 まとめ 65 Rubyから SQLite を 操 作 する 65 3 71 画 像 投 稿 掲 示 板 をつくるのは 結 構 大 変 72 初 心 者 向 けに 仕 様 を 決 めていく 73
4 Web 77 XSS 78 SQL インジェクション 80 5 85 GitHubでリポジトリをForkする 86 Sinatra の 使 い 方 87 投 稿 ができるようにする 93 投 稿 をデータベースに 保 存 する 96 投 稿 一 覧 を 表 示 する 100 画 像 を 投 稿 できるようにする 104 投 稿 にスターを 付 けられるようにする 121 JavaScript を 覚 えよう 127 jqueryを 使 ってみる 136
Ajaxを 使 って 非 同 期 に 投 稿 にスターを 138 付 けられるようにする 153
1 Web
皆 さんは 普 段 Google Chrome( 以 下 Chrome)や Internet Explorer などのウェブブラウザやブラウザと 呼 ばれるアプ リケーションを 使 い 様 々な Web サービスを 使 っていると 思 います 少 なくとも 現 在 の 日 本 においてはインターネットなしでの 生 活 は 考 えられず 日 々 様 々な Web サイトを 閲 覧 してい ることと 思 います これらの Web サイトはどうやって 作 られているのでしょ うか 実 は 簡 単 に 見 ることができます まず Chrome をインストールしていなければ Chrome を インストールしてください Chrome で www.pixiv.net を 開 いてみてください そしてウィンドウ 上 部 にあるメニューから 表 示 を 選 択 し て 開 発 / 管 理 から デベロッパー ツール を 選 びます すると pixiv のソースコードを 見 ることができます これは Chrome の Developer Tools という 機 能 です Chrome の Developer Tools は 非 常 に 機 能 が 充 実 してお り 開 発 に 大 変 役 立 ちます ここで 表 示 されているのは HTML と 呼 ばれるものです 今 は 何 が 書 かれているか 分 からないかもしれませんが 本 書 を 読 み 終 わったころには 何 が 書 かれているかほとんど 分 かるようになるでしょう 12
HTML CSS プログラミングについて 学 ぶにあたり まず HTML と CSS について 覚 える 必 要 があります 文 章 を 書 く 際 に Microsoft Word や iwork の Pages など のワープロソフトを 使 ったことがある 人 は 多 いと 思 います ワープロソフトで 文 章 を 書 く 際 文 字 に 様 々な 装 飾 をする ことがありませんか? 例 えば 最 初 にタイトルを 書 いたらそれを 中 央 揃 えにし 大 きくするなどの 装 飾 です ワープロソフト 上 では 明 確 な 区 別 なく 行 えるこの 装 飾 ブ ラウザでは 異 なります ブラウザでコンテンツを 表 示 するには 文 章 と 文 章 の 構 造 を HTML で 文 章 自 体 に 関 係 のない 見 た 目 に 関 わる 部 分 を CSS で 記 述 します まずは HTML から 説 明 します 何 はともあれ 実 際 の HTML を 見 てもらいましょう 例 えば index.html のようなファイルです HTML の 拡 張 子 (ファイル 名 の 最 後 につく ファイルの 種 類 を 規 定 する 部 分 )は html となります <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> 1 W e b 13
<title> </title> </head> <body> <h1> 1</h1> <p> </p> <h2> 2</h2> <p> </p> <ul> <li> </li> <li> </li> </ul> <h3> 3</h3> <p> </p> <h3> 3</h3> <p> <br> </p> </body> </html> HTML は 最 初 に <!DOCTYPE html> と 書 きます これはこのファイルが HTML であることを 示 すものなの で 必 ず 書 きましょう HTML をはじめ コンピュータやインターネット 関 係 の 14
もののほとんどはアメリカで 作 られたため 英 語 がベース になっています HTMLは 基 本 的 に<html></html>のように< >と</ > でテキストを 囲 います これを HTML タグといいます HTML タグは 開 始 タグ < > と 終 了 タグ </ > を 使 って 書 きます 開 始 タグには 属 性 というものを 指 定 できます 日 本 語 を 扱 う 文 章 なら html タグの 属 性 に <html lang="ja"> と 書 き ます このように 属 性 は 開 始 タグの 中 に =" " のように 指 定 します 今 回 の lang="ja" は language と Japanese の 略 で 言 語 は 日 本 語 にする という 意 味 になります このように 属 性 や 値 には 英 単 語 を 略 しているものが 多 いで す HTML の 文 章 は <html> タグの 中 に 書 きます <html> タグの 中 に <head> タグと <body> タグを 書 きます <head> タグの 中 にはこの 文 章 のタイトルなどの 情 報 を 書 き ます 詳 しくは 後 で 説 明 します <body> タグの 中 には 実 際 に 表 示 したい 文 章 を 書 きます この 中 に 書 かれているものはブラウザ 上 で 表 示 されます <h1> は heading の 略 で 見 出 しのことで 番 号 は 順 番 を 表 し ます 1 W e b 15
番 号 は <h1> から <h6> まであります 文 章 自 体 は <p> タグで 囲 います これは paragraph の 略 で 段 落 を 表 します 箇 条 書 きをするには <ul> タグで 囲 い 箇 条 する 内 容 をそ れぞれ <li> タグで 囲 います それぞれ unorderd list と list item の 略 です 1,2,3 のように 順 番 を 表 示 したい 場 合 は ordered list で すので <ol> タグで 囲 います 改 行 したい 場 合 は <br> タグを 使 います 普 通 に 改 行 した だけでは 改 行 にならないので 気 をつけてください <br> タグは 改 行 を 意 味 する Line Break の 略 です また HTML で 非 常 によく 使 われるリンクを 作 るタグの <a> タグも 紹 介 します このタグは Anchor の 略 で アンカータグ と 呼 ばれます <a> タグは 以 下 のように 使 います <a href="http://www.pixiv.net/"> [pixiv ]</a> 16
<a> タグには href 属 性 を 使 ってリンク 先 の URL を 必 ず 書 く 必 要 があります このような 必 ず 与 えないといけない 属 性 のことを 必 須 属 性 と 言 います 必 須 属 性 を 持 っているタグは 他 にもいくつかありますので その 都 度 紹 介 していきます HTML タグはこれだけではありません 今 後 も 必 要 に 応 じて 紹 介 していきます CSS CSS は HTML とは 異 なり 文 章 の 見 た 目 を 担 当 します CSS は HTML の 中 に 直 接 書 くこともできますが ファイ ルを 分 けた 方 が 管 理 や 編 集 が 楽 です 実 際 の 開 発 では HTML の 中 に 直 接 CSS を 書 くことはまず ありません まず HTML の <head> タグの 中 に 以 下 のように 書 きます <link rel="stylesheet" type="text/css" href="style.css"> 1 W e b 17
続 いて HTML ファイルを 保 存 しているフォルダに style. css というファイル 名 でファイルを 作 ります CSS の 設 定 はこの style.css に 書 いて 保 存 すれば 適 用 され ます CSS で 設 定 する 見 た 目 などのことをスタイルと 呼 びます そのため CSS を 適 用 して 見 た 目 を 変 えることを スタイル を 適 用 する スタイルを 当 てる などと 表 現 します では 実 際 の CSS の 書 き 方 を 紹 介 します 先 程 の HTML で 例 えば <p> タグの 文 字 の 色 を 赤 色 にして みます p { color: red; } これで <p> タグの 文 字 の 色 は 赤 色 になります この 時 に color のことをプロパティと 呼 び red のことを 値 と 呼 びます さらにフォントのサイズを30px にしたい 場 合 は 以 下 のよ うにします p { 18
color: red; font-size: 30px; } ブラウザ 上 でサイズを 指 定 する 時 はほとんどの 場 合 でピク セルという 単 位 が 使 われます ピクセルは px と 表 され 1px はディスプレイの 1 つのドッ トの 大 きさのことです このように 設 定 したいタグに 対 して CSS の 設 定 を 列 挙 して いきます しかしこのようにタグで 設 定 するとそのタグ 全 てに 設 定 が 適 用 されてしまいます 実 際 には 特 定 の HTML 要 素 に 対 して CSS を 設 定 したいこ との 方 が 多 いでしょう そういった 時 に 使 われるのが id と class です 以 下 のように 指 定 します <p id="sample-id"></p> <p class="sample-class"></p> 1 W e b 19
id は 最 初 に # を class は 最 初 に. を 付 けて CSS を 指 定 し ます #sample-id { } color: blue;.sample-class { } color: green; id と class の 違 いは id が 同 じ HTML ファイル 内 に 1 つし かあってはならないのに 対 して class はいくつあっても 良 い 点 です CSS の 指 定 には class の 方 が 使 い 勝 手 が 良 いので 常 に class を 使 うことをおすすめします Web アプリケーションを 作 る 上 でこれからプログラミング を 行 っていきます 20
プログラミングはエディタと 呼 ばれる 種 類 のアプリケーシ ョンを 使 って 行 いますのでエディタをインストールする 必 要 があります エディタといっても 特 別 なアプリケーションではありませ ん 代 表 的 なエディタとして Windows のメモ 帳 や Mac のテ キストエディットがあります これらのエディタならば 最 初 からインストールされている のでわざわざインストールをする 必 要 はありませんし こ れらのエディタでもプログラミングを 行 うことができます しかしこれらの 最 初 からインストールされているエディタ はプログラミング 専 用 ではないので 様 々な 機 能 が 不 足 して います 不 足 している 機 能 をいくつか 紹 介 します これから 紹 介 していきますがプログラミングは 分 かりや すいようにスペースを 適 宜 挿 入 します こういったスペースのことをインデントと 呼 びますが イ ンデントの 挿 入 を 自 分 で 行 うことはとても 面 倒 です また 実 際 にプログラミングを 行 う 際 プログラムに 色 が 付 いていないと 種 類 の 判 別 が 難 しく プログラミングが 困 難 なものになります インデントを 調 整 する 機 能 があり プログラムの 文 字 に 色 を 付 けてくれるエディタを 使 用 するのはプログラミングに おいて 必 須 です インデントを 調 整 する 機 能 があり プログラムに 色 を 付 け 1 W e b 21
てくれるエディタは 色 々ありますが 今 回 は 使 い 方 がテキ ストエディットなどと 似 ていてなじみやすく また 機 能 が 充 実 しており 最 近 プログラマの 間 で 人 気 が 急 上 昇 してい る Sublime Text をおすすめします Sublime Text には 先 程 紹 介 したインデントを 調 整 する 機 能 や 色 を 付 けてくれる 機 能 の 他 にもコードの 一 部 を 書 くと 残 りの 部 分 を 補 完 してくれる 機 能 などがあります 基 本 的 にプログラミングは 慣 れたエンジニアでもスペルミ スなど 必 ずミスをします また 長 い 名 前 を 一 字 一 句 全 て 覚 えるというのは 現 実 的 では ありません しかしプログラムというのは 厳 密 なルールがあり 基 本 的 に 一 字 一 句 合 っていなければ 正 しく 動 作 しません そこで Sublime Text の 補 完 機 能 を 使 うことでミスを 減 ら すことができます そのため 補 完 機 能 を 活 用 することをおすすめします 補 完 機 能 を 使 うのに 追 加 の 設 定 などはいりません Sublime Text は 以 下 のサイトからダウンロード 出 来 ます http://www.sublimetext.com/3 通 常 のアプリと 同 じようにインストールしてください もし 開 発 元 が 未 確 認 のため 開 けません という 警 告 が 出 てインストールができない 場 合 はリンゴマークから シス テム 環 境 設 定 を 開 いて セキュリティとプライバシー を 開 きます 22
そして 一 般 のタブから ダウンロードしたアプリケー ションの 実 行 許 可 で 全 てのアプリケーションを 許 可 を 選 択 してください 変 更 にはパスワードが 必 要 です Sublime Text はファイルの 拡 張 子 からインデントや 色 を 付 けてくれますが 保 存 する 前 のファイルなど 拡 張 子 を 指 定 する 前 でもそういった 機 能 を 使 うことができます 右 下 から 様 々なプログラミング 言 語 を 選 択 することができ ます たくさんありすぎて 迷 うと 思 いますが 例 えば HTML を 選 択 すれば HTML を 書 くことができます 他 にもいくつか 覚 えて 欲 しい 機 能 がありますのでその 都 度 解 説 します また 何 度 かファイルを 保 存 すると 有 料 版 購 入 を 勧 めるポッ プアップが 出 てきます Cancel を 入 力 すれば 使 い 続 けることができますが 長 く 使 うのであれば 購 入 しましょう 1 W e b 23
2 Mac
Windows Windows は OS の 一 種 です OS は Operating System の 略 で 日 本 語 では 基 本 ソフトと 訳 されます OS はコンピュータの 中 でハードウェアとアプリケーショ ンの 仲 介 を 行 います もう 少 し 分 かりやすく 説 明 します 例 えばコンピュータを 起 動 して Chrome を 起 動 して pixiv を 見 ようとします コンピュータは 様 々な 企 業 が 発 売 していますが どのコン ピュータでも Windows が 入 っていればインターネットに 繫 げることができて Windows 版 の Chrome は 動 かすこと ができます しかしどのコンピュータでも 中 に 使 われている 部 品 等 が 異 なります またコンピュータは 精 密 機 器 ですのでコンピュータの 上 で Chrome のようなアプリケーションを 動 かすには 様 々な 部 品 の 制 御 が 必 要 になります 一 時 的 に 記 憶 をするメモリや 計 算 をする CPU やファイル などを 保 存 する HDD や SSD などが 代 表 的 な 制 御 しなけ ればならないハードウェアの 一 部 です そのような 様 々なハードウェアの 制 御 を 引 き 受 けて 微 妙 な 差 異 も 吸 収 するのが OS の 役 割 です OS がハードウェアを 制 御 するのでアプリケーション 側 は OS の 機 能 を 使 ってメモリや CPU や HDD や SSD などを 操 作 します 26
こうすることで OS が 全 てのアプリケーションがやりたい 操 作 をまとめて 効 率 よくハードウェアの 制 御 を 行 います そうすることでアプリケーションはハードウェアの 制 御 を 考 えることなくハードウェアを 実 質 的 に 扱 うことができま す 代 表 的 な OS が Windows です OS は Windows だけではありません 最 も 代 表 的 な OS である UNIX の 紹 介 をします UNIX はアメリカ 最 大 手 の 通 信 業 者 である AT&T のベル 研 究 所 で 開 発 された OS です 1970 年 代 に 広 く 普 及 した 歴 史 のあるシステムで 主 に 大 学 や 研 究 機 関 で 使 われてきました 現 在 でも UNIX は 事 実 上 の 標 準 になっています Mac OS X は UNIX の 一 種 です Linux は 商 標 の 関 係 で UNIX とは 名 乗 れませんが 事 実 上 UNIX の 一 種 と 考 えて 問 題 ありません 今 回 学 ぶ Web プログラミングは 基 本 的 に UNIX で 動 かす ことが 前 提 になっているので UNIX 系 の OS を 使 用 する 必 要 があります 2 M a c 27
http://ji-sedai.jp/ 20 U- 3!!!