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
- 記事更新のWorkflowを改善したい · Issue #3 · jser/jser.info
- Github Pagesでデータを見られるようにする · Issue #5 · jser/jser.info
仕組み的には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までの簡単な流れとしては
- サイト情報を入力(タイトルや紹介文等)
- 生成されたJSON文字列をコピー
- jser/jser.infoの最新月のJSONデータにコピーしたものを追加
- Pull Requestする
という感じなっていて、今のGithubはログインしていればオンラインで編集してPull Requestすることが可能になってるので、全てブラウザで完結します。
これで、少しはPull RequestしやすくなったのであなたもPull Requestし放題です!
紹介のポリシーは以下に簡単に書かれているので参照して下さい。 文体とかそういうのはPull Request後でも修正できると思うので、どういう説明にするかに集中するといいです。
マージするかは個人的な判断なので保証しませんが、 JSer.infoでまだ紹介してなくて、ブックマークに入ってなくて、面白そうならマージされるんじゃないかと思います。
(マージしない ≒ 拒否 ではないので、深くは気にしないといいと思います)追記:
- ブックマークレットが使えるようになりました
- ブックマークレットから項目を埋める by azu · Pull Request #1 · jser/jser.info-tribute
- Parameter に URLのパラメータにあると自動的に入る入力項目の対応が書かれています。
- Pull Requestガイド により詳細な入力項目について書きました。
- タイトルに入れるものや説明の書き方などについて書かれています。
サイトの仕組み
サーバサイドは一切実装がない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にベタ書きが多くて、モデル等をどうやってファイルを分ければいいのかよくわからなくなったりしたので、その辺が上手くまとまった記事があるとよさそうですね。
- Modeling Data and State in Your AngularJS Application - @jhooks
- AngularJS - お前のAngular.jsはもうMVCではない。と言われないためのTutorial - Qiita [キータ]
Angularは大体仕組み的に用意されていて、使い方を調べるという感じになると思うので、 ある程度触って慣れればすごくAngularらしく、高速に作れるようになる感じなんだと思います。
公開したサイトはソースも公開されてるので、修正Pull Requestをお待ちしています。
学習の流れ
- AngularJS入門 (全12回) - プログラミングならドットインストール で軽く全体を流す
- AngularJS: Index (AngularJS 1.2 日本語リファレンス | js STUDIO) などを見る
- 出てくる用語を適当に理解する Androiderに贈るAngularJS概説 - Qiita [キータ]
- 書いてみて詰まったらググるループ
- Angularのデザインパターンを知りたくなるループ