Qiita の記事を無理やりスライドショーにする

# 概要
Qiita の記事をそのままプレゼンテーションの資料として使えたら、資料作成の時間を減らせるのではないかと思いました。というわけで、reveal.js を使って、 Qiita 記事の HTML を無理やりスライドに変換するアプリケーションを作ってみました。

## [reveal.js](https://github.com/hakimel/reveal.js/)
HTML でスライドを作成することができる JavaScript ライブラリです。プラグインで Markdown もサポートしています。歴史のあるライブラリですので、 Qiita にも結構情報があります。

[「reveal.js」の Qiita 検索結果](http://qiita.com/search?q=reveal.js)

# 操作方法

## ダウンロード
https://github.com/toastkidjp/qiita_slide/releases からダウンロードした zip を展開します。

## 実行
そのフォルダに移動し、下記のコマンドを実行します。今回は「[Scala 初心者の独り相撲初場所 五日目](http://qiita.com/y_q1m/items/8edef17bf0d86abff226)」を使ってみます。第1引数には Qiita 記事の URL を渡してください。

```sh
$ java -jar qiita_slide.jar http://qiita.com/y_q1m/items/8edef17bf0d86abff226
Generate slide html to slide.html
```

テーマを指定したい場合は第2引数で指定できます。serif, moon, sky, simple, solarized, beige, white, night, blood, league, black が指定可能です。省略した場合は black が使われます。

```sh
$ java -jar qiita_slide.jar http://qiita.com/y_q1m/items/8edef17bf0d86abff226 sky
Generate slide html to slide.html
```

実行すると、 slide.html というファイルが生成されています。そのファイルをブラウザで開いてみましょう。

# スクリーンショット
<img width="1077" alt="スクリーンショット (64).png" src="https://qiita-image-store.s3.amazonaws.com/0/102004/2dab0781-4494-d480-0b64-53ba0bff4507.png">
このような感じの HTML スライドが生成されています。

<img width="1076" alt="スクリーンショット (65).png" src="https://qiita-image-store.s3.amazonaws.com/0/102004/45e7ff95-2a47-f77f-8094-e163775272e5.png">
左右キーでスライドを移動できます。

<img width="1073" alt="スクリーンショット (66).png" src="https://qiita-image-store.s3.amazonaws.com/0/102004/84dfac73-00ac-de27-7e74-44ce5e86c009.png">
当然ですが、 reveal.js の機能をそのまま使えます。Oキーでスライド一覧画面を表示できます。

<img width="1076" alt="スクリーンショット (62).png" src="https://qiita-image-store.s3.amazonaws.com/0/102004/792d6c0d-ec26-df7e-d17f-9889f8755640.png">

なお CSS テーマは数種類使用可能です。

## ほか
ブラウザで開いている状態で URL に ?print-pdf をつけると、印刷用レイアウトを表示できます。Windows10 か Google Chrome を使っていれば、PDF 出力も可能です。

# 実装
例によって実装の全体は [GitHub Repository](https://github.com/toastkidjp/qiita_slide/tree/v0.0.0) をご覧ください。

## 流れ
1. Web 上から Qiita の記事 HTML を取得
2. HTML を parse して reveal.js の扱える形式に変換
3. ファイルに出力

## ポイント

### Qiita 記事の取得
OkHttp を使って Qiita 記事を取得します。特に変わったことはしていません。

```java
final OkHttpClient client = new OkHttpClient();
final Request req = new Request.Builder().url(url).build();
try {
    return Optional.of(client.newCall(req).execute().body().string());
} catch (final IOException e) {
    e.printStackTrace();
}
return Optional.empty();
```

### Qiita 記事の parse ＆ reveal.js 対応 HTML への変換
取得した記事の HTML を1行単位で検査し、変換していきます。hxタグごとに1つのスライドとして区切っていきます。タイトルの通りかなり強引に変換しているのが下記のソースから十分おわかりいただけるのではないかと思います。reveal の仕組みと競合するため、span は文字列処理で消してしまいました。

```java:強引な処理
for (final String line : contents) {
    if (line.contains("articleBody")) {
        isContent = true;
        continue;
    }
    if (line.contains("<div class=\"hidden\">")) {
        break;
    }
    if (!isContent) {
        continue;
    }
    if ((line.contains("<hr>") || line.matches("^<h[1-6r]>.*")) && sb.length() != 0) {
        converted.add(String.format("<section>%s</section>", sb.toString()));
        sb.setLength(0);
    }
    final String trimmed = line.startsWith("<") ? line.replace("<hr>", "") : line;
    if (trimmed.length() != 0) {
        sb.append(trimmed.replaceFirst("<span id=.* class=\"fragment\"></span>", ""))
          .append(LINE_SEPARATOR);
    }
}
```

## 注意点
1. HTML を parse する部分が Qiita 専用なので、他の Web サイトにそのまま応用することはできません
2. そもそも HttpClient を使って Qiita の記事を直接取得してもよいのかわかりません

# まとめ
Qiita 記事をスライドショーに変換するアプリケーションを作ってみました。記事として優良なコンテンツをそのままスライドショーにしても有効とは限りませんが、ちょっとした発表をやりたい時には使えるのではないかと思います。

# 参考
1. [reveal.js](https://github.com/hakimel/reveal.js/)