マークアップに便利なアプリ、サービスをまとめてみました。
ウェイさん
ビアガーデンに出かけたい季節になってきましたね！
仕事を早く終わらせるために、
少しでも役立つツールを紹介させていただきます。
弊社ではLPなどの制作をする際、マークアップに関わる範囲ですと
・タスクランナーとしてGulp
・HTMLはEJS
・CSSはSASS
これらを用いて作業しております。
何も使わないで、HTML,CSSを書いていた時代にはもう戻れないですね。これだけで業務効率が３倍ぐらい変わるのではないでしょうか。
しかしながらこれらのツール類にもトレンドがあり、そろそろ開発環境のアップデートもしたいところなのですが、時間が足りず。。。辛いところですね。
上記のツールの使用方法は他社様のブログやQiitaの記事にたくさんありますので、今回は割愛させていただきます。気になる方は下記の記事等を参考にされるとよろしいかと思います。
絶対つまずかないGulp入門(2018年版) - インストールとSassを使うまでの手順 - ICS MEDIA
テンプレートエンジン「EJS」とタスクランナー「Gulp.js」で爆速HTMLコーディング | 東京上野のWeb制作会社LIG
今回はこれらのツールを使った上で、さらに作業効率を上げるのに有用だと個人的に感じた、便利なアプリや、サービスを紹介させていただきます。
Zeplin
zeplin.io
ご存知の方はかなり多いのではないでしょうか。
デザイナーとエンジニアとの連携をスムーズにさせるスタイルガイドです。
photoshop,sketchのどちらのデータからでも利用出来るのも良いですね。
photoshopや、sketch上で、zeplinのプラグインを使い、データをサーバーに上げると、アプリや、ブラウザ上でfont-sizeや、widthなどのCSSプロパティを確認することができます。
必要な画像の書き出しなどもzeplinから出来るようになるので、一度使うと手放せなくなるはずです。
アプリ版とWEB版があるのですが、
WEB版は複数画面が開けるのでPCとSPのデザインを見ながらスタイルを当てる。
アプリ版はスクロール出来るスクリーンショットを用意出来るので、デザインの確認用にそれぞれ使い分けることなど出来ます。
上記の画面は弊社の自社サービス BASEBALL MARC のものです。
僕は制作チームではないのですが、
デザイナーとエンジニアが毎日話し合って開発しているので、
こうやって出来て上がったものを見ると感慨深いですね。。
Mapture
Mapture - MacOSX向けキャプチャユーティリティ
マック用のアプリでシンプルにスクリーンショットを撮ってくれます。
windowsですとRaptureというアプリがございます。
アプリを起動したら
『cmd』+『shift』+『m』で指定範囲のスクリーンショットが取れるのですが、
撮ったスクリーンショットをどのウィンドウでも最前面に配置したり、透明度を調節出来るので、ちょっとしたデザインの確認に重宝します。
記事を参考にしながら作業したいのに、モニタが少ないから画面を切り替えなければいけない！という場合も必要な部分をMaptureで撮れば解決するのでマルチに活躍してくれます。
linear
こちらもマック用のアプリで、画面上にwidthやheightを測る定規を置くことが出来ます。windows向けの似たアプリを探したのですが見つからず、もしご存知の方がいらっしゃれば是非教えていただきたいです。
アプリを起動して
『cmd』+『ctrl』+『r』で定規を表示させられます。
zeplinでこのdivはどのぐらいのpxで作成すべきかなどちょっと長さを測る際に重宝し、基準サイズを設定すればem単位で表示することも出来るので、そのまま値が使えるのも便利ですね！
画面上に線が引けるので要素同士のベースラインが合っているかなどの確認にも使えます。
Gyazo,Gyazo GIF
まだまだ、表示系のものが続きます。笑
こちらはスクリーンショットの共有サービスです。
前者は画像を、後者はgif動画を撮影することが出来ます。
使用法は簡単で
アプリを起動して、撮影範囲を指定するとブラウザが立ち上がりあとはリンクをシェアするだけです。GIFの場合は最大７秒動きを撮影することが出来るので、動きの仕様などをクライアントと共有する際などに便利です。
上で使っているgifなどもGyazoで撮ってます。
OneClickCSS
HTML書き終わったあと、CSSファイルにClass名を書いていく作業、地味に時間かかりませんか？また、Class名が合っていなくて、スタイルが当たっていない！ということもよくあるのではないでしょうか。
こちらはテキストエリアにHTMLのコードを貼り付けると、そこからIDや、Class名を抜き出してあとは各プロパティを書くだけにしてくれます。
使用方法
画面左側のエリアにHTMLコードを貼り付け、真ん中のボタンでCSSを生成、右側のコードをコピーして使用します。
EJSとか貼り付けても動くので便利です。
僕はvisual stadio codeでeCSStractorという拡張機能を見つけ、これがOneClickCSSと同じことをしてくれるので最近はこちらを使用しております。
webサービスならエディタに関係なく使用できるのでちょっと試してみたい方はOneClickCSSを使用してみてください。
W3Schools How To
W3Schools How TO - Code snippets for HTML, CSS and JavaScript
これはアプリ、サービスとは少し異なるのですが、様々なレイアウトや機能のサンプルが載っているのでコーディングに慣れていない方にとってはすごい参考になるのではないでしょうか。Javascriptで実装する部分も載っているのでありがたいです。
Google Chrome Developers tools
これも例外ですね笑
みんな大好きDevtoolsです。今回紹介したいのはDevtoolsのSourcesパネル。
Gulpなどのタスクランナーを使い、auto-reloadしているとSASSを保存した際に
リロードがかかりますよね。
前述したMaptureなど使って、画像を重ねている僕にとってはリロードが入るとスクロール位置がずれたり、画面が白く飛ぶので作業しづらくなります。
これを解決してくれるのがSourceパネル。
DevTools ワークスペースによる永続化の設定 | Tools for Web Developers | Google Developers
上記の方法にしたがって作業ディレクトリをchromeに登録すると、CSSに更新があった場合、リロード無しで変更を反映してくれます。つまり擬似的にライブコーディングが出来るようになります。
エディターとブラウザを往復する量が減るのでより効率良く作業できること間違い無しです。
いかがでしたでしょうか。メジャーなものマイナーところまで、この記事が業務効率の改善のきっかけにつながれば幸いです。
またこんなツール便利だよっていうのがもしあれば是非教えてください。便利なツールでお酒が進みます。
業務効率を上げることが好きな方、弊社で是非一緒に仕事しましょう！
メゾンマークではメンバーを募集しております！
