魔王のサタンぶろぐ

Angular2 "enum"をComponentの中で使いたい

はじめに

Angular2で関数に引数として数値を渡すとき、

<button (click)="method(1)"></button>

とか書いたら読みづらくないですか???

そこでenum

<button (click)="method(EnumType['button1'])"></button>

ただ単にenumの定義がちょっとわけわからなかったんでまとめておきます。

ま、コードを見ていきましょう。 と、行っても部分的コードになるので、個々で補完お願いします。

コード

<app.component.ts>

import { ~ } from '~';
...

enum EnumType {
    button1 = 1,
    button2 = 2,
    button3 = 3,
    button4 = 4,
}

@Component({
    selector: 'enumTest',
    template: `
    <button (click)="method(EnumType['button1'])"></button>
    `
})

export class appComponent{
    //変数フィールド
    EnumType: typeof EnumType = EnumType;

    constructor(){
    //コンストラクタ
    }

    public method(index: number): void{
        //実装
    }
}

っへ~~~~って感じですね。

ばいん

.NET Framework4.6 And MVC5 JSON.NET Converter

初めに

deserialize to abstract class or interface

上記のerrorが出たとき、僕の実装は、JsonでBindするクラスのメンバーの中にabstractを指定してました。

たぶん仕組み

Jsonを既存のBindで行うと、abstractやらInterfaceで実装したら、クラスとしてはちゃんと構造があるわけではないので、Jsonをどんな風にシリアライズすればいいの変わらなくてエラーが出ちゃうわけですね?

  • Newtonsoft.Json.NET を使ってます

www.newtonsoft.com

サンプルコード

URL https://blog.codeinside.eu/2015/03/30/json-dotnet-deserialize-to-abstract-class-or-interface/ このサイトを参考にしました。

以下ソースもこのサイトの引用です。

Modelクラスの実装

public abstract class BaseFoo // 抽象クラス
{
    public string FooBarBuzz { get; set; }
}

public class AFoo : BaseFoo  // 実装
{
    public string A { get; set; }
}

public class BFoo : BaseFoo // 実装
{
    public string B { get; set; }
}

Serializeテスト

AFoo a = new AFoo();
a.FooBarBuzz = "A";
a.A = "Hello World";

BFoo b = new BFoo();
b.FooBarBuzz = "B";
b.B = "Hello World";

List<BaseFoo> allFoos = new List<BaseFoo>();
allFoos.Add(a);
allFoos.Add(b);

var result = JsonConvert.SerializeObject(allFoos);

JsonConverterを実装

public class FooConverter : JsonConverter
{
    public override bool CanConvert(Type objectType)
    {
        return (objectType == typeof(BaseFoo));
    }

    public override object ReadJson(JsonReader reader, Type objectType, object existingValue, JsonSerializer serializer)
    {
        JObject jo = JObject.Load(reader);
        if (jo["FooBarBuzz"].Value<string>() == "A")
            return jo.ToObject<AFoo>(serializer);

        if (jo["FooBarBuzz"].Value<string>() == "B")
            return jo.ToObject<BFoo>(serializer);

        return null;
    }

    public override bool CanWrite
    {
        get { return false; }
    }

    public override void WriteJson(JsonWriter writer, object value, JsonSerializer serializer)
    {
        throw new NotImplementedException();
    }
}

実際に使ってみる

JsonConverter[] converters = { new FooConverter()};
var test = JsonConvert.DeserializeObject<List<BaseFoo>>(result, new JsonSerializerSettings() { Converters = converters });

ってな感じで実装します。

簡単でしょ??

ばいん

.NET Framework4.6 And MVC5 で作るIModelBinder

CustomIModelBinderについて

まず初めに僕が今回CustomIModelBinderを作るに至った状況を参考に紹介します。

  1. JSONをPOSTするAPIを作成
  2. バインドするモデルのメンバにinterface,abstract(抽象クラス)を含めた
  3. バインドするメンバにValidate(Require等)を属性として付与

こんな状況になったわけです。

開発環境

  • .NETFramework4.6
  • MVC5
  • NewtonJson

今回はIModelBinderについて

MVC4か3でIModelBinderの形式が変わってて自分が参考にしていたものが使えなくなったということで今回はこの記事を書きました。

using System.Web.Http.ModelBinding; // 間違わないように

public class SampleBinder : IModelBinder{
 // インターフェース実装
 public bool BindModel(HttpActionContext actionContext, ModelBindingContext bindingContext)
  {
    // 内部処理
    SampleClass sample = new SampleClass();
    
    JsonConverter[] converters = { new SampleConverter() }; //ここは後日(Jsonのカスタムオプション)

    using(var reader = new StreamRender(actionContext.Request.Content.ReadAsStreamAsync().Result)) // Json読み取り
    {
      var str = render.ReadToEnd();
      string jsonStrring = str.Replace("\n","");  // お掃除
      sample = JsonConvert.DeserializeObject<SampleClass>(jsonString, new JsonSerializerSettings() { Converters = converters });
    }

    if(sample != null)
    {
    // 忘れちゃいけないの以下
    bindingContext.Model = sample // ここ重要
    return true;
    }
    else
    {
      return false;
    }
  }
}

でまぁ構造的にはCustiomIModelBinderができました。 今度はどうやって使うかですが、 バインドするModelClassの上に属性として渡してあげましょう

namespace MVC.Models.Sample{
 [ModelBinder(typeof(SampleBinder)]
 public class SampleClass{
  // メンバー定義
 }
}

これで完璧です。

結局

“バインドするClass.jsonを作り直して"で解決するんですけどね?(笑)

ばいん

Angular-cliとQuickStart for 入門者

Angular2を勉強するにあたって

この1週間でなんとかAngular2を扱えるようになったんだけど… 入門コストが高いといわれるだけあった。

最初、躓いたのは以下の点

• File構造の複雑さ・多さ
• Component,Service,Modelの何が何だかわからない感

コードを始める気にすらならないこの辺がもういやだってなる。

せめてFile構造を気にせずプログラムしたい。。。

Angular-cliに出会う

Angular-cliは、ひな形の自動生成、更新ファイルを自動ロードなど、 開発環境が整っているCLI

Angular-cliでquickstartをやる

僕「これの組み合わせでやればコードのことだけ考えられる。。。」

Angular2「error!」

僕「( ^ω^)・・・」

package.jsonの違い

これによってimportするFileが決まる。 しかし、Angular-cliとquickstartのjsonが違うことに気付く。

僕「あああああああああああ~~~~~」

というわけで"あいのこ.json"を生成

{
    "name": "[ファイル名を入れてね]",
    "version": "0.0.0",
    "license": "MIT",
    "keywords": [],
    "author": "",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "^4.2.4",
        "@angular/common": "^4.2.4",
        "@angular/compiler": "^4.2.4",
        "@angular/core": "^4.2.4",
        "@angular/forms": "^4.2.4",
        "@angular/http": "^4.2.4",
        "@angular/platform-browser": "^4.2.4",
        "@angular/platform-browser-dynamic": "^4.2.4",
        "@angular/router": "^4.2.4",
        "angular-in-memory-web-api": "~0.3.0",
        "systemjs": "0.19.40",
        "core-js": "^2.4.1",
        "rxjs": "^5.4.2",
        "zone.js": "^0.8.14"
    },
    "devDependencies": {
        "@angular/cli": "1.3.2",
        "@angular/compiler-cli": "^4.2.4",
        "@angular/language-service": "^4.2.4",
        "@types/jasmine": "~2.5.53",
        "@types/jasminewd2": "~2.0.2",
        "@types/node": "~6.0.60",
        "codelyzer": "~3.1.1",
        "jasmine-core": "~2.6.2",
        "jasmine-spec-reporter": "~4.1.0",
        "karma": "~1.7.0",
        "karma-chrome-launcher": "~2.1.1",
        "karma-cli": "~1.0.1",
        "karma-coverage-istanbul-reporter": "^1.2.1",
        "karma-jasmine": "~1.1.0",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.1.2",
        "ts-node": "~3.2.0",
        "tslint": "~5.3.2",
        "typescript": "~2.3.3",
        "canonical-path": "0.0.2",
        "lodash": "^4.16.4",
        "rimraf": "^2.5.4"
    }
}

[ファイル名を入れてね]に自分のファイル名を入れてください(管理しやすいので)

【使い方】 “あいのこ.json"をAngular-cliで生成したフォルダ直下にあるpackage.jsonに上書き保存。

なんだかんだ言って重宝してるので記事にしました。

これからもっと頑張って勉強します。

<img src="url"/> をダウンロードする手法について

概要

imgタグのsrcにある第三者のURLをダウンロードをしたくてしたくて仕方がないから頑張って探した備忘録

結論

HTML,javascript,jquery,では実装できなかった。

理由

クロスドメイン制約があるから。

経路

クロスサイトドメインとは

簡単に言えば第三者のURLを参照してダウンロードとかはできないって話。

基本的にクロスドメインを考えなくていいのはローカルにデータがあるときだけ。 第三者のサーバー(URL経由して見れるもの)はローカルにないんですよ。(当然)

次にダウンロードできるようにするために、src=“画像のpath"じゃなくてsrc="実体"にしなきゃいけない。

Blobにできればajax使えばファイルできるしダウンロードもできる。 canvasとかで作成したイメージってtoDataURL()つかってBlobに変換できるからFile型になってダウンロードできるんですよ。

だがしかしbad

Base64でイメージを保持してないのでできるはずがないんです。 時々ある、src=“data:/……"みたいなものならクロスドメインに引っかからず『ブラウザ関係なく』ダウンロードをすることができます。

じゃぁどうするの

ローカルにあればできるってこと。

ローカル環境にimageがあってダウンロードする場合の実装方法

canvasにdrawimage()で描写 ↓ toDataURL()で変換 ↓ ajax使ってファイル化 って流れになります。

Chromeの場合

Chromeクリップボードが非常に優秀なので一応ローカル環境に"imageの実体"が入れられるから自由が利く。 コピーが神ってことですね。 つまりクリップボードを介すことでダウンロードができるってこと。

IE11(この子)の場合

はい。これです。僕が実装したかったのはこっちなんです。

この子はクリップボードにimageの実体を入れることができず、クリップボードに保存されます。 要はタグがクリップボードに入るってことですね。

だから、自分のページで他のサーバーのimageを『表示』することはできます。 しかし、これを自分のサイトで実体化(Base64変換)を行おうとすると【クロスドメイン制約】がかかるわけですね。

なぜこの子はダメなのか

canvasにdrawimage()でURLを渡す(ここがダメ)canvasが汚染されるんです。 汚染(クロスドメイン)が発生すると、toDataURL()が発行できなくなり積み。

終わりに

ソースはテストソースがごっちゃごっちゃしてるので整理したら上げます。 取り急ぎ文章で書きました。

PUBG考察 Part.2

はじめに

気が付いたらプレイ時間が、250時間になり、毎日ドン勝食えてるので(自慢)、 最近の環境とか学びを記事にする。

Part1での内容

は、もう古すぎ!!!

まず、Part1からの環境の変化についてまとめる。

  • 車が固定沸きしない
  • 武器が増えた
  • AKMが神武器と化した
  • SCHR-HとM416は神武器
  • ゲームがもっさりしなくなった
  • DoubleBarrel/ベクター 弱体化

こんなもんかな?

大分変ったと思う。

基本事項

今も昔も変わらない大切なこと

  • スコープ
  • 消費アイテム

中でも車は、降下中に見つけられるから、降下中に意識して探そう。 固定沸きがなくなった今、非常に貴重。

立ち回り(最初)

人それぞれだけど、僕はまず安全なところに降りたい。

<理由1> 武器が拾えない確率が高くなったら。(体感)

<理由2> 無益な殺生だから。(トップ10に入るなら)

最初、戦うメリットがなさすぎるんだよね。

それならスローライフを過ごしたい訳。

<考え方1> 大都市に無理して降りる必要はない。

<考え方2> 小さめの都市に1チーム降りたなら、Amazon Prime感覚で近くの家に降りて適当な物資で戦う(総取りですね?)

<考え方3> 家を転々とする。歩くことを厭わない(ショートカットキー “="があるでしょ??)

お気に入り降下ポイントはあるけど、名前のある都市でも降りても、 次につながる動きを見つけるだけで、生存率グッと上がるから研究してほしい。 (気が向いたら具体的なポイントを。。。/探し出す楽しみを味わってほしいわけで(笑))

立ち回り(中盤)

範囲が海だとか川の向こうになったとき。

<秘訣1> 泳ぐことを厭わない

<秘訣2> 早めに移動

<秘訣3> 息継ぎの時は止まる

橋は使わない主義です。

「最近のマイブームはSRの音がするほうに走って裏から回ってKillすること」 “中盤"ならこの動きができます。(SRほしいしね?)

立ち回り(後半)

<有利な位置取り>と<最悪のパターン>を考えながら<マップ・敵の位置>把握

それを考えると、自然と走り続ける羽目になるんですよ。

だけど、結局正面に敵がいるわけでそれをKillし続けることができれば絶対勝てる。

ここは立ち回りとかじゃない。

けど、最後は走り続けて、1:1にならない限り、自分が倒すか第三者が倒してくれるんで、その辺はうまいこと状況読みましょ。 基本的に『1方向 or 2方向』だけ見ればいいように立ち回ろう。 (ぐるぐる見渡すのは負けるとき)

攻めるタイミングとかも大事。

<敵がスモーク撒いたら詰めるチャンス>とかね?

そんな時に"FB"とか入れると『確定 kill』

では、よいPUBGライフを!!

PUBG考察 Part.1

 

 

 

はじめに

取り合えずプレイ時間を50時間超えたんで考察記事書いて頭を整理したいと思う。

プレイヤースペック

ただのFPS厨、スポーツFPS系は苦手。AIMはあるほうだと思ってる。f:id:satansatohgg:20170510105910p:plain

初ソロドン勝スクショ

武器はSCAR-Lにサイレンサーフルアタッチメント

序盤

パラシュートで降りるまで

1. 飛行機内のプレイヤー数

降りるタイミングの選定に利用。また、どの辺でどの位の人が下りたのかを把握する。 ゲーム終盤に向けての移動を考える時に目安になる。

2. 降りる場所の選定

アイテム充実率 < 生存率

名前のある土地は避ける。極力、家が多いところを意識。

何回か同じところをPickして「いつも降りる場所(HOME)」を作ることで安定感や土地勘を培う動きは学びとなって良い。 しかし、アイテム枯渇問題が出るので、第一波の間にどれだけアイテム探索できるかが勝負。

アイテム充実率 > 生存率

大きな建物(マンションや学校、遺跡、射撃場等)か郊外の小さな名のある町を狙う。しかし、戸建てはアイテム探索に向いてない。

戸建て(特に平屋)は、家から家の移動時間もかかる。その割にいいアイテムがない。 敵との遭遇時、足音が屋内だと不利の為、出れなくなることが多い。

3. 地形の確認

降下しながら降りる場所の地形を見ておくことで、範囲縮小に合わせて動きやすくなる。特に、山や木の多さ、途中にある家などを見ておくと背にして走るときに撃たれにくくてよい。

4. 周囲の人数把握

どの辺に何人降りたかを見ておくことで、着地地点のアイテム収集後の次の移動場所を考えるときに参考になる。

5. 車の視認

最も大事。車があることで範囲外のアイテム回収や時間を意識せず回収を行える。

初手車に乗って、飛行機のパラシュート降下範囲外に出ることで、安心してアイテムを回収できるうえ、そのあとの位置取りも容易に行えるため、優位になる。

初手車のムーブで可能になる事

  • 飛行機のコース外に出れるため、パラシュート降下範囲外の大きな建物に入ってアイテム回収が可能になる。
  • 範囲外で回収してても、範囲に入るまでの復帰の速さ。
  • 車を保有している安心感

中盤

マップを意識しての動きになる。

陽キャ

ど真ん中の家の高さのある建物に常に近づく意識する。

陰キャ

動き方の考えた方

  1. 最初の飛行機の降下範囲を考える(人と会いたくない為、常にいない位置取りをする)
  2. 人がいない上で一番低い土地か一番高い土地に行けるルーティングを行う
  3. 土地の起伏を考える(常にこっちから見えて、こっちが見えない立ち回りをするため)
  4. 隠れられる場所を考える(木や茂み、建物)

終盤

ほぼ運。

地形や遮蔽物がなくなるなど、動けない立ち回りをしないよう心掛ける。

これはもう仕方ない...AIMでゴリ押せ!!!

(自分の語彙が増えたらまた詳細に書きます)

アイテム回収について(序盤~終盤まで)

これはいつも僕がバックパックを見ているときに考えていることを記述。

消費アイテムの重要度
回復>弾薬>グレ
アタッチメントの重要度
アサルト>SMG>ハンド>SR(SRを持ってればSMGの前)
お勧めアンダーバレルの違い
SCAR-L = バーティカル (単発うち)
M416 = アングルフォア  (単発うち)
  • 弾薬は100以上はいらない
  • 回復重視
  • アタッチメントは、武器はフルカスタムが最強なので可能なら拾う
  • ハンドガンは捨ててもいい(サイレンサー取得時は変動,2マガジン分ぐらい弾保有(?))
  • 銃は弾薬を固めて持ったほうがいい(敵からはぎ取る際、意識しなくていい)
  • ぐれは全種基本2コ(スモークは3コ以上あってもよい)
  • 車を持っている or Lv2以上のバックパック → ガソリンをキープ

とりあえずこんな感じで。

次はゲーム内での土地による立ち回りについてまとめます。(終盤は主に立ち回りで考慮)

では、いいPUBGライフを!