2019-04-25

ファイル末尾に自動的に改行文字を挿入する(VSCode)

VSCode

VSCodeを利用していて、ファイルの末尾に自動的に改行コードを加えたくなるときがありました。具体的にはSchema作成用のSQLファイルを作っていると、最後に改行文字が必要なのですが、大体これを入力し忘れる。

自分はメインのエディタがVSCodeなので、VSCodeで末尾に自動的に改行文字を挿入する設定をまとめました。

VSCodeのPreferenceを開く
VSCodeのPreferenceから設定を開く
設定画面でfiles.insertFinalNewlineで検索
files.insertFinalNewline

files.insertFinalNewlineで設定を検索して、こちらの設定をONにしてください。 jsonで設定ファイルを記述する場合は"files.insertFinalNewline": trueです。

以上。

2019-04-25

LaravelでAjaxリクエストかFormリクエストかどうかは誰が判定しているか

PHP Laravel Ajax

LaravelでAPIを書いていて、適当なRestClientを使ってリクエストを送った際に、 Validationエラーで引っかかると、HTTPステータスコード302でリダイレクトされるということがあった。 APIなので、単純にValidationのエラー結果をjsonなりで返してくれればいいのだけどHTTPヘッダーが不足していた。

FormリクエストだとValidationに引っかかった時に、もとのページにリダイレクトして、 Ajax通信の場合はjsonを返すという仕様は公式ドキュメントにも書かれている。

AJAXリクエストとバリデーションこの例ではアプリケーションにデータを送るために伝統的なフォームを使いました。しかし、多くのアプリケーションでAJAXリクエストが使用されています。AJAXリクエストにvalidateメソッドを使う場合、Laravelはリダイレクトレスポンスを生成しません。代わりにバリデーションエラーを全部含んだJSONレスポンスを生成します。このJSONレスポンスは422 HTTPステータスコードで送られます。

結論から言うと、 X-Requested-WithヘッダーにXMLHttpRequestを渡せば、Ajaxリクエストとして判定してくれてValidationエラーの内容がjsonで返ってくるのだけど、

f:id:yuji_ueda:20190425094349p:plain — X-Requested-With:XMLHttpRequest

少し気になったのでコードを読んでみた。

vendor/laravel/framework/src/Illuminate/Foundation/Exceptions/Handler.php

    /**
     * Create a response object from the given validation exception.
     *
     * @param  \Illuminate\Validation\ValidationException  $e
     * @param  \Illuminate\Http\Request  $request
     * @return \Symfony\Component\HttpFoundation\Response
     */
    protected function convertValidationExceptionToResponse(ValidationException $e, $request)
    {
        if ($e->response) {
            return $e->response;
        }

        return $request->expectsJson()
                    ? $this->invalidJson($request, $e)
                    : $this->invalid($request, $e);
    }

vendor/laravel/framework/src/Illuminate/Http/Concerns/InteractsWithContentTypes.php

    /**
     * Determine if the current request probably expects a JSON response.
     *
     * @return bool
     */
    public function expectsJson()
    {
        return ($this->ajax() && ! $this->pjax() && $this->acceptsAnyContentType()) || $this->wantsJson();
    }

vendor/laravel/framework/src/Illuminate/Http/Request.php

    /**
     * Determine if the request is the result of an AJAX call.
     *
     * @return bool
     */
    public function ajax()
    {
        return $this->isXmlHttpRequest();
    }

vendor/symfony/http-foundation/Request.php

    /**
     * Returns true if the request is a XMLHttpRequest.
     *
     * It works if your JavaScript library sets an X-Requested-With HTTP header.
     * It is known to work with common JavaScript frameworks:
     *
     * @see http://en.wikipedia.org/wiki/List_of_Ajax_frameworks#JavaScript
     *
     * @return bool true if the request is an XMLHttpRequest, false otherwise
     */
    public function isXmlHttpRequest()
    {
        return 'XMLHttpRequest' == $this->headers->get('X-Requested-With');
    }

こんな感じ。

2017-10-29

Angular4 関連

プロジェクト作成

ng new ${プロジェクト名}
ng new ${プロジェクト名} --style=scss

ng-bootstrap導入

# install
npm install --save intl@1.2.5 bootstrap@3.3.7 ng2-bootstrap@1.1.14

# angular-cli.json
"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "style.css"
],

# src/app/shared/index.ts
import '../../../node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js'

# src/styles.css
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

プロジェクト編集

ng set defaults.styleExt scss

モジュールを作成する

ng g module ${モジュール名}

AngularのNgModuleを使って、アプリの構成を管理する - Qiita

コンポーネントを作成する

ng generate component ${コンポーネント名}
ng generate component ${モジュール名}/${コンポーネント名}

カスタムコンポーネントを使う

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
...

  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]

その他新規作成

ターゲット	概要	コマンド
Component	コンポーネント	ng g component my-new-component
Directive	html要素の修飾や振る舞いの調整(ngIfとかも)	ng g directive my-new-directive
Pipe	データ変換(数値出力にカンマをつけるなど)	ng g pipe my-new-pipe
Service	サービス	ng g service my-new-service
Class		ng g class my-new-class
Guard		ng g guard my-new-guard
Interface		ng g interface my-new-interface
Enum		ng g enum my-new-enum
Module	モジュール	ng g module my-module

サービスを追加する

ng g service ${サービス名}

カスタムディレクティブを作成する

ng g directive ${ディレクティブ例}
※ngIfとか

サーバーを起動

ng serve

NgModuleで指定可能なメタデータ

メタデータ	指定可能な種類
imports	モジュール(他のNgModuleで定義されたモジュール)
exports	コンポーネント ※import元で利用する時
declarations	コンポーネント、パイプ、ディレクティブ
providers	サービス(DI元のクラス)
entryComponents
bootstrap	エントリーポイント(最初に呼び出すコンポーネント)
schemas

スタイルを適応する方法

適応方法	指定方法
定番	style="background-color:#ffffff;"
カプセルCSS	class="test"
プロパティバインド	[style.backgroundColor]="'#ffffff'"
ngStyle	[ngStyle]="{'background-color':'#ffffff'}"
ngClass	[ngClass]="{test:true}"
カスタムディレクティブ	styles: [`.test{background-color:#ffffff;}`]

ルーター

コンポーネント記述

<router-outlet></router-outlet>

ルーターの指定方法

RouterModule.forRoot([
  { path: "test/:id", component: TestComponent }
])

https://ng2-info.github.io/2016/03/component-router-by-gerardsans/

リンク・クリック時の処理の書き方

onClickButton(){
  this.router.navigate(["/test", this.value1]);
}

this.router.navigate(["/comp1", {"id": this.value1, "msg": this.value2}]);

<a [routerLink]="['/test', 12]" routerLinkActive="active">...</a>

<a [routerLink]="['/test', {'id': 123, 'msg': 'aaaa'}]"
  routerLinkActive="active">...</a>

<a routerLink="/test/1234" routerLinkActive="active">...</a>

コンポーネント側で値を受け取る

constructor(private route: ActivatedRoute) {
  this.route.params.forEach((params: Params) => {
    this.id = params["id"];
  });
}

App Cache

src/assets/testApp.appcache

CACHE MANIFEST
#ver 1.0.0
CACHE
./favicon.ico
../inline.js
../style.bundle.js
../main.bundle.js

src/index.html

<html manifest="./assets/testApp.appcache">

キャッシュ状況を表示

chrome://appcache-internals/

Reference

https://albatrosary.gitbooks.io/start-angular/content/changelog.html

はい！今やってます！

Work Pertly, Live Idly