├── README.md ├── js ├── README.md ├── js-3.css ├── js-3.html ├── js-3.js ├── lib │ ├── qunit-1.18.0.css │ └── qunit-1.18.0.js ├── main.js ├── test.html └── test.js ├── perl ├── README.md ├── lib │ ├── Log.pm │ ├── LogCounter.pm │ └── Parser.pm ├── main.pl ├── main2.pl ├── main3.pl └── t │ ├── log.t │ ├── log_counter.t │ └── parser.t ├── sample_data ├── large_log.ltsv └── log.ltsv └── scala ├── .gitignore ├── README.md ├── project ├── Build.scala ├── build.properties └── plugin.sbt └── src ├── main └── scala │ └── hatena │ └── intern │ ├── Exercise1.scala │ ├── Exercise2.scala │ └── Exercise3.scala └── test └── scala └── hatena └── intern ├── Exercise1.scala ├── Exercise2.scala ├── Exercise3.scala └── UnitSpec.scala /README.md: -------------------------------------------------------------------------------- 1 | Hatena-Intern-Exercise 2 | ======================================== 3 | 4 | 基本的な教材は Hatena::Textbook など 5 | 6 | - [Perl 課題](./perl/) 7 | - [Scala 課題](./scala/) 8 | - [JavaScript 課題](./js/) 9 | 10 | ## はじめに 11 | 12 | ※この項は全課題共通になります。はじめに目を通しておきましょう。 13 | 14 | LTSV (Labeled Tab-separated Values) とはラベル付きのTSVフォーマットです。 15 | LTSVの1レコードは、`label:value` という形式で表されたラベル付きの値がタブ文字区切りで並びます。 16 | 17 | 以下に LTSV の例を示します。 18 | 19 | * `sample_data/ltsv.log` 20 | 21 | ``` 22 | host:127.0.0.1 user:frank epoch:1372694390 req:GET /apache_pb.gif HTTP/1.0 status:200 size:2326 referer:http://www.hatena.ne.jp/ 23 | host:127.0.0.1 user:john epoch:1372794390 req:GET /apache_pb.gif HTTP/1.0 status:200 size:1234 referer:http://b.hatena.ne.jp/hotentry 24 | host:127.0.0.1 user:- epoch:1372894390 req:GET /apache_pb.gif HTTP/1.0 status:503 size:9999 referer:http://www.example.com/start.html 25 | host:127.0.0.1 user:frank epoch:1372694390 req:GET /apache_pb.gif HTTP/1.0 status:500 size:2326 referer:http://www.hatena.ne.jp/ 26 | host:127.0.0.1 user:frank epoch:1372794395 req:GET /notfound.gif HTTP/1.0 status:404 size:100 referer:- 27 | ``` 28 | 29 | 例えば、1レコード目の host の値は 127.0.0.1 であり、2レコード目の referer の値は http://b.hatena.ne.jp/hotentry になります。LTSV についてより詳しくは、以下を参照して下さい。 30 | 31 | * http://blog.stanaka.org/entry/2013/02/05/214833 32 | * http://ltsv.org/ 33 | 34 | ## 課題の提出方法について 35 | 36 | 課題の提出は、このリポジトリをForkしてそこにコミットしていってください。 37 | 38 | 課題はそれぞれ複数問あるので、問題ごとにコミットを分けてください(すべての回答を一つのコミットにまとめないようにお願いします)。コミットの粒度は1問1コミットでなくても、細かくコミットしていて構いません。 39 | -------------------------------------------------------------------------------- /js/README.md: -------------------------------------------------------------------------------- 1 | # JavaScript 課題 2 | 3 | この課題は、JavaScript の基礎と簡単な DOM 操作 (DOM 操作とは、HTML 文書の構造などをプログラムで変更するもので、web 開発においては主にユーザーインターフェイスの動的な変更のために使用されます) の理解を確かめるものです。 4 | JavaScript の処理系として [Node.js](http://nodejs.org/) なども存在しますが、ここでは 5 | [Firefox](http://www.mozilla.jp/firefox/) や [Chrome](http://www.google.co.jp/intl/ja/chrome/browser/) といった最近のブラウザを使用するようにしてください。 6 | (クロスブラウザについて考慮する必要はありません。 Firefox や Chrome といった最近のブラウザの最新バージョンで動作するようにしてください。) 7 | 8 | ## 基礎編 9 | 10 | 基礎課題 (課題 JS-3 まで) では、JavaScript を使って Web サーバーのアクセスログ (を模した文字列) を解析し、HTML ドキュメント上にアクセスログの表を表示する、という処理を実装していきます。 11 | これらの課題の解答には、外部ライブラリを使用しないようにしてください。 12 | 13 | ### 課題 JS-0 (課題準備) 14 | 15 | 各自、自分が主に使用しているブラウザにおける開発者用のツールを使ってみてください。 16 | Firefox や Chorome がおすすめですが、Opera や Internet Explorer (10 以降)、Safari といったブラウザでも大丈夫です。 17 | 多くの開発者用のツールでは、次のような機能があります。 18 | 19 | * ページの HTML 文書構造を動的に表示する 20 | * JavaScript 用のコンソールで JavaScript 実行時のエラーを確認する 21 | * デバッガで JavaScript の処理を対話形式で進める 22 | * その際、スコープ内の変数の値を確認できる 23 | * イベント発火に対してブレイクポイントを設定する 24 | 25 | 使いこなせるようになる必要はありませんが、少なくとも JavaScript のエラーが発生しているのかどうかを確認できるようになっていれば、課題を進めやすいと思います。 26 | 27 | 例として Firefox や Chrome に付属している Web 開発用のツールを紹介します。 28 | 29 | * Firefox では、メニューバーの 「ツール」 中の 「Web 開発」 から、web 開発向けの便利なツールを開くことができます。 30 | * Web コンソール: [Web コンソール - Tools | MDN](https://developer.mozilla.org/ja/docs/Tools/Web_Console) 31 | * デバッガ: [デバッガ - Tools | MDN](https://developer.mozilla.org/ja/docs/Tools/Debugger) 32 | * また、Firefox 拡張機能として [Firebug](https://addons.mozilla.org/ja/firefox/addon/firebug/) というものもあります 33 | * Chrome には、デベロッパー ツールという開発者向けのツールが付属しています。 34 | * [Chrome DevTools — Google Developers](https://developers.google.com/chrome-developer-tools/) 35 | * メニューバーの「表示」->「開発/管理」->「デベロッパーツール」など 36 | 37 | ### 課題 JS-1 38 | 39 | Web サーバーへのアクセスログを表す LTSV 形式の文字列を引数として受け取り、その文字列をパースしてオブジェクトの配列にして返す関数 `parseLTSVLog` を `js/main.js` ファイルに記述してください。 40 | アクセスログを表す LTSV 形式の文字列の例を次に示します。 41 | 42 | 注意) タブがスペースになっています。 43 | 44 | ``` 45 | path:/ epoch:200000 46 | path:/bookmark epoch:123456 47 | ``` 48 | 49 | 1 行が 1 つのリクエストに対応しています。 50 | 1 行を 1 つの JavaScript のオブジェクトにし、アクセスログ中のラベルと値をプロパティとして持たせるようにしてください。 51 | 基本的に、アクセスログ中の値は文字列としてプロパティの値にすれば良いですが、`epoch` というラベルの値についてのみは数値にしてください。 52 | 53 | すなわち、 54 | 55 | ```javascript 56 | var logStr = 57 | "path:/\tepoch:200000\n" + 58 | "path:/help\tepoch:300000\n" + 59 | "path:/\tepoch:250000\n"; 60 | ``` 61 | 62 | という文字列を引数として受け取り、 63 | 64 | ```javascript 65 | [ 66 | { path: "/", epoch: 200000 }, 67 | { path: "/help", epoch: 300000 }, 68 | { path: "/", epoch: 250000 }, 69 | ] 70 | ``` 71 | 72 | という構造の配列を返すように `parseLTSVLog` 関数を実装してください。 73 | 74 | 実際のアクセスログには様々なデータが含まれますが、課題では簡単のため `path` というラベルと `epoch` というラベルのみを考慮すればよいものとします。 75 | `path` というラベルの値には、URL として有効な文字列が与えられます。 76 | `epoch` というラベルの値としては、整数値とみなせる文字列が与えられます。 77 | 78 | 課題で指定されていない仕様は、自由に決めてよいものとします。 79 | 例えば、引数が与えられずに関数が呼び出された場合は、例外を送出しても良いですし、空の配列を返すようにしても構いません。 80 | 81 | なお、この関数のテストは、`js/test.html`、`js/test.js` に記述されています。 82 | ブラウザで `js/test.html` を表示すると、自動的にテストが走るようになっています。 83 | 最低限、最初から書かれているテストに通過するように `parseLTSVLog` 関数を実装してください。 84 | 余裕があれば、最初から書かれているテストにさらにテストを追加してみてください。 85 | (例えば、予期せぬ値が引数として渡された場合に関するテストなど。) 86 | テスト用のフレームワークとして [QUnit](http://qunitjs.com/) を使用しています。 87 | 88 | ### 課題 JS-2 89 | 90 | 次の 2 つの値を引数として受け取り、 91 | 92 | * 第 1 引数: `div` 要素を表す DOM オブジェクト 93 | * 第 2 引数: 課題 JS-1 で作成した関数 `parseLTSVLog` の返り値と同じ形式の配列 94 | 95 | 次のような表を (DOM 操作によって) 第 1 引数の `div` 要素の直下に生成する関数 `createLogTable` を js/main.js ファイルに記述してください。 96 | 97 | ```html 98 |
path | epoch |
---|---|
/ | 200000 |
/help | 300000 |
/ | 250000 |
「表に出力する」 ボタンをクリックすると、テキストエリアに入力したログデータが表として表示されるようにしてください。 その際、課題 JS-1 と JS-2 で作成した関数を使用してください。
155 |また、表 (table 要素) は table-container を id として持つ div 要素の子要素として作成するようにしてください。
156 |