dolpen dolpen

#一覧画面と詳細画面

ヒーローの一覧について、一覧と詳細の画面を作る。

たくさんのヒーロー達

我々にはたくさんのヒーローが必要である。このアプリケーションを、ヒーローの一覧を表示できるように拡張し、ユーザーがヒーローを選択できるように、そして選択されたヒーローの詳細情報を表示できるようにしよう。

ヒーローの情報を編集する画面

今回は、ヒーローの情報を編集する簡単なエディタを作る。

前回までのあらすじ

あらゆる物語にはスタート地点がある。今回の話はクイックスタートが終わったところから始めよう。

今回作るもののデモ

#チュートリアル: TOUR OF HEROES

このチュートリアルは TypeScript で Angular2 のアプリケーションを作成する手順を説明している。

ここでやりたいこと

この計画は、ヒーロー事務所に所属したヒーローたち、そして彼らの派遣を望むような仕事をマネジメントする助けになるアプリケーションを作成することである。無論、このチュートリアルで得られる進捗はほんの少しだけだと思う。しかし、最終的な完成形にはデータドリブンアプリケーション(data-driven application)に求められる機能の大部分は持つことになるだろう。例えば、(事務所に所属する)ヒーローの一覧を取得して表示すること、あるヒーローの情報を編集すること、あるいはヒーローのデータを表示する別の画面に遷移することなどだ。

3/25 19:00 - 3/25 23:00 ガチエリア(デカライン/マサバ)

スシ握る。初期値S82

デカライン

2勝1敗

エリア手前の壇上はガードレール以外危険なので基本立たない。相手側通路をl気にしつつ左起点で攻める。相手側壇上へのスロープからスパショを撃つと通りやすい。

	digraph G {

	subgraph cluster_1 {
	gea[label="歯車"];
	}
	subgraph cluster_2 {
	bel[label="輸送ベルト"];
	}

	subgraph cluster_3 {

	digraph G {
	subgraph cluster_Alpha {
	irp[label="鉄板(8)",shape=Msquare];
	cop[label="銅板(1.5)",shape=Msquare];
	label="掘って焼く";
	}

	subgraph cluster_A {
	ger[label="歯車(2)"];
	color=red;

	window.onload = function () {
	var script = document.createElement("script");
	var code = function () {
	var uiController = [
	' <div style="text-align:center;">'
	, ' <div class="ui icon buttons" style="text-align:left;margin:1rem;">'
	, ' <button id="plus_select_alpha" class="ui large orange button" style="width: 150px;">Alpha</button>'
	, ' <button id="plus_select_neutral" class="ui large button" style="width: 70px;"><i class="unmute icon"></i></button>'
	, ' <button id="plus_select_bravo" class="ui large violet button" style="width: 150px;">Bravo</button>'
	, ' </div>'

	# http://www.graphviz.org/content/cluster

	digraph G {

	Router [shape=Msquare,label="RTX1200\n(router)"]
	Internet -> ONU [color=blue]
	ONU -> Router [color=green]
	Router -> PC[color=green]
	Router -> NAS[color=green]
	Router -> Air [color=orange]

	# Description:
	# ハイカラニュース
	#
	# Notes:
	# イカ、よろしくー
	#
	kaiwa = {
	"Bバスパーク": [
	["スケボーは苦手･･･\n骨折とかしそう･･･", "骨、無いじゃん･･･"],
	["ここは接近戦が勝負の決め手！\n死角も多い！", "高台からチャージャー使うのも\n捨てがたいよね～"],

	digraph G {

	src1[label="Switch+Dock"]
	src3[label="マイク"]
	dest1[label="ディスプレイ"]
	dest2[label="ヘッドフォン"]
	mix[label="ミキサ"]
	spl[label="HDMIスプリッタ+RCA分離器"]
	src1 -> spl [label="game",color=violet]