ボルダリングで首を痛めたらメモする場所

March 4, 2022

定期的に首を痛めている気がするので、ここに記録してみる。

2022/03/03
- スラブで両手でコンプレッションしながら足場の悪いところを進んでいくような課題
- 磔のような体制で左足を滑らせた。そのときに首の左後ろ側がピキッた感覚
- そのあと2時間ほど登るが、首の痛みがずっとあった。
2022/03/04
- まだいたい。寝返りなどの動作をするたびに痛い。
- 左が向きにくい。向けはするが、他の筋肉でかばいながら左を見ている感覚
- 朝にボルタレンを塗る
2022/03/05
- 朝はちょっといたいぐらいだった。
- 調子に乗って7時間ほどボルダリング
- 開始して数時間で明らかに悪化するも、友達がどんどん来るのでずっと登ってた
- 特に成果があるわけでもなかったので失敗
- 後半はずっと痛みと戦いながら登っていた。なんでそんなに登ってんだ。
- 首の付根から脇の下（背中側）にかけた筋肉がヤバそう
- 左が向きにくい
- 左腕を伸ばして広げた状態で地面と平行になるように持ち上げる（Tの字にする）といたい
- 肩腱板損傷とは
  - ここまでではないかな
  - どちらかというと慢性的に衝撃を加えているときに発生するものっぽい？
- どこを痛めているのかがまだ明確でないのがちょっと気持ち悪い
- しばらく安静する
2022/03/06
- 昨日の朝と比べたら悪化している。
- ボルタレンを塗る。首の裏とか、左肩、左肩甲骨周りをメインに。
- 初日からそうだけど、筋肉の痛みというより神経っぽい痛みなのが嫌
- よるになったら少し痛みは引いているような？お風呂上がりにボルタレンを塗る
2022/03/07
- 痛い
- 左向くのはそんなに苦労しなくなったけど、左上を向くと痛い
- 首を右に傾けるのも痛い。左に傾けるのも違う痛さがある。
- ここ最近プランクをお休みしている。
- 夜にボルタレンを塗る
2022/03/08
- 結構良くなっている気がする。
- 左上を向く：そこまで痛くない
- 左を向く：ちょっと痛い
- 右に傾ける：ちょっと痛い
- 左に傾ける：痛くない
- 2時間半ほどボルダリング。意外と登れた。嬉しい。
2022/03/09
- 左肩が張っているような感覚がある。登ったことによる影響かも。
- 左上を向く：そこまで痛くない
- 左を向く：ちょっと痛い（昨日よりよき）
- 右に傾ける：ちょっと痛い（昨日よりよき）
- 左に傾ける：痛くない
2022/03/10
- 張っているぐらいだけどもうほぼ痛みは無い気がする。
- 昨日からプランクも再開した。
- トータルで考えると痛めたところは僧帽筋かなぁ

<input>要素の「accept」プロパティで「image/jpg」と設定すると Safari で jpg が選択できなくなる

February 24, 2022

<input>要素にはacceptというプロパティがあります。

画像ファイルだけ選択できるようにしたいときにはaccept="image/*"などと設定すればよいわけです。条件に合わず選択できないファイルが薄く表示されます。

pngとjpgだけ選択できるようにしたいと考え、以下のように記述しました。

1accept="image/png, image/jpg"

問題なさそうですよね、実際 Chrome で見ると問題なさそうです。

さて、これを Safari で見るとどうなるでしょう。

なんと、jpgが選択できません。かなしいですね。

原因はacceptの設定ミスです。

固有ファイル種別指定子のところを読むと以下のように書いてあります。

有効な MIME タイプの文字列で、拡張子なしのもの。

で、jpgの有効なMIMEタイプはimage/jpegです

なので対処法としてはjpegにすれば良いです。

1accept="image/png, image/jpeg"

ややこしいのが、各ブラウザでよしなにしてくれちゃうってところですよね。Chromeはjpgと記述してもよしなにやってくれるのですが、そのおかげで今回の状態に気づきにくかったり。

12日ぶりに家を出てボルダリングをしました

February 15, 2022

趣味はいくつかあるのですが、その中の一つにボルダリングがあります。

通常は週4の頻度で登っているのですが、わけあって12日間登れませんでした。というか12日ぶりに外に出ました。

昨日ボルダリングしたので、身体に感じた変化を羅列します

体力落ちた

これにつきる。前は落ちてもすぐトライできたのに一回登ったら5分ぐらい休憩してた。

家から一歩もでない生活をしていたら12日間でここまで落ちるのかと驚きました。

身体が重い

体重は変わっていない（引きこもり終盤不要なカロリーを摂らないようにしていた）ので、筋肉が落ちたのでしょう

ホールドが弾ける

指皮が立ってないっていうんですかね、スローパーとかSQUADRAとか滑り落ちしました

筋肉痛

特にお尻。ここが一番衰えたところかも

身体が硬い

ストレッチは家でもしておくべきでした

左脇腹の筋肉が固くなっていたのか、とある課題に取り組んでいるとき無理やり伸ばされ激痛でした

前腕がすぐパンプする

動きが下手になって脚とか上手く使えていないからだと思います。

思っていたよりは登れた

一番心配していたことだったので、少し安心しました。

Contentful から取得した Rich Text を使って埋め込みツイートを表示させる

February 13, 2022

Next.jsで引き続きブログを作っています。

TwitterのTweetを貼りたくなるときもあります。ただ、Contentful の Rich Text 上に埋め込みタグをベタ書きしても当然表示されないわけです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">スマイルプリキュア</p>— 橋下徹 (@hashimoto_lo) <a href="https://twitter.com/hashimoto_lo/status/340640143058825216?ref_src=twsrc%5Etfw">June 1, 2013</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

これを表示させるのが目標です。

方針

（Contentful側）Rich Text でツイートのリンクを作成する
（Next.js側）react-twitter-embed を使って埋め込みツイートを表示させる
（Next.js側）rich-text-react-renderer を使ってtwitterのurlに対して特定のタグに変換するようにする

（Contentful側）Rich Text でツイートのリンクを作成する

書いたとおりです。テキストの部分は使わないので何でも良いです。

（Next.js側）react-twitter-embed を使って埋め込みツイートを表示させる

埋め込みタグを見るとscriptがあります。当初はhtmlを直書きできるContent modelをContentfulに作り、それを　dangerouslySetInnerHTML でrenderしようと思っていましたが、scriptを実行できないという制約があります。

調べるといい感じにrenderしてくれるライブラリがあったので、それを使うことにしました。

（このあたりNext.jsをもう少し理解するといい感じにできそうな雰囲気を感じる。）

（Next.js側）rich-text-react-renderer を使ってtwitterのurlに対して特定のタグに変換するようにする

もともと rich-text-react-renderer の documentToReactComponents を使って render していました。READMEを見ると、documentToReactComponents はオプションを渡すことができ、カスタムしたrender方法を定義することができます。

1documentToReactComponents(post.content, {
2  renderNode: {
3    [INLINES.HYPERLINK]: (node, children) => {
4      if (node.data.uri.indexOf("twitter.com") !== -1) {
5        const tweetID = node.data.uri.match(/\d+$/)[0];
6        return <TwitterTweetEmbed tweetId={tweetID} />;
7      }
8      return <a href={node.data.uri}>{(node.content[0] as Text).value}</a>
9    },
10  },
11})

これでようやく埋め込むことができました。

Next.js + Contentful + Vercel でブログを作りました

February 12, 2022

表題の通りです。

Next.js + Contentful + Vercel でブログを作りました。

目的

衝動的に作りましたが、いくつか目的があります。

お仕事で触っているフロントエンドのフレームワークがNext.jsなのでチュートリアルぐらいはやっておきたいなって思っていた
ブログがほしいと漠然と思っていた
- とはいえはてなブログで作ってもすぐ飽きそうだし、WordPress触る気もそんなに起きなかった
訳あって暇だった（落ち着いたら記事にしたい）

できたもの

このブログ。Contentfulの管理画面から記事の投稿や編集を行うと、Vercel上で動いているNext.jsのappがbuildされ、静的コンテンツが作られてそれらが配信されます(SSG)。コンテンツの管理はContentfulにおまかせしており、ブログの更新はContentfulの管理画面で行っていきます。表示を変えたくなったらNext.js側の実装を変えていきます。

やったこと

Next.jsのチュートリアル
- ほぼこれがメイン。
- 基本のやつとTypeScript化のやつ（SEOのやつは今度進めていきたい。）
- 英語だけど一つ一つの分量は多くないからそこまで苦にならずに進められた。
- チュートリアルを進めていくとどんどんポイントが加算されていくの楽しい。
- クライアントサイドで環境変数を呼び出すときはNEXT_PUBLIC_命名規則がある。
  - 後述するContentfulを呼び出すときにハマっていました。
- Next.jsを使うメリットのひとつとしてSSR/SSGがある。これらの主な目的はパフォーマンス向上とそれにともなうSEOの向上。TTFB(Time To First Byte)という最初の1バイトが届くまでの時間という概念を知る。
Vercelの設定
- ホスティングサービス。 Netlify みたいなやつ。
  - RailsのチュートリアルをすすめるとHerokuにつながるように、Next.jsのチュートリアルを進めると流れるままに Vercel を使わされる。特にこだわりはないので便乗。
- Netlifyと同じく、PRを作るとプレビューが作られるの体験いいですね。
  - DPS: Develop, Preview, and Shipって呼んでいるらしい。
- 今でこそマージしたらデプロイが当たり前みたいな雰囲気あるけど毎回感動しちゃう。
- 初めて使ったけどとても使いやすかった。
Contentful
- Headless CMS (Contents Management System)
  - フロントエンドを持たないCMS
  - Headless はフロントエンドがないことを表している。
    - フロントエンドレスじゃあかんのか？って気持ちがある。
- UIポチポチしてどんな構造を持ちたいか設定する。
  - ユニーク制約とかnot null制約とかを設定できる
  - テーブル設計する感覚で作れる
- 当然Next.js側でやり取りするためのライブラリがある
  - ラッパーしているだけなのでこんなAPIないかな〜って思ったら公式ドキュメントを見ればいい
- コンテンツを更新するタイミングでbuildをさせることができる
  - VercelでbuildするためだけのWebhookを作ることが可能で、Contentfulの設定でWebhookを呼び出すことができる
  - 結果、SSGできてパフォーマンスを良くすることができる
  - なお、webhookを呼ぶタイミングについて一つ注意があります。Autosaveは外しましょう。
  - なぜなら編集中にwebhookを無限に呼び出してしまうため、一瞬でVercelの無料枠を消費しまうからです（つらい）

ふりかえり

チュートリアルでしたが、Next.jsに対する親近感をだいぶ抱きました。よかったです。あとブログを持つことができたので、これからいろいろと発信していきたいです。

前のページページ 10 / 10次のページ