KazIgu SandBox

作るぜー

Akiyamarkdownをelectronで作ってみた

Others

以前Akiyamarkdownで紹介したSublime TextのpluginであるAkiyamarkdownをElectronのアプリにしてみた
ダウンロードはこちらからどうぞ

改めてAkiyamarkdownとは

弊社saib studio代表秋山の手癖によって誕生したメモ書きの記法である。
これといった利点は特に無い。

こんなの

なにができるの?

秋山曰く

別になにもできないよ!  
秋山がメモ書きしやすくなるだけだよ!  
今後この記法をベースに、リアルタイムにツリー図が作成されるツールを開発予定だよ!

とのこと
リアルタイムにツリー図が作成されるツールを開発予定だと・・・?
どうせ作るの俺なのに

結局なんなの?

なんなんだろう・・・ インデントは全角スペースだし→やら・やら■のオンパレードです
ただ意外と議事録取りやすい
markdownより優しい
ちなみにakiyamarkdownからmarkdownに変換する機能も付けました

実装にあたって

githubはこちら
実装に使ったものはざっくり2つ

Electron

言わずと知れたnodeとhtml5でいい感じにデスクトップアプリが作れるgithub製のツール
Babelとかで書くのが流行ってる気配だけど気にせずcoffeeで実装した

ハマったポイントはコピペ周り
ローカルでelectron .で起動した際にはコピーもペーストも効くのにbuildしたら効かないという
ググってみたら自分で実装しろとのこと

Clipboard = require 'clipboard'
copy = () ->
  id = ID
  editor = ace.edit("editor#{id}")
  texts = editor.getSelectedText()

  Clipboard.writeText texts

cut = () ->
  id = ID
  editor = ace.edit("editor#{id}")
  texts = editor.getSelectedText()
  target = editor.selection.getRange()

  editor.session.remove target
  Clipboard.writeText texts

paste = () ->
  id = ID
  editor = ace.edit("editor#{id}")
  target = editor.selection.getCursor()
  texts = Clipboard.readText()

  editor.session.insert target, texts

こんな感じに実装してみた
aceとの兼ね合いでこんななってるだけなんでidやらeditorやらは無視してくださいな
コピペ周りはClipboardのとこだけです

あとなにげにdockにファイルをドラッグアンドドロップで開くってのも調べるのに時間かかったかも
info.plistに以下を記載で下準備

<key>CFBundleDocumentTypes</key>
<array>
  <dict>
    <key>CFBundleTypeExtensions</key>
    <array>
      <string>amd</string>
    </array>
    <key>CFBundleTypeIconFile</key>
    <string></string>
    <key>CFBundleTypeName</key>
    <string>AMD</string>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>LSHandlerRank</key>
    <string>Alternate</string>
  </dict>
</array>

CFBundleTypeExtensionsに開ける拡張子を指定。
今回はAkiyamarkdownが.amdなのでAMDだけ指定
あとはアプリ内で

app.on 'open-file', (e, path) ->
  e.preventDefault()
  createEditor path
  remote.getCurrentWindow().focus()

こんな感じ
open-fileがファイルのpathくれるからそれを使ってfsやらでファイルを読みこめばいい
必ずe.preventDefault()しないといけないそうな

Ace

ブラウザ上で使えるjs製のテキストエディタ
公式サイト見ながらちまちま実装した
いろいろハマった
今の実装で正しいのかもわからん

とりあえず複数タブで使えるようにしたかったのでそんな機能ないかなぁとドキュメントを見た結果そんなのないから独自実装しろとのこと

editor = ace.edit("editor")

これでeditorってidにエディタを作るらしい
複数タブ用にユニークなid必要だったから

id = Date.now()
editor = ace.edit("editor#{id}")
# ついでにタブも作成
$tab = $("<div id='tab#{id}' class='tab'><span id='close#{id}' class='close'>×</span></div>")

とかやっちゃいました
まぁめんどくさいのでgithub見てください

まとめ&所感

遊びで作る分には楽しかった。
秋山くんからやたらとissueが上がってくる。たすけて
Electron単体で100MBとかなるんだけどみんなどうしてるんだろ