atom のバックアップの現在との差分(No.12)



  • 追加された行はこの色です。
  • 削除された行はこの色です。
[[FrontPage]] > テキストエディタ Atom

#title(テキストエディタAtom)

Githubが提供する、21世紀の、ハックできるテキストエディタ。

markdownでアウトライン表示する方法もあるよ。

#contents

* 導入した理由 [#f9a41d9f]

- マルチ環境(Windows、Mac、Linux)
- オープンソース(MIT License)
- 充実した機能拡張パッケージ

** 個人的に気に入っている機能 [#vf867bae]
- markdown対応
- markdownのアウトライン表示 (nav-panel)
- markdownのアウトライン表示 (%%nav-panel%% document-outline)
- markdownのプレビュー(標準装備)とスクロール同期(markdown-scroll-sync)

* インストール [#v5a3a106]

-[[Atom:https://atom.io/]] 公式サイト

** 設定 [#ub0a4e1a]
「ファイル」−「環境設定」でお好みに。

** ファイルの自動保存 [#s04a46e7]

必ず、自動保存を有効にすること。でないと、エディタを終了させるとき、未保存ファイルが消える。

パッケージの「autosave」で、「Setting」>「Enable」にする。

これで、ウィンドウからフォーカスがはずれたり、タブを切り替えたりした時、自動的にセーブされるようになる。

エディタ終了時に未保存ファイルは保存されない。

-[[Atomで自動保存を有効にする | yamamanx:http://www.yamamanx.com/atom-auto-save/]]


** 参考資料 [#w1e829fd]

-[[ATOM Editor をそろそろ始めようか - Qiita:http://qiita.com/spiegel-im-spiegel/items/3d41d98dacc107d73431]]
-[[今注目のテキストエディタ「Atom」の使い方と便利機能まとめ | Code部:http://blog.codecamp.jp/atom_utility/]]
-[[Atom(GitHub製エディタ)に乗り換えて最初にやっておきたいこと | mae's blog:http://mae.chab.in/archives/2579]]

* Packages [#da457a54]

いろいろと機能を追加・拡張できる。

** 日本語関係 [#b3a8da13]
-[[japanese-menu:https://atom.io/packages/japanese-menu]] メニューバーとコンテキストメニュー、設定画面を日本語化
-[[japanese-word-selection:https://atom.io/packages/japanese-word-selection]] ワード境界を日本語対応させて、単語を選択しやすく
-[[japan-util:https://atom.io/packages/japan-util]] 半角/全角変換

** アウトライン表示 [#rfb3817c]

-[[nav-panel:https://atom.io/packages/nav-panel]] markdownをアウトライン表示
markdownをアウトライン表示

-[[document-outline:https://atom.io/packages/document-outline]]
--[[続・AtomでMarkdownのアウトラインを表示する - たけぞう瀕死ブログ:http://takezoe.hatenablog.com/entry/2016/11/20/125111]]

-[[nav-panel:https://atom.io/packages/nav-panel]] 
--[[AtomでMarkdownのアウトラインを表示する - たけぞう瀕死ブログ:http://takezoe.hatenablog.com/entry/2015/12/27/121209]]


*** nav-panel について [#vcc87e0a]

本来は、ソースコード中の関数やクラスを一覧表示するパッケージ(たぶん)。

markdownの見出し表示にも対応していて、「#見出し」をアウトライン表示してくれる。

ただし、見出しの階層には対応していなかったので、「.atom > nav-panel > lib > ctags.coffee」を以下のように(無理やり)カスタマイズした。

3レベルまで対応。4レベル以下は、ひとつにまとめて表示。

独自ルールを作る方法もあるみたいだけど、よくわからなかったので、パッケージの中身を直接いじっています。

#ref(nav_panel_outline2.png)

*** オリジナル [#gbae7cbc]
 Markdown: [
    {re: /^#+[ \t]*([^#]+)/, id: '%1', kind: 'Function'}
 ]

*** 修正版 [#h67045c2]

 Markdown: [
   {re: /^####+[ \t]*([^#]+)/, id: '___# %1', kind: 'Contents'}
   {re: /^###[ \t]*([^#]+)/, id: '__#%1', kind: 'Contents'}
   {re: /^##[ \t]*([^#]+)/, id: '_# %1', kind: 'Contents'}
   {re: /^#[ \t]*([^#]+)/, id: '# %1', kind: 'Contents'}
 ]

*** Feedback [#j486fb93]

Pull request してみた。

- https://github.com/Ziink/atom-nav-panel/pull/18

** その他 [#x5ceda34]

-[[auto-encoding:https://atom.io/packages/auto-encoding]] 文字コードの自動判別。
-[[Project Manager:https://github.com/danielbrodin/atom-project-manager]]

-[[atom-beautifier:https://atom.io/packages/atom-beautifier]] コードを自動整形

* Theme [#s68c3087]

-[[AtomエディタのMarkdown PreviewのCSSを実務書類的に調整する | 大石制作ブログ:http://blog.s0014.com/posts/2015-10-16-mk/]]
-[[Atomの選択範囲の背景色を変更する方法(Ver.1.13以降対応) - シラベタ:http://shirabeta.net/How-to-change-color-of-selection-region-of-Atom.html]]

* ファイルの関連付け [#db5edf4d]

Windowsの場合、下記のパスに関連付ける。アイコンは自分で変える。あと、ショートカットメニューに「Open with Atom」があるので、これでもいいかも。
ショートカットメニューから「Open with Atom」で呼び出すには、System-Settingsで「Show in file context menu」と「Show in folder context menu」をオンにしておく。

 C:\Users\user_name\AppData\Local\atom\bin\atom.cmd

-[[ATOM(windows版)と拡張子の関連付け - Qiita:http://qiita.com/pppp403/items/289a857ef6c262f0ef90]]
-[[WindowsでAtomに関連付けする方法 - Qiita:http://qiita.com/nobuhito/items/2f79ba93fbb8309535ec]]

* キーバインド [#j18df558]

個人的に使うもの

- 検索: ctrl + f
- プロジェクト内の検索: ctrl + shift + f
- ファイルの保存: ctrl + s
- 検索: ctrl + f
- 行末までを選択: Shift + end
- 1行選択: ctrl + l

||CENTER:ページ先頭に移動: Ctrl + Home||
|単語の先頭に移動: Ctrl+<-||単語の末尾に移動: Ctrl+->|
|行頭に移動: Home||行末に移動: End|
|単語の先頭まで選択: Ctrl+Shift+<-||単語の末尾まで選択: Ctrl+Shift+->|
|行頭まで選択: Shift + Home|CENTER:1行選択: ctrl + l|行末まで選択: Shift + End|
||CENTER:ページ末尾に移動: Ctrl + End||

- 一行削除: Shift + Delete

あとはまあ、標準的なアプリと同じ。viキーバインドとかにもできる。

-[[Atomショートカットキー一覧(for Windows) | パソラボ:http://pasolavo.com/web/atom-keybinding-for-windows.html]]
-[[[Mac] Atomの基本的なショートカットキー - Qiita:http://qiita.com/yamagh/items/0fb4e7bbbd3c9ef4d855]]

* 課題 [#d6594685]

日本語変換で未確定の文字範囲が判別できない。

 Atom と Brackets は優秀だ。未確定文字列と確定文字列がわかりやすく表示される。
 しかし、残念ながら未確定状態での文節選択については区別して表示はしてくれない。
 文節選択が表示できないのは、DOM の Composition Event の制限だと思われる。

-[[第2回 Qiita プライド: Atom 対 Brackets 対 Lime Text 対 Visual Studio Code - Qiita:http://qiita.com/raccy/items/50c176d0458e0c686970]]

 現在のAtomの仕組み上、無理です。Atomの基盤になっているElectronの基盤になっているChromiumでその情報を取得する方法が無いからです。 

-[[HTML5 - Atom で日本語変換中のカーソル(60486)|teratail:https://teratail.com/questions/60486]]


トップ   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS