概要

• 募集締め切り
  • 2013年6月16日（日）24時（日本標準時）
• 開催日程
  • 2013年8月12日（月）～9月6日（金）（平日のみ 全20日）
• 会場
  • はてな 京都本社（京都市中京区）
  • ※遠方から参加される方にはインターンシップ期間中、弊社から徒歩圏内に宿泊先を用意します。また、京都までの往復交通費は(上限25,000円)はてなが負担します。

過去のサマーインターンの様子

前回までのサマーインターンの様子は、年別に以下のブログやページにまとめています。参加者が取り組んだ内容や感想などを盛り込んでおりますので、ぜひご覧ください。

エンジニア向けはてなサマーインターンとは

2008年より毎年開催されているインターンシッププログラムです。Webサービス開発者としての技術を身につけ、実際にはてなのサービス開発を行う、実践的な内容となっています。
過去のはてなサマーインターンについては以下のリンクをご覧ください。
http://www.hatena.ne.jp/company/staff/intern

サンプルコード

以下はユーザ情報を取得する各言語でのサンプルコードです。

Perl

use utf8;
use LWP::UserAgent;
use JSON::XS qw(decode_json);

binmode(STDOUT, ":utf8");

my $ua = LWP::UserAgent->new;

sub api_request {
    my ($uri) = @_;
    my $res = $ua->get($uri);

    die $res->status_line if $res->is_error;

    decode_json($res->content);
}

my $movies = api_request('http://ugomemo.hatena.ne.jp/11F9E990AA34FFBC@DSi/movies.json?token={ここにAPIトークンを入れる}');

printf "ピョコライフさんは%d個の作品を投稿しています。\n", $movies->{count};
#-> ピョコライフさんは31個の作品を投稿しています。

初めてのPerl 第6版

• 作者: Randal L. Schwartz,brian d foy,Tom Phoenix,近藤嘉雪
• 出版社/メーカー: オライリージャパン
• 発売日: 2012/07/25
• メディア: 大型本
• 購入: 7人 クリック: 22回
• この商品を含むブログ (13件) を見る

Common Lisp

(ql:quickload :drakma)
(ql:quickload :yason)

(defun api-request (uri)
  (multiple-value-bind (body status)
      (drakma:http-request uri :want-stream t)
    (when (> status 399)
      (error (princ-to-string status)))
    (yason:parse body)))

(defvar *movies*
 (api-request "http://ugomemo.hatena.ne.jp/11F9E990AA34FFBC@DSi/movies.json?token={ここにAPIトークンを入れる}"))

(format t
        "~&ピョコライフさんは~D個の作品を投稿しています。~%"
        (gethash "count" *movies*))
;-> ピョコライフさんは31個の作品を投稿しています。

実践Common Lisp

• 作者: Peter Seibel,佐野匡俊,水丸淳,園城雅之,金子祐介
• 出版社/メーカー: オーム社
• 発売日: 2008/07/26
• メディア: 単行本（ソフトカバー）
• 購入: 8人 クリック: 192回
• この商品を含むブログ (69件) を見る

どうぞご利用ください。

Windows ストア アプリについて

Windows ストア アプリの概要は Windows ストア アプリの概要 に詳しくありますが、とくにWeb開発者にとって注目すべきなのは、

Web 開発テクノロジに関する知識をお持ちの場合は、HTML5、カスケード スタイル シート レベル 3 (CSS3)、JavaScript を使って 新しいユーザーインターフェースのWindows ストア アプリを開発できます。

という箇所でしょう。
今回は、実際にHTML5, CSS, JavaScriptで開発するスタイルで、はてなブックマークの人気エントリーを表示するアプリを作っていく過程を解説していきたいと思います。

開発環境

Windows ストア アプリを開発するにはWindows 8が必要です。
開発者向けの試用版が提供されていますので、こちらをダウンロードして使います。
Oracle社が提供しているVirtualBoxや、VMware社が提供する各種仮想化環境にインストールして開発する事ができますので、OSを一からインストールする事ができない環境でも試す事ができます。

OSのインストールが完了したら続いて、開発ツールのインストールを行います。
デベロッパーセンターのダウンロードページへアクセスします。

「詳細情報および他の言語を入手する (英語)」というリンクをたどり、「Visual Studio Express 2012 for Windows 8」のDownload language を日本語にし「Install now」からインストールを開始します。

インストールが完了したらもちろん起動です。

起動時にプロダクトキーの入力を求められますが、今回は試用という事でこのウィンドウは閉じて先に進めます。

プロジェクトの作成とデバッグ

マイクロソフトのアカウントを入力してログインすると、Start Pageが開きます。

設定によって英語のインターフェースで起動する事がありますが、その時は右上のquick launchに「language」と打ち込み言語設定を変更します。

日本語に設定して再起動すると…

UIが日本語になりました。

ではさっそくプロジェクトを作っていきましょう。
プロジェクトにはテンプレートという雛形があります。色々なテンプレートがありますが、今回はこの中から「グリッド アプリケーション」を選択します。

テンプレートが開き、開発を始める準備が整いました。

ちゃんと動作するかどうか、まずはF5キーを押してデバッグモードにはいります。

ちゃんと動いてますね。

この際にシミュレーターをつかってデバッグすると動作確認画面と開発環境を行き来しやすくなります。

Windows ストア アプリのHTML

では実際にコードを追いかけてみましょう。
まずdefault.htmlを見てみると、body要素の中に

<div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/groupedItems/groupedItems.html'}"></div>

という記述があります。他のHTMLへのパスがかいてありますが、このHTMLを読み込んで表示しているようですね。
このモデルは単一ページナビゲーション モデルといいデベロッパーセンターに詳しい解説がありますが、通常のWebページではスクリプトをロードする度に初期化されてしまうので、単一のページを起点に画面遷移などが行える仕組みになっています。

groupedItems.htmlの中を見てみると色々な記述があります。
その中でも以下のような「data-win-control="WinJS.Binding.Template"」という属性がついたdiv要素がいくつかあります。

    <div class="headertemplate" data-win-control="WinJS.Binding.Template">

このWinJS.Binding.Templateは、いわゆるテンプレートエンジンに相当するもので、PerlですとTemplateTookit, PHPだとSmarty, RubyだとAmritaなどに近いもののようです。
このテンプレートエンジンの詳しい使い方は http://msdn.microsoft.com/ja-jp/library/windows/apps/hh758329.aspx で参照する事ができます。
簡単には、

    <h4 class="item-title" data-win-bind="textContent: title"></h4>

という風にdata-win-bindという属性を使ってバインドした変数を展開していきます。

このテンプレートの定義の下には、実際に画面に表示されるHTMLが記述されています。
今回は HatenaBookmark というプロジェクト名にしたためアプリのタイトルとして HatenaBookmark が表示されていますが、プロジェクト名にはコロンなどの記号が使えませんので、この h1 の中を「Hatena::Bookmark」に変更してみます。

    <h1 class="titlearea win-type-ellipsis">
        <span class="pagetitle">Hatena::Bookmark</span>
    </h1>

アプリのデータ構造

さて、実際のデータはどこにあるのでしょう。
まず、groupedItems.htmlと同じディレクトリにある、groupedItems.jsを見てみます。
どうやらこの中では、groupedItems.htmlの要素にイベントやデータを割りあてているようです。
具体的には下の箇所で、 ListViewにData.groups.dataSourceを渡しています。

        // This function updates the ListView with new layouts
        _initializeLayout: function (listView, viewState) {
            /// <param name="listView" value="WinJS.UI.ListView.prototype" />

            if (viewState === appViewState.snapped) {
                listView.itemDataSource = Data.groups.dataSource;
                listView.groupDataSource = null;
                listView.layout = new ui.ListLayout();
            } else {
                listView.itemDataSource = Data.items.dataSource;
                listView.groupDataSource = Data.groups.dataSource;
                listView.layout = new ui.GridLayout({ groupHeaderPosition: "top" });
            }
        },

では、このDataを定義しているのはどこでしょうか。groupedImtes.jsの中にはそれらしい所はみつかりません。
もう一度groupedItems.htmlに戻り、head要素の中をみてみると、groupedItems.jsの他に

    <script src="/js/data.js"></script>

という、いかにもといったスクリプトを読み込んでいます。

さっそくdata.jsをみてみると、

    // TODO: Replace the data with your real data.
    // You can add data from asynchronous sources whenever it becomes available.
    generateSampleData().forEach(function (item) {
        list.push(item);
    });

というTODOがありました。
ここでlistにitemを登録して、Dataを作っているようですので、generateSampleData()をみるとどういったデータが送られてくるのかがわかるはずです。

ありました。
さきほどのアプリで表示された内容がここに格納されていますので、ここの内容を書き換えれば、きっと内容もかわるはず。

    var sampleGroups = [
        { key: "group1", title: "最近の人気エントリー", subtitle: "はてなで人気の話題", backgroundImage: darkGray, description: "最近はてなブックマークで人気のある話題です" },
    ];

    // Each of these sample items should have a reference to a particular
    // group.
    var sampleItems = [
        { group: sampleGroups[0], title: "人気記事: 1", subtitle: "これはすごい", description: "概要がここにはいります。", content: "本文がここにはいります", backgroundImage: lightGray },
        { group: sampleGroups[0], title: "人気記事: 2", subtitle: "これはきれい", description: "概要がここにはいります。", content: "本文がここにはいります", backgroundImage: darkGray },
        { group: sampleGroups[0], title: "人気記事: 3", subtitle: "これはべんり", description: "概要がここにはいります。", content: "本文がここにはいります", backgroundImage: mediumGray },
        { group: sampleGroups[0], title: "人気記事: 4", subtitle: "これはやばい", description: "概要がここにはいります。", content: "本文がここにはいります", backgroundImage: darkGray },
        { group: sampleGroups[0], title: "人気記事: 5", subtitle: "これはひどい", description: "概要がここにはいります。", content: "本文がここにはいります", backgroundImage: mediumGray }
    ];

今回は人気エントリーのRSSを利用するので、上記のように書き換えてみます。
これで実行してみると、ご覧の通り内容が書きかわってぐっとそれっぽくなってきました。

つづいては、このデータ構造をはてなブックマークのRSSを取得して作りだしていきます。

Web上のコンテンツの取得

WinJS.xhrという関数を使ってRSSを取得します。
WinJS.xhrはXMLHttpRequestのラッパーになっていて、これを使うとWeb上のコンテンツを簡単にダウンロードしてアプリから利用する事ができます。
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh868282.aspx

サーバとの通信は非同期になるので、コールバック関数の中でlistにpushするという処理を行うようにします。

    WinJS.xhr({ url: feedUrl }).done(
    function complete(result) {
        // この関数で処理する
    },
    function error(error) {
    });

はてなブックマークではJSON形式でのフィード提供をしていないので、Googleが提供しているAPIを利用させていただき、RSSをJSONに変換します。

    var feedUrl = "http://b.hatena.ne.jp/hotentry.rss";
    feedUrl = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&output=json&num=999&q=" + encodeURIComponent(feedUrl);

現在は人気エントリーしか表示しませんが、他のカテゴリーも表示できるようにカテゴリーのグループをつくっておきます。

    var categories = [
        { key: "group1", title: "最近の人気エントリー", subtitle: "はてなで人気の話題", description: "最近はてなブックマークで人気のある話題です" },
    ];

WinJS.xhrを利用して、取得したJSONにgropu属性を追加してlistにpushしていきます。
このlistはWinJS.Binding.Listのインスタンスにpushするなどの操作をする事で、動的に表示しているリストの要素を変更する事ができます。

    WinJS.xhr({ url: feedUrl })
        .done(function complete(result) {
            var jsonData = JSON.parse(result.response);
            jsonData.responseData.feed.entries.forEach(function (item) {
                item.group = categories[0];
                list.push(item);
            });
        });

    /* サンプルデータは表示しないようにコメントアウトしておきます
    generateSampleData().forEach(function (item) {
        list.push(item);
    });
    */

実行すると、ついに人気エントリーのコンテンツが表示されるようになりました！

テンプレートの編集

でも少し見た目が変ですね…。
この見た目をいじるためには、上でも述べたgroupedItems.htmlの中のテンプレートを変更します。

    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <div class="item">
            <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
            <div class="item-overlay">
                <h4 class="item-title" data-win-bind="textContent: title"></h4>
                <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
            </div>
        </div>
    </div>

背景色を変更するために画像が設定されていましたが、そこをcontentSnippetに変更して概要を表示するようにします。

    <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
    ↓ 
    <div data-win-bind="textContent: contentSnippet"></div>

サブタイトルは無いので削除します。

    <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>

これでだいぶ見た目がすっきりしました。

ブックマーク数を表示する

しかし何かが足りません。そうブックマーク数です。
はてなブックマークではそのエントリーにつけられたブックマーク数を表示する画像APIを提供しています。
今回はそれを使って、ブックマーク数を表示してみましょう。

data.jsにもどって、

    WinJS.xhr({ url: feedUrl })
        .done(function complete(result) {
            var jsonData = JSON.parse(result.response);
            jsonData.responseData.feed.entries.forEach(function (item) {
                item.group = categories[0];
                item.counterImageURL = "http://b.st-hatena.com/entry/image/" + item.link; // 画像APIのURLを追加する
                list.push(item);
            });
        });

このデータを表示するために以下のHTMLをgroupedImtes.htmlのテンプレートに追加します。

    <div class="item-subtitle win-type-ellipsis"><img data-win-bind="src: counterImageURL" /></div>

これではてなブックマークらしくなりました。

HTMLとJavaScriptをつかったアプリには、ローカルコンテキストと Webコンテキストというの2つのコンテキストがあります。
ローカルコンテキストではWebサイトでよく使われているような外部ドメインの JavaScript を読み込みができないという制限があったり、Webコンテキストではシステムへのアクセスが制限されます。
(詳しくは http://msdn.microsoft.com/ja-jp/library/windows/apps/hh465373.aspx を参照してください)
こういった制限があるため、各アイテムをクリックした時に不正なHTMLを挿入しようとしている旨の警告がでて強制終了してしまいます。
ここでは、toStaticHTMLを利用してHTMLを制限に収まる形にして挿入します。
あわせて、表示に必要のない要素はコメントアウトしました。
itemDetail.jsの中を以下のように変更します。

        var item = options && options.item ? Data.resolveItemReference(options.item) : Data.items.getAt(0);
        element.querySelector(".titlearea .pagetitle").textContent = item.group.title;
        element.querySelector("article .item-title").textContent = item.title;
        /*element.querySelector("article .item-subtitle").textContent = item.subtitle;
        element.querySelector("article .item-image").src = item.backgroundImage;
        element.querySelector("article .item-image").alt = item.subtitle;*/
        element.querySelector("article .item-content").innerHTML = toStaticHTML(item.content);
        element.querySelector(".content").focus();

また、グループの一覧を表示するgroupDetail.htmlも不必要な要素を表示しないようにして、概要の部分にcontentSnippetを表示したりします。

    <div class="headertemplate" data-win-control="WinJS.Binding.Template">
        <h2 class="group-subtitle" data-win-bind="textContent: subtitle"></h2>
        <!-- img class="group-image" src="#" data-win-bind="src: backgroundImage; alt: title" / -->
        <h4 class="group-description" data-win-bind="innerHTML: description"></h4>
    </div>
    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <div class="item">
            <!-- img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" / -->
            <div class="item-info">
                <h4 class="item-title" data-win-bind="textContent: title"></h4>
                <!--h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6 -->
                <div><img data-win-bind="src: counterImageURL" /></div>
                <div class="item-description" data-win-bind="textContent: contentSnippet"></div>
            </div>
        </div>
    </div>

さて、これで一通りブックマークのRSSから得られる情報を表示しました。
さらにCSSなどを使って見た目を調整したり、ユーザーさんのコメントを表示したり、たとえばReadabilityのAPIと組み合わせて、アプリ内で本文を確認できる仕組みをつけたり、色々な応用が考えられます。

DOM Explorer の使い方

さらにカスタマイズをしていくなかで、DOM Explorerの使い方を覚えておくと便利です。
デバッグを実行している間に、デバッグ → ウィンドウ → DOM Explorerで開くことができます。

左上の「要素の選択」をクリックすると、シミュレーターの方に画面が切り替わり、その中のカーソルの下にあるエレメントに青い枠がでます。
これで調べたいエレメントをクリックすると、現在どのようなHTMLが描画されどのようなスタイルが適用されているかが分析できます。

Stylesのタブの中はリアルタイムに値を変更できますので、ここで調節した値をCSSにして保存すればHTMLでアプリケーションを作っている感覚で見た目を変更する事ができます。

今後の道標

ここまでチュートリアル形式で Windows ストア アプリ開発の方法を見てきましたが、Windows ストア アプリ開発で使用できる機能は他にも様々に存在します。 さらに開発を進めていくうえで参考になるドキュメントを紹介します。

まず、JavaScript で開発する場合に限らず、Windows ストア アプリにどのような機能を実装すべきなのか、どのようなユーザー体験を提供すべきなのか、といったことは、下記ドキュメントをご覧ください。

• アプリのユーザー エクスペリエンスをデザインする

また、JavaScript で開発する場合に参考にすべきドキュメントについては、下記ページにロードマップとしてまとまっていますので、こちらを参考にしてください。

• JavaScript で Windows ストア アプリを開発するためのロードマップ JavaScript を使った Windows ストア アプリのためのロードマップ

ロードマップとしてまとまっているとはいえ、それでも量が膨大ですので、最初に読むと良さそうなドキュメント類をいくつか紹介します。

まとめ

さて、だいぶ駆け足でお送りしてきましたが、Windows ストア アプリの概要は掴めたでしょうか。
アプリという形にするためには、デザインガイドラインを含めいくつかの制限を乗り越える必要はありますが、やはりWeb開発者としては普段使い慣れ親しんだHTMLとJavaScriptという開発環境と、既存のWebアプリケーションの資産を有効に活用できるという事もあり、これまでのWindows デスクトップ アプリケーション開発に比べてぐっと身近に感じる事ができました。
今回のソースコードは以下で公開していますので、是非手許にcloneして試してみてください。
https://github.com/hatena/WindowsStoreAppTutorial

*

こんにちは、はてなCTOの id:stanakaです。
株式会社はてなは、10月下旬に東京オフィスを表参道へ移転します。合わせて東京開発センターを開設し、エンジニア採用をスタートします。東京開発センターの開設の意図などについて詳しくは、プレスリリースをご覧ください。

http://hatena.g.hatena.ne.jp/hatenapress/20120911/1347340094

今回、新東京オフィスの移転に先駆けて、オープン前のオフィス予定地でエンジニア向けセミナー「Hatena Engineer Seminar」を、2012年9月26日（水）に開催します。主にウェブサービスに関わっておられるエンジニアの方々を対象に、はてなのサービス開発のビジョンや体制について紹介します。また、開発チームのエンジニアスタッフより、具体的なサービス開発の企画、設計や、その中で使われている技術について紹介します。

懇親会には私 id:stanaka やスピーカーはもちろん、翌日のYAPC::Asia Tokyo 2012のために上京しているエンジニアも参加する予定です。はてなのサービスにご興味いただいている皆さまのご参加を心よりお待ちしています。

申し込みページ：（※2012年9月20日（木） 10:00締切） 応募締め切りました

参考リンク

• Kyoto.lisp公式ブログ
• International Lisp Conference 2012 in Kyoto, Japan

採用情報

• 会社情報：求人情報 - はてな
• エンジニア向けの「はてなサマーインターン」、2012年も開催します - はてなの日記 - 機能変更、お知らせなど