メモログ

💡 Personal notes about somthing I'm interested in

画像のプレースホルダーとしてインラインSVGを使う

画像が読み込まれた後にレイアウトが動かないように、画像のプレースホルダーを入れた。最初はpng画像をインラインで挿入していたのだけど、svgの方が画像のサイズをみてその場その場で適切なものを作成しやすかったので、svgを使うようにしてみた。処理自体はNode.js(Hexoの処理の中)で行っている。現在のコンテンツの最大幅は750pxなので、それを基準に縦横比が合うようにheightを計算している。

Primitiveを使って画像を変換する

Featured Imageとか言いながら、ただ写真を置くだけなのも何だなあとか思い、Primitiveを使用して、上に表示されている画像を変換してみた。Primitiveは画像を幾何学的なPrimitive(線とか丸、三角、四角)の集まりに変換してくれる。試行錯誤した結果を貼り付けていく。画像の下に変換するときに使用したオプションを添付してある。

Featured Image を設置する

記事のタイトル下によくあるFeatured Imageを設置してみようと思い立って、Unsplashから良い感じの画像をダウンロードして入れてみた。ちょっと大きい気もするけどまあ良いか。ページサイズ的には特に内容と関係ない画像を入れることのメリットはないけど、、しばらくはそのまま使ってみようと思う。

でも大きな画像をそのまま使うのはファイルサイズ的に大きすぎるので、リサイズしたい。できれば各端末に適したサイズにしておきたい… と、なんかいろいろ思ってしまい、最終的にUnsplashのサイトからダウンロードしたデータを個人的に使いたい大きさにリサイズするサービスを用意してみた。convert-a-image-to-responsive-imagesに公開している(ES2015をターゲットにしているので、IE11では動かない)。ただの思いつきに思ったより時間をかけてしまった。最初はAWS Lambdaで画像をリサイズするつもりだったが、リサイズに使っているSharpの扱いが少し難しく、メモリ容量のところでエラーになってしまった(これを解決する方法はありそうなのだが、やってる時間がなくなったので、しばし保留)。いずれにせよ最終的にはWEBサービスとして公開したいなと思っている。週末に時間があれば。

古い記事をインポートする

ブログの古い記事なんてほとんど顧みることはない。ほとんどの記事が「以前は役に立ったかもしれないけど、すでに役には立たない」コードの端切れのようなもので古い記事なんてそのまま放置していつの日かインターネットから姿を消すくらいでもいいかなあとか思っていた。

のだが、数は少ないけどまだ誰かの役に立つかもしれないものもたぶんあるだろうし、過去の時点で自分が何を書いていたのか振り返ることもあるかもしれない(今まで一度もなかったけど)と思い直し、頑張ってインポートをしてみることにした。

新年の抱負を考える

今年は何をするかについて簡単なメモをとっておこうと思う。全部はできないとは思うけど、いくつかは達成したい。

あとブログの更新をできるだけ続ける

HTMLの構造を再確認する

久しくHTML要素について振り返っていなかったので、このタイミングで一度主要な構造についてのHTML要素について振り返ってみようと思う。(TL;DR:適切な見出し要素が大事。あとはおまけ)

Hello Hexo

Gatsby はなかなかに高機能で素晴らしく、React、GraphQL、PWAなど技術的なプレイグラウンドとしても魅力的だったのだけど、結局Hexoにすることにした。

Gatsby は高機能ゆえにたとえばデザインを少し変えたいというときに、Typography の実装上でどう変更するかを調べる必要があったり、react-responsive-grid とかバンドルされてるReact Componentがどんな実装になっているかを確認したりとか、とにかく面倒くさい。この最初のラーニングカーブを乗り切ってしまえば便利なのかもしれないけど、メモ書きサイトを作るのにあまり時間をかけたくない(でもデザインは調整したい)という目的には、どうもオーバースペック感があった。あとpublicに生成されるファイルが変に多くて把握しにくいし、LightHouseのPerformanceのスコアも70前後(十分だけど)なのが少し気になった。

Gatsbyでスタティックサイトを作成する

更新しなくなったブログをリニューアルしようと思って、Gatsby で構築しようと思い立って、今作成してみている。

Gatsbyは「Blazing-fast static site generator for React」ということで、Reactベースのスタティックサイトジェネレータらしいのだけど、実のところまだよくわかっていない。Getting Started のドキュメントをみて、gatsby-starter-blog のstarterをGithub pages で公開しているだけなのだ。

Bitcodeを使ったアプリがCrashlyticsでmissing dSYMsになる

Xcodeでpublishした内部テスター向けのビルドで、Crashlyticsへクラッシュレポートが届かない。「missing dSYM」というエラーが出てるので、dSYMの問題だろうというところまでわかるけど、CrashlyticsのDocumentなどを読んでもわからない。Crashlyticsのmissing dSYMの画面に出てるUUIDを検索しても見つからない…

123434