目次
背景
こんにちは。 かりんとうマニア(@karintozuki)です。
Reactを業務で使うことになり、チュートリアルを一通り終えました。
業務以外でも何か実際にプロジェクトを始めてみたいと思っていました。
そんな中、オライリーの技術書を見る機会がありました。
エンジニアだったら一度は見たことがあるかと思います。
独特な動物のイラストとカラーリングで一目見ただけで、あ、例の技術書だ！と分かります。
このフォーマットで文字だけ差し替えられたら面白いのでは？と思い、
存在しない技術書を作れるサイトを作ってみることにました。
作ったもの
こちらです。
使い方は説明するまでもないですが、
各フィールドに文字を入れるとプレビューに反映されます。
満足いくものがプレビューで確認できたら、ダウンロードボタンから画像をダウンロードすることができます。
こんな感じの画像が作れます。
制作時のポイント
ReactでWebアプリを作るのは初めてだったので、
ポイントになる部分を自分用のメモとして残しておきます。
アイデア出し
ジブリ字幕メーカー(https://konogi-tools.com/ghibli/)で
エンジニアの人が大喜利をしているのをよく見かけたので、
何かユーザーが作ってSNSでシェアできるものにしたいなと思い、
エンジニアがなじみの深そうなオライリー本をテーマにしてみました。
気軽に使える
登録とかめんどくさいことは無しにして、サクッとできることを大事にしました。
今まで業務ではPHPなどを使っていたので、ゴリゴリ動的に動くサイトを作ったことはなかったのですが、
今回はテキストを入力するそばからプレビューが更新されるなど、
リアルタイムで画面が変わるサイトだったので、作っていて楽しかったです。
まあ、jQueryとかでも書けるんでしょうが、DOMの変更を検知してこっちのDOMを変えて、、、
みたいな行ったり来たりが少なく、より直感的にコードが書けた印象でした。
既存サイトの改善
実は同じようなことができるサイトは既にあります。
https://dev.to/rly
ただ、英語しか対応していない（日本語が表示されない）ことと、
入力内容を変えるたびに更新ボタンをクリックしてしばらく待たないといけなかったため、
使いづらい印象だったのでもっとリアルタイムなサイトにするよう心掛けました。
HTML DOMを画像としてダウンロードする
HTML上でプレビューをつくるのは簡単でしたが、
そのHTMLを画像としてダウンロードする処理は本当にできるか不安でした。
ただ、普通にJSのライブラリがあり、特に悩むことなく実装できました。
https://www.npmjs.com/package/html-to-image
ライブラリ万々歳。
自分で使ってみて
適当なことを書いて、本にするのが楽しいですね。
実用的な使い方としては、このブログ記事のように
ブログのアイキャッチなんかにも良いんじゃないでしょうか。
個人的に気に入っている動物は「かに」です。
なんかおさまりがいいので。
よろしければ皆様も遊んでみてください。
それでは今日はこの辺で。
関連記事
こちらの記事もおすすめです。
PR
あなたの会社はあなたの技術を評価してくれていますか？
技術力を高めようと頑張っているのに、
技術が評価されないような会社にいたらそれは良い環境なのでしょうか？
エンジニアとして技術を高めたいのなら環境を選ぶことも大事です。
レバテックキャリア
エンジニアとして働いていて実務経験があるなら、
求人数の充実具合からレバテックキャリアがおすすめです。
IT転職ではデファクト・スタンダードですね。
▼レバテック キャリア 登録はこちら▼
Tech Clips
Tech Clipsは年収500万以上＆自社サービスを持った会社に特化した求人サイトです。
首都圏限定になってはしまいますが、
収入を増やしたい、自社サービスを持った企業への転職をしたい人におすすめです。
