LoginSignup
9
13

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-04-23

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

9
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
13