情報をスタック&可視化するサービスを作りたい

定期的に更新される情報。

数字だけで小難しかったり、単体で見てもわかりにくかったり。

そういうのをDBにスタックしてわかりやすく表示する機能を作ってみたい。

次の要素があると作りやすい。

  1.  1日1回定期更新
  2.  フォーマットが変わらない
  3.  意味のある数値が毎日変化する

今回は練習作としてFXのスワップ金利を対象に作ってみた。

※スワップ金利とは2国間の金利差を日割りにして付与するものです。

 

仕組み

基本的にAWSで収まる設計にする。

概要 : CloudWatch -> Lambda -> DynamoDB <- Lambda <- API  <- S3

  • 入力
    1. CloudWatch Events – Schedule: daily  で1日1回Lambda関数を起動する
    2. Lambda関数でスクレイピング+DB格納
  • 出力
    1. S3に置いたHTMLファイルからAPI呼び出し
      • 普通にHTTP POST(GETしたかったがうまく設計できなかった)
    2. APIからLambdaを起動
      • Lambda関数と統合する
    3. DBから検索結果を返す
      • JSON形式でパススルー

 

可視化

次に持ってきたJSONをグラフ化する。

グラフ作成系のJavascriptは結構あるけど、どれも面倒な感じ。

今回は比較的簡単そうでデザインと名前が好みのChart.jsを使ってみる。

これは基本機能は簡単ではあったけど、ちょっと変えようとすると難しい。

頻繁に仕様が変わっているのか、ブログや紹介記事なんかはまったく当てにならなかったので公式ドキュメント以外は信用しない方がいい(Update関連は公式通りではうまくいかなかったけど)。

出来上がったチャートはこんな感じ。アニメーションが心地良い。

swap

 

さて何をつくろうかな。

 

javascriptでGIFアニメを作る【jsgif】

htmlで通信なしにGIFアニメを作成したい。

そこで jsgif というライブラリがあったので使ってみた。

ダウンロード&解凍したらhtmlにリンクを追加。

読み込み終わったら次のようなスクリプト記述でGIFアニメが作れる。

addFrameでcontext要素を変えながら追加していくとGIFアニメになる。

オプションの1つで指定した色を透明として扱うこともできる。

encoder.setTransparent(0x0000FF); 

しかしコレはそのままでは使えなかった。

GIFEncoder.js の以下部分を変更。

 

 

これで指定した色が透明になる。

位置を変えながらfillTextすると次のようなGIFアニメが作れた。

index

これを使ってまたなんか作ってみよう。

 

音声合成に関して色々やってみる

テキストを投げるとWAVが帰ってくるAPIを作りたい。

サービスとしてはいくつかあってDocomoは使いやすかった。

こういうのは制限もあるので自分で作ってみたい。

 

Lambdaでお試し

慣れてるし、他にいいのも思いつかないのでAWSを使う。

LambdaでテキストからWAVを作る処理を書いてトリガーでAPIを指定する。

Lambdaで実行ファイルを起動したいときは次みたいな処理をはさむ。

 

ためしにAquesTalkPiがLambdaで動かないかなと思ったけど無理だった。

 

音声合成ソフトについて

次に音声合成ソフトを色々調べてみた。

  • 組み込み用
    • AquesTalk,AquesTalk2:アクエスト規約に従う。
    • OpenJTalk:修正BSDライセンス。
  • フリーソフト(実行ファイル)
    • softalk(ソフトーク):Windows向け。Aquestalk使用でアクエスト規約に従う必要あり。
    • textalk(テキストーク):Windows向け。OpenJTalk使用。
    • AquesTalkPi:ラズベリーパイ向け。アクエスト規約に従う必要あり。

 

実行ファイルは基本Winbdows向けだし、いろいろ自由に使うためにOpenJTalk使って自分で実行ファイル作ることにする。

 

他にもnodejsのモジュールが2つ見つかったけど、やりたいことと微妙に違ったのとEC2でインストールできなかったのでこれらはいったん保留。

 

OpenJTalkのインストール

とりあえずWindowsにインストールしてみる。

ここを参考にした。

Visual Studio 2015にVcvarsall.batがなかったので2013を追加インストール。

2015のときも思ったけど西暦よりバージョンが1少ないのは紛らわしい。

(今回はMicrosoft Visual Studio 12.0に配置された。)

 

これでWindows上で動作するようになりました。

今日はとりあえずここまで。

ここから先が果てしなく長そう…。

グルーヴコースター 3 リンクフィーバー場所一覧

最近グルーブコースターに嵌ってます。アーケードの方。

行きつけのゲームセンターだったら良いんですが、ちょっと遠出したついでにやりたいときに筐体が見つからなくて悲しい思いをしたので場所一覧を作りました。

とりあえず関東エリアだけですが。

なんとなくグーグルマップの埋め込みって難しいイメージがあったんですが、そんなことはなかったです。

これからちょっと凝った機能を追加しようとするとキツイのかもしれません。

 

新アプリ「お絵かきスタンプ」をリリース

新規アプリ「お絵かきスタンプ」をリリースしました。

さまざまな背景に好きなスタンプを配置して自分だけの絵を作るアプリです。

完成した絵はお気に入りに追加してみることができます。

 

今回は画像系のアプリが作りたかったのでアイデアノートにあったものをそのまま作りました。

デザインとかは前々作の「自然音響」から流用。

思いのほか画像の扱いがめんどくさいことが良くわかった。

もしダウンロード数が伸びたらスタンプ追加とかしようかな。

2 5 7 8

 

そろそろ設計からちゃんと考えたアプリをつくってみたいです。

情報配信系がいいけどどうするかなー。

新アプリ「どうぶつのこえ」をリリース

新規アプリ「どうぶつのこえ」をリリースしました。

12匹の動物のイラストをタップするとその動物の声がするアプリです。

昔こんな知育玩具もってた気がする。

 

「どうぶつのこえ」はこれを作ったときに思いついたのですぐにできました。

鳴き声のフリー音源はいっぱいあったのですが、このアプリで使いたいようなものが意外と少なかったです。

イラストはできるだけ統一感を出したかったのですが、やっぱり製作者が違うので若干の違和感がある。だけどそれぞれ子供向けっぽくて可愛いイラストが見つかったので問題なし!

本当は自分で書ければいいんだけどなー。

 

縦横どっち向きでも使えるようにしたけどヘッダを2種類用意したほうが良かったかも。

a b

 

新アプリ「自然音響」をリリース

新規アプリ「自然音響」をリリースしました。

雨、風、火、川のような自然の中で落ち着く音や、セミやカエルの鳴き声を組み合わせて聞くことのできるアプリです。

リラクゼーションとして雨の音のCDなんかもありますが、このアプリでは自分の好きな音を作って聞くことができます。

設定はお気に入りに保存できるので状況に合わせて、音を変えることが可能です。

深夜バスに乗っているときに、自然の音を聞きたいなーと思って作ったアプリなので落ち着きたいときなんかに使ってもらえるとうれしいです。

Screenshot_2016-08-15-12-27-48 Screenshot_2016-08-15-12-29-07 Screenshot_2016-08-15-12-31-21

 

 

新アプリ「ライツアウトパズル」をリリース

新規アプリをリリースしました。

ポケモンGOの充電中とかに作ってました。

ライツアウトとよばれる昔からあるパズルゲームです。

タイルをタッチすると触ったところとその上下左右に色がついて、全部の色をそろえるまで繰り返すやつです。

小学生くらいのときに5×5マスで15cm×15cm位のおもちゃを持っていて、当時はひたすらはまっていました。

 

Screenshot_2016-07-29-02-12-02 Screenshot_2016-07-29-03-46-37 Screenshot_2016-07-29-03-48-02

今回は作成そのものよりもクリアできるかの確認に時間がかかりました。

特に6×6の難易度ハードは結構ひどくて、何度もやり直して何とか100タップでクリアできました。

ぜひこの記録を抜いてみてください。

tab

 

ついでにポケモンGOはレベル20になりました!

20

 

新アプリ「漢字図鑑」をリリース

新規アプリをリリースしました。

第一水準漢字2965文字を一覧で見ることができるアプリです。

かなりニッチ。

それぞれの漢字をタップするとその漢字の画数、読み、意味を見ることができます。

また、気になった漢字はお気に入りに登録をすることができます。

 

私のスマホが古いだけの可能性はあるけど、ちょっと起動が遅いです。

割とチューニングがんばったけど起動後数秒とまる感じ。

あと検索機能つけたかったけど、設計レベルで変えないとできなそうなのでつけられなかったのが少し心残り。

漢字図鑑スクショ1漢字図鑑スクショ2

AWSを使って欲しい情報を自動取得する

やりたいことの概要

技術的にはクローリングとかスクレイピングとか呼ばれている。

クローリングはWebを自動で徘徊する技術で、スクレイピングはさらに欲しいものだけ抽出するような感じ。

例えばポータルのほうで技術ニュースリンクをまとめてるのはこの技術を使っている。

方法は色々あるけどAWSで簡単にできそうなものを2つ実装している。

けどいまいちしっくりこないので現状をまとめつつ、どう運用するのが一番いいか考えてみる。

1つ目の方法はEC2にヘッドレスブラウザを入れてJenkinsで管理するやり方。

2つ目の方法はLambdaで起動してCloudWatchで管理するやり方。

どっちもスクレイピング自体はjavascriptを中心にした方法で実現している。

方法1

概要

■EC2+phantomjs+casperjs+Jenkins

EC2インスタンスを立ち上げてその中で好きなようにしようというスタンス。

phantomjsはヘッドレスブラウザでcasperjsはそのユーティリティ。

javascriptで実行できる画面描写のないブラウザを利用して情報を集める。

Jenkinsのジョブで収集スクリプトを起動したり、データを格納したりする。

メリット

インスタンス内でできることは何でもできるので拡張性が高い。

デメリット

インスタンスのメンテナンスが必要。EC2インスタンスは起動時間課金なのですでに運用しているインスタンスに相乗りしたり、必要に応じて起動/停止をしないとお金がかかる。

スクレイピング実行部分のサンプル

ブラウザとして巡回するので広告ページを待ったりしている。

ヘッダをいい感じに設定すれば特に待つ必要はないかもしれない。

方法2

概要

■Lambda+nodejs+cheerio-httpcli+CloudWatch

インスタンスを保持せずサービスとして使おうというスタンス。

cheerio-httpcliはnodejsのスクレイピング用モジュール。

LambdaにZIPを置いてevent sourceでCloudWatch Events – Scheduleを設定する。

メンテ不要でAWSの他サービスが使いやすい利点がある反面、Lambdaの制限がある。

特にマックス300秒の制約を気にしないといけないかも。

起動以外は取得、整形、格納なんかは全部Lambdaの中で行う。

メリット

実行時間のみ課金されるので使わないときのメンテが不要。

AWSの他サービスを使いやすい(IAM ロールの設定などが簡単)。

デメリット

Lambdaの制約内でやる必要があるので拡張性は低め。

スクレイピング実行部分のサンプル

書き方は色々あるけど一番簡単そうなPromise数珠繋ぎで書いている。

cheerio-httpcliに関しては作者さんがかなり丁寧に解説しているので使いやすかった。

まとめと感想

どちらも多少ニッチな知識が必要だけどjavascriptを多少知っていれば難しいとこはないし、ググればすぐに情報が手に入るので実装は簡単だった。

クライアントアプリケーションを途中でかませたりするような場合にはEC2内でやって、AWS内だけで済む処理なら基本Lambdaにするのがいいかなと思う。

今回の組み合わせの他にもEC2でnodejs動かしたり、Lambdaでphamtomjs動かしたりする例も見かけたけど特にそうする理由はなさそう。

kimonoみたいな専用サービスを使うとスクレイピング実施部分はほぼノータイムでできるんだろうけど、利用するサービスが増えると色々と面倒見ないといけなくなりそうなのでしばらくはAWSに依存してみようと思う。