2015/06/06 追記
数日前からGyazoAPIがエラーを返すようになってしまったので、imgurのAPIを使うようにしたv0.3.0をリリースしました。こちらはaccess_tokenなしでアップロードできるので、めんどうな設定は不要です!
前に話題になってたけど、GithubやSlack, Qiitaはテキストフォームに画像をコピペできて便利(Safariだとできなくて不便なのだけど・・・)
Atomでmarkdown書いてる時にも同じことをやりたくて、image-copipe というpackageをつくってみました。
設定
Gyazo APIを使っています。ただOAuthまでは対応してないので、各自でaccess_tokenを取得してください。
ターミナルからgyazoに画像をアップロードする - Qiita にあるように、ユーザー登録して、アプリケーションを登録するだけなので、簡単にできます。
access_tokenを取得したら、Atomでimage-copipeの設定画面を開いて、入力してください。
これでGithubやSlack, Qiitaみたいに画像をコピペできます!
Tipsやはまったところ
packageの開発中に、変更を反映するには
上部のメニューからView → Reloadすれば、変更が反映されます。
Atom自体を再起動しなくて大丈夫です。
依存モジュールの追加
package.jsonのdependenciesに追加したら、cmd + shift + P
でコマンドパレット開き、Update Package Dependencies: Update
を実行します。
pasteイベントが使えない
なぜかAtomではpasteイベントが使えませんでした。なので、今回はkeydownイベントを拾って、キーコードをチェックしています。
# 雑に cmd + v を判定
if (e.metaKey && e.keyCode == 86)
カーソルのある位置にテキストを挿入したり置換したりするには
Text周りのAtomのAPIがいまいち理解できずに困ったのですが、こんな感じでできました。
# insert loading text
editor = atom.workspace.getActiveEditor()
range = editor.insertText('Uploading...');
@post img, (imgUrl) ->
# replace loading text to markdown img format
markdown = "![](#{imgUrl})"
editor.setTextInBufferRange(range[0], markdown)
editor.insertText()
が挿入したテキストのRangeを返すので、それを使ってAPIのレスポンスが返ってきたらmarkdownと置換しています。
Atom起動したら即使えるようにするには
Atomは、packageを起動したらactivateというメソッドが呼ばれるようになっています。ただし、package.jsonにactivationCommands
が設定されている場合は、そのコマンドが呼ばれるまで、activateメソッドは呼ばれません。
起動したら即activateを呼ぶには、package.sonからactivationCommands
を削除すればOKです。
補足
Atomの起動を高速化するため、基本的にはactivationCommands
を設定した方がよいです。ただ、わざわざショートカットキーかメニューをクリックして、packageをactivateする手間が増えます。
今回は、できる限りさくっと使えるようにしたかったので、activationCommands
を削除しました。
clipboardの扱い
electron/clipboard.md at master · atom/electron を参考にしたら、すんなりできました。
ただ、safariで右クリックから画像をコピーしたときに、なぜかリンク先のURLもテキストとして一緒にコピーされてしまうので、無理やり空文字入れてクリアしました。
clipboard.writeText('')
configが反映されない
defaultも設定しないと、画面に反映されないっぽいです。
module.exports =
config:
gyazoAccessToken:
type: 'string'
default: ''
所感
あんまりAtomのドキュメントを読み込まずにがっとつくったので、間違ってる箇所やもっと良いやり方あれば、教えてください。PR歓迎です。