読者です 読者をやめる 読者になる 読者になる

みずぴー日記

陽気なプログラマが世界を廻す

 💫Tumblrクライアントを作りはじめた

記事の投稿に特化したTumblrクライアントを作りはじめた。

f:id:mzp:20160103203837p:plain

レポジトリ

https://github.com/mzp/tumblotte

動機

TumblrはリブログするだけのWebサービスでもなく、高機能なブログサービスでもあることに気がついた。

  • Markdownで書ける。
  • 独自ドメインでの運用もできる。
  • 複数のブログも管理できる。
  • テーマも多数存在する。

しかし、TumblrのWebUIは長文を書くのには向いていないので、Tumblrのクライアントを作りはじめた。

ElectronやReact.js等のJavaScriptまわりの技術にキャッチアップしたかった、という理由もある。

機能

  • Tumblrへの投稿・更新
  • Markdownのライブプレビュー
  • 既存の投稿記事の取得
  • 投稿先のブログの切り替え
  • 投稿した記事をWebブラウザで開く

Kobitoを意識しながら作りはじめた。 が、インターネットが不自由な環境で作っていたので、思ったよりUIが似ていない。

名前の由来

どういう名前にするか相談したときに、Charlotteの一挙放送をしていたので、こうなった。

知見

  • ElectronでOAuth認証をする方法は Electron. oAuth authentication with GitHubを参考にした。
  • Tumblrに投稿にするにはtumblrを使っている。しかし、いくつか機能が不足していたので、自分でforkして拡張した。mzp/node-tumblr
    • tumblrwksを使ったほうがよかったかもしれない。
  • "electron boilerplate" で検索したら、5つくらいでてきてツラかった。 結局、boilerplateは使わずに自分で書いた。

画像で見る開発の流れ

開発開始直後(2015/12/30)

f:id:mzp:20160103215512p:plain

PureCSSのEmail layoutをざっくりあてた直後。まだ表示ができるだけで、投稿等はできない。

基本機能完成(2015/12/31)

f:id:mzp:20160103215848p:plain

ライブプレビュー機能Tumblrへの投稿機能を付けた。

UIの調整(2016/1/1)

f:id:mzp:20160103220331p:plain

FontAwesomeを使って、各ボタンにアイコンを割り当てていった。

ログイン機能(2016/1/2)

f:id:mzp:20160103220524p:plain

ここまでAccessTokenは固定だったので、ログイン機能をつけた。ログイン画面をどうするか迷ったあげく、結局ボタン1個だけを配置した。

投稿先ブログの切り替え(2016/1/3)

f:id:mzp:20160103220954p:plain

投稿先のブログを切り替えれるようにした。

代償