└── README.md /README.md: -------------------------------------------------------------------------------- 1 | Atom入門 2 | ================= 3 | 4 | # 目的 5 | GitHub製エディタAtomの操作方法を修得するため公式サイトの[ドキュメントページ](https://atom.io/docs/latest/)を超訳する 6 | + Guides 7 | + [Getting Started](https://atom.io/docs/v0.84.0/getting-started) 8 | + [Customizing Atom](https://atom.io/docs/v0.84.0/customizing-atom) 9 | + [Creating a Package](https://atom.io/docs/v0.84.0/creating-a-package) 10 | + [Creating a Theme](https://atom.io/docs/v0.84.0/creating-a-theme) 11 | + [Publishing a Package](https://atom.io/docs/v0.84.0/publishing-a-package) 12 | + [Contributing](https://atom.io/docs/v0.84.0/contributing) 13 | 14 | # 前提 15 | | ソフトウェア | バージョン | 備考 | 16 | |:---------------|:-------------|:------------| 17 | | OS X |10.8.5 | | 18 | | Atom |0.84.0 | | 19 | 20 | # 構成 21 | + ガイド 22 | + [はじめに](#1) 23 | + [カスタマイズ](#2) 24 | + [パッケージ作成](#3) 25 | + [テーマ作成](#4) 26 | + [パッケージ公開](#5) 27 | + [貢献](#6) 28 | 29 | # 詳細 30 | ## はじめに 31 | このガイドはできるだけ早く使えるようにするための入門です。 32 | また、このガイドはAtomの設定・テーマそして拡張をカバーしてます。 33 | 34 | ### コマンドパレット 35 | Atomで一つだけコマンドを覚えるなら```cmd-shift-P```です。 36 | ```cmd-shift-P``` を押したら現在開いている画面に関連した内容が列挙されます。 37 | このコマンドは仕組みやキーバインディングを学ぶには一番いい方法です。 38 | もっと詳しいことは[キーバインディングのカスタマイズ](https://atom.io/docs/v0.84.0/customizing-atom)を参照してください。 39 | 40 | ### 基本操作 41 | 42 | #### ファイル操作 43 | Atomのウインドウはひとつのディレクトリが対象になります。もし、コマンドラインから```atom```のコマンドを実行するならパスは指定する必要はありません。 44 | Atomは今いる作業ディレクトリにウインドウを開きます。作業ディレクトリはサイドメニューのツリービューのルートとして表示されます。 45 | 46 | ##### ファイルを見つける 47 | 一番早い方法はfuzzy finderを使うこと。 48 | ```cmd-t``` を押してファイル名を入力したらファイル検索ができます。 49 | ```cmd-b``` で今開いているファイルの検索ができます。 50 | Gitを使っているなら```cmd-shift-b```で編集中・レポジトリ未登録のファイルを検索できます。 51 | 52 | ##### ファイルの追加・移動・削除 53 | ツリービューの右クリックメニューからファイルの追加・移動・削除などコンテキストメニューを選択できます。 54 | キーボードから```a```で追加```m```で移動```delete```で削除もできます。 55 | 56 | #### 検索 57 | 58 | ##### 検索と置換 59 | ```cmd-f``` でバッファ内の検索ができます。現在開いているプロジェクト内の検索は```cmd-shift-f``` です。 60 | 61 | ##### タグジャンプ 62 | 定義メソッドなどのシンボルに移動するには```cmd-r```を押します。 63 | この操作で現在開いているファイルのシンボル一覧が表示され```cmd-t```と同様のfuzzy filterで操作できます。 64 | プロジェクトを横断的に検索するに場合は```cmd-shift-r```を押します。 65 | ただし事前にプロジェクト用の```tags```(もしく```TAGS```)ファイルを作成しておく必要があります。 66 | これは[catgs](http://ctags.sourceforge.net/)をインストールして該当プロジェクトのルートディレクトリでコマンドラインから例えば```ctags -R src/```と実行すれば作成されます。 67 | ホームディレクトリ(```~/.ctags```)に```.ctags```ファイルを作成することでカスタマイズすることができます。 68 | カスタマイズサンプルは[こちら](https://github.com/atom/symbols-view/blob/master/lib/.ctags) 69 | 70 | #### パネル分割 71 | ```cmd-k right```もしくは```cmd-k down``` で水平または垂直に画面を分割することができます。 72 | 画面を分割したら```cmd-k cmd-right```または```cmd-k cmd-down``` で画面を移動することができます。 73 | ```cmd-w``` で開いた画面を閉じることができます。 74 | ```cmd-k cmd-n``` 分割した画面をトグルできます。 75 | 76 | #### 折りたたみ 77 | 画面左側の矢印をクリックすることでブロックを折りたたむことができます。 78 | キーボード操作での折りたたみ・展開は```alt-cmd-[```と```alt-cmd-]``` です。 79 | 全部折りたたむ場合は```alt-cmd-shift-{```全部展開する場合は```alt-cmd-shift-}``` です。 80 | また、```cmd-k cmd-N``` で特定のインデントレベルで折りたたむこともできます（Nはインデントのレベル）。 81 | 82 | #### ソフトラップ 83 | ```cmd-shif-P``` でパレットを開き"wrap"と入力してToggle Soft Wrapを選択すると行を折り返し表示に切り替えることができます。 84 | デフォルトでは行はエディタの設定サイズで折り返されます。変更したい場合は設定画面の"Wrap at preferred line length"を編集してください。 85 | 86 | ### 設定 87 | ```cmd-,``` で設定画面を呼び出すことができます。この画面で設定を変えたり、パッケージをインストールしたりテーマを変えたります。 88 | 設定の詳細は[こちら](https://atom.io/docs/v0.84.0/customizing-atom) 89 | 90 | ## カスタマイズ 91 | ### テーマを変える 92 | 設定を変更する、テーマを調整するまたはパッケージをインストールするには```cmd-,```押して設定画面を開くだけです。 93 | 94 | Atomはいくつかのシンタックステーマ同様に明るいのと暗いUIテーマが存在します。自分自身のテーマを作成することもできます。 95 | 96 | テーマを変更するには設定画名を開いて(```cmd-,```) 画面左側のテーマセクションを選択します。シンタックスとUIテーマを変更するドロップダウンメニューが表示されているはずです。 97 | 98 | また、機能テーマを探したり特定のテーマを検索してインストールすることもできます。 99 | 100 | ### パッケージをインストールする 101 | 設定画面(```cmd-,```)左側の```Packages``` セクションからバンドルされていないパッケージをインストールすることができます。いろいろな機能のパッケージを見れるでしょう、またここからパッケージの検索ができます。ここに表示されているパッケージは公式パッケージ登録サイトである[atom.io](https://atom.io/packages)で公開されています。 102 | 103 | また、コマンドラインから```apm``` を使ってパケージをインストールすることができます。 104 | 以下のコマンドをターミナルで実行して```apm```がインストールされているか確認して下さい。 105 | 106 | ``` 107 | apm help install 108 | ``` 109 | 110 | ```apm``` インストールコマンド詳細メッセージが表示されているはずです。 111 | もし表示されないなら、_Atom > Install Shell Commands_ メーニューから```apm```と```atom```コマンドをインストールしてください。 112 | 113 | ```apm install``` コマンドでパッケージをインストールできます： 114 | ```apm install ``` で最新バージョンをインストール 115 | ```apm install @``` で特定のバージョンをインストール 116 | 例えば```apm install emmet@0.1.5``` で0.1.5リリースの[Emmet](https://github.com/atom/emmet)パッケージを```~/.atom/packages.``` にインストールします。 117 | 118 | ```apm``` を使って新しいパッケージを検索してインストールすることもできます: 119 | ```apm search coffee``` CoffeeScriptパッケージを探します。 120 | ```apm view emmet``` 特定のパッケージに関する詳細情報が表示されます。 121 | 122 | ### キーバインドのカスマイズ 123 | Atomのキーマップはスタイルシートに似ています。スタイルシート同様、スタイルの要素にはセレクターを使います。Atomのキーマップは特定のコンテキストイベントに関連付けられたキーストロークのセレクターを使います。これはAtomのビルトインキーマップから抜粋したサンプルです。 124 | ``` 125 | '.editor': 126 | 'enter': 'editor:newline' 127 | 128 | '.mini.editor input': 129 | 'enter': 'core:confirm' 130 | ``` 131 | キーマップは２つの異なるコンテキストの意味を```enter```に定義します。通常のエディタでは```enter```を押すことは新しい行に改行するイベントを```editor:newline```に発生させます。しかし、もし同じキー操作がmini-editorセレクタで定義されていたならばかわりに特定のセレクタに関連付けられた```core:confirm```イベントを発生させます。 132 | 133 | デフォルトでは,```~/.atom/keymap.cson```がAtom起動時に読み込まれます。常に最後に読み込まれる、Atomの主要キーマップまたはサードパーティ製パッケージに関連付けられたキーバインドを上書きできます。 134 | 135 | _Atom > Open Your Keymap_メニューから開くことができます。 136 | 137 | 実行可能なコマンドの全てを知ることができます。設定画面(```cmd-,```)を開いて_Keybindings_タブを選択してください。現在使えるキーバインディングを確認することができます。 138 | 139 | ### さらに進んだカスマイズ 140 | Atomは_~/.atom_ディレクトリにある[CoffeeScript-style JSON (CSON)](https://github.com/atom/season)で構成された```config.cson```ファイルから環境設定を読み込みます: 141 | 142 | ```json 143 | 'core': 144 | 'excludeVcsIgnoredPaths': true 145 | 'editor': 146 | 'fontSize': 18 147 | ``` 148 | 149 | 設定は```core```と```editor```という一組のネームスペースまたはパッケージでグルーピングされています。 150 | 設定メニューの_Atom > Open Your Config_からこのファイルを開くことができます。 151 | #### 主要項目の設定 152 | + ```core``` 153 | + ```disabledPackages```: 利用不可能なパッケージ名配列 154 | + ```excludeVcsIgnoredPaths```: .gitignoreで指定されたファイルは検索しない 155 | + ```ignoredNames```: Atom全般で無視するファイル名 156 | + ```projectHome```: プロジェクトが配置されていると想定されているディレクトリ 157 | + ```themes```: 読み込まれるテーマ名配列、カスケード配置 158 | + ```editor``` 159 | + ```autoIndent```: オートインデントの有効・無効基本設定(デフォルト有効) 160 | + ```nonWordCharacters```: 文字区切り用非文字 161 | + ```fontSize```: フォントサイズ 162 | + ```fontFamily```: フォント 163 | + ```invisibles```: 非表示文字コードを定義した連想配列 164 | + ```tab```: タブ文字 165 | + ```cr```: キャリッジリターン(Microsoft-style line endings) 166 | + ```eol```: ```\n``` 文字 167 | + ```space```: スペースを表現する文字 168 | + ```normalizeIndentOnPaste```: タブスペース変換の有効・無効 169 | + ```preferredLineLength```: 一行の文字数(デフォルト ```80```) 170 | + ```showInvisibles```: 非表示文字を表示するかどうか 171 | + ```showIndentGuide```: インデントガイドの表示・非表示 172 | + ```showLineNumbers```: 行番号の表示・非表示 173 | + ```softWrap```: 行折り返しの有効・無効 174 | + ```softWrapAtPreferredLineLength```: 指定した文字数で業折り返しの有効・無効 175 | + ```tabLength```: タブ内おスペース数(デフォルト ```2```) 176 | + ```fuzzyFinder``` 177 | + ```ignoredNames```: fuzzy-finderで無視するファイル名 178 | + ```whitespace``` 179 | + ```ensureSingleTrailingNewline```: ファイル末尾の複数改行を無くすかどうか 180 | + ```removeTrailingWhitespace```: 行末の空白を無くす有効・無効 181 | + ```wrap-guide``` 182 | + ```columns```: キーが現在のエディタのカラム位置に対応付けられた```pattern``` と ```column``` の連想配列。 183 | 184 | #### お手軽パーソナルハック 185 | ##### init.coffee 186 | Atomの読み込みが完了した時、_~/.atom_ディレクトリの_init.coffee_ が評価されます。これはあなたが自由にカスタマイズできる[CoffeeScript](http://coffeescript.org/)コードです。ファイル内のコードからAtomのAPIに完全アクセスできます。もしカスタマイズが広範囲になったら[パッケージ作成](https://atom.io/docs/v0.84.0/creating-a-package)も検討してみてください。 187 | 188 | _Atom > Open Your Init Script_メニューからこのファイルを開くことができます。 189 | 190 | 例えば、あなたが音の設定を有効にしたいなら_~/.atom/init.coffee_ファイルに以下のコードを追加してAtom起動時に音がなるようにしてください: 191 | ```javascript 192 | atom.beep() 193 | ``` 194 | このファイルはまたJavaScriptコードで記述された_init.js_でも有効です。 195 | 196 | ##### styles.less 197 | もしあなたが公開するつもりのないやっつけ仕事のスタイル変更をしたいなら,_~/.atom_のディレクトリに_styles.less_ファイルを追加してください。 198 | このファイルは_Atom > Open Your Stylesheet_メニューから開くことができます。 199 | 200 | 例えば、あなたがカーソルの色を変えたいなら以下のルールを_~/.atom/styles.less_に適用すること実現できます。 201 | 202 | ```css 203 | .editor .cursor { 204 | border-color: pink; 205 | } 206 | ``` 207 | 208 | LESSって何？そんな人は[ココ](http://lesscss.org/) 209 | 210 | また、このファイルはCSSで記述された_styles.css_でも有効です。 211 | 212 | ## パッケージ作成 213 | パッケージはAtomのコアです。ほとんどすべての主要機能がパッケージによってコントロールされています。"core"部品としては[file tree](https://github.com/atom/tree-view), [status bar](https://github.com/atom/status-bar), [syntax highlighting](https://github.com/atom/language-coffee-script),などが含まれています。 214 | 215 | パッケージはAtomの挙動を変えるいろいろな種類のリソースが含まれています。基本パケージのレイアウトは以下: 216 | ``` 217 | my-package/ 218 | grammars/ 219 | keymaps/ 220 | lib/ 221 | menus/ 222 | spec/ 223 | snippets/ 224 | stylesheets/ 225 | index.coffee 226 | package.json 227 | ``` 228 | パッケージにはこれらディレクトリすべてが必要というわけではありません。 229 | 230 | チュートリアルは[こちら](https://atom.io/docs/v0.84.0/your-first-package)です。 231 | 232 | また、TexMateのコンバートガイド([TextMate bundles](https://atom.io/docs/v0.84.0/converting-a-text-mate-bundle),[TextMate themes](https://atom.io/docs/v0.84.0/converting-a-text-mate-theme))もあります。 233 | 234 | ### package.json 235 | 236 | [npm packages](http://en.wikipedia.org/wiki/Npm_(software))同様、Atomパッケージは最上位ディレクトリに_package.json_ファイルが含まれています。このファイルにはリソース読み込みに必要な"main"モジュールパス,依存ライブラリそして特定のマニフェストなどパッケージ関するメタ情報が含まれています。 237 | 238 | 加えて標準の[npm package.json keys](https://www.npmjs.org/doc/json.html)が使えます。Atomのpackage.jsonファイルは追加項目を持っています。 239 | 240 | + ```main``` (必須): パッケージの起点となるCoffeeScriptファイルのパス 241 | + ```stylesheets``` (オプショナル): パッケージで読み込む必要のあるスタイルシートの順番を特定するための文字列。指定されていない場合は_stylesheets_ディレクトリにアルファベット順にスタイルシートを追加します。 242 | + ```keymaps``` (オプショナル): パッケージで読み込む必要のあるキーマップを特定するための文字列。指定されていない場合は_keymaps_ディレクトリにアルファベット順にマッピングを追加します。 243 | + ```menus``` (オプショナル): パッケージで読み込む必要のあるメニューを特定するための文字列。指定されていない場合は_menus_ディレクトリにアルファベット順にマッピングを追加します。 244 | + ```snippets``` (オプショナル): パッケージで読み込む必要のあるスニペットを特定するための文字列。指定されていない場合は_nippets_ディレクトリにアルファベット順にスニペットを追加します。 245 | + ```activationEvents``` (オプショナル): パッケージ有効化時にトリガーされるイベントを特定するための文字列。トリガーされるイベントに達するまでパッケージの読み込みを遅らせることができます。 246 | 247 | ### ソースコード 248 | 249 | もしAtomの挙動を_index.conffee_からエクスポート（または_package.json_ファイルの```main```キーで指定されているファイル）できるよう拡張したいならパッケージを単一の上位レベルモジュールに含めなければならない。 250 | 251 | あなたの上位レベルモジュールパッケージはAtomの拡張ライフサイクルを管理するシングルトンオブジェクトです。たとえあなたのパッケージが１０種類の異なるビューそして異なるDOMパーツの追加を作成したとしてもそれらはすべて上位オブジェクトから管理されます。 252 | 253 | あなたの上位レベルモジュールパッケージは以下のように実装してください: 254 | 255 | + ```activate(state)```: パッケージが有効になった時呼び出されることを要求するメソッド。もし```serialize()```メソッドを実行するモジュールならウインドウが最後にシリアライズされた状態のデータをパスします。 256 | 257 | + ```serialize()```: ウインドウが閉じられた時に呼び出されるオプショナルメソッド。コンポーネントの状態をJSONにして返します。あとでウインドウを開いた時返されるデータは以前のビューの状態を再現するためモジュールの```activate```メソッドが実行されたものです。 258 | 259 | + deactivate(): ウインドウを閉じた時に呼び出されるオプショナルメソッド。もしパッケージがファイルや外部リソースを別の方法で保持しているのを監視しているならばそれらはここで開放します。単にウインドウになにか記述しているだけならそれはいずれ開放されるので心配する必要はありません。 260 | 261 | ### 簡単なパッケージコード 262 | 263 | ディレクトリは以下のようになっています: 264 | ``` 265 | my-package/ 266 | package.json 267 | index.coffee 268 | lib/ 269 | my-package.coffee 270 | ``` 271 | ```index.coffee``` は: 272 | ```coffeescript 273 | module.exports = require "./lib/my-package" 274 | ``` 275 | ```my-package/my-package.coffee``` は以下のように始める: 276 | ```coffeescript 277 | module.exports = 278 | activate: (state) -> # ... 279 | deactivate: -> # ... 280 | serialize: -> # ... 281 | ``` 282 | シンプルな規約を通じてあなたのパッケージはAtomのAPIにアクセスします。初期開発の段階なのでAPIが変わったりpublicとprivateの境界をはっきりとしていないことを念頭においていください。また、欲しいAPIがなければ我々と共同で作りましょう。あなたのようなパッケージ作成者のニーズを基板にしたAtomのAPIを作ることが我々のゴールです。 283 | 284 | ### スタイルシート 285 | 286 | あなたのパッケージ用のスタイルシートは_stylesheets_ディレクトリに配置してください。ディレクトリに配置されたスタイルシートはパッケージが有効化された時点で読み込まれDOMにアタッチされます。スタイルシートはCSSまたは[LESS](http://lesscss.org/)で記述できます。 287 | 288 | 理想的にはあなたはスタイリングの方法を知る必要はない。我々はAtomとシームレスにフィットするパッケージ用の色とUI要素を定義した標準コンポーネントセットを提供しています。コマンドパレット(```cmd-shift-P```)を開いて_styleguide_を検索するまたは```cmd-ctrl-shift-G```を押してスタイルガイドを開けば全てのAtomUIコンポーネントを見ることができます。 289 | 290 | 特定のスタイリングが必要なら、スタイルシートパッケージ内の構造スタイルのみで続けてください。もし、色とサイズを詳細化しなければならないなら既に有効なテーマである[ui-variables.less](https://github.com/atom/atom-dark-ui/blob/master/stylesheets/ui-variables.less)を使ってください。詳細は[theme variables docs](https://atom.io/docs/v0.84.0/theme-variables)を見てください。もしこのガイドラインに従ったならあなたのパッケージはすぐに使える良いテーマとなるでしょう。 291 | 292 | _package.json_ファイル内のオプショナル```stylesheets```文字列は読み込み時スタイルシートを名前順に並べる順番を特定します、それがなければアルファベット順にスタイルシートを読み込みます。 293 | 294 | ### キーマップ 295 | 296 | 個別拡張を使ってキーバインディングを共通化することを推奨します、特に既に新しいコマンドを追加しているなら: 297 | ```cson 298 | '.tree-view-scroller': 299 | 'ctrl-V': 'changer:magic' 300 | ``` 301 | キーマップは_keymaps_サブディレクトリに配置されています。デフォルトではキーマップは全てアルファベット順に読み込まれます。_package.json_ファイル内のオプショナル```keymas```文字列は読み込むキーマップと順番を特定することができます。 302 | 303 | キーバインディングはどのキー要素が押されたを特定することで実行されます。上記の例では```changer:magic```コマンドは```.tree-view-scroller```要素上で```ctrl-V```を押した時に実行されます。 304 | 305 | キーマップがどのように動くかの詳細は[main keymaps documentation](https://atom.io/docs/v0.84.0/advanced/keymaps)を参照してください。 306 | 307 | ### メニュー 308 | 309 | メニューは_menus_サブディレクトリに配置されています。デフォルトでは全てのメニューはアルファベット順に読み込まれます。_package.json_ファイル内のオプショナル```menus```文字列は読み込むメニューと順番を特定することができます。 310 | 311 | #### アプリケーションメニュー 312 | 313 | パッケージで共通動作を特定の要素に固定化されないようなアプリケーションメニューを作ることを推奨します。 314 | ```json 315 | 'menu': [ 316 | { 317 | 'label': 'Packages' 318 | 'submenu': [ 319 | { 320 | 'label': 'My Package' 321 | 'submenu': [ 322 | { 323 | 'label': 'Toggle' 324 | 'command': 'my-package:toggle' 325 | } 326 | ] 327 | } 328 | ] 329 | } 330 | ] 331 | ``` 332 | あなただけのアプリケーションメニューを追加するには単純に_menus_内の設定ファイルの一番上に```menu```キーを追加するだけです。これはJSONまた[CSON](https://github.com/atom/season)ファイルが使えます。 333 | 334 | あなたが設定したテンプレートはその他のパッケージと読み込まれた順番にマージされます。 335 | 336 | #### コンテクストメニュー 337 | 338 | ツリービューにファイルを追加例のようにインターフェースの特定部分にリンクするコマンドをコンテクストメニューで明確化することを推奨する。 339 | ```JSON 340 | 'context-menu': 341 | '.tree-view': 342 | 'Add file': 'tree-view:add-file' 343 | '.workspace': 344 | 'Inspect Element': 'core:inspect' 345 | ``` 346 | あなただけのアプリケーションメニューを追加するには単純に_menus_内の設定ファイルの一番上に```context-menu```キーを追加するだけです。これはJSONまた[CSON](https://github.com/atom/season)ファイルが使えます。 347 | 348 | コンテクストメニューは選択された要素とセレクターにマッチした要素のメニューアイテム全てを判定して作成します（読み込まれた順番に）。このプロセスはDOMツリーの先頭要素に達するまで繰り返されます。 349 | 350 | 上記の例では```Add file```アイテムはフォーカスされたアイテムまたは```tree-view```クラスが適用された親アイテムにのみ適用されます。 351 | 352 | ### スニペット 353 | 354 | _snippets_ディレクトリには繰り返し入力するテキストを早く入力するための言語スニペットを配置することができます。 355 | ``` 356 | ".source.coffee .specs": 357 | "Expect": 358 | prefix: "ex" 359 | body: "expect($1).to$2" 360 | "Describe": 361 | prefix: "de" 362 | body: """ 363 | describe "${1:description}", -> 364 | ${2:body} 365 | """ 366 | ``` 367 | スニペットファイルには最上位(```.source.coffee .spec```)にスコープセレクタを含んでいます。それぞれのスコープセレクタはそれぞれの名前(```Expect``` ,```Describe```)をキーとしたハッシュを含んでいます。それぞれのスニペットは```prefix```と```body```キーで特定される。```prefix```は```tab```キーを押してオートコンプリートする前に表示される最初の文字を表しています。```body```は自動入力されるテキストです。```$1```,```$2```,のようなプレースホルダを使って自動入力されたテキスト内で```tab```を押して移動するようにできます。 368 | 369 | ディレクトリ内のすべてのファイルは_package.json_がスニペットキーを提供していない限り自動的に読み込まれます。スコープアイテム同様、同じ項目のスコープにマッチする２つのスニペットがある場合は後に読み込んだスニペットが上書きします。 370 | 371 | ### 文法 372 | 373 | もし、新しい言語の文法を開発しているならファイルを_grammars_ディレクトリに配置したいと思うでしょう。それぞれの文法は```match```と```captures```の２つのキーで構成されています。```match```は強調したいパターンを認識するための正規表現です。一方、```captures```はそれぞれのマッチングするグループで何をするかを表すオブジェクトです。 374 | 375 | 例: 376 | ``` 377 | { 378 | 'match': '(?:^|\\s)(__[^_]+__)' 379 | 'captures': 380 | '1': 'name': 'markup.bold.gfm' 381 | } 382 | ``` 383 | これは```((__[^_]+__))```にマッチしたものはそれに適用されるトークン```markup.bold.gfm```を持っていることを意味します。 384 | 385 | シングルグループを取得するにはシンプルに```name```キーを代用するだけ: 386 | ``` 387 | { 388 | 'match': '^#{1,6}\\s+.+$' 389 | 'name': 'markup.heading.gfm' 390 | } 391 | ``` 392 | これはマークダウンのヘッダー行(```#```,```##```,```###```)が```markup.heading.gfm```トークンで適用されることを指しています。 393 | 394 | これらトークンの意味に関しては[section 12.4 of the TextMate Manual](http://manual.macromates.com/en/language_grammars.html)にさらなる情報があります。 395 | 396 | また、あなたの文法は拡張サポートファイル一覧を表す```filetypes```文字列を含めることができる。 397 | ``` 398 | 'fileTypes': [ 399 | 'markdown' 400 | 'md' 401 | 'mkd' 402 | 'mkdown' 403 | 'ron' 404 | ] 405 | ``` 406 | ### 外部リソース 407 | 408 | パッケージ内のイメージやフォントといった外部リソースを出すのもの共通です。HTMLやCSS内のリソースを参照するのを簡単にするのにパッケージ内の```atom```プロトコルURLsを使うことができます。 409 | 410 | URLsのフォーマットは```atom://package-name/relative-path-to-package-of-resource```, 例えば, ```atom://image-view/images/transparent-background.gif```は ```~/.atom/packages/image-view/images/transparent-background.gif```と等価です。 411 | 412 | またテーマの中でも```atom```プロトコルは使えます。 413 | 414 | ### テスト作成 415 | 416 | パッケージにはテストがなければならない、そしてそれらは_spec_ディレクトリに配置されている。テストはAtomで実行できる。 417 | 418 | 実際には[Jasmin](http://jasmine.github.io/)がテストを実行します。なのでパッケージ内で有効なDSLを扱うとができる。 419 | 420 | ### テスト実行 421 | 422 | テストスイートを書いたら、```cmd-alt-ctrl-p```を押す, 423 | または_Developer > Run Package Specs_メニューからテストを実行させることができます。 424 | 425 | またコマンドラインから```apm test```コマンドを実行してテストをすることもできます。テスト出力と結果がコンソールに出力されテストが成功したか失敗したかの詳細コードを返します。 426 | 427 | ### 公開 428 | 429 | AtomにはapmというAtomパッケージを公開するために使うコマンドラインユーティリティがバンドルされています。 430 | 431 | パッケージを作成して配布する準備ができたら以下の操作でパッケージを公開できます。 432 | ``` 433 | cd my-package 434 | apm publish minor 435 | ``` 436 | これは```package.json```を新しいマイナー```version```にアップデートします。変更をコミットして新しい[Git tag](http://git-scm.com/book/en/Git-Basics-Tagging)をつけてパッケージをアップロード登録してください。 437 | 438 | ```amp help publish```を実行すれば有効なオプションを確認できます。そして、```apm help```でその他の有効なコマンドを確認できます。 439 | 440 | ## テーマ作成 441 | 442 | AtomのインターフェースはHTMLで描画され[LESS](http://lesscss.org)を経由して整形されます。LESSを知らなくてくても心配しないでください、CSSみたいなものです、しかしいくつかの拡張があります。 443 | 444 | Atomは２種類のテーマをサポートしています:UIとシンタックスです。UIテーマはツリービュー、タブ、ドロップダウンリストそしてステータスバーなどの要素を整形します。シンタックステーマはエディタ内のコードを整形します。 445 | 446 | _Atom > Preference..._メニューを選択制して表示される画面左側の_Themes_セクションの設定画面からテーマのインストールと変更ができます。 447 | 448 | ### はじめに 449 | 450 | テーマはとてもわかり易いのですが始める前にいくつかのことに親しんでおけば助けになります: 451 | 452 | + LESSはCSSをサポートします、それ以外に変数など便利な機能があります。もしシンタックスに親しみたいなら[ここ](https://speakerdeck.com/danmatthews/less-css)でしばし時間を使ってください。 453 | + 同様に_[package.json](https://atom.io/docs/v0.85.0/creating-a-package)_のコンセプトも復習したいでしょう。このファイルはあなたのテーマをAtomユーザーに配布することを手助けするために使われます。 454 | + あなたのテーマである_package.json_にはAtomにテーマとして認識させて読み込むための```"theme"```キーと```"ui"```または```"syntax"```バリューを含めなければならない。 455 | + 存在するテーマをインストールとしたり[atom.io](https://atom.io)からフォークできます。 456 | 457 | ### シンタックステーマ作成 458 | 459 | Let's create your first theme. 460 | あなたの最初のテーマを作ってみましょう。 461 | 462 | 始めるにあたって、```cmd-shift-P```を押して新しいテーマパッケージを作るために"Generate Sytax Theme"と入力してください。"Generate Syntax Theme"と選択するとテーマを作成する場所になるパスを質問されます。我々の_motif-syntax_を呼び出してみましょう。**Tip:**シンタックステーマは_-syntax_で終わります。 463 | 464 | Atomは作成用のフォルダとファイルのデフォルトセットを新しいウインドウを表示します、_motif-syntax_テーマが表示されているでしょう。もし設定ビューを開いて(```cmd-,```)左側のテーマセクションを選択したなら_Syntax　Theme_ドロップダウンリストの中に_Motif_テーマを見つけることができるでしょう。それを選択して有効化してください、そうすればエディタを開いた時に新しい_motif-syntax_が確認できます。 465 | 466 | _stylesheets/colors.less_を開いて既に定義されている色項目を編集してください。例えば```@red```を```#f4c2c1```に変更する。 467 | 468 | _stylesheets/base.less_を開いて既に定義されているセレクター項目を編集してください。これらセレクタはコメント、文字列そして画面左の行番号など複数のコードで整形されます。 469 | 470 | 例として、```.gutter``` ```background-color```を```@red```に変えてみましょう 471 | 472 | Atomウインドウ内で変更が反映されたか確認するため```cmd-alt-ctrl-l```を押してAtomをリロードしてしください。すごくいいね！ 473 | 474 | **Tip:**開発モードでatomウインドウを開いて変更を確認するリロード操作を回避することができます。開発モードでAtomウインドウを開いてターミナルから```atom --dev .```を```cmd-shift-o```を使って実行してくださいまたは開発モードメニューの_View > Developer > Open in Dev Mode_を使って。あたなテーマを編集した時に変更がすぐに反映されます！ 475 | 476 | ### インターフェーステーマ作成 477 | 478 | インターフェーステーマは[core themes](https://atom.io/docs/v0.85.0/theme-variables)で提供される変数をすべて含んできいる```ui-variables.less```ファイルで提供しなければならい。 479 | 480 | インターフェースUIテーマを作るには以下の手順: 481 | 482 | 1. Fork one of the following repositories: 483 | 1. 以下のレポジトリをフォークする: 484 | + [atom-dark-ui](https://github.com/atom/atom-dark-ui) 485 | + [atom-light-ui](https://github.com/atom/atom-light-ui) 486 | 1. ローカルにフォークしたレポジトリをクローンする 487 | 1. フォークしたテーマのディレクトリをターミナルで開く 488 | 1. ターミナルから```atom --dev .```を実行して開発モードで新しいテーマを開くまたは_View > Developer > Open in Dev Mode_メニューを使う。 489 | 1. テーマ内の```package.json```ファイルのテーマ名を変える 490 | 1. Name your theme end with a -ui. i.e. super-white-ui 491 | 1. 最後を```-ui```にして名前をつける。すなわち```super-white-ui``` 492 | 1. ```apm link```を実行して```~/.atom/packages```へレポジトリのシンボルリンクをはる 493 | 1. ```cmd-alt-ctrl-L```を使ってAtomをリロードする 494 | 1. 設定ビューの_Themes section_内の_UI Theme_ドロップダウンリストからテーマを有効化する 495 | 1. 完了！開発モードでテーマを開いているなら、変更はリロードしなくてもすぐに反映される 496 | 497 | ### 開発フロー 498 | 499 | テーマ開発を早く簡単に手助けをするツールがいくつかあります。 500 | 501 | #### ライブリロード 502 | 503 | いちいちテーマを変更した後に```cmd-alt-ctrl-L```を押すのは理想的ではない。Atomは開発モードウインドウでの[live updating](https://github.com/atom/dev-live-reload)をサポートしている。 504 | 505 | 開発モードウインドウを有効にするには: 506 | 507 | 1. **_View > Developer > Open in Dev Mode_**メニューまたは```cmd-shift-o```ショートカットから開発ウインドウのテーマディレクトリを開く。 508 | 1. Make a change to your theme file and save it. Your change should be immediately applied! 509 | 1. テーマを変更して保存する。変更はすぐに適用される！ 510 | 511 | もし全てのテーマをいつでもリロードしたいなら```cmd-ctrl-shift-r```ショートカットが使えます。 512 | 513 | #### 開発ツール 514 | 515 | AtomはChrome browserをベースにしています。そしてChrome's Developer Toolsをサポートしている。_View > Toggle Developer Tools_メニューまたは```cmd-alt-i```ショートカットから開発画面を開くことができます。 516 | 517 | 開発ツールは要素を詳細に確認できCSSプロパティを見ることができるようにしてくれます。 518 | 519 | ![devtools-img](https://f.cloud.github.com/assets/69169/1347391/2d51f91c-36af-11e3-806f-f7b334af43e9.png) 520 | 521 | 短い解説がグーグルの[拡張ガイド](https://developers.google.com/chrome-developer-tools/docs/elements)にあります。 522 | 523 | #### Atomスタイルガイド 524 | 525 | もしインターフェステーマを作っているなら、作成したテーマがシステム内のコンポーネントをどのように変更したかを確認する方法を知りたいと思うだろう。[styleguide](https://github.com/atom/styleguide)はAtomがサポートする全てのコンポーネントを描画するページです。 526 | 527 | styleguideを開くには、コマンドパレットを開き(```cmd-shift-P```)_styleguide_を検索するか```cmd-ctrl-shift-g```ショートカットを使ってください。 528 | 529 | ![](https://f.cloud.github.com/assets/69169/1347390/2d431d98-36af-11e3-8f8e-3f4ce1e67adb.png) 530 | ## パッケージ公開 531 | 532 | このガイドはパッケージやテーマを[atom.io](https://atom.io/)の登録パッケージに公開する方法を説明します。 533 | 534 | パッケージを公開することで他の人もAtomにインストールして使うことができるようになります。あなたが作ったものを共有しフィードバックを得て他の人に貢献することは素晴らしいことです。 535 | 536 | このガイドではあなたのパッケージ名を```my-package```と仮定していますがもっといい名前をつけることができます。 537 | 538 | ### apmインストール 539 | 540 | Atomに同梱されている```apm```コマンドラインユーティリティはatom.io登録パッケージに公開する手助けをしてくれます。 541 | 542 | ターミナルから以下のコマンドを実行して```apm```がインストールされているかを確認して下さい: 543 | 544 | ``` 545 | apm help publish 546 | ``` 547 | ```apm publish```コマンドの詳細を確認することができます。 548 | 549 | もし動作しないのであればAtomを起動して_Atom > Install Shell Commmands_メニューから```apm```と```atom```コマンドをインストールしてください。 550 | 551 | ### パッケージを準備 552 | 553 | もし[your first package](https://atom.io/docs/v0.85.0/your-first-package)を済ませているならもう公開の準備はできているので次のステップは省略することができます。 554 | 555 | If not, there are a few things you should check before publishing: 556 | もしそうでなければ公開前にいくつかチェックする項目があります: 557 | 558 | + _package.json_ファイルは```name```,```description```そして```repository```フィールドを持っています 559 | + _package.json_ファイルは```"0.0.0"の値をもつ```version```フィールドを持っています 560 | + _package.json_ファイルは```"eingines":{"atom":>=0.50.0"}```のような形でAtomに含まれている```engines```フィールドを持っています 561 | + パッケージはルートに```README.md```ファイルを持っています 562 | + Gitレポジトリ内のパッケージは[GitHub](https://github.com/)にプッシュされます。まだパッケージをGitHubに登録していないなら[このガイド](https://guides.github.com/overviews/desktop/)に従ってください。 563 | 564 | ### パッケージを公開 565 | 566 | パッケージを公開する前にすでに同じ名前のパッケージがatom.ioの公開されていないかチェックする時間を取るのは良い考えです。```http://atom.io/packages/my-package```を訪れてパッケージが既に存在するか確認することができます。 567 | 568 | さあ、```apm publish```コマンドがすることを復習しましょう: 569 | 570 | 1. 初めての公開ならばatom.ioにパッケージ名を登録する 571 | 1. _package.json_ファイルの```version```フィールドを更新してコミットする 572 | 1. 公開されるバージョンの[Gitタグ](http://git-scm.com/book/en/Git-Basics-Tagging)を作る 573 | 1. タグと現在のブランチをGitHubにプッシュする 574 | 1. 公開されたバージョンでatom.ioを更新する 575 | 576 | さあ、以下のコマンドを実行してパッケージを公開しましょう: 577 | 578 | ``` 579 | cd ~/github/my-package 580 | apm publish minor 581 | ``` 582 | もしこれが最初の公開パッケージなら、```apm publish```コマンドはあなたのGitHubユーザー名とパスワードを確認してきます。これは公開する上で必須ですそして公開する最初の１回だけ入力する必要があります。いちどログインすれば証明は安全にあなたの[keychain](http://en.wikipedia.org/wiki/Keychain_(Apple))に保存されます。 583 | 584 | :tada: あなたのパッケージは公開されatom.io内で使うことができるようになりました。```http://atom.io/packages/my-package```にアクセスすればあなたのパッケージページが確認できるはずです。 585 | 586 | 公開コマンドの```minor```オプションは公開前にバージョンの２番めの番号を加算します。なので公開されるバージョンは```0.1.0```となり```v0.1.0```のGitタグが作られるでしょう。 587 | 588 | 将来あなたは```1.0.0```バージョンを公開するため```apm publish major```コマンドを実行するでしょう。しかし、すでに最初のバージョンを公開しているのだからマイナーリリースから始めるのは良い考えでしょう。 589 | 590 | ### さらに詳しく 591 | 592 | パッケージリリースのバージョンに関してもっと学びたいのであれば[semantic versioning](http://semver.org/)を参照してください。 593 | 594 | ## 貢献 595 | 以下はAtomパッケージへ貢献するためのGitHub上にホストされている[Atom Organization](https://github.com/atom)ガイドラインです。もし、パッケージの問題がはっきりしないまたはAtom coreの部分に問題があればアプリケーションかEメール[atom@github.com](mailto:atom@github.com)までフィードバックお願いします。 596 | 597 | ### イシューをあげる 598 | 599 | + スクリーンショットかアニメーションGIFファイルをいれる:とても助かる 600 | + 期待していた振る舞いそしてEmacs,vi,Xcodeなどで他の同様の振る舞い 601 | + 開発ツール(```alt-cmd-i```)でチェックしたエラーとスタックトレース 602 | + もしレポートがクラッシュしているならばConsole.appのスタックトレース 603 | + 同様の問題がすでに出されていないかさっと調べる 604 | 605 | ### パッケージをハッキングする 606 | 607 | #### クローン 608 | 609 | 最初のステップは自分のクローンを作ることです。gitを使ってサクっとできます。または```apm develop```コマンドを使って```package.json```の```repository```フィールドのパッケージを元にクローンを作ることができます。 610 | 611 | 例えば、もし```tree-view```パッケージを変更したいのならば以下のコマンドを実行する: 612 | ``` 613 | > apm develop tree-view 614 | Cloning https://github.com/atom/tree-view ✓ 615 | Installing modules ✓ 616 | ~/.atom/dev/packages/tree-view -> ~/github/tree-view 617 | ``` 618 | ```tree-view``` は ```~/github```に複製されます。もし他の場所に保存したいなら環境変数```ATOM_REPOS_HOME```で特定してください。 619 | 620 | #### 開発モード実行 621 | 622 | Atom内のパッケージを編集するのは経験の一環です:Atomを使ってAtomをカスタマイズします。もしなにか壊したら何が起こるでしょうか？途中で使い物にならなくなるようなバージョンのAtomを使いたくないでしょう。そんなわけで作業中は**開発モード**のパッケージだけを読み込みたいでしょう。通常は**安定モード**で編集して変更をテストしたい時だけ切り替えることができます。 623 | 624 | 開発モードウインドウを開くには通常は```cmd-shift-o```に関連付けられている"Application: Open Dev"コマンドを使う。またコマンドラインから```atom--dev```を使って開発モードを開くこともできます。 625 | 626 | 開発モードでパッケージを読み込むには、```~/.atom/dev/packages```へのシンボルリンクを作ってください。これは```apm develop```でパッケージを複製した時に自動的に実行されます。また、複製したパッケージディレクトリから```apm link --dev```と```apm unlink --dev```を実行することでシンボルリンクを作ったり削除したりできます。 627 | 628 | #### 依存関係 629 | 630 | 最後に、パッケージディレクトリ内で```apm install```を実行してパッケージ依存をインストールする必要があります。このステップは```apm develop```を最初に実行した時自動的に実行されます。しかし、アップストリームの変更をプルした後は```apm update```を実行して依存関係を最新にアップデートし続けたいでしょう。 631 | 632 | ### プルリクエストを送る 633 | 634 | #### コードガイドライン 635 | 636 | + スクリーンショットとアニメーションGIFは可能な限りいつでもプルリクエストに含める 637 | + [CoffeeScript](https://atom.io/docs/v0.85.0/contributing#coffeescript-styleguide), [JavaScript](https://github.com/styleguide/javascript)、そして[CSS](https://github.com/styleguide/css)のスタイルガイドに従ってください 638 | + よく考えられ、しっかり構造化されてた[Jasmine](http://jasmine.github.io/)スペックを含める 639 | + [ドキュメントスタイルガイド](https://atom.io/docs/v0.85.0/contributing#documentation-styleguide)に従って文書化する 640 | + ファイルの最後に改行を入れる 641 | + 以下の順番に配置する必要がある 642 | + ビルトインNodeモジュール(```path```とか) 643 | + ビルトインAtomとAtom Shellモジュール(```atom```,```shell``とか) 644 | + ローカルモジュール(相対パスを使う) 645 | + 以下の順番でクラスプロパティを配置する: 646 | + クラスメソッドとプロパティ(メソッドは@から始める) 647 | + インスタンスメソッドとプロパティ 648 | + Avoid platform-dependent code: 649 | + プラットフォーム依存のコードは避ける: 650 | + ホームディレクトリを取得するには```require('atom').fs.getHomeDirectory()```を使う 651 | + ファイル名を結合するには```path.join()```を使う 652 | + Use os.tmpdir() rather than /tmp when you need to reference the temporary directory. 653 | + テンポラリディレクトリを参照する時は```/tmp```よりむしろ```os.tmpdir()```を使う 654 | 655 | #### コミットメッセージガイドライン 656 | 657 | + 現在形を使う("機能を追加した"ではなく"機能を追加する") 658 | + 命令形を使う("カーソルを動かして"ではなく"カーソルを動かす") 659 | + 最初の行を72文字以下に抑える 660 | + イシューやプルリクエストへの参照をたくさんつける 661 | + メッセージの最初につける利用可能な絵文字を検討する 662 | + :lipstick: コードのフォーマットや構造を改善した時 663 | + :racehorse: パフォーマンスを完全した時 664 | + :non-potable_water: メモリリークを直した時 665 | + :memo: ドキュメントを書いた時 666 | + :bulb: 詳細は絵文字チートシートを確認 667 | 668 | ### CoffeeScriptスタイルガイド 669 | 670 | + もしコードの可読性を向上させたいなら丸カッコを使う 671 | + Prefer alphabetic keywords to symbolic keywords: 672 | + シンボルキーワードよりアルファベットキーワードを使う 673 | + ```a == b```の代わりに```a is b```を使う 674 | + ハッシュ文字列内の波括弧内のスペースは避ける 675 | + ```{ a: 1, b: 2 }```ではなく```{a: 1, b: 2}``` 676 | + パラメータをセットするイコール記号の周りはスペース無しで: 677 | + ```clear = (count = 1) ->```ではなく```clear = (count=1) -> ``` 678 | + メソッドとメソッドの間には空白行を入れる 679 | 680 | ### ドキュメントスタイルガイド 681 | 682 | + [TomDoc](http://tomdoc.org/)を使う 683 | + [Markdown](https://daringfireball.net/projects/markdown/)を使う 684 | + Reference methods and classes in markdown with the custom {} notation: 685 | + マークダウン内の参照メソッドとクラスはカスタム```{}```記号で: 686 | + クラス参照```{ClassName}``` 687 | + インスタンスメソッド参照```{ClassName::methodName}``` 688 | + クラスメソッド参照```{ClassName.methodName}``` 689 | 690 | #### 例 691 | 692 | ```coffeescript 693 | # Public: Disable the package with the given name. 694 | 695 | # This method emits multiple events: 696 | # 697 | # * `package-will-be-disabled` - before the package is disabled. 698 | # * `package-disabled` - after the package is disabled. 699 | # 700 | # name - The {String} name of the package to disable. 701 | # options - The {Object} with disable options (default: {}): 702 | # :trackTime - `true` to track the amount of time disabling took. 703 | # :ignoreErrors - `true` to catch and ignore errors thrown. 704 | # callback - The {Function} to call after the package has been disabled. 705 | # 706 | # Returns `undefined`. 707 | disablePackage: (name, options, callback) -> 708 | ``` 709 | # 参照 710 | [Atom](https://atom.io/) 711 | [Documentation](https://atom.io/docs/latest/) 712 | [GitHub Flavored Markdown](https://help.github.com/articles/github-flavored-markdown) 713 | [Atom Organization](https://github.com/atom) 714 | --------------------------------------------------------------------------------