日々ブログ

日々のくらしの中で思ったこと

【ドラクエウォーク】セラフィのつえの性能と評価

ブログは検索エンジンに登録されるまで1週間とかかかるので、 そもそもこうした武器評価の記事は向いてないんですけどね~。
まあこの武器はいずれ復活するし書いといて損はないやろ~くらいのモチベーションで書いてます。
個人的には、1本あれば十分な武器かな~という印象です。

回復性能はピカイチ

回復性能はすさまじいですね。
前高い回復武器のなかでも上位の回復性能で、300くらいの回復は簡単に出せます。
いきなりスキルも合わせてプラスでひとり350くらい回復するので、単純な回復性能で見ればクリフトの聖杖よりも上かな~と思います。
回復魔力の上限については、クリフトの方が1600と高いので、長く活躍する武器という意味ではクリフトに軍配が上がるわけですが、回復魔力が1600になるのなんて相当あとなのであまり気にしなくていいかな~と。
その頃にはきっと別の回復武器が出ているでしょうし。


www.youtube.com

セラフィエールの補助性能は微妙

正直セラフィエールの補助性能は微妙です。
何が上がるのか完全にランダムなので、安定させづらいので最悪行動が無駄に終わりますし、 大神官の鼓舞激励と完全被ってる。
味方全体のいずれかを上げるくらいの個性が無いと正直使いづらいですね。
個人的には、スクルトのとくぎばんとかにしてくれたら最強やったのにとか思ってます。

バイキルトは頼もしい

物理火力限定ですが、火力が2段階あがるのは強力でいいです。
大神官のおすそわけで全体が上がると、メガモンスター戦とかでは非常に有利に進めました。

いきなりまもりのたてと合わせて使いやすい

いきなりスキルでまもりのたてが発動するので、 メガモンスターで活躍しやすいです。
1ターン節約できるので、この間にバイキルトでアタッカーの攻撃力を上げられるので使いやすいです。

【ドラクエウォーク】獄炎の大剣の性能と評価

ドラクエウォークに最近またハマっているので少しずつ記事を書いておこうかなと。
13章のレベル上げ装備に困っているなら狙ってそうでないなら特に狙う必要ないんじゃないかなと思います。

獄炎の大剣の性能

獄炎の大剣の性能です。
攻撃力は最大230なので、今年初めに登場したはぐれメタルの剣と比べて10も上がってますね。
着実にインフレしている感じです。

両手持ちで攻撃力の底上げが可能

獄炎の大剣からですが、両手持ちが可能になりました。
新職業の魔剣士限定ですが、攻撃力を底上げできます。
攻撃力が1.5倍になるので結構頼りになります。
まあその分防御力が犠牲になるわけですが、ダメージ受けるまえに倒せば問題ないです。

悪魔特攻なので攻撃13章の周回武器として便利

いきなりスキルとして、敵に悪魔系が含まれていれば味方全体が先制できます。
13章ははぐれメタルの剣があまり刺さらないので、獄炎の大剣がめちゃくちゃ活躍します。
というより、獄炎の大剣が無いと安定しなかったので獄炎の大剣が引けて幸せです。
13章は、これまでと違ってフィールどの敵が強いですからね。
WALKモードで戦闘していて勝手に全滅していることもあったのめちゃくちゃ助かってます。
前述の両手持ちのおかげで、火力も底上げできますからね~。
フィールドのレベル上げにおいて剣は正直微妙だったので火力で特徴を出せるのはありがたい。
今まではどうしても回避不可能な魔法やブレスに勝てませんでしたからね~。

メガモンスターには微妙

全体攻撃武器なので、メガモンスターにはあまり活躍しないかな~。
単体ドルマ攻撃が一応ついているんですが、倍率は410%なので他の武器の方が強いです。
水準的には、2年前くらいに出たダイの大冒険コラボのドルマ剣と同程度なので、 無くてもとくにメガモンスターには困らないかと。
両手持ちによる火力の底上げも、盾の防御力を犠牲にしてますからね~。
また、盾スキルのまもりのたてが必要になることが多いのでメガモンスターには相性が悪いかなと。

ギラ属性の覚醒千里行で活躍

よろいの騎士の覚醒千里行が追加されました。
有効属性はギラかつ悪魔系も高頻度で出てくるのでぴったりです。
新武器は優遇されて然るべきですからね~。
覚醒千里をどうしても攻略したい人は狙ってみてもいいかもしれません。

【プログラミング】ラズパイを持て余していたので、工作キットで遊んでみました

みなさんラズベリーパイを使いこなしていますか。
自分はめちゃくちゃ持て余しています。
コロナ禍などの需要で高騰しているんですが、 自分は完全に腐らせていたので、供養を込めて教育用キットを購入して遊んでみました。
本当は、コロナの自宅引きこもり中に遊ぶ予定だったんですが、ブログにハマったりダイエットしたりでなかなか手を出せていなかっただけです。

購入した教育キット

adeept社の工作キットですね。
火星探査をモチーフにしたもので、カメラや対象物の距離センサーだったりがついています。
一番気に入ったのが画角を変えられるところ。

基本的に追加の道具はいらない

親切なことに追加の道具を購入することなく組み立てることができます。
ドライバーも大きいのと小さいのが付いていますし、レンチもあるので完結しているのはありがたい。

組み立てがめちゃくちゃ難しい

普段ドライバーすらあまり使わない生活を送っていることもあって、組み立てがめちゃくちゃ難しいです。
両手2本じゃ絶対足らんやろ!という目に会います。
かといって、ネジ回しなど細かい作業なので人の手を借りづらいので、一人でやらないと仕方ないのですが。
自分の場合は、両面テープで仮止めしてからねじを締めるようにしてました。
あとは、組み立てが間違ったときにすべて取り外したくないと思ったときに、ラチェットドライバーが便利でしたよ~。

説明書はすべて英語

説明書はすべて英語です。
違う意味での勉強にはなります。
イラストを見ればなんとなくやりたいことは分かるのですが、単語が全然わからないとかなると大苦戦します。
私は英語がわからないからできないのかメカの組み立てが苦手だからできないのかがわからなくて時間を取られることが多かったです。

説明書が間違っている

www.adeept.com

加えてですが、説明書が間違ってます。 まあ雰囲気で組めなくも無いのですが、めちゃくちゃ時間を食います。
あるはずのパーツがなかったり、説明書に無いパーツがあったりと、なかなか信用できないです。
たとえばなんだけど、組み立てマニュアルは何故か2種類あるんだけど、 M4springの位置がそれぞれ違う。
個人的には、見にくいんだけど下の方が信頼できるかな。

https://www.adeept.com/video/static1/itemsfile/PiCarPro%20Assembly%20tutorial%20V3.0.pdf

サーボモーターの調整が激ムズ

車体のステアリングやカメラの方向を切り替えるのにサーボモータを使用しているのですが、これの調整に苦労します。
電源投入時に初期位置に自動で向きを変えるのですが、最初の組み込み位置が悪いと全てが狂います。
自分の場合は初期位置が左側に寄っており、組み上げた後に、右に曲がれないクルマに仕上がりました。
あとは、カメラやらも大体左に曲がって寝違えた感じになりました。
組み上げてからだと、調整しづらいので、組み上げる前に電源を入れて初期位置を確認するのが良いです。
ちなみに、自分は組み上げてから部分的に解体して調整しましたがめちゃくちゃ時間かかりました。
一応マニュアルにも書いているんだけどね。 作ってるときは、ここまでは見ないんだよな~

ソースコードからある程度修正可能

当然プログラムで記述した初期位置なのである程度は修正できます。
ただし、ハードウェアの制約からかサーボモーターに負の値が無いので、0度付近あたりで運悪く正面に調整するとスムーズに左右を向けなくなります。
自分の場合は、初期値を変更することで微調整しました。

難しい分出来上がると嬉しい

そんなこんなでなかなか難易度が高いですが、出来上がったときは嬉しいです。
電源をつけるとすべてのLEDが光るし、電源がつくと自動でセンサーが動き始めます。
小学校の頃に作ったラジオみたいなイメージですね~。
そういえば、今の小学生もラジオとか作るんやろうか?
組み上げるて、ソフトウェアをインストールするとこんな感じの画面が立ち上がって、ブラウザからロボットを操作できます。

【健康を目指す】ヘルスケアの数値化にハマってスマートメータを買った話

夏頃から続けているダイエットですが、冬に差し掛かってリバウンドしてしまいました。
冬は食べ物がめちゃくちゃ美味しいですからね。
鍋だったりカニだったりおもちだったりと、手軽に美味しい料理が多いです。
加えて、寒くて運動しないとなると、そりゃあ太るわけですね。 というわけで、今回はダイエットのモチベーションの回復も込めて購入したスマートメータについて記載したいと思います。

スマートメータ

体重を測るとスマホにデータを記録できるものをスマートメータと呼びます。
体重以外にも骨密度などを測ることができ、何を測れるかで値段が変わってきます。
他にも、充電式か乾電池といった違いだったり、国産か海外メーカーかどうかで値段が変わってきます。

ヘルスケアの数値化

ダイエットを始めてヘルスケア関連のデータを数値化して可視化することにハマってます。
睡眠時間だったり、歩数だったり、歩行速度なども測定してくれて、今まで知らなかったことが知れて嬉しいんですよね。
あと、疲れてるな~と感じてるときはやっぱり数値にも現れていて、私の場合は歩行速度が遅くなっていたりします。
まあ、歩行の非対称性なんて知ったとしてもどうしようもないやんみたいなデータもあるんですが、ちょっとした驚きがあって面白いです。
写真はiphoneのヘルスケアのスクリーンショットなのですが、色んなデータを勝手に収集してくれて便利です。もちろん個人情報で不安という感覚はありますが、appleほどの大企業にとって私なんて取るに足らない存在なので気にしなくて大丈夫でしょう~。
まあ、これを気にしだすとそもそもスマホなんて持ってられないですからね~。

xinformation.hatenadiary.com

体重と体脂肪率は欲しい

ダイエット中なので体重と体脂肪は測りたいな〜と。
体重は増えても、体脂肪率を見て筋肉がついたということなら納得も行きますし。
骨密度やら身体年齢など色々と測定できるものは多いですが、その数値を見たところで判断できる知識が無いのであまり気にしてませんでした。

Wi-Fiで記録できるのが便利

スマートメーターを探してみて思うのが、Wi-Fiで記録できるものが意外と少ないんですよね。
スマホのアプリを立ち上げながら、測定するというものがめちゃくちゃ多いです。
Wi-Fiに対応しているものを選べば、測定時に自動でインターネットにデータを上げてくれるので手ぶらで測定できるのでめちゃくちゃ便利ですよ。
私が体重を測定するのは、お風呂上がりのときが多いのですが、このときスマホは充電していて手元に無いのでこの利点は譲れませんでした。

結論:Renphoのスマートメーター

色々と探した結果、Renphoのスマートメーターに決めました。
Renphoはアメリカのベンチャーらしいです。
ヘルスケアはガーミンといいアメリカが強いイメージなので、精度も良さそうなのでこれにしました。


アプリも使いやすい

さすがアメリカのアプリですね。
アプリの画面もスッキリしていて扱いやすいです。
グラフとかも変に装飾が無いですし、何より動作が軽い。
体重やら骨密度などがわかりやすいですし、その値が正常なのかどうかもわかりやすいです。
それにしても、体脂肪率はやや高い程度なのに、体重が高いとはこれはどういうことなのか。

国産は高い

当然国産のメーカーも検討したのですが、値段が高いですね。
普通に1万円を越してきます。
あと、結構型が古いものが多く5年前とか10年前の製品が売られているような感じで、日本企業はヘルスケアにはあまり注力してないんじゃないかな~と思ったり。
便利と言っても結局体重計なので、諭吉は出したくないんですよね~。
ということで、日本のメーカーは選択肢に入りませんでした。

【プログラミング】Sassの入門ツールとしてpreprosが使いやすかった

最近、HTML/CSSのコーディングをする必要があったので、環境構築方法を調べたところpreprosが使いやすかったので、その使い方をまとめたいと思います。

HTML/CSSとは

html/cssはwebページの画面構成と画面の見た目を記述する言語です。
主に、htmlが画面構成でcssが色などの見た目を決定します。
いわゆる、フロントエンドエンジニアがよく使う言語ですね。
この2つの言語は、プログラミング言語としては書きやすい言語の分類になるのですが、 それゆえに、色んな書き方が生まれて来たり、また、ブラウザ特有の制限を受けるといった難しさもあります。

複数の画面を作るにはsassが必須

複数の画面を作成したい場合は、sassを使用することが多いです。
sassはcssを生成するための言語で、cssでは扱えない関数や変数を使用することができます。

プログラミングチックにcssを記述できると認識いただけると良いと思います。
ちなみに、本記事ではsassとscssを区別しては使っておらず、sassで統一して使ってます。

画面部品ごとに適用できるとよい

あくまでsassの環境なので、ejsのコンパイル機能は持ってないので、画面全体をデザインするのにはいいツールですね。
画面パーツごとだったり、画面パーツを組み合わせて一つの画面を作りあげるといった使い方は少し難しいというのが正直な感想。

インストール方法

OSはmacでもwindowsでもLinuxでも大丈夫ですが、今回はwindowsでインストールします。

公式サイトからダウンロード

ソフトは公式サイトからダウンロードできます。

prepros.io

言われるがままインストール

ダウンロードしたexeファイルを叩いて、インストーラーを立ち上げましょう。
基本デフォルト設定でインストールすれば問題無いです。

さっそく使ってみる

preprosは言ってしまえば、htmlとsassをトランスパイルする開発環境とそれらをブラウザ上で確認するためのサーバー機能を備えたソフトです。
起動するとプロジェクトを管理するための開発環境のコンソールが立ち上がります。

ローカルサーバーを自動で立ち上げてくれる

図のとおり、起動するとローカルサーバーを立ち上げてくれます。
なので、ブラウザからアクセスすれば作成中の画面を確認することができるので便利です。

面倒な設定を気にしなくて良いのが素敵

とくに面倒な設定は必要なく、インストーラーをクリックしただけで開発環境ができました。
プログラミングの登竜門である開発環境を手早く構築するのは良いですね。
パパッと画面部品などを作成するとかにも使えそうです。

ライセンス購入メッセージがやかまし

こんな感じでライセンス購入を促すメッセージが出てきます。
画面の一番上に出てくるので正直言って厄介です。
なので、画面の端にウインドウを追いやって使っています。

大規模な画面を作るなら自力で環境構築した方がいい

作成したいものにもよりますが、何十枚もの画面から成る大規模なサイトを構築するばあいは、自力で構築した方がよいように思います。
というのも、preprosはsassは使えるけども、カスタマイズがしづらい。
とくにejsファイルを取り扱うことが出来ないので、複数の画面から構成されるhtml/cssを作成する場合は結構苦労しそうです。
その場合は、自力でgulpなどを用いた開発環境を構築しましょう。
preprosでもパッケージをインストールすれば導入できそうですが、そこに力を注ぐならnpmなどのパッケージマネージャーツールで自身で構築することに慣れた方がよいかな~というのが正直なところです。

所感

最近、webが流行りはじめてから10年くらい経つようになって、環境構築がしづらくなってきたような。
web開発はどうしてもOSSに頼ることになるのですが、それらのメンテナンスやサポートが切れ始めたりして、環境構築に手間取るようなことが多いです。
依存関係も複雑になってきているので、そうした状況においては、preprosが良いように思いました。

【プログラミングのお話】ag-grid編集可能な表を簡単に作成する

reactで遊んでいるうちにエクセルみたいな値を編集できる表を作りたいなと思い、 ライブラリを探しているうちにいい感じのライブラリを見つけたので紹介します。
表を実現するライブラリはたくさんあるのですが、いくつか触ったうちで一番使いか易くかつ高機能でした。
今回は、Reactをベースにag-gridの使い方についてまとめたいと思います。

ag-gridとは

ag-gridですが、編集可能な表を実現できるライブラリです。
他にも、列ごとのフィルターだったり、ソート機能だったり、便利な機能がたくさんついた表を簡単に作成することができます。
意外とこういう編集可能な表って無いんですよね~。

まずは表示する

まずは、公式のデモページのとおり表示します。
表で表示したいデータをuseStateでリアクティブな変数にするのがポイントですね。
上の図の通り、各セルをクリックして選択することができます。
基本のコードカスタマイズして色んな機能を足していきます。

www.ag-grid.com

import { AgGridReact } from "ag-grid-react";
import { useState } from "react";

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const AgGridApp=()=>{
    const [rowData,setRowData] = useState([
        {make: "Toyota", model: "Celica", price: 35000},
        {make: "Ford", model: "Mondeo", price: 32000},
        {make: "Porsche", model: "Boxster", price: 72000}
    ]);
    
    const [columnDefs] = useState([
        { field: 'make' },
        { field: 'model' },
        { field: 'price' }
    ])
    return(
        <>
        This is AgGridApp
        <div className="ag-theme-alpine" style={{height: 400, width: 600}}>
           <AgGridReact
               rowData={rowData}
               columnDefs={columnDefs}>
           </AgGridReact>
       </div>

        </>
    )
}

export default AgGridApp;

データを更新する

useStateで宣言した変数を変更すれば自動的に表の内容も更新されます。 サーバーからデータを取得して更新したい場合などに便利ですね。 なお、わかりやすさを優先してボタンっぽく動くdivを作成してクリック時にデータの内容を空白にするように変更しております。

import { AgGridReact } from "ag-grid-react";
import { useState } from "react";
import { render } from 'react-dom';

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import "./style.scss"

const AgGridApp=()=>{
    const [rowData,setRowData] = useState([
        {make: "Toyota", model: "Celica", price: 35000},
        {make: "Ford", model: "Mondeo", price: 32000},
        {make: "Porsche", model: "Boxster", price: 72000}
    ]);
    
    const [columnDefs] = useState([
        { field: 'make' },
        { field: 'model' },
        { field: 'price' }
    ])
    const onClickDataChange=()=>{
        setRowData([])
    }
    return(
        <>
        This is AgGridApp
        <div className="ag-theme-alpine" style={{height: 400, width: 600}}>
           <AgGridReact
               rowData={rowData}
               columnDefs={columnDefs}>
           </AgGridReact>
       </div>
       <div className="c-button" onClick={()=>{onClickDataChange()}}>
        データ変更
       </div>
        </>
    )
}

export default AgGridApp;

style.scssの中身はこんな感じです。
普通にボタン属性で宣言しても大丈夫です。

.c-button{
    width: 180px;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    background-color: gray;
    border:1px solid black;
}

ネットワーク経由でデータを取得する

ネットワーク経由でデータを取得する場合は、useEffectあるいはuseCallbackを用いて取得しましょう。
データを取得する前に表示が完了してしまう可能性があるので、onGridReadyのトリガで実行します。
これまた、公式のデモの通り記述します。
また、もともと表示しているデータと列の定義が変更する場合は、再定義しましょう。

import { AgGridReact } from "ag-grid-react";
import { useState,useCallback } from "react";

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import "./style.scss"

const AgGridApp=()=>{
    const [rowData,setRowData] = useState([
    ]);
    
    const [columnDefs,setColumnDef] = useState([])
    const columnDefsMedalsIncluded = [
        { field: 'athlete' },
        { field: 'gold' },
        { field: 'silver' },
        { field: 'bronze' },
        { field: 'total' },
        { field: 'age' },
        { field: 'country' },
        { field: 'sport' },
        { field: 'year' },
        { field: 'date' },
      ];

    const onGridReady = useCallback((params) => {
        fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
          .then((resp) => resp.json())
          .then((data) => setRowData(data));
          // 列ヘッダの定義が当初と変わっているので再定義
          setColumnDef(columnDefsMedalsIncluded)
      }
      , []);

    
    return(
        <>
        This is AgGridApp
        <div className="ag-theme-alpine" style={{height: 400, width: 600}}>
           <AgGridReact
               rowData={rowData}
               columnDefs={columnDefs}
               onGridReady={onGridReady}
               >
           </AgGridReact>
       </div>

        </>
    )
}

export default AgGridApp;

編集可能にする

各列の設定内容を定義してやることで実現できます。
editable属性をtrueにすることで、ダブルクリックすると編集可能になります。
デフォルト設定では、編集できないようになっているのでダブルクリックしても反応がありません。

import { AgGridReact } from "ag-grid-react";
import { useState,useCallback } from "react";

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import "./style.scss"

const AgGridApp=()=>{
    const [rowData,setRowData] = useState([
    ]);
    
    const [columnDefs,setColumnDef] = useState([])
    const columnDefsMedalsIncluded = [
        { field: 'athlete',editable:true},
        { field: 'gold' },
        { field: 'silver' },
        { field: 'bronze',editable:true},
        { field: 'total' },
        { field: 'age' },
        { field: 'country' },
        { field: 'sport' },
        { field: 'year' },
        { field: 'date' },
      ];

    const onGridReady = useCallback((params) => {
        fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
          .then((resp) => resp.json())
          .then((data) => setRowData(data));
          // 列ヘッダの定義が当初と変わっているので再定義
          setColumnDef(columnDefsMedalsIncluded)
      }
      , []);

    
    return(
        <>
        This is AgGridApp
        <div className="ag-theme-alpine" style={{height: 400, width: 600}}>
           <AgGridReact
               rowData={rowData}
               columnDefs={columnDefs}
               onGridReady={onGridReady}
               >
           </AgGridReact>
       </div>

        </>
    )
}

export default AgGridApp;
面倒な場合はデフォルト設定を変更する

編集するデータが増えるたびに設定を追加するのは面倒ですよね。
そうした場合は、デフォルト設定で編集可能な状態にするのが楽です。
各列で別途列を定義した場合デフォルトの内容は上書きされます。
なので、上の場合はAtheleteの列が編集不可です。

編集したデータを確認する

rowDataに対して、useState変数を渡していたので、自動で反映されています。
めちゃくちゃ便利ですね。
例では、1行目のgoldのフィールドの値を取得して画面に表示しています。
ここまでの内容を一旦公開しておきました。
今後更新するたびにアプリ側も更新します。

http://sample-react-app-hibiblog.s3-website-ap-northeast-1.amazonaws.com/

import { AgGridReact } from "ag-grid-react";
import { useState,useCallback } from "react";

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import "./style.scss"

const AgGridApp=()=>{
    const [rowData,setRowData] = useState([
    ]);

    const [targetText,setTargetText]=useState("")
    
    const [columnDefs,setColumnDef] = useState([])
    const columnDefsMedalsIncluded = [
        { field: 'athlete',editable:false},
        { field: 'gold' },
        { field: 'silver' },
        { field: 'bronze',editable:true},
        { field: 'total' },
        { field: 'age' },
        { field: 'country' },
        { field: 'sport' },
        { field: 'year' },
        { field: 'date' },
      ];

    const defaultColDef={
        editable:true,
    }

    const onGridReady = useCallback((params) => {
        fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
          .then((resp) => resp.json())
          .then((data) => setRowData(data));
          // 列ヘッダの定義が当初と変わっているので再定義
          setColumnDef(columnDefsMedalsIncluded)
      }
      , []);
    
    const onClickRowDataOutput=()=>{
        console.log(rowData)
    }
    
    const onCellValueChanged=(event)=>{
        console.log(rowData)
        setTargetText(String(rowData[0]['gold']))
    }
    return(
        <>
        This is AgGridApp
        <div className="ag-theme-alpine" style={{height: 400, width: 600}}>
           <AgGridReact
                defaultColDef={defaultColDef}
               rowData={rowData}
               columnDefs={columnDefs}
               onGridReady={onGridReady}
               onCellValueChanged={(event)=>{onCellValueChanged(event)}}
               >
           </AgGridReact>
       </div>
       

       <button onClick={()=>{onClickRowDataOutput()}}>
        表のデータをコンソールに表示
       </button>
       <div>
        1行目のgold<br></br>
        {targetText}
        </div>
        </>
    )
}

export default AgGridApp;

【プログラミング】reactで作成したアプリを最速でAWSでweb上に公開する方法

最近Reactについて触れることが多くなってきて、日々勉強の毎日です。
そんななかで、作成したアプリをweb上に公開する方法があまりにも簡単だったので紹介がてら記事にしようかと思います。

reactでのアプリ開発環境

Reactを用いたアプリはめちゃくちゃ簡単で、コマンドを叩くだけです。
下記のコマンドを叩くだけです。
厳密には、Nodejsやらnpmが必要ですが、本記事では割愛します。

npx create-react-app sampleapp

アプリをビルドする

これまたコマンドで一発です。
create-react-appはめちゃくちゃ便利ですね。

npm run build
コマンドが通るとbuildフォルダ何にプログラムが出来上がる

ビルドには少し時間がかかりますが、 待ってるだけで出来上がります。
デフォルトだと下の画像のようなファイル群が出来上がります。

アプリをAWSに展開する

今回は、AWSに展開する先としてS3というサービスを用います。
これ以外のサービスは使用しないので気楽に眺めてください。

S3はストレージサービス

S3はストレージサービスです。
ファイルを記録することができ、インターネットを通じてアクセスすることができるサービスなので、 料金も格安なので、今回利用する分であればお金は要らないと思います。
親しみのあるサービスだと、google driveとかDrop boxのようなものですね。

S3でバケットを作成する

まずバケット作成します。
バケットは、ファイルを記録する場所くらいに考えてください。
パソコンで言うところのフォルダみたいなものですね。
バケット名はお好みでよいです。
今回は、[sample-react-app-hibiblog]で作成しました

パブリックブロックをオフに設定する

1点気をつけるのが、パブリックブロックをオフにすることですね。
URLを知っていれば誰でもファイルにアクセスできるようになるので、デフォルトではオフなのですが、今回は誰からでもアクセスできるようにしたいので構わずオフにしましょう。

アクセス許可でファイルにアクセスできるようにする

S3はファイルの流出を防ぐためにもアクセスブロックの仕組みがいくつも設けられているので、これだけではまだファイルにアクセスすることができません。
なので、バケットポリシーを通じて許可を与えましょう。
アクセス許可のバケットポリシーに下記のような記述をします。
1点だけ「"Resource": "arn:aws:s3:::sampleappreact/*"」の部分は自分で作成したS3の名前に変更する必要があります。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Stmt1380877761162",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::sampleappreact/*"
        }
    ]
}

バケットにファイルを配置する

次にオブジェクトのタブで、ビルドしたファイルをアップロードします。
ドラッグアンドドロップして、追加の設定などは不要です。
アップロード後は下のような画面になります。

最後静的webサイトホスティングを有効にする

最後、プロパティタブの一番下にある静的webサイトホスティングを有効にしてやれば完了です。

ページ本体はindex.htmlなので、そこにアクセスして欲しいと指定してやりましょう

設定が完了していれば、静的webサイトホスティングの欄にURLが発行されています。

完成形

うまく行けば図のようにReactのシンボルが表示されます。
お疲れ様でした。
下のURLからアクセスできますが、 そのうち消すかもしれません。
sample-react-app-hibiblog.s3-website-ap-northeast-1.amazonaws.com

後記

今回はwebサイトのホスティングを行いました。
久しぶりにAWSを触ったのですが手軽さに震えました。
実際の開発だと、サーバー側の処理だったり他サービスとの連携などで、もっと他のAWSサービスを連携する必要がありますが、javascriptで完結するようなアプリであればこれで問題ないと思います。
需要がありそうだったら、URLを変更したり、サーバーレスあたりも記事にしようかな~と思うので、 コメントくださると嬉しいです。

その買うを、もっとハッピーに。|ハピタス