안녕하세요. 멤버십에서 새벽까지 당직을 스고 집으로 돌아와 고양이랑 조금 놀다가 잠좀 잘까 했는데 고양이녀석 아프다고 낑낑대서 아침에 병원을 대려가기 위해 잠을 안자고 버티고 있는 1人입니다.. ㅠ_ㅠ

이번시간에는 예전부터 포스팅하려다가 미루고 미루고 미루다가 이제야 포스팅하게된.. -_-;; WPF 3D를 이용한 영화 검색엔진.... (뭔가 거창하네요)이라고 하기엔 너무나 허접한 내용을 소개하고자 합니다. 간단히 Naver Open API를 사용하여 입력한 키워드에 맞는 영화 포스터 이미지를 가져와서 3D화면에 출력하는 내용입니다. 아래는 구현 완료 동영상입니다.

동영상 캡쳐좀 잘해보려고 무압축으로 설정했더니.. 대략 2분짜리 동영상인데 900메가 가까이 커져버리더라구요.. 하는수 없이 다시 인코딩해서 용량 줄인다음 다시올렸는데.. 열악한 제 컴퓨터가 무압축 방식을 견디지 못했는지 중간에  뚝~~ 하고 끊기는 장면이 한번 보이네요-_-;; 실제로 돌려보시면 검색결과 가져오는 부분 이외에는 끊기지는 않습니다..^^;; (이부분은 너무 졸려서 해결하지 않은 채로 그냥 둿어요.. ㅈㅅ)

저번시간에는 구글에서 이미지 주워와서 하더니 이번에는 네이버에서 뒤적거려서 구한 이미지 요리조리 편집해서 사용했습니다. 혹시나 있을 수 있는 문제를 대비해 일단은 원래 제작자분이름을 적어놨는데... (사실은 허락을 받고싶지만.. 외국분이라... ㅠㅠ)

이번에도 역시 소스코드가 상당히 길어서 파일로 첨부했습니다.. (절대 설명하기가 귀찮아서 그러는게 아니랍니다!!!! )

위 내용을 구현하기 위해서는 아래와 같은 준비물이 필요합니다.
1. Naver Open API Key : Naver Developer Center에 가시면 Open API Key를 발급하는 코너가 있습니다.
2. 적절한 UI 이미지 : 저처럼 인터넷에서 주워서 사용하셔두 되고..
3. 3D Panel Mesh : 간단하게 이미지만 출력해주면 되기때문에 아래와 같이 간단한 사각형 Mesh를 만들어 사용했습니다.

4. 머리가 아파오는 수학 : 초등학교 수준같은데 어렵네요..................................................... ㅠ

자 그럼 준비가 되셨나요? 그럼 아래 Class Diagram을 보면서 구조에 대해서 살펴보도록 하겠습니다. 이미지가 줄어들어서 잘안보이시는분은 클릭하시면 원본사지으로 확인 하실 수 있습니다.

3DMovieSearch.zip

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

    public static class Extractor
    {
        const String OPENAPIKEY = "87b0c706f01ebc494df5ea894a6c0aa5";


        public static List Search(string Keyword)
        {

            XmlDocument Doc = new XmlDocument();

            Doc.Load("http://openapi.naver.com/search?key=" 
                      + OPENAPIKEY 
                      + "&display=5&start=1&target=blog&sort=sim&query=" + Keyword);

            List MusicList = new List();
            XmlNodeList LinkList = Doc.GetElementsByTagName("link");

            String TempItem;
            foreach (XmlNode LinkItem in LinkList)
            {
                TempItem = ExtractMusic(LinkItem.InnerText);
                if (String.IsNullOrEmpty(TempItem) == false) 
                    MusicList.Add(TempItem);
            }

            return MusicList;
        }



        private static String ExtractMusic(String URL)
        {

            if (URL.StartsWith("http://blog.naver.com/") == false)
                return null;

            WebClient Downloader = new WebClient();

            String UserID = URL.Substring(22, URL.IndexOf("?") - 22);
            String PostNumber = URL.Substring(URL.LastIndexOf("=") + 1);
            String PritPageURL = "http://blog.naver.com/PostPrint.nhn?blogId="
                                + UserID 
                                + "&logNo=" + PostNumber;
            String Source = Downloader.DownloadString(PritPageURL);

            int Start, End;
            String TempItem;

            End = Source.IndexOf(".wma", StringComparison.CurrentCultureIgnoreCase) + 4;
            if (End < 4)
                End = Source.IndexOf(".mp3", StringComparison.CurrentCultureIgnoreCase) + 4;
            Start = Source.LastIndexOf("http://", End);

            if (End < 4) return null;

            TempItem = Source.Substring(Start, End - Start);
            return TempItem;

        }

    }

1. Search(String Keyword) 메서드를 이용하여 검색.
2. OPEN API Key와 Blog검색 API를 사용하여 해당 Keyword를 가지고 있는 Blog URL검색
3. XMLDocument Class를 사용하여 해당 Link만 추출
4. ExtractMusic(String URL)를 사용하여 음원 추출
5. Blog Print Page를 사용하여 게시물 Source코드만 추출
6. WebClient.DownloadString 메서드를 사용하여 소스코드 다운로드
7. URL추출

Console.WriteLine("==========================");
Console.WriteLine("  NAVER MUSIC EXTRACTOR");
Console.WriteLine("==========================");

String Keyword = "";
do
{
    Console.Write("Keyword : ");
    Keyword = Console.ReadLine();
    if (String.IsNullOrEmpty(Keyword) == true) continue;

    List Result = Extractor.Search(Keyword);

    Console.WriteLine("==========================");

    foreach (String Item in Result)
    {
        Console.WriteLine(" - " + Item);
        Console.WriteLine("==========================");
    }
    

} while (true);

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

이번 시간에는 Google Open API중 날씨 API를 사용하여 한주간의 날씨를 확일 할 수 있는 Weather Board를 구현해보도록 하겠습니다. 이번 프로젝트 역시 DataBinding 기술을 사용하여 구현되지만 XmlDataProvider를 사용하여 XML Document에서 DataBinding을 적용하는 방법에서 조금 다를 수 있습니다. 구현 결과물은 아래와 같으며 Application이 시작 될 때 Google에서 제공하는 날씨정보를 기반으로 내용이 채워 지게 됩니다.

http://www.google.co.kr/ig/api?weather=seoul

실제 우리가 구현할 내용에 현재 온도나 바람 방향 등의 정보는 없지만, 실제로는 최저기온, 최고기온, 바람방향 등의 정보를 제공하며 주소 뒤에 seoul이라고 표시된 부분을 아래와 같이 원하는 지역의 이름으로 입력하시면 해당 지역의 현재 날씨를 가져 올 수 있습니다.

이제 본격적으로 구현에 들어가보도록 하겠습니다. 아래는 소스코드입니다.

먼저 XAML코드부터 보겠습니다. 중요한 부분은 노란색으로 색을 칠해놨으니 그 부분을 중점적으로 설명하도록 하겠습니다.

<XmlDataProvider Source="http://www.google.co.kr/ig/api?weather=seoul" XPath="xml_api_reply/weather" x:Key="Weather"/>

XMLDataProvider는 간단하게 설명해서 XAML에서 DataBinding을 가능하게 하기 위한 도구로서 (MSDN에는 데이터 바인딩을 위해 XML에 대한 선언적 액세스를 활성화하는 것 이라 설명되있습니다.) Source Property에 XML Document의 URL을 입력합니다. 여기에 앞에서 설명했던 WeatherAPI URL을 입력했습니다. 그리고 XPath에 접근할 XML경로를 입력합니다. 우리가 사용할 WeatherAPI는 아래와 같은 구조로 되어있으며,

그리고 이제 날씨정보를 표시하기 위한 Image 객체를 생성하고 Image객체의 Source를 Weather API에서 제공받는 Icon Image로 Binding 시켜줍니다. (icon의 data Attribute에 저장되어있습니다.)

<Image Source="{Binding Source={StaticResource Weather}, XPath=current_conditions/icon/@data,
Converter={StaticResource GoogleImageConverter}}" Margin="68,0,0,94" />

Binding Source는 위에서 선언한 XMLDataProvider가 됩니다. 그리고 여기서도 XPath를 지정할 수 있는데, XmlDataProvider에서 지정한 Path이후만 작성하면 됩니다. 만약 루트부터 Path를 입력하고자 한다면 아래와 같이 표현 할 수 있습니다.

//xml_api_reply_weather/current_conditions/icon/@data

여기서 한가지 고려 해야 할 사항이 WeatherAPI에서 제공해주는 Icon Image가 아래와 같이 절대 경로가 아닌 상대경로로 입력되어 있다는 점인데,

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.