talk about open data and web front task runners

2. denari01
コンロは絶対
家に買いましょう。
マジで料理する気がおきない…

3. denari01
社長室
・Design
・Mark up
・Javascript
・Ruby on Rails
・Django
・iOS(Swift)
・Java ・Android ・Obj-C

4. denari01
社長室
And SPARQL
💧💧

5. Open Data

6. オープンデータの話
jigのシステムを利用して自治体が
公開しているデータの使いかた

7. Let’s try!
http://sparql.odp.jig.jp/sparql.html

8. select * {
?s ?p ?o;
} limit 10
クエリです。

9. select * {
?s ?p ?o;
} limit 10
select * from users limit 10;
SPARQL
MySQL

10. ?s??? ?p?????? ?o????????

11. 避難所
データ
避難所
データ

12. 避難所
データ
名前
住所
場所
江体育館
江市hoge町…
緯度 35.xxxx
経度 135.xxxx

13. 避難所
データ
名前
住所
場所
江体育館
江市hoge町…
場所データ
主語 述語 目的語
場所
データ
緯度
経度
35.xxxx
135.xxxx

14. RDF
SPARQL Endpointが検索する対象のデータ
XMLの記法を拡張したもの

15. URIで基本すべて表記

16. <rdf:Description rdf:about=“http://odp.jig.jp/jp/shizuoka/shimada/236#%~~">
<geo:lat rdf:datatype=“http://www.w3.org/2001/XMLSchema#float">34.846963</geo:lat>
<geo:long rdf:datatype=“http://www.w3.org/2001/XMLSchema#float">138.122395</geo:long>
<rdfs:label xml:lang=“ja”>五和小学校</rdfs:label>
<rdf:type rdf:resource=“http://purl.org/jrrk#EmergencyFacility"/>
</rdf:Description>
PREFIX rdf:<http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX rdfs:<http://www.w3.org/2000/01/rdf-schema#>
PREFIX jrrk:<http://purl.org/jrrk#>

17. SELECT ?name {
?s rdf:type jrrk:EmergencyFacility;
rdfs:label ?name.
}
PREFIX rdf:<http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX rdfs:<http://www.w3.org/2000/01/rdf-schema#>
PREFIX jrrk:<http://purl.org/jrrk#>
SPARQL

18. SPARQL
select * {
?s ?p ?o;
} limit 10

19. PREFIX jrrk: <http://purl.org/jrrk#>
PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
PREFIX schema: <http://schema.org/>
PREFIX geo:<http://www.w3.org/2003/01/geo/wgs84_pos#>
SELECT DISTINCT ?lat ?lng ?image_url ?name {
?target_rdf rdf:type jrrk:CivicPOI;
geo:lat ?lat;
geo:long ?lng;
schema:image ?image_url;
rdfs:label ?name
}
SPARQL
http://odp.jig.jp/odp/1.0#

20. SPARQL -> JSON -> hogeで
最高のオープンデータ開発ライフを

21. Task runner
Web front dev

22. ガルパンはいいぞ
ぼくは片メガネの桃ちゃんが最高だと思う

24. Gulp

25. Grunt

26. いいぞ、っていう話

27. .class1 {
font-size: 10px;
.class2 {
color : red;
}
}
.class1 {
font-size: 10px;
}
.class1 .class2 {
color : red;
}
Sass

28. ul
li
a(href=”hoge.html”)
| ほげ
<ul>
<li>
<a href=”hoge.html”>
ほげ
</a>
</li>
</ul>
Jade

29. a = (a,b) -> a + b
var a;
a = function(a, b) {
return a + b;
};
CoffeeScript

30. コンパイルがめんどくさい…

31. 一挙にコンパイルしてくれる

32. ソース保存時に自動で

33. ついでにブラウザを更新

34. ・テスト実行
・依存関係を解決
・minify
・コーディング規約チェック
・ヒアドキュメントをまとめる
・コード中の// TODO : を収集
・簡易サーバー立てる

35. 大体こんな感じで自動化

36. npm install -g grunt grunt-cli
install
npm install -g gulp
node.jsをインストールする

37. さて、何がちがうのか

38. タスクの書き方

39. module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
slim: {
dest: {
files: [
{
expand: true,
cwd: 'public_html',
src: ['*.slim', '!_*.slim'],
dest: 'public_html/dest',
ext: '.html'
}
]
}
}
});
grunt.loadNpmTasks(‘grunt-slim');
return grunt.registerTask('default', ['slim');
};
ほぼJSON

40. var gulp = require('gulp');
var jade = require('gulp-jade');
gulp.task('default', function() {
gulp.run(‘jade');
});
gulp.task('jade', function() {
return gulp.src(‘./*.jade’)
.pipe(plumber())
.pipe(jade({
pretty: true
})).pipe(gulp.dest(‘dest/’));
});
gulp.task('watch', function() {
gulp.watch(‘./*.jade', ['jade']);
gulp.watch(‘./**/*.jade', [‘jade']);
});
method
chaining

41. 処理の軽さ

42. a = (a,b) -> a + b
var a;
a = function(a, b) {
return a + b;
};
例えば
var a;a=function(a,b){return a+b;};
coffeescriptのコンパイル
minify

43. a = (a,b) -> a + b
var a;
a = function(a, b) {
return a + b;
};
var a;a=function(a,b){return a+b;};
src.coffee
compiled.js
minified.min.js

44. a = (a,b) -> a + b
var a;
a = function(a, b) {
return a + b;
};
var a;a=function(a,b){return a+b;};
src.coffee
minified.min.js

45. module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
slim: {
dest: {
files: [
{
expand: true,
cwd: 'public_html',
src: ['*.slim', '!_*.slim'],
dest: 'public_html/dest',
ext: '.html'
}
]
}
}
});
grunt.loadNpmTasks(‘grunt-slim');
return grunt.registerTask('default', ['slim');
};
ほぼJSON

46. var gulp = require('gulp');
var jade = require('gulp-jade');
gulp.task('default', function() {
gulp.run(‘jade');
});
gulp.task('jade', function() {
return gulp.src(‘./*.jade’)
.pipe(plumber())
.pipe(jade({
pretty: true
})).pipe(gulp.dest(‘dest/’));
});
gulp.task('watch', function() {
gulp.watch(‘./*.jade', ['jade']);
gulp.watch(‘./**/*.jade', [‘jade']);
});
method
chaining

47. 個人的にはGulpがオススメ
Gruntと比較しても、すごく軽い。Gulpはいいぞ

48. SlideShare
http://slideshare.com/denari01/spring-vacation