2018/12/31

ファミコン風CSSフレームワーク「NES.css」をリリースしました

Labels: ,

ファミコン風（8bitライク）なCSSフレームワーク「NES.css」を、2018年12月19日に正式リリースした。開発した経緯や、タイムライン、OSS活動の感想、「そのロゴ、SNESじゃね？」の反論を書こうと思う。


つくったもの


ウェブサイトを懐かしいファミコンテイストにしてくれるCSSフレームワークを開発した。口で説明するより、実際にデモサイトを見ていただいたほうがわかりやすいだろう。

GitHub Trending Developers、RepositoriesでWeekly1位獲得！


タイムライン

  • 9月22日: 8bit.cssを開発（NES.cssの前身）
  • 9月24日: NES.cssアルファ版開発開始
  • 11月15日: Vue.jsコアメンバーのkazuponさんにStarをいただく
    • Starをいただいたときはまだ5つくらい
    • これを期にアジア勢にNES.cssが広がる
  • 11月18日: NES.css ベータ版開発開始
  • 11月27日: Star500達成
  • 11月28日: GitHub Trending Developers/Repositoriesにランクイン
  • 11月29日: Star1,000達成
  • 11月29日: GitHub Trending Developers/Repositoriesで1位獲得
  • 12月6日: オーナーシップを個人からOrganizationに移譲
  • 12月12日: Star 7,777達成
  • 12月19日: NES.css ver1.0.0をリリース


公開したCSSフレームワークがバズりにバズって、なんとGitHubのTrending Developers、RepositoriesでWeekly1位を獲得した。（※ 2018/12/18時点では,
Trending Developers Monthly 7位、Trending Repositories Monthly 2位を獲得した）

さらにGitHubで「css framework language:CSS」で検索すると、なんと4位にランクインしている！

追記: 2019/01/18 8:00
GitHubの公式アカウントにも取り上げられた！


と散々自慢させていただいたので、以降はNES.cssの開発する経緯などを書く。



開発の動機は「CSSがキライ」


フロントエンドエンジニアになって早3年、いまだに思い通りに操れないCSSがキライだった。苦手なことを避けて通れば、そんなに楽なことはない。しかし、CSSができないフロントエンドエンジニアは、もう「フロントエンドエンジニア」ではなく、ただの「JavaScriptおじさん」だ。「JSおじさん」なんて略された日にゃ、ヤバみしか感じない。

とはいえ、キライなことを学ぶのは大人になってもしんどい。

だからCSS学習に「楽しさ」を見出そうと決め、CSS芸人への道を歩むことにした。


CSS芸の練習場所はGitHubに公開しているので、興味があればぜひ見てほしい。
▶ CSS Collection - @bc_rikko

CSS芸を日々練習している過程で、box-shadowを使ってドット絵を描けることを知った。そこでCSSだけでマリオのドット絵アニメーションを描いてツイートしたところ、思いもよらず多くの人にシェアしていただけた。


さらに、その流れでbox-shadowでドット絵を描く方法をまとめた記事を公開したところ、こちらも多くの人にシェアしていただけた。


CSS芸がバズったことで、CSSがキライから苦手にレベルアップした！


次に自分が何が苦手かを考えたところ、CSS設計に突き当たった。
CSS設計の比較記事は書いたことはあるものの、実際に仕事で使ったことがあるのはBEMとRSCSSだけ。詳細度だったり、クラスの分け方だったり、効率的なスタイリングだったり、まだ自信を持てないものばかりだ。

これらを手っ取り早く学ぶ方法を考えたところ、CSSフレームワークを自作するしかないという考えにいたった。


CSS芸でドット絵がバズったのと、これからやりたいのがCSSフレームワーク開発だったので、これらを組み合わせて「8bit.css(仮)」（NES.cssのドラフト版）を開発した。


これまたバズったので「イケる！」と確信し、本格的にNES.cssの開発をはじめた。

というなんとも現金な考え方だｗ



NES.cssのコンセプトはシンプル＆ミニマル


NES.cssを開発するにあたり、最初に決めたコンセプトは「シンプル＆ミニマル」だ。

以下は、私の中のコンセプトをコアメンバーに説明したときの内容だ。
  1. I like simple
    • 複雑なCSSは、バグを生む
    • 複雑なCSSは、変更が困難になる
    • 複雑なCSSは、私たちを悩ませ困らせる
    • 複雑なCSSは、コントリビュートを遠ざける
    • だから私はシンプルにこだわりたい
  2. I don't like Bootstrap臭 and Bulma臭
    • 多くのサイトは、同じスタイルを使っている
    • 多くのサイトは、同じコンポーネントを使っている
    • 多くのサイトは、同じように見える
      • 個性がない（開発者のアイデアを奪いたくない）
      • 開発者は自分のサイトについてもっと考えるべきだと思う
  3. CSS Frameworks are too fat.
    • 既存のCSSは開発者要望に応えるべく多くのスタイル、コンポーネント、ユーティリティ、ヘルパーなどを持っている
    • しかし、それでも足らないときがある
    • 「帯に短し襷に長し」になりやすい
    • NES.cssはシンプルで、ミニマルで、スリムなフレームワークにしたい
  4. I don't want to use JavaScript
    • CSSだけを提供し、JavaScriptが必要なものは含めない
  5. I'd like to enjoy the atmosphere of NES
    • NESの雰囲気を楽しみたい
    • 厳密さは求めない

このあたりのコンセプトは変えたくないと思っているものの、コアメンバーの中には違う考えを持っている人もいるので、話し合って良いフレームワークになるように開発をすすめていきたい。



nostalsic-cssのコアメンバー紹介


@trezy
OSS活動におけるコミュニティ運営のアドバイザー。
devops周りの設定を行ってくれた。そのおかげで、Pull Requestの静的チェックやmasterブランチにマージしたら自動でリリースできるようになった。

@evexoio
storybookやテストを追加してくれた。
またメンバー一活動的で、Issueへの返答、PRのレビュー・マージを行ってくれた。そのおかげで、毎日数十通くるIssueやPRの対応ができるようになった。

@guastallaigor
かわいいドット絵アイコンを多数コントリビュートしてくれた。
私と同じく非英語圏の方なので、ちょっとだけ親近感が湧いている。



OSS活動の感想


正直しんどい。

世のOSS開発者は本当に尊敬する。メンテする気がなくなってownerを譲ってセキュリティインシデントが発生したニュースを見たが、今なら完全に理解できる！

まず何よりプライベートな時間がまるごと食われる。一晩寝たらこの有様だ。


また英語力が「雰囲気で読める程度」の私にとって、英語でコミュニケーションするのは重労働だ。読むのにも回答するにも時間がかかる。しかもGoogle翻訳はたまに正反対の意味の訳を出してくる。

さらに、オーナーシップが個人からOrganizationに移譲するのもめちゃくちゃ寂しく、モチベーションがちょっと下がった。もう「私のプロジェクト」ではないと…。



でも、圧倒的に楽しい！

私の拙い英語でも世界が広がる！
有益な情報が集まってくる！
そして、自分が作ったものを国境を越えて多くの人に使ってもらえる！

語彙力がないせいでこの感動をみなさんに伝えきれないが、世界中の人たちがNES.cssに注目してくれて、いろんな言語で「すごい」「いいね」と言ってくれる。


世界中の人の期待に応えるべく、NES.cssをより良いものにしていきたい！



おまけ: NES.cssのロゴがSNESな件について


TwitterでもGitHubでも何度も指摘された。

そういう意見を見るのも回答するのも飽きてきたので、GitHubのIssueにも回答したがここにもまとめておく。
  • 厳密さを求めていない
  • 私の中で8bit≒ファミコン≒スーファミ≒レトロというザックリとした認識を持っている
  • スーファミ世代なのでSNES(日本版)のコントローラが好き
  • NES.cssのNESは、MOTHER2の影響をうけている（主人公の名前がNES）
  • MOTHER2はスーファミで発売された
  • そんなこんなでスーファミコントローラをロゴに使っている



以上

written by @bc_rikko
時刻:
Labels: ,

0 件のコメント :

コメントを投稿

登録: コメントの投稿 ( Atom )