Bracketsを使ってHTML5+CSS3+javascriptを少し覚えていこうかな

プログラミング

ブログをやっているということで少しHTML5, CSS3, javascriptのお勉強をしたいなと思います。職業はIT全く関係ない仕事をしておりますが、Web系の技術は学んでおいても損はないかなと思いますし。

エディタ戦争

というわけでまず選ぶのはエディタであります。最初は院生時代に使っていたVimを使おうかなぁと思ったのですが、Vimscriptも完全に忘却の彼方です。それに、Web界隈の情報も他のエディタの方が充実してそうだったのでお勉強がてら他のエディタを使ってみることにしました。プログラマでもない自分が今更Vimの設定からやり直すのもなぁ…という感じですしおすし。

調べてみたところWindowsではAtom, Brackets, Sublime Text, Light Tableあたりが定評ありそうです。 他にもCrescent Eveなんていうエディタも。

将来性のありそうなAtomを選ぼうかなと思ったのですが、Bracketsの方が動作や設計が好み。Bracketsの方が使ってて気持ちいいかな? Web界隈の情報という意味でも結構発信者がいらっしゃるようですし、何よりHTML+CSS+javascriptで開発されているエディタという点に面白みを感じたのでBracketsを使ってみたいと思います。

Atomのvim-mode-plusには期待中

Bracketsを使おうと書いておきつつ、Atomの話なのですが、Atomには「vim-mode-plus」なるプラグインがあります。よくある「他のエディタでVimのキーバインドを使えるようにする系プラグイン」なのですが、テキストオブジェクトなんかも一部built-inとして実装しており、ちゃんと使えるようにできるよう頑張っていそうな感じでして今後に期待中です。vim-modeというものもあるのですが、こちらがあまりアクティブではないことからforkしてしまった経緯があるらしい…。

2015年、Atom に乗り換えた。そして vim-mode-plus をリリースした。 – Qiita

Bracketsのvim-modeは残念仕様

Bracketsにもvim-modeはありますが、こちらのvim-modeは現時点ではあまり使える感じではありませんでした(=o=;) Bracketsの場合はマウス操作もしながら編集していくスタンスの方が今のところ幸せになれそうな雰囲気がします。

Web界隈はエディタに恋に落ちる変態が多い?

エディタを探していると、やたらエディタと恋している方々が続々と湧いてらっしゃったのですが… Web界隈は節操のない方が多いのか、変態さんが多いのか… 怖い世界です

Bracketsのフォントとテーマを設定するよ

そんなこんなでBracketsを使ってお勉強していこうと思います。

英語ですがHome · adobe/brackets Wiki · GitHubにある程度まとまった情報がありそう。…ということで簡単なフォントとテーマだけひとまずちょちょいとやっておきまする。

インストール&起動!

ででん!

brackets

第一印象、英語キレイ、日本語汚っ、白色まぶしっ!!

というわけでまずはテーマを変えたいと思います

テーマを設定するよ

Brackets Themesさんによると、

  1. File :arrow_right: Extension manager…
  2. Click the tab called “Themes”
  3. Type (the name of the theme you want) in the top right search bar
  4. Click “Install”.
  5. Click Close on the pop up
  6. Click Close on the extension manager
  7. View :arrow_right: Themes…
  8. Current Theme change to the theme you installed.
  9. Click Done

でテーマを設定できるらしいです。

brackets (2)

というわけで、[拡張機能マネージャー]の[テーマ]からテーマを探しまして…

「Monokai Dark Soda」というテーマを入れることにしました。

フォントの設定

フォントを何とかしたいと思います。探してみると[デバッグ]-[環境設定ファイルを開く]で設定ファイルが開くっぽい。

brackets (3)

どうやらjson形式で設定している模様で、フォントはbrackets.jsonに書くっぽいです。

 

BracketsのWikiに以下記述がありました。

To change the code editor font, choose View > Themes…, then change the “Font Family” setting.

  • Use the same syntax as you would font-family in CSS
  • The font must be installed on your OS (there’s no way to load a web font)
  • One exception: 'SourceCodePro-Medium', the default code editor font, is a web font that’s loaded automatically by Brackets (installing Brackets doesn’t install any fonts globally on your system)

これによると、CSSのfont-familyと同じ文法で書いていけばいいみたいです。Webフォントをロードする方法はなくて、OSにフォントはインストールしておかなきゃいけない。ただ、’SourceCodePro-Medium’だけは例外で、これはWebフォントとして自動的にロードされてるっぽい。なるほど、だから英語がキレイだったのか!

というわけでフォントを以下設定にしてみました。

{
     "fonts.fontSize": "12px",
     "fonts.fontFamily": "'SourceCodePro-Medium',Ricty Diminished Discord','Myrica M', '源ノ角ゴシック Code JP',MS ゴシック, 'MS Gothic', monospace",
     "themes.theme": "rain.monokai-dark-soda"
}

Windowsのフォント環境は悲惨で、一昔前はRictyを自分でmakeしなければならなかったのですが、最近はお手軽にフォントを導入できてありがたい限りです。

評判のよいMyrica, Ricty Diminished, Source Han Code JPというフォントをとりあえずOSに入れてみました。

SourceHanCodeJPは、SourceHanCodeJP-Mediumみたいに打ってもうまく表示できなかったんですよね、なぜなんでしょう。’源ノ角ゴシック Code JP’と書いてやればうまく反映されましたが、フォントがちょっと太い。でも、font-weightを考慮した名前で打っても設定が反映されぬ…(´Д⊂

というわけで断念し、Rictyを優先させることにしました。ただ、英語部分の見た目はSourceCodePro-Mediumの方が好き…。その為、苦肉の策として英語をSourceCodePro-Mediumで表示させ、日本語をRicty Diminishedで表示させる作戦をとったのが上記設定です。font-weightをうまく調整したいんですけどね…。

とりあえず、以下の様な見た目になりました!

brackets (5)

SourceCodeProの英語は割りと横に長い感じですね。日本語も少し違和感あるのですが、MSゴシックよりは断然いいです。

ちなみにデフォルトのフォントの表示はこんな感じ。英語部分は同じなんですが、日本語がMSゴシックなのでちょっとギザギザですね。

brackets (6)

Pluginや使い方等

ググれば色々と情報が出てきますが、日本語だと以下のQiitaがいい感じにまとまってました。

Pluginを一気に入れるとワケわかんなくなっちゃうので、まずは効果が理解できるものだけ徐々に入れていこうと思います。ただ、Emmetのような入力補助系プラグインは最初からがっつり使っていくつもり。昔はZen-codingっていう名前だったと思うのですが、いつの間にかEmmetなんていう小洒落た名前になってたんですね…笑

Emmetの使い方は以下の解説記事が割りといい感じでした。ショートカットキーは使いにくそうなので、keymapは変更した方がよさそうな雰囲気ですね。

Emmetの設定まわりはEmmet Documentation – Customizationあたりにも書いてましたが、上記を読めばとりあえずなんとかなりそうな雰囲気。

お勉強しながら、学んだhtmlやcssのabbreviationを以下で確認しつつ、

ココにも存在しなければ自分でsnippets.jsonをユーザー定義していくスタイルで学習していこうかな。

javascriptのsnippetsに関してはBrackets Snippetsというプラグインにある程度登録されていそうなので、こちらに登録していくスタンスがよさそう。

とすれば、html, cssのsnippetsもこちらに追加するほうが良いのだろうか… う~ん、どちらでsnippetsを作っていくか迷いどころです。

紹介してるサイト見かけないけど導入したPlugin

テキストオブジェクトが使えないのは仕方ないにしても、vimでいうvim-surroundっぽいやつ欲しいなぁ…と調べてみた所、brackets-surroundというPluginがありました。同じ使い勝手ではないですが、方向性としては同じ方向向いているプラグイン。

イメージもVimeoでアップされてた。

VimeoBrackets: Surround extension

ただ、Emmetを勉強してみたところ、EmmetのWrap with AbbreviationやUpdate Tagを使ったほうが良さそうな雰囲気ありますね…(=o=;)笑

Web界隈の使用者が多いエディタって、動画やgifで解説しているサイトが多いですよね。本当に良い文化。

本当にHTMLで作られてる…

[デバッグ]-[開発者ツールを表示]を押すと、このエディタのソースコードが表示されます。

brackets (8)

なんと,調査ツールでエディタの要素も調べることができる…。エディタの左のナビゲーション画面はul要素で作られているっぽいです。ほんとにhtmlで作られてるんですね…衝撃…。

brackets (7)


最上部へ戻る