ReactプロジェクトをGithub Pagesでデプロイ

目的

Reactでポートフォリオを作ったのでGithub Pagesで簡単にデプロイしたい

環境

• macOS Ventura 13.4
• npm 10.4.0
• node v20.11.1

*gh-pagesというnpmパッケージも存在しますが, 今回は使用していません. こっちを使えばもう少し簡単にできた気がするので今度実験してみます.

下準備

1. Githubアカウントを作成
2. Github上でリポジトリを作成

Reactのプロジェクト作成

1. npx create-react-app <フォルダ名>を実行
2. cd <フォルダ名>で該当フォルダに移動

Github上のリモートリポジトリとローカルのリポジトリを連携

git remote add origin git@github.com:<githubのユーザー名>/<リモートリポジトリ名>.gitを使用して, Github上のリモートリポジトリとローカルのリポジトリを連携します.

Package.jsonを編集

"dependencies": {
    //省略
    "homepage": "https://<githubのユーザー名>.github.io/<githubのリモートリポジトリ名/"
},
  "scripts": {
    //省略
    "rm": "rm -rf docs",
    "mv": "mv build docs",
    "deploy": "npm run rm && npm run build && npm run mv"
  },

上のように記述することで簡単にデプロイができるようになります. Githubへのpushを自動化するのは好みだと思います. 私は個別でpushしていますが, 不都合があればご教示下さい.

Github Pagesの有効化

Github Pagesの設定をしていきます.

左カラムのメニューからPagesを選択し, SourceをDeploy from a branch, Branchをmain/docsに切り替えてSaveを押します.

Reactプロジェクトの編集

ここでは触れませんがsrcの中のファイルを編集して, 必要なウェブサイトを作成して下さい.

実際にデプロイする

npm run deployを実行すればビルドをしてくれるので, それをGithubにpushすればOK....というわけではなさそうです.

自動生成されたreactのプロジェクトのデプロイだけしたい！という場合なら↑のコマンドだけでOKなのですが, それだけで済む場合ってあまりないので....

実際, pushしたあとに生成されたURLに訪れてみても, 真っ白なページが出るだけで何もありません. ローカル環境ではnpm startでしっかり表示されるのに...？

URLで表示される真っ白なページを検証ツールで見てみると404エラーを吐いています. そもそもファイルが見つけられていないから表示できていないようです.

docs/index.htmlを編集する

deployをした際に生成されたdocs/index.htmlを見てみると, いろいろなファイルを呼び出していることがわかります. しかし生成されたパスを見てみると, それらすべて絶対パスになっているので, Github Pagesでは認識してくれないのです....(ユーザー名.github.ioのレポジトリで作成できるGithub Pagesでは, この問題は発生しないらしいです. 参考: https://neos21.net/blog/2019/09/18-02.html)

なのでやるべきこととしては, 該当パスをすべてindex.htmlからの相対パスに書き換えてあげればOKです.

<link rel="icon" href="/<フォルダ名>/logo.svg" />
は, このように修正↓
<link rel="icon" href="<フォルダ名>/logo.svg" />

(あとなぜか私の環境だとstylesheetも読み込めていなかったのでそこの記述はすべて消しました. )

すべて修正できたら, deployコマンドは実行せずにGithubにpushし, Github Actionがうまく実行されていればOKです.

Appendix: 画像が表示されない

URLで文字は表示されるようになったのに, 画像が表示されない.... という問題に苦しめられたのでメモ書きです.

調べてみると, Publicにsrc/assets/imgフォルダを移せば上手くいく場合があると書いてあったので移してみましたが撃沈. パスの指定に問題があるとまではわかるのですが, どうしても解決できず... (もっとドキュメントを読むべきです)

強引な解決方法ですが, Githubに画像をPushし, そのリンクをコピーしプロジェクト内に埋め込むことで解決しました. 表面上は動いていますがまだこちらは未解決なのでもう少し努力をしたいと思います.

参考

https://qiita.com/tat_mae084/items/745761eee6cd1d42949d

pypdfで画像の抽出

Pythonでautomationの勉強をしているため覚書.

PyPdfとは

オープンソースのpythonライブラリ. PDFファイルに対していろんな操作ができる.  pypdf.readthedocs.io

多分PyPDF2からPyPDFに戻ったんだと思う. 

pip install pypdfで利用可能

最初の躓き

なぜかModuleNotFoundErrorが出てpypdfがインポートできない. ドキュメントのとおりにインストールしたのだが....?

原因

ライブラリのインストールの箇所が読み込まれていないらしい. Pythonに関しては未だ無知なのでこちらをまるまる参考にした.

qiita.com

import sys
sys.path.append("/usr/local/lib/python3.9/site-packages")

本当にこの記述だけで動くようになった. ドキュメント通りにやったのに差異があるのが悔しい.

実装

実は画像を抽出するのはドキュメントのコードを真似すればいいだけなので簡単. 一応CLIでファイル名とページ番号を指定できるようにしてみた. GUIもつければ楽しいかもしれないが, 自分用なので....

import sys
sys.path.append("/usr/local/lib/python3.9/site-packages")
import pypdf
from pypdf import PdfReader
name = input('input your file name: ')
reader = PdfReader(name)
num = input('Which page do you want to look into? : ')
num= int(num)
page = reader.pages[num]

count = 0

for image_file_object in page.images:
    with open(str(count) + image_file_object.name, "wb") as fp:
        fp.write(image_file_object.data)
        count += 1

こんな感じ. pdf限定なので拡張子はjoinすればよかったかもしれないが, それはそれで紛らわしい. pyodfではいろんなことができるっぽいので遊び倒したい.

macでcloud9の環境を再現(ruby on rails)

こちらへの投稿はお久しぶりです. 環境構築に苦労したのでこちらに脳死でメモしたものをほかっておきます. コードブロックが使えないので今後どこかに移すかもしれません.

1. rubyをインストール

   1. command line tools のインストール

      xcode-select --install

      このコマンドを実行しないとbuildできなかった.

   2. Homebrewをインストール

      省略

   3. rbenvのインストール

      ~/.bashrcに'export PATH="$HOME/.rbenv/bin:$PATH"'

      ~/.bash_profileに

       export PATH="~/.rbenv/shims:/usr/local/bin:$PATH"
       eval "$(rbenv init -)"
      

      と書き込む. 1行目がないと今後globalでrubyのverを変えることができなくて頭抱える.

      source ~/.bash_profileで設定の反映

      brew install rbenv ruby-buildでrbenvのインストール

   4. rubyのインストール

      カリキュラムでは3.1.2なのでそのまま

      rbenv install 3.1.2

      rbenv global 3.1.2で全体に適用. 或いはrbenv local 3.1.2で作業ディレクトリのみに適用

      rbenv rehashで反映

   5. bundlerのインストール

      gem install bundler -v 1.17.3 最新だといけないらしい. わからん.

2. railsをインストール

   gem install rails -v 6.1.4

   git cloneでお目当てのファイルを持ってきたりrails newしたりする.

3. 諸々インストール

   npm install -g yarn

   brew install imagemagick

   sudo gem pristine --all

   sudo gem install sqlite3 -- --with-sqlite3-include=/opt/sqlite/sqlite3/include --with-sqlite3-lib=/opt/sqlite/sqlite3/lib

4. バージョン確認

   カリキュラム参照

5. 調整

   bundle update

   rails db:migrate

   rails webpacker:install environment.jsに上書き注意

以上です. 簡単なのになぜ今までやらなかったんでしょうね. コツが掴めてきたので今度はDockerにも環境を再現したいです.

Leetcode 733: Flood Fill

leetcode.com

恥ずかしながらFlood Fillって言葉をさっき知ったのでメモ.

An image is represented by an m x n integer grid image where image[i][j] represents the pixel value of the image. You are also given three integers sr, sc, and color. You should perform a flood fill on the image starting from the pixel image[sr][sc]. To perform a flood fill, consider the starting pixel, plus any pixels connected 4-directionally to the starting pixel of the same color as the starting pixel, plus any pixels connected 4-directionally to those pixels (also with the same color), and so on. Replace the color of all of the aforementioned pixels with color. Return the modified image after performing the flood fill.

NOTE:

• image[i][j] はピクセル値と表す
• image[sr][sc] から始まるimageにFlood fillを行いたい.
• flood fillを行うためには, 開始ピクセルと, 開始ピクセルに4-directionally connectedな同じ色のピクセルと, それらのピクセルに4-directionally connectedな同じ色のピクセルを考える.
• 全ての上記の条件を満たすピクセルをcolorで置き換える

考えたこと

• 4-directionally connectedの意味を理解していなかったため, しばらく頭を悩ませた. これは, ただ単に開始ピクセルの四辺に接しているピクセルのなかで, 開始ピクセルと同じ色のピクセルは塗りつぶされるという意味だったのだが, 問題に添付されていた画像がすごくわかりにくかった. ペイントツールでのバケツ塗りと同じアルゴリズムだと考えれば納得がいった.
• 普通にDFSとかBFSとか使えば実装できそう.

実装

class Solution:
    def floodFill(self, image: List[List[int]], sr: int, sc: int, color: int) -> List[List[int]]:
        row, column = len(image), len(image[0])
        sColr = image[sr][sc]
        if sColr == color:
            return image
        
        def dfs(r, c): # dfs recursion
            if r < 0 or r>=row or c < 0 or c >= column or image[r][c] == color or image[r][c] != sColr: #invalid cases, just return
                return
            image[r][c] = color
            dfs(r+1, c)
            dfs(r-1, c)
            dfs(r,c+1)
            dfs(r, c-1)

エレガントじゃないかもですが通りました. わーい. 問題の意味がわからなくて怯みましたがEasyに分類されるのも納得.

複数デバイス間でのCalendar管理

個人的に試行錯誤したメモ

現状

カレンダー連携したかったもの:

• Macのシステムカレンダー
• iPhoneのシステムカレンダー
• Any.Doのビルトインカレンダー
• Sparkのビルトインカレンダー

やったこと:

iCloud上でカレンダーを作成

• iPhone-Mac間はシームレスだが,Googleカレンダーへの反映に時間がかかる
• Any.DoはiOS上ではiOSデフォルトカレンダーを読み込んでくれるが, Macアプリ上ではGoogleカレンダー限定なので反映が遅すぎて使い物にならなかった. (予定を登録しても反映されるのが12時間後とかで私の使い方とは合わなかった)
• Sparkのビルトインカレンダーはicloud.comのメアドを使ってないのに登録することで無理やり解決したが, メールボックスが増えて少し気持ち悪かった

Googleカレンダーに統一

• GoogleカレンダーのMac上での独立アプリが見つからなかった.
• MacでGoogleカレンダー上のイベントを登録しても反映が遅いと思い込んでいた(というかそもそもできると思ってなかった)が, 反映がめちゃくちゃ早いことが発覚. 入力してる間にどんどん反映されていった
• iOS上にGoogleのカレンダーが表示されない問題があったが, iPhoneの設定の, アカウントから一度Googleアカウントを削除してログインし直したら表示されるようになった,
• Any.DoもスパークもGoogleアカウントのカレンダーはきちんと反映された.
• わーい

今の所これで問題ないのでこのまま運用していく. 結構試行錯誤したけど単純な解決方法で拍子抜けした.

Totalからgit pushが進まなくなった

400MBくらいのファイルをGitHubにPushしたらTotal...の行から待てど暮らせど進まなくなることを4回ほど繰り返して, 何かがおかしいということに気づいた.

やったこと

stackoverflow.com

普通に同じ問題を抱えてる人がたくさんいた.

ここにはいろいろな解決方法が書いてあるが, 私は

git config --global http.postBuffer 157286400

を打ち込み git pushをしたらすごいスピードでPushされ何事もなく終わった.

今日本語で調べたらたくさん記事があったのでこの記事は必要なかったかもしれない.

MacのSublime Text 4 でスクロールの挙動をVS Codeに寄せた.

TL;DR:

"scroll_past_end": 1.0, をUser Settings内に書けば幸せ

MacでSublime Textを使うとなんか違和感あるんだよなと思ったらスクロールが存在する行までしかできなかった.つまりコードが長くなると画面の一番下をみながら作業しなきゃいけなくなる. そんなことあっていいんだ.

box-2の編集がしにくくてうんち. よくわからんけど見た感じMacのシステムのせいらしい. もし俺だけに起こってたら嫌だな. 

環境

MacBook Pro 2020 (Intel)

macOS 12.3 Monterey

Sublime Text Build 4126

やったこと

forum.sublimetext.com

stackoverflow.com

ここらへんが解決してくれそうだったからそのまま参考にしようとしたら設定が変更できなかった. Sublime Text4の仕様変更だと思う.

Sublime Text 4

Sublime Text > Preferences > Settings

右側(User-Settings)の方に

"scroll_past_end": 1.0,

を追加して保存.

わーい.

"scroll_past_end": 0.5,

にすると真ん中までしかスクロールできなくなる. 

以上.