ボルダリングで首を痛めたらメモする場所
定期的に首を痛めている気がするので、ここに記録してみる。
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 が選択できなくなる
<input>要素には
acceptというプロパティがあります。
画像ファイルだけ選択できるようにしたいときにはaccept="image/*"などと設定すればよいわけです。条件に合わず選択できないファイルが薄く表示されます。
pngとjpgだけ選択できるようにしたいと考え、以下のように記述しました。
accept="image/png, image/jpg"
問題なさそうですよね、実際 Chrome で見ると問題なさそうです。

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

なんと、jpgが選択できません。かなしいですね。
原因はacceptの設定ミスです。
なので対処法としてはjpegにすれば良いです。
accept="image/png, image/jpeg"
ややこしいのが、各ブラウザでよしなにしてくれちゃうってところですよね。Chromeはjpgと記述してもよしなにやってくれるのですが、そのおかげで今回の状態に気づきにくかったり。
12日ぶりに家を出てボルダリングをしました
趣味はいくつかあるのですが、その中の一つにボルダリングがあります。
通常は週4の頻度で登っているのですが、わけあって12日間登れませんでした。というか12日ぶりに外に出ました。
昨日ボルダリングしたので、身体に感じた変化を羅列します
体力落ちた
これにつきる。前は落ちてもすぐトライできたのに一回登ったら5分ぐらい休憩してた。
家から一歩もでない生活をしていたら12日間でここまで落ちるのかと驚きました。
身体が重い
体重は変わっていない(引きこもり終盤不要なカロリーを摂らないようにしていた)ので、筋肉が落ちたのでしょう
ホールドが弾ける
指皮が立ってないっていうんですかね、スローパーとか
SQUADRAとか滑り落ちしました
筋肉痛
特にお尻。ここが一番衰えたところかも
身体が硬い
ストレッチは家でもしておくべきでした
左脇腹の筋肉が固くなっていたのか、とある課題に取り組んでいるとき無理やり伸ばされ激痛でした
前腕がすぐパンプする
動きが下手になって脚とか上手く使えていないからだと思います。
思っていたよりは登れた
一番心配していたことだったので、少し安心しました。
Contentful から取得した Rich Text を使って埋め込みツイートを表示させる
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 を使って埋め込みツイートを表示させる
埋め込みタグを見ると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方法を定義することができます。
documentToReactComponents(post.content, {
renderNode: {
[INLINES.HYPERLINK]: (node, children) => {
if (node.data.uri.indexOf("twitter.com") !== -1) {
const tweetID = node.data.uri.match(/\d+$/)[0];
return <TwitterTweetEmbed tweetId={tweetID} />;
}
return <a href={node.data.uri}>{(node.content[0] as Text).value}</a>
},
},
})
これでようやく埋め込むことができました。
Next.js + Contentful + Vercel でブログを作りました

表題の通りです。
Next.js + Contentful + Vercel でブログを作りました。
目的
衝動的に作りましたが、いくつか目的があります。
できたもの
このブログ。Contentfulの管理画面から記事の投稿や編集を行うと、Vercel上で動いているNext.jsのappがbuildされ、静的コンテンツが作られてそれらが配信されます(SSG)。コンテンツの管理はContentfulにおまかせしており、ブログの更新はContentfulの管理画面で行っていきます。表示を変えたくなったらNext.js側の実装を変えていきます。
やったこと
Next.jsのチュートリアル
ほぼこれがメイン。
基本のやつとTypeScript化のやつ(SEOのやつは今度進めていきたい。)
英語だけど一つ一つの分量は多くないからそこまで苦にならずに進められた。
チュートリアルを進めていくとどんどんポイントが加算されていくの楽しい。
Next.jsを使うメリットのひとつとしてSSR/SSGがある。これらの主な目的はパフォーマンス向上とそれにともなうSEOの向上。TTFB(Time To First Byte)という最初の1バイトが届くまでの時間という概念を知る。
Vercelの設定
Contentful
ふりかえり
チュートリアルでしたが、Next.jsに対する親近感をだいぶ抱きました。よかったです。
あとブログを持つことができたので、これからいろいろと発信していきたいです。