画像をコピペでアップロードできるAtom packageをつくった


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歓迎です。