第6回は、Kiteさんこと株式会社キテレツのCEO古賀海人さん。音楽からWebの世界へ飛び込んだ異色のキャリアについて聞いた前編に続き、後編では昨年話題になった「変態的CSS」のこと、いま注目している技術についてお話いただきました。
変態的なCSSはどうやって生まれる?
小島 ここからは、Kiteさんが今後、どんなことをやっていきたいかを。去年、WPJで『「うわっ、そのコード変態的すぎ…」と叫びたくなるCSSトリック10選』という記事が話題になりましたが、Kiteさんのスライドが元ネタですよね。
Kite そうですね。僕があるイベントで登壇したときのセッションのタイトルが「変態的CSSトリック」でした。
小島 最近は変態的なCSSは書いていますか?
Kite 変態かどうは別として、少し前に書いたのは「UnresetCSS(アンリセットCSS)」ですね。オープンソースで公開しています。
小島 アンリセット?
Kite ブラウザーのデフォルト値を初期化する「リセットCSS」ってあるじゃないですか。それを逆にブラウザーのデフォルト値に戻すCSSだから、アンリセット。穴掘って埋めるようなものなので、「何なんだ?」と感じるかもしれないんですけど、例えばWordPressサイトの外側のデザインはよくリセットCSSをかけてから作られていたりするじゃないですか。そうなると、投稿で使いたいスタイルまでリセットされているから、たとえばテーブルに線が入っていないとか、リストも最低限の装飾が全部なくなっている、といった状態になる。それをいちいち書き直すよりも、いったん全部デフォルトに戻して必要なところだけを変えるほうが早い、という意図で作りました。
苦労したのが、各ブラウザーのデフォルトのスタイルを調べること。主要ブラウザーを全部調べて、比較して必要なところを全部、書き直すという……。
小島 簡単にデフォルト値に戻す方法はないんですね。
Kite デフォルト値はあるんですけど、それはCSSのデフォルト値であって、ブラウザーのデフォルト値ではなくて。調べてわかったことは、ブラウザーのスタイルって以外なことにほとんど同じなんですね。例えば小数点以下2桁まで完全に一致していたりとかする。調べてみると興味深いなと思いましたね。
小島 ブラウザーのレンダリングの差は昔よりも少なくなっていると聞きますね。
Kite normalize.css(ノーマライズCSS)もありますし、「リセットしすぎ問題」はよく言われますけど、案件によるかな。リセットCSSが必要なときもあるので、使い分けたらいいと思う。
小島 ちょっと変わったCSSの使い方はどんなタイミングで思いつくんですか?
Kite 案件に取り組むときですよね。与えられたデザインをどうやって実現するか考えていると、思いつく。必死に考える、という感じですね。
小島 CSS4の動きも始まっていますよね。なにか面白そうなの仕様はありますか?
Kite 僕も詳しくは追いかけていないんですけど、matches擬似クラスがおもしろいかな。SassやLESSの入れ子みたいなことが実はCSSでもできてしまう。matchesに気づいたのも実はブラウザーのデフォルトのスタイルを調べていたときだったんですけど、ブラウザーのデフォルトスタイルはmatchesを使って書かれているんですよ。
小島 やばい。僕はもう完全に乗り遅れているかもしれない(笑)。
Kite いや難しいですよね。CSSも移り変わりが早いので。
小島 自分でCSSを書かなくなって久しいので…。CSS3のときはアニメーションができたり、すごくわかりやすく変わったじゃないですか。 CSSはこれ以上、進化するのかなと思ったんですけど。
Kite まだまだ進化の余地はあると思いますね。JavaScriptでやっているフロントの見た目の動きとかは、もう全部CSSでできるようになるんじゃないかなと思います。
WordPressの環境構築ツールに「やられた」と思った
小島 最近、ほかに気になっている技術はありますか?
Kite JavaScriptのフレームワーク系はやっぱり気になりますね。言語としてのJavaScript自体もすごい勢いなので、注目しています。もちろんWordPressはこれからもずっとやっていくし、Ruby on Railsも続けるとは思いますけど。
小島 ツールはどうでしょうか。最近触ってみておもしろかったツールとかがあれば教えてください。
Kite もう有名ですけど、「Franz」というアプリですね。Facebook MessengerやSlackといったコミュニケーションツールをまとめて見られるツールです。コミュニケーションツールってすごく増えているじゃないですか。それを1つにまとめられるので、すごく便利ですよ。
小島 日本だとチャットワークにも対応しているのがありがたいですね。いろんなお客さんとやり取りしていたりとかすると、ツールがどんどん増えてしまいますから。
Kite そうなんです。あちこち見ないといけないし、閉じたら通知が来ないのも困りますし…。これは無料ですし、おすすめですよ。
小島 いいですね。使ってみたいと思います。
Kite もう1つはWordPressにフォーカスしたものですけど、「Local by Flywheel」というツールがおすすめです。
小島 VCCWみたいなものですか?
Kite 開発環境を構築するものですけど、GUIも提供されているので、MAMPとかを使っている人が使うとめちゃくちゃ便利になると思います。
小島 Dockerベースなんですね。
Kite たぶん使っていて意識することはないとは思います。僕もオープンソースで、「Wocker」というWordPressの開発環境を作っていて、それなりに使われているんですけど、Localが出てきたときにものすごいショックを受けました。あまりに便利だったので、もうWockerのプロジェクトはやめようかなと思ったぐらいだったんですけど(笑)。悔しいですけど、めちゃくちゃ便利ですね。
小島 今度WordPressを使うときには試してみようかな。
Kite PHPのバージョン設定もできますし、WebサーバーもnginxとApacheを選べたり、メール送信のテストに便利なMailcatcherも入っていたり、かゆいところに手が届く。立ち上げにちょっと時間がかかるのと、マシンのスペックによっては処理が重かったりするので、Wockerにもまだ優位性はあるとは思っていますけど。
今後はサービスを作っていきたい
小島 ではそろそろまとめなんですけど、今後はどんなことをやっていきたいですか。
Kite 自社サービスを作りたいですね。もともと、小島さんとの出会いも「失恋.jp」でしたけど…(笑)。
小島 カイトさんが大失恋したときに立ち上げたサービスですよね。
Kite 失恋したときの気持ちをどうしようみたいな感じのときに、3日ぐらい経ってじゃあサービスにしようと思って立ち上げて、自分の失恋エピソードを最初に投稿した、という。ほぼそれで気が済んじゃったんですけど(笑)、作ること自体はいい刺激になりました。
小島 これからどんなサービス作りたいか、構想はありますか?
Kite 前から考えているのはブックマークサービスですね。ただ単に僕が使いたいからなんですが、なかなか最近のブックマークサービスやアプリにちょうどいい機能がないので、必要な機能をうまく融合したものを作りたいです。ほかは、ファッション系のアプリや、オリジナルのプレゼントを送れるサービスも考えています。
小島 いろいろアイデアの種を育て中、という感じですね。Kiteさんは自分でデザインもできて組めるから、自分のペースで一気に進められますね。
Kite 1人でできるメリットはあるとは思います。絶賛求人中ですけど。
小島 採用するとしたらどんな人が欲しいですか?
Kite やっぱり、デザインもプログラミングもコーディングもできる人、やりたい人が欲しいですね。最近は分業が進んでいるので、どちらかだけの人が多いですけど。ちょうど小島さんのサイト(テクニカルクリエイター.com)やこのサイト(WPJ)もそうですけど、テクニカルクリエイター的な人と仕事がしたいかな。
小島 もしそういった方がいたら、ぜひコンタクトください! ということで締めくくりたいと思います。
Kite ありがとうございました。
[撮影:阿部岳人]
Borderline:バックナンバー
- 音楽からアパレル、デザイン、Webの世界へ OSS貢献者Kiteさんの異色キャリア
- ソウゾウの三橋正典さんが景観デザインから広告、UIデザインへ進んだ理由
- 読モみたいな、あこがれの経営者がいてもいい——ハヤカワ五味さんのキャリア論
- 美大生アパレル経営者はRPGマニア!? ハヤカワ五味さんに聞く趣味と仕事の関係
- 「カメレオン型」エンジニア比留間和也さんに聞く、最先端に身を置き続ける方法
- カヤックのフロントエンドエンジニアだった比留間和也さんがVR開発に熱狂する理由
- 「フロントエンド開発ってまだまだ」を変えたい——LIG林優一さんに聞く
- フロントエンド開発をこよなく愛するLIG林優一さんとMacとテニスと愛犬の話
- 超多趣味デザイナー・吉竹 遼さんとカメラと本、ガンダム、デザインツールの話
- 「デザインを主要言語に、マルチリンガルなデザイナーへ」スタンダード吉竹 遼さん