購読するキャリア「変態的CSS」の作者Kiteさんにいま気になる技術を聞いてきた2017/07/14小島芳樹FREE220FacebookTwitterHatenaPocketデザインとエンジニアリング、デザインとビジネスなど、クリエイターにも従来の仕事の範囲を超えた知識と発想が求められる時代。オン/オフの両面からお話を伺います。第6回は、Kiteさんこと株式会社キテレツのCEO古賀海人さん。音楽からWebの世界へ飛び込んだ異色のキャリアについて聞いた前編に続き、後編では昨年話題になった「変態的CSS」のこと、いま注目している技術についてお話いただきました。ここからは、Kiteさんが今後、どんなことをやっていきたいかを。去年、WPJで『「うわっ、そのコード変態的すぎ...」と叫びたくなるCSSトリック10選』という記事が話題になりましたが、Kiteさんのスライドが元ネタですよね。僕があるイベントで登壇したときのセッションのタイトルが「変態的CSSトリック」でした。変態かどうは別として、少し前に書いたのは「UnresetCSS(アンリセットCSS)」ですね。オープンソースで公開しています。ブラウザーのデフォルト値を初期化する「リセットCSS」ってあるじゃないですか。それを逆にブラウザーのデフォルト値に戻すCSSだから、アンリセット。穴掘って埋めるようなものなので、「何なんだ?」と感じるかもしれないんですけど、例えばWordPressサイトの外側のデザインはよくリセットCSSをかけてから作られていたりするじゃないですか。なると、投稿で使いたいスタイルまでリセットされているから、たとえばテーブルに線が入っていないとか、リストも最低限の装飾が全部なくなっている、といった状態になる。それをいちいち書き直すよりも、いったん全部デフォルトに戻して必要なところだけを変えるほうが早い、という意図で作りました。苦労したのが、各ブラウザーのデフォルトのスタイルを調べること。主要ブラウザーを全部調べて、比較して必要なところを全部、書き直すという......。名を連ねる制作会社のWebデザイナー兼プログラマーを経て、2014年4月に株式会社キテレツとして独立。クリエイティブからテクノロジーまで、トータルソリューションを提供。自身でも数多くのオープンソースソフトウェアを開発。導入とサイト制作の教科書』。簡単にデフォルト値に戻す方法はないんですね。デフォルト値はあるんですけど、それはCSSのデフォルト値であって、ブラウザーのデフォルト値ではなくて。調べてわかったことは、ブラウザーのスタイルって以外なことにほとんど同じなんですね。小数点以下2桁まで完全に一致していたりとかする。調べてみると興味深いなと思いましたね。ブラウザーのレンダリングの差は昔よりも少なくなっていると聞きますね。normalize.css(ノーマライズCSS)もありますし、「リセットしすぎ問題」はよく言われますけど、案件によるかな。リセットCSSが必要なときもあるので、使い分けたらいいと思う。案件に取り組むときですよね。与えられたデザインをどうやって実現するか考えていると、思いつく。必死に考える、という感じですね。CSS4の動きも始まっていますよね。僕も詳しくは追いかけていないんですけど、matches擬似クラスがおもしろいかな。SassやLESSの入れ子みたいなことが実はCSSでもできてしまう。matchesに気づいたのも実はブラウザーのデフォルトのスタイルを調べていたときだったんですけど、ブラウザーのデフォルトスタイルはmatchesを使って書かれているんですよ。僕はもう完全に乗り遅れているかもしれない(笑)。CSSも移り変わりが早いので。自分でCSSを書かなくなって久しいので...。CSS3のときはアニメーションができたり、すごくわかりやすく変わったじゃないですか。CSSはこれ以上、進化するのかなと思ったんですけど。進化の余地はあると思いますね。JavaScriptでやっているフロントの見た目の動きとかは、もう全部CSSでできるようになるんじゃないかなと思います。JavaScriptのフレームワーク系はやっぱり気になりますね。言語としてのJavaScript自体もすごい勢いなので、注目しています。Railsも続けるとは思いますけど。ツールはどうでしょうか。最近触ってみておもしろかったツールとかがあれば教えてください。有名ですけど、「Franz」というアプリですね。MessengerやSlackといったコミュニケーションツールをまとめて見られるツールです。コミュニケーションツールってすごく増えているじゃないですか。それを1つにまとめられるので、すごく便利ですよ。日本だとチャットワークにも対応しているのがありがたいですね。いろんなお客さんとやり取りしていたりとかすると、ツールがどんどん増えてしまいますから。あちこち見ないといけないし、閉じたら通知が来ないのも困りますし...。これは無料ですし、おすすめですよ。使ってみたいと思います。Flywheel」というツールがおすすめです。開発環境を構築するものですけど、GUIも提供されているので、MAMPとかを使っている人が使うとめちゃくちゃ便利になると思います。Dockerベースなんですね。使っていて意識することはないとは思います。僕もオープンソースで、「Wocker」というWordPressの開発環境を作っていて、それなりに使われているんですけど、Localが出てきたときにものすごいショックを受けました。あまりに便利だったので、もうWockerのプロジェクトはやめようかなと思ったぐらいだったんですけど(笑)。悔しいですけど、めちゃくちゃ便利ですね。今度WordPressを使うときには試してみようかな。PHPのバージョン設定もできますし、WebサーバーもnginxとApacheを選べたり、メール送信のテストに便利なMailcatcherも入っていたり、かゆいところに手が届く。立ち上げにちょっと時間がかかるのと、マシンのスペックによっては処理が重かったりするので、Wockerにもまだ優位性はあるとは思っていますけど。まとめなんですけど、今後はどんなことをやっていきたいですか。自社サービスを作りたいですね。小島さんとの出会いも「失恋.jp」でしたけど...(笑)。カイトさんが大失恋したときに立ち上げたサービスですよね。失恋したときの気持ちをどうしようみたいな感じのときに、3日ぐらい経ってじゃあサービスにしようと思って立ち上げて、自分の失恋エピソードを最初に投稿した、という。それで気が済んじゃったんですけど(笑)、作ること自体はいい刺激になりました。前から考えているのはブックマークサービスですね。僕が使いたいからなんですが、なかなか最近のブックマークサービスやアプリにちょうどいい機能がないので、必要な機能をうまく融合したものを作りたいです。ほかは、ファッション系のアプリや、オリジナルのプレゼントを送れるサービスも考えています。アイデアの種を育て中、という感じですね。Kiteさんは自分でデザインもできて組めるから、自分のペースで一気に進められますね。1人でできるメリットはあるとは思います。デザインもプログラミングもコーディングもできる人、やりたい人が欲しいですね。最近は分業が進んでいるので、どちらかだけの人が多いですけど。小島さんのサイト(テクニカルクリエイター.com)やこのサイト(WPJ)もそうですけど、テクニカルクリエイター的な人と仕事がしたいかな。いうことで締めくくりたいと思います。ありがとうございました。遼さんFacebookTwitterHatenaPocket小島芳樹ソーシャルゲームやUIデザインの会社にてWebデザイナー・フロントエンドエンジニア・ディレクターを経て、現在は都内のIT企業で企画やアライアンスを担当。2016年より「エンジニア」+「デザイナー」=「テクニカルクリエイター」のためのWebメディア「テクニカルクリエイター.com」を立ち上げ、IT・Web技術やデザインについての最新トレンドを発信している。最近の趣味は水泳、トライアスロンへの出場を目指して練習中。