何か効率化できないかな…と思って最近ふと見つけたので開発者向けブラウザのSizzyを試してみました。
機能や感想など共有しようと思います。
【こんな人にオススメ！】
・Sizzyって聞いたことあるけど実際使ってみたことない人
・日頃の作業を効率化するヒントを探している人
機能がとにかく多いので、一部抜粋してお伝えします。
所感は、便利だけどすこし値段が高いのでちょっと使いたいぐらいだと値段が高い印象です。
無料のトライアルもあるので試したい方はぜひダウンロードしてください！
Sizzyとは？
ウェブ開発者のために作られたブラウザで複数デバイスでの表示確認を得意とするツールです。
レスポンシブサイトの制作で複数デバイスのビジュアルの確認が必要な時に便利です。
無料期間もありますが、基本有料のツールなので利用頻度によっては必要ない場合もあると考えています。
機能を紹介しながら実際使ってみた感想をシェアしたいと思います！
操作画面は全て英語です。日本語の設定が見つけられていないだけかもしれませんが…。
Sizzyの機能紹介
使いこなせている人がいたらすごいレベルで機能が多いです。
画面左側にある基本機能から紹介します。
Devices
エミュレート用のデバイスを選択し、右側に表示できます。
Tasks
TODOリストを作成できます。
チェック・ドラッグ＆ドロップによる順序入れ替えのほか、チェックを入れたアイテムを隠す、全て消せます。
Notes
メモが取れます。
右端にあるアイコンは上から順番に「新規作成」「コピー」「ロック」「削除」ができます。
Snippets
JavaScriptの処理を登録できます。
Browser
ブラウザも開けるのでサイト検索もできます。
エミュレーター
Devicesから選んだものが表示されています。
スクロールやクリック、入力が同期できます。
上部のURL入力欄の横にある鉛筆マークをクリックするとURLが編集できます。
Pathやパラメーターなどを複数用意しておくことで切り替えが簡単にできます。
DevTooles
こちらは使い慣れた開発者ツールです。
Styles
要素をクリック（画像の赤いヶ所）すると対象の要素に付与されたスタイルが見れます。
詳細を開く（画像のオレンジのヶ所）と表示されている以外のスタイルを確認できます。
Social
SNSに投稿した時の表示が確認ができ便利です。
Googleで検索結果時の表示やSlackに投稿した時の表示も確認できます。
また、設定したメタタグも確認できるので確認効率が上がることは間違いないですね。
CSS Overrides
表示されている全てのデバイスにCSSの変更を反映できます。
bodyのcolorを赤くします。
「Prettify」で書いたコードを整形、「Cler All」で書いたコードを全て削除できます。
API Inspector
画像のようにURLとパラメーターをセットしたら、赤枠の送信ボタンを押します。
すると結果がどんな構造でどんな値表示してくれる表示してくれます。
APIの検証の時にすごく便利だと思いました。
機能についてさらに詳細に知りたい方は下記をご覧ください！
Sizzyのできないこと
少し使ってみて少し不便に感じたところを紹介します。
動作がもっさりしている
若干動作が遅くなっていると感じられるタイミングがあります。
動作パフォーマンスを上げるための設定も用意されているので使いながら試してみてください。
レンダリングエンジンのバグは再現できない
これができたら最高だったのに…と思う部分です。
実機の確認は必要になるので複数の解像度で検証したい時の利用では非常に便利なツールだと思います！
まとめ
Sizzyの情報は少なく全て英語なのでまだまだ解明できていない部分が多いです。
業務の中でも使いながら具体的な使い方を模索していければと思います。
さまざまな機能が1ヶ所に集まっているのは非常に便利ですが、使い慣れるまではどうしても効率は悪くなる可能性があると思いました。
Sizzyはビジュアル面の検証には強みのあるツールだと感じました。
利用シーンによってはかなりの効率化も見込めるツールだと感じました。
開発者だけでなくSEO担当者にもオススメできるツールではないかと感じています。
体験もできるので気になったら試してみてください！