11月13日〜11月15日の学習内容

11月13日(月)の学習内容

N予備校プログラミングコースの「プログラミング入門Webアプリ」
第3章「サーバサイドプログラミング入門」
21.認証された投稿の一覧表示機能
22.データベースへの保存機能の実装
23.トラッキングCookieの実装
24.削除機能の実装
25.管理者機能の実装
26.デザインの改善

  

先週に引き続き匿名掲示板を作成しています。

 

21.認証された投稿の一覧表示機能
Basic認証の実装→ログアウト機能の実装(モジュール追加)→実装されていないURLには404-NotFoundを返す処理を追加→投稿内容一覧ページを作成→未対応のメソッドに400-BadRequestを返す処理を追加
という流れでした。

 

22.データベースへの保存機能の実装
PostgreSQLというデータベースを利用して投稿したデータをファイルに保存する機能を実装していきました。(データの永続化)
PostgreSQLのインストール→パスワードの設定→データベースの作成→sequelizeというモジュールをインストールしてPostgreSQLを利用できるように設定→データベースの構成を考える(データモデリング)→データの保存を行うモジュールの作成→データベースに保存する処理を実装→データベースからデータを読み出して表示する処理を実装→取得したIDから降順にソートして表示する処理を実装

 

23.トラッキングCookieの実装
ユーザーの行動を追跡するために付与されるトラッキングCookieについての学習。
cookiesモジュールのインストール→Cookieを使ってトラッキングIDを実装→トラッキングIDを保存して表示する→サーバーに閲覧情報のログを残す処理を実装
という流れを行いました。

 

24.削除機能の実装
削除UIの作成→削除ボタンの実装(ユーザーと投稿したユーザーが同じ場合のみ削除ボタンを表示)→削除処理の実装→削除時のログも残す処理を実装

 

25.管理者機能の実装
管理人の投稿機能の実装→ログアウトページにログインへのリンクを付ける→管理人の削除機能の実装→投稿したアカウントが分かるように実装

 

26.デザインの改善
Bootstrapのテンプレートを利用してデザインを改善しました。
ファビコンの表示設定→jadeファイルにBootstrapのcssJavaScriptのテンプレートを読み込む設定→ログアウトリンクのデザインを変更→投稿フォームのデザインの変更→投稿一覧のデザインの変更→投稿日時を日本時間、日本語表示に変更
という流れでした。

 

これで匿名掲示板の機能の実装は一通り終わった感じです。

 

11月14日(火)の学習内容

N予備校プログラミングコースの「プログラミング入門Webアプリ」
第3章「サーバサイドプログラミング入門」
27.脆弱性
28.XSS脆弱性の対策
29.パスワードの脆弱性の対策
30.セッション固定化攻撃脆弱性の対策
31.より堅牢なセッション管理

 

セキュリティ関連の学習を行いました。

 

27.脆弱性
OSコマンドが実行できてしまうOSコマンドインジェクションへの対応

  

28.XSS脆弱性の対策
投稿にJavaScriptを埋め込むことでページを書き換えることができてしまうXSSクロスサイトスクリプティング脆弱性についての学習。
リグレッション(コードを修正することで本来あった機能が失われてしまう)という概念も学びました。

 

29.パスワードの脆弱性の対策
ハッシュ関数を使用する(SHA256)
辞書攻撃で検証→パスワードジェネレータでパスワードを複雑なものに変更

 

30.セッション固定化攻撃脆弱性の対策
セッション固定化攻撃(セッションハイジャック)→トラッキングidにトラッキングidとユーザー名を結合したもののハッシュ値を利用するcryptoモジュール→ハッシュ値を表示しないように修正

 

31.より堅牢なセッション管理
ラッキングidのハッシュ値を推測してなりすますことができてしまう。
秘密の鍵を結合したハッシュ値を利用して推測を難しくする→元々のトラッキングidのランダム関数も推測しづらいものに変更

  

11月15日(水)の学習内容

N予備校プログラミングコースの「プログラミング入門Webアプリ」
第3章「サーバサイドプログラミング入門」
32.CSRF脆弱性の対策
33.Herokuへの安全な公開

第4章「実践サーバーサイドプログラミング」
01.Webフレームワーク
02.ExpressのAPI
03.GitHubを使った外部認証
04.テスティングフレームワーク

 

32.CSRF脆弱性の対策
CSRFクロスサイトリクエストフォージェリ(シーサーフ)
外部サイトからのリクエストによって意図しない処理を行なってしまう脆弱性

・ワンタイムトークンを消費する形で処理を行う
・処理の際にid/passで認証←利便性が損なわれる
・リクエストのヘッダーのrefererをチェック←改ざんが可能

投稿時のワンタイムトークンの実装→削除時のワンタイムトークンの実装

 

33.Herokuへの安全な公開
herokuで動かせるようにコードを修正→herokuにデプロイ
httpでのアクセスを禁止する修正→パスワードの更新(パスワードジェネレータ)

 

これで作成した匿名掲示板をWeb上に公開することができました。
セキリュティ対策の実装については結構複雑で大変でしたね。
第3章が終わり第4章「実践サーバーサイドプログラミング」に入っていきます。

 

01.Webフレームワーク
Web Application Framework (WAF)についての学習。
Webフレームワークを利用することで効率的にWebサービスが開発できるようですね。
ここではNode.jsのフレームワークExpressを利用しました。Expressの特徴は

・堅牢性の高いルーティング
・高いパフォーマンス
・シンプル

Express application generatorをインストール→debugモジュールでデバッグログを出力→モジュールエラーログだけ出力
という流れを行いました。

 

02.ExpressのAPI
セキュリティに関する設定を行いました。helmetモジュールを組み込むことで
x-powered-byというレスポンスヘッダ情報を隠すことが簡単にできました。
後半のRouterオブジェクトとApplicationオブジェクトの所がいまいち理解できていない感じです。

 

03.GitHubを使った外部認証
OAuth2.0という外部認証の大まかな仕組みについて学習しました。
passportモジュール、done関数、シリアライズとデシリアライズ、Node.jsのイベントループの仕組み、process.nextTick、この辺よくわかってない気がします。要復習。

 

04.テスティングフレームワーク
MOCHAというテスティングフレームワークを使用しました。

ユニットテスト(モジュール単体のテスト )
結合テスト(複数のモジュールのテスト )
システムテスト(システム全体 )
ブラックボックステスト(外側のインタフェースからのみテスト)

ここではユニットテストを実践しました。 

 

こんな感じで振り返ると、よく分かってないなって部分が色々出てきますね。

11月8日〜11月10日の学習内容

11月8日(水)の学習内容

N予備校プログラミングコースの「プログラミング入門Webアプリ」

第3章「サーバサイドプログラミング入門」

04.ライブラリ

05.Slackのボット開発

06.HubotとSlackアダプタ

07.モジュール化された処理

08.ボットインターフェースとの連携

 

04.ライブラリ

npm (Node.jsのパケットマネージャ)を使ってパッケージを作成→パッケージを使ったアプリケーションの作成

 

以下のページは時間のあるときに目を通しておきます。

標準ビルトインオブジェクト - JavaScript | MDN

Node.js v6.11.1 Documentation

 

 

05.Slackのボット開発

Slackというチャットツールの使い方を学びました。

アカウントの作成→メンション機能(remind)

プライベートチャンネルの作成→javascriptのコードを投稿

 

06.HubotとSlackアダプタ

Slack上で動くタスク管理ボットを作成していきます。

・yo

・generator-hubot

・CoffeeScrip

の3つのパッケージをインストール

 

HubotというGitHub社のボット作成のフレームワークを使用しました。

まずはHubotを動かしてみようということで以下の流れ

Hubotの作成→Slackに新しいworkspaceを作成→Slack AppでHubotの設定→Slackにチャンネル作成→チャンネルにhubotを招待→ボットの起動→botに機能追加(おみくじ)

 

07.モジュール化された処理

要件を考える際に要件漏れがないかをチェックするためのCRUDという概念を学びました。

Create(生成)Read(読み取り)Update(更新)Delete(削除)

更にCRUD操作に要件漏れがないかチェックするためのオブジェクトのライフサイクルについても学びました。

 

Hubotに実装するタスク管理のパッケージを作成しました。 

タスクを作成するtodoコマンドの実装→未完了のタスクを表示するlistコマンドの実装→テストの追加→doneとdonelistの実装→delコマンドの実装

という流れで作成することができました。

 

08.ボットインターフェースとの連携 

07.モジュール化された処理 で作ったnmpパッケージを利用してタスクを管理するhubotをSlack上で起動することができました。

 

11月9日(木)の学習内容

N予備校プログラミングコースの「プログラミング入門Webアプリ」

第3章「サーバサイドプログラミング入門」

09.同期I/Oと非同期I/O

10.例外処理

11.HTTPサーバー

12.ログ

13.HTTPのメソッド

14.HTTPのフォーム

15.テンプレートエンジン

 

09.同期I/Oと非同期I/O

同期I/Oと非同期I/Oの違いについて学びました。

Node.jsはデフォルトでは非同期→Syncで同期化

 

10.例外処理

タスク管理ボットでのタスク情報の永続化に対応しました。

同期的にタスクをファイルに書き出すように実装→ボットを起動した時にファイルを読み込む機能を実装

try-catch文=例外処理(tryの処理でエラーが出たらcatchの処理を実行する)

 

11.HTTPサーバー

Node.js(httpモジュール)を使ってHTTPサーバーの作成を行いました。

 

12.ログ

アクセスログの出力とエラーログの出力を行いました。

 

13.HTTPのメソッド

GETメソッドとPOSTメソッドについて学びました。

switch文を使ってGETとPOSTのリスエストを実装しました。

 

14.HTTPのフォーム

formタグとPOSTメソッドでサーバーにデータを送信する機能を実装しました。

 

15.テンプレートエンジン

jade(現Pug)というテンプレートエンジンを利用してHTMLを動的に出力することができました。

 

11月10日(金)の学習内容

N予備校プログラミングコースの「プログラミング入門Webアプリ」

第3章「サーバサイドプログラミング入門」

16.Herokuでwebサービスを公開

17.認証で利用者を制限する

18.Cookieを使った秘密の匿名掲示板

19.UI、URI、モジュールの設計

20.フォームによる投稿機能の実装

 

16.Herokuでwebサービスを公開

HerokuというWebサービスを動かすことができるプラットフォームの使い方を学びました。

Herokuのアカウントを作成→コンソール上でherokuコマンドが使用できるようにするためにHeroku CLIをインストール→Herokuで起動できるようにファイルを修正→Herokuにサーバーを作成→デプロイ(サーバー上に配置)

という流れでした。

 

17.認証で利用者を制限する

ユーザー名とパスワードを入力するBasic認証の実装について学びました。

ステータスコード  

200-OK リクエストの成功

401-Unauthorized アクセス権不正

/logoutにアクセスしたら401を返すことでログアウトの実装もしました。

 

18.Cookieを使った秘密の匿名掲示板

秘密の匿名掲示板の作成に向けて「匿名ではあるが同じユーザーであることを認識する」ためにWebブラウザに情報を記録するCookieの仕組みについて学びました。

最後にアクセスした時間をCookieに記録することと、有効期限を設定することができました。

 

19.UI、URI、モジュールの設計

秘密の匿名掲示板の作成に向けて、UI (ユーザーインタフェース)設計、URI 設計、モジュール設計について学びました。

今回はステータスコード302-Foundを返すことで別のページに転送するリダイレクトする処理を実行しました。

 

20.フォームによる投稿機能の実装

投稿機能の実装を行いました。

HTTPサーバーを実装→モジュールを2つ作成→投稿フォームをjadeで作成→投稿されたログを書き出し投稿フォームにリダイレクトするようにモジュールを修正

という流れでした。

 

そのほか、「CSVファイル」についてと「LocalStorage」についても勉強しました。

 

 

N予備校のプログラミングコースは第3章に入って段々内容が複雑になってきた感じがします。 

 

11月6日〜11月7日の学習内容

11月6日(月)の学習内容

N予備校プログラミングコースの「プログラミング入門Webアプリ」

第2章「準備をしよう」

06.シェルプログラミング

07.通信とネットワーク

08.サーバーとクライアント

09.HTTP通信

10.通信をするボットの開発

11.GitHub で Web サイト公開

12.イシュー管理と Wiki によるドキュメント作成

13.Git と GitHub の連携

 

まで学習を進めました。

シェルスクリプトで簡単なプログラムを組んだり →06.シェルプログラミング

HTTPサーバーを立てたり →09.HTTP通信

1時間ごとにニコニコ動画のランキングデータを取得するBotを作ってみたり →10.通信をするボットの開発

なかなか面白かったです。

 

後半はGitHubのアカウントを作成して GitHubの基本的な使い方(フォークやクローンなど)を学びました。

 

ただ、13.Git と GitHub の連携 を一通り終えて、Ubuntuを終了後、再度起動しようとした時にvagrant ssh で接続しようとするとpasswordを求められるようになってUbuntuを起動できなくなってしまいました。

途中で誤って.sshディレクトリを削除してしまったのがまずかったっぽいです。

とりあえずVagrantfile内に記述されてるpasswordを入力すれば起動できるということは分かったのですが、

毎回passwordを入力するのは大変なので、結局VirtualBoxVagrantをインストールし直して、環境構築をやり直しました。

 

おかげで前回の復習にもなったので、良かったことにします。

 

そのほか、先週の学習で難しいと感じた

正規表現 →第1章 15.診断機能の開発

・無名関数(アロー関数)→第1章 16.診断機能の組込み

の解説をしていただきました。ありがとうございます。

 

11月7日(火)の学習内容

N予備校プログラミングコースの「プログラミング入門Webアプリ」

第2章「準備をしよう」

14.GitHub への push

15.Git のブランチ

16.ソーシャルコーディング

 

第3章「サーバーサイドプログラミング入門」

01.Node.js

02.集計処理を行うプログラム

03.アルゴリズムの改善

 

 14.GitHub への push

 ローカルでリポジトリを作成してリポジトリに変更を加える→ステージング→コメントを付けてコミット→GitHubリポジトリを作成→GitHubにプッシュ

って流れをやりました。

 

15.Git のブランチ

ブランチとマージの概念を学びました。

ローカルでブランチを作成→ブランチでファイルの変更、コミット→GitHubリポジトリに、作成したブランチをプッシュ

ローカルのブランチをマスターにマージ→GitHubリポジトリにプッシュ

って流れをやりました。

 

16.ソーシャルコーディング

コンフリクトについての解説のあと、コンフリクトの修正とプルリクエストの出し方を学びました。

 

これで第2章「準備しよう」が終わりました。

GitHubを使って複数のメンバーで開発を進める流れがなんとなくイメージできた気がします。

 

続いて第3章「サーバーサイドプログラミング入門」に入ります。

 

01.Node.js

サーバーサイド向けのプラットフォームのNode.jsについての学習です。

nodebrewというNode.jsのバージョン管理のツールをインストール→Node.jsのインストールを行いました。

Node.jsを使って階乗関数のプログラムを作成しました。

 

02.集計処理を行うプログラム

csvファイルのデータから「2010年から2015年にかけて15歳~19歳に人が増えた割合の都道府県ランキング」というものを作成しました。

csvファイルからデータを読み取る→csvファイルからデータを抜き出す→抜き出したデータを連想配列で格納し、データを計算→計算したデータを並び替えて表示

という流れで実装していきました。

 連想配列のMap(文字列を添字として配列)とデータの並び替えの実装の時に出てきたmap関数(配列の各要素に与えられた関数を適用)の部分の理解がまだ追いついてない感じです。

 

03.アルゴリズムの改善

フィボナッチ数列を出力するプログラムの作成を行いました。最初に作ったプログラムは時間のかかる処理だった(指数オーダー)ため、連想配列を使ってメモ化によるアルゴリズムの改善を行いました。

プロファイルツール(nodegrind)を使って処理にかかる時間なども調べました。

 

こんな感じですね。十分に理解できていない部分があるので、授業テキストを読み直したいと思います。

11月3日〜11月5日の学習内容

11月3日(金)〜11月5日(日)の学習内容

N予備校プログラミングコースの「プログラミング入門Webアプリ」

第2章「準備をしよう」

02.コンピューターの中身

03.ファイル操作

04.標準出力

05.vi

 

を学習しました。

この辺はLInuxのコマンドを色々使いながらLinuxの操作に慣れていくって感じですね。

とりあえずUbuntuの起動と終了の仕方はマスターしたかなーと思います。

 

03.ファイル操作 

ではLinuxMacとの共有フォルダを作成しました。

これでLinuxMacでファイルのやり取りができるようになりました。

 

05.vi 

ではCUIエディタのvimでファイルの編集を行うことができました。

 

 

ITパスポートの学習の方は

平成29年度 イメージ&クレバー方式でよくわかる 栢木先生のITパスポート教室 (情報処理技術者試験)

の第4章ネットワーク

を読み進めました。

11月1日~11月2日の学習内容

11月1日(水)の学習内容

N予備校プログラミングコース

www.nnn.ed.nico

の「プログラミング入門Webアプリ」から学習を始めています。

授業動画と授業テキストで学習を進めていくかたちです。

すでに

 

第1章「はじめよう」

01.プログラミングを体験してみよう

02.はじめてのHTML

03.さまざまなHTMLタグ

04.HTMLで作る自己紹介ページ

 

までは学習済みで、この日は

 

05.はじめてのJavaScript

06.JavaScriptでの計算

07.JavaScriptで論理を扱う

08.JavaScriptのループ

09.JavaScriptのコレクション

10.JavaScriptの関数

11.JavaScriptのオブジェクト

 

まで学習しました。

 

最後はJavaScriptを使って、時間あてゲーム(ダイアログのOKボタンを押して10秒たったと思ったら何かキーを押して10秒±0.5秒だったら「〇秒でした。すごい」と表示され、それ以外だと「〇秒でした。残念」と表示されるゲーム)を作成することができました。

動画を見ながら、授業テキストにあるコードを入力していくだけなんですが、その通りに動くと気持ちがいいですね。

 

11月2日(木)の学習内容

N予備校プログラミングコースの「プログラミング入門Webアプリ」

第1章「はじめよう」

12.はじめてのCSS

13.CSS を使ったプログラミング

14.Web ページの企画とデザイン

15.診断機能の開発

16.診断機能の組込み

17.ツイート機能の開発

 

第2章「準備しよう」

01.LinuxというOS

 

まで学習しました。

第1章後半はHTML・JavaScriptCSSの知識を組み合わせて、あなたのいいところ診断のWebページ(名前を入力すると〇〇さんのいいところは〇〇〇です、と診断結果が表示され、診断結果をツイートできるボタンも設置されたページ)の作成を行いました。

 

正規表現 15.診断機能の開発

・無名関数(アロー関数)→16.診断機能の組込み

この辺がちょっと難しく感じたので、再度確認しておこうと思います。

あとは、ツイート機能の実装の際にリバースエンジニアリングという概念を学びました。

 

第2章に入り、Linuxの環境構築を行いました。

ちなみにPCはMacを使用しています。(Mac初心者でもあります)

 

VirtualBox
Vagrant

の2つのソフトウェアをインストールして仮想環境を構築し、UbuntuLinux)を無事インストールできました。

 

並行してITパスポートの資格取得に向けても学習を進めています。

平成29年度 イメージ&クレバー方式でよくわかる 栢木先生のITパスポート教室 (情報処理技術者試験)

という本を使用しています。

とりあえずひととおり目を通していこうと思います。

第1章ハードウェア

第2章ソフトウェアとマルチメディア

第3章システム構成

 まで読み進みました。

 

ブログを開設しました。

11月よりシステム開発の会社で働くことになりました。

31歳、プログラミング未経験者です。

新しいことにチャレンジする機会をいただけて、大変感謝しております。

 

まずは広く浅く知識をつけていくということで、以下の課題に取り組むことになります。

 

N予備校プログラミングコース 1~2ヶ月

 
ITパスポート試験 年内合格

 
基本情報技術者試験 来年4月受験

 
Java、データベース等の学習(動画、本など)

 

合わせて、プログラミング等の学習の記録をこのブログに残していきます。

よろしくお願いします。