TOEIC800点へのストラテジ(スタディサプリはじめました)

スタディサプリ申し込んじゃった♪
現在の進捗↓
Part2を集中して練習してきたが、特急系参考書2冊を
取り敢えず殆ど消化し、あとは家事の間に復習して、音を覚えていく感じにする。
かなり手応えはあるが、まだまだ初聴で落とすこともありそうなので、
この2冊に関しては完璧に仕上げるべし。
座学は基本スタディサプリにシフトしていく。
Part2の特急系2冊を完璧にしてから、金のフレーズに手をつける予定。

■リスニング: 400(AsIs) => 425点(目標)
ターゲット: Part2の得点力強化
Step.1: TOEIC L&R TEST パート1・2特急 難化対策ドリル【進捗率: 90%】
Step.2: TOEIC L&R TEST パート1・2特急II 出る問難問 200【進捗率: 90%】
Step.3: イングリッシュ・ドクターのTOEIC L&R テスト最強の根本対策【進捗率: 0%】
Step.3: スタディサプリ(TOEICコース)

■リーディング: 325(AsIs) => 350点(目標)
ターゲット: 語彙力の強化
Step.1: TOEIC L & R TEST 出る単特急 金のフレーズ (TOEIC TEST 特急シリーズ)

TOEIC800点への進捗と方針転換

下記の通り進捗している。
仕事が忙しく少しサボり気味ではあるが、概ね順調。
最近、スタディサプリTOEIC対策コースが気になる。
自分の学習習慣(すき間時間勉強 & ランニング勉強)と癖(勉強に限っては紙媒体が結構嫌い)
に凄く合っているような気がして本気で申し込んでしまおうかしらと検討中。

■リスニング: 400(AsIs) => 425点(目標)
ターゲット: Part2の得点力強化
Step.1: TOEIC L&R TEST パート1・2特急 難化対策ドリル【進捗率: 90%】
Step.2: TOEIC L&R TEST パート1・2特急II 出る問難問 200【進捗率: 60%】
Step.3: イングリッシュ・ドクターのTOEIC L&R テスト最強の根本対策【進捗率: 0%】
Step.3: スタディサプリ(TOEICコース)?

■リーディング: 325(AsIs) => 350点(目標)
ターゲット: 語彙力の強化
Step.1: TOEIC L & R TEST 出る単特急 金のフレーズ (TOEIC TEST 特急シリーズ)

TOEIC800点突破へのストラテジー

地震で目が覚めたので、深夜の執筆。
覚悟決めて、これからお仕事もする。

12月に受けたTOEICの結果が返ってきた。
結果は725点で無事700点突破!!

とはいえ、この程度じゃ何の箔もつかないので、
4月の試験で750点突破を目標にストラテジーを再考してみた。
本当は、スコアの低い、文法・読解もガシガシやりたいところだが、
あくまでも、今年度の目標はリスニング力強化で、"普通に聞ける"ように
なることがターゲット。
ブレない、本質を見失わない、スコアだけを追い求めない。

■リスニング: 400(AsIs) => 425点(目標)
ターゲット: Part2の得点力強化
Step.1: TOEIC L&R TEST パート1・2特急 難化対策ドリル【進捗率: 85%】
Step.2: TOEIC L&R TEST パート1・2特急II 出る問難問 200【進捗率: 0%】
Step.3: イングリッシュ・ドクターのTOEIC L&R テスト最強の根本対策【進捗率: 0%】

■リーディング: 325(AsIs) => 350点(目標)
ターゲット: 語彙力の強化
Step.1: TOEIC L & R TEST 出る単特急 金のフレーズ (TOEIC TEST 特急シリーズ)

TOEIC点数アップのためのすとらてじー

10月、11月に受けたTOEIC、共に680点。。。
12月の結果はまだだが、700は超えていると期待したい。
ハッキリ言って初級レベルから脱せないのだが、
足を引っ張ってるのは以外にもPart 2が解けないことだと思う。
そこで、3月までにPart 2で満点を叩きだすためのストラテジーを考えた。
短い文を確実に聞けるようになるのが目標。

■Step.1: 既存の教材聞きまくり作戦
「新TOEIC TEST パート1・2 特急難化対策ドリル」のシャドウイング
TOEIC(R)テスト超速トレーニング」のシャドウイング
TOEIC(R) L & R テスト 究極のゼミ Part 2 & 1」のシャドウイング

■Step.2: 実践フェーズ
リスニング特化模試系問題集数冊

■Step.3: 語彙力向上
TOEIC L & R TEST 出る単特急 金のフレーズ」

React.js で作る"Hello React" からのToDoアプリを作成する~その2: ToDoアプリ完成~

前回の記事で取りあえずは"Hello World!!"が表示された。これをベースにToDo アプリを作っていく。hirahiro56.hatenablog.com

下記のようなアプリイメージのものを開発していく。

f:id:hirahiro56:20150516135323j:plain


【Step.1】index.htmlの作成
まずは、index.htmlを準備する。これはHello World の時と何にも変わらない。

<html>
  <head>
  </head>
  <body>
    <div id="app-container"></div>
    <script src="dist/app.js"></script>
  </body>
</html>

【Step.2】TodoListコンポーネントの作成
アプリのルートとなるTodoListコンポーネントを作成する。このコンポーネントは全てのコンポーネントの親玉となるもので、このアプリにおいて状態を監視するべきデータである「残タスク一覧」(実体はオブジェクトのコレクション)を管理する。React.js では状態を管理する必要のあるデータ、つまり、更新されると画面を再描画する必要がるものは全て親玉(ルート)のコンポーネントで管理するように設計する。このような管理するべきデータをstete と呼ぶ。
コードは下記のようになり、app.js として保存する。

var React = require('react');
var Todo = require('./todo');
var InputApp = require('./inputapp');

var generateId = (
	function(){
		var id = 10;
		return function(){
			return (id++);
		}
	}
)();

var TodoList = React.createClass({
 //todos(ToDoリスト)を初期化
  getInitialState() {
    return {
      todos: [
        {id:1, text:"Sample1"},
        {id:2, text:"Sample2"},
        {id:3, text:"Sample3"}
      ]
    };
  },
  //引数のidに一致するデータをtodosから削除
  deleteTodo(id) {
    this.setState({
      todos: this.state.todos.filter((todo) => {
        return todo.id !== id;
      })
    });
  },
  //引数のToDoをToDoリスト(todos)にアペンドする。
  updateToDoList:function(todo){
    var tmptodos = this.state.todos.concat(todo);
    this.setState({todos: tmptodos});
  },
  render() {
    //ToDoリストのデータをMarkdown形式で書き換える。
    var todos = this.state.todos.map((todo) => {
      return <li key={todo.id}><Todo onDelete={this.deleteTodo} todo={todo} /></li>;
    });
    return (
      <div>
        <InputApp onSave={this.updateToDoList} id={generateId()} />
        <ul>{todos}</ul>
      </div>
    );
  }
});

React.render(
  <TodoList />, document.getElementById('app-container')
);

上記コードから、このコンポーネントは、Todo, およびInputAppという子コンポーネントを包括していることが分かると思う。
次のステップで、これらのコンポーネントを実装していくことになる。

【Step.3】InputAppコンポーネントの実装
InputAppコンポーネントの役割は下記2つとなる。
1.フォームの表示
2.フォームの内容(INPUT)を todos に追加する(ToDoリストに追加する)

ソースファイルをinputapp.js とし、下記の通り実装する。

var React = require('react');

var InputApp = React.createClass({
  _onKeyDown:function(e){
    if(e.keyCode === 13){
      var todo = {
        id: '',
        text: ''
      };
      todo.text = e.target.value;
      todo.id = this.props.id;
      this.props.onSave(todo);
      //this.props.onSave(e.target.value);
      e.target.value="";
    }
  },
  render: function(){
      return (
        <div>
          <h2>Input your ToDo</h2>
          <input type="text" onKeyDown={this._onKeyDown} />
        </div>
      );
  }
});

module.exports = InputApp;

【Step.4】ToDoコンポーネントの実装
ToDoコンポーネントの役割としては、下記2つとなる。
1.登録されたToDoの内容を表示する
2.delete ボタン押下時にToDoリスト(todos)から要素を削除する

todo.js として下記の通り実装するが、
削除処理について、実体は親コンポーネント(ToDoList)のdeleteTodoメソッドとなる。つまり、ToDoコンポーネントではToDoリスト(todos)の内容を更新するようなことはせず、親コンポーネントに処理を委譲する(呼び出し & 引数を与える)だけである。React.jsではアプリケーションの状態、所謂state(ToDoリストのtodos[])の管理は親玉(ルート)のコンポーネントに一括で請け負ってもらい、子コンポーネントはstateを持たないように設計することが定石となる。

var React = require('react');

var Todo = React.createClass({
  propTypes: {
    todo: React.PropTypes.shape({
      id: React.PropTypes.number.isRequired,
      text: React.PropTypes.string.isRequired
    }),
    // 削除するための処理をI/Fとして定義
    onDelete: React.PropTypes.func.isRequired
  },
  // 親に処理を委譲する
  _onDelete() {
    this.props.onDelete(this.props.todo.id);
  },
  render() {
    return (
      <div>
        <span>{this.props.todo.text}</span>
        <button onClick={this._onDelete}>delete</button>
      </div>
    );
  }
});

module.exports = Todo;

【Step.5】ビルド
最後にbrowserify/reactifyでビルドを実行するが、本ソースはES6, 7のシンタックスを利用しているため、reactifyのharmony オプションをつけてビルドする。

browserify -t [reactify --harmony ]  src/app.js -o dist/app.js
npm start

上記コマンド実行したら下記URLにアクセスして、ToDoアプリの挙動を確認できる。

http://localhost:8080/

React.js で作る"Hello React" からのToDoアプリを作成する~その1:取りあえず"Hello React"~

※本稿は開発環境にnpm が入っていることを前提とする。

【Step.1】下ごしらえ
任意のフォルダを作成し、その下にpackage.json を下記の内容で配置する。

{
  "name": "devtodo",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "http-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "http-server": "^0.7.4"
  }
}

本ディレクトリ直下にsrcフォルダとdistフォルダも作成しておく。

【Step.2】必要なツールを色々とインストール(npmでサクッと)
上記フォルダの下において、npm innstall を実行し、ツール類(ReactとかBrowserifyとかHTTPサーバーとか)をインストールする。

npm install
npm install -g browserify
npm install react
npm install reactify

【Step.3】 Hello World!!の作成
PJフォルダ直下にindex.htmlを作成する。

<html>
  <head>
  </head>
  <body>
    <div id="app-container"></div>
    <script src="dist/todoapp.js"></script>
  </body>
</html>

【Step.4】 コンポーネントの作成
srcフォルダ以下にtodoapp.jsx.js というファイル名で、
TodoApp コンポーネントを下記の通り作成する。

var React = require('react');

var TodoApp = React.createClass({
    render: function(){
      return (
        <div>
          <h2>Hello React!!</h2>
        </div>
      );
    }
});

React.render(
  <TodoApp />,document.getElementById('app-container')
);

【Step.5】 ビルド by browserify
上記作成したら、PJフォルダ以下で下記のコマンドでビルドを実行し、
ビルド結果得られたjs をdistフォルダ以下に出力する。

browserify -t reactify src/todoapp.jsx.js -o dist/todoapp.js

【Step.6】 稼働確認
下記のコマンドでhttp-serverを起ち上げ、http://localhost:8080 へアクセスする。

npm start

Play Framework で作る簡易認証システム(その3: ユーザ情報の表示)

前回に引き続き簡易認証システムを作っていく。
現状のつぶやき機能では誰が投稿したのかどうかわからないし、現在入っているユーザが誰なのかも分からない。
そこで、ログインしているユーザ情報と投稿者の情報を画面に表示するようにしよう。
"/inputchat"のリクエストを処理するApplication.inputchat()メソッドを下記の通り変更する。
セッション情報から"username"の内容を取得して、それをView に渡す。

■Application.inputchat()メソッド

  @Security.Authenticated(models.Secured.class)
    public static Result inputchat() {
      	//フォームを定義
		Form<PostChatForm> postChatForm = new Form(PostChatForm.class);

		//grpchatテーブルの内容をselectし、Listに格納する。
		List<Grpchat> grpchatAllRec = Grpchat.find.all();

		//セッション情報"username"を取得
		String username = session().get("username");

            return ok(inputchat.render("InputChatForm",postChatForm, grpchatAllRec, username));
    }

続いてViewを下記の通り編集する。
・コントローラからusernameを受け取る。
・フォームにおいて、hiddenでユーザ名を持たす。

■inputchat.scala.html

@(message: String, postchatform: Form[forms.PostChatForm], grpchatList:List[Grpchat],username: String)

@import helper._

This resource is @message.

こんにちは♪ <br>
@username さん

@form(routes.Application.postchat()) {
	@inputText(postchatform("postMessage"))
	<input type="hidden" name="username" value= "@username" >
}

@for(chatrec <- grpchatList){
	@chatrec.message / @chatrec.postdate [@chatrec.username]<br>
}

最後に上記フォームが投稿されたときに呼び出されるApplication.postchat()を編集する。
変更内容としては、フォームのusernameフィールドの内容をController 側で取得して
Grpchat オブジェクトに格納している点である。

■Application.postchat()

    public static Result postchat(){
    	//フォームの内容を取得して、PostChatFormクラスのインスタンスに格納する。
    	Form<PostChatForm> postChatForm = new Form(PostChatForm.class).bindFromRequest();

    	//フォームの内容をpostMessageに代入する。
    	String postMessage = postChatForm.get().getPostMessage();
    	String postUsername = postChatForm.get().getUsername();

    	//Grpchat オブジェクトをインスタンス化
    	Grpchat grpchatRecd = new Grpchat();

    	//Grpchat オブジェクトのmessageフィールドにフォームで取得した内容をセットする
    	grpchatRecd.setMessage(postMessage);

    	//Grpchat オブジェクトのusernameフィールドにフォームで取得した内容をセットする
    	grpchatRecd.setUsername(postUsername);

    	//テーブルにデータを登録
    	grpchatRecd.save();

        //return ok(postchat.render(postMessage));
		return redirect("/inputchat");
    }

ここまでできたら、
http://localhost:9000/inputchat
にアクセスして、grpchat テーブルのusernameカラムに投稿者のアカウント名が登録され、
投稿者、およびログインしているユーザ名が表示されることを確認しよう。