#-

moz-scope のご紹介 (ES2015+)

この記事は MDNやFirefox OSのドキュメントをみんなで翻訳! Advent Calendar 2015 の 13 日目です。


初めまして。@hashedhyphen と申します。大学生やってます。

普段は Mozilla Security Blog を翻訳したり、MDN を利用する中で気になった記事を軽く翻訳したりしています。なお、Mozilla Security Blog 日本語版の記事は GitHub で管理しているので、過去記事の翻訳など Pull Request 送っていただけると嬉しいです。

最近知ったこと

MDN のページを AndroidFirefox で閲覧しつつ、ページを長押しすると編集画面に行けることを最近知りました。ただし、翻訳になると画面がかなり狭くなるので正直無理です。謎機能すぎる…

f:id:hashedhyphen:20151211003113j:plain

moz-scope について

MDN 記事の更新有無を確認するための CLI ツール "moz-scope" を作りました。ES2015+ で書いているため、動作させるには Node が必要です。

hashedhyphen/moz-scope - GitHub

インストールは下記のように npm で行います。

npm i -g moz-scope

コンソール(コマンドプロンプト)で moz-scope -v と入力して、バージョンが表示されればインストール成功です。

続いてホームディレクトリに mozscope.conf というファイルを作成し、更新を確認したい記事の URL を改行区切りで書きます。以下に例を示します。

https://developer.mozilla.org/ja/docs/Developer_Guide/How_to_Submit_a_Patch
https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/How_to_Submit_a_Patch
https://developer.mozilla.org/ja/docs/Mozilla_Source_Code_Directory_Structure
https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Source_Code/Directory_structure

Windows の場合、ホームディレクトリは C:\Users(ユーザ名)\ になるかと思います(または、Node の REPL 上で os.homedir() を叩いても確認できます)。

以上で初期設定は終わりです。コンソールで moz-scope と入力すれば記事の更新確認が始まります。

$ moz-scope

--  Done: 4/4

New post!

Title: How to Submit a Patch
Date: Fri Dec 04 2015 07:27:30 GMT+0900 (東京 (標準時))
Author: mantaroh
Comment: Rev.904925反映

Title: How to Submit a Patch
Date: Mon Aug 24 2015 09:46:36 GMT+0900 (東京 (標準時))
Author: jryans
Comment:

Title: Mozilla ソースコードのディレクトリ構造
Date: Sat Oct 10 2015 08:05:26 GMT+0900 (東京 (標準時))
Author: hashedhyphen
Comment: Complete translation on this article

Title: Mozilla Source Code Directory Structure
Date: Tue Oct 06 2015 22:15:46 GMT+0900 (東京 (標準時))
Author: Sheppy
Comment: Added a description for the /embedding folder

更新があれば上記のように表示され、新しい更新が何もなければ以下のように表示されます。

$ moz-scope
--  Done: 4/4

All articles are up-to-date :)

技術的なこととか

async/await + Promise.all で URL を並列リクエストしつつ、返ってきた HTML に正規表現を当てて情報を抽出しています(PhantomJS 使ってスクレイピングするまででもなかった)。現状、mozscope.conf に書いてある URL を一気にリクエストしているので、URL が 50 個ぐらいになると MDN に DoS ってしまうかもしれません(もしガチで moz-scope 使う方がいらっしゃったら issue でお知らせください…)。

実際、このツールを作ったのは async/await の実験目的だったりします。次は TypeScript の実験用に書き換えるかもしれません。

そもそも MDN に記事更新のメール通知機能あるじゃん

f:id:hashedhyphen:20151211000938p:plain

その通りでございます…。

最後に

もし moz-scope を使っていてバグを踏んだ場合、GitHub に issue を出してくださると助かります…


アドベントカレンダー 14 日目の明日は mantaru さんです。

Ruby on Rails Tutorial (3rd ed.) を一周終えた

ぽちぽち続けてきてちょうど 40 日かかったが、Ruby on Rails Tutorial (3rd ed.)(原典)を一周終えることができた。カタチあるものをこうして作ることができ、達成感もひとしおである。

f:id:hashedhyphen:20151120012647p:plain

Heroku に deploy できればいいのだが、SendGrid や AWS を動かすのにクレジットカード(無料の範囲内)が必要とのことなので、近いうちにクレカデビューしようと思う。

また、自機が Windows7 だったこともあり、環境構築やその他でつまづいた箇所がいくつかあったが、それらは Qiita にまとめてみた。Windows 機でチュートリアルを進める方の参考になれば幸いである。

きっかけ

自分が Web の世界に興味を持ったのは、もともと JavaScript が好きだったからだと思う。JavaScript に興味を持ったのは去年ぐらいのことで、そこから React とかを探ってみたりもした。

そんな経緯もあり、最近まではずっと JavaScript が自分の中心にいた。しかし最近になって、「Web ってそもそも何だろう?」という疑問が湧き、それに対して答えられない自分の存在に気づいてしまった。MVC とは何なのかを理解せずして、React が生まれた経緯・意義が分かるわけがない。これから Web と一緒に生きていく中で、今ある自分に限界を感じた(もちろん「Web」という主語は大きすぎる)。

Web に対して自分なりの意見を持てない現状に気づいて、Web に対して真剣に向かい直そうと思った。そのためには、最も基礎に近い開発手法を学んでみようと考えた。「基礎」となると、perl やらを使った CGI なのかもしれない。しかし、Web 開発の基本と MVC モデルの基本を学べるという点から Rails Tutorial を選んだ(CakePHP という選択肢もあったが)。

Rails Tutorial といえば素晴らしい日本語訳もあるのだが、英語の勉強もかねて原典をあたってみた(新卒教育で英語版に取り組ませる企業もあるらしい)。

実際にやってみて

JavaScript ばかり書いてきた自分にとって、Rubyシンタックスメソッドの扱いはかなり新鮮だった。それにもまして、Rails の持つポテンシャルにはただただ驚かさるばかりだった。クラス名や変数の名前を規約にしたり、コンテキストに合わせた変数の解釈、テストのエコシステム、などなど(実際はほとんど何も分かっていない)。多くを規約で縛っても最後には強固なアプリケーションが出来上がる。DHH を始めとする Rails のコミュニティの偉大さを感じた。

ところどころ技術的な雑談も挟まれていて楽しかったし、初めて TDD を経験することもできた。また、セキュリティ面での対策を優先して取り組む構成になっていたので、Web 開発を初めて体系的に学ぶ教材としてはとても良いと思う。

まだまだ Rubyish なコードは全く書けないし、Rails の named route の仕組みなど、腑に落ちていないことが数多くある。ただ、Rails Tutorial を一周終えてみて、MVC や REST など現在の Web アプリケーションの基礎となっているものが、うっすらではあるが見えてきたような気がする。これから自分でアプリケーションを作る際に、Rails Tutorial は何度も見直すことになると思う。

FxOS コードリーディングミートアップ #21 に行ってきた

初参加でした。イベントのページ - コミュニティのページ

個人的には藪下さんのスライドがとても勉強になりました。まずは B2G/gaia/apps らへんをカジュアルに読んでみようかな。 Crm21 aoitan firefox os_architecture_quick_tour

Firefox OS アプリはすべて HTML5 で書けます!」という話は前々から知っていたのだけれども、プリインアプリのソース(たぶん?)を眺めてみたら、本当に HTML + CSS + JS が並んでいてびっくり。mar さんの発表「3日で作る Firefox OS アプリ」のソースHTML5 で書かれていて。

そうかと思えば、Gecko 最新ガーベジコレクション事情の Cycle Collector について皆で 1 時間以上もわいわいやってて、「この勉強会に来てる人って頭オカシイんじゃないか」と正直思いました(褒め言葉)。

仕事が入っていたので、Cycle Collector 勉強会の途中に退席してしまいましたが、次回は何かしらコードリーディングした結果を持ち込みたいと思います(普段は平日夜開催なので無理かも…)。

とりあえず MDN あたりを読み漁ってエミュレータを入れてみようっと。