2017-04-10

TypeScriptでReactを書くときはStateのパラメータに?を付ける

React TypeScript

TypeScriptでReactを書いているとき、Stateに複数パラメータを用意した時に ? を付けてオプションパラメータにします。
そうしないと、setState の更新時に全てのパラメータを更新しないといけなくなります。

なので、必ず付けろというよりは、パラメータを一つだけ更新したいときにはこうしたほうが良いという話でした。

もうちょっと詳しく

こんな感じで年齢と身長を表示するコンポーネントがあったとします。

import * as React from 'react';

interface IPersonProps {
}
interface IPersonState {
  age: number;
  height: number;
}

/**
 * Person
 */
export class Person extends React.Component<IPersonProps, IPersonState> {
  constructor(props: IPersonProps) {
    super(props);

    this.state = {
      age: 0,
      height: 0
    }
  }

  render() {
    return (
      <div className="person">
        <div>年齢 : { this.state.age }</div>
        <div>身長 : { this.state.height }</div>
      </div>
    );
  }
}

ここで、身長のみを更新するイベントを追加しようとしたとき下記のように書きたくなります。

  handleOnChangeHeight = (height: number) => {
    this.setState({
      height: height
    });
  }

ですが、この場合はコンパイル時エラーになります。
理由は↓です。

interface IPersonState {
  age: number;
  height: number;
}

パラメータがオプションになっていないため両方更新しないといけなくなります。
なので、 ? を付けてオプションパラメータにしてあげます。

interface IPersonState {
  age?: number;
  height?: number;
}

そうすることで、 setState 時に更新したいパラメータだけを更新することができます。

2017-04-07

sendgrid-phpで添付画像を付けてメール送信する方法

PHP

phpでメール送信する方法の一つとしてSendGridがあります。

github.com

添付ファイルを付けてメール送信する方法についてのメモです。
※ 前提として、composerを使用して、sendgrid-phpをインストールしているものとします

テキストのみのメール

<?php
require_once "vendor/autoload.php";

$from = new SendGrid\Email("name", "email@example.com");
$subject = "件名";
$personalization = new SendGrid\Personalization();
$personalization->addTo(new SendGrid\Email(null, "send@example.com"));
$personalization->setSubject($subject);
$content = new SendGrid\Content("text/plain", "本文");

$mail = new SendGrid\Mail();
$mail->setFrom($from);
$mail->addPersonalization($personalization);
$mail->setSubject($subject);
$mail->addContent($content);

$sg = new \SendGrid("sendgridApiKey");
$response = $sg->client
    ->mail()
    ->send()
    ->post($mail);

テキスト+添付画像のメール

<?php
require_once "vendor/autoload.php";

$from = new SendGrid\Email("name", "email@example.com");
$subject = "件名";
$personalization = new SendGrid\Personalization();
$personalization->addTo(new SendGrid\Email(null, "send@example.com"));
$personalization->setSubject($subject);
$content = new SendGrid\Content("text/plain", "本文");

$mail = new SendGrid\Mail();
$mail->setFrom($from);
$mail->addPersonalization($personalization);
$mail->setSubject($subject);
$mail->addContent($content);

// 添付ファイル
$filePath = "path/to/file";
$attachment = new SendGrid\Attachment();
$handle = fopen($filePath, "rb");
$contents = fread($handle, filesize($filePath));
$attachment->setContent(base64_encode($contents));
$attachment->setFilename("filename.png");
$fileInfo = new FInfo(FILEINFO_MIME_TYPE);
$attachment->setType($fileInfo->file($filePath));
$mail->addAttachment($attachment);

$sg = new \SendGrid("sendgridApiKey");
$response = $sg->client
    ->mail()
    ->send()
    ->post($mail);

テキストメール送信の処理に対して追加したのは下記コードです。
処理としては、ファイルをバイナリで開いてBase64変換することだけです。
調べると、ファイルパスとファイル名を渡すと送信できるような記述が多くてハマりました。

// 添付ファイル
$filePath = "path/to/file";
$attachment = new SendGrid\Attachment();
$handle = fopen($filePath, "rb");
$contents = fread($handle, filesize($filePath));
$attachment->setContent(base64_encode($contents));
$attachment->setFilename("filename.png");
$fileInfo = new FInfo(FILEINFO_MIME_TYPE);
$attachment->setType($fileInfo->file($filePath));
$mail->addAttachment($attachment);

その他

テキストメールの改行が無視される

テキストメールを送信したときに、改行が無視されてしまうことがありました。
SendGridのダッシュボードから、テキストメールはそのまま送信するように設定すれば解決しました。

メール送信時のステータスコード確認

上記のソースコードで送信後に下記を実行することでステータスコードを取得できます。

$response->statusCode()

200や202などがメール送信成功時に返ってくるステータスコードの様です。

参照

qiita.com

sendgrid.com

2017-03-13

AWS CloudWatch Logs で選択可能なOSについて

Docker AWS

以前は debian にインストールできなかった、 AWS cloudlogs のインストール可能なOSが増えていました。
regionの選択肢も増えて、アジアパシフィック (東京) ap-northeast-1 も選択できるようになっていました。

もともとは下記方法でawslogsを使おうとしてました。
いつもは、debianを使うのでubuntuにするしかないかなと思ってました。

dev.classmethod.jp

setupスクリプト

https://s3.amazonaws.com/aws-cloudwatch/downloads/awslogs-agent-setup-v1.0.py

インストール可能OS

Rhel
Ubuntu
AmazonLinux

https://hub.docker.com/r/takipone/docker-awslogs/~/dockerfile/

dockerfileでは

ADD awslogs.conf.dummy ./awslogs.conf

と書いてあって、dummyって何だろうと思ったけど、githubのRepositoryを見たら、ファイルがありました。

そして、こちらに記載されているものがインストール可能OSと出力先のリージョンが増えたものです。

docs.aws.amazon.com

setupスクリプト

https://s3.amazonaws.com/aws-cloudwatch/downloads/latest/awslogs-agent-setup.py

インストール可能OS

Rhel
Ubuntu
AmazonLinux
CentOS
Raspbian
Debian

せっかくなので、githubにDockerfileをpushして、dockerhubでビルドしてみました。

github.com

https://hub.docker.com/r/naughtldy/debian-awslogs/

2017-03-02

.NET Core でコマンドラインからWebアプリのプロジェクトを作成する

.NET Core

Webアプリのテンプレートからプロジェクトを作成する。

$ dotnet new -t Web

例

$ mkdir hoge
$ cd hoge
$ dotnet new -t Web

$ ls -al

.bowerrc
Controllers
Program.cs
Startup.cs
Views
appsettings.json
bower.json
bundleconfig.json
hoge.csproj
web.config
wwwroot

ディレクトリ名が .csproj 部分の名前になるようです。

余談

$ mkdir ほげ
$ cd ほげ
$ dotnet new -t Web

したところ、 ほげ.csproj が作成されました。

2017-03-01

.NET Core の開発環境 - その２

VisualStudio .NET Core

以前に Macで使える .NET Core 用IDEをいくつか調べてました。

naughtldy.hatenablog.jp

そのときは、 VisualStudio と Rider EAP があるんだな程度の調べ方で済ませていたのですが、両方でプロジェクトを作成して違いがわかりました。

VisualStudio for Mac PREVIEW

.NET Core のプロジェクトを作成すると、パッケージ管理は csproj になっている。

※ 記事作成時点では preview 3 で動作します。

Rider EAP

.NET Core のプロジェクトを作成すると、パッケージ管理は package.json になっている。
preview2 しかサポートされていない。
つまり、 project.json による管理方法しかできない。

※ 記事作成時点では preview 2 で動作します。
※ 最新は .csproj で管理するようになっているので微妙。

package.json と .csproj

.NET Core では、 preview3 で package.json から .csproj に変わりました。今後の事を考えると、VisualStudioの方でプロジェクトを作っていた方がよさそうかなと思いました。

その他

VisualStudio for Mac でプロジェクトを作成してみましたが、ビルド時にエラーになりました。
.NET Core のバージョンを確認してみます。

$ dotnet --info
.NET Command Line Tools (1.0.0-preview2-1-003177)

Product Information:
 Version:            1.0.0-preview2-1-003177
 Commit SHA-1 hash:  a2df9c2576

Runtime Environment:
 OS Name:     Mac OS X
 OS Version:  10.11
 OS Platform: Darwin
 RID:         osx.10.11-x64

.NET Core のインストールされているSDKを見てみます。
ちなみに、 .NET Core 1.1 は 1.0.0-preview2-1 です。

$ ls -al /usr/local/share/dotnet/sdk
total 0
drwxr-xr-x   4 root  wheel   136  2 21 21:20 .
drwxr-xr-x   8 root  wheel   272  2 21 21:21 ..
drwxr-xr-x  50 root  wheel  1700 10 18 06:04 1.0.0-preview2-003148
drwxr-xr-x  51 root  wheel  1734  2 21 21:21 1.0.0-preview2-1-003177

csprojは preview3 からで、preview4を入れてみたところ、VisualStudio for Mac ではビルドが上手くいかなかったため、githubから preview3 のsdkをダウンロードしてインストールします。

github.com

$ dotnet --info
.NET Command Line Tools (1.0.0-preview3-004056)

Product Information:
 Version:            1.0.0-preview3-004056
 Commit SHA-1 hash:  ccc4968bc3

Runtime Environment:
 OS Name:     Mac OS X
 OS Version:  10.11
 OS Platform: Darwin
 RID:         osx.10.11-x64

インストールして、preview3 に切り替わりました。
VisualStudio for Mac でリストア/ビルドができるようになりました。

.NET Core のバージョンを下げる

使用したいバージョンより上のバージョンが入っていた場合はSDKを削除する

$ sudo rm -rf /usr/local/share/dotnet/sdk/1.0.0-rc4-004771

削除後 dotnet --info を実行すると /usr/local/share/dotnet/sdk にある最も新しいバージョンが選択されます。

参考資料

qiita.com

www.kekyo.net

.NET Coreのバージョンを戻したい！(Mac) - ryuichi111stdの技術日記

2017-02-25

Webpack2ではextensionsに空文字を指定できない

フロントエンド

npm install webpack で Webpack2 がインストールされるようになっていたので、試して見たところエラーが出たのでメモ。

エラー

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.resolve.enforceExtension should be a boolean.

解決策

extensions にemptyな '' を指定してはいけない。

ソースコード

エラー時のソースコード（一部抜粋）

var webpack_config = {
  resolve: {
    extensions: ['', '.webpack.js', '.ts', '.tsx', '.js']
  }
}

修正後ソースコード

var webpack_config = {
  resolve: {
    extensions: ['', '.webpack.js', '.ts', '.tsx', '.js']
  }
}

参考URL

okamuuu.hatenablog.com

2017-02-21

.NET Core でMySQLに接続する

.NET Core

.NET Core にてMySQLに接続したくてその方法を調べてみた。

参考にした記事の手順でできるけど、1点か注意が必要な部分があった。

注意点

portが 3305 になっている

参考

HowTo: Starting with MySQL EF Core provider and Connector/Net 7.0.4 | InsideMySQL.com