Blog

ver1000000.comをちゃんと活用したいのでアプデした

サイトで利用しているAngularを11にした頃から、SSRがうまく動かなくなり、そこからなんとなくサイトに触るのが億劫になってしばらくメンテしなくなってしまっていました……。

が、このたび重い腰を上げ、 https://zenn.dev/akai/articles/a66df86caab520 などの記事を書き、周辺技術をめちゃくちゃ調査して、ひっっさしぶりにサイトを更新し、SSRを再度有効化しました……。

@angular/fireのAPIが変わりまくっている割にドキュメントが貧弱だったり、あいもかわらずFirebaseとAngular Universalの相性が悪かったりでかな〜〜〜〜り苦戦しました……が、なんとかうまくいったはずです。

というわけで、この記事はSSRがうまく行ったかどうかを確かめるための記事というわけですね。 (Twitter Cardがいい感じに表示されてればいいな)

今回気づいたのですが、昨今のイーロンマスク騒動のためか、Twitter Card Validatorちゃん死んじゃってましたね……。


しかし…… SSRだと初回アクセスのローディング画面のアニメーションがめちゃくちゃ違和感ある…… これかなり厳しいですねぇ……。

ハイドレーションをうまくやったらなんとかなるのだろうか…… SSRを使ってる限り苦しみからは逃れられないので、GitHub Actionsでprerenderとか使ってSSGみたいなことしようかしら……。

とりあえず、改修の重いところを直したんで、もう少しver1000000.comの方も触っていけるようになったらよいですね。

2021年

あけましておめでとうございます!!!!!!!!!!!!!!!

去年、色々ブログを書くタイミングはあったのですが、億劫で更新できませんでした。

11月に東京に引っ越しをし、仕事も本腰が入れられるようになり、自分の時間もちゃんとつくれるようになってきました。
Covid19の影響もあり、勢力的に活動するのが難しい昨今ですが、今年からは徐々にアウトプットを増やしていきたいですね。

今年も、これからも末永くよろしくお願いいたします。

en

円グラフのスケジュール管理ツール。

  • 「X曜日はこの仕事をn時間やってY曜日はこの仕事をこの時間にやる!」みたいなのを簡単に設定したいというモチベーション
  • 通知出したいのでPWAがいいな
  • 円グラフ ≒ 時計
  • スケジュールのインポート/エクスポートは、、、URLでいい?

RaspberryPiでクラスタコンピューティングしてマイクラサーバー立ててみたい

先日、いろいろ試してみて普段遣いのArchLinuxでマイクラの鯖立てができたので、
サーバーとして「常時稼働するマイクラサーバー」にちょっと興味がでてきました。

しかし常時稼働は電気代コストとかサーバーの設置場所とかいろいろコストがかかります。

そこで奥さんRaspberryPiです!

とりあえず一台、普通にマイクラサーバー立ててみて、うまく行くようだったら
クラスタコンピューティングの方法を調べてみて、 ネットワーク越しで5人くらいまでが
遊べるサーバーにならないかなぁ、と妄想してみたり。

シンプルメモ

タイトルと本文を書けるだけのWebアプリを思いついた。

  • サーバーにデータストアを持たない
    • GitHub Pagesで管理コスト無しでページ公開!
    • WPAだったらindexedDBとか??
  • データの保持はLocalStorage / URL
    • LocalStorageとURLの文章で、整合性を取る(大抵はURL勝ちかな
  • URLにデータが乗る都合上、ちゃんと免責の文章とか書いておく
  • マネタイズは広告ではなくネイティブアプリ時にストアでカンパウェアみたいなんにする

ブログの仕組みを変えたい

当ブログの記事はFirestoreを利用して管理されています。
ナウいし勉強がてら使ってみたのですが、
いかんせん検索やページングの実装がしづらい……。

課金体系も従量課金なので気持ち的にハラハラするし、
他にいい感じのバックボーンがないかなぁとぼんやり考えていました。

そこで思いついたのが GitHubのIssues(もしくはGist) です。

コイツ、私がブログに欲しい一通りの機能を揃えてるんですよね。
APIを調査したらいい感じにデータベースみたいに使えんかな〜と妄想してみたり……。

実際にGitHubのIssuesをブログとしている人は何人か見たことありますし、
面白い試みかもな、と思うのですが、
Issuesをソースにしてそれをフロントエンドで整形してるとかいうのは聞いたことないのですよね。

難しい気もしますが、FirebaseFunctionsと組み合わせたらいい感じに出来ないかな、、、。

キミをもっと知りたいな

Twitterで他人のことを知りたくてその人のプロフィールページを覗くと
自身のツイートが全く見当たらず、RTばかりで埋め尽くされていたという経験はありませんか?

私はままあります。
公式クライアントやTweetDeckでは、フォロー後にRTをミュートすることはできるのですが、
RTを省いた該当ユーザーのツイート一覧を取得することはできません。

これをモチベーションに、「対象を気軽に理解する」ことを目的としたプログラムを作りたいなーという妄想メモです。


  • TwitterAPI
    • 検索APIだけでいける気がするけど……最近は検索API使うのにもなんか審査いるんだよね?たしか
    • まぁ鍵アカウントの取得とかあるし必要やろなぁ
  • Angular
  • RxJSで間引く − 目的を満たせる「対象ユーザを調査する機能豊富なツール」はたくさんあるので、UX勝負 − 広告によるマネタイズ

アカミン

タカミン絵チャしてェ〜〜 ケドなんかjavaブラウザで動かすのめんどくせ〜〜〜!
みたいになったので、マネタイズまで見据えてhtml5で動く絵チャ作りたくなりました。

妄想メモしときます。

  • canvasを使う
  • PixiJS/CreateJS どっち?
  • Angularは、、、出る幕なし?
  • 当たり前だけどTSで書きたい
  • トランスパイルとか開発環境とか、、今までAngularにおんぶにだっこだったから案外ようしらんな
  • 絵のリアルタイム通信はFirebaseかな
  • RxJSでバシバシ間引きまくる
  • あれ???Angular使ったほうがいいか?使うか
  • ルーティングが走らないとなんとなくAngularの出番無いような気がするけどルーティング自体がそもそもオプトイン機能だしそんなのはおかしかった
  • Angular+Canvas(PixiJS/CreateJS)+Firebaseという感じで攻めていこう
  • マネタイズは普通にアドセンス
    • Firebase分損しないようになるのが目的
  • 機能はタカミンを見習う ブラウザだけでサっと動くという所でアドを取っていく
  • まずはCanvasライブラリ選定して、マウスで線が引けるようになるところからかな

部屋とワイシャツとAngularUniversalとFirebaseと私

当サイトVer.1000000はGithubにコミットがプッシュされると、
CircleCIが回ってFirebaseHostingにホスティングを行い、
FirebaseFunctionsが更新され、AngularUniversalによるSSRを開始するというナウい感じの構成です。

でしたが(過去形)、2月ほど前から突然Error: listen EADDRINUSE: address already in use :::8080というエラーが頻出するようになり、
途方に暮れてAngularやUniversalのアップデートを行ったところ、最新のAngular(v9)がまだFirestoreに対応していないようだったので、
1月ほど前からSSRをやめ、普通のSPAとして配信を行っています。

Angular Universalについて語るスレ

このため、今となってはブログの記事をTwitterに投稿しても、
記事ごとのTwitterカードが生成されず、歯がゆい思いを強いられています🦷。

現在、Ver.1000000のパッケージをアップデートし、@angular/fireに6.0-rc.1を適用してみましたが、
どうやらまだFirestoreを含めたSSRは行えないようです。

しかし、rc以前はコンパイルすら通らないみたいな状態だった気がするので、何かしら進展はしているようですね。

Github見るとjamesdaniels氏もコミットを続けているようなので、近日にはなんとかなるでしょうか……。

もっとブログ書きたい

私に怖いものはない。

ただ一つ、ブログの更新が滞ることを除いてな……。


最後のブログ更新から年が明けてさらに1月も経ってしまった……。

なんでかというと、ブログに対して気張りすぎていたのだ私は。 次の箇条書きを読んでくれ。

  • フリーランスになったから未来の請負先様が読むかもしれない
  • ブログエディターがクソみたいな機能で、ブログを書く気にならない
  • Twitterで「書きました(キリ」ってしたい
  • まだRSSとか実装してないから記事公開しても流入が増えない
  • まだコメントとか実装してないから記事公開しても反応がもらえない
  • まだSEO関連適当だから記事公開してもGoogle様にインデックスされない(多分

ヘタなことは書けないのでなにか「アピールできるいい感じのネタ」だけを書こうと考えてしまう。

で、いい感じのネタが入ってきても、ブログエディターが手抜きの状態で、
気持ちよく文章を書くことができない。 みんなみてくれこのエディターを

ブログエディター

どうこれ!? こんなんで文章書ける?? 書きたい?? 書けんやろ!!!

しかもこれ、起動するのにローカルでng serveしてコンポーネントをng.probeでインスタンス化しなくちゃいけないの。 笑ってくれ……。

https://ver1000000.com はまだまだ課題がたくさんあるので、記事の投稿画面についてはとにかく手抜きをしてて、動線すら無いのである。

そういう状況があってなかなか打破できずにブログを書けないでいた。


でも、書かなくちゃいけないと私は思うんだよね。 アウトプットしないと停滞するし改善しない。

ツイッターよりちょっと整形されたくらいの文でいいから、数多く書いていきたいと思う。

ジャンルとか文体とかの乱れもなんでもよくて、とにかく行動しなくちゃな、と。

だからこの記事は、これから生まれてくれるだろうクソ文章への免罪符。

サイトの話 - 《アニメーション》で感じるSVG

Ver.1000000では結構頑張ってSVGアニメーションの実装を行いました。

  • 題文字のアウトライン
  • 波紋による背景スプライトの切り替え
  • エージェント(朱猪)
  • ヘッダーの波

本記事ではアニメーションのデザインについて、私が表現するにあたって考えたことをまとめます。


題文字のアウトライン

これはロゴやh1のタイトルで利用している「文字のフチを線が走る」アニメーションのことです。
おしゃれな感マシマシですが、やることはstroke-dasharrayの値をcssで変動させてやるだけなので非常にお手軽なんですよね。

……しかし、ページタイトル(h1)のアウトラインアニメーションには、私流の小技を効かせてあります。

SVG単体でのアニメーションだと、どうしても状態変化に対して動的なアプローチを取ることが難しくなるため、
TextToSvgComponentとして、文字列をSVG#Text化するAngularコンポーネントを作成いたしました。

これにより、親スタイルの継承やユーザーテーマの反映、画面サイズごとによる微調整などが簡単に行えるようになっております。 いいね!

エージェント(朱猪)

画面を跳ね回っている朱猪には、たくさんの機能と気持ちをもたせています。

設計当初から朱猪を動き回らせたいという考えはあり、実装しながらめちゃくちゃ試しました。

ゲーミフィケーション入れたいなぁという思いから、カーソルキーで操作できるようにしたり、
動物タワーバトルってすげぇよなぁという思いから、物理演算エンジンを導入してドラッグアンドドロップでぶん投げられるようにしてみたり……。


アイディアを実装しては削除し、実装しては削除し……。
最終的にはフキダシUIでユーザーをナビゲートするエージェントというカタチに落ち着きました。

イルカくん

生物として自由に動き回る挙動を、この形式を取ることで、自然に表現することができるようになりましたね。

ちなみに朱猪のアニメーションはライブラリなどは使わず、
フレームの経過秒と変化量を計算していい感じになるようこだわっています。

しゃべる・跳ねる・つかまる・落ちる・はずむ・消えるアニメーションがあるので、全部見てみてね!

ヘッダーの波

揺らめく波のようなアニメーションは基本的にSin/Cos/Tanでいい感じに計算すると作れるのですが、
その場合jsでコードゴリゴリ書いてイベントループでアニメーションさせる処理を行うことになります。

そこで私は考えました。

「縮れ毛みたいな画像をシームレスに、
なおかついい具合にrotateさせるアニメーションを複数枚重ねたら、
非常に少ない記述量のコードでもユーザーは“波”を感じるようになるのでは?」

と……。

ヘッダーの波の図

……どうですか? 具合よくないですか?

このアニメーションは上記の思考実験どおり、コードから完全に切り離された、1.3kbの小さなSVGの自己完結画像として実現できたので、私は大変満足です。


もともとは、ローディング画面から朱猪が海に落ちてきて、海でたゆたうというストーリーのアニメーションを準備する予定でした。

しかし、 「画面からなるべく文字情報を排除したい」という考えから、
排除した文字情報を朱猪に詰め込むエージェントというアイディアを優先して取り入れたため、
wave.svgの意味合いはほぼにぎやかしということになりました。

今となってはトップページ以外の画面で控えめにロゴの裏を気持ち良さそうにゆらゆらするだけです。

でもこういうさりげないアクセントって、気づいた時になんとなく嬉しいですよね。 だから、消さない!

波紋による背景スプライトの切り替え

広大なWWWの海から私のブログという畳の目より些末などうしようもない情報も逃さないような
Web情報キャッチアップ力の高い皆様ならすでにご存知かと思われますが、
2019年のWebデザイントレンドの一つとして有機的なアニメーションがあります。

そして、SVG+有機的アニメーションと言われて取り入れたくなるのはもちろんGooeyアニメーションですよね。

VC 星のカービィ3 nintendo.co.jp | VC 星のカービィ3 より引用

「トレンドに乗らなきゃ!」の精神からGooeyアニメーションを実装してみたのですが、
これ、めちゃくちゃ処理が重いんですよね。

当初は「グーイで背景をマスクしてっ❤ クリックとかユーザーのインタラクションと協調させたらっ❤ ゼッタイっ キモチイ❤❤!」
と意気込んでいたのですが、
グーイアニメーションは、オブジェクトを大きくすれば大きくするほど、パフォーマンスの低下につながってしまうため、
当サイト現レイアウトとの兼ね合いもあり、
ユーザーに満足なアニメーション体験を提供できないものと判断しました。

というわけで、ここまで書きましたがGooeyは実装しませんでした


しかしこの時思いついた

  • 背景のマスク
  • ユーザーのインタラクションによるアニメーション

は実現したかったので、ページ遷移のクリック時に波紋が広がるようなエフェクトで、
ヘッダーの背景画像をスイッチするアニメーションを実装することにしました。

いや〜 プラットフォーム間での挙動差分を埋めるのにかなり手こずりましたね……。
FirefoxとSafari(Mobile)とChromeをなんどもなんども行き来しました……。 firefoxではSVGのCSSアニメーションがほぼ死んでるんですよね。

この時の背景画像と円マスクの取り扱いにはsvgdotjsを利用しております。

私のイラストをアピールするためも、背景画像にイラストを使うアイディアは利用したかったのですが、
これで自然な切り替えを提供することができたかと思います



アニメーションの実装は非常に楽しいですね!
SVG2で使えるCSSアニメーションがはめちゃくちゃ表現豊かなのですが、
まだまだ勧告候補段階でブラウザの対応はまちまちなようです。
ライブラリでの差分吸収もパーフェクト!って感じではないですしね。

苦労する点も多いのですが、多角的に考えて工夫する必要があってそれはそれで面白いです。 今後もたくさんの表現をしていきたいですね!

より技術的な話については、今後Qiitaとかに別記事で投稿するかもしれません。

Hello World!

こんにちは!

フリーランスエンジニアのAKAIと申します。

当サイト、Ver.1000000リニューアルしました。リニューアルしたいなぁと考えつづけ、早数年……。

時間というものは本当にあっという間に過ぎてしまいますね。

今までは自分のイラストを展示しているだけの同人サイトでしたが、 今後は自身の活動のアウトプットを記録していく、 名刺代わりのポートフォリオサイトとして運営していきますので、応援よろしくお願いいたします😉


4年かかった甲斐があり(?)本サイトのリニューアルにあたって、 昔は実現できなかった以下のようなナウい技術や要素を盛り込むことができました!

  • Angular
  • Firebase
  • SVGによるアニメーション
  • モバイルデバイスのUX

これらの技術がどのように本サイトで利用されているのかは、 こちらのブログの技術カテゴリーに書き連ねていく予定です!

興味のある方はぜひ今後ともご覧いただければ幸いです!!