インターネットに接続できない状況でも Marp で絵文字を表示できるように修正してみた

:warning: 原作者である @yhatt さんに修正案をいただき修正したものを[マージ](https://github.com/yhatt/marp/commit/bb03bc67d7bdfe24af12bd876bd089e5c8a88ad4)して頂けましたので以下の内容は古い内容となりますが、今後の参考のために残しております。 :warning:

@yhatt さんが開発されている[Marp - Markdown presentation writer][Marp]は、とても素晴らしい完成度です。ただ、インターネットに接続できない状況だと絵文字が表示できないのが個人的に残念だったので試しに修正してみました。(ダメ元で[Pull Request](https://github.com/yhatt/marp/pull/62)も送ってみました。)

## 修正に使用した環境

- [VineSeed](https://vinelinux.org/vineseed.html) ([Vine Linux](https://vinelinux.org/) 開発版) 64bit
- [nodebrew](https://github.com/hokaccha/nodebrew) use v6.3.1

## 原因の調査

[Marp]では、絵文字を表示するために[Twitter]で開発された[twemoji]という JavaScript のライブラリを使用しています。

[node]モジュールとしてインストールされる[twemoji]には、絵文字本体が同梱されておらず、インターネット上の CDN(Content Delivery Network) サーバーから、画像を取得するようになっているため、インターネットに接続できない状況だと当然ながら絵文字を表示することができません。

しかしながら、[twemojiのREADME.md]を読んでみると[Object as parameter](https://github.com/twitter/twemoji/blob/gh-pages/README.md#object-as-parameter)の項で `twemoji.base` オプションに取得先のアドレスを設定すれば、この挙動を変更できることが説明されていました。

## 準備作業

1. https://github.com/yhatt/marp から Fork
2. https://github.com/yasumichi/marp にてトピックブランチ bundle-twemoji を作成
3. ローカルにて `$ git clone git@github.com:yasumichi/marp.git`
4. `$ cd marp`
5. 必要な node モジュールのインストール `$ npm install --global-style`
6. 試しに起動 `$ npm start`
7. トピックブランチをチェックアウト `$ git checkout -b bundle-twemoji origin/bundle-twemoji`

## 修正内容

### 新しいファイルの追加

twemoji のソースから、絵文字用の画像ファイルとそのライセンスを説明したファイルを以下のように追加しました。

- images/twemoji/LICENSE-GRAPHICS
- images/twemoji/72x72/*.png (872ファイル、約3.5Mバイト) 

### スクリプトの修正

twemoji.base を CDN サーバーから同梱する画像ディレクトリに変更するために以下のスクリプトを修正しました。

- coffee/classes/mds_markdown.coffee

```diff
diff --git a/coffee/classes/mds_markdown.coffee b/coffee/classes/mds_markdown.coffee
index 5288f52..f09fa2b 100644
--- a/coffee/classes/mds_markdown.coffee
+++ b/coffee/classes/mds_markdown.coffee
@@ -93,6 +93,7 @@ module.exports = class MdsMarkdown
   constructor: (settings) ->
     opts         = extend({}, MdsMarkdown.default.options, settings?.options || {})
     plugins      = extend({}, MdsMarkdown.default.plugins, settings?.plugins || {})
+    twemoji.base = settings?.twemojiBase || twemoji.base
     @afterRender = settings?.afterRender || null
     @markdown    = MdsMarkdown.createMarkdownIt.call(@, opts, plugins)
     @afterCreate()
```
- coffee/slide.coffee

```diff
diff --git a/coffee/slide.coffee b/coffee/slide.coffee
index 7d49aaa..33bbcfe 100644
--- a/coffee/slide.coffee
+++ b/coffee/slide.coffee
@@ -13,7 +13,8 @@ document.addEventListener 'DOMContentLoaded', ->
       for target in $(@).attr('data-marp-path-resolver').split(/\s+/)
         $(@).attr(target, resolvePathFromMarp($(@).attr(target)))
 
-    Markdown = new clsMarkdown({ afterRender: clsMarkdown.generateAfterRender($) })
+    twemojiBasePath = Path.resolve(__dirname, '../images/twemoji/') + '/'
+    Markdown = new clsMarkdown({ afterRender: clsMarkdown.generateAfterRender($), twemojiBase: twemojiBasePath })
 
     themes = {}
     themes.current = -> $('#theme-css').attr('href')
```

修正方法がイマイチなところがあるのでご指摘が入るかもしれません…。

## 雑感

- CoffeeScript で書かれたアプリケーションに初めて出会った。
 - Pure JavaScript や TypeScript など Electron アプリケーション開発にもいくつか選択肢があるようだ。
- これからが楽しみな Electron アプリケーションが多い。
 - 仕事でも使えそうなアプリケーションも少なくない。
 - 情報漏えい防止の観点から、直接のインターネットへの接続を許可していない職場もあるので可能なものはバンドルして頂けるとありがたい。
 - 本来、サーバーとの通信が不要にできそうなアプリケーションが結構あるが、[node] モジュールとしてインストールできるようなライブラリを CDN サーバーから取得するアプリが散見される。

[Marp]: https://yhatt.github.io/marp/
[Twitter]: https://twitter.com/
[twemoji]: http://twitter.github.io/twemoji/
[node]: https://nodejs.org/en/
[twemojiのREADME.md]: https://github.com/twitter/twemoji/blob/gh-pages/README.md