2019年 1月 の投稿一覧

はじめてのReact #16「Componentの連携」子要素にアクセスする

これまでは、最終的にrender()する際には<Foo />のようにタグで何らかの文字列や要素を囲わない状態でした。今回はそこから一歩進んで<Foo>Hello!</Foo>のように何らかの要素を挟んでみたいと思います。

ダイアログ Component

おもしろサンプルが思いつかなかったので、公式ドキュメントほぼそのまま、ダイアログの作成を行います。

サンプル

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Dialog</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

  <!-- Don't use this in production: -->
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>

<div id="root"></div>

<script type="text/babel">
class Dialog extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div style={{backgroundColor:'lightpink', width:'500px', border:'5px solid red'}}>
        {this.props.children}
      </div>
    );
  }
}

ReactDOM.render(
  <Dialog>
    <h1>Hello! World</h1>
    nice to meet you!
  </Dialog>,
  document.getElementById('root')
);
</script>
</body>
</html>

続きを読む

はじめてのReact #15「Componentの連携」複数同時に処理をする

いよいよReactの真骨頂っぽいところに足を突っ込んでみます。前回はComponentの中にComponentが1つだけ内包されていましたが、これを複数にしてみたいと思います。

西暦・和暦 相互変換Component

今年の5月には新しい年号が爆誕するのにちなんで、西暦と和暦を相互に変換するComponentを作成してみたいと思います。今回も公式ドキュメントのサンプルを改変した物になります。

実行すると昭和、平成、西暦の3つのテキストボックスが表示されます。いずれか1つに入力すると残りの2つが連動して変化します。コードがちょっと長いのですが、理解のしやすさを優先しただけで実際にやってることは大したことありません。

サンプル

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>HeiseiConvert</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

  <!-- Don't use this in production: -->
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>

<div id="root"></div>

<script type="text/babel">
class YearInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.props.onYearChange(e.target.value);
  }

  render() {
    const year = this.props.year;
    const type = this.props.type;

    return (
      <fieldset>
        <legend>{type}:</legend>
        <input value={year}
               placeholder={this.props.placeholder}
               onChange={this.handleChange} /> 
               年
      </fieldset>
    );
  }
}

class HeiseiConvert extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
          ad: "",
       showa: "",
      heisei: ""
    };

    this.handleAdChange     = this.handleAdChange.bind(this);
    this.handleShowaChange  = this.handleShowaChange.bind(this);
    this.handleHeiseiChange = this.handleHeiseiChange.bind(this);
  }

  handleAdChange(year) {
    this.setState({
          ad: year,
       showa: this.toConvert(year, -1925),
      heisei: this.toConvert(year, -1989)
    });
  }

  handleShowaChange(year) {
    this.setState({
          ad: this.toConvert(year, 1925),
       showa: year,
      heisei: this.toConvert(year, -63)
    });
  }

  handleHeiseiChange(year) {
    this.setState({
          ad: this.toConvert(year, 1988),
       showa: this.toConvert(year, 63),
      heisei: year
    });
  }

  toConvert(year, value){
    if( Number.isNaN(parseFloat(year)) ){
      return('');
    }
    return( Number(year) + value);
  }

  render() {
    return (
      <div>
        <YearInput
          type="昭和"
          placeholder="例: 64"
          year={this.state.showa}
          onYearChange={this.handleShowaChange} />
        <YearInput
          type="平成"
          placeholder="例: 30"
          year={this.state.heisei}
          onYearChange={this.handleHeiseiChange} />
        <YearInput
          type="西暦"
          placeholder="例: 2019"
          year={this.state.ad}
          onYearChange={this.handleAdChange} />
      </div>
    );
  }
}

ReactDOM.render(
  <HeiseiConvert />,
  document.getElementById('root')
);
</script>
</body>
</html>

続きを読む

はじめてのReact #14「Componentの連携」入力された値を動的に渡す

今回はユーザーが入力した値を別のComponentにリアルタイムに渡すサンプルを作ってみたいと思います。

カラーチェッカーComponent

テキストボックスに色の名前を入力すると、ほぼリアルタイムに■の色が変化するComponentになります。Reactの公式ドキュメントの水の温度によって表示を変化させるサンプルを改変した物です。

サンプル

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>ColorChecker</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

  <!-- Don't use this in production: -->
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>

<div id="root"></div>

<script type="text/babel">
function ShowColor(props) {
  return(
    <p style={{color:props.color, fontSize:'20px'}}>■</p>
  );
}

class ColorChecker extends React.Component {
  constructor(props) {
    super(props);
    this.state = {color: ''};

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.setState({color: e.target.value});
  }

  render() {
    const color = this.state.color;
    return (
      <fieldset>
        <legend>色名を入力してください:</legend>
        <input
          value={color}
          onChange={this.handleChange}
          placeholder="例:Red" />

        <ShowColor color={color} />
      </fieldset>
    );
  }
}

ReactDOM.render(
  <ColorChecker />,
  document.getElementById('root')
);
</script>
</body>
</html>

続きを読む

はじめてのReact #13「フォームと連動する」ラジオボタン編

Reactでフォームを使ってみようシリーズも佳境に差し迫った第4弾。今回はラジオボタンを触ってみます。

時限爆弾の解体ラジオボタンComponent

もはら映画で定番となった、時限爆弾の解体シーンで「青と赤どちらのコードを切るか…」を再現するComponentを作ってみたいと思います。3色のラジオボタンが並んでおりハズレを選択(コードを切断)すると爆発します。

サンプル

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>BomButton</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

  <!-- Don't use this in production: -->
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>

<h1>BomButton</h1>
<p>線を一つ選んで爆弾を解除してください</p>
<img src="./bom1.png">
<div id="root"></div>

<script type="text/babel">
class BomButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      radio: [
        {cd:'red',   name:"赤", checked:false},
        {cd:'blue',  name:"青", checked:false},
        {cd:'green', name:"緑", checked:false}
      ],
      lastclick: null  //最後に選択された色を入れる
    };

    // State内の色の中から抽選を行う
    let i = Math.floor(Math.random() * 100) % this.state.radio.length;
    this.hit = this.state.radio[i].cd;

    // 爆発時の素材を事前ロードしておく
    this._preload();

    // イベント用メソッド
    this.handleRadioClick = this.handleRadioClick.bind(this);
  }

  /**
   * 爆発時の素材を事前ロード
   */
  _preload(){
    this.se = new Audio('./bomb1.mp3');
    this.se.load();

    let img = new Image();
    img.src = "./bakuhatsu.png";
  }

  /**
   * ラジオボタンをクリック
   */
  handleRadioClick(e) {
    if( ! confirm('本当にこの線で良いですか?') ){
      return(false);
    }

    let name  = e.target.name;
    let value = this.state.radio.map( (item)=>{
      return({
        cd: item.cd,
        name: item.name,
        checked: (item.cd===name)? true:false
      })
    });

    this.setState({
        radio: value
      , lastclick: name
    });
  }

  render() {
    //----------------
    // 当選したら爆発
    //----------------
    if( this.hit === this.state.lastclick ){
      this.se.play();
      return <div><img src="./bakuhatsu.png" /></div>
    }
    //----------------
    // 選択肢の表示
    //----------------
    else{
      const radio = this.state.radio;
      const listItems = radio.map((r) =>
        <label key={r.cd.toString()} style={{color: r.cd}}>
          <input
            type="radio"
            name={r.cd}
            value={r.cd}
            checked={r.checked}
            onChange={this.handleRadioClick} />
          {r.name}<br />
        </label>
      );
      return <form>{listItems}</form>
    }
  }
}

ReactDOM.render(
  <BomButton />,
  document.getElementById('root')
);
</script>
</body>
</html>

続きを読む

[VisualStudio Code] 言語によってインデント幅を変更する

昔からの習性でコーディングする際のインデントはタブ派なんですよ、スペースの数は4つ。
ところが…

  • GitHubでソース見るとタブがスペース8つ分になる
    • ブラウザのデフォルト動作
    • URLの最後に?ts=4とかつけると変更はできるが…
  • JavaScript界隈だとスペース2個が主流っぽい

という空気を感じてまして、長いものには巻かれろ精神で、ひとまずJSだけインデントをスペース2個に変更することにしました。

続きを読む

フリーランスが経費にする際の勘定科目メモ – 2019年

2018年分の確定申告終了まで残り68日となりました(執筆時点)
みなさん順調に入力進んでますか?こちらは地獄ですw

今回は自分でも時々わからなくなる勘定科目についてメモ代わりにまとめました。
定期的に思いついたら更新したいと思います。

前提のお話

私は大きく2つの事業を行っております。

  • ゲーム関係の企画、コンサル、技術的なサポートと一部開発及び運用
  • 専門学校の非常勤講師

あくまでこちらの範囲で登場するの勘定科目のうち、私が利用している物に限定されます。

免責事項

  • ここでいうフリーランスとは「個人事業主」のことを指しています。
    • 会社会計の場合はまた異なりますのでご注意を。
  • ここにある物が100%の正解というわけでありません。あくまで個人的な知識と見解でメモしておりますので最終的にはご自身の考え方で仕訳をなさってください。ご不明な点は税理士の先生や税務署にご相談ください。
  • 「経費」とタイトルに書いてありますが売上など収益についての勘定科目も登場します。
  • 一定額を超える物を購入した場合は資産として計上する必要があるのでご注意ください。

それでは張り切ってどうぞ。
続きを読む

[WordPress] エディタを等幅フォントで使いたい

WordPressの記事はMarkdownに対応するプラグインを入れて書いてるんですが、エディタが等幅フォントになってないことでテーブルを書く際にずれまくって終始イライラすることが増えたので対策しました。

今回はWordPress側には一切手を入れないため、突如WordPressが動かくなったり、アップデート時に設定が消えてなくなることもありません。
続きを読む

AWS Organizationsでアカウント管理してみる

過去、AWSを大きな組織や複数のプロジェクトで利用する場合、AWSのアカウント自体を複数用意して利用していたわけですが、2017年2月に登場した「AWS Organizations」を利用すると、請求先の一元化や、ユーザーの権限管理が一括して行えます。

考え方

これまで

それぞれのアカウントが独立して存在しており、請求情報やユーザー管理もそれぞれ行う必要がありました。

AWS Organizations導入後

図はイメージですが、AWSアカウント内に「組織」を作成することで、独立した世界を用意することができます。

請求情報は「親」で一元管理できます。
また必要があれば各ユーザーに対し制限をまとめてかけることもできます。

「子ユーザー」はルートユーザーと同じ権限が与えられますので、組織内のユーザーから見ても、使い勝手はこれまでと変わりません。また各組織が影響を与えることもありませんので万が一の場合の影響範囲を心配する必要がないのもこれまでと変わらないポイントです。

続きを読む

AWSアカウントの2段階認証を設定する

もうどこからアカウント情報が漏れるかわかりませんからね。昨年GitHubの2段階認証の設定をしたように、今回はAWSのアカウントにも施したいと思います。特にルートアカウント。

認証方法

詳しくはAWSの「多要素認証」のページに書かれていますが、実質的にスマホアプリか専用のデバイスを用いることになります。

仮想 MFA アプリケーション

要はスマホのアプリで認証するタイプ。
Google認証とAuthy2、WindowsPhone用の「認証システム」に対応しているようです。

OSアプリ
AndroidGoogle認証 / Authy2
iOSGoogle認証 / Authy2
WindowsPhone認証システム

U2F セキュリティキー

物理的な認証デバイスとの連携にも対応しているようです。
USBポートに差し込んで指紋を読み取らせるだけで、ワンタイムパスワード的な物が発行されログインできる便利なやつですね。興味のある方はAmazonからも購入できるのでどうぞ。

[正規販売代理店品]YubiKey 4
Yubico
売り上げランキング: 35,432

SMS MFA

新規受付はすでに終了したそうです。また既存ユーザーも2019年1月31日で提供終了とのこと。がーん。本命だったのに(´・ω・`)

続きを読む

はじめてのReact #12「フォームと連動する」チェックボックス編

Reactでフォームを使ってみようシリーズも第3弾。今回のテーマはチェックボックスです。

都道府県チェックボックスComponent

よく見かける都道府県一覧のチェックボックスです。例えば「中国地方」をチェックすると、島根や鳥取など中国地方全体にチェックが入る機能もついてます。

サンプル

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>AreaCheck</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

  <!-- Don't use this in production: -->
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>

<div id="root"></div>

<script type="text/babel">
  class AreaCheck extends React.Component {
    constructor(props) {
      super(props);
      this.cd = this.props.cd;
      this.state = {
        area: this.props.area
      };

      this.handleKenChange = this.handleKenChange.bind(this);  //各都道府県のチェック
      this.handleAllChange = this.handleAllChange.bind(this);  //まとめてチェック
    }

    /**
     * 各都道府県をチェック
     */
    handleKenChange(e) {
      let name  = e.target.name;
      let value = this.state.area.map( (ken)=>{
        return({
          cd: ken.cd,
          name: ken.name,
          checked: (ken.cd===name)? e.target.checked:ken.checked
        })
      });

      this.setState({area: value});
    }

    /**
     * まとめてチェック
     */
    handleAllChange(e){
      let value = this.state.area.map( (ken)=>{
        return({
          cd: ken.cd,
          name: ken.name,
          checked: e.target.checked
        })
      });

      this.setState({area: value});
    }

    render() {
      let area = this.state.area;
      let listItems = area.map((ken) =>
        <label key={ken.cd.toString()}>
          <input
            type="checkbox"
            name={ken.cd}
            value={ken.cd}
            checked={ken.checked}
            onChange={this.handleKenChange} />
            {ken.name}
        </label>
      );

      return (
        <form>
          <label key={this.cd}>
            <input type="checkbox" name="ALL" onChange={this.handleAllChange} />
            このエリアをチェック
          </label>
          <br />
          {listItems}
        </form>
      );
    }
  }

  const Chugoku = [
    {cd:'31', name:'鳥取県', checked:false},
    {cd:'32', name:'島根県', checked:false},
    {cd:'33', name:'岡山県', checked:false},
    {cd:'34', name:'広島県', checked:false},
    {cd:'35', name:'山口県', checked:false}
  ];
  const Shikoku =[
    {cd:'36', name:'徳島県', checked:false},
    {cd:'37', name:'香川県', checked:false},
    {cd:'38', name:'愛媛県', checked:false},
    {cd:'39', name:'高知県', checked:false}
  ];
  ReactDOM.render(
    <div>
      <AreaCheck cd="CG" area={Chugoku} />
      <AreaCheck cd="SK" area={Shikoku} />
    </div>,
    document.getElementById('root')
  );
</script>
</body>
</html>

続きを読む