Pixivから画像(サムネイル)を取得する

Pixivは外部にAPIなどを公開していないので、その画像を取得するのは容易ではありません(?) しかしながらTwitterクライアントを作っているとどうにもサムネイルを表示したいと感じることがままあります。

そこで、若干グレーなことをしつつPixivのIDから画像のURLを取得する方法を調べたので列挙しておきます。

既出だったら申し訳ないです (2016/06/20時点の記事です)

その1 ブログパーツ用のものから持ってくる

この方法では

  • 画像のIDがわかれば置換などで一発で取得できる
  • 画像に枠がつく
  • R-18不可

取得方法は簡単で以下のURLにアクセスするだけです。 http://embed.pixiv.net/decorate.php?illust_id=<イラストID>

こんな感じに画像が取得できます。 http://embed.pixiv.net/decorate.php?illust_id=32092803

その2 スクレイピング

その名の通り、スクレイピングをして画像のURLを取得する方法です。 が、めんどくさい割にR-18画像も取得できないのでおすすめはできません。

http://www.pixiv.net/member_illust.php?mode=medium&illust_id=32092803

注意したいのが、リクエストヘッダにRefererの指定がいることです。 画像取得時にも必須です。

C#によるサンプル

var url = "http://www.pixiv.net/member_illust.php?mode=medium&illust_id=" + id;

HttpClient client = new HttpClient();
client.DefaultRequestHeaders.Add("User-Agent", "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.84 Safari/537.36");
client.DefaultRequestHeaders.Add("Referer", url);

HttpResponseMessage response = await client.GetAsync(new Uri(url));
response.Content.Headers.ContentType.CharSet = "utf-8";
string contents = await response.Content.ReadAsStringAsync();

var doc = new HtmlDocument();
doc.LoadHtml(contents);
var imgContainer = doc.DocumentNode.Descendants("div").Where(d => d.Attributes.Contains("class") && d.Attributes["class"].Value.Contains("img-container"));
var imgUrl = imgContainer.First().Descendants("img").First().GetAttributeValue("src", "");

HtmlAgilityPackを使用しています。

その3 埋め込みパーツ用のものから持ってくる

この方法ではR-18画像をも持ってこれるので良さげです。 ただ、mediumサイズ以外ではCookie?の取得が必要っぽいので注意が入ります。 mediumサイズなら特に必要ないので楽ちんです。

流れとしては

  1. http://embed.pixiv.net/embed_json.phpにアクセスしてjsonp形式のデータを取得
    • パラメータはcallback, id, size
    • size{large, medium, small}のどれか
    • idはイラストID
    • callbackjsonpのやつ なんでもいい
    • 例) http://embed.pixiv.net/embed_json.php?callback=oppai&size=medium&id=32092803
  2. 得られたjsonpのデータを整形してparse
  3. imgのURLを読み取って終わり

画像サイズmediumの場合、得られる画像のURLが http://i2.pixiv.net/c/240x480/img-master/img/~ という形式になっているのですが、 これがsmallなら240x480の部分が150x150、largeなら600x600となるだけなので、 一回APIにアクセスするだけで3種類の画像サイズのURLが取得できるお得なものになっています。

C#によるサンプル

var url = "http://embed.pixiv.net/embed_json.php?callback=test&size=large&id=" + id;

HttpClient client = new HttpClient();
client.DefaultRequestHeaders.Add("User-Agent", "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.84 Safari/537.36");
HttpResponseMessage response = await client.GetAsync(new Uri(url));

var resjson = await response.Content.ReadAsStringAsync();
resjson = resjson.Remove(0, 5).TrimEnd(')');
var jobject = JsonConvert.DeserializeObject<JObject>(resjson);
            
var imgUrl = jobject ["img"].ToString();

Newtonsoft.Jsonを使用しています。

その4 非公式APIを叩く

画像のURL取得にログインがいる上に、完全にグレーな感じなのでそこまでお勧めできません。 Pixivに関連するサービスを作る時以外は触らないほうが吉

宣伝ではないですが、自分がPixivビューアを作るときに作った.NET向けのライブラリがあるので、 それを使うと比較的簡単にURLが取得できるかなと思います。

Pythonならpip install pixivpypixivpyという便利なライブラリを叩けます。

C#によるサンプル

var tokens = await Pixeez.Auth.AuthorizeAsync("username", "password");
var work = await tokens.GetWorksAsync(51796422);
var thumbnailUrl = work.ImageUrls.Px480mw;
var imgUrl = work.ImageUrls.Large;

Pixeezを使用しています。

まとめ

取得方法 ログイン R-18 取得の簡単さ おすすめ度
ブログパーツ 不必要 ×
スクレイピング 不必要 ×
埋め込みパーツ 不必要
非公式API 必要 ?

お好きな方法をお選びください。

一番楽なのがブログパーツのものを使う方法なので、ツイッタークライアントのプレビュー用ならこれ一択かなと思います。

サムネイル用の何かをpixivさんが公開してくれると非常に嬉しいのですが・・・

間違いなどがあったら指摘してくれるとありがたいです。

UWP向けTwitterクライアント 「Flantter」を公開しました!

Windows10向けに作成したTwitterクライアント 「Flantter.MilkyWay」をこの度Windowsストアで公開しました!

ダウンロードはこちらよりどうぞ。

以前のバージョンとの比較

  • 起動時間の短縮 (以前のものに比べて 2,3倍早くなっています)
  • 安定性の向上
  • カラム切り替え方法の変更 (スワイプでタブを変更できるように)

カラムの切り替えがデスクトップで使いづらいと思う場合は、ショートカットキー(,)を使ったり、 各カラム名が表示されている細い部分でマウスホイールをくるくる回すことで直感的にカラムの切り替えが可能になります。

以前のバージョンにはあって最新バージョンにない機能

  • クエリを用いたツイートの検索

使用方法等

こちらwikiよりショートカットキー一覧やFAQが確認できます。

もう少しFlantterに関する詳しい話

UWP向けFlantter 「Flantter.MilkyWay」のαテスト

昨年の3月からちまちま作っていた3世代目のFlantter 「Flantter.MilkyWay」のαテスト的な何かを開始しました。

Flantter.MilkyWay

2世代目のFlantter.Cascadeと明らかに違う点が幾つか存在します。

  • カラムの選択方法
    • 従来の方式からスマートフォンなどでよく見受けられるスライドでカラムを切り替える方式に
  • デザインの変更
    • SettingsFlyout(脇から出てくる画面)もテーマにそって色が変わるように
  • メモリ使用量と起動速度
    • 以前に比べて軽量かつ高速になっている(はず)

内部的な話をするならばFlantter.MilkyWayはFlantter.Cascadeソースコードをほぼ流用していません。一から作成しました。 これはスパゲッティになったコードをほぐすためであります。

ダウンロードはこちらよりどうぞ

ダウンロード

インストールにはWindows10を開発者モード (又はサイドローディングモード?) に切り替える必要があります。

なぜUWP?

UWP向けで無料のツイッタークライアントにはストアにはほとんどないと思います。 しかしながら、UWPのアプリは従来のデスクトップ向けアプリやMetroアプリと呼ばれるWindows8, 8.1時代のアプリと比べて、 起動やメモリ使用量を高速にできるという大きな利点があります。

そこで3世代目のMilkyWayはUWPで作り、さくさく快適なツイッター体験をできるような形で作ろうと思い制作しました。

その他

ネーミング

MilkyWayに特に意味はありません。 ただ、目についた単語をサブタイトル的な形でつけただけです。

ストアにいつ出すか

αテストと銘打ってますがストアに出さないかぎり大半の人に使ってもらうことはできないと思っています。 なので時間を少し置いて問題がなければWindows10向けにストアに出そうと思います。(大体1ヶ月後くらい)

その時に現在のストアからFlantterを削除し、Flantter.CascadeをFlantterに改名。 名前を変えたFlantterでWin8.1向けにCascade, Win10向けにMilkyWayを配信しようと考えています。

なのでCascadeで寄付した時に使用できる機能はMilkyWayでも使用することが可能です。

技術的なお話

Flantter.MilkyWayはできるだけMVVMっぽく書くことを常に心のどこかに置いて作成していました。 その上で使用したReactivePropertyはModelとViewの間のViewModelをシームレスに繋ぐことができてホントにおすすめです。

https://github.com/cucmberium/Flantter.MilkyWay

Flantter.MilkyWayの軽量化に関する話や、画像プレビューで使用したコードとか、 資料として残しておきたいと感じる話は多々あるので時間ができ次第このブログにまとめようかなと思います。

感想

1年2ヶ月もかかってようやく完成(しかもCascadeにあった一部機能は未実装)なのでよっぽどモチベーションがなかったのだなと思いました。 Flantterに関してはもう1からソースコードを書き直すことはないので、今作成したMilkyWayをちまちまアプデしていく感じになる予定です。

アプリを作成して思ったことといえば、「UWPに関してMicrosoftの本気が見えるくらいかなり力が入ってる(と思われる)のにイマイチ盛り上がりに欠けているなぁ」ということです。 自分としてはそれなりに(デスクトップとモバイル、Xboxなどを一気に取り込める)魅力的な市場であると思うので、もっと市場が活発になってくれるといいなと心から思っています。

ReactivePropertyをUWPの共有コントラクトで使う時の注意

共有コントラクト

UWPではWindows8, 8.1時代と同様の方法で共有コントラクトを実装することが可能です。

ただ、UWPでは共有コントラクトと普通にアプリを起動した時の画面のUIスレッドが異なるにも関わらず、 同時に起動しても一つのインスタンスしか参照しないため、 メインのアプリを起動した状態で共有コントラクトを開きReactivePropertyで通知を行おうとすると、 メインの画面側のUIスレッドで通知を行なってしまうため例外が発生します。 (おそらくWin8.1等でも)

幸いReactivePropertyでは通知するスレッドを明示的に指定できるので、以下の様なコードを書けば問題なく使えるようになります。

var uiThreadScheduler = new SynchronizationContextScheduler(SynchronizationContext.Current);
var prop = new ReactiveProperty<string>(uiThreadScheduler);
var prop2 = this.Model.Properties.ToReadOnlyReactiveCollection(x => new PropModel(x), uiThreadScheduler);

UWP向けにPixivビューアを作った話

忙しさが有り余って気付いたらTwitterクライアント(Flantter)ではなくPixivビューアを作っていたというお話。

Pixivビューア 「Pixitle」

主な機能として以下が備わっています。

  • みんなの新着画像の確認
  • ランキングの確認
  • 自分がブックマークした画像の確認
  • 自分がフォローしている人のフィードの確認
  • 検索機能

使用するためにPixivのユーザー名とパスワードが必要です。

ダウンロードはこちらよりどうぞ

ダウンロード

作った理由など

ちゃんとしたPixivビューアがUWP向けになかったというのと、 個人的に画像漁るのにブラウザ使うのがめんどかったとか、理由は様々です。 (本当はダウンローダを作りたかったのだが、UWPには向かないというのと、流石に怒られそうなのでやめておいた)

その他

R-18画像は見れないの?

ごにょごにょすることで見れます。 具体的には設定画面のテキストボックスにそれっぽい文字列をカンマ区切りで入れることで可能です。

UWPなのでデフォルトで表示したり、表示できる設定を付けてたりすれば、認定時にエロリジェクトされます。

怒られないの?

すいません許してください!何でもしますから!

技術的なお話

Pixitleの技術的なお話についてですが、どのようにして画像取得しているかとかは一応伏せておきます。 が、ググればそのへんはすぐ出てくるので(pythonのライブラリとか)そこら辺を参考にしています。

アプリの見た目はよくある感じに仕上げました。 SplitViewを全体に配置し、ContentとしてFrameを入れてメニューのボタンを押すたびにNavigateするような形です。 それ以外の部分に関しては現在作成中のFlantterより流用した部分が多いので(画像ビューアとか)そちらを参照すれば似たようなコードが見れます。

https://github.com/cucmberium/Flantter.MilkyWay

Pixitleのソースはストアから消えるときに公開します。

UWPで初めて広告をつけようと思ったのですが例外等多発したせいでまともに表示されない可能性があります。 ユーザー側には関係ないお話ですが。

感想

突貫作業で作成したアプリなので、まだ付けたい機能とかあります。(共有機能とか) ただ、ストアのポリシー的にも、Pixivさん側的にも怖いので、そこまでこだわって作ろうとは思ってないです。

このクライアントを作っていて、結構腐女子の方々の勢いがすごいなー と思いました。 ランキングも結構おそ松さん関係が多くて驚いています(初めて知っただけ)

その他

UWPでアプリをストアに公開するのは初めてでしたが、意外と以前と変わらない感じでした。 次はGW終わりまでにFlantterを公開したい・・・

あともう少し時間を作ってこのブログも定期的に更新出来たらいいなと思ってます。

BMS Playerを作ってみた(ほんとに再生するだけ)

学校が死ぬほど忙しかったり、メインで使ってるPCが壊れたりして全然時間が作れないので、 Flantter.MilkyWay(Ver.3)の開発は当分おあずけです。

なんでBMSPlayer作ってるんだっていうのは、あくまで気分転換です。

BMSって

Beatmaniaに似たゲームです。 詳しくはぐぐって

BMSPlayerって

BMSというフォーマットの何かを再生するソフトです。 現在(2015.05.24)の主流は主にLR2でしょうか。

BMSの再生がどれだけ大変なのか気になったので試しに作ってみました。

ソースコードは↓ github.com

ライブラリにBoost先生を使っています。Boost先生は非常に便利です。 ちなみに音を再生するだけのソフトです。 BPMの変化やストップモーションについていけません。(BPMの変化だけならちょっと再生部を書き換えるだけだと思う) あとWAVの読み込みしかできません。 サウンドの再生部分についてはほとんどがhttp://www.charatsoft.com/develop/otogema/index.htmにあるもののパクリです。

感想

2日で作ったゴミですが、なんとか再生できるのは再生できます。(XhroriaとかBloomingとか) 再生した後にエラー落ちします。直せたら治したいです。

感想ですが、BMSプレイヤーを作るのはこんなに難しかったんだなと思いました。 再生するだけでこれなので、実際にプレーできるくらいのソフトになると死ぬほど大変でしょう。 LR2などのプレイヤーは神だと思いました。

気が向いたら今後もいじるかもしれません。

超参考(ここだけ見て作った)

http://www.charatsoft.com/develop/otogema/index.htm http://hitkey.nekokan.dyndns.info/cmdsJP.htm