カテゴリー別アーカイブ: JavaScript

Google Calendar のデータをXMLに加工して monthly.js に 流し込む

所属している草野球チームのHP制作を担当していて、「スケジュールを載せたい」という要望が来ました。数週間ぐらい前に「そういえば何かカレンダーをキレイに表示させるJSライブラリがあったよなぁ」と「monthly.js」思い出して、Googleカレンダーとこれを使って表示させることにしました。

練習場所まで全世界に公開するのも気持ちが悪いので、Googleのカレンダーは「非公開」の設定のままで、どうにか情報を取得するすべはないものかと調べると、OAuth2なGoogle Calendar API というAPIを使えばいいと載っていました。( OAuth2じゃないAPIもあるっぽいですが、実装が複雑になるのでOAuth2の方式がいいよみたいな情報が公式ドキュメントに書かれていた。うろ覚え。)

しかし、肝心のPerlの解説がない。(仕事ではRubyがメインですが、草野球のホームページぐらいの規模ならPerlで書きたい。)ライブラリ自体は「Google::API::Client」という名前でCPANに登録されているのでこれを使うことにしました。

client_secret.json みたいなファイルをGoogle APIのページから取得すると(詳細は「celient_secret.json google」でググッて)あとは、以下のコードで、初回時のみ手動で認証してリフレッシュトークンを取得すると、それ以降はよしなにしてくれます。(ずっとアクセスを待ち受ける必要があるWebアプリにも組み込めます。)

以下のようにXMLが出力されます。

Googleカレンダーが終了時刻それ自体はイベントの期間に含めない(不等号に「=(イコール)」が付くかどうかの違いのようなもの) のに対して、monthly.js は終了時刻それ自体をイベントの期間に含めるという違いがあるため、endtime(enddateじゃなくて)がない場合は、enddate を一日早めるという面倒な処理が追加で必要になります。(上記のコードではそれが追加されていないので注意。)

上記の面倒な処理を終えて「monthly.js」のマニュアルを読んでWebアプリに組み込むと、以下のように美しく表示できるようになります。ちなみに、高速で「月」を切り替えるとイベントが移動したり増殖したりする「monthly.js」のバグを作り終えてから発見しました。(ぎりぎりクリティカルなバグでもないかというあんばいですが…)

スクリーンショット 2016-02-18 0.34.09

スクリーンショット 2016-02-18 0.34.24

お疲れ様です。( ´Д`)=3

Web Speech API でツイート

Web Speech APIのためにマイク買ったので、音声でツイートできるAjaxなCGIを適当に書いてみました。
(CGIモジュールなんて使うのもクソ久しぶり)

よく使うような単語やフレーズの認識精度はすげーです。

Web Speech APIの仕様は、「Web Speech API Specification」を参照。

完成したやつ↓
(隣の部屋の人に聞こえないようマイクに近づいて小声でしゃべっています)

「index.html」

「voice_tweet.css」

「voice_tweet.js」

「voice_tweet.cgi」

Node.jsからAcme::Ikamusume

Node.jsからCPANモジュールを読み込めると聞いて。
草野球から帰って、nvm,npmとか初めて入れて早速書いたら普通に動くがな。

出力↓

いろいろ試したけど、decode_utf8 されたのを渡したいときはPerlのサブルーチン作ってそこでdecode_utf8するのが良さそうな感じかな(?)
perl.useで読み込むサブルーチンを選択とかはできないのか、テストにはそれらしいコードが見つけられなかった。