PowerPointでいらすとやのイラストを使う為のアドイン

Pocket

久々に.NETでなんかした記事です。

もくじ

  1. 何を作ったのか/使い方
  2. アドインの中はどうなっているのか
  3. WPFで良い感じにする
  4. HtmlAgilityPackで検索しつつ画像をとってくる
  5. PowerPointアドインの流儀に沿って画像を追加する
  6. まとめと補足

1. 何を作ったのか/使い方

PowerPointの拡張として「いらすとやのイラストを検索し、ポチるとスライドに追加できる」というのを作りました。

使い方はGitHubのほうを見てください。

GitHub側にも記載していますが、バイナリ版のインストーラは取りあえずGoogle Driveに突っ込んであります。

 

2. アドインの中はどうなっているのか

GitHubにソースあるので読んでもらえればいいのですが、大きく3セクションに分かれています1

  • WPFのユーザーコントロールで体裁を整える
  • いらすとやのウェブページから指定キーワードでの検索結果を取得し、サムネイルや実際の画像のURLを抽出する
  • 得られた画像をPowerPointアドインの流儀に沿って追加する

それぞれ独立性が高い機能です。

 

3. WPFのユーザーコントロールで体裁を整える

PowerPointアドインはWindows FormのUserControlベースでUIを作らないといけないことになっています。

しかし私はWPFのUserControlが使いたかったため、ElementHostを使って
実質WPFのコントロールでUI作ってるような状況に持ち込みました。

ThisAddIn.cs

一般的なやり方は「WPFコントロールをWindowsフォームに配置する」とかに載っています。

また、今回は検索結果の各アイテムを「サムネイル画像とテキストをセットにしたボタン」
という形で表示したかったので、以下のようにItemsControlDataTemplateを組み合わせて
体裁を整えています。

この辺の流れについては「ItemsControl 攻略 ~ 外観のカスタマイズ」とかが参考になります。

もし書籍で似たような事を勉強したい場合は「プログラミングWindows 第6版」あたりを読みましょう。

 

4. HtmlAgilityPackで検索しつつ画像をとってくる

他所のブログにもさんざん書かれている話ですが、いらすとやにはAPIが無いので、
いわゆるウェブスクレイピングが必要です。

C#の場合、HtmlAgilityPackというパッケージがあり、
これを使うと比較的楽ちんに要素抽出ができます。2

やり方は3ステップに区切れます。

  • WebClientなどを使い、検索結果のHTMLを持ってくる
  • HTMLテキストをHtmlAgilityPackに読ませてHtmlDocumentにし、XPathで読める状態に持ち込む
  • XPathを使って良い感じに解析する

アドインのコードよりもサンプルで紹介した方が分かりやすいため、
ここではコンソールアプリケーションの例を示します。

まず新規作成したプロジェクトでNuGetパッケージからHtmlAgilityPackを追加します。
また、参照としてSystem.Webを追加しておきます。
その状態で、次のようなコードを書きます。

 

実行して「ロボット」を検索した場合の出力を抜粋するとこんな感じになります。

 
各サムネイル要素に対し、そのサムネイルに対応するイラストページのURLが取得できていることが分かります。
実際のアドインでは、各イラストページに対してもふたたび上と似たような処理を適用し、
最終的にフルサイズ版イラストのURLを取得しています。

上の例では表示されてませんが、ヒット件数が多いキーワードを指定すると、
「Next:」のURLも表示されるようになります。これを使えばページ遷移みたいなことも可能になります。

もし手元で試す場合は、いらすとやの検索ボックスを使った場合と
見比べてみると分かりやすいかと思います。

なお、ここで「この検索に使うXPathの文字列ってどうやったら分かるの?」という疑問が出てくると思います。
基本文法はMSDNで読んだりググると出てきます。

実際にやるときの方法は私の場合こんな感じです。

  1. ウェブブラウザの開発者モードでソースとビジュアル階層を見比べる
  2. 抽出したい要素の階層を見つける
  3. その要素のタグや属性値を見て、うまく特定できそうなXPathをカンで決める

典型的なパターンではclass属性を指定したdivとかで割とうまくいきますが、臨機応変にやってください。

さらにもう一つ。上記コードの処理ではサムネイルの画像URLが完全には拾えません。
JavaScriptが絡んでるのがその原因です。

アドインのコードでは、抽出した要素に含まれるJavaScriptコードを
さらに正規表現でバラして、サムネイル画像のURLだけ取り出す、といったこともやっています。
HTMLの中身のテキスト解析はHtmlAgilityPack単体ではどうにもならないので、
うまく諦めて他の方法に切り替えるのも大事なポイントです。

 

5. PowerPointアドインの流儀に沿って画像を追加する

ふたたびアドインのコードに戻って、仕上げの処理です。
HTMLからの処理としては画像URLを抽出し、画像をダウンロードするところまでが可能です。

それをPowerPointの画像に追加する際は、(ちょっとダサいですが、)
いったんローカルファイルに保存することで処理が通ります。

ThisAddIn.cs

現在のスライドを指定する方法((this.Application?.ActiveWindow?.View?.Slide as Slide))も、
知ってると便利そうな小技かもしれません。

 

6. まとめと補足

なんだかんだでOfficeのアドインは作りやすいなあと思いました。

そして最後の最後で今更な補足になりますが、本アドインのネタは私のオリジナルではないです。
ネタ元はTwitterでピリ辛(@lifeslash)さんがやっていたもので、
より具体的に言うならこの記事の後発的なマネです。

そちらのケースでは見たところ「WinForms+スクレイピング正規表現縛り」でやってそうに見えたので、
「WPF + HtmlAgilityPackのほうがそれっぽいし手間減るのでは」みたいな直感に基づいて
ガーッと作ったのが今回のやつです。

…まあ、この辺は知識背景にもよるので何とも言えませんが。


  1. 社会人のテクニックとして「なんでもいいから3つに分けておけばそれっぽくなる」というライフハックを学びました。 
  2. もちろん一択ではありません。他の例としてはC#でスクレイピング:HTMLパース(Linq to Html)のためのSGMLReader利用法等があります。 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です