以前、静的ウェブサイトをGitHub Pagesで公開したことがありました。今回はそれのAWSバージョンです。なぜやったかと言われれば、やったことないからやりました。

GitHub Pages に比べ、複雑でいろいろ設定が必要でしたが、面白かったです。AWSがちょっとだけ分かった気がします。

AWSでコンテンツを配信するには

今回AWSの配信方法についていろいろ調べてみた結果、このサイトが1番いいと思いました。

最初はS3だけで公開していました。上記のサイトでいう「小結」ですね。ちょっと違うのはDNSを設定することで独自ドメインで公開していました。

この方法はとっても簡単で素晴らしいのですが、HTTPSができないというのが個人的に許せませんでした。（パフォーマンスもあまりよろしくないそうですが自分のサイトはそこまでアクセスはないので…）

なので「横綱」で構築してみました。一応言葉で説明すると、アクセスをRoute 53のAレコードで CloudFrontがある場所を示すという構成です。

最終構成

最終的にはこのような構成になりました。今回はthesis.so-ta.netというURLにアクセスすると自分が作成したサイトが表示されます。

開発者 (サイトを作る人) はGitHubにコードを書くだけ。コードを書くと、GitHub Actionsが動き、S3にアップロードされる。S3は変更があったらBuildされるのでここで静的ウェブサイトのデータが完成する。それをCDNであるCloudFrontに置いておくことで速く、負荷分散に強くなる。

ユーザ(サイトを見る人)側の動きはthesis.so-ta.netをみようとするとまず、Google DomainsのDNSに飛ぶ。Google Domains DNSではthesisというサブドメインはNSレコードでRoute 53に委任してあるので、Route 53にIPアドレスを聞きに行く。Route 53はCloudFrontのIPアドレスを知っているので渡す。IPアドレスが分かったので、ユーザはCloudFrontをみに行き、データを取得する。

参考にしたサイト

参考にしたサイトを載せておきます。

大体の手順

• https://s8a.jp/vue-js-github-aws-s3-auto-deploy

HTTPSにする方法

• https://dev.classmethod.jp/articles/tls-for-s3-web-hosting-with-cloudfront/

Google Domainsのサブドメイン をRoute 53に委任する方法

• https://dev.classmethod.jp/articles/create-subdomain-on-route53/

AWSのコンテンツ配信の方法をまとめたサイト (おすすめ)

• https://dev.classmethod.jp/articles/static-contents-delivery-patterns/

修士の研究のため、Netlifyのbuild-imageを使おうとしたけど、READMEの通りやってもうまくいかなかったのでメモ

やりたいこと

ここのREADMEのSTEP1, 2, 3がしたい。

現象

STEP1, 2は普通にできる。しかし、STEP3の

/opt/build-bin/build npm run build

をするとこんな感じでエラーがでる。なんかnodeがインストールできないっぽい。

buildbot@e759adb8d766:/$ ./opt/build-bin/build 
Cloning into '/opt/buildhome/repo'...
done.
Installing dependencies
Python version set to 2.7
Version '12.18.0' not found - try `nvm ls-remote` to browse available versions.
Failed to install node version '12.18.0'
buildbot@e759adb8d766:/$ 

対処までの道のり

対処法だけくれ！って人はスキップ

実行しているファイル

今回実行しているファイルはコマンドの通り、/opt/build-bin/build

ただ、このファイルはコンテナを起動する時にローカルからマウントしているファイルです。

その証拠はSTEP2でコンテナを起動するときの/.test-tools/start-image.shに書いてあります。

start-image.sh (一部抜粋)

docker run --rm -t -i \
	-e NODE_VERSION \
	-e NPM_VERSION \
	-e RUBY_VERSION \
	-e YARN_VERSION \
	-e HUGO_VERSION \
	-e PHP_VERSION \
	-e GO_VERSION \
	-e SWIFT_VERSION \
	-e PYTHON_VERSION \
	-v ${REPO_PATH}:/opt/repo \
	-v ${BASE_PATH}/run-build.sh:/opt/build-bin/build \
	-v ${BASE_PATH}/run-build-functions.sh:/opt/build-bin/run-build-functions.sh \
	$NETLIFY_IMAGE /bin/bash

docker run のvオプションで${BASE_PATH}/run-build.shを/opt/build-bin/buildにマウントしていることがわかる。

よってrun-build.shをみれば良さそう。

run-build.sh でやってること

#!/bin/bash

dir="$(dirname "$0")"
: ${NETLIFY_REPO_URL="/opt/repo"}
NETLIFY_BUILD_BASE="/opt/buildhome"

cmd=$*

BUILD_COMMAND_PARSER=$(cat <<EOF
$cmd
EOF
)

. "$dir/run-build-functions.sh"

if [[ ! -d $NETLIFY_REPO_DIR ]]; then
  git clone $NETLIFY_REPO_URL $NETLIFY_REPO_DIR
fi
cd $NETLIFY_REPO_DIR

: ${NODE_VERSION="12.18.0"}
: ${RUBY_VERSION="2.7.1"}
: ${YARN_VERSION="1.22.4"}
: ${PHP_VERSION="5.6"}
: ${GO_VERSION="1.14.4"}
: ${SWIFT_VERSION="5.2"}
: ${PYTHON_VERSION="2.7"}

echo "Installing dependencies"
install_dependencies $NODE_VERSION $RUBY_VERSION $YARN_VERSION $PHP_VERSION $GO_VERSION $SWIFT_VERSION $PYTHON_VERSION

echo "Installing missing commands"
install_missing_commands

echo "Verify run directory"
set_go_import_path

echo "Executing user command: $cmd"
eval "$cmd"
CODE=$?

exit $CODE

おもにインストールをやってるっぽい。具体的にはinstall_dependenciesでインストールしている。

install_dependenciesは既存の関数ではなく、. "$dir/run-build-functions.sh"

で定義した関数なのでrun-build-functions.shをみる。

run-build-functions.sh (一部抜粋)

  if nvm install --no-progress $NODE_VERSION
  then
    NODE_VERSION=$(nvm current)
    # no echo needed because nvm does that for us
    export NODE_VERSION=$NODE_VERSION

    if [ "$NODE_VERSION" == "none" ]
    then
      nvm debug
      env
    fi
  else
    echo "Failed to install node version '$NODE_VERSION'"
    exit 1
  fi

多分ここだ。エラー文のFailed to ~もあるし。

nvm install でインストールして失敗してるんだな。なんでだろ。

エラーログに　nvm ls-remoteしてみてって言われてたから、付け加えてみるか。

変更後 run-build-functions.sh (一部抜粋)

  nvm ls-remote <-NEW!!
  if nvm install --no-progress $NODE_VERSION
  then
    NODE_VERSION=$(nvm current)
    # no echo needed because nvm does that for us
    export NODE_VERSION=$NODE_VERSION

    if [ "$NODE_VERSION" == "none" ]
    then
      nvm debug
      env
    fi
  else
    echo "Failed to install node version '$NODE_VERSION'"
    exit 1
  fi

これでSTEP2, 3 をやってみた。

結果

buildbot@db733d62c389:/$ /opt/build-bin/build 
Cloning into '/opt/buildhome/repo'...
done.
Installing dependencies
Python version set to 2.7
            N/A
Version '12.18.0' not found - try `nvm ls-remote` to browse available versions.
Failed to install node version '12.18.0'
buildbot@db733d62c389:/$ 

N/A … N/A !?

コンテナのDNS

N/Aってことはコンテナ内から通信できてないってことか？

通信できているか確認のため、curlをしてみた。

buildbot@db733d62c389:/$ curl google.com
curl: (6) Could not resolve host: google.com
buildbot@db733d62c389:/$ 

DNSが設定できて無いじゃん多分。

前も似たようなことがあったのでピンときた。

よってコンテナのDNSを指定すればいいことがわかった。

対処法

test-tools/start-image.shにresolv.confマウントを追加する

docker run --rm -t -i \
	-e NODE_VERSION \
	-e NPM_VERSION \
	-e RUBY_VERSION \
	-e YARN_VERSION \
	-e HUGO_VERSION \
	-e PHP_VERSION \
	-e GO_VERSION \
	-e SWIFT_VERSION \
	-e PYTHON_VERSION \
	-v ${REPO_PATH}:/opt/repo \
	-v ${BASE_PATH}/run-build.sh:/opt/build-bin/build \
	-v ${BASE_PATH}/run-build-functions.sh:/opt/build-bin/run-build-functions.sh \
	-v /etc/resolv.conf:/etc/resolv.conf \ <- NEW!!
	$NETLIFY_IMAGE /bin/bash

ローカルのresolv.confをコンテナ内にもマウントすることでコンテナもローカルと同じDNSを使えるようになる。これでcurl も問題なく動くようになるし、nodeもちゃんとインストールできるようになる。

feature/〜ブランチつくってdevelopブランチにプルリク, ある程度まとまったらdevelopブランチをmasterへプルリクして開発したい.
そのときmasterの変更があったときにだけgithub Actionsでビルド, 出力をgithub pagesでホスティングしたい.

なぜやるか

正直, ポートフォリオみたいに一人かつ複雑ではないものを作るだけならこんな遠回りしなくても普通にこんな感じで直接masterブランチにプッシュすればいい.
でもやっぱりいつかチーム開発にはもちろんこんな感じになるし多分, あとCI/CDを意識した方が今後役に立つから…

github Actionsとgithub pages使ってみたかったし,

なによりかっこいいのでやりました.

前提

react-create-appでアプリを作っている前提とします.
今回やるのはmasterブランチに変更があったらデプロイされるところまでです.

手順

ビルドの確認

npm run start
npm run build

コマンドを実行してlocalhostで動くか確認と正しくビルドできるかの確認をしましょう. CI/CDの部分を作るのにそれ以前の問題になってしまいます.
なぜこんな初歩的なことを言うのかというと僕がこれを怠ったため時間を無駄にしてしまったからです. ちゃんと確認しましょう.

具体的な確認

• localhost:3000に意図しているページが表示されているか.
• buildコマンドで/buildディレクトリが作成され, 中にそれっぽいものが入っているか

確認が終わったらmasterへプッシュしてしまいましょう.

github Actionsのymlを書く

/.github/workflows/ディレクトリの中にymlファイルを書くとgithub君はgithub Actionsとして認識してくれます.
以下は僕が作成したものです.

name: deploy

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v2.1.0
        with:
          node-version: "12.x"

      - name: Cache dependencies
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - run: npm ci
      - run: npm run build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build

やってること

1. masterブランチがpushされたときにイベント発火
2. ubuntu環境をセット, npm もいれる
3. npm ci でパッケージをインストール
4. npm run buildでビルド, 出力はデフォルトで./buildへ吐き出される
5. ./buildにあるファイルをgh-pagesブランチにコミット

それではファイルをmasterにpushしてください.
するとgithub Actionsが動いているはずです.

github上の設定

最後にgithub pagesの設定を行います.
リポジトリのsettingタブを開いてください. 下の方にgithub pagesの設定項目があります.

先ほどのgithub Actionsでgh-pagesブランチができているはずなのでそれを選択してください.

すると画像の緑の部分のようにメッセージがでます.
そのURLがデプロイ先になりますが, まだ正常なページが表示されません.

package.jsonにhomepageを追加

package.jsonに以下の記述を追加してください

"homepage": "デプロイ先のURL"

デプロイ先のURLは先ほど確認した緑の部分に表示されているURLにしてください. これがないとcssなどが404になってしまいます.

さいごに

勝手にデプロイされるのってなんかいいですね.
あと独自ドメインでホスティングする方法は別記事に書きます.

参考

GitHub - peaceiris/actions-gh-pages: GitHub Actions for GitHub Pages 🚀 Deploy static files and publish your site easily. Static-Site-Generators-friendly.

GitHub Actions for GitHub Pages 🚀 Deploy static files and publish your site easily. Static-Site-Generators-friendly. - GitHub - peaceiris/actions-gh-pages: GitH...

github.com

electron と Reduxを使ってエディタを作成しているんですが,
やっぱり動的にReduxを操作したいってことでRedux DevTools Extension
を使用することにしました. ついでにReactのDevToolsも入れます.
electronを使った場合が日本語であまりなかったので紹介します.

前提

electron, Reduxを使っている前提とします(当然ですが)

手順

まず, electron-devtools-installerを入れましょう.

npm install electron-devtools-installer --save-dev

or

yarn add electron-devtools-installer -D

次にメインプロセスの部分に以下のように追加します.

//index.js
import installExtension, {
  REACT_DEVELOPER_TOOLS,
  REDUX_DEVTOOLS,
} from 'electron-devtools-installer';

...
...
...
//electronを起動時にDevToolsを開く(これ便利だからおすすめ)
win.webContents.openDevTools();

installExtension([REDUX_DEVTOOLS, REACT_DEVELOPER_TOOLS])
.then((name) => console.log(name))
.catch((err) => console.log(err));

これで以下のようにReduxとReactのDevToolsが入りました!

しかしReduxの方をみてみるとなんか言われています…

「ストアがみつかんないよ!!」

というわけでストアを接続してあげましょう.

ストアを作成しているところをみてください.
一般にcreateStore関数があるところです.

 const store = createStore(
   reducer,
   // 以下を追加
   window.__REDUX_DEVTOOLS_EXTENSION__&& window.__REDUX_DEVTOOLS_EXTENSION__()
 );

window〜を追加してください. これでストアを接続できました.

とらゼミの場合

この節はトラハックのエンジニア学習ゼミ【とらゼミ】の日本一わかりやすいReact-Redux入門
で勉強した方向けになります. 対象でない方はスキップしてください. m(_ _)m

とらゼミではreduxのcreateStoreをreduxCreateStoreという名前でimportしていました.

//store.js
import { combineReducers, createStore as reduxCreateStore } from 'redux';
import EditorReducer from '../editor/reducers';

export default function createStore() {
  return reduxCreateStore(
    combineReducers({
      editor: EditorReducer,
    }),
      // 以下に追加
    window.__REDUX_DEVTOOLS_EXTENSION__ &&
      window.__REDUX_DEVTOOLS_EXTENSION__(),
  );
}

これはなぜかというと他の場所(index.jsx)でcreateStore関数をつかってストアを作成したかったからです.
よってwindow〜を追加する場所は上記のようにstore.jsの中になります.

結果

以下のようになったら完了です.

おわりに

Let’s Redux!!

gatsbyに入門しようとチュートリアルを進めていたら予想外のところでエラーがでたのでその現象と解決策を共有します.

現象

gatsbyのチュートリアルPART3をやっていました.
いろいろjsを書き, チュートリアル通りに

gatsby develop

とするとreactがないと怒られました. あれ? なんで? と思いながらもnpm install すれば治るでしょと

npm install
gatsby develop

すると

ERROR

The above error occurred in the <StoreStateProvider> component:
    in StoreStateProvider
    in App

React will try to recreate this component tree from scratch using the error boundary you provided, App.

 ERROR

Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.

 ERROR

UNHANDLED REJECTION Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

  Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for o  ne of the following reasons:
  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app
  See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

...

となりました…
チュートリアル通りやったのになんでだー!

道のり

軽く調べて同じような方がいたので
対処法としてnode_modulesを削除してnpm installすれば治るらしいのでやってみたんですが治りませんでした…

解決方法

yarnでやるのがいいそうです.

install gatsby-transformer-remark breaks 'gatsby develop' · Issue #19064 · gatsbyjs/gatsby

When I install gatsby-transformer-remark it breaks the development environment for that site. Tried this 3 times from a fresh install using npm. 1 - Install new...

github.com

rm  package-lock.json
yarn install
gatsby develop

おわりに

これからgatsby頑張るぞー

参考文献

install gatsby-transformer-remark breaks 'gatsby develop' · Issue #19064 · gatsbyjs/gatsby

When I install gatsby-transformer-remark it breaks the development environment for that site. Tried this 3 times from a fresh install using npm. 1 - Install new...

github.com

docs(tutorial): tutorial/part-three -> walkthrough failing if yarn is selected as packageManager · Issue #21990 · gatsbyjs/gatsby

Summary when the packageManager in ~/.config/gatsby/config.json set to yarn then the walkthrough failing (see related issues) Basic example Possible changes and...

github.com

dockerにはいろいろな使い方があります. 常につけっぱにするサーバとしてだったり, 仲間と全く同じの環境を作成するためだったり, 色々です.

しかし一方で「サーバ？別にレンタルサーバだから要らないし…」「チーム開発あんまりやらない」という人もいると思います.

今回はdocker歴1年の僕が1番便利だと感じたdockerの使い方について紹介します.

この方法は誰でも使う余地があると思いますので是非, 試してみてください!!

環境

windows Linux MacOS … dockerが動く環境全て

目的

…で前振りはいいから結局何すんの?って話なんですが,
dockerでほぼ全ての環境を構築をしましょう.

それこそ最近はオンライン授業で自分のPCに環境を作ってくださいとか言われるかもしれません.
そういう先生に是非言いたい! dockerでやりましょうと.

ということで今回はdockerで環境構築をするのが目的です.
具体例をみていきましょう.

使い方

ストーリー

授業でC言語のプログラムを作ってこいと言われた
C言語の環境ってどうやるの? gcc?なにそれ, 怖いから直接PCに入れたくない!
そこでdockerです.

docker run --rm -it -v $PWD:/workdir gcc bash

このコマンドを打つだけでC言語が動く環境ができました!

手順

コンテナイメージを決定する

まず, 利用するコンテナイメージをググって決定します.
僕は以下のイメージをよく利用しています.

コンテナを起動する

先に見たコマンドを使ってコンテナを起動しましょう.
今回はカレントディレクトリと/workdirをマウントしてgccイメージのコンテナを起動します.

docker run --rm -it -v $PWD:/workdir gcc bash

コンテナ内で操作する

コマンドを打つとコンテナ内に入れたと思います.
それでは「cd /workdir」で正しくマウントできているか確認してください.
あとは通常通り操作するだけです. 例としてgccの場合は以下のようにして実行します.

gcc <ファイル名>.c && ./a.out

使い終わったら

exit

でコンテナから出ます.

それでは利用したコマンドについて説明していきます.

解説

このコマンドでやっていることは大きく分けて5つです.

1. イメージを指定してコンテナ起動
2. 終了時コンテナ自動破棄オプション
3. コンテナ内を操作するオプション
4. マウントオプション
5. シェルの指定

それぞれ見ていきましょう!

イメージを指定してコンテナ起動

docker run <コンテナイメージ>

コンテナイメージを指定してコンテナを起動します.
コンテナイメージとはコンテナを作成するときの元となるものです.
よくクラスとインスタンスの関係で例えられます.

• クラス -> コンテナイメージ
• インスタンス -> コンテナ

またコンテナイメージがローカルにない場合は自動でdocker hubからpullします.

終了時コンテナ自動破棄オプション(–rm)

docker run --rm <コンテナイメージ>

コンテナがストップしたときに, 自動でコンテナとコンテナに関連するvolumeを削除するというオプションです. これがないとコンテナを破棄してもvolumeの繋がりが残ってしまい, 無駄にメモリ消費を消費してしまうことがあります.

コンテナ内を操作するオプション(-it)

docker run -it <コンテナイメージ>

正確にはiオプションが標準入力を開けるもの, tオプションが擬似端末を割り当てるオプションです.
しかし実際ほとんど一緒に使われるので -it でコンテナ操作できるオプションと覚えていいと思います.

マウントオプション(-v)

docker run -v $PWD:/workdir <コンテナイメージ>

ホストOSのディレクリとコンテナ内のディレクトリをつなげるオプションです.
この例だと$PWDとコンテナ内のルートディレクトリにあるworkdirディレクトリを繋げます.
$PWDはprint working directoryの略で今開いているディレクトリへのパスです.
具体的になんなの?という人は端末を開いて「echo $PWD」と打って試してみてください.

コンテナ内を操作するシェル指定(bash)

docker run -it <コンテナイメージ> bash

itオプションで開くときのシェルをbashに指定します.

おわりに

dockerを使えば簡単に環境構築ができます.
是非, お試しあれ!!

参考

Empowering App Development for Developers | Docker

Learn how Docker helps developers bring their ideas to life by conquering the complexity of app development.

www.docker.com

DockerのVolumeに関して -v --rm -d ゴミが残る問題 コンテナが起動しない - ちょこっとプログラミング

最近Dockerを使い始めたのですが、一つ躓いたのでメモ。Dockerのコンテナを立上げる時、コンテナとは別に実は裏でボリュームと言う物も立ち上がっています。 （立上げる時に使うイメージによって違うかもしれませんがMysqlを立上げたら勝手に立ち上がるのは確認済みです） イメージ的にはこんな感じです: 公式ドキュメント...

stlisacity.hatenablog.com

現在チームでプログラミングエディタを作成しています.
react-aceを利用してエディタ部分を作っているのですがreact.jsなんも知らない初心者なので公式ドキュメント見ても詰まりました…
そのメモとして記しておきます.

やりたいこと

タイトルにも書いてあるように選択したテキストを取得します.

道のり

公式ドキュメント

公式ドキュメントにはこんなことが書かれており, よっしゃーとコピペしたらもちろんエラーがでました. 「refs」って誰?って言われました. 僕も同意見です.

もっと読んでみたらドキュメントにこんな記述があって

    <AceEditor
        ref="aceEditor"
     />;

自分のものにはrefがなかったので追加してみましたができませんでした.
というかそもそもエラーでuseRef()やcreateRef()使えと言われました.
これ多分僕が全体的な理解をしてないからわかんないんだろうな.
雲行きが怪しくなってきた…

stack Overflow

似たような質問があった! やったぜ!
React v16.12 +だと

this.refName = React.createRef();

refName作って

     <AceEditor
        ref={this.refName}
     />

refを指定して

this.refName.current.editor.getSelectedText()

で取得できる.

refを自分で作ってそれを使って繋げてるっぽいな

ありがとうStack Overflow!

最終的なコード

今回はクラスコンポーネントではなく, 関数コンポーネントだったのでちょっと実装は変わりましたがこんな感じになりました.

const myRef = React.createRef();
    export default function EditArea () {

        const onSelectionChange = () => {

            const text = myRef.current.editor.getSelectedText();
            console.log(text);

        };
        return (
            <AceEditor
                onSelectionChange={onSelectionChange}
                ref={myRef}
            />
        );

}

onSelectionChangeはセレクションが変わったとき, つまりは選択範囲に変化が生じたときに呼ばれます.

追記

これよりもいいと思われる方法を発見した.
AceEditor の属性にonLoadというのがあり, それはエディタインスタンスを取得できます.
具体的には以下の通りです.

    export default function EditArea () {
        const editorInstance = "";
        const onSelectionChange = () => {

            const text = editorInstance.getSelectedText();
            console.log(text);

        };

       onLoad = (newEditorInstance) => {
           editorInstance = newEditorInstance;
        }
        return (
            <AceEditor
                onSelectionChange={onSelectionChange}
                onLoad={onLoad}
            />
        );

    }

エディタインスタンスの作成が終わったらonLoad関数が呼ばれます.
関数内でeditorInstanceを代入することで準備完了, あとはこのインスタンスの関数から呼び出すだけです.

ちなみにエディタ全体の文字を取得するのはgetValue()です.

おわりに

ちょぉぉぉとreact-aceがわかってきた.

参考

How to get the value of react component - AceEditor

I am facing the following issue while using AceEditor react component I am using AceEditor as user input, after user enters code, he(she) presses the Run

stackoverflow.com

How to get the value of react component - AceEditor

I am facing the following issue while using AceEditor react component I am using AceEditor as user input, after user enters code, he(she) presses the Run

stackoverflow.com

react-ace/FAQ.md at master · securingsincity/react-ace

React Ace Component. Contribute to securingsincity/react-ace development by creating an account on GitHub.

github.com

Ace - The High Performance Code Editor for the Web

ace.c9.io

Ref と DOM – React

ユーザインターフェース構築のための JavaScript ライブラリ

ja.reactjs.org

コロナの影響で大学にいけないため, Macを使うことになったのですが, 前の記事のような入力切り替えにしたい…
Mac初心者なのでアドバイスなどがあればよろしくお願いします…

環境

macOS Catalina

目的

前の記事と同じようなキーの位置で入力を切り替えたいので, caps lockキー(キー設定はcommand) + spaceキーで英, shitキー + spaceキーで日本語にします.

手順

ここから英かなというアプリをダウンロード, インストールします.
あとは以下のように設定するだけです.

通常, texの中に図をいれると図の大きさのせいで本文が先に入ってしまいます…
今回はその対処方法です.

現象

例(卒論)として以下のようなtexファイルだと…

Nodeの概要図を図\ref{fig:in_node}に示す. 
\begin{figure}[h]
    \begin{center}
    \centering
    \includegraphics[width=10cm, bb= 0 0 569 420]{in_node.png} 
    \caption{Nodeの中身}
    \label{fig:in_node}
\end{center}
\end{figure}　

Nodeに含まれるのは代表的なものは前述したkubeletとDocker(コンテナランタイム), そしてPodである. 
Podとは, 同じ実行環境上で動くアプリケーションコンテナとストレージボリューム以下の集まりであり, KubernetesのCluster上ではコンテナではなくPodが
最小デプロイ単位である. また1つのPod内のコンテナは全て同じマシン上に配置される. 

こんな感じに任意の場所に画像がはいらないため, 本文が先に入っています.

ですが, 僕は改ページしてほしかったのです.

対処方法

usepackage{float}というものを使います.

まず以下のように\begin{document}の上に記述してください

\usepackage{float}

\begin{document}

次に図の場所を指定する「h」を「H」にしてください.

\subsubsection{Nodeに含まれる要素}

Nodeの概要図を図\ref{fig:in_node}に示す. 
\begin{figure}[H]
    \begin{center}
    \centering
    \includegraphics[width=10cm, bb= 0 0 569 420]{in_node.png} 
    \caption{Nodeの中身}
    \label{fig:in_node}
\end{center}
\end{figure}　

Nodeに含まれるのは代表的なものは前述したkubeletとDocker(コンテナランタイム), そしてPodである. 
Podとは, 同じ実行環境上で動くアプリケーションコンテナとストレージボリューム以下の集まりであり, KubernetesのCluster上ではコンテナではなくPodが
最小デプロイ単位である. また1つのPod内のコンテナは全て同じマシン上に配置される. 

これだけです!

おわりに

卒論めんっどくさい!!!