こんにちは、team-aries の Go です。
隣の空き地にマンションを建てる工事が派手に始まって、日中はずっと部屋が揺れています。揺らされながらこの記事を書いています。
新アプリ Weavy リリースのお知らせ
当ブログで「撮る猫」と「でか文字スコープ」のアップデートをお知らせしたばかりですが、実はもう１本、半月ほど前にリリースしたアプリがあります。Weavy（ウィービー）という名前のアプリです。team-aries 初の Mac アプリです！
このアプリは誰にでも使えるというようなものでもないし、スマホアプリでもありません。Mac でウェブ開発やウェブデザインの仕事をする人のためのものです。なので、今回の記事は比較的技術的な内容になっております。
Weavy ってどんなアプリ？
まず Weavy をふわっとした感じで説明すると、Less や Sass の HTML 版のようなイメージです。つまり、メタ言語でタグを書くと、それを HTML に変換してくれるツールです。
少し本題からそれるのですけれども、CSS を書くとき、最近ではメタ言語（Less や Sass）を使うことが多くなってきていますね。どちらが優れているかについては意見の分かれるところですが、どちらも強烈に CSS コーディングを楽にしてくれることは間違いないと思います。
ただ、こういったメタ言語はコマンドラインから使うのが基本なので、初めての人には導入が少し辛かったんですね。でも、それは以前の話。今では GUI ツールがいろいろあって、導入のハードルは随分と低くなりました。本家のサイトで紹介されているツールだけでも、こんなにあります。
そんなこんなで、CSS コーディングはコマンドラインでバリバリ仕事をこなせるエンジニアだけのものではなくなってきているのかな？というのが最近の流れです。さすがに誰にでも簡単に CSS が書けるというほど簡単な話ではないですけれども、こういった技術を取り入れているエンジニアやデザイナーは増えてきているのではないでしょうか。
今回リリースした Weavy は、このような流れと関係が深いです。Less や Sass のように、より扱いやすいメタ言語で HTML を書くことを可能にするからです。これによって、コーディングを劇的に楽に、そして間違いを少なくしようというものです。
このご時世にリリースするわけですから、Weavy には初めから GUI が付いています。Mac App Store で入手できるようにしましたので、難しいセットアップ作業も必要がなく、アプリをインストールしたら、あとは使うだけです。導入の手軽さは、けっこうこだわったところです。
Weavy で解決できることとは？
Weavy は、「HTML コーディング」をする人を助けるためのツールです。HTML コーディングを「より速く」「より柔軟に」「よりミスを少なく」することが Weavy の狙いです。もしあなたが HTML をある程度知っていて、テキストエディタでタグを直接書いた経験があるのなら、Weavy をお勧めします。
とはいえ、HTML だけを書くのが仕事だという人は少ないでしょう。HTML を書くと言ったら、だいたいの場合は CSS も一緒に書くことになります。なので、Weavy のメタ言語は、CSS と合わせて HTML をコーディングするときのことを考えた文法になっています。
Weavy による記述例
とにかく、例をあげるのがわかりやすいと思います。
例えば、CSS で <h3> の見出しにアンダーラインをつけたいとしましょう。でも現実的なシチュエーションでは、全部の <h3> につけたいのではなくて、特定の <h3> のみが対象という場合が多いですね。サイドバーにある <h3> だけが対象、などといったことです。なので、.underline というクラスが付いている <h3> だけにアンダーラインをつけることにしましょう。
CSS は、こんな感じですね。
h3.underline {
border-bottom: solid 1px;
}
実際のデザインでは padding や line-height の調整も入ると思いますが、その辺は省略しています。
さて、上記の CSS に対応する HTML タグはどうなるでしょう。ざっと、次のような感じですね。
<h3 class="underline">これは見出しです</h3>
ここで言いたいのは、HTML と CSS は全く文法が違う！ということです。そして、ウェブのコーディングはこれらの全く異なるファイルを行ったり来たりしながら進めていかなければなりません。ファイルが大きくなってくると、だんだん頭が痛くなってきますよね・・・。ということで、Dreamweaver のような GUI を備えたオーサリングソフトウェアを活用している人も多いと思います。
ところが、様々な理由でオーサリングソフトウェアを利用できないことがあるのが現実です。または、全部の HTML を細部まで把握する必要があって、そのためにタグは手書きにしたいということも多々あります。
そこで、Weavy の登場です。上記の CSS に対応する タグを Weavy で書くと、次のようになります。普通にタグを書くよりも文法がシンプルです。
h3.underline {
"これは見出しです"
}
この Weavy によるマークアップは、.underline クラスのついた h3 タグを確実に１つ生成します。逆に、余計なタグを勝手に生成することはありません。そのため、HTML を細部まで把握しつつ、タグを簡易的に記述することができます。
この文法は、ただ単にシンプルになっているわけではなくて、CSS と似た書き方を採用したものです。そして、ここが重要なところです。タグの書き方ひとつで CSS と行き来しながらコーディングする際のストレスがかなり軽減されるのを想像していただけるでしょうか？
それから、閉じタグ </h3> を書かなくても良いというのも注目ポイントです。閉じタグは Weavy が自動的に正確に生成します。これだけでも単純ミスが減るはずです。
ちなみに、上のタグは次のように１行で書いても OK です。これは、Weavy が備えている柔軟性のひとつです。
h3.underline "これは見出しです"
その他にも、Weavy にはマークアップを便利にする機能が多数備わっていますので、ヘルプページ で確認してみてください。このブログでも、より実践的な記述例や使い方のコツなどをご紹介していければと思っています。
Weavy でコーディングが速くなります
新しいツールですので、まだご紹介できる実例がありません。そこで、私たちが実際に Weavy を使った時のことについて書いておきたいと思います。
Weavy の紹介ページ の HTML コーディングは Weavy で行いました。この時は、１時間程度で完了しています（HTML コーディングのみの時間です）。アプリを作った本人による時間なのでフェアではない面もありますが、日本語版と英語版を合わせての時間であることや、W3C の Validator もあっさり通過していることを考えると、けっこう速いのではないかと思います。
もうひとつ例をあげてみます。当ブログでも先日お伝えしましたが、team-aries の公式サイト をリニューアルしました。もともとレスポンシブではなかったサイトを Bootstrap で作り直す、という内容です。デザインもちょっと古くなっていたので、今風のスッキリした感じに直しました。
このリニューアル作業も Weavy を使ったのですが、この時はトータル２日間の作業でした（ブログを除きます）。ざっと次のようなことをしました。
- 現行サイトのテキストや画像データを収集・整理。
- HTML ページを作り直し。
- CSS を書き直し。
- スクリプトを書き直し。
- その他、旧 URL からのリダイレクトなど細かいこといろいろ。
実際のマークアップ作業はというと、旧サイトの HTML を Weavy にインポートしまして（そういう機能が付いています）、必要な部分を取り出し、もともとはレスポンシブではなかったので、Bootstrap でレイアウトをやり直す・・・ということを各ページで行いました。今数えてみたところ、HTML は35ページありました。勝手知ったる自分たちのウェブサイトのリニューアルですし、これまたフェアなデータではありませんが、２日間というのはかなり高速ではないかと思います。Google のモバイルフレンドリーテストも難なく通過しています。
マークアップ中は、HTML タグを書いているという感覚が薄いです。ほとんど CSS だけを相手にしているような感覚なので、同時に考えなければならないことが少なくなって、その分コンテンツそのものに集中できました。
私たちにとっては、もう手放せないツールになっています。
まとめ
Weavy は、決して思いつきで作ったツールではありません。マークアップを「より速く」「より柔軟に」「よりミスを少なく」するために、何度も試行錯誤を繰り返して辿り着いた結果です。ですから、私たちの作業効率が Weavy で大幅に UP したことは、むしろ必然なのかもしれません。
そして、これと同じことがもっと多くの人に起こりうると考えています。このアプリが皆さんの役に立てば、こんなに嬉しいことはありません。
今回の Weavy は最初のバージョンですので、まだ荒削りなところもありますし、入れたい機能も全部搭載できていません。将来のバージョンはさらに良くなると思いますので、今後については当ブログをステイ・チューン！という感じでよろしくお願い致します。