[アプリ] ランダム新聞記事ジェネレータを作った

このエントリーをはてなブックマークに追加

HTML5 Japan Cup用にアプリを作りました。ランダムで記事を作って、読んで楽しむだけのウェブサービスです。

(2014/08/26)公開を停止しました。

使い方などは上のリンク先で。開発の徒然は以下のread moreから。

生成された記事がこちら。

記事スクショ

開発の経緯

HTML5 Japan Cupというコンテストがあるのを友人から教えられたんで、せっかくなのでということで作ってみたアプリです。ちょうどコンテスト時期に作ったCapTubeについては既に公開していたんですが、新聞記事データの提供があまりにも素晴らしかったんで、思わず2つめの作品を投稿してしまいました。

新聞記事が過去10年分取得できます。スゲー。概要のみとはいえ、普通に買ったらウン万円かかるはずです。ただ、利用規約上8月いっぱいまでしか利用できないので、9月になったらサービス終了です。

開発小話

使ったライブラリなど。

html2canvas

なんといってもこれ。HTMLの任意要素をcanvasに変換するライブラリです。どうやって変換してるんだ?と思って軽くソースを見てみたら、自前で要素のスタイルを解析してcanvasにレンダリングしてました。力技すぎィ!

さすがに要素によってはレンダリングが不十分なようで、たまに失敗します。主にIEやSafariの対応がイマイチのようですね。それでも十分なほど対応してます。

h2v.js

縦書きライブラリ。IEは昔から縦書きに対応してたんですが、他のブラウザはまだ全然対応してません。最近になってChromeが対応したのかな?このライブラリは大抵のブラウザで縦書き可能にします。

縦書きライブラリは他にもいくつかあるのですが、他のはhtml2canvasとの相性が悪くて断念しました。これもたまにエラーはいて画面が固まるときがありますが、たぶんライブラリというより使い方が悪いんだと思います。

マルコフ遷移

ランダム記事の生成には、マルコフ遷移を使ってます。単純なものなので自前で作りました。

マルコフ遷移って何?という人はググったほうがいいように思いますが、ざっくりいうと、「ある単語の次にどの単語が来るか」という情報を事前に文章から学習しておいて、作るときは次々と単語をつなげていく、というものです。単純ですね。

今回のジェネレータは、前の単語を3単語にしています。「3単語の組み合わせの次にどの単語が来るか」というわけです。3単語くらいでいい感じに文章が乱れます。

その他

  • 画像エフェクト
    • より新聞らしく、ノイズなどのエフェクトを画像にのっけようと思いましたが、ノイズ載せたら画像のファイルサイズがやたらでっかくなって諦めました。今でもでかいけど。toDataURLの圧縮率のせいにしておきます。
  • Twitter API
    • tmhOAuth.phpを使って画像投稿機能を付けました。Twitterに直接画像投稿できるんですね。これは楽ちん。

さいごに

手遊びで作ったんですが、結構面白いものができました。Mash upって楽しいね!

このエントリーをはてなブックマークに追加

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">