1. SIS Lab
  2. >
  3. Blog
  4. >
  5. React + ElectronでFlickr連携可能なMarkdown Editorを作った

React + ElectronでFlickr連携可能なMarkdown Editorを作った

更新日:2019.04.27 作成日:2016.08.24
React + ElectronでFlickr連携可能なMarkdown Editorを作った https://farm9.staticflickr.com/8455/29165784116_9084f95502_z.jpg

Electron + Mithril.jsでFlickrアプリを作成する - SIS Labで、自分専用のMarkdown-Editorを作りたいと思っていたので、今回Reactの勉強も兼ねて、Flickr連携できるMarkdown Editorを作成しました。

最終的には、自分専用Markdownデスクトップアプリを、Electronで作成することが目標だ。Kobitoは便利で使ってるのだけど、そのままEvernoteに連携して欲しかったり、リンク作成の機能がまとまってると嬉しい。

実装したい機能は、こんな感じ。Kobitoをベースに自分専用の機能を盛り込みたい。

Markdownエディター(オートプレビュー) Flickr連携(アップロード、リンク作成) Evernote連携(自動保存) Amazonリンク作成 ASP一括検索 git pushでブログデプロイ

今の機能

  • Markdown記法で記載すれば、リアルタイムにプレビューできる
  • Editor部分に写真をDrag & Dropすれば、Flickrにアップロードして、その画像リンクを貼ってくれる

ベースは、以下のreact-markdown-editorを参考にさせてもらいました。 uraway/react-markdown-editor: React + Electron = Markdown Editor

Drag & Drop

デフォルトのままだと、ファイルをDrag & Dropするとそのファイル自身をWebViewで表示する挙動となるため、以下のように、デフォルトの挙動を書き換える必要があります。

    const holder = document.getElementById('input');
    holder.ondragover = () => { return true; };
    holder.ondragleave = holder.ondragend = () => { return false; };
    holder.ondrop = (e) => {
      e.preventDefault();
      const file = e.dataTransfer.files[0];
      console.log('File Path:', file.path);
      ipcRenderer.send('upload', file.path);  // file upload
      return false;
    };

苦労したところ

Flickr認証

ファイルをDrag & Dropしたら、画像をFlickrにアップロードしようとFlickrの認証にまずつまずいた。

ひたすら、このページを見ながら格闘しました。いつもはライブラリを使って終わりのところでしたが、なかなかうまく行かず、必死にリクエストを試行錯誤しながら作成しました。

split-pane

なかなかそれっぽく動かなかった。ドキュメントをちゃんと読むの大事

tomkp/react-split-pane: React split-pane component

実際どうなの?

  • ファイルアップロード後に、リンクを自動作成してくれるのはホント楽
  • Editorとしての機能が全然ないので、ストレス(基本的なファイル操作って大事)

残り実装したい機能

  • ファイル操作周りの実装
  • アイコンをつくる
  • frontformatterはメタ情報としてそれっぽく表示させる
  • ファイルツリーの表示
  • シンタックスハイライト(Aceエディタの導入) AceエディタをElectronに組み込む - SIS Lab
  • git連携
  • FlickrAPIはライブラリとして切り出す
  • FlickrAPIをPromiseで綺麗に書く
  • スクロールバーの同期(Editor部分をスクロールすれば、Previewも合わせて動くように変更する)
  • iPhoneアプリとしても作成する
  • 保存した日時をlastmodとしてfrontmatterに追加・更新する
  • ファイルのドラッグ&ドロップで、保存先をFlickrか、ローカルか選択可能にする
スポンサーリンク

Related contents

TECH

2016.08.28

AceエディタをElectronに組み込む

TECH

2016.05.11

Electronがv1.0.0になったのでMithril.jsと合わせてAmazonアフィリエイトリンクビルダーを作った

TECH

2016.02.20

ElectronでAmazonアフィリエイトリンクビルダーを作った

TECH

2016.09.03

Hubotで外部コマンドを実行する

TECH

2016.02.28

Electron + Mithril.jsでFlickrアプリを作成する

TECH

2016.02.07

D3.jsで東京の地価データを可視化する

TECH

2016.02.07

JavaScript Ninjaの極意 「関数の呼び出し」

TECH

2016.02.06

D3.jsチュートリアル