Original article:https://dev.to/alvaromontoro/introducing-comicss-1amh
以下はCSS大好きエンジニアAlvaro Montoro( Twitter / GitHub / Youtube / dev.to / Webサイト )による記事、Introducing comiCSSの日本語訳です。
ざっくり紹介すると、CSSに関するジョークをCSSで作った画像で表現するWebコミックのサイトを作ったよ、という紹介記事です。
Introducing comiCSS
数週間前、私はComiCSSという小さなWebサイトをリリースしました。
HTMLとCSSで作られた、Webコミックのコレクションです。
周知のとおり、私はCSSで絵を描くのが大好きです。
これが心を落ち着けてくれるのです。
CSSのエキスパートであるとまでは言いませんが、平均以上には知っているだろうと思います。
この記事では、どのようにcomiCSSが誕生したか、そして、ただのデモで終わるつもりだったこのサイトがどのように成長していったのかを語ろうと思います。
ドメイン名を考えたりと背中を押してくれたTemani Afifに感謝します。
The webcomic
紙に絵を描くことは苦手なのですが、同時に楽しいことでもありました。
テキサス大学オースティン校の機関紙、The Daily Texanに一年間コミックを連載していたこともあるほどです。
同じようにCSSも大好きです。
私はこの言語を心底楽しんでおり、そしてその可能性も信じていますが、しかしこれは他の多くの開発者とは相容れない感覚のようです。
何故なら、それはプログラミング言語ではないから、だそうです。
しかし、プログラミング言語であろうがなかろうが、CSSは美しく、強力な言語であることは間違いありません。
CSSを題材にしたコミックを描き、そしてそれをHTMLとCSSでコーディングする。
ふたつの趣味がひとつに合体するのは時間の問題にすぎませんでした。
最初に作ったものはSVGとCSSの組み合わせで、単純な白黒のキャラクターに、CSSのとても笑えないところを指摘させるだけのものでした。
 |
|---|
| このシンプルなコミックが全ての始まり。 |
でも、これは卑怯だったと思います。
CSSでCSSのコミックを描くのであれば、全てがCSSであるべきだったからです。
SVGを使うことで異なる技術の利点を活用することができるという利点はありましたが、CSSにも描画やデザインを得意とするプロパティは多々あります。
ですので、私はこれをフルにCSSで書き替えることにしました。
なにせオリジナルのこのキャラはシンプルでかっこいいので、CSSのみのバージョンも早く作りたかったですからね。
最初のコミックを世に出した後、私はカートゥーンも手掛けるようになりました。
カートゥーンはわかりやすく直感的で、四角くない(文字通り)のです。
ただ、これはCSSで描かれてい入ますが、CSSについては描かれていないので、私の趣旨とは外れます。
なのでCSSでCSSを描くという元の位置に戻ってきてしまいました。
といっても、今後も時にはカートゥーンを公開していくつもりです。
 |
|---|
| このバレンタインデーのカートゥーンは、Red Bubbleから購入できます。 |
CSSにこだわるリスクも多々あります。
・言語に限定して面白いところを見つけることは、必ずしも容易ではない。
・ジョークのポイントを理解できない人も多いと思われる。
・コミックの中でプロパティや値を描くこと自体が複雑になることが多々ある。
しかし、それ自体が課題になります。
また、コミックは必ずしも面白くなければならないわけではありません。
勉強になることだったり、紹介だったり、考えさせられることだってかまいません。
私のコミックがそのようなものになれるのであれば、それで満足です。
 |
|---|
| border-radiusは最大8値を持つことを知ってますか？ |
私の絵は、お絵描きアプリで描いた絵をCSSにエクスポートしたりするのではなく、全て手作業で書いており、より職人的な作業です。
たまに面倒になりますけど。
もし、私がどのようにコミックやカートゥーンをコーディングしているのか気になるのであれば、よかったらYoutubeチャンネルのタイムラプスや生放送をチェックしてみてください。
Technology Stack and Website
大掛かりなフレームワークや複雑な構成にはしたくありませんでした。
逆に全てをいちからデザインしてコーディングするのも嫌でした。
そこで、HTMLに直接記載するタイプのCSSである、Almond.CSSを使うことにしました。
classもなければidもない、BEMもない、純粋なHTMLとCSSだけです。
もちろん後からスタイルを追加していくことにはなりましたが、最初から形があると楽になります。
バックエンドについては、私は本当に何もいらないと思っていました。
自分のWebサイトや他のプロジェクトでは、PHP・Perl・MySQLなど色々なものを使っています。
しかし、今回の計画はシンプルなものであり、HTMLとCSS、あとほんの少しのJavaScriptだけで完結するつもりでした。
この崇高なアイデアは、後に幾つかの問題を引き起こすことになったわけですが。
静的なサイトにすることで、広告などを加える必要もなく無料で様々なサービスにホスティングすることが可能になりました。
このような小さなプロダクトでDigital Oceanを使ったことがありますが、それは便利なものでした。
しかし今回はさらに小さく、それにソースコードは既にGitHubにあるので、それならばGitHub Pagesを使うのが理にかなっているでしょう。
リポジトリ設定から有効化するだけで、すぐに使えるようになりました。
サイトの構成は、複数のWebコミックサイトxkcd・SMBC・Buttersafe・Dinosaur Comicsなどをチェックして共通点を探りました。
いずれもシンプルで、似たような構造の作りとなっています。
・トップページのバナーとメニュー、ストアやスポンサーへのリンク付き
・ランディングページには最新のコミック
・前後、最初と最後へ移動するナビゲーション
・ランダム表示ボタン
・画像の固有ページへのリンク
・作者の他サイトへのインク
・RSSフィード
・アーカイブ、ブログ、aboutへのリンク
右に倣いました。
そして、ここから問題にぶち当たりました。
静的ページを選んだことにより、テンプレートやルーティングの選択肢が狭まったのです。
コードを片端からコピペする羽目になり、またナビゲーションはJavaScriptを使わないでおこうと思っていたのに、最終的にJavaScriptが必要になってしまいました。
元々大掛かりなものを作ろうと考えていたわけではありませんが、最終的にはアクセシブルでレスポンシブなサイトを作ることができました。
このクリーンでシンプルな見た目も気に入っています。
とはいえ、見た目よりもコンテンツのほうにこだわりたいところです。
いずれはデータベースで管理し、ページを自動生成してくれるバックエンドプラットフォームに移行することになると思います。
Is there money in CSS?
ComiCSSはまた、ひとつの実験でもあります。
昔ながらの静的なサイトがどの程度の収益を上げられるか、収支が合うか、あるいは利益にすることができるかの試行です。
サイトの総コストが年間12ドルなので、ハードルは比較的低いでしょう。
これはcomicss.artドメイン料金であり、そしてそれ以外のコストは一切発生していません。
開発費は別として。
・ライセンス費：なし
・バージョン管理：GitHub
・ホスティング：GitHub Pages
・SSL：GitHub Pages
この経済目標を達成するため、私は3点の作業を行いました。
・Webマネタイズを追加した
・Brave Creatorsリストに追加した
・Patreonにプロフィールを作成した
これらは全て"non-invasive"な収益化であり、すなわちサイトの訪問者は迷惑な広告やポップアップを見せられることはありません。
しかしあなたが望むなら、Patreonからチップを送ることができます。
この最後の方法は他のWebコミックサイトがみんな採用しているので採用しましたが、正直あまり好きではありません。
むしろこれは、自分のモチベーションを上げるためのものだと考えています。
驚いたことに、一週間目にWebマネタイズを使って貢献してくれた人が現れました。
 |
|---|
| 今年の目標まであと11.98ドル |
短期的にはまだ考えていませんが、いずれ副収入減としてRed Bubbleストアにアニメーションを追加するかもしれません。
しかし、私はこのサイトに経済的な恩恵を期待しているわけではありません。
私は自分の楽しみのため、そしてそれが可能であることを示すために開発しているのであり、それだけが私の必要とする報酬です。
収支が合うとよいのですが😂
The future
サイトはまだ始まったばかりですが、ここ数週間は毎週新しいコミックを追加しており、当面はこのペースを継続する予定です。
いまのところ、金曜日に新しいコミックを追加し、月曜日にTwitterで古いコミックを共有しています。
数か月分のストックはあるので、その間にどんどん新しいアイデアを思いついていければと思います。
先に言ったように、私はCSSで絵を描くと心が落ち着くので、たとえそれがしょうもない内容だったとしても、ComiCSSのコレクションは増え続けていくはずです。
あと、元々のコンセプトも考え直してみたおt頃です。
面白いかどうかは別として、もっとシンプルに、そして考えさせられるように。
コメント欄
「楽しい企画ありがとう！」
「CSSの魔術師だ」
「Patreonのかわりにko-fiいよ。手数料0で余計な情報も取られない。」
「素晴らしい！こういう人はもっと利益を得られるようにすべき」
「コメント欄ほしい」「静的なので難しいけど、disqusみたいなのを考えてみる」
「より新しい項目が表示されるかと思って＞を押したけど変わらなかった。最新だったら表示しないとかしたほうがいいかも」「最初と最後にいるときは表示しないようにしたよ」
「Daily Texan卒業生が活躍してる姿を見るのはうれしいね」(Daily Texan関係者)
感想
Webサイトを表示したときに出てくる画像は普通にただの画像なのでなんだこれってなりますが、下のほうにあるCode URLというリンクをクリックすると原型が見れます。
本当に全てがCSSで描かれているので驚きですね。
しかもツールを使わず手書き。
おまけにCSSを描くことが精神の安定に寄与するという。
CSSセラピーは今後普及するに間違いありませんね。
私はCSSを描くとストレスが溜まるのでどうにも共感はできないのですが。
Webは今のところクリエイターに収益が渡る仕組みになっていないので、こういう人たちがもっと容易に生きられるようになるといいですね。