骨が折れました(慣用句ではない)

折れました

秋の長雨が止み、ようやく覗いた秋晴れの日、僕は延滞していた本を返すため自転車に乗り図書館へ向かっていました。

コケました。自転車専用レーンから図書館の駐輪場に入るため歩道に上がろうとしたところ、上がりきれなかった前輪が縁石沿いにズズーとなりアーと思っているうちにコケました。路面は完全に乾いていたし、歩行者も自動車もいませんでした。住環境破壊ビームのせいで最近はすこし寝不足気味ですが、それでも体調はいつもどおりやや悪いくらいでした。完全なる自爆です。アー。

しかし僕もまだ若い[要検証]のでそれなりに反射神経があります。顔面からの衝突を避けるべく咄嗟に両手を出し、地面に手を突き、倒れる体を支えた結果、

f:id:sunoho:20200930195229p:plain

腕がバキバキになりました。本は返しました。かなしい。

腕が折れてわかったこと

活動
生活
  • なにかを身につける動作全般がむずかしい
    • メガネ
    • ヘッドホン
    • 耳栓
    • 靴下
    • パンツ
    • マスク
  • 鼻がかめない
  • 包丁が使えない
    • 使えないことはないけど危ないので
  • 納豆が混ぜられない
  • マーガリンが塗れない
  • 手をこすれないので石鹸が泡立たない
    • 泡タイプのハンドソープを買った
    • しかし手の甲は洗えない
  • 髪が洗えない
    • 坊主にした
  • ゴミ捨ての往復数が倍増
  • 角ハンガーに洗濯物が吊るせない
  • アマゾンの開封線が付いているタイプのダンボールがめちゃくちゃ開けにくい
外出
  • 靴紐を結ぶのがむずかしい
  • 自転車に乗れない
    • 乗れないことはないけど危ないので
    • 骨折してから毎日一万歩以上あるいており健康が急加速している
  • 立ち小便器が使いにくい
    • より具体的にはバットが振れない
    • 外出先の便座にはあまり座りたくないので
  • QRコード決済の便利さを別の角度から実感
    • 腕を吊っている人間にレシート小銭重し攻撃はやめてください
  • 手から出血していても入店のたび消毒を求められる世界観きつい
治療
  • 固定する以外にやることなし
    • 安静にして骨の再生を待つ
    • 超音波骨折治療器使いたい
      • 今回の症状では保険適用外だそうです
      • そもそも通っている病院に装置がない
  • ギプスのなかに虫刺されが封印されると痛みより痒みが勝る
  • 医者に労災になる可能性がないか確認されたとき無職ですと答えてしまったが労災を否定するだけでよかったような気がする
  • 整形外科は老人の集会所
  • 白い三角巾で腕を吊っているとわざとぶつかってくるクソ野郎がいる
    • 黒いアームホルダーにしたらぶつかられなくなった

骨折から一週間でこんな感じなので今後もっといろいろ出てくる気がします。骨折の先輩、これは知っておいた方が良いぞということがありましたらブクマかなんかで教えてください。

プロフィールサイトsunoho.comをリニューアルしました

f:id:sunoho:20200930192457p:plain
プロフィールサイトとかパーソナルサイトとかポートフォリオとかホームページとかよばれるあれをリニューアルしました。
sunoho.com

やりたかったこと

必要な情報にさっとアクセスできること以上にウェブサイトに重要なことはなく、この世のすべてのウェブサイトは阿部寛のホームページになるべきと思っているタイプのインターネットおじさんなのですが、令和にもなってそんなことばかり言っててもな…みたいな気持ちもあり、それならと前々から気になっていた CSS アニメーションに挑戦してみようと思ったのが発端でした。

加えて、リニューアル前がモバイルファーストで縦長ページな作りだったので揺り戻しでパソコンファースト(?)でワンページな作りにしました。

やったこと

CSS アニメーション

動きはすべて CSS で作り、タイミングの調整を JavaScript でやっています。本当は JavaScript を一切使わないで仕上げたかったのですが、どうせアクセス解析入れるじゃんと気がつきどうでもよくなりました。

インターネットおじさんはデザインのための不要なマークアップにも否定的な立場だったのですが、令和なので空 <div> 100 連発とかやってます。レンダリングが遅くなるかと思ったけどそんなこともなく。令和すごい。

CSS アニメーションをやっていて痛感したのは動画的な見せ方の知識が僕にまるでないということで、ウェブ制作にも動画の知識が必要な時代か~と思いました。来年はバーチャルユーチューバーになります。

Pug & SaSS

デザインを決めた時点で空 <div> 100 連発する必要がありそうだったので Pug を使ってみたものの、空 <div> 100 連発以外の部分であまりメリットを感じられず途中で放棄しました。

Pug に合わせて Sass (SCSS) も初めて使いました。セレクタを最短距離で引けるよう記述することで少しでも高速に…みたいな時代のインターネットおじさんにはネストから生み出される無駄に隔世の感を覚えます。どうせコンパイルするならもっと賢くやってほしい。mixin が使えるのは便利でした。

アニメーション png

キラッと光るバナーを CSS で実装したところやたら重たくなってしまったのでアニメーション png にしました。Safari がサポートして、LINE スタンプが採用して、いよいよ Chrome がサポートして、もうええんちゃうか。

しかし圧縮 png から生成した apng より無圧縮 png から生成した apng の方が軽くなるなどとてもむずかしいです。調べてもよくわかりませんでした。

CDN

index.html にすべてのコンテンツを詰め込んだためロードが激重になってしまい Cloudflare に泣きついてみました。思ったほど速くはなりませんでしたが 5G なのできっと大丈夫。

年に二、三回しか更新しないサイトなので次回の更新時にキャッシュの更新を忘れて反映されない~って泣いてる自分が見えます。

その他
  • Noto Sans JP を正式版にしたらめっちゃ速くなった
  • ボケっとしてたら CSS ファイル単体で 500 KB くらいになった
    • なんやかんやで半分まで減らしたけど十分でかい
    • 5G なので大丈夫
  • iOS 13 からスクロールバーをいじる系の CSS が効かなくなってた
    • それどころかスクロールバーが表示されない
  • スプラッシュ画面のアニメーションにウェイトを入れたせいで Google PageSpeed Insights のスコアが真っ赤になった
    • なにが SEO だ知るかバカ

まだへいき!のロゴをリニューアルしました

まだへいき!のロゴをリニューアルしました。シンボルマークがないタイプのロゴです。

f:id:sunoho:20200727150159p:plain

旧ロゴの思い出

もともと「まだへいき!」はブログの名前でしたが、2013 年頃から同人サークルの名前としても使用するようになりました。申し込み締切り間近になってサークル名がないことに気がつき安易に転用したのが諸悪の根源です。

f:id:sunoho:20200727143304p:plain
サークルカットにも使われている

旧ロゴは 10 年以上前にフォトショップで作った解像度 72 dpi しかないもので、とても印刷に耐えられるようなものではなかったのですが、コミケで面と向かって「このロゴ良いですね」と言われたことなどに甘え今日まで使い続けてきました。(ありがとうございました)

リニューアル作業

方向性を決める

まずは大きく方向性を決めました。

  • ウェブと印刷の両方で使えるもの
  • 日常系アニメのタイトルっぽく

前述のとおり印刷にも耐えられるものを作るというのが大前提です。

また、「まだへいき!」はひらがなと感嘆符だけで構成されていてかわいい系の雰囲気があるので日常系アニメっぽくとしました。

いくつか作ってみる

既存フォントを改造してみると「へ」と「い」の連続を間延びさせないよう調整するのが意外に難しく、フィーリングでやった方が良さそうだったので手書きでいくことにしました。手書きの方がかわいいっぽいし(?)。

画像は消えていますが 2018 年に作業中の写真を上げて匂わせツイートをしている形跡があります。ここから数えても 2 年は試行錯誤してるんですねえ。

f:id:sunoho:20200727144943p:plain
あまりにも恥ずかしいのでモザイクを…

また、並行してシンボルマークもいくつか作りました。結局、シンボルマークは使わないことにしたので全部ボツになりましたが…。

f:id:sunoho:20200727151204p:plain
最終候補だった3つ
完成

うまく書けたものをベクター化して色を付けてブラウザで表示してみると微妙…みたいなのを繰り返し、ようやく納得いくロゴになりました。難産だったぶん感慨もひとしおです。

愛着を持って使っていきたいですね。