原作者である @yhatt さんに修正案をいただき修正したものをマージして頂けましたので以下の内容は古い内容となりますが、今後の参考のために残しております。
@yhatt さんが開発されているMarp - Markdown presentation writerは、とても素晴らしい完成度です。ただ、インターネットに接続できない状況だと絵文字が表示できないのが個人的に残念だったので試しに修正してみました。(ダメ元でPull Requestも送ってみました。)
修正に使用した環境
- VineSeed (Vine Linux 開発版) 64bit
- nodebrew use v6.3.1
原因の調査
Marpでは、絵文字を表示するためにTwitterで開発されたtwemojiという JavaScript のライブラリを使用しています。
nodeモジュールとしてインストールされるtwemojiには、絵文字本体が同梱されておらず、インターネット上の CDN(Content Delivery Network) サーバーから、画像を取得するようになっているため、インターネットに接続できない状況だと当然ながら絵文字を表示することができません。
しかしながら、twemojiのREADME.mdを読んでみるとObject as parameterの項で twemoji.base オプションに取得先のアドレスを設定すれば、この挙動を変更できることが説明されていました。
準備作業
- https://github.com/yhatt/marp から Fork
- https://github.com/yasumichi/marp にてトピックブランチ bundle-twemoji を作成
- ローカルにて
$ git clone git@github.com:yasumichi/marp.git $ cd marp- 必要な node モジュールのインストール
$ npm install --global-style - 試しに起動
$ npm start - トピックブランチをチェックアウト
$ 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 --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 --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 サーバーから取得するアプリが散見される。