存在しない技術書が作れるサイトをReact初心者が作ってみた

目次

  1. 背景
  2. 作ったもの
  3. 制作時のポイント
    1. アイデア出し
    2. 気軽に使える
    3. 既存サイトの改善
    4. HTML DOMを画像としてダウンロードする
  4. 自分で使ってみて
  5. 関連記事

背景

こんにちは。 かりんとうマニア(@karintozuki)です。

Reactを業務で使うことになり、チュートリアルを一通り終えました。
業務以外でも何か実際にプロジェクトを始めてみたいと思っていました。

そんな中、オライリーの技術書を見る機会がありました。

エンジニアだったら一度は見たことがあるかと思います。
独特な動物のイラストとカラーリングで一目見ただけで、あ、例の技術書だ!と分かります。

このフォーマットで文字だけ差し替えられたら面白いのでは?と思い、
存在しない技術書を作れるサイトを作ってみることにました。

作ったもの

こちらです。

https://karintomania.github.io/tech-book-gen/

使い方は説明するまでもないですが、
各フィールドに文字を入れるとプレビューに反映されます。
満足いくものがプレビューで確認できたら、ダウンロードボタンから画像をダウンロードすることができます。

こんな感じの画像が作れます。

制作時のポイント

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

ライブラリ万々歳。

自分で使ってみて

適当なことを書いて、本にするのが楽しいですね。

実用的な使い方としては、このブログ記事のように
ブログのアイキャッチなんかにも良いんじゃないでしょうか。

個人的に気に入っている動物は「かに」です。
なんかおさまりがいいので。

よろしければ皆様も遊んでみてください。

それでは今日はこの辺で。

関連記事

こちらの記事もおすすめです。

哲学駆動開発で起業・個人開発のアイデアを出す方法