Fork me on GitHub

JavaScriptの最新情報を紹介する週刊ブログ

JSer.infoに紹介してもらいたい記事のPull Requestが出来るようになりました

2014年02月03日 Edit on GitHub 編集履歴を見る

JSer.info Pull Request Form というサイトを作りました。

どういうサイトかという説明の前に簡単なJSer.infoの運用の話。

JSer.infoに記事が乗るまでの流れ

JSer.infoは大体週1の更新ですが、紹介記事の収集自体は常に行われていて、 その収集した記事は半分リアルタイムでjser/jser.infoのリポジトリに追加されて行くようになっています。

週1の更新では、jser/jser.infoのリポジトリにためた記事をJSer.infoのアーカイブから選んで紹介するようになってます。(JSer.infoのアーカイブに入ったものは殆ど紹介するので実質リポジトリに入った段階で確定ですが)

そのため、jser/jser.infoに対して紹介記事のPull Requestをすれば、自分以外でも記事を追加することが可能となっています。

関連issue

仕組み的にはPull Requestすることは可能でしたが、記事データはJSONで管理していて(HTMLもありますがそちらは旧式)追加のフォーマット等が分かりにくいのでPull Reqeustが難しい形でした。

pull requestのガイドラインを作る · Issue #12 · jser/jser.info のissueで、それをもう少しまともにするために、 JSer.info Pull Request Form というサイトを作りました。

JSer.info Pull Request Form

このサイトは、フォームにしたがってサイトの紹介を入力すれば、記事データのJSON文字列を作ってくれるサイトです。

JSer.infoでどんな感じで描画されるのかを見られるプレビュー機能も適当についています。

Pull Requestまでの簡単な流れとしては

  1. サイト情報を入力(タイトルや紹介文等)
  2. 生成されたJSON文字列をコピー
  3. jser/jser.infoの最新月のJSONデータにコピーしたものを追加
  4. Pull Requestする

という感じなっていて、今のGithubはログインしていればオンラインで編集してPull Requestすることが可能になってるので、全てブラウザで完結します。

これで、少しはPull RequestしやすくなったのであなたもPull Requestし放題です！

紹介のポリシーは以下に簡単に書かれているので参照して下さい。 文体とかそういうのはPull Request後でも修正できると思うので、どういう説明にするかに集中するといいです。

マージするかは個人的な判断なので保証しませんが、 JSer.infoでまだ紹介してなくて、ブックマークに入ってなくて、面白そうならマージされるんじゃないかと思います。

(マージしない ≒ 拒否 ではないので、深くは気にしないといいと思います)

追記:

サイトの仕組み

サーバサイドは一切実装がないJavaScriptのみで動くウェブアプリのようなものです。

browserify と AngularJSをメインにして作りました。

多分JavaScriptは100行ぐらいしか書いてないです。

browserifyの方はnpmとbrowserifyを使ったクライアントサイドのウェブアプリ開発 | Web scratchで書いたことと対して変わらないのです。

AngularJSの作法とかよくわかってないのでアレですが、やっぱりググる回数は多かった気がします。

filter とかで再帰実行ではまりやすい作りな気がしました。 後、service や factory といった用語が多いので、最初にAndroiderに贈るAngularJS概説 - Qiita [キータ]等を読んでおくといい気がします。

DOMを直接触らないように意識はしてましたが、必要なUI(タグ入力やMarkdownレンダリング)などは既にAngular moduleとしてあったりしたので、その辺を組み合わせるだけで楽にできた気がします。

データバインディングというかテンプレート的な部分はKnockoutより書きやすい感じはしました(HTML的にどうなんだろ的な感じはあったけど) (WebStormがAngularJSをサポートしてるのもあります)

Custom ElementっぽいDirectiveが出てくるとWeb Componentsっぽいなーという印象を持ちました。

サンプルだけを見てるとControllerにベタ書きが多くて、モデル等をどうやってファイルを分ければいいのかよくわからなくなったりしたので、その辺が上手くまとまった記事があるとよさそうですね。

Angularは大体仕組み的に用意されていて、使い方を調べるという感じになると思うので、 ある程度触って慣れればすごくAngularらしく、高速に作れるようになる感じなんだと思います。

公開したサイトはソースも公開されてるので、修正Pull Requestをお待ちしています。

学習の流れ

  1. AngularJS入門 (全12回) - プログラミングならドットインストール で軽く全体を流す
  2. AngularJS: Index (AngularJS 1.2 日本語リファレンス | js STUDIO) などを見る
  3. 出てくる用語を適当に理解する Androiderに贈るAngularJS概説 - Qiita [キータ]
  4. 書いてみて詰まったらググるループ
  5. Angularのデザインパターンを知りたくなるループ

TODO

この記事へ修正リクエストをする
JSer.info Slackに参加する