An article of Nyarticles.

article.md

Nyarticles作成計画

Nyarticles Yeilds ARTICLES.

Nyarticlesは記事の執筆＆投稿システムです。 主に技術者が技術情報を書いてネットで共有することを想定していますが、 技術記事以外でも利用できます。

個人のWebサイトですから、何を書くかはあなたの自由です！

まだ開発中ですが、以下のようなものになる予定です。

導入は簡単！

1. GitHubのアカウントを用意
2. 専用エディタをインストールして起動
3. GitHubでGistの書き込み権限を持つアクセストークンを作成

記事の作成も簡単！

1. 専用エディタで新規記事作成
2. Markdownでプレビューを見ながら記事執筆
3. 保存ボタンを押す

記事の編集も簡単！

1. 専用エディタの記事リストから編集したい記事を選択
2. Markdownでプレビューを見ながら記事編集
3. 保存ボタンを押す

記事の投稿も簡単！

1. 専用エディタの記事リストから投稿したい記事を選択
2. 初回のみ
3. Webサイトタイトルを設定
4. GitHub Pagesにアップするなら 1. リポジトリへの書き込み権限を持つアクセストークンを作成 1. リポジトリ名を入力
5. 投稿ボタンを押す

はい。エディタはQiitaのKobitoと同じようなものです。

記事はGitHubのGistとして保存されます。 またGitHub PagesにあなたのWebサイトが作成され、 ブログとして公開されます。

記事はGitHubのGistなので、GitHubのアカウントを持っている他の人が、

• 記事にコメントする
• PRを送って記事の訂正依頼を出す
• 記事にStarを付けて「いいね」を伝える

ことができます。

ローカルのプロジェクトディレクトリ

ディレクトリ構成

.
|- config.toml
|- draft
|  |- Q63NHLDSABFYNC7KK4KSF3QPCM
|  |  |- .git
|  .  |- Q63NHLDSABFYNC7KK4KSF3QPCM.md
|  .  |- meta.json
|  .  |- picture.png
|  .  .
|- post
|  |- U2T3GZ4QBZEOXB5TVLNHSPXXS4
|  |  |- .git
|  .  |- U2T3GZ4QBZEOXB5TVLNHSPXXS4.md
|  .  |- meta.json
|  .  |- image.jpg
|  .  .
\- public
   |- index.html
   |- js
   |  |- app.js
   |- page
   |  |- 0.json
   |  .
   |  .
   \- tag
      |- html5
      |  |- 0.json
      .  .
      .  .

• 最初はdraftの下に記事が作られる。
• 投稿するとpostに記事が置かれ、draftからは削除される。
• 投稿した記事はGitHubのGistとしてアップされる。
• 記事を投稿するとWebサイトとしてpublic以下が生成され、GitHub Pagesにアップされる

設定(config.toml)

• GitHub
• Gist書き込み権限を持つアクセストークン
• リポジトリ書き込み権限を持つアクセストークン
• Webサイト
  • タイトル
  • 記事一覧の１ページの表示件数
  • twitter/facebookなどのSNSのアカウントとか

下書き(draft)

• 記事には乱数生成したUUIDをBase32（パティングなし）で２６文字に減らしたIDを用意する。
• 記事はGitで変更履歴管理される。
• 記事のファイル名は[UUID].mdで、Markdownで書かれる。
• meta.jsonには分類タグ情報が書き込まれる。
• その他に記事内に埋め込まれる画像ファイルが置かれる

Windowsではフォルダの大文字小文字区別がないため、URLセーフなBase64でなく、Base32を使う。

設定でPrivate Gistとして保存するかどうか選択できるようにする？ そうやってクラウド管理することで複数端末で編集作業を引き継げる。 その場合は投稿時にPublicに変更・・・も考えられるけど、 下書きでの途中コミットを引き継がないということはできない（公開前の作成過程は見せたくないよね）。 別Gistにした方がいい（投稿時に下書きは削除）。 ただしPrivate Gistはアドレスを知っていれば他の人にも見えてしまうけど。

投稿(post)

• 記事ファイルのIDは下書きから引き継ぐ
• 下書きの途中のコミットは引き継がない。
• GitHubのGistとしてpushされる。
• push時にはローカルでの途中のコミットは反映しない。
• meta.jsonには投稿日時とpush時に最終更新日時も記録する。

投稿、更新以外のコミットはWebサイト上で履歴に表示したくない。 Gitに反映しないという方法でなく、投稿・更新時にGitのタグを作成して、 Webサイトの履歴表示ではそれを使うという手も考えられる。 そうやってクラウド管理することで複数端末で編集作業を引き継げる。 でも余計なトラブルを防ぐためには、 やはり投稿・更新のOKを出したもの以外はGitHub上でも見えないようにすべきかと。 下書きのPrivate Gistを残しておいて、そちらは編集途中のコミットも反映させるという手も考えられる。

Webサイト

ブログとして記事の閲覧ができるフロントエンドWebサイトを提供。

WebサイトはJavascriptでGitHub APIを使って情報を取得して表示。 またGitHubユーザーがGitHub APIを使って記事へのアクションができたらいいなぁ。

なのでWebサイトは静的ではなく、クライアントサイドで動作する動的サイト。 Webサイトはサイトジェネレータが生成。

生成される記事以外のデータ

以下をJSONで生成して、Webサイトに含めてGitHub Pagesにアップ。

• 新着順の各ページの記事リスト
• タグごとの各ページの記事リスト

新着順やタグが付けられた記事の一覧は、 ページングできるようにする。

Webサイト実装に使う技術

SPAとして提供。利用ライブラリとして考えられるのは

• 流行りのReact+Redux
• もっと軽量で必要十分、見た目もJSXのようにキモくないRiot.js
• 型が厳密で関数型で実行時エラーのないElm
• Angular1, 2は大げさすぎるので却下

過去Angular1 -> React -> Riotと触ったことがあるが、最近試したElmが気に入ったので採用。

人気順について

サーバーサイドで動作するわけではないので、ページビューをカウントしたりできない。 案としては、

• Starの数
• Gistのアクセス数ってGitHub APIで取れたりする？？
• Google Analyticsを利用
  • SPAに認証キーを埋め込むわけにいかないので動的は無理
  • Webサイト生成時に直近一定期間でアクセスの多かった順の記事リストを生成
    • 定期的に生成しないと更新されない問題あり
• HerokuやBluemixなどのPaaSを利用

個人的にQiitaの「いいね」は、本当に急いで調べ物してて役に立った記事には付け忘れる。 また昔書いた記事が有利で、最近注目された記事が上位に来ず、ランキングが固定される。

• Starの数が多い記事ランキング
• 直近のアクセス数の多かったランキング

の２つを用意するといいのかも。

要確認事項

Webサイトに認証コードを埋め込むのは危険なのでダメ。 サイト閲覧者にサイトをWebアプリとしてGitHubに登録させなきゃいけないとかはナシ。

GitHub APIで認証してないWebアプリで何ができるのか？を把握しておく必要がある。

基本的にパブリックになっているものを取得するのは問題ないはず。

• 記事やメタファイルの取得（これはできるはず）
• 記事へのコメントの取得（これもできるはず）
• 記事の編集履歴の取得（できるはず）
• 記事にコメントを書く（できないと思う）
• 記事にPRを出す（できないと思う）
• 記事にStarを付ける（できないと思う）

書き込み権限の必要な処理はGitHub APIでは恐らくできないので、 それらはWebサイト上で行うのではなく、GitHubのGistページに飛ばす必要がありそう。

記事エディタ

これがNyarticles本体。デスクトップアプリ。

• 記事の作成
• 記事の編集
  • Markdownエディタ
    • 一般的なテキストエディタモード（ショートカットカスタマイズ可）
    • Vimモード
  • Webプレビュー
• 記事の投稿
• Webサイト生成とアップロード
• 各種設定変更

とりあえず自分が使うことを考えてVimモードを優先

要求事項

Kobito for Windows（Windows利用でない）に不満を感じていたので、以下を実現したい。

• 長い記事でプレビューを表示していても重くなったりエラーになったりしない
• 長い記事でも編集中の場所とプレビューの表示場所の連動が大きくずれない
• 編集中にプレビューの表示がおかしくなったりしない（ソースコードが見えなくなったり）
• Vimそのものを組み込む

サポートプラットフォームは以下。

• Win, Mac, Linux

とりあえず自分が使うことを考えてLinux優先。

実装に使う技術

単純に確実に実現できる技術を選択すると

• 言語はC++
• GUIライブラリはQt
• QtのWebViewでプレビュー表示
• ノーマルエディタはScintilla
• VimモードはNeoVim
• libgit2

でも個人的には__Rustを使いたい！！__

• 言語はRust
• GUIライブラリはGTK+
• プレビュー表示はどうする？
  • Servo使ってみたいなぁ
  • CEF3でChromiumを組み込むのが確実
• ノーマルエディタはScintilla
• VimモードはNeoVim
• libgit2

コマンドラインサポート

コマンドラインで作業できるように、バックエンドはコマンドにしておく？

meta.json

{
  "tags": [ { "id": "nyarticles", "name": "Nyarticles" } ]
}