Bracketsが急に重くなった

win/macどちらもOK、かつ無料で利用できる上に動作が軽いと評判でしたので、エディターはBracketsを使用しています。プラグイン(エクステンション)の追加で使いやすいようにカスタマイズできるし、快適に使用できていたのですが、先日突然動作が重くなってしまいました。カーソルをマウスで移動するのにも、3秒くらいタイムラグが出るので、流石に作業していられません。

以下のようなサイトを参考にして、色々試していたのですが、しばらく原因がわからず四苦八苦。

「Brackets」の挙動がおかしくなったときのとりあえずの対処法

Bracketsのアップデートをしたら挙動がおかしくなりフリーズするようになった話

考えられる原因

入れているエクステンションのせいで重くなっている

以前は普通に使えていたので、まずはエクステンションを疑いました。エクステンションが多いと重くなるという情報もあるので、とりあえず、全てのエクステンションを無効にしてみて、動作を確認してみました。

プラグインが影響してるか確認する方法

[メニューバー]の[デバッグ]から[拡張機能なしでリロード]で確認します。
もし、その状態で動いたならば何らかのプラグインが影響していると考えられるため、原因となるプラグイン自体を削除すれば解決します。

拡張機能をOFFにすると、多少ましになりました。使えるレベルですが、やはりまだ1秒ほどのタイムラグがあって、作業に影響します。ちなみに、「Highlight Multibyte Symbols」(全角英数字・記号をハイライト表示するエクステンション)を非表示にすると使える程度に改善されました。

コードが長すぎる

触っていたコードが結構長かったので、関係あるかな?と思ったのですが、他のファイルに切り替えても、プロジェクトを切り替えても、状況は変わらず。

プロジェクト内にファイルが多すぎる

プロジェクト内にファイルが多すぎると、Bracketsがフリーズするようです。

Bracketsのプロジェクトファイルが多すぎるとフリーズする

今回は上記リンク先のような表示がある訳ではなく、フリーズでもないので、関係ないとみました。

評判が良いエディタなのに、検索してもあまり情報が得られず…しばらく頭を抱えていました。

発覚した原因

原因がわからなかったので、Bracketsをダウングレード、再インストールしてみましたが、変わらず…

確認バージョン:1.13(win), 1.12(win)

環境設定をいじれば直るのか、テーマが問題なのか、なんなんだ…以前は軽かっただけに、なぜ急に重くなったか不明です。継続調査します。

 

 

妄想デザインプロジェクト

フリーランスとしてお仕事を受けるのに、まず一番大事なことは実績だと思います。でも、なかなか仕事として実績を積むのって難しいです。そんなコネ、なかなかありません。

じゃあ、実績なければ作ればいいじゃないか!とにかく手を動かして、まずはものを作ることが大事です。それっぽい内容でサンプルを作るだけでも、見せられるものがあるというのは効果的です。

実績作りのための作業計画

デザイン勉強

妄想プロジェクトの企画

ウェブサイトのデザインの実績を作るために、架空のサイト作成を企画します。まずは、わいわいデザイン(架空のデザイン会社)の実績として、サイトにのせるためのウェブイメージを作成しようと思います。ロゴ、サイトデザインは適当に作成します。

やること
  • 架空の依頼(サイトの企画)を作成する。サイトのコンテンツを整理する。
  • サイトのデザインをする。
    (とりあえず、気に入ったデザインはパクる!!でも良いと思います)
  • サイトの実装を行う。
  • ロゴのデザイン、サイト内容の改定などを行う。

最新WEBデザイン、レイアウト等の研究

最先端や流行りのデザイン、トップクラスのデザインは自分でまだ作れなくても知っておく必要があります。最新のデザインを実現するためのウェブ技術も、日々進歩しているので、随時勉強していきます。

OJT

多少安くても、実際に仕事としてデザインを請け負って見ることは、かなり大事な経験になります。身近に直接請負えるコネがあるのなら良いのですが、実績なしの状態ではなかなか難しいと思います。デザイン系なら「クラウドワークス」や「ランサーズ」で探してみるのが手っ取り早いかと思います。(酷い案件もあるので、過度な期待はできませんが)

オンライン(クラウドソーシング)で仕事を探す場合は、自分の中で仕事請負ルールを作っておくことも大事かと思います。

請負ルール例

  • 週1件請負目標とする
    • 月いくら稼ぎたいか、月にどれだけ作業できるか、のバランスが難しいですね。
  • 時給1000円で作業する。それ以上は時間をかけない!
    • 従業員として雇用されるのと違い、色々な雑務や経費も込みでの請負料ということを意識する必要あり。フリーランスを目指すにあたり、作業あたりにかかる時間の見積もりと管理はかなり大事です。
    • ただし、経験としてどうしてもやりたい案件であったり、実績に残すのに価値のある案件なら受けるべきだと思います。

ウェブ案件を受けるために

クラウドソーシングで案件を受託するためにも、結局実績が必要になります。依頼主の立場からすると、実績ありの方を採用したいですよね。実績としては以下くらいを目標にしたいと思います。実績は手っ取り早く作りたいので、興味のあるコンペを題材にデザインすれば良いと思います。

ウェブデザイン系の場合の例
  • LPワイヤーフレームデザイン(大まかなレイアウト):10件
  • LPデザイン(配色やテイストなど装飾):10件
  • バナー:10件

ちなみに、クラウドソーシングで、小遣い稼ぎも目的とするならば、コンペ形式の案件は期待できません。実績としての数を作るのであれば良いですが、まず受注できません。勝ち取れたらラッキーくらいの感じで臨んだ方が良いと思います。

 

まずは実績づくり、励みましょう!

border-radiusによる外枠と背景の隙間対策

border-radiusを指定すると、外枠と背景に隙間が発生します。Macでは問題なく表示されるようで、バグなのかな?と思いますが、かなり悩まされました。この隙間について、対策方法をまとめます。

隙間ができる要因

 

普通にborder指定して、隣接要素(直接の子要素)にbackground-colorを指定すると隙間ができます。また、borderと一緒にbackgroundにグラデーションを指定しても同様に隙間ができてしまいます。これは結構困る現象です。

対策方法

擬似要素にborderを指定して、position:absoluteで重ねると、問題なく表示できました。

 

See the Pen border-radiusによる外枠と背景の隙間対策 by yuming (@yuuuming) on CodePen.

枠線の表示手段まとめ

枠線を表現するのに、いくつか方法がありますのでまとめます。

  1. borderで指定する
  2. box-shadowで指定する
  3. 擬似要素(::after)を使って、borderを指定したboxを重ねる
  4. 親要素に背景色を指定して、線幅分の余白を指定して、子要素に白(背景と同じ色)を指定する。

See the Pen 枠線の表示方法 外枠 by yuming (@yuuuming) on CodePen.

1. borderで指定する

一番スタンダードな指定方法ですね。問題なければ、普通にこの方法をとりたいです。

注意すべき点

複数カラムでレイアウトしたい場合、要素の幅設定(box-sizing=”border-box”)を指定しておかないと、%指定がうまくいきません。

例)
3つ箱を横に並べる場合は、幅33.33%にしますが、box-sizing=”contents-box”では、borderで指定した幅分が含まれないので、カラム落ちします。

2. box-shadowで指定する

本来は影のスタイルを指定するプロパティですが、ぼかし無しで指定することで枠線に見せます。borderに近い感覚で指定できます。重ねて指定することで、多重の枠が表現できます。

なお、box-shadowは要素の幅指定には関係しません。ウィンドウ幅に影響されて線幅が小数点になることはないため、ウィンドウ幅変更による表示の欠けの問題はクリアできます。

注意すべき点

外側指定の場合、四隅が微妙に角丸になります。

また、親要素にoverflow:hidden;が設定されていると、枠線が見切れるため、親要素との余白の調整が必要となります。もしくは内側(inset)に設定して、枠が内容に被る分は調整必要です。

3. 擬似要素(::after)を使って、borderを指定したboxを重ねる

1または2で解決できない場合はこの方法が良いかと思います。

注意すべき点

擬似要素は子要素として、要素の内側に表示されるので、重なり順や他子要素との兼ね合いに注意してください。

4. 親要素に背景色を指定して、線幅分の余白を指定して、子要素に白(背景と同じ色)を指定する。

子要素が透過度0の場合はこの方法も使用できますね。枠線にパターンやテクスチャをつけたい場合はこの方法で実現できます。

注意すべき点

子要素の背景を透過したい場合は使えません。

間に垂線を表示して格子状にする場合

親要素(ulなど)の中に複数の子要素(ilなど)を横に並べるような場合、間に垂線を表示して格子状にする方法も色々です。

  1. li(もしくはliの子要素)にborderをつける
  2. ulにborderをつけて、間の線は、liにborderをつける
  3. ulにborderをつけて、間の線は、擬似要素(li::after)で表示する

See the Pen 枠線の表示方法 格子 by yuming (@yuuuming) on CodePen.

1. li(もしくはliの子要素)にborderをつける

間の枠線が重複するため、枠を重ねるようにネガティブマージンを設定します。もしくは間の枠線の片方を無くします。

2. ulにborderをつけて、間の線は、liにborderをつける

外枠は親要素(ul)にborderを指定し、間の線は、liにborderを指定します。

3. ulにborderをつけて、間の線は、擬似要素(li::after)で表示する

外枠は親要素(ul)にborderを指定し、間の線は、擬似要素の背景色で表現します。

 

1pxの垂直線が上手いこと表示されない

以下のように、3カラムの画像のまわりに枠線に表示するのに、一苦労しましたので、解決策をまとめておきたいと思います。

画像まわりに枠線の例

初めは画像に直接枠線を入れていたのですが、ウィンドウサイズによって、表示幅に小数点がつくため見た目が変わってくるという問題につまづきました。ウィンドウサイズを変更すると、垂線が消えたり太くなったりしていました。

最終たどり着いた方法

汎用性も考えて、cssで枠線を表示することにし、色々試しました。枠線の表示方法についてはこちら(枠線の表示手段まとめ)を参照してください。

今回、一番ズレる心配がなく、スマートだと思われる方法で、以下の方法をとりました。

  • 外枠:ulにborder
  • 間の枠:li::after(最後のliを除く)で1pxの線幅のboxを表示

カラム落ちを防ぐためにbox-sizing=”border-box”を設定するため、liにborderを設定すると、borderなしのliだけ、borderの幅分、box中身のサイズが変わってしまいます。

今回、枠の中に画像を表示する必要があった(box中身のサイズを3カラムとも同じにしたい)ため、上記の方法をとりました。

See the Pen 1pxの垂直線が上手いこと表示されない by yuming (@yuuuming) on CodePen.