WEBエンジニア奮闘記

日々の業務から思ったこと、学んだことを書き連ねていきます。

Diary 2018-07-05 Style Guide, Push Notification

f:id:kito0039:20180705142807p:plain

Today's workings

  • スタイルガイド・パターンガイドジェネレータの調査

Detail

仕事でこれは必要だろ、と思い作るに至るのだが、何分初めて作るのでガリガリ一から作っても良いけどそれはアホでしょと。 先人たちの素晴らしいツールが世の中にはたくさんあるじゃろうと。言うことで調べて選んでみた次第。

parashuto.com

はじめはこの記事を見て Fractal を使ってみた。 軽く触った感じは悪くはなかった。特徴は

こんなところで、割と使い勝手は良さそうだが、css のコードが表示されないのがアウト… 後は、個人的にデザインが好きじゃなかったので見送った。

parashuto.com

お次は、先程の記事と同じ方のかかれたこちらの記事を見た。「あれ?もしかして俺が欲しいのはスタイルガイドではなく、パターンガイドでは?」とも思ったが、 この2つの明確な境界線はなさそうで、割と曖昧な感じ。ほしいのはパターンガイドが近いのだが、表示してほしいものにはスタイルガイドの要素もだいぶある。

そんなこんなで、結局はスタイルガイドジェネレータを探すことにして、こちらの記事で紹介されていた U.S. Web Design System を軽く試してみた。

  • こちらもnpm からインストール可能
  • CLI も用意されていた
  • ビデオでのチュートリアルもある
  • test コードもある
  • デモが実践的(htmlソースコードもついてくる)

こちらも良さげだった。htmlのソースコードが表示されるのも良い。デザインも好きなものだったのでこれで行こうかなーと思ったが、いや待てよと。 各コンポーネントのコードは良いけどほしいのは cssソースコード + クラス名だろと。 htmlのソースコードにクラス名も載ってるから惜しいのだが、css 設計もドキュメント化したいのでこちらも落選。

余談

Brand Style Guide Examples, Hand-picked by Saijo George

こちらのリンクのサンプルがどれも素晴らしかったのだが、その中でも特に目を引いたのが Frontify さん。 観た瞬間惚れた。作りたいと思っていたイメージにドンピシャで当たっていて、「正直これ使わせて欲しい!」とかおもったw

qiita.com

ほいで、お次はこちらの記事から sc5-styleguide を試してみた。今回選んだツールはこの子です。 機能的にはとても気に入ったのだが、2点ほど残念な点がある。

  • リンクがサイドバーではないため、スクロールに追いついてくれない
  • ヘッダーがスクロールしても追ってきてくれない

まぁ、この子を使うのなら一点目は諦めて、二点目は自分でCSSをカスタマイズしてしまえば簡単にできるので、それでカバーする。 何にせよはじめての試みでもあるので、まずはなんでも良いのでやってみようと思う。(「なんでも」とか言っておきながら、いろいろ選んでんじゃんw)

Comments

chrome://flags っていうURLを今日初めて知った。chromeってほんまに最先端なブラウザだなと。

Articles