서울시 정보 GitHub 공개

https://github.com/seoul-opengov/opengov

몇 달 전에 서울시에서 공개한 정보들을 GitHub에 올렸다고
뉴스에서 봤었는데 이제 한번 찾아봤습니다.

실제 저기 있는 데이터는
http://opengov.seoul.go.kr/ - 서울시 정보소통광장

여기에 있는 데이터들을
GitHub에 다운받아서 사용하기 좋게 디렉터리 별로 나눠놓은 것 같습니다.

주요 공개 정보는 다음과 같습니다.

• 결재문서 - info_list

• 정책연구보고서 - public_list
• 사전정보공표 - research_list

결재문서의 폴더를 한번 들어가 보겠습니다.



이렇게 쭉 있고
글 작성 최근 5일전까지 데이터가 업로드 되었습니다.
꾸준히 관리하고 있는 것 같습니다.

각 정보 파일은 .json, .xml, xlsx, csv 데이터로 각각 저장되어있습니다.
.json 파일 한번 열어보도록 하겠습니다.



파일 한번 다운받아봤는데
34.4MB 크기로 되게 큽니다.

결재 문서의 형식 정보는
https://github.com/seoul-opengov/opengov#분야별-항목설명-별도-표시-없는-경우-not-null항목
위의 README.md에 있습니다

결재문서

• package_id : 문서관리번호(PK)
• doc_prdctn_dt : 자료생산일자
• trck_card_nm : 단위과제카드명
• title : 제목
• src_dept_doc_id : 문서번호 (예: 정보공개정책과-1234)
• writer : 담당자
• othnd_pd : 문서보존기간(1년, 3년, 5년, 10년, 30년, 준영구, 영구)
• dept_nm : 부서명
• othbs_se : 공개구분코드(공개,부분공개,비공개)
• cpyrht : 라이선스(CCL 적용, CC BY, CC BY-ND, CC BY-SA, CC BY-NC, CC BY-NC-SA, CC BY-NC-ND ), nullable
• url : 원문공개URL, nullable
• 주의사항 :cpyrht,url은 원문공개중인 경우만 해당 정보가 존재함.

제가 보기엔 이 데이터들을 무언가에 사용하기엔

2차, 3차 가공이 필요해보이긴합니다.

해당 공개된 자료를 다운받고, 그에 대한 자료 처리를 통해서 뭔가 할 수 있을 것 같습니다. 

저는 정보공개 외에는 큰 의미가 있을까, 어떻게 사용할 수 있을지 의문이 듭니다.

PS.

저는 개인적으로 통계적인 데이터를 받아서 사용할 수 있게 만들어서 주는게 

차라리 낫지 않을까 싶습니다.

서울의 통계나 공공데이터를 깃헙에 정리하는 것도 좋을 것 같지만 따로 사이트가 있으니 

http://data.seoul.go.kr/index.jsp - 여기가서 필요한 정보 받아서 사용하는게 좋을듯 합니다.

<서울 열린데이터 광장>

서울 열린데이터 광장도 많은 기능이 있는 것 같은데

한번 사용해보고 포스팅해봐야겠습니다.

더 많은 사용자를 위한 개발 - 구글 개발자 블로그

원글: http://android-developers.blogspot.kr/2016/06/building-for-billions.html

구글 개발자 코리아 블로그 글
http://googledevkr.blogspot.kr/2016/07/building-for-billions.html

좋은 이야기인 것 같습니다.
사용자들이 좋은 환경에서 잘 사용해야 좋은 앱이지요!

블로그 글의 내용은

- 느린 인터넷 및 오프라인 상태에서 올바르게 동작하기
- 정확히 상황에 들어맞는 올바른 콘텐츠 제공
- 모바일 하드웨어를 위한 최적화
- 배터리 소모 절감
- 데이터 사용량 절약

해당 내용은
구글 빌리온즈 (https://developers.google.com/billions/) 에서 볼 수 있습니다.

웹에 대한 내용은
https://developers.google.com/web/billions/

안드로이드에 대한 내용은
https://developer.android.com/distribute/essentials/quality/billions.html

Updating Global Packages, NPM

https://docs.npmjs.com/getting-started/updating-global-packages

#NPM을 통해서 다운받았던 글로벌 패키지들을 업데이트합니다.
링크에 나와있는 내용을 기반으로 업데이트를 진행해봤습니다.
사용하는 모듈이 최신버전이 아닐경우 문제가 생기는 경우가 간혹 있어서
업데이트하는 방법을 찾아봤는데 어렵지 않더라구요.

공유합니다.


$npm updated -g



#Update these outdated list

$npm update -g

RegExr - 정규식 공부, 연습할 수 있는 서비스

http://regexr.com/



정규식에 대해서 관심이 있던차에
이런 서비스를 찾았습니다.

RegExr의 의미는 RegularExpression.
정규 표현식이라는 의미입니다.

정규표현식이란 무엇일까요?
위키: 위키 링크

"특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이다. 정규 표현식은 많은 텍스트 편집기와 프로그래밍 언어에서 문자열의 검색과 치환을 위해 지원하고 있으며, 특히펄과 Tcl은 언어 자체에 강력한 정규 표현식을 구현하고 있다." - 위키 

특정한 규칙을 가진 문자열의 집합을 표현한다.
우리는 이러한 규칙을 이용해서 문자열을 치환한다던지, 찾아낸다던지, 그에 맞게 처리하는
로직에 정규식을 넣고 싶어합니다.

다만 조금, 아니 많이 어려울 뿐이죠 ㅎㅎ
(한번 알고나면 괜찮다는데 여전히 어렵습니다.)

RegExr라는 서비스는 연습 데이터가 있고 그 데이터에서 정규식을 사용자가
직접 수정하고 적용하면서 어떻게 되는지 공부할 수 있는 서비스 입니다.

<튜토리얼 영상>

현재 이 서비스는 깃헙에 공개되어있습니다.

GitHub: https://github.com/gskinner/regexr/

사용법은 튜토리얼 영상을 보지 않더라도 어렵지 않게 사용할 수 있지만

정규식을 모르는 분들이라면 이 서비스로 공부하는게 어렵긴합니다.

(저도 어려워서 다른 곳에서 정보 찾아가며 공부중입니다)

정규식에 대한 문법은 아래에 있습니다.

위키 링크: 정규식 문법

그에 대한 예시도 포함되어있습니다.
위키 링크: 정규식 예

RegExr에는 레퍼런스 메뉴가 있는데
거기 있는 내용을 참고해서 테스트 해볼 수 있습니다.

<메뉴대로 쭉 눌러서 들어간 후 "." 을 테스트해보았다.>

그 외에 테스트 했던 정규식을 저장하고, 정규식을 공유하는 기능 등이
잘 녹아 있는 서비스 입니다.




모두 즐거운 코딩하시길!

안드로이드 Firebase 테스트하기

구글 디벨로퍼 코리아 블로그에 소개된 내용입니다.
http://googledevkr.blogspot.kr/2016/07/introducing-firebase-test-lab-for.html
공유합니다.

+Google Developers
+Life at Google

동영상:




단계별로 따라할 수 있는 코드랩 링크:
https://codelabs.developers.google.com/codelabs/firebase-test-lab/index.html?utm_campaign=Firebase_featureoverview_education_testlab_en_06-29-16&utm_source=gdevkrkr&utm_medium=blog#0

즐거운 개발하세요~

JavaScript Standard Style - 자바스크립트 코딩 스타일(컨벤션) 체크 툴

http://standardjs.com/

최근에 자바스크립트 공부를 하면서 느꼈던게 있었는데
코딩 컨벤션, 코딩 스타일에 대한 것이었습니다.

에어비앤비에서 깃헙에 올렸던
자바스크립트 코딩 스타일 가이드 문서 라던지,
https://github.com/airbnb/javascript

구글에 있는 자바스크립트 코딩 스타일 가이드도 봤었습니다.
https://google.github.io/styleguide/javascriptguide.xml

제 코드에서 조금씩 조금씩 바꿔보긴 했는데
힘들어서 자동툴 같은 것이 없을까해서 찾아봤는데
역시 누군가가 잘 만들어놨습니다.
(제가 한번 만들어보고 싶었는데 나중에 한번 만들어봐야겠습니다.)

위에 있는 스탠다드JS가 그 툴을 만든곳이고
그 툴의 이름이기도 합니다.

깃헙 주소는 https://github.com/feross/standard

사용법은 쉽습니다.

1. 설치
$npm install standard -g

2. 사용
자바스크립트로 작성중인 프로젝트의 디렉토리에 가셔서
$standard

그럼 각 라인별로 확인을 해서 기준에 맞는지 틀리는지 체크합니다.

결과는
/Users/pineoc/Desktop/project/server/app.js:1:33: Extra semicolon.
  /Users/pineoc/Desktop/project/server/app.js:2:27: Extra semicolon.
  /Users/pineoc/Desktop/project/server/app.js:3:5: 'favicon' is defined but never used
  /Users/pineoc/Desktop/project/server/app.js:3:39: Extra semicolon.
  /Users/pineoc/Desktop/project/server/app.js:4:31: Extra semicolon.
  /Users/pineoc/Desktop/project/server/app.js:5:44: Extra semicolon.
  /Users/pineoc/Desktop/project/server/app.js:6:40: Extra semicolon.
  /Users/pineoc/Desktop/project/server/app.js:7:5: 'fs' is defined but never used

이런식으로 쭉해서
출력이 너무 많이 나와서 파일로 출력해봤습니다.

$standard > standard.out

그랬더니...
출력 라인수가 17828!
(파일 라인 확인하는 방법은 $wc -l [filename] 입니다.)

많이 고쳐야겠네요.. ㅎㅎ

아, 그리고 이 스타일 체크는 아래와 같은 기준으로 합니다.

/* 깃헙에 있는 룰을 가져왔습니다.*/

Rules

• 2 spaces – for indentation
• Single quotes for strings – except to avoid escaping
• No unused variables – this one catches tons of bugs!
• No semicolons – It's fine. Really!
• Never start a line with (, [, or `
  • This is the only gotcha with omitting semicolons – automatically checked for you!
  • More details
• Space after keywords if (condition) { ... }
• Space after function name function name (arg) { ... }
• Always use === instead of == – but obj == null is allowed to check null || undefined.
• Always handle the node.js err function parameter
• Always prefix browser globals with window – except document and navigator are okay
  • Prevents accidental use of poorly-named browser globals like open, length, event, and name.

PS. Node.js 프로젝트에 적용한 것이지만
어느정도 골라서 수정이 필요할 것 같습니다.

Google I/O 2016 Recap

Search at I/O 16 Recap: Eight things you don't want to miss
posted on google developers blog

https://developers.googleblog.com/2016/05/search-at-io-16-recap.html?m=1

Index of 8 things you don't miss it

1. Introducing rich cards

https://webmasters.googleblog.com/2016/05/introducing-rich-cards.html

2. New Search Console reports

https://developers.google.com/search/docs/guides/debug#keep-track-of-coverage

3. Real-time indexing

4. Getting up to speed with Accelerated Mobile Pages

https://www.ampproject.org/

5. A new and improved Structured Data Testing Tool

https://search.google.com/structured-data/testing-tool

6. App Indexing got a new home (and new features)

https://www.youtube.com/watch?v=C35OSHlTNwA

7. App streaming

https://www.youtube.com/watch?v=T93bcJh4oSQ

8. Revamped documentation

https://developers.google.com/search/

How to check Developer tool window open

http://stackoverflow.com/questions/7798748/find-out-whether-chrome-console-is-open

In my case,




I use check4.js

check1.js, check2.js code can't check developer tools open event.
check3.js code check using setInterval() function.

check4.js
code use Object definedProperty() function on get() function.
console.log("%c hello", element)

When console.log called, element object call get() function.
And you can check developer tools open

Happy Coding!

Chrome 52 Released

Chrome 52: Contain Property, the PerformanceObserver API & Service Worker Stream

Chrome 52 released.

Release note

* CSS Contain Property

- Post: http://goo.gl/9hX2A2

- Spec: http://goo.gl/AmLB8z

* Performance Observer API

- Post: http://goo.gl/gteR4E

- Demo: http://goo.gl/wYwdY9

- Spec: http://goo.gl/TA9RtM

* Service Worker Streamed Responses

- Post: http://goo.gl/hrRUd0

- Spec: http://goo.gl/DgrjhH

안드로이드 얼굴 인식 해보기 (Android face detection)

이번에 안드로이드 앱 개발 프로젝트가 하나 생겨서
얼굴 인식을 해야할 일이 생겼습니다.

어렵지 않게 안드로이드 쪽 API가 있겠거니 해서 찾아서
테스트 진행!

우선 API가 있나 찾아봅니다.
API 문서: android/media/FaceDetector.html
소개 문서: google/android/gms/vision/face/FaceDetector

코드랩은 쭉 따라가면서 만들어보는 곳인데
사진에 대해서 얼굴 인식을 해보는 예제입니다.
CodeLab: https://codelabs.developers.google.com/codelabs/face-detection/index.html#0

구글 비전 API관련 소스는 아래를 참고하시면 좋습니다.
https://github.com/googlesamples/android-vision

저는 일단은 코드랩을 따라서 진행해봤습니다.
아래와 같은 목표를 가지고 진행을 했는데요.
1. 얼굴의 위치를 가져오자
2. 얼굴의 눈, 코, 입, 등의 구성요소 위치를 가져오자

코드랩을 따라가면
사진을 이용해 1의 목표만을 달성할 수 있었습니다.

코드랩은 이렇게 생겼습니다

2단계에서는 프로젝트를 만들고 프로젝트 세팅을 합니다.

3단계에서는 메인 엑티비티 코드를 수정해서 기능 구현을 하고

4단계에서 결과를 같이 보게 됩니다.

제가 따라하면서 만들었던 코드는 아래와 같습니다.

저는 추가적으로 목표 2를 달성하기 위해
몇줄의 코드를 추가했습니다.

https://developers.google.com/vision/detect-faces-tutorial
여기서 보고 추가한

FaceDetector detector = new FaceDetector.Builder(context)
    .setTrackingEnabled(false)
    .setLandmarkType(FaceDetector.ALL_LANDMARKS)
    .build();

그리고 랜드마크들 위치에 점을 찍기 위해서
얼굴 찾은 반복문에서 랜드마크 리스트를 받고 랜드마크 각각의 위치에
초록색 동그라미를 찍어 주었습니다.


카메라를 이용해서 얼굴인식을 하는 것은 다음 포스트에서 진행하려고 합니다.
그래도 관련 링크는 남겨놓겠습니다!

https://developers.google.com/vision/face-tracker-tutorial

즐거운 코딩하세요!

프로그래시브 웹앱 (Progressive Web App) 만들어보기 - 프로그래시브 웹 앱이란

프로그래시브 웹앱(Progressive Web App, PWA)은 최근 구글 I/O 2016에서도 발표를 했었지만
그전부터 진행되어 왔던 프로젝트 입니다.
공식적으로는 2015년에 발표되었죠.

이 프로젝트는 웹이 앱이 되가는 과정을 보여주고 있습니다.
PWA의 몇가지 특징을 보면

• Progressive - Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
• Responsive - Fit any form factor: desktop, mobile, tablet, or whatever is next.
• Connectivity independent - Enhanced with service workers#Service Workers to work offline or on low quality networks.
• App-like - Feel like an app to the user with app-style interactions and navigation because they’re built on the app shell model.
• Fresh - Always up-to-date thanks to the service worker update process.
• Safe - Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
• Discoverable - Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
• Re-engageable - Make re-engagement easy through features like push notifications.
• Installable - Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
• Linkable - Easily share via URL and not require complex installation.

[출처]: https://en.wikipedia.org/wiki/Progressive_web_app

해석의 시간입니다.

• Progressive - 그들은 핵심 교리(tenet)로 점진적 개선을 내장하고 있기 때문에 브라우저의 선택에 관계없이 모든 사용자에 대해 동작 할 수 있다.
• Responsive - 모든 폼팩터에 맞는다: desktop, mobile, tablet, or whatever is next.
• Connectivity independent - service workers의 향상#서비스 워커는 오프라인과 네트워크가 좋지 않을때에도 동작한다.
• App-like - PWA는 앱 쉘 모델을 기반으로하고 있기 때문에 앱 스타일의 상호 작용 및 탐색으로 사용자에게 응용 프로그램 같은 느낌을 줌.
• Fresh - 항상 최신이다.(서비스 워커의 업데이트 프로세스로)
• Safe - 내용의 스누핑을 방지하기 위해 HTTPS를 통해서 전달.
• Discoverable - W3C Manifest를 도입, "애플리케이션" 으로서 인식되고 검색엔진에 의해 등록 가능할 것.
• Re-engageable - 푸시 노티피케이션을 통해 사용자 다시 불러오기
• Installable - 앱스토어를 통해 번거롭게 찾지 않아도 앱을 홈 화면에 둘 수 있는 것
• Linkable - 복잡한 설치가 필요없다면 URL을 통해 쉽게 공유가능해야함 .

앞으로의 웹은 이러한 특징을 가진 앱으로 만들어질 것이고
PWA를 통해 본격적으로 진행되고 있는 것으로 보입니다.

PWA를 현재 공부하는 중이지만
블로그 페이지나 공부겸 해서 한번 테스트 페이지를 만들어볼 생각입니다.

해당 서브밋이 있으니 영상도 참고하시면 좋습니다.
https://www.youtube.com/playlist?list=PLNYkxOF6rcIAWWNR_Q6eLPhsyx6VvYjVb

그리고 현재 구글 디벨로퍼 페이지에서 정보를 더 얻을 수 있습니다.
PWA에 대한 소개: https://developers.google.com/web/progressive-web-apps/
PWA 처음 시작: https://developers.google.com/web/fundamentals/getting-started/your-first-progressive-web-app/?hl=en
PWA 시작하기 (코드랩): https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0

다음 포스팅에서는 "구글 코드랩에서 시작하는 PWA" 를 다루겠습니다.

Happy Coding!