2018-05-20

サーバーレスシングルページアプリケーション 2章

タダです。

今回はサーバーレスシングルページアプリケーション2章で勉強したことをまとめていきます。 www.oreilly.co.jp

章立ては以下のようになっています。

1章　シンプルにはじめる
2章　ハッシュイベントによるビューのルーティング
3章　シングルページアプリケーションに必要なもの
4章　Amazon CognitoによるIdentity as a Service
5章　DynamoDBにデータを格納する
6章　Lambdaを使って（マイクロ）サービスを作る
7章　サーバーレスのセキュリティ
8章　スケールアップする

2章のまとめ

今回はハッシュイベントを使って、動的マークアップの作成と表示をトリガーするルータを作る
- ルータは事前に定義されているルータを使って、URLハッシュとビュー関数を対応づける
テストファーストのアプローチで書いたユニットテストを使ってルータをテストする
テストを書くためにJasmineを使う
Jasmineでは、describeとitという二つの関数を渡すコールバックにテストを書くことでテストをまとめられる
- describeは、テストにコンテキストとセットアップを加えられる
- itは、個別のテストを書くために使う
簡単なテストのためのコードを書いてアクセスするとこちらのようなページに遷移する

describe('Learnjs', function(){
  it('can show a problem view', function() {
    learnjs.showView('#problem-1');
    expect($('.view-container .problem-view').length).toEqual(1);
  });
});

f:id:sadayoshi_tada:20180520123551p:plain

ルータ関数のテストを成功させるためには3つのことを追加する必要がある
- ルータにビューを追加する場所を与えるため、ビューコンテナを追加する必要がある
- showView関数をつくって最小限の問題ビューを作る必要がある
- ルータ関数と残りのアプリケーションを配置する名前空間を作成する必要がある
ルートを導入するためには別のテストw作ることでその振る舞いを作る必要がある
ビューをパラメータ化する
- ハッシュを二つのパーツ、名前とパラメータに分割して、区切り文字としてハイフンを入れる
- 振る舞いをテストするために、スパイ(spy)という新しい要素を導入する
スパイはテストダブルの一種
- 実際のオブジェクトや関数の代役を務めることでテストをサポートする
- スパイを使ってルータと問題ビュー関数の相互作用を確認する
- JasmineのspyOn関数を使う
問題ビューのテストをもっと大きなスコープにまとめるために問題ビューのためのdescribeセクションを作って、describe関数に入れる方が良い
シングルページアプリケーションは一度ロードするだけで処理が終わらないこともあるので、JavaScriptを置いてページローディング機構を作る
- jQueryの$.ready()関数を使う
最終的にテストが通るように改修していくと、以下の画面のようにオールグリーンになる

次は3章で問題ビューを実装していきます。

2018-05-19

5/14~5/19 AWSブログ

AWS

タダです。

今週のAWSブログアップデートをまとめていきます。

１、Amazon Aurora Backtrack – 時間を巻き戻す

Auroraに指定した時間への巻き戻し機能である、Aurora Backtrackが実装されました
MySQL互換のみの対応で、巻き戻し中はDBへの操作は何もできないような状態になるようです
Aurora はデータベースを一時停止し、すべての接続を遮断して、コミットされていない書き込みをドロップし、巻き戻し機能が完了するのを待ちます。その後、通常のオペレーションを再開して、リクエストを受け入れます。巻き戻し機能の実行中、インスタンスの状態は backtracking (巻き戻し中) になります。

２、2018 年 6 月の AWS Black Belt オンラインセミナーのご案内

AWS Black Beltセミナーの6月コンテンツのお知らせ記事です

３、フェデレーションを利用したIAM ロールで AWS のAPI にアクセスできる時間を12 時間まで延長可能に

IAMロールでのAPIコールできるセッション時間がデフォルト1時間だったところ最大12時間まで延長可能な設定ができるようになりました

４、オンプレミスの AWS Elemental Live からクラウド上の AWS Media Services への接続

タイトル通りの処理を今後５回で連載するという紹介記事です
- 概要としては以下の通りです
  オンプレミスのアプライアンスである AWS Elemental Live を、FEC を有効にした RTP を使った伝送用エンコーダーとしてセットアップする方法
  
  伝送ストリームを AWS Elemental MediaLive で受けて、adaptive bitrate (ABR) のストリームにエンコードする設定方法
  
  AWS Elemental MediaLive の出力を AWS Elemental MediaPackage に接続し、デバイスで視聴できるチャンネルを作成するための、さらなる処理及びパッケージングの設定方法

５、NEW!! AWS Launch 動画が始まりました

直近のAWSアップデートを3分でまとめるYouTube動画が上がっていくようです

６、Amazon RDS for PostgreSQL バージョン: 9.3.x リタイアメントのお知らせ

Amazon RDS が RDS for PostgreSQL のバージョン9.3のサポートを2018年9月5日をもって終了するとのことです
- データベースインスタンスをバージョン9.6, もしくは、バージョン10 にアップグレードすることを推奨するとのことです

７、[AWS Black Belt Online Seminar] 発注者のための AWS ネットワーク入門資料及び QA 公開

タイトル通りのWebnarの資料及びQ&A公開した記事です

８、Amazon Sumerian – GAのお知らせ

SumerianがGAしました

９、OBS Studio からクラウド上の AWS Media Services への接続

オンプレミスの環境からMedia Serviceへ連携する連載記事の２回目です
- 今回は、OBS(Open Broadcaster Software) Studio と RTMP (Real-time Messaging Protocol) Pushを用いたストリームをセットアップし、クラウド上での動画処理およびパッケージングのための AWS Media Servicesの設定方法の紹介をしています

以上が今週のブログアップデートまとめになります。

2018-05-13

サーバーレスシングルページアプリケーション 1章

サーバーレスシングルページアプリケーション学習ノート

タダです。

今回からサーバーレスシングルページアプリケーションで勉強したことをまとめていきます。 www.oreilly.co.jp

章立ては以下のようになっています。

1章　シンプルにはじめる
2章　ハッシュイベントによるビューのルーティング
3章　シングルページアプリケーションに必要なもの
4章　Amazon CognitoによるIdentity as a Service
5章　DynamoDBにデータを格納する
6章　Lambdaを使って（マイクロ）サービスを作る
7章　サーバーレスのセキュリティ
8章　スケールアップする

この記事では1章の内容をまとめていきます。

1章のまとめ

今回はHTML/CSS/JavaScriptのWebアプリケーションを使って学習する
Webアプリケーションを低コストで始めるためにはサーバーレスが始めやすい
サーバーレスWebアプリケーションを学ぶためにLearnJSというJavaScriptプログラミングパズルアプリケーションを作ることにする
サーバーレスアプリケーションをローカルで実行するには、./sspa server で実行できる(sspaはラッパースクリプト)
- 実行すると以下のようなページが表示される
ランディングページを作るためにSkeltonのグリッドを使ってレイアウトを作る
- タイトルテキスト、画像、CTA(行動喚起)のボタンを配置する(以下のようなページが表示されます)
ランディングページをS3にデプロイするため、S3バケットを作る
- 予め、AWS CLIのセットアップを行う

./sspa create_bucket learnjs.xxxx.com
make_bucket: learnjs.xxxx.com
Website endpoint is: http://learnjs.xxxx.com.s3-website-ap-northeast-1.amazonaws.com

デプロイを実行すると次のようになります

./sspa deploy_bucket learnjs.xxxx.com
upload: public/tests/app_spec.js to s3://learnjs.xxxx.com/tests/app_spec.js
upload: public/favicon.ico to s3://learnjs.xxxx.com/favicon.ico
upload: public/app.js to s3://learnjs.xxxx.com/app.js
upload: public/tests/index.html to s3://learnjs.xxxx.com/tests/index.html
upload: public/index.html to s3://learnjs.xxxx.com/index.html
upload: public/tests/SpecHelper.js to s3://learnjs.xxxx.com/tests/SpecHelper.js
upload: public/tests/lib/jasmine-2.3.4/boot.js to s3://learnjs.xxxx.com/tests/lib/jasmine-2.3.4/boot.js
upload: public/tests/lib/jasmine-2.3.4/jasmine-html.js to s3://learnjs.xxxx.com/tests/lib/jasmine-2.3.4/jasmine-html.js
upload: public/tests/lib/jasmine-2.3.4/jasmine_favicon.png to s3://learnjs.xxxx.com/tests/lib/jasmine-2.3.4/jasmine_favicon.png
upload: public/images/HeroImage.jpg to s3://learnjs.xxxx.com/images/HeroImage.jpg
upload: public/tests/lib/jasmine-2.3.4/jasmine.js to s3://learnjs.xxxx.com/tests/lib/jasmine-2.3.4/jasmine.js
upload: public/tests/lib/jasmine-2.3.4/console.js to s3://learnjs.xxxx.com/tests/lib/jasmine-2.3.4/console.js
upload: public/tests/lib/jasmine-2.3.4/jasmine.css to s3://learnjs.xxxx.com/tests/lib/jasmine-2.3.4/jasmine.css
upload: public/tests/lib/jquery-2.1.4.js to s3://learnjs.xxxx.com/tests/lib/jquery-2.1.4.js
upload: public/vendor.js to s3://learnjs.xxxx.com/vendor.js

東京リージョンS3にWebページのデプロイができました。次は2章でアプリケーションにクライアントサイドルータを追加し、複数のアプリケーションビューをサポートについて勉強します。

2018-05-13

RubyとRuby on Railsの学習メモ(1)

学習ノート Ruby Ruby on Rails

タダです。

最近、プログラミングをなんとかできるようになりたいと思って、TECH::CAMPさんにお世話になっているのですが、そこでRubyとRuby on Railsをまず学びました。

基本的な学習は一周したのですが、概念として理解しきれていないものがあるので、整理するためにブログを書いていこうというシリーズをやっていきます。

初回は、以下の事について整理します。

Ruby
- オブジェクト
- メソッド
- クラス
- インスタンス
Ruby on Rails
- ルーター
- コントローラー
- ビュー
- モデル

なお、自分のプログラミングに関するステータスは次のような状態です。

新卒１年目で入った会社で、マークアップ言語(HTML、CSS、JavaScript)と、Javaを研修として学ぶ
- コードレビューの概念はほどんどなく、プログラミングのお作法や、どう書くべきかは教わらず自己流で進める
２社目でJavaを業務では触ったが既存のコード改修と指示された要件を軽く追加するだけの作業であったためバリバリコードをかけるかというと書けない部類になる

プログラミングに関する言葉や文法はそこそこ知っているけど、実際に設計や設計を元に実装するという力は弱い状況です。

Ruby

Rubyで整理しておきたいのは以下のものです

オブジェクト
- Rubyで扱えるデータはすべてオブジェクト(文字、数字、色、時間etc)
メソッド
- メソッドはオブジェクトを呼び出すための道具(何らかの処理を付与する
- オブジェクトからメソッドを介して返却されるデータを返り値という
クラス
- オブジェクトの管理・生成方法として、クラスとインスタンスがあり、クラスは、オブジェクトの共通の属性(情報)とメソッドをまとめて定義しておく型のようなもの
インスタンス
- クラスから生成されるのがインスタンス

クラスとインスタンスに関連する概念も合わせて整理していきます。

クラスとインスタンスについて

クラスの定義は、以下のように行いクラス名は半角大文字で始めます。

class クラス名
  # 変数/メソッドの定義
end

インスタンスは以下のように定義します。

class Test
  # 変数/メソッドの定義
end

test = Test.new

クラスメソッドとインスタンスメソッド

クラスメソッド = クラスが使用できるメソッド。クラス地震でも使用でき、クラスで共通の情報を持った処理に使用するインスタンスメソッド = インスタンスが使用できるメソッド。インスタンスメソッドを定義したクラスのインスタンスにしようできる。インスタンスごとの個別の属性値を持った処理に使う。

クラスメソッドの定義と呼び出し方

# 定義
class Test
  def self.メソッド名
    # 処理
  end
end

# 呼び出し方
クラス名.メソッド名(引数)
*代表的なクラスメソッドはnewメソッド

インスタンスメソッドの定義と呼び出し方

# 定義
class Test
  def メソッド名
    # 処理
  end
end

# 呼び出し方
インスタンス名.メソッド名(引数)

クラスメソッドとインスタンスメソッドの違い

クラスメソッドとインスタンスメソッドの違いを以下のようにまとめられます。

特徴	インスタンスメソッド	クラスメソッド
定義方法	メソッドの前にselfはつけない	メソッドの前にselfをつける
用途	インスタンスごとの属性を用いる場合	属性は関係のない共通の処理
呼び出せるオブジェクト	クラスのインスタンス	クラス自身

クラス変数とインスタンス変数について

いずれも共通の属性の定義方法になりますが、クラス変数とインスタンス変数に別れます。クラス変数はクラス全体で使用できる変数で、クラス内であればどこでも使えるため、クラスメソッド、インスタンスメソッドの両方で使える変数です。対して、インスタンス変数は、インスタンス毎に定義され、インスタンスメソッドのみで使用可能です。

インスタンス変数を定義する場合は次のように行います。

# 定義
class Test
  def メソッド名
    @test = "hoge"
  end
end

クラス変数を定義する場合は次のように行います。

# 定義
class Test
  @@test = "hoge"
end

Ruby on Rails

次に、Ruby on Railsで整理しておきたいのは以下の概念です。

ルーター
コントローラー
ビュー
モデル

ルーター/コントローラー/ビューについて

Railsの処理は幾つかのパートが存在し、ルーティング、コントローラー、ビューがそれぞれの役割を持って処理を行います。

ルーティングは、クライアントからのリクエストに対してどのコントローラのどのアクションを動かすかの設定を行います。 config/routes.rbで定義を行います。

コントローラーは、ルーティングとビューをつなぐ役割を持っています。リクエストに対してコントローラーの処理を行った後、コントローラーから指定したビューが読み込まれます。コントローラーを作成するためにはrails g controllerコマンドを実行します。

ビューはクライアントのリクエストに対してのレスポンスとして返されるファイルデータになります。ビューはコントローラーのメソッド一つにつき、一つ存在します。

モデルについて

モデルは、Railsの中でデータエースへのアクセスをはじめとする情報のやり取りに関する処理を担当しているパートです。モデルがなければ、ルーター/コントローラー/ビューで返されるデータは毎回同じデータになってしまいます。実態は一つのクラスが定義された、◯◯.rbファイルです。コントローラーからモデルを利用してデータベースのデータをよんで、ビューに渡すことを行っています。

以上が今回のまとめになります。