スキップしてメイン コンテンツに移動

投稿

2月, 2017の投稿を表示しています

Live Preview within Safari Responsive Design Mode on Adobe Brackets

iPhoneやiPad画面のライブプレビュー Adobeが好きじゃない私としては珍しく、このBracketsは好きです。ただ、仕様がコロコロ変わって使っていた重要な機能がいきなり無くなったり、なかなかそれが常にベータ版を使っているような、オープンソースならではの辛さはあるのですが。 Bracketsの一番好きな所はライブプレビューです。コードを打つとリアルタイムに変更されるのは、ブラウザのデベロッパー機能以外ではあまり見かけません。Codaも出来ますか、たしか。Atomもエクステンションでできたけど不安定だった気が。ブラウザをエディタ代わりに使うのも良いのですが、白紙からだとなかなか辛いものがあり。 稲妻のマークを押しますと、Chromeが開いてライブプレビューがスタートします。Webサーバが起動されてルートからの絶対パスの指定ファイルなんかもバッチリ表示されて、こういうきめ細やかな部分とても良いんです。しかし、なぜかマックですと既定のブラウザがSafariになっていてもChromeが動きます。仕様なのでしょうか、理由はわかりません。Googleと結託しているのかな。Chromiumなのかな? これをBracketsのメニューの ファイル>「 試験ライブプレビューを有効にする 」をオンにすると、Safariが開くんです。 以前はなんとかかんとかっていうアプリがあって、iPhoneでプレビューできたのですが、今は消えてなくなりました。(Creative Cloudの旧アプリリストには残っています) メディアクエリでウィンドウサイズを小さくしてという場合以外にも単独のページ制作もありますし、リアルにどうなっているのか画面で見たい。 このSafariライブプレビューの状態で、メニューの 開発>「 レスポンシブ・デザイン・モード 」で iPhoneやらiPadやらでプレビューできました。Chromeでも開発ツールにスマホビューみたいなのがあるのですが、右クリックで「検証」とすると「開発ツールが開いているためライブプレビューをキャンセルされました」と動かなくなるんです。 ウリのひとつである、HTMLコード行を選択してコマンド+Eを押すとその箇所に関わるCSSが出て来るという、クイック編集の機能なんかもまだまだ成熟していないので、細かい部分ちゃん