Atomエディタ結構いいかも(?)

★画像アップ先の不調により、過去のエントリーで画像が見られないものが多数あります。もし画像の見たいものがありましたらご連絡いただければ復活するようにします。

先日Full Circle Magazineの最新号#94をパラパラ見てたらAtomエディタのことが載っていたので、気になって169 Github製の次世代テキストエディタAtomをチェック!(1)第19回GitHub発エディタ、Atomを参照してみたところ「次世代テキストエディタ」とか(以前これは良さげHTMLエディタBracketsのエントリーで取り上げた)「Bracketsと近い性質を持つ」なんていう記述あったので実際にちょっと触ってみました。このAtomエディタはChromiumベースで作られていてプラグインでいろいろ拡張もできるのということでとてもいい印象です。

●AtomエディタでmoebuntuサイトのHTMLファイルをローカルで読み込んだ例
Atomエディター




Atomエディタのインストール

インストールはWeb UPD8のにPPA(Ubuntu 14.10、14.04、12.04対応)が載っているのでそれでインストールするのがお手軽です。端末を開いて以下を入力適用すればOKです。(Terminal~$)

sudo add-apt-repository ppa:webupd8team/atom
sudo apt-get update
sudo apt-get install atom


Atomエディタのセットアップ

インストールが終わったら起動して使いやすくなるようにプラグインを追加したりします。必要そうなプラグインは上記マイナビの記事に載ってますので、必要に応じてインストールしましょう。ちなみにわたしはHTMLしか考慮に入れていませんので、それ前提で話を進めます。

以下が起動直後の画面となります。素のまんまでは意味ないので、とりあえず「Install a Package」をクリックします。

Atomエディター

セッティング画面が開くので「Install Packages」の所で必要なプラグインの名前を検索してインストールします。

Atomエディター

たとえば「japanese-wrap」で検索すると以下のように「japanese-wrap」の項目が出てくるので「Install」ボタンを押せばインストールできます。

*デフォルトでは日本語の折り返しがうまく動作しないという問題を「japanese-wrap」で解決します。

Atomエディター

同様に「atom-html-preview」もインストールします。これでHTMLのプレビュー表示ができるようになります。ただし、このままではローカルのHTMLファイルを開いた場合以下のようにCSSが読み込まれません。

*プレビューは「Ctrl+P」で画面が分割され表示されます。

Atomエディター

そこで、ちょっとカスタマイズします。参考にしたのはAtom Html PrevierでローカルにあるCSSを読み込む方法です。実際やってみるとバージョンの違いか手順がちょっと違います。メニューから「Edit」>「Preferences」>「Packages」>「atom-html-preview」>「Setting」>「View Code」をクリックします。

Atomエディター

左ベインに「atom-html-preview」のディレクトリツリーが現れるので、「lib」>「atom-html-preview-view.coffee」を読み込み、以下の記述の行を探します。「Ctrl+F」で検索すると簡単です。

iframe.src = "data:text/html;charset=UTF-8,#{encodeURI(text)}"

Atomエディター

該当の行が見つかったら以下の内容と差し替え保存します。

iframe.setAttribute("sandbox", "allow-scripts allow-same-origin")
iframe.src = @getPath()

Atomエディター

これで、ローカルにあるCSSが読み込まれきちんとプレビュー表示されるようになります。

Atomエディター

今のところわたしが触ったのはこのあたりまでです。ちなみにカラーピッカー(color-picker)は最初から組み込まれてました。CSSの色番号上で右クリック>「Color-picker」で設定した色が表示されます。
関連記事

テーマ : Linux
ジャンル : コンピュータ

コメントの投稿

非公開コメント

プロフィール

TOY

Author:TOY
萌え萌えmoebuntu
ようこそ!
moebuntuサイト
moebuntu wiki
お気軽にコメントください。

Auto-Translate
最新記事
最新コメント
tweet
萌え萌えAD




月別アーカイブ
08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01 
カテゴリークラウド
RSSリンクの表示
リンク
QRコード
QRコード
最新トラックバック